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.
102 lines
2.2 KiB
102 lines
2.2 KiB
/**
|
|
* Sizing
|
|
*
|
|
* Width and Height Classes,
|
|
* Sizes with percentage will calculate with the Reflex Grid
|
|
*
|
|
*
|
|
*/
|
|
|
|
$sizing_steps: 99 !default;
|
|
|
|
/**
|
|
* mixin: sizing
|
|
*
|
|
*/
|
|
@mixin sizing($class, $style, $i, $value)
|
|
{
|
|
.#{$class}-#{$i} {
|
|
#{$style}: $value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* mixin: sizing for each breakpoint
|
|
*
|
|
*
|
|
*/
|
|
@mixin sizing_breakpoints($class, $style, $i, $value)
|
|
{
|
|
@include media-xs() {
|
|
@include sizing($class, $style, 'xs-' + $i, $value);
|
|
}
|
|
|
|
@include media-sm() {
|
|
@include sizing($class, $style, 'sm-' + $i, $value);
|
|
}
|
|
|
|
@include media-md() {
|
|
@include sizing($class, $style, 'md-' + $i, $value);
|
|
}
|
|
|
|
@include media-lg() {
|
|
@include sizing($class, $style, 'lg-' + $i, $value);
|
|
}
|
|
|
|
@include media-xlg() {
|
|
@include sizing($class, $style, 'xlg-' + $i, $value);
|
|
}
|
|
}
|
|
|
|
.w-0 { width: 0; }
|
|
@include sizing_breakpoints('w', 'width', '1', 0);
|
|
|
|
.h-0 { height: 0; }
|
|
@include sizing_breakpoints('h', 'height', '1', 0);
|
|
|
|
.w-1 { width: 1px;}
|
|
@include sizing_breakpoints('w', 'width', '1', 1px);
|
|
|
|
.h-1 { height: 1px; }
|
|
@include sizing_breakpoints('h', 'height', '1', 1px);
|
|
|
|
.w-100 { width: 100%; }
|
|
@include sizing_breakpoints('w', 'width', '100', 100%);
|
|
|
|
.w-auto { width: auto; }
|
|
@include sizing_breakpoints('w', 'width', 'auto', auto);
|
|
|
|
.h-100 { height: 100%; }
|
|
@include sizing_breakpoints('h', 'height', '100', 100%);
|
|
|
|
.h-auto { height: auto; }
|
|
@include sizing_breakpoints('h', 'height', 'auto', auto);
|
|
|
|
@for $i from 1 through $grid__columns
|
|
{
|
|
$value: percentage(($i / $grid__columns));
|
|
|
|
@include sizing('w-col', 'width', $i, $value);
|
|
@include sizing_breakpoints('w-col', 'width', $i, $value);
|
|
|
|
$value: percentage(($i / $grid__columns));
|
|
|
|
@include sizing('h-col', 'height', $i, $value);
|
|
@include sizing_breakpoints('h-col', 'height', $i, $value);
|
|
}
|
|
|
|
@for $i from 1 through $sizing_steps
|
|
{
|
|
$value: #{($i * 0.5)}rem;
|
|
|
|
@include sizing('w', 'width', $i, $value);
|
|
@include sizing_breakpoints('w', 'width', $i, $value);
|
|
}
|
|
|
|
@for $i from 1 through $sizing_steps
|
|
{
|
|
$value: #{($i * 0.5)}rem;
|
|
|
|
@include sizing('h', 'height', $i, $value);
|
|
@include sizing_breakpoints('h', 'height', $i, $value);
|
|
} |