Commit 36ce6b8b01f0868dba5af8c57342fc3b529a46ee

Authored by Geremia Taglialatela
1 parent dda10775

Use standard css instead of compass mixins

Autoprefixer will take care to add vendor prefixes if necessary
@@ -22,7 +22,7 @@ div.tb-widget { @@ -22,7 +22,7 @@ div.tb-widget {
22 overflow: hidden; 22 overflow: hidden;
23 outline: none; 23 outline: none;
24 24
25 - @include transition(all .2s ease-in-out); 25 + transition: all .2s ease-in-out;
26 26
27 .tb-widget-title { 27 .tb-widget-title {
28 max-height: 60px; 28 max-height: 60px;
@@ -99,7 +99,7 @@ md-content.tb-dashboard-content { @@ -99,7 +99,7 @@ md-content.tb-dashboard-content {
99 outline: none; 99 outline: none;
100 100
101 .gridster-item { 101 .gridster-item {
102 - @include transition(none); 102 + transition: none;
103 } 103 }
104 } 104 }
105 105
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 } 20 }
21 21
22 .tb-card-item { 22 .tb-card-item {
23 - @include transition(all .2s ease-in-out); 23 + transition: all .2s ease-in-out;
24 24
25 md-card-content { 25 md-card-content {
26 max-height: 53px; 26 max-height: 53px;
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 .tb-current-item { 46 .tb-current-item {
47 opacity: .5; 47 opacity: .5;
48 48
49 - @include transform(scale(1.05)); 49 + transform: scale(1.05);
50 } 50 }
51 51
52 #tb-vertical-container { 52 #tb-vertical-container {
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 @import "~compass-sass-mixins/lib/compass"; 16 @import "~compass-sass-mixins/lib/compass";
17 17
18 .md-button-toggle .md-toggle-icon.tb-toggled { 18 .md-button-toggle .md-toggle-icon.tb-toggled {
19 - @include transform(rotateZ(180deg)); 19 + transform: rotateZ(180deg);
20 } 20 }
21 21
22 .tb-menu-toggle-list.ng-hide { 22 .tb-menu-toggle-list.ng-hide {
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
28 z-index: 1; 28 z-index: 1;
29 overflow: hidden; 29 overflow: hidden;
30 30
31 - @include transition(.75s cubic-bezier(.35, 0, .25, 1)); 31 + transition: .75s cubic-bezier(.35, 0, .25, 1);
32 32
33 - @include transition-property(height); 33 + transition-property: height;
34 } 34 }
@@ -28,7 +28,7 @@ $input-label-float-scale: .75 !default; @@ -28,7 +28,7 @@ $input-label-float-scale: .75 !default;
28 line-height: 12px; 28 line-height: 12px;
29 color: rgb(244, 67, 54); 29 color: rgb(244, 67, 54);
30 30
31 - @include transition(all 450ms cubic-bezier(.23, 1, .32, 1) 0ms); 31 + transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
32 } 32 }
33 33
34 .tb-container { 34 .tb-container {
@@ -77,13 +77,12 @@ label.tb-label { @@ -77,13 +77,12 @@ label.tb-label {
77 bottom: 100%; 77 bottom: 100%;
78 left: 0; 78 left: 0;
79 color: rgba(0, 0, 0, .54); 79 color: rgba(0, 0, 0, .54);
80 - transform-origin: left top;  
81 - -webkit-font-smoothing: antialiased;  
82 80
83 - @include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale)); 81 + transition: transform $swift-ease-out-timing-function $swift-ease-out-duration, width $swift-ease-out-timing-function $swift-ease-out-duration;
84 82
85 - @include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,  
86 - width $swift-ease-out-timing-function $swift-ease-out-duration); 83 + transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
  84 + transform-origin: left top;
  85 + -webkit-font-smoothing: antialiased;
87 86
88 &.tb-focused { 87 &.tb-focused {
89 color: rgb(96, 125, 139); 88 color: rgb(96, 125, 139);
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 margin: auto 0 auto auto; 53 margin: auto 0 auto auto;
54 background-size: 100% auto; 54 background-size: 100% auto;
55 55
56 - @include transition(transform .3s, ease-in-out); 56 + transition: transform .3s, ease-in-out;
57 } 57 }
58 58
59 .tb-side-menu .md-button { 59 .tb-side-menu .md-button {
@@ -31,7 +31,7 @@ tb-dashboard-toolbar { @@ -31,7 +31,7 @@ tb-dashboard-toolbar {
31 &.md-fab { 31 &.md-fab {
32 opacity: 1; 32 opacity: 1;
33 33
34 - @include transition(opacity .3s cubic-bezier(.55,0,.55,.2)); 34 + transition: opacity .3s cubic-bezier(.55, 0, .55, .2);
35 35
36 .md-fab-toolbar-background { 36 .md-fab-toolbar-background {
37 background-color: $primary-default !important; 37 background-color: $primary-default !important;
@@ -50,7 +50,7 @@ tb-dashboard-toolbar { @@ -50,7 +50,7 @@ tb-dashboard-toolbar {
50 line-height: 36px; 50 line-height: 36px;
51 opacity: .5; 51 opacity: .5;
52 52
53 - @include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s); 53 + transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s;
54 54
55 md-icon { 55 md-icon {
56 position: absolute; 56 position: absolute;
@@ -75,13 +75,13 @@ section.tb-dashboard-toolbar { @@ -75,13 +75,13 @@ section.tb-dashboard-toolbar {
75 75
76 &.tb-dashboard-toolbar-opened { 76 &.tb-dashboard-toolbar-opened {
77 right: 0; 77 right: 0;
78 - // @include transition(right .3s cubic-bezier(.55,0,.55,.2)); 78 + // transition: right .3s cubic-bezier(.55, 0, .55, .2);
79 } 79 }
80 80
81 &.tb-dashboard-toolbar-closed { 81 &.tb-dashboard-toolbar-closed {
82 right: 18px; 82 right: 18px;
83 83
84 - @include transition(right .3s cubic-bezier(.55,0,.55,.2) .2s); 84 + transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
85 } 85 }
86 } 86 }
87 87
@@ -102,14 +102,14 @@ section.tb-dashboard-toolbar { @@ -102,14 +102,14 @@ section.tb-dashboard-toolbar {
102 margin-top: $toolbar-height; 102 margin-top: $toolbar-height;
103 } 103 }
104 104
105 - @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2)); 105 + transition: margin-top .3s cubic-bezier(.55, 0, .55, .2);
106 } 106 }
107 } 107 }
108 108
109 &.tb-dashboard-toolbar-closed { 109 &.tb-dashboard-toolbar-closed {
110 margin-top: 0; 110 margin-top: 0;
111 111
112 - @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2) .2s); 112 + transition: margin-top .3s cubic-bezier(.55, 0, .55, .2) .2s;
113 } 113 }
114 114
115 .tb-dashboard-layouts { 115 .tb-dashboard-layouts {
@@ -42,7 +42,7 @@ @@ -42,7 +42,7 @@
42 border: none; 42 border: none;
43 opacity: .75; 43 opacity: .75;
44 44
45 - @include transition(opacity .35s); 45 + transition: opacity .35s;
46 } 46 }
47 47
48 a:hover, 48 a:hover,
@@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog { @@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog {
29 } 29 }
30 30
31 .tb-split { 31 .tb-split {
32 - @include box-sizing(border-box); 32 + box-sizing: border-box;
33 overflow-x: hidden; 33 overflow-x: hidden;
34 overflow-y: auto; 34 overflow-y: auto;
35 } 35 }
@@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default; @@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default;
59 59
60 .switch { 60 .switch {
61 position: relative; 61 position: relative;
  62 +
  63 + box-sizing: border-box;
62 width: 260px; 64 width: 260px;
63 min-width: 260px; 65 min-width: 260px;
64 height: 260px; 66 height: 260px;
@@ -73,12 +75,10 @@ $background-color: #e6e7e8 !default; @@ -73,12 +75,10 @@ $background-color: #e6e7e8 !default;
73 background: linear-gradient(180deg, #bbb, #ddd); 75 background: linear-gradient(180deg, #bbb, #ddd);
74 border-radius: 130px; 76 border-radius: 130px;
75 77
76 - @include box-sizing(border-box);  
77 -  
78 - @include box-shadow(  
79 - 0 0 0 8px rgba(0,0,0,.1)  
80 - ,0 0 3px 1px rgba(0,0,0,.1)  
81 - ,inset 0 8px 3px -8px rgba(255,255,255,.4)); 78 + box-shadow:
  79 + 0 0 0 8px rgba(0, 0, 0, .1),
  80 + 0 0 3px 1px rgba(0, 0, 0, .1),
  81 + inset 0 8px 3px -8px rgba(255, 255, 255, .4);
82 82
83 input { 83 input {
84 display: none; 84 display: none;
@@ -90,7 +90,7 @@ $background-color: #e6e7e8 !default; @@ -90,7 +90,7 @@ $background-color: #e6e7e8 !default;
90 width: 100%; 90 width: 100%;
91 text-align: center; 91 text-align: center;
92 92
93 - @include text-shadow(1px 1px 4px #4a4a4a); 93 + text-shadow: 1px 1px 4px #4a4a4a;
94 } 94 }
95 95
96 .on { 96 .on {
@@ -98,15 +98,15 @@ $background-color: #e6e7e8 !default; @@ -98,15 +98,15 @@ $background-color: #e6e7e8 !default;
98 font-family: sans-serif; 98 font-family: sans-serif;
99 color: #444; 99 color: #444;
100 100
101 - @include transition(all .1s); 101 + transition: all .1s;
102 } 102 }
103 103
104 .off { 104 .off {
105 bottom: 5px; 105 bottom: 5px;
106 106
107 - @include transition(all .1s); 107 + transition: all .1s;
108 108
109 - @include transform(scaleY(.85)); 109 + transform: scaleY(.85);
110 } 110 }
111 111
112 .but { 112 .but {
@@ -120,17 +120,20 @@ $background-color: #e6e7e8 !default; @@ -120,17 +120,20 @@ $background-color: #e6e7e8 !default;
120 border-bottom-width: 0; 120 border-bottom-width: 0;
121 border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px; 121 border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
122 122
123 - @include box-shadow(inset 8px 6px 5px -7px #a2a2a2,  
124 - inset -8px 6px 5px -7px #a2a2a2,  
125 - inset 0 -3px 2px -2px rgba(200, 200, 200, .5),  
126 - 0 3px 3px -2px #fff,  
127 - inset 0 -230px 60px -200px rgba(255, 255, 255, .2),  
128 - inset 0 220px 40px -200px rgba(0, 0, 0, .3)); 123 + box-shadow:
  124 + inset 8px 6px 5px -7px #a2a2a2,
  125 + inset -8px 6px 5px -7px #a2a2a2,
  126 + inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
  127 + 0 3px 3px -2px #fff,
  128 + inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
  129 + inset 0 220px 40px -200px rgba(0, 0, 0, .3);
129 130
130 - @include transition(all .2s); 131 + transition: all .2s;
131 } 132 }
132 133
133 .back { 134 .back {
  135 +
  136 + box-sizing: border-box;
134 width: 210px; 137 width: 210px;
135 height: 210px; 138 height: 210px;
136 padding: 4px 4px; 139 padding: 4px 4px;
@@ -139,34 +142,33 @@ $background-color: #e6e7e8 !default; @@ -139,34 +142,33 @@ $background-color: #e6e7e8 !default;
139 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%); 142 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%);
140 border-radius: 105px; 143 border-radius: 105px;
141 144
142 - @include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, .3),  
143 - -30px 30px 30px -20px rgba(58, 58, 58, .3),  
144 - 0 30px 30px 0 rgba(16, 16, 16, .3),  
145 - inset 0 -1px 0 0 #484848);  
146 -  
147 - @include box-sizing(border-box); 145 + box-shadow:
  146 + 30px 30px 30px -20px rgba(58, 58, 58, .3),
  147 + -30px 30px 30px -20px rgba(58, 58, 58, .3),
  148 + 0 30px 30px 0 rgba(16, 16, 16, .3),
  149 + inset 0 -1px 0 0 #484848;
148 150
149 - @include transition(all .2s); 151 + transition: all .2s;
150 } 152 }
151 153
152 154
153 input:checked + .back .on, 155 input:checked + .back .on,
154 input:checked + .back .off{ 156 input:checked + .back .off{
155 - @include text-shadow(1px 1px 4px #4a4a4a); 157 + text-shadow: 1px 1px 4px #4a4a4a;
156 } 158 }
157 159
158 input:checked + .back .on{ 160 input:checked + .back .on{
159 top: 10px; 161 top: 10px;
160 color: #4c4c4c; 162 color: #4c4c4c;
161 163
162 - @include transform(scaleY(.85)); 164 + transform: scaleY(.85);
163 } 165 }
164 166
165 input:checked + .back .off{ 167 input:checked + .back .off{
166 bottom: 5px; 168 bottom: 5px;
167 color: #444; 169 color: #444;
168 170
169 - @include transform(scaleY(1)); 171 + transform: scaleY(1);
170 } 172 }
171 173
172 input:checked + .back .but{ 174 input:checked + .back .but{
@@ -175,12 +177,13 @@ $background-color: #e6e7e8 !default; @@ -175,12 +177,13 @@ $background-color: #e6e7e8 !default;
175 background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent); 177 background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
176 border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px; 178 border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;
177 179
178 - @include box-shadow(inset 8px -4px 5px -7px #a9a9a9,  
179 - inset -8px -4px 5px -7px #808080,  
180 - 0 -3px 8px -4px rgba(50, 50, 50, .4),  
181 - inset 0 3px 4px -2px #9c9c9c,  
182 - inset 0 280px 40px -200px rgba(0, 0, 0, .2),  
183 - inset 0 -200px 40px -200px rgba(180, 180, 180, .2)); 180 + box-shadow:
  181 + inset 8px -4px 5px -7px #a9a9a9,
  182 + inset -8px -4px 5px -7px #808080,
  183 + 0 -3px 8px -4px rgba(50, 50, 50, .4),
  184 + inset 0 3px 4px -2px #9c9c9c,
  185 + inset 0 280px 40px -200px rgba(0, 0, 0, .2),
  186 + inset 0 -200px 40px -200px rgba(180, 180, 180, .2);
184 } 187 }
185 188
186 input:checked + .back{ 189 input:checked + .back{
@@ -188,10 +191,11 @@ $background-color: #e6e7e8 !default; @@ -188,10 +191,11 @@ $background-color: #e6e7e8 !default;
188 191
189 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%); 192 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%);
190 193
191 - @include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, .1),  
192 - -30px 30px 30px -20px rgba(111, 111, 111, .1),  
193 - 0 30px 30px 0 rgba(0, 0, 0, .2),  
194 - inset 0 1px 2px 0 rgba(167, 167, 167, .6)); 194 + box-shadow:
  195 + 30px 30px 30px -20px rgba(49, 49, 49, .1),
  196 + -30px 30px 30px -20px rgba(111, 111, 111, .1),
  197 + 0 30px 30px 0 rgba(0, 0, 0, .2),
  198 + inset 0 1px 2px 0 rgba(167, 167, 167, .6);
195 } 199 }
196 } 200 }
197 } 201 }
@@ -19,7 +19,7 @@ $edit-toolbar-height: 40px !default; @@ -19,7 +19,7 @@ $edit-toolbar-height: 40px !default;
19 19
20 .tb-editor { 20 .tb-editor {
21 .tb-split { 21 .tb-split {
22 - @include box-sizing(border-box); 22 + box-sizing: border-box;
23 overflow-x: hidden; 23 overflow-x: hidden;
24 overflow-y: auto; 24 overflow-y: auto;
25 } 25 }
@@ -15,34 +15,34 @@ @@ -15,34 +15,34 @@
15 */ 15 */
16 @import "~compass-sass-mixins/lib/animate"; 16 @import "~compass-sass-mixins/lib/animate";
17 17
18 -@include keyframes(tbMoveFromTopFade) { 18 +@keyframes tbMoveFromTopFade {
19 from { 19 from {
20 opacity: 0; 20 opacity: 0;
21 21
22 - @include transform(translate(0, -100%)); 22 + transform: translate(0, -100%);
23 } 23 }
24 } 24 }
25 25
26 -@include keyframes(tbMoveToTopFade) { 26 +@keyframes tbMoveToTopFade {
27 to { 27 to {
28 opacity: 0; 28 opacity: 0;
29 29
30 - @include transform(translate(0, -100%)); 30 + transform: translate(0, -100%);
31 } 31 }
32 } 32 }
33 33
34 -@include keyframes(tbMoveFromBottomFade) { 34 +@keyframes tbMoveFromBottomFade {
35 from { 35 from {
36 opacity: 0; 36 opacity: 0;
37 37
38 - @include transform(translate(0, 100%)); 38 + transform: translate(0, 100%);
39 } 39 }
40 } 40 }
41 41
42 -@include keyframes(tbMoveToBottomFade) { 42 +@keyframes tbMoveToBottomFade {
43 to { 43 to {
44 opacity: 0; 44 opacity: 0;
45 45
46 - @include transform(translate(0, 150%)); 46 + transform: translate(0, 150%);
47 } 47 }
48 } 48 }
@@ -51,7 +51,7 @@ a { @@ -51,7 +51,7 @@ a {
51 text-decoration: none; 51 text-decoration: none;
52 border-bottom: 1px solid rgba(64, 84, 178, .25); 52 border-bottom: 1px solid rgba(64, 84, 178, .25);
53 53
54 - @include transition(border-bottom .35s); 54 + transition: border-bottom .35s;
55 } 55 }
56 56
57 a:hover, 57 a:hover,
@@ -550,7 +550,7 @@ $previewSize: 100px !default; @@ -550,7 +550,7 @@ $previewSize: 100px !default;
550 } 550 }
551 551
552 .tb-error-message.ng-animate { 552 .tb-error-message.ng-animate {
553 - @include transition(all .3s cubic-bezier(.55, 0, .55, .2)); 553 + transition: all .3s cubic-bezier(.55, 0, .55, .2);
554 } 554 }
555 555
556 .tb-error-message.ng-enter-prepare, 556 .tb-error-message.ng-enter-prepare,
@@ -646,13 +646,13 @@ section.tb-top-header-buttons { @@ -646,13 +646,13 @@ section.tb-top-header-buttons {
646 } 646 }
647 647
648 .tb-header-buttons .tb-btn-header { 648 .tb-header-buttons .tb-btn-header {
649 - @include animation(tbMoveFromTopFade .3s ease both);  
650 position: relative !important; 649 position: relative !important;
651 display: inline-block !important; 650 display: inline-block !important;
  651 + animation: tbMoveFromTopFade .3s ease both;
652 } 652 }
653 653
654 .tb-header-buttons .tb-btn-header.ng-hide { 654 .tb-header-buttons .tb-btn-header.ng-hide {
655 - @include animation(tbMoveToTopFade .3s ease both); 655 + animation: tbMoveToTopFade .3s ease both;
656 } 656 }
657 657
658 /*********************** 658 /***********************
@@ -668,19 +668,19 @@ section.tb-footer-buttons { @@ -668,19 +668,19 @@ section.tb-footer-buttons {
668 } 668 }
669 669
670 .tb-footer-buttons .tb-btn-footer { 670 .tb-footer-buttons .tb-btn-footer {
671 - @include animation(tbMoveFromBottomFade .3s ease both);  
672 position: relative !important; 671 position: relative !important;
673 display: inline-block !important; 672 display: inline-block !important;
  673 + animation: tbMoveFromBottomFade .3s ease both;
674 } 674 }
675 675
676 .tb-footer-buttons .tb-btn-footer.ng-hide { 676 .tb-footer-buttons .tb-btn-footer.ng-hide {
677 - @include animation(tbMoveToBottomFade .3s ease both); 677 + animation: tbMoveToBottomFade .3s ease both;
678 } 678 }
679 679
680 ._md-toast-open-bottom .tb-footer-buttons { 680 ._md-toast-open-bottom .tb-footer-buttons {
681 - @include transition(all .4s cubic-bezier(.25, .8, .25, 1)); 681 + transition: all .4s cubic-bezier(.25, .8, .25, 1);
682 682
683 - @include transform(translate3d(0, -42px, 0)); 683 + transform: translate3d(0, -42px, 0);
684 } 684 }
685 685
686 /*********************** 686 /***********************