Commit 36ce6b8b01f0868dba5af8c57342fc3b529a46ee
1 parent
dda10775
Use standard css instead of compass mixins
Autoprefixer will take care to add vendor prefixes if necessary
Showing
13 changed files
with
79 additions
and
76 deletions
@@ -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 { |
@@ -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 | /*********************** |