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.
124 lines
1.8 KiB
124 lines
1.8 KiB
/**
|
|
* visibility
|
|
*
|
|
*
|
|
* @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
|
|
*
|
|
*/
|
|
|
|
|
|
/**
|
|
* 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
|
|
*
|
|
* @TODO full integration of reflexgrid will change this part
|
|
*
|
|
*/
|
|
|
|
|
|
/**
|
|
* Visibility
|
|
*
|
|
*/
|
|
|
|
.visibility-hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.visibility-visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.visibility-collapse {
|
|
visibility: collapse;
|
|
}
|
|
|
|
|
|
/**
|
|
* Opacity
|
|
*
|
|
*
|
|
*/
|
|
|
|
$opacity-steps: 10;
|
|
|
|
@for $i from 1 through $opacity-steps {
|
|
.opacity-#{ $i } {
|
|
opacity: ($i / 10);
|
|
}
|
|
} |