101 lines
3.5 KiB
SCSS
101 lines
3.5 KiB
SCSS
/// layout-attributes.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
|
|
|
// Import from sources for extends
|
|
// -------------------------------
|
|
@import "../../angular-material/src/core/services/layout/layout-attributes";
|
|
|
|
$sogo-breakpoints: 'xs' 'gt-xs' 'sm' 'gt-sm' 'md' 'gt-md';
|
|
|
|
@mixin layouts_for_breakpoint($name:null) {
|
|
@if $name == null or index($sogo-breakpoints, $name) != null {
|
|
@debug "layouts_for_breakpoint: #{$name}";
|
|
@include flex-order-for-name($name); // ~44KB
|
|
@include offset-for-name($name); // ~11KB
|
|
@include layout-align-for-name($name);
|
|
|
|
@include flex-properties-for-name($name); // ~400KB
|
|
@include layout-for-name($name);
|
|
}
|
|
}
|
|
|
|
@mixin flex-properties-for-name($name: null) {
|
|
$flexName: 'flex';
|
|
@if $name != null {
|
|
$flexName: 'flex-#{$name}';
|
|
$name : '-#{$name}';
|
|
} @else {
|
|
$name : '';
|
|
}
|
|
|
|
[#{$flexName}] { flex: 1; box-sizing: border-box; } // === flex: 1 1 0%;
|
|
|
|
[#{$flexName}-grow] { flex: 1 1 100%; box-sizing: border-box; }
|
|
[#{$flexName}-initial] { flex: 0 1 auto; box-sizing: border-box; }
|
|
[#{$flexName}-auto] { flex: 1 1 auto; box-sizing: border-box; }
|
|
[#{$flexName}-none] { flex: 0 0 auto; box-sizing: border-box; }
|
|
|
|
// (1-10) * 10 = 0-100%
|
|
@for $i from 0 through 10 {
|
|
$value : #{$i * 10 + '%'};
|
|
|
|
[#{$flexName}="#{$i * 10}"] {
|
|
flex: 1 1 #{$value};
|
|
max-width: #{$value};
|
|
max-height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
[layout="row"] > [#{$flexName}="#{$i * 10}"] {
|
|
flex: 1 1 #{$value};
|
|
max-width: #{$value};
|
|
max-height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
[layout="column"] > [#{$flexName}="#{$i * 10}"] {
|
|
flex: 1 1 #{$value};
|
|
max-width: 100%;
|
|
max-height: #{$value};
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@if $name != '' {
|
|
[layout#{$name}="row"] > [#{$flexName}="#{$i * 10}"] {
|
|
flex: 1 1 #{$value};
|
|
max-width: #{$value};
|
|
max-height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
[layout#{$name}="column"] > [#{$flexName}="#{$i * 10}"] {
|
|
flex: 1 1 #{$value};
|
|
max-width: 100%;
|
|
max-height: #{$value};
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
[layout="row"] {
|
|
> [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
|
|
> [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
|
|
}
|
|
|
|
[layout="column"] {
|
|
> [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
|
|
> [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
|
|
}
|
|
|
|
@if $name != '' {
|
|
[layout#{$name}="row"] {
|
|
> [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
|
|
> [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
|
|
}
|
|
|
|
[layout#{$name}="column"] {
|
|
> [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
|
|
> [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
|
|
}
|
|
}
|
|
}
|