Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
105 righe
2.5 KiB
105 righe
2.5 KiB
5 anni fa
|
@function rem($px, $base: $base_font_size) {
|
||
|
|
@return ($px / $base) * 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@function em($px, $base: $base_font_size) {
|
||
|
|
@return ($px / $base) * 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin display-flex() {
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -moz-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
@mixin display-inline-flex() {
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -moz-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: -webkit-inline-flex;
|
||
|
|
display: inline-flex;
|
||
|
|
}
|
||
|
|
@mixin flex-wrap($wrap:nowrap) {
|
||
|
|
-webkit-flex-wrap: $wrap;
|
||
|
|
-ms-flex-wrap: $wrap;
|
||
|
|
flex-wrap: $wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin flex-direction($direction:row) {
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-box-direction: normal;
|
||
|
|
-webkit-flex-direction: $direction;
|
||
|
|
-ms-flex-direction: $direction;
|
||
|
|
flex-direction: $direction;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin justify-content($justify-content:flex-start) {
|
||
|
|
-webkit-justify-content: $justify-content;
|
||
|
|
-moz-justify-content: $justify-content;
|
||
|
|
-ms-justify-content: $justify-content;
|
||
|
|
justify-content: $justify-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin align-content($align-content:flex-start) {
|
||
|
|
-webkit-align-content: $align-content;
|
||
|
|
-moz-align-content: $align-content;
|
||
|
|
-ms-align-content: $align-content;
|
||
|
|
align-content: $align-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin align-items($align-items:flex-start) {
|
||
|
|
-webkit-align-items: $align-items;
|
||
|
|
-moz-align-items: $align-items;
|
||
|
|
-ms-align-items: $align-items;
|
||
|
|
align-items: $align-items;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin flex($fg: 1, $fs: null, $fb: null) {
|
||
|
|
|
||
|
|
// Set a variable to be used by box-flex properties
|
||
|
|
$fg-boxflex: $fg;
|
||
|
|
|
||
|
|
// Box-Flex only supports a flex-grow value so let's grab the
|
||
|
|
// first item in the list and just return that.
|
||
|
|
@if type-of($fg) == 'list' {
|
||
|
|
$fg-boxflex: nth($fg, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
-webkit-box-flex: $fg-boxflex;
|
||
|
|
-webkit-flex: $fg $fs $fb;
|
||
|
|
-moz-box-flex: $fg-boxflex;
|
||
|
|
-moz-flex: $fg $fs $fb;
|
||
|
|
-ms-flex: $fg $fs $fb;
|
||
|
|
flex: $fg $fs $fb;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@mixin align-self($align-self:auto) {
|
||
|
|
-webkit-align-self: $align-self;
|
||
|
|
-moz-align-self: $align-self;
|
||
|
|
-ms-align-self: $align-self;
|
||
|
|
align-self: $align-self;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin transform($transforms) {
|
||
|
|
-moz-transform: $transforms;
|
||
|
|
-o-transform: $transforms;
|
||
|
|
-ms-transform: $transforms;
|
||
|
|
-webkit-transform: $transforms;
|
||
|
|
transform: $transforms;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin transform-origin ($origin) {
|
||
|
|
moz-transform-origin: $origin;
|
||
|
|
-o-transform-origin: $origin;
|
||
|
|
-ms-transform-origin: $origin;
|
||
|
|
-webkit-transform-origin: $origin;
|
||
|
|
transform-origin: $origin;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin calc($property, $expression) {
|
||
|
|
#{$property}: -moz-calc(#{$expression});
|
||
|
|
#{$property}: -webkit-calc(#{$expression});
|
||
|
|
#{$property}: calc(#{$expression});
|
||
|
|
}
|