woocommerce/assets/css/_mixins.scss

272 lines
4.9 KiB
SCSS
Raw Normal View History

2014-10-17 19:58:43 +00:00
/**
* Deprecated
* Fallback for bourbon equivalent
*/
2014-09-22 17:35:48 +00:00
@mixin clearfix() {
*zoom: 1;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@mixin border_radius($radius: 4px) {
border-radius: $radius;
2014-09-22 17:35:48 +00:00
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@mixin border_radius_right($radius: 4px) {
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@mixin border_radius_left($radius: 4px) {
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@mixin border_radius_bottom($radius: 4px) {
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@mixin border_radius_top($radius: 4px) {
border-top-left-radius: $radius;
border-top-right-radius: $radius;
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@mixin opacity( $opacity: 0.75 ) {
opacity: $opacity;
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@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;
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@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;
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@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;
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@mixin vertical_gradient($from: #000, $to: #fff) {
2014-11-13 08:40:28 +00:00
background-color: $from;
2014-09-22 17:35:48 +00:00
background: -webkit-linear-gradient($from, $to);
}
/**
* Deprecated
* Vendor prefix no longer required.
*/
2014-09-22 17:35:48 +00:00
@mixin transition($selector: all, $animation: ease-in-out, $duration: .2s) {
transition: $selector $animation $duration;
}
2014-10-17 19:58:43 +00:00
/**
* Deprecated
* Use bourbon mixin instead `@include transform(scale(1.5));`
*/
2014-09-22 17:35:48 +00:00
@mixin scale($ratio: 1.5) {
-webkit-transform: scale($ratio);
transform: scale($ratio);
}
2015-03-20 12:49:37 +00:00
/**
* Deprecated
* Use bourbon mixin instead `@include box-sizing(border-box);`
*/
@mixin borderbox() {
box-sizing: border-box;
}
2014-09-22 17:35:48 +00:00
@mixin darkorlighttextshadow($a, $opacity: .8) {
2015-03-17 15:45:35 +00:00
@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));
}
2014-09-22 17:35:48 +00:00
}
/**
* 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;
2014-11-14 09:47:45 +00:00
margin: 0;
2014-09-22 17:35:48 +00:00
text-indent: 0;
position: absolute;
2014-11-14 09:47:45 +00:00
top: 0;
left: 0;
width: 100%;
2014-09-22 17:35:48 +00:00
height: 100%;
text-align: center;
content: $glyph;
}
@mixin icon_dashicons( $glyph: "\f333" ) {
font-family: 'Dashicons';
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%;
2014-09-22 17:35:48 +00:00
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;
2014-11-14 09:47:45 +00:00
margin-right: .618em;
2014-09-22 17:35:48 +00:00
content: $glyph;
text-decoration: none;
2014-09-22 17:35:48 +00:00
}
@mixin iconbeforedashicons( $glyph: "\f333" ) {
font-family: 'Dashicons';
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
margin-right: .618em;
content: $glyph;
text-decoration: none;
}
2014-09-22 17:35:48 +00:00
@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;
2014-11-14 09:47:45 +00:00
margin-left: .618em;
2014-09-22 17:35:48 +00:00
content: $glyph;
text-decoration: none;
2014-11-14 09:47:45 +00:00
}
2014-11-13 18:28:15 +00:00
@mixin loader() {
&:before {
height: 1em;
width: 1em;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
2015-03-17 15:45:35 +00:00
content: "";
2015-03-18 16:36:22 +00:00
@include animation( spin 1s ease-in-out infinite );
2015-03-17 15:45:35 +00:00
background: url(../images/icons/loader.svg) center center;
background-size: cover;
2014-11-13 18:28:15 +00:00
line-height: 1;
text-align: center;
2014-11-14 09:47:45 +00:00
font-size: 2em;
2014-11-13 18:28:15 +00:00
color: rgba(#000,0.75);
}
2015-03-17 15:45:35 +00:00
}