LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf(css): remove unused selectors for layout

pull/265/head
Francis Lachapelle 2019-12-24 16:18:32 -05:00
parent aaaa16ed40
commit 94b171675f
1 changed files with 95 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
UI/WebServerResources/scss/core/layout-attributes.scss
View File

@ -3,3 +3,98 @@
// 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; }
}
}
}