$woocommerce: #ad74a2; $green: #7ad03a; $red: #a00; $orange: #ffba00; $blue: #2ea2cc; @mixin clearfix() { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } } @mixin border_radius($radius: 4px) { -webkit-border-radius:$radius; border-radius:$radius; } @mixin border_radius_right($radius: 4px) { -webkit-border-top-right-radius: $radius; -webkit-border-bottom-right-radius: $radius; border-top-right-radius: $radius; border-bottom-right-radius: $radius; } @mixin border_radius_left($radius: 4px) { -webkit-border-top-left-radius: $radius; -webkit-border-bottom-left-radius: $radius; border-top-left-radius: $radius; border-bottom-left-radius: $radius; } @mixin border_radius_bottom($radius: 4px) { -webkit-border-bottom-left-radius: $radius; -webkit-border-bottom-right-radius: $radius; border-bottom-left-radius: $radius; border-bottom-right-radius: $radius; } @mixin border_radius_top($radius: 4px) { -webkit-border-top-left-radius: $radius; -webkit-border-top-right-radius: $radius; border-top-left-radius: $radius; border-top-right-radius: $radius; } @mixin opacity( $opacity: 0.75 ) { filter: unquote("alpha(opacity=$opacity * 100)"); -moz-opacity: $opacity; -khtml-opacity: $opacity; opacity: $opacity; } @mixin box_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_in: 3px, $shadow_color: #888) { box-shadow: $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color; -webkit-box-shadow: $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color; } @mixin inset_box_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_in: 3px, $shadow_color: #888) { box-shadow: inset $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color; -webkit-box-shadow: inset $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color; } @mixin text_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_color: #fff) { text-shadow: $shadow_x $shadow_y $shadow_rad $shadow_color; } @mixin vertical_gradient($from: #000, $to: #fff) { background: $from; background: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); background: -webkit-linear-gradient($from, $to); background: -moz-linear-gradient(center top, $from 0%, $to 100%); background: -moz-gradient(center top, $from 0%, $to 100%); } @mixin transition($selector: all, $animation: ease-in-out, $duration: .2s) { -webkit-transition: $selector $animation $duration; -moz-transition: $selector $animation $duration; -o-transition: $selector $animation $duration; transition: $selector $animation $duration; } @mixin scale($ratio: 1.5) { -webkit-transform: scale($ratio); -moz-transform: scale($ratio); -ms-transform: scale($ratio); -o-transform: scale($ratio); transform: scale($ratio); } @mixin borderbox() { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } @mixin darkorlighttextshadow($a, $opacity: .8) { @if lightness($a) >= 65% { @include text_shadow(0, -1px, 0, rgba(0, 0, 0, $opacity)); } @else { @include text_shadow(0, 1px, 0, rgba(255, 255, 255, $opacity)); } } /** * Objects */ @mixin menu() { @include clearfix(); li { display: inline-block; } } @mixin mediaright() { @include clearfix(); img { float: right; height: auto; } } @mixin medialeft() { @include clearfix(); img { float: right; height: auto; } } @mixin ir() { display: block; text-indent: -9999px; position: relative; height: 1em; width: 1em; } @mixin icon( $glyph: "\e001" ) { font-family: 'WooCommerce'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; margin:0; text-indent: 0; position: absolute; top:0; left:0; width:100%; height: 100%; text-align: center; content: $glyph; } @mixin iconbefore( $glyph: "\e001" ) { font-family: 'WooCommerce'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; margin-right:7px; content: $glyph; } @mixin iconafter( $glyph: "\e001" ) { font-family: 'WooCommerce'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; margin-left: 7px; content: $glyph; } // Common styles. .clear { clear: both; } .nobr { white-space: nowrap; }