SASS: Elements

elements.scss

@mixin block{
	display: block;
	margin: 0;
	padding: 0;
	&>li{
		display: block;
		margin: 0;
		padding: 0;
    list-style-type: none;
	}
}

@mixin inline{
    display:inline-block;
    *display: inline;
    zoom: 1;
		margin: 0;
    padding: 0;
  &>li{
		margin: 0;
    padding: 0;
    display:inline-block;
    *display: inline;
    zoom: 1;
    list-style-type: none;
  }
}

@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
  background: $color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, $start),
                               color-stop(1, $stop));
  background: -ms-linear-gradient(bottom,
                                  $start,
                                  $stop);
  background: -moz-linear-gradient(center bottom,
                                   $start 0%,
                                   $stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$stop}');
  zoom : 1;

}


@mixin box-shadow($arguments) {
  -webkit-box-shadow: $arguments;
  -moz-box-shadow: $arguments;
  box-shadow: $arguments;
}

@mixin rounded($radius: 2px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
}
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
  -webkit-border-top-right-radius: $topright;
  -webkit-border-bottom-right-radius: $bottomright;
  -webkit-border-bottom-left-radius: $bottomleft;
  -webkit-border-top-left-radius: $topleft;
  -moz-border-radius-topright: $topright;
  -moz-border-radius-bottomright: $bottomright;
  -moz-border-radius-bottomleft: $bottomleft;
  -moz-border-radius-topleft: $topleft;
  border-top-right-radius: $topright;
  border-bottom-right-radius: $bottomright;
  border-bottom-left-radius: $bottomleft;
  border-top-left-radius: $topleft;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
}
@mixin opacity($opacity: 0.5) {
  -moz-opacity: $opacity;
  -khtml-opacity: $opacity;
  -webkit-opacity: $opacity;
  filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
  opacity: $opacity;
}

@mixin bw-gradient($color: #F5F5F5, $start: 0, $stop: 255) {
  background: $color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, rgb($start,$start,$start)),
                               color-stop(1, rgb($stop,$stop,$stop)));
  background: -ms-linear-gradient(bottom,
                                  rgb($start,$start,$start) 0%,
                                  rgb($start,$start,$start) 100%);
  background: -moz-linear-gradient(center bottom,
                                   rgb($start,$start,$start) 0%,
                                   rgb($stop,$stop,$stop) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$stop}');

}
@mixin bordered($top-color: #EEE, $right-color: #EEE, $bottom-color: #EEE, $left-color: #EEE) {
  border-top: solid 1px $top-color;
  border-left: solid 1px $left-color;
  border-right: solid 1px $right-color;
  border-bottom: solid 1px $bottom-color;
}


@mixin transition-duration($duration: 0.2s) {
  -moz-transition-duration: $duration;
  -webkit-transition-duration: $duration;
  transition-duration: $duration;
}
@mixin rotation($deg:5deg){
  -webkit-transform: rotate($deg);
  -moz-transform: rotate($deg);
  transform: rotate($deg);
}
@mixin scale($ratio:1.5){
  -webkit-transform:scale($ratio);
  -moz-transform:scale($ratio);
  transform:scale($ratio);
}
@mixin transition($duration:0.2s, $ease:ease-out) {
  -webkit-transition: all $duration $ease;
  -moz-transition: all $duration $ease;
  transition: all $duration $ease;
}
@mixin inner-shadow($horizontal:0, $vertical:1px, $blur:2px, $alpha: 0.4) {
  -webkit-box-shadow: inset $horizontal $vertical $blur rgba(0, 0, 0, $alpha);
  -moz-box-shadow: inset $horizontal $vertical $blur rgba(0, 0, 0, $alpha);
  box-shadow: inset $horizontal $vertical $blur rgba(0, 0, 0, $alpha);
}

@mixin columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #EEE, $columnRuleStyle: solid, $columnRuleWidth: 1px) {
  -moz-column-width: $colwidth;
  -moz-column-count: $colcount;
  -moz-column-gap: $colgap;
  -moz-column-rule-color: $columnRuleColor;
  -moz-column-rule-style: $columnRuleStyle;
  -moz-column-rule-width: $columnRuleWidth;
  -webkit-column-width: $colwidth;
  -webkit-column-count: $colcount;
  -webkit-column-gap: $colgap;
  -webkit-column-rule-color: $columnRuleColor;
  -webkit-column-rule-style: $columnRuleStyle;
  -webkit-column-rule-width: $columnRuleWidth;
  column-width: $colwidth;
  column-count: $colcount;
  column-gap: $colgap;
  column-rule-color: $columnRuleColor;
  column-rule-style: $columnRuleStyle;
  column-rule-width: $columnRuleWidth;
}
@mixin translate($x:0, $y:0) {
  -moz-transform: translate($x, $y);
  -webkit-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  transform: translate($x, $y);
}

@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $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);
}