mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-06-28 23:55:13 +00:00
Code Issues Releases Wiki Activity

Expose layout mixins to a new file and use it accordingly to have control over component positioning from shadow DOM elements

Browse Source
This commit is contained in:
Gabor PEK
2018-03-13 18:19:59 +01:00
parent 174a1dd9a2
commit ba2e2ace6d
8 changed files with 101 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/scss/_variables.scss
View File

@ -159,3 +159,6 @@ $font-size-h5: floor(($font-size-base * 1.1));
$tao-navbar-height: 67px;
$company-logo-width: 130px;
// Change this to switch template. Options: 'default', 'vraw', 'hraw'
$layout-template: 'default';

62
src/assets/scss/mixins/_layout.scss Normal file
View File

@ -0,0 +1,62 @@
$grid-columns-count: 5;
$grid-rows-count: 15;
$default-layout: (
'header': (1, 2, 1, 2),
'messages': (1, 2, 2, 10),
'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
'terminal': (1, 4, 10,$grid-rows-count+1),
'web': (2, 4, 1, 10)
);
$vraw-layout: (
'header': (1, 2, 1, 2),
'messages': (1, 2, 2,$grid-rows-count+1),
'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
'terminal': (2, 4, 1,$grid-rows-count+1),
'web': (),
);
$hraw-layout: (
'header': (1, 2, 1,$grid-rows-count+1),
'messages': (1, 2, 2,$grid-rows-count+1),
'webide': (2,$grid-rows-count+1, 1, 10),
'terminal': (2,$grid-rows-count+1, 10,$grid-rows-count+1),
'web': (),
);
$layout: (
'default': $default-layout,
'vraw': $vraw-layout,
'hraw': $hraw-layout
);
@mixin position-grid-items($map, $sel) {
$sel: if($sel == '' and &, &, $sel);
@debug $sel;
#{$sel} {
@each $k, $v in $map {
@at-root #{$sel}#{$k} {
@if (length($v) == 0) {
display: none
}
@else {
grid-column-start: nth($v, 1);
grid-column-end: nth($v, 2);
grid-row-start: nth($v, 3);
grid-row-end: nth($v, 4);
}
}
}
}
}
@mixin set-component-size($key) {
$columns-count: nth(map_get($default-layout, $key),2) - nth(map_get($default-layout, $key),1);
$rows-count: nth(map_get($default-layout, $key),4) - nth(map_get($default-layout, $key),3);
min-width: #{$columns-count / $grid-columns-count * 100}vw;
min-height: #{$rows-count / $grid-rows-count * 100}vh;
}