|
|
|
/**
|
|
|
|
* mixins
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* @author Björn Hase, me@herr-hase.wtf
|
|
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
|
|
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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: $grid__xs) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-sm() {
|
|
|
|
@media only screen and (min-width: $grid__sm) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-md() {
|
|
|
|
@media only screen and (min-width: $grid__md) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-lg() {
|
|
|
|
@media only screen and (min-width: $grid__lg) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xlg() {
|
|
|
|
@media only screen and (min-width: $grid__xlg) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xxs-only() {
|
|
|
|
@media only screen and (max-width: $grid__xs) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xxs-only() {
|
|
|
|
@media only screen and (max-width: $grid__xs - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xs-only() {
|
|
|
|
@media only screen and (min-width: $grid__xs) and (max-width: $grid__sm - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-sm-only() {
|
|
|
|
@media only screen and (min-width: $grid__sm) and (max-width: $grid__md - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-md-only() {
|
|
|
|
@media only screen and (min-width: $grid__md) and (max-width: $grid__lg - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-lg-only() {
|
|
|
|
@media only screen and (min-width: $grid__lg) and (max-width: $grid__xlg - 1) {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin media-xlg-only() {
|
|
|
|
@media only screen and (min-width: $grid__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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* adding overlay with z-index and color
|
|
|
|
*
|
|
|
|
* @param {z-index}
|
|
|
|
* @param {color}
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
@mixin overlay($z-index: 0, $color: transparent) {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
background-color: #{$color};
|
|
|
|
transition: background-color 0.5s;
|
|
|
|
z-index: #{$z-index};
|
|
|
|
|
|
|
|
content: '';
|
|
|
|
}
|