You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
4.2 KiB
215 lines
4.2 KiB
/**
|
|
* 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 plain-ui__clearfix() {
|
|
&::before,
|
|
&::after {
|
|
display: table;
|
|
content: ' ';
|
|
}
|
|
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* clear styles from list
|
|
*
|
|
*
|
|
*/
|
|
|
|
@mixin plain-ui__clearlist() {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* media-queries as mixins
|
|
* based on breakpoints from variables
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
@mixin plain-ui__media-xs() {
|
|
@media only screen and (min-width:$plain-ui__xs) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-sm() {
|
|
@media only screen and (min-width: $plain-ui__sm) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-md() {
|
|
@media only screen and (min-width: $plain-ui__md) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-lg() {
|
|
@media only screen and (min-width: $plain-ui__lg) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-xlg() {
|
|
@media only screen and (min-width: $plain-ui__xlg) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-xxs-only() {
|
|
@media only screen and (max-width: $plain-ui__xs) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-xxs-only() {
|
|
@media only screen and (max-width: $plain-ui__xs - 1) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-xs-only() {
|
|
@media only screen and (min-width: $plain-ui__xs) and (max-width: $plain-ui__sm - 1) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-sm-only() {
|
|
@media only screen and (min-width: $plain-ui__sm) and (max-width: $plain-ui__md - 1) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-md-only() {
|
|
@media only screen and (min-width: $plain-ui__md) and (max-width: $plain-ui__lg - 1) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-lg-only() {
|
|
@media only screen and (min-width: $plain-ui__lg) and (max-width: $plain-ui__xlg - 1) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin plain-ui__media-xlg-only() {
|
|
@media only screen and (min-width: $plain-ui__xlg) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Set property and his value for each Breakpoint
|
|
*
|
|
* (
|
|
* $plain-ui__md: 10px
|
|
* )
|
|
*
|
|
*
|
|
* @param {css} $property
|
|
* @param {map} $breakpoints
|
|
* @param {Boolean} $important [false]
|
|
*
|
|
*/
|
|
|
|
@mixin plain-ui__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
|
|
*
|
|
* (
|
|
* $plain-ui__md: 10px
|
|
* )
|
|
*
|
|
* @param {css} $property
|
|
* @param {number} $factor
|
|
* @param {map} $breakpoints
|
|
* @param {Boolean} $important [false]
|
|
*
|
|
*/
|
|
|
|
@mixin plain-ui__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
|
|
*
|
|
* (
|
|
* $plain-ui__md: 1rem
|
|
* )
|
|
*
|
|
* @param {map} $breakpoints
|
|
* @param {unit} $font-size
|
|
* @param {unit} $default
|
|
* @param {Boolean} $important [false]
|
|
*
|
|
*/
|
|
@mixin plain-ui__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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|