|
|
|
/**
|
|
|
|
* mixins
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* @author Björn Hase, Tentakelfabrik
|
|
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
|
|
* @link https://github.com/tentakelfabrik/plain-ui-css
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Clear Floats
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@mixin clearfix() {
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
display: table;
|
|
|
|
content: ' ';
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* clear styles from list
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@mixin clearlist() {
|
|
|
|
list-style: none;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
li {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* media-queries as mixins
|
|
|
|
* based on breakpoints from variables
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@mixin media-xs() {
|
|
|
|
@media only screen and (min-width: $breakpoint__xs) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-sm() {
|
|
|
|
@media only screen and (min-width: $breakpoint__sm) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-md() {
|
|
|
|
@media only screen and (min-width: $breakpoint__md) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-lg() {
|
|
|
|
@media only screen and (min-width: $breakpoint__lg) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xlg() {
|
|
|
|
@media only screen and (min-width: $breakpoint__xlg) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xxs-only() {
|
|
|
|
@media only screen and (max-width: $breakpoint__xs) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xxs-only() {
|
|
|
|
@media only screen and (max-width: $breakpoint__xs - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xs-only() {
|
|
|
|
@media only screen and (min-width: $breakpoint__xs) and (max-width: $breakpoint__sm - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-sm-only() {
|
|
|
|
@media only screen and (min-width: $breakpoint__sm) and (max-width: $breakpoint__md - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-md-only() {
|
|
|
|
@media only screen and (min-width: $breakpoint__md) and (max-width: $breakpoint__lg - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-lg-only() {
|
|
|
|
@media only screen and (min-width: $breakpoint__lg) and (max-width: $breakpoint__xlg - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xlg-only() {
|
|
|
|
@media only screen and (min-width: $breakpoint__xlg) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set property and his value for each Breakpoint
|
|
|
|
*
|
|
|
|
* (
|
|
|
|
* $md: 10px
|
|
|
|
* )
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* @param {css} $property
|
|
|
|
* @param {map} $breakpoints
|
|
|
|
* @param {Boolean} $important [false]
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@mixin breakpoints($property, $breakpoints, $important: false) {
|
|
|
|
@each $breakpoint, $value in $breakpoints {
|
|
|
|
@media only screen and (min-width: $breakpoint) {
|
|
|
|
@if $important == false {
|
|
|
|
#{$property}: $value;
|
|
|
|
} @else {
|
|
|
|
#{$property}: $value !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-breakpoints($property, $breakpoints, $important: false) {
|
|
|
|
@each $breakpoint, $value in $breakpoints {
|
|
|
|
@media only screen and (min-width: $breakpoint) {
|
|
|
|
@if $important == false {
|
|
|
|
#{$property}: $value;
|
|
|
|
} @else {
|
|
|
|
#{$property}: $value !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set property and his value with an factor for each Breakpoint
|
|
|
|
*
|
|
|
|
* (
|
|
|
|
* $md: 10px
|
|
|
|
* )
|
|
|
|
*
|
|
|
|
* @param {css} $property
|
|
|
|
* @param {number} $factor
|
|
|
|
* @param {map} $breakpoints
|
|
|
|
* @param {Boolean} $important [false]
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@mixin breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
|
|
|
|
@each $breakpoint, $value in $breakpoints {
|
|
|
|
@media only screen and (min-width: $breakpoint) {
|
|
|
|
@if $important == false {
|
|
|
|
#{$property}: ($value * $factor);
|
|
|
|
} @else {
|
|
|
|
#{$property}: ($value * $factor) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
|
|
|
|
*
|
|
|
|
* (
|
|
|
|
* $md: 1rem
|
|
|
|
* )
|
|
|
|
*
|
|
|
|
* @param {map} $breakpoints
|
|
|
|
* @param {unit} $font-size
|
|
|
|
* @param {unit} $default
|
|
|
|
* @param {Boolean} $important [false]
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
@mixin breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
|
|
|
|
@each $breakpoint, $value in $breakpoints {
|
|
|
|
|
|
|
|
// getting diff
|
|
|
|
$factor: (stripUnit($font-size) - stripUnit($default)) + 1;
|
|
|
|
|
|
|
|
// ignore if factor is zero
|
|
|
|
@if $factor > 0 {
|
|
|
|
@media only screen and (min-width: $breakpoint) {
|
|
|
|
@if $important == false {
|
|
|
|
font-size: ($value * $factor);
|
|
|
|
} @else {
|
|
|
|
font-size: ($value * $factor) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|