Permalink
Browse files

Added mixins

  • Loading branch information...
1 parent b9715c8 commit aaf1fb06a47e92383cbfd260923173b4a9083ba2 @jamesfinley jamesfinley committed Oct 9, 2011
Showing with 137 additions and 0 deletions.
  1. +39 −0 README.md
  2. +98 −0 _mixins.scss
View
@@ -0,0 +1,39 @@
+# CSS3
+
+## Border Radius
+
+```scss
+@include border-radius($radius, $topleft, $topright, $bottomright, $bottomleft);
+@include border-radius(3px);
+@include border-radius($topleft: 3px);
+```
+
+## Box Shadow
+
+```scss
+@include box-shadow($x, $y, $blur, $color, $inset: false);
+@include box-shadow(0, 0, 10px, rgba(0, 0, 0, .5));
+```
+
+## Box Sizing
+
+```scss
+@include box-sizing($value);
+@include box-sizing(border-box);
+```
+
+## Transitions
+
+```scss
+@include transition($property: false, $time: 1s, $ease: linear);
+@include transition(width, .35s);
+```
+
+# Other
+
+## Retina Graphics
+
+```scss
+@include hires-graphic($file, $type, $width, $height);
+@include hires-graphic('logo', 'png', 200px, 120px);
+```
View
@@ -0,0 +1,98 @@
+@mixin position($top: false, $left: false, $bottom: false, $right: false, $zindex: false) {
+ position: absolute;
+ @if type_of($top) == number {
+ top: $top;
+ }
+ @if type_of($left) == number {
+ left: $left;
+ }
+ @if type_of($bottom) == number {
+ bottom: $bottom;
+ }
+ @if type_of($right) == number {
+ right: $right;
+ }
+ @if type_of($zindex) == number {
+ z-index: $zindex;
+ }
+}
+
+@mixin border-radius($radius: false, $topleft: false, $topright: false, $bottomright: false, $bottomleft: false) {
+ @if $css3 {
+ @if type_of($radius) == number {
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ border-radius: $radius;
+ }
+ @if type_of($topleft) == number {
+ -webkit-border-top-left-radius: $topleft;
+ -moz-border-radius-topleft: $topleft;
+ border-top-left-radius: $topleft;
+ }
+ @if type_of($topright) == number {
+ -webkit-border-top-right-radius: $topright;
+ -moz-border-radius-topright: $topright;
+ border-top-right-radius: $topright;
+ }
+ @if type_of($bottomright) == number {
+ -webkit-border-bottom-right-radius: $bottomright;
+ -moz-border-radius-bottomright: $bottomright;
+ border-bottom-right-radius: $bottomright;
+ }
+ @if type_of($bottomleft) == number {
+ -webkit-border-bottom-left-radius: $bottomleft;
+ -moz-border-radius-bottomleft: $bottomleft;
+ border-bottom-left-radius: $bottomleft;
+ }
+ }
+}
+
+@mixin box-shadow($x, $y, $blur, $color, $inset: false) {
+ @if $css3 {
+ @if $inset {
+ -webkit-box-shadow: inset $x $y $blur $color;
+ -moz-box-shadow: inset $x $y $blur $color;
+ box-shadow: inset $x $y $blur $color;
+ }
+ @else {
+ -webkit-box-shadow: $x $y $blur $color;
+ -moz-box-shadow: $x $y $blur $color;
+ box-shadow: $x $y $blur $color;
+ }
+ }
+}
+
+@mixin box-sizing($value) {
+ -webkit-box-sizing: $value;
+ -moz-box-sizing: $value;
+ box-sizing: $value;
+}
+
+@mixin transition($property: false, $time: 1s, $ease: linear) {
+ @if $css3 {
+ @if $property == none {
+ -webkit-transition: none;
+ -moz-transition: none;
+ -o-transition: none;
+ }
+ @else {
+ -webkit-transition: $property $time $ease;
+ -moz-transition: $property $time $ease;
+ -o-transition: $property $time $ease;
+ }
+ }
+}
+
+@mixin hires-graphic($file, $type, $width, $height) {
+ $file_name: $file + '.' + $type;
+ $retina_name: $file + '_2x.' + $type;
+
+ background-image: url('../images/' + $file_name);
+
+ @media (-webkit-min-device-pixel-ratio: 2) {
+ & {
+ background-image: url('../images/' + $retina_name) !important;
+ -webkit-background-size: $width $height;
+ }
+ }
+}

0 comments on commit aaf1fb0

Please sign in to comment.