Congegni/barebones
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactored SASS, mobile first

Browse source
This commit is contained in:
Mike Francis 2013-01-17 21:26:23 +00:00
parent d4644e59d1
commit f656e942da
17 changed files with 378 additions and 442 deletions
Download patch file Download diff file Expand all files Collapse all files

49
_/scss/generic/_mixins.scss Executable file
View file

@ -0,0 +1,49 @@
@mixin breakpoint($point) {
@if $point == desktop {
@media (min-width: 1200px) { @content; }
}
@else if $point == tablet-landscape {
@media (min-width: 1024px) { @content; }
}
@else if $point == tablet-portrait {
@media (min-width: 768px) { @content; }
}
}
@mixin border-radius ($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin col-width ($span: 1) {
//width: ((($container-width / $column-count) * $span) - $column-gutter) / $container-width * 100%;
width: ((100 / $column-count) * $span) - ($column-gutter / $container-max-width) * 100%;
}
@mixin box-sizing ($box-model: 'border-box') {
-webkit-box-sizing: $box-model;
-moz-box-sizing: $box-model;
box-sizing: $box-model;
}
@mixin box-shadow($x-axis: 0, $y-axis: 2px, $blur: 2px, $alpha: 0.1) {
-webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
}
@mixin transition($duration:0.2s, $ease:ease-out) {
-webkit-transition: all $duration $ease;
-moz-transition: all $duration $ease;
transition: all $duration $ease;
}
@mixin gradient($from, $to) {
background-color: $from;
background-image: -webkit-linear-gradient($from, $to);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
background-image: -moz-linear-gradient($from, $to);
background-image: -o-linear-gradient($from, $to);
}