|
@@ -2,52 +2,52 @@
|
2
|
2
|
* Animation mixin.
|
3
|
3
|
*/
|
4
|
4
|
@mixin animation($animate...) {
|
5
|
|
- $max: length($animate);
|
6
|
|
- $animations: '';
|
|
5
|
+ $max: length($animate);
|
|
6
|
+ $animations: '';
|
7
|
7
|
|
8
|
|
- @for $i from 1 through $max {
|
9
|
|
- $animations: #{$animations + nth($animate, $i)};
|
|
8
|
+ @for $i from 1 through $max {
|
|
9
|
+ $animations: #{$animations + nth($animate, $i)};
|
10
|
10
|
|
11
|
|
- @if $i < $max {
|
12
|
|
- $animations: #{$animations + ", "};
|
|
11
|
+ @if $i < $max {
|
|
12
|
+ $animations: #{$animations + ", "};
|
|
13
|
+ }
|
13
|
14
|
}
|
14
|
|
- }
|
15
|
|
- -webkit-animation: $animations;
|
16
|
|
- -moz-animation: $animations;
|
17
|
|
- -o-animation: $animations;
|
18
|
|
- animation: $animations;
|
|
15
|
+ -webkit-animation: $animations;
|
|
16
|
+ -moz-animation: $animations;
|
|
17
|
+ -o-animation: $animations;
|
|
18
|
+ animation: $animations;
|
19
|
19
|
}
|
20
|
20
|
|
21
|
21
|
@mixin flex() {
|
22
|
|
- display: -webkit-box;
|
23
|
|
- display: -moz-box;
|
24
|
|
- display: -ms-flexbox;
|
25
|
|
- display: -webkit-flex;
|
26
|
|
- display: flex;
|
|
22
|
+ display: -webkit-box;
|
|
23
|
+ display: -moz-box;
|
|
24
|
+ display: -ms-flexbox;
|
|
25
|
+ display: -webkit-flex;
|
|
26
|
+ display: flex;
|
27
|
27
|
}
|
28
|
28
|
|
29
|
29
|
/**
|
30
|
30
|
* Keyframes mixin.
|
31
|
31
|
*/
|
32
|
32
|
@mixin keyframes($animationName) {
|
33
|
|
- @-webkit-keyframes #{$animationName} {
|
34
|
|
- @content;
|
35
|
|
- }
|
36
|
|
- @-moz-keyframes #{$animationName} {
|
37
|
|
- @content;
|
38
|
|
- }
|
39
|
|
- @-o-keyframes #{$animationName} {
|
40
|
|
- @content;
|
41
|
|
- }
|
42
|
|
- @keyframes #{$animationName} {
|
43
|
|
- @content;
|
44
|
|
- }
|
|
33
|
+ @-webkit-keyframes #{$animationName} {
|
|
34
|
+ @content;
|
|
35
|
+ }
|
|
36
|
+ @-moz-keyframes #{$animationName} {
|
|
37
|
+ @content;
|
|
38
|
+ }
|
|
39
|
+ @-o-keyframes #{$animationName} {
|
|
40
|
+ @content;
|
|
41
|
+ }
|
|
42
|
+ @keyframes #{$animationName} {
|
|
43
|
+ @content;
|
|
44
|
+ }
|
45
|
45
|
}
|
46
|
46
|
|
47
|
47
|
@mixin circle($diameter) {
|
48
|
|
- width: $diameter;
|
49
|
|
- height: $diameter;
|
50
|
|
- border-radius: 50%;
|
|
48
|
+ width: $diameter;
|
|
49
|
+ height: $diameter;
|
|
50
|
+ border-radius: 50%;
|
51
|
51
|
}
|
52
|
52
|
|
53
|
53
|
/**
|
|
@@ -60,10 +60,10 @@
|
60
|
60
|
}
|
61
|
61
|
|
62
|
62
|
@mixin absoluteAligning() {
|
63
|
|
- top: 50%;
|
64
|
|
- left: 50%;
|
65
|
|
- position: absolute;
|
66
|
|
- @include transform(translate(-50%, -50%));
|
|
63
|
+ top: 50%;
|
|
64
|
+ left: 50%;
|
|
65
|
+ position: absolute;
|
|
66
|
+ @include transform(translate(-50%, -50%));
|
67
|
67
|
}
|
68
|
68
|
|
69
|
69
|
/**
|
|
@@ -75,52 +75,52 @@
|
75
|
75
|
}
|
76
|
76
|
|
77
|
77
|
@mixin transform($func) {
|
78
|
|
- -moz-transform: $func;
|
79
|
|
- -ms-transform: $func;
|
80
|
|
- -webkit-transform: $func;
|
81
|
|
- -o-transform: $func;
|
82
|
|
- transform: $func;
|
|
78
|
+ -moz-transform: $func;
|
|
79
|
+ -ms-transform: $func;
|
|
80
|
+ -webkit-transform: $func;
|
|
81
|
+ -o-transform: $func;
|
|
82
|
+ transform: $func;
|
83
|
83
|
}
|
84
|
84
|
|
85
|
85
|
@mixin transition($transition...) {
|
86
|
|
- -moz-transition: $transition;
|
87
|
|
- -o-transition: $transition;
|
88
|
|
- -webkit-transition: $transition;
|
89
|
|
- transition: $transition;
|
|
86
|
+ -moz-transition: $transition;
|
|
87
|
+ -o-transition: $transition;
|
|
88
|
+ -webkit-transition: $transition;
|
|
89
|
+ transition: $transition;
|
90
|
90
|
}
|
91
|
91
|
|
92
|
92
|
/**
|
93
|
93
|
* Mixin styling a placeholder.
|
94
|
94
|
**/
|
95
|
95
|
@mixin placeholder() {
|
96
|
|
- $selectors: (
|
97
|
|
- "::-webkit-input-placeholder",
|
98
|
|
- "::-moz-placeholder",
|
99
|
|
- ":-moz-placeholder",
|
100
|
|
- ":-ms-input-placeholder"
|
101
|
|
- );
|
102
|
|
-
|
103
|
|
- @each $selector in $selectors {
|
104
|
|
- #{$selector} {
|
105
|
|
- @content;
|
|
96
|
+ $selectors: (
|
|
97
|
+ "::-webkit-input-placeholder",
|
|
98
|
+ "::-moz-placeholder",
|
|
99
|
+ ":-moz-placeholder",
|
|
100
|
+ ":-ms-input-placeholder"
|
|
101
|
+ );
|
|
102
|
+
|
|
103
|
+ @each $selector in $selectors {
|
|
104
|
+ #{$selector} {
|
|
105
|
+ @content;
|
|
106
|
+ }
|
106
|
107
|
}
|
107
|
|
- }
|
108
|
108
|
}
|
109
|
109
|
|
110
|
110
|
/**
|
111
|
111
|
* Mixin styling a slider track for different browsers.
|
112
|
112
|
**/
|
113
|
113
|
@mixin slider() {
|
114
|
|
- $selectors: (
|
115
|
|
- "input[type=range]::-webkit-slider-runnable-track",
|
116
|
|
- "input[type=range]::-moz-range-track",
|
117
|
|
- "input[type=range]::-ms-track"
|
118
|
|
- );
|
119
|
|
-
|
120
|
|
- @each $selector in $selectors {
|
121
|
|
- #{$selector} {
|
122
|
|
- @content;
|
123
|
|
- }
|
|
114
|
+ $selectors: (
|
|
115
|
+ "input[type=range]::-webkit-slider-runnable-track",
|
|
116
|
+ "input[type=range]::-moz-range-track",
|
|
117
|
+ "input[type=range]::-ms-track"
|
|
118
|
+ );
|
|
119
|
+
|
|
120
|
+ @each $selector in $selectors {
|
|
121
|
+ #{$selector} {
|
|
122
|
+ @content;
|
|
123
|
+ }
|
124
|
124
|
}
|
125
|
125
|
}
|
126
|
126
|
|
|
@@ -128,62 +128,62 @@
|
128
|
128
|
* Mixin styling a slider thumb for different browsers.
|
129
|
129
|
**/
|
130
|
130
|
@mixin slider-thumb() {
|
131
|
|
- $selectors: (
|
132
|
|
- "input[type=range]::-webkit-slider-thumb",
|
133
|
|
- "input[type=range]::-moz-range-thumb",
|
134
|
|
- "input[type=range]::-ms-thumb"
|
135
|
|
- );
|
136
|
|
-
|
137
|
|
- @each $selector in $selectors {
|
138
|
|
- #{$selector} {
|
139
|
|
- @content;
|
|
131
|
+ $selectors: (
|
|
132
|
+ "input[type=range]::-webkit-slider-thumb",
|
|
133
|
+ "input[type=range]::-moz-range-thumb",
|
|
134
|
+ "input[type=range]::-ms-thumb"
|
|
135
|
+ );
|
|
136
|
+
|
|
137
|
+ @each $selector in $selectors {
|
|
138
|
+ #{$selector} {
|
|
139
|
+ @content;
|
|
140
|
+ }
|
140
|
141
|
}
|
141
|
|
- }
|
142
|
142
|
}
|
143
|
143
|
|
144
|
144
|
@mixin box-shadow($h, $y, $blur, $color, $inset: false) {
|
145
|
|
- @if $inset {
|
146
|
|
- -webkit-box-shadow: inset $h $y $blur $color;
|
147
|
|
- -moz-box-shadow: inset $h $y $blur $color;
|
148
|
|
- box-shadow: inset $h $y $blur $color;
|
149
|
|
- } @else {
|
150
|
|
- -webkit-box-shadow: $h $y $blur $color;
|
151
|
|
- -moz-box-shadow: $h $y $blur $color;
|
152
|
|
- box-shadow: $h $y $blur $color;
|
153
|
|
- }
|
|
145
|
+ @if $inset {
|
|
146
|
+ -webkit-box-shadow: inset $h $y $blur $color;
|
|
147
|
+ -moz-box-shadow: inset $h $y $blur $color;
|
|
148
|
+ box-shadow: inset $h $y $blur $color;
|
|
149
|
+ } @else {
|
|
150
|
+ -webkit-box-shadow: $h $y $blur $color;
|
|
151
|
+ -moz-box-shadow: $h $y $blur $color;
|
|
152
|
+ box-shadow: $h $y $blur $color;
|
|
153
|
+ }
|
154
|
154
|
}
|
155
|
155
|
|
156
|
156
|
@mixin no-box-shadow {
|
157
|
|
- -webkit-box-shadow: none;
|
158
|
|
- -moz-box-shadow: none;
|
159
|
|
- box-shadow: none;
|
|
157
|
+ -webkit-box-shadow: none;
|
|
158
|
+ -moz-box-shadow: none;
|
|
159
|
+ box-shadow: none;
|
160
|
160
|
}
|
161
|
161
|
|
162
|
162
|
@mixin box-sizing($box-model) {
|
163
|
|
- -webkit-box-sizing: $box-model; // Safari <= 5
|
164
|
|
- -moz-box-sizing: $box-model; // Firefox <= 19
|
165
|
|
- box-sizing: $box-model;
|
|
163
|
+ -webkit-box-sizing: $box-model; // Safari <= 5
|
|
164
|
+ -moz-box-sizing: $box-model; // Firefox <= 19
|
|
165
|
+ box-sizing: $box-model;
|
166
|
166
|
}
|
167
|
167
|
|
168
|
168
|
@mixin border-radius($radius) {
|
169
|
|
- -webkit-border-radius: $radius;
|
170
|
|
- border-radius: $radius;
|
171
|
|
- /* stops bg color from leaking outside the border: */
|
172
|
|
- background-clip: padding-box;
|
|
169
|
+ -webkit-border-radius: $radius;
|
|
170
|
+ border-radius: $radius;
|
|
171
|
+ /* stops bg color from leaking outside the border: */
|
|
172
|
+ background-clip: padding-box;
|
173
|
173
|
}
|
174
|
174
|
|
175
|
175
|
@mixin opacity($opacity) {
|
176
|
|
- opacity: $opacity;
|
177
|
|
- $opacity-ie: $opacity * 100;
|
178
|
|
- -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
|
179
|
|
- filter: alpha(opacity=$opacity-ie); //IE8
|
|
176
|
+ opacity: $opacity;
|
|
177
|
+ $opacity-ie: $opacity * 100;
|
|
178
|
+ -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
|
|
179
|
+ filter: alpha(opacity=$opacity-ie); //IE8
|
180
|
180
|
}
|
181
|
181
|
|
182
|
182
|
@mixin text-truncate {
|
183
|
|
- display: block;
|
184
|
|
- overflow: hidden;
|
185
|
|
- text-overflow: ellipsis;
|
186
|
|
- white-space: nowrap;
|
|
183
|
+ display: block;
|
|
184
|
+ overflow: hidden;
|
|
185
|
+ text-overflow: ellipsis;
|
|
186
|
+ white-space: nowrap;
|
187
|
187
|
}
|
188
|
188
|
|
189
|
189
|
/**
|
|
@@ -191,5 +191,5 @@
|
191
|
191
|
* (opacity) value.
|
192
|
192
|
*/
|
193
|
193
|
@mixin transparentBg($color, $alpha) {
|
194
|
|
- background-color: rgba(red($color), green($color), blue($color), $alpha);
|
|
194
|
+ background-color: rgba(red($color), green($color), blue($color), $alpha);
|
195
|
195
|
}
|