Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 341 lines (302 sloc) 8.753 kB
75181dc Changed vendor-property to experiemental-property.
Tom Krush authored
1 @mixin experimental-property($vendors, $property, $value) {
7883a77 @jamesfinley Added vendor-property mixin
jamesfinley authored
2 @each $vendor in $vendors {
3 #{$vendor}-#{$property}: $value;
4 }
a3921bf Added new mixins
Tom Krush authored
5 #{$property}: $value;
7883a77 @jamesfinley Added vendor-property mixin
jamesfinley authored
6 }
7
e983cb9 Refactored background scale
Tom Krush authored
8 @function scale($original_width, $original_height, $new_width) {
9 @return ($original_height / $original_width) * $new_width;
10 }
11
8ca930d Added background-scale.
Tom Krush authored
12 /* Support (No IE 8) */
13 @mixin background-scale($original_width, $original_height, $new_width) {
e983cb9 Refactored background scale
Tom Krush authored
14 background-size: $new_width, scale($original_height, $original_width, $new_width);
8ca930d Added background-scale.
Tom Krush authored
15 }
16
edbfb88 Added selection mixin.
Tom Krush authored
17 @mixin selection($backgroundColor, $textColor, $opacity: 0.8) {
18 ::-moz-selection {
19 background: rgba($backgroundColor, $opacity);
20 color: $textColor;
21 }
22
23 ::-webkit-selection {
24 background: rgba($backgroundColor, $opacity);
25 color: $textColor;
26 }
27
28 ::selection {
29 background: rgba($backgroundColor, $opacity);
30 color: $textColor;
31 }
32 }
33
aaf1fb0 @jamesfinley Added mixins
jamesfinley authored
34 @mixin position($top: false, $left: false, $bottom: false, $right: false, $zindex: false) {
35 position: absolute;
36 @if type_of($top) == number {
37 top: $top;
38 }
39 @if type_of($left) == number {
40 left: $left;
41 }
42 @if type_of($bottom) == number {
43 bottom: $bottom;
44 }
45 @if type_of($right) == number {
46 right: $right;
47 }
48 @if type_of($zindex) == number {
49 z-index: $zindex;
50 }
51 }
52
a3921bf Added new mixins
Tom Krush authored
53 @mixin size($width: false, $height: false) {
54 content: '';
55
56 @if type_of($width) == number {
57 width: $width;
58 }
59
60 @if type_of($height) == number {
61 height: $height;
62 }
63 }
64
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
65 /* Did compatability check on May 25th, 2012, removed -moz and -webkit */
a3921bf Added new mixins
Tom Krush authored
66 @mixin box-shadow($x: 0, $y: 0, $blur: 0, $color: transparent, $inset: false) {
bdfd0b9 @jamesfinley Box Shadow mixin can now take a list of shadows
jamesfinley authored
67 @if type-of($x) != list {
68 @if $inset {
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
69 @include experimental-property(-ms, box-shadow, inset $x $y $blur $color);
bdfd0b9 @jamesfinley Box Shadow mixin can now take a list of shadows
jamesfinley authored
70 }
71 @else {
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
72 @include experimental-property(-ms, box-shadow, $x $y $blur $color);
bdfd0b9 @jamesfinley Box Shadow mixin can now take a list of shadows
jamesfinley authored
73 }
a3921bf Added new mixins
Tom Krush authored
74 }
75 @else {
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
76 @include experimental-property(-ms, box-shadow, $x);
a3921bf Added new mixins
Tom Krush authored
77 }
78 }
79
80 @mixin box-sizing($value) {
5a3fb71 Update _mixins.scss
Tom Krush authored
81 -moz-box-sizing: $value;
4669d18 @jamesfinley Deprecating box-sizing mixin.
jamesfinley authored
82 box-sizing: $value;
a3921bf Added new mixins
Tom Krush authored
83 }
84
aaf1fb0 @jamesfinley Added mixins
jamesfinley authored
85 @mixin border-radius($radius: false, $topleft: false, $topright: false, $bottomright: false, $bottomleft: false) {
9826a9e @jamesfinley Fixed some bugs
jamesfinley authored
86 @if type_of($radius) == number {
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
87 border-radius: $radius;
9826a9e @jamesfinley Fixed some bugs
jamesfinley authored
88 }
89 @if type_of($topleft) == number {
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
90 border-top-left-radius: $topleft;
9826a9e @jamesfinley Fixed some bugs
jamesfinley authored
91 }
92 @if type_of($topright) == number {
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
93 border-top-right-radius: $topright;
9826a9e @jamesfinley Fixed some bugs
jamesfinley authored
94 }
95 @if type_of($bottomright) == number {
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
96 border-bottom-right-radius: $bottomright;
9826a9e @jamesfinley Fixed some bugs
jamesfinley authored
97 }
98 @if type_of($bottomleft) == number {
f040064 @jamesfinley Removed -moz and -webkit prefixes for box-shadow mixin
jamesfinley authored
99 border-bottom-left-radius: $bottomleft;
aaf1fb0 @jamesfinley Added mixins
jamesfinley authored
100 }
101 }
102
103 @mixin transition($property: false, $time: 1s, $ease: linear) {
9826a9e @jamesfinley Fixed some bugs
jamesfinley authored
104 @if $property == none {
75181dc Changed vendor-property to experiemental-property.
Tom Krush authored
105 @include experimental-property(-webkit -moz -o, transition, none);
9826a9e @jamesfinley Fixed some bugs
jamesfinley authored
106 }
107 @else {
75181dc Changed vendor-property to experiemental-property.
Tom Krush authored
108 @include experimental-property(-webkit -moz -o, transition, $property $time $ease);
aaf1fb0 @jamesfinley Added mixins
jamesfinley authored
109 }
110 }
111
112 @mixin hires-graphic($file, $type, $width, $height) {
113 $file_name: $file + '.' + $type;
114 $retina_name: $file + '_2x.' + $type;
115
116 background-image: url('../images/' + $file_name);
117
118 @media (-webkit-min-device-pixel-ratio: 2) {
9826a9e @jamesfinley Fixed some bugs
jamesfinley authored
119 background-image: url('../images/' + $retina_name) !important;
43d5f72 Updated sprite mixin
Tom Krush authored
120 @include experimental-property(-webkit, background-size, $width $height);
121 }
08849a1 @jamesfinley Added support for retina graphics in Opera and Firefox.
jamesfinley authored
122 @media (-moz-min-device-pixel-ratio: 2) {
123 background-image: url('../images/' + $retina_name) !important;
124 @include experimental-property(-webkit, background-size, $width $height);
125 }
126 @media (-o-min-device-pixel-ratio: 2) {
127 background-image: url('../images/' + $retina_name) !important;
128 @include experimental-property(-webkit, background-size, $width $height);
129 }
130 @media (min-device-pixel-ratio: 2) {
131 background-image: url('../images/' + $retina_name) !important;
132 @include experimental-property(-webkit, background-size, $width $height);
133 }
43d5f72 Updated sprite mixin
Tom Krush authored
134 }
135
136 @mixin sprite($file, $type, $row:1, $col:1, $width: 16px, $height: 16px, $retina: false, $sprite_width: '', $sprite_height: '')
137 {
138 width: $width;
139 height: $height;
140 background-position: $row * $width $col*$height;
141
142 @if $retina AND type_of($sprite_width) == 'number' AND type_of($sprite_height) == 'number' {
143 @include hires-graphic($file, $type, $sprite_width, $sprite_height);
144 }
145 @else {
146 background-image: url('../images/' + $file + '.' + $type);
aaf1fb0 @jamesfinley Added mixins
jamesfinley authored
147 }
a3921bf Added new mixins
Tom Krush authored
148 }
149
150 @mixin background-clip($clip)
151 {
5c7f888 Update _mixins.scss
Tom Krush authored
152 @include experimental-property(-webkit -moz -o, background-clip, $clip);
a3921bf Added new mixins
Tom Krush authored
153 }
154
155 @mixin radial-gradient($firstStopColor, $secondStopColor, $origin: center, $firstStopPosition: 0%, $secondStopPosition: 100%, $shape: ellipse, $size: cover)
156 {
157 $kind: $shape $size;
158 $firstStop: $firstStopColor $firstStopPosition;
159 $secondStop: $secondStopColor $secondStopPosition;
160
161 background-color: $firstStopColor;
162 background-image: -moz-radial-gradient($origin, $kind, $firstStop, $secondStop);
163 background-image: -webkit-radial-gradient($origin, $kind, $firstStop, $secondStop);
164 background-image: -o-radial-gradient($origin, $kind, $firstStop, $secondStop);
165 background-image: -ms-radial-gradient($origin, $kind, $firstStop, $secondStop);
166 background-image: radial-gradient($origin, $kind, $firstStop, $secondStop)
167 }
168
54b16c3 @jamesfinley New, more powerful Linear Gradient mixin!
jamesfinley authored
169 @mixin linear-gradient($colors, $stops, $direction: top) {
170 @if type-of($colors) != list {
f353f1e @jamesfinley New Transform mixin
jamesfinley authored
171 $first: $colors;
172 $last: $stops;
173
490687c Updated mixins
Tom Krush authored
174 background-color: $first; /* Old browsers */
175 background-image: -moz-linear-gradient(top, $first 0%, $last 100%); /* FF3.6+ */
176 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$first), color-stop(100%,$last)); /* Chrome,Safari4+ */
177 background-image: -webkit-linear-gradient(top, $first 0%,$last 100%); /* Chrome10+,Safari5.1+ */
178 background-image: -o-linear-gradient(top, $first 0%,$last 100%); /* Opera11.10+ */
179 background-image: -ms-linear-gradient(top, $first 0%,$last 100%); /* IE10+ */
f353f1e @jamesfinley New Transform mixin
jamesfinley authored
180 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$first}', endColorstr='#{$last}',GradientType=0); /*IE6-9 */
490687c Updated mixins
Tom Krush authored
181 background-image: linear-gradient(top, $first 0%,$last 100%); /* W3C */
54b16c3 @jamesfinley New, more powerful Linear Gradient mixin!
jamesfinley authored
182 }
183 @else {
184 $firstColor: '';
185 $lastColor: '';
186 $ci: 1;
187 $list: 0;
188 @each $color in $colors {
189 @if $ci == 1 {
190 $firstColor: $color;
191 }
192 @if $ci + 1 == length($colors) {
193 $lastColor: $color;
194 }
195 $list_item: join($color, nth($stops, $ci), space);
196 @if $list == 0 {
197 $list: $list_item;
198 }
199 @else {
200 $list: $list, $list_item;
201 }
202 $ci: $ci + 1;
203 }
490687c Updated mixins
Tom Krush authored
204 background-color: $firstColor; /* Old browsers */
205 background-image: -moz-linear-gradient($direction, $list); /* FF3.6+ */
206 background-image: -webkit-linear-gradient($direction, $list); /* Chrome10+,Safari5.1+ */
207 background-image: -ms-linear-gradient($direction, $list); /* Opera11.10+ */
208 background-image: -o-linear-gradient($direction, $list); /* IE10+ */
54b16c3 @jamesfinley New, more powerful Linear Gradient mixin!
jamesfinley authored
209 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$firstColor}', endColorstr='#{$lastColor}',GradientType=0); /*IE6-9 */
490687c Updated mixins
Tom Krush authored
210 background-image: linear-gradient($direction, $list); /* W3C */
54b16c3 @jamesfinley New, more powerful Linear Gradient mixin!
jamesfinley authored
211 }
212 }
213
a3921bf Added new mixins
Tom Krush authored
214 @function columns($count: 1, $padding: 0) {
215 $column-width: 60px !default;
216
217 $value: $count * $column-width - $padding;
218 @return $value;
219 }
220
221 @mixin clearfix()
222 {
223 &:after {
224 clear: both;
225 content: ".";
226 display: block;
227 height: 0;
228 visibility: hidden;
229 font-size: 0;
230 }
231 }
232
233 @mixin user-select($value) {
75181dc Changed vendor-property to experiemental-property.
Tom Krush authored
234 @include experimental-property(-webkit -moz -o, user-select, $value);
f353f1e @jamesfinley New Transform mixin
jamesfinley authored
235 }
236
237 @mixin transform($scaleX: false, $scaleY: false, $scaleZ: false, $translateX: false, $translateY: false, $translateZ: false, $skewX: false, $skewY: false, $skewZ: false, $rotate: false) {
238 $list: 0;
239
240 @if $scaleX {
241 $list_item: scaleX($scaleX);
242 @if $list == 0 {
243 $list: $list_item;
244 }
245 @else {
246 $list: $list $list_item;
247 }
248 }
249
250 @if $scaleY {
251 $list_item: scaleY($scaleY);
252 @if $list == 0 {
253 $list: $list_item;
254 }
255 @else {
256 $list: $list $list_item;
257 }
258 }
259
260 @if $scaleZ {
261 $list_item: scaleZ($scaleZ);
262 @if $list == 0 {
263 $list: $list_item;
264 }
265 @else {
266 $list: $list $list_item;
267 }
268 }
269
270 @if $translateX {
271 $list_item: translateX($translateX);
272 @if $list == 0 {
273 $list: $list_item;
274 }
275 @else {
276 $list: $list $list_item;
277 }
278 }
279
280 @if $translateY {
281 $list_item: translateY($translateY);
282 @if $list == 0 {
283 $list: $list_item;
284 }
285 @else {
286 $list: $list $list_item;
287 }
288 }
289
290 @if $translateZ {
291 $list_item: translateZ($translateZ);
292 @if $list == 0 {
293 $list: $list_item;
294 }
295 @else {
296 $list: $list $list_item;
297 }
298 }
299
300 @if $skewX {
301 $list_item: skewX($skewX);
302 @if $list == 0 {
303 $list: $list_item;
304 }
305 @else {
306 $list: $list $list_item;
307 }
308 }
309
310 @if $skewY {
311 $list_item: skewY($skewY);
312 @if $list == 0 {
313 $list: $list_item;
314 }
315 @else {
316 $list: $list $list_item;
317 }
318 }
319
320 @if $skewZ {
321 $list_item: skewZ($skewZ);
322 @if $list == 0 {
323 $list: $list_item;
324 }
325 @else {
326 $list: $list $list_item;
327 }
328 }
329
330 @if $rotate {
331 $list_item: rotate($rotate);
332 @if $list == 0 {
333 $list: $list_item;
334 }
335 @else {
336 $list: $list $list_item;
337 }
338 }
339
340 @include experimental-property(-moz -webkit -o, transform, $list);
aaf1fb0 @jamesfinley Added mixins
jamesfinley authored
341 }
Something went wrong with that request. Please try again.