|
|
|
@ -1,34 +1,87 @@
|
|
|
|
|
/**
|
|
|
|
|
* visibility
|
|
|
|
|
*
|
|
|
|
|
*
|
|
|
|
|
* @author Björn Hase, Tentakelfabrik
|
|
|
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
|
|
|
* @link https://github.com/tentakelfabrik/plain-ui-css
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* display
|
|
|
|
|
*
|
|
|
|
|
*
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
@mixin display($breakpoint, $class, $value)
|
|
|
|
|
{
|
|
|
|
|
.display-#{ $class }-#{ $breakpoint } {
|
|
|
|
|
display: #{ $value };
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@mixin display-breakpoints($class, $value)
|
|
|
|
|
{
|
|
|
|
|
@include media-xs() {
|
|
|
|
|
@include display('xs', $class, $value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media-sm() {
|
|
|
|
|
@include display('sm', $class, $value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media-md() {
|
|
|
|
|
@include display('md', $class, $value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media-lg() {
|
|
|
|
|
@include display('lg', $class, $value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media-xlg() {
|
|
|
|
|
@include display('xlg', $class, $value);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.display-block {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include display-breakpoints('block', 'block');
|
|
|
|
|
|
|
|
|
|
.display-inline {
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include display-breakpoints('inline', 'inline');
|
|
|
|
|
|
|
|
|
|
.display-inline-block {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include display-breakpoints('inline-block', 'inline-block');
|
|
|
|
|
|
|
|
|
|
.display-flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include display-breakpoints('flex', 'flex');
|
|
|
|
|
|
|
|
|
|
.display-inline-flex {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include display-breakpoints('inline-flex', 'inline-flex');
|
|
|
|
|
|
|
|
|
|
.display-table {
|
|
|
|
|
display: table;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include display-breakpoints('table', 'table');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers
|
|
|
|
|