diff --git a/ui/src/app/components/dashboard.scss b/ui/src/app/components/dashboard.scss index e0a9afd54e..b4a696a85c 100644 --- a/ui/src/app/components/dashboard.scss +++ b/ui/src/app/components/dashboard.scss @@ -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; } } diff --git a/ui/src/app/components/grid.scss b/ui/src/app/components/grid.scss index 43138481a9..50e110bb0c 100644 --- a/ui/src/app/components/grid.scss +++ b/ui/src/app/components/grid.scss @@ -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 { diff --git a/ui/src/app/components/menu-link.scss b/ui/src/app/components/menu-link.scss index 299797ce6b..be274d30df 100644 --- a/ui/src/app/components/menu-link.scss +++ b/ui/src/app/components/menu-link.scss @@ -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; } diff --git a/ui/src/app/components/react/json-form.scss b/ui/src/app/components/react/json-form.scss index cca9d07a07..d324abef93 100644 --- a/ui/src/app/components/react/json-form.scss +++ b/ui/src/app/components/react/json-form.scss @@ -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); } diff --git a/ui/src/app/components/side-menu.scss b/ui/src/app/components/side-menu.scss index 46da8db448..f6efcb963b 100644 --- a/ui/src/app/components/side-menu.scss +++ b/ui/src/app/components/side-menu.scss @@ -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 { diff --git a/ui/src/app/dashboard/dashboard-toolbar.scss b/ui/src/app/dashboard/dashboard-toolbar.scss index 80fd876ad3..c2476341e8 100644 --- a/ui/src/app/dashboard/dashboard-toolbar.scss +++ b/ui/src/app/dashboard/dashboard-toolbar.scss @@ -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; diff --git a/ui/src/app/dashboard/dashboard.scss b/ui/src/app/dashboard/dashboard.scss index 00a0653de7..8ba4401e7c 100644 --- a/ui/src/app/dashboard/dashboard.scss +++ b/ui/src/app/dashboard/dashboard.scss @@ -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 { diff --git a/ui/src/app/layout/home.scss b/ui/src/app/layout/home.scss index 48c1553877..43b83297a9 100644 --- a/ui/src/app/layout/home.scss +++ b/ui/src/app/layout/home.scss @@ -42,7 +42,7 @@ border: none; opacity: .75; - @include transition(opacity .35s); + transition: opacity .35s; } a:hover, diff --git a/ui/src/app/rulechain/script/node-script-test.scss b/ui/src/app/rulechain/script/node-script-test.scss index 1dd174dd87..e68691d062 100644 --- a/ui/src/app/rulechain/script/node-script-test.scss +++ b/ui/src/app/rulechain/script/node-script-test.scss @@ -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; } diff --git a/ui/src/app/widget/lib/rpc/round-switch.scss b/ui/src/app/widget/lib/rpc/round-switch.scss index 342c995313..c89b26bd45 100644 --- a/ui/src/app/widget/lib/rpc/round-switch.scss +++ b/ui/src/app/widget/lib/rpc/round-switch.scss @@ -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); } } } diff --git a/ui/src/app/widget/widget-editor.scss b/ui/src/app/widget/widget-editor.scss index cd374e37aa..0eb37afee0 100644 --- a/ui/src/app/widget/widget-editor.scss +++ b/ui/src/app/widget/widget-editor.scss @@ -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; } diff --git a/ui/src/scss/animations.scss b/ui/src/scss/animations.scss index 4ecfc34743..61b9bac890 100644 --- a/ui/src/scss/animations.scss +++ b/ui/src/scss/animations.scss @@ -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%); } } diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss index a32f76b6b1..f35ea9d0b6 100644 --- a/ui/src/scss/main.scss +++ b/ui/src/scss/main.scss @@ -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); } /***********************