dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use standard css instead of compass mixins

Browse Source 
Autoprefixer will take care to add vendor prefixes if necessary
This commit is contained in:
Geremia Taglialatela 2018-09-12 14:35:54 +02:00
parent dda10775a3
commit 36ce6b8b01
13 changed files with 79 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/app/components/dashboard.scss
View File

@ -22,7 +22,7 @@ div.tb-widget {
overflow: hidden;
outline: none;
@include transition(all .2s ease-in-out);
transition: all .2s ease-in-out;
.tb-widget-title {
max-height: 60px;
@ -99,7 +99,7 @@ md-content.tb-dashboard-content {
outline: none;
.gridster-item {
@include transition(none);
transition: none;
}
}

4
ui/src/app/components/grid.scss
View File

@ -20,7 +20,7 @@
}
.tb-card-item {
@include transition(all .2s ease-in-out);
transition: all .2s ease-in-out;
md-card-content {
max-height: 53px;
@ -46,7 +46,7 @@
.tb-current-item {
opacity: .5;
@include transform(scale(1.05));
transform: scale(1.05);
}
#tb-vertical-container {

6
ui/src/app/components/menu-link.scss
View File

@ -16,7 +16,7 @@
@import "~compass-sass-mixins/lib/compass";
.md-button-toggle .md-toggle-icon.tb-toggled {
@include transform(rotateZ(180deg));
transform: rotateZ(180deg);
}
.tb-menu-toggle-list.ng-hide {
@ -28,7 +28,7 @@
z-index: 1;
overflow: hidden;
@include transition(.75s cubic-bezier(.35, 0, .25, 1));
transition: .75s cubic-bezier(.35, 0, .25, 1);
@include transition-property(height);
transition-property: height;
}

11
ui/src/app/components/react/json-form.scss
View File

@ -28,7 +28,7 @@ $input-label-float-scale: .75 !default;
line-height: 12px;
color: rgb(244, 67, 54);
@include transition(all 450ms cubic-bezier(.23, 1, .32, 1) 0ms);
transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
}
.tb-container {
@ -77,14 +77,13 @@ label.tb-label {
bottom: 100%;
left: 0;
color: rgba(0, 0, 0, .54);
transition: transform $swift-ease-out-timing-function $swift-ease-out-duration, width $swift-ease-out-timing-function $swift-ease-out-duration;
transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
transform-origin: left top;
-webkit-font-smoothing: antialiased;
@include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
@include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
width $swift-ease-out-timing-function $swift-ease-out-duration);
&.tb-focused {
color: rgb(96, 125, 139);
}

2
ui/src/app/components/side-menu.scss
View File

@ -53,7 +53,7 @@
margin: auto 0 auto auto;
background-size: 100% auto;
@include transition(transform .3s, ease-in-out);
transition: transform .3s, ease-in-out;
}
.tb-side-menu .md-button {

4
ui/src/app/dashboard/dashboard-toolbar.scss
View File

@ -31,7 +31,7 @@ tb-dashboard-toolbar {
&.md-fab {
opacity: 1;
@include transition(opacity .3s cubic-bezier(.55,0,.55,.2));
transition: opacity .3s cubic-bezier(.55, 0, .55, .2);
.md-fab-toolbar-background {
background-color: $primary-default !important;
@ -50,7 +50,7 @@ tb-dashboard-toolbar {
line-height: 36px;
opacity: .5;
@include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s);
transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s;
md-icon {
position: absolute;

8
ui/src/app/dashboard/dashboard.scss
View File

@ -75,13 +75,13 @@ section.tb-dashboard-toolbar {
&.tb-dashboard-toolbar-opened {
right: 0;
// @include transition(right .3s cubic-bezier(.55,0,.55,.2));
// transition: right .3s cubic-bezier(.55, 0, .55, .2);
}
&.tb-dashboard-toolbar-closed {
right: 18px;
@include transition(right .3s cubic-bezier(.55,0,.55,.2) .2s);
transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
}
}
@ -102,14 +102,14 @@ section.tb-dashboard-toolbar {
margin-top: $toolbar-height;
}
@include transition(margin-top .3s cubic-bezier(.55,0,.55,.2));
transition: margin-top .3s cubic-bezier(.55, 0, .55, .2);
}
}
&.tb-dashboard-toolbar-closed {
margin-top: 0;
@include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s);
transition: margin-top .3s cubic-bezier(.55, 0, .55, .2) .2s;
}
.tb-dashboard-layouts {

2
ui/src/app/layout/home.scss
View File

@ -42,7 +42,7 @@
border: none;
opacity: .75;
@include transition(opacity .35s);
transition: opacity .35s;
}
a:hover,

2
ui/src/app/rulechain/script/node-script-test.scss
View File

@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog {
}
.tb-split {
@include box-sizing(border-box);
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}

78
ui/src/app/widget/lib/rpc/round-switch.scss
View File

@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default;
.switch {
position: relative;
box-sizing: border-box;
width: 260px;
min-width: 260px;
height: 260px;
@ -73,12 +75,10 @@ $background-color: #e6e7e8 !default;
background: linear-gradient(180deg, #bbb, #ddd);
border-radius: 130px;
@include box-sizing(border-box);
@include box-shadow(
0 0 0 8px rgba(0,0,0,.1)
,0 0 3px 1px rgba(0,0,0,.1)
,inset 0 8px 3px -8px rgba(255,255,255,.4));
box-shadow:
0 0 0 8px rgba(0, 0, 0, .1),
0 0 3px 1px rgba(0, 0, 0, .1),
inset 0 8px 3px -8px rgba(255, 255, 255, .4);
input {
display: none;
@ -90,7 +90,7 @@ $background-color: #e6e7e8 !default;
width: 100%;
text-align: center;
@include text-shadow(1px 1px 4px #4a4a4a);
text-shadow: 1px 1px 4px #4a4a4a;
}
.on {
@ -98,15 +98,15 @@ $background-color: #e6e7e8 !default;
font-family: sans-serif;
color: #444;
@include transition(all .1s);
transition: all .1s;
}
.off {
bottom: 5px;
@include transition(all .1s);
transition: all .1s;
@include transform(scaleY(.85));
transform: scaleY(.85);
}
.but {
@ -120,17 +120,20 @@ $background-color: #e6e7e8 !default;
border-bottom-width: 0;
border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
@include box-shadow(inset 8px 6px 5px -7px #a2a2a2,
inset -8px 6px 5px -7px #a2a2a2,
inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
0 3px 3px -2px #fff,
inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
inset 0 220px 40px -200px rgba(0, 0, 0, .3));
box-shadow:
inset 8px 6px 5px -7px #a2a2a2,
inset -8px 6px 5px -7px #a2a2a2,
inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
0 3px 3px -2px #fff,
inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
inset 0 220px 40px -200px rgba(0, 0, 0, .3);
@include transition(all .2s);
transition: all .2s;
}
.back {
box-sizing: border-box;
width: 210px;
height: 210px;
padding: 4px 4px;
@ -139,34 +142,33 @@ $background-color: #e6e7e8 !default;
background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
border-radius: 105px;
@include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, .3),
-30px 30px 30px -20px rgba(58, 58, 58, .3),
0 30px 30px 0 rgba(16, 16, 16, .3),
inset 0 -1px 0 0 #484848);
box-shadow:
30px 30px 30px -20px rgba(58, 58, 58, .3),
-30px 30px 30px -20px rgba(58, 58, 58, .3),
0 30px 30px 0 rgba(16, 16, 16, .3),
inset 0 -1px 0 0 #484848;
@include box-sizing(border-box);
@include transition(all .2s);
transition: all .2s;
}
input:checked + .back .on,
input:checked + .back .off{
@include text-shadow(1px 1px 4px #4a4a4a);
text-shadow: 1px 1px 4px #4a4a4a;
}
input:checked + .back .on{
top: 10px;
color: #4c4c4c;
@include transform(scaleY(.85));
transform: scaleY(.85);
}
input:checked + .back .off{
bottom: 5px;
color: #444;
@include transform(scaleY(1));
transform: scaleY(1);
}
input:checked + .back .but{
@ -175,12 +177,13 @@ $background-color: #e6e7e8 !default;
background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;
@include box-shadow(inset 8px -4px 5px -7px #a9a9a9,
inset -8px -4px 5px -7px #808080,
0 -3px 8px -4px rgba(50, 50, 50, .4),
inset 0 3px 4px -2px #9c9c9c,
inset 0 280px 40px -200px rgba(0, 0, 0, .2),
inset 0 -200px 40px -200px rgba(180, 180, 180, .2));
box-shadow:
inset 8px -4px 5px -7px #a9a9a9,
inset -8px -4px 5px -7px #808080,
0 -3px 8px -4px rgba(50, 50, 50, .4),
inset 0 3px 4px -2px #9c9c9c,
inset 0 280px 40px -200px rgba(0, 0, 0, .2),
inset 0 -200px 40px -200px rgba(180, 180, 180, .2);
}
input:checked + .back{
@ -188,10 +191,11 @@ $background-color: #e6e7e8 !default;
background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);
@include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, .1),
-30px 30px 30px -20px rgba(111, 111, 111, .1),
0 30px 30px 0 rgba(0, 0, 0, .2),
inset 0 1px 2px 0 rgba(167, 167, 167, .6));
box-shadow:
30px 30px 30px -20px rgba(49, 49, 49, .1),
-30px 30px 30px -20px rgba(111, 111, 111, .1),
0 30px 30px 0 rgba(0, 0, 0, .2),
inset 0 1px 2px 0 rgba(167, 167, 167, .6);
}
}
}

2
ui/src/app/widget/widget-editor.scss
View File

@ -19,7 +19,7 @@ $edit-toolbar-height: 40px !default;
.tb-editor {
.tb-split {
@include box-sizing(border-box);
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}

16
ui/src/scss/animations.scss
View File

@ -15,34 +15,34 @@
*/
@import "~compass-sass-mixins/lib/animate";
@include keyframes(tbMoveFromTopFade) {
@keyframes tbMoveFromTopFade {
from {
opacity: 0;
@include transform(translate(0, -100%));
transform: translate(0, -100%);
}
}
@include keyframes(tbMoveToTopFade) {
@keyframes tbMoveToTopFade {
to {
opacity: 0;
@include transform(translate(0, -100%));
transform: translate(0, -100%);
}
}
@include keyframes(tbMoveFromBottomFade) {
@keyframes tbMoveFromBottomFade {
from {
opacity: 0;
@include transform(translate(0, 100%));
transform: translate(0, 100%);
}
}
@include keyframes(tbMoveToBottomFade) {
@keyframes tbMoveToBottomFade {
to {
opacity: 0;
@include transform(translate(0, 150%));
transform: translate(0, 150%);
}
}

16
ui/src/scss/main.scss
View File

@ -51,7 +51,7 @@ a {
text-decoration: none;
border-bottom: 1px solid rgba(64, 84, 178, .25);
@include transition(border-bottom .35s);
transition: border-bottom .35s;
}
a:hover,
@ -550,7 +550,7 @@ $previewSize: 100px !default;
}
.tb-error-message.ng-animate {
@include transition(all .3s cubic-bezier(.55, 0, .55, .2));
transition: all .3s cubic-bezier(.55, 0, .55, .2);
}
.tb-error-message.ng-enter-prepare,
@ -646,13 +646,13 @@ section.tb-top-header-buttons {
}
.tb-header-buttons .tb-btn-header {
@include animation(tbMoveFromTopFade .3s ease both);
position: relative !important;
display: inline-block !important;
animation: tbMoveFromTopFade .3s ease both;
}
.tb-header-buttons .tb-btn-header.ng-hide {
@include animation(tbMoveToTopFade .3s ease both);
animation: tbMoveToTopFade .3s ease both;
}
/***********************
@ -668,19 +668,19 @@ section.tb-footer-buttons {
}
.tb-footer-buttons .tb-btn-footer {
@include animation(tbMoveFromBottomFade .3s ease both);
position: relative !important;
display: inline-block !important;
animation: tbMoveFromBottomFade .3s ease both;
}
.tb-footer-buttons .tb-btn-footer.ng-hide {
@include animation(tbMoveToBottomFade .3s ease both);
animation: tbMoveToBottomFade .3s ease both;
}
._md-toast-open-bottom .tb-footer-buttons {
@include transition(all .4s cubic-bezier(.25, .8, .25, 1));
transition: all .4s cubic-bezier(.25, .8, .25, 1);
@include transform(translate3d(0, -42px, 0));
transform: translate3d(0, -42px, 0);
}
/***********************