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.
plain-ui/src/scss/helpers/_sizing.scss

85 lines
1.7 KiB

3 years ago
/**
* Sizing
*
* Width and Height Classes,
* Sizes with percentage will calculate with the Reflex Grid
*
*
*/
3 years ago
$sizing_steps: 50 !default;
3 years ago
/**
* mixin: sizing
*
*/
@mixin sizing($class, $style, $i, $value)
{
.#{$class}-#{$i} {
#{$style}: $value;
}
}
/**
* mixin: sizing for each breakpoint
*
*
*/
@mixin sizing_breakpoints($class, $style, $i, $value)
{
3 years ago
@include media-xs() {
3 years ago
@include sizing($class, $style, 'xs-' + $i, $value);
}
3 years ago
@include media-sm() {
3 years ago
@include sizing($class, $style, 'sm-' + $i, $value);
}
3 years ago
@include media-md() {
3 years ago
@include sizing($class, $style, 'md-' + $i, $value);
}
3 years ago
@include media-lg() {
3 years ago
@include sizing($class, $style, 'lg-' + $i, $value);
}
3 years ago
@include media-xlg() {
3 years ago
@include sizing($class, $style, 'xlg-' + $i, $value);
}
}
3 years ago
.w-0 { width: 0; }
.h-0 { height: 0; }
.w-1 { width: 1px;}
.h-1 { height: 1px; }
3 years ago
.w-100 { width: 100%; }
.h-100 { height: 100%; }
3 years ago
3 years ago
@for $i from 1 through $reflex-columns
{
$value: percentage(($i / $reflex-columns));
3 years ago
3 years ago
@include sizing('w-col', 'width', $i, $value);
@include sizing_breakpoints('w-col', 'width', $i, $value);
$value: percentage(($i / $reflex-columns));
@include sizing('h-col', 'height', $i, $value);
@include sizing_breakpoints('h-col', 'height', $i, $value);
3 years ago
}
3 years ago
@for $i from 1 through $sizing_steps
3 years ago
{
$value: #{($i * 0.5)}rem;
@include sizing('w', 'width', $i, $value);
@include sizing_breakpoints('w', 'width', $i, $value);
3 years ago
}
3 years ago
@for $i from 1 through $sizing_steps
3 years ago
{
$value: #{($i * 0.5)}rem;
@include sizing('h', 'height', $i, $value);
@include sizing_breakpoints('h', 'height', $i, $value);
3 years ago
}