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 22 overflow: hidden;
23 23 outline: none;
24 24
25   - @include transition(all .2s ease-in-out);
  25 + transition: all .2s ease-in-out;
26 26
27 27 .tb-widget-title {
28 28 max-height: 60px;
... ... @@ -99,7 +99,7 @@ md-content.tb-dashboard-content {
99 99 outline: none;
100 100
101 101 .gridster-item {
102   - @include transition(none);
  102 + transition: none;
103 103 }
104 104 }
105 105
... ...
... ... @@ -20,7 +20,7 @@
20 20 }
21 21
22 22 .tb-card-item {
23   - @include transition(all .2s ease-in-out);
  23 + transition: all .2s ease-in-out;
24 24
25 25 md-card-content {
26 26 max-height: 53px;
... ... @@ -46,7 +46,7 @@
46 46 .tb-current-item {
47 47 opacity: .5;
48 48
49   - @include transform(scale(1.05));
  49 + transform: scale(1.05);
50 50 }
51 51
52 52 #tb-vertical-container {
... ...
... ... @@ -16,7 +16,7 @@
16 16 @import "~compass-sass-mixins/lib/compass";
17 17
18 18 .md-button-toggle .md-toggle-icon.tb-toggled {
19   - @include transform(rotateZ(180deg));
  19 + transform: rotateZ(180deg);
20 20 }
21 21
22 22 .tb-menu-toggle-list.ng-hide {
... ... @@ -28,7 +28,7 @@
28 28 z-index: 1;
29 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 28 line-height: 12px;
29 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 34 .tb-container {
... ... @@ -77,13 +77,12 @@ label.tb-label {
77 77 bottom: 100%;
78 78 left: 0;
79 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 87 &.tb-focused {
89 88 color: rgb(96, 125, 139);
... ...
... ... @@ -53,7 +53,7 @@
53 53 margin: auto 0 auto auto;
54 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 59 .tb-side-menu .md-button {
... ...
... ... @@ -31,7 +31,7 @@ tb-dashboard-toolbar {
31 31 &.md-fab {
32 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 36 .md-fab-toolbar-background {
37 37 background-color: $primary-default !important;
... ... @@ -50,7 +50,7 @@ tb-dashboard-toolbar {
50 50 line-height: 36px;
51 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 55 md-icon {
56 56 position: absolute;
... ...
... ... @@ -75,13 +75,13 @@ section.tb-dashboard-toolbar {
75 75
76 76 &.tb-dashboard-toolbar-opened {
77 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 81 &.tb-dashboard-toolbar-closed {
82 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 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 109 &.tb-dashboard-toolbar-closed {
110 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 115 .tb-dashboard-layouts {
... ...
... ... @@ -42,7 +42,7 @@
42 42 border: none;
43 43 opacity: .75;
44 44
45   - @include transition(opacity .35s);
  45 + transition: opacity .35s;
46 46 }
47 47
48 48 a:hover,
... ...
... ... @@ -29,7 +29,7 @@ md-dialog.tb-node-script-test-dialog {
29 29 }
30 30
31 31 .tb-split {
32   - @include box-sizing(border-box);
  32 + box-sizing: border-box;
33 33 overflow-x: hidden;
34 34 overflow-y: auto;
35 35 }
... ...
... ... @@ -59,6 +59,8 @@ $background-color: #e6e7e8 !default;
59 59
60 60 .switch {
61 61 position: relative;
  62 +
  63 + box-sizing: border-box;
62 64 width: 260px;
63 65 min-width: 260px;
64 66 height: 260px;
... ... @@ -73,12 +75,10 @@ $background-color: #e6e7e8 !default;
73 75 background: linear-gradient(180deg, #bbb, #ddd);
74 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 83 input {
84 84 display: none;
... ... @@ -90,7 +90,7 @@ $background-color: #e6e7e8 !default;
90 90 width: 100%;
91 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 96 .on {
... ... @@ -98,15 +98,15 @@ $background-color: #e6e7e8 !default;
98 98 font-family: sans-serif;
99 99 color: #444;
100 100
101   - @include transition(all .1s);
  101 + transition: all .1s;
102 102 }
103 103
104 104 .off {
105 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 112 .but {
... ... @@ -120,17 +120,20 @@ $background-color: #e6e7e8 !default;
120 120 border-bottom-width: 0;
121 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 134 .back {
  135 +
  136 + box-sizing: border-box;
134 137 width: 210px;
135 138 height: 210px;
136 139 padding: 4px 4px;
... ... @@ -139,34 +142,33 @@ $background-color: #e6e7e8 !default;
139 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 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 155 input:checked + .back .on,
154 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 160 input:checked + .back .on{
159 161 top: 10px;
160 162 color: #4c4c4c;
161 163
162   - @include transform(scaleY(.85));
  164 + transform: scaleY(.85);
163 165 }
164 166
165 167 input:checked + .back .off{
166 168 bottom: 5px;
167 169 color: #444;
168 170
169   - @include transform(scaleY(1));
  171 + transform: scaleY(1);
170 172 }
171 173
172 174 input:checked + .back .but{
... ... @@ -175,12 +177,13 @@ $background-color: #e6e7e8 !default;
175 177 background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, .3), transparent);
176 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 189 input:checked + .back{
... ... @@ -188,10 +191,11 @@ $background-color: #e6e7e8 !default;
188 191
189 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 19
20 20 .tb-editor {
21 21 .tb-split {
22   - @include box-sizing(border-box);
  22 + box-sizing: border-box;
23 23 overflow-x: hidden;
24 24 overflow-y: auto;
25 25 }
... ...
... ... @@ -15,34 +15,34 @@
15 15 */
16 16 @import "~compass-sass-mixins/lib/animate";
17 17
18   -@include keyframes(tbMoveFromTopFade) {
  18 +@keyframes tbMoveFromTopFade {
19 19 from {
20 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 27 to {
28 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 35 from {
36 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 43 to {
44 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 51 text-decoration: none;
52 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 57 a:hover,
... ... @@ -550,7 +550,7 @@ $previewSize: 100px !default;
550 550 }
551 551
552 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 556 .tb-error-message.ng-enter-prepare,
... ... @@ -646,13 +646,13 @@ section.tb-top-header-buttons {
646 646 }
647 647
648 648 .tb-header-buttons .tb-btn-header {
649   - @include animation(tbMoveFromTopFade .3s ease both);
650 649 position: relative !important;
651 650 display: inline-block !important;
  651 + animation: tbMoveFromTopFade .3s ease both;
652 652 }
653 653
654 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 668 }
669 669
670 670 .tb-footer-buttons .tb-btn-footer {
671   - @include animation(tbMoveFromBottomFade .3s ease both);
672 671 position: relative !important;
673 672 display: inline-block !important;
  673 + animation: tbMoveFromBottomFade .3s ease both;
674 674 }
675 675
676 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 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 /***********************
... ...