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 | 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); | ... | ... |
... | ... | @@ -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 { | ... | ... |
... | ... | @@ -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 | } | ... | ... |
... | ... | @@ -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 | /*********************** | ... | ... |