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

Add sidebar component that is ready to be designed and instrumented

Browse Source
This commit is contained in:
Gabor PEK
2018-04-20 09:19:42 +02:00
committed by Kristóf Tóth
parent 97d1a58fbf
commit b460c429e6
13 changed files with 169 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -158,7 +158,3 @@ $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';

133
src/assets/scss/mixins/_layout.scss
View File

@ -1,62 +1,121 @@
$grid-columns-count: 5;
$grid-rows-count: 15;
$grid-columns-count: 25;
$grid-rows-count: 25;
$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)
$layout-key: 'vraw-open';
$default-open-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2, 10),
'webide': (15,$grid-columns-count+1, 1, $grid-rows-count+1),
'terminal': (1, 15, 10, $grid-rows-count+1),
'web': (6, 15, 1, 10),
'sidebar': ()
);
$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),
$default-closed-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2, 10),
'webide': (16,$grid-columns-count+1, 1, $grid-rows-count+1),
'terminal': (1, 16, 10, $grid-rows-count+1),
'web': (6, 15, 1, 10),
'sidebar': ()
);
$vraw-open-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'webide': (16, $grid-columns-count+1, 1,$grid-rows-count+1),
'terminal': (6, 16, 1, $grid-rows-count+1),
'web': (),
'sidebar': (),
);
$vraw-closed-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'webide': (),
'terminal': (6, $grid-columns-count, 1,$grid-rows-count+1),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
);
$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),
'header': (1, 4, 1,$grid-rows-count+1),
'messages': (1, 4, 2,$grid-rows-count+1),
'webide': (4,$grid-columns-count+1, 1, 10),
'terminal': (4, $grid-columns-count+1, 10, $grid-rows-count+1),
'web': (),
'sidebar': (),
);
$layout: (
'default': $default-layout,
'vraw': $vraw-layout,
$layouts: (
'default-open': $default-open-layout,
'default-closed': $default-closed-layout,
'vraw-open': $vraw-open-layout,
'vraw-closed': $vraw-closed-layout,
'hraw': $hraw-layout
);
@mixin set-layout($layout_key) {
@if(index(map_keys($layouts), $layout_key)) {
$layout: map_get($layouts, $layout_key)
}
@else {
@error 'Invalid layout value: "#{$layout_key}"'
}
}
@function get-layout(){
@return map_get($layouts, $layout_key);
}
@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);
}
@each $k, $v in $map {
#{$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);
$tfw-component: map_get(get-layout(), $key);
min-width: #{$columns-count / $grid-columns-count * 100}vw;
min-height: #{$rows-count / $grid-rows-count * 100}vh;
@if (length($tfw-component) > 0) {
$columns-count: nth($tfw-component,2) - nth($tfw-component,1);
$rows-count: nth($tfw-component,4) - nth($tfw-component,3);
min-width: #{$columns-count / $grid-columns-count * 100}vw;
min-height: #{$rows-count / $grid-rows-count * 100}vh;
}
}
[tfw-layout='vraw-open'] {
@include position-grid-items(map_get($layouts,'vraw-open'),'.tfw-');
}
[tfw-layout='vraw-closed'] {
@include position-grid-items(map_get($layouts,'vraw-closed'),'.tfw-');
}
[tfw-layout='hraw'] {
@include position-grid-items(map_get($layouts,'hraw'),'.tfw-');
}
[tfw-layout='default-open'] {
@include position-grid-items(map_get($layouts, 'default-open'),'.tfw-');
}
[tfw-layout='default-closed'] {
@include position-grid-items(map_get($layouts,'default-closed'),'.tfw-');
}

13
src/assets/scss/shared/_buttons.scss
View File

@ -41,14 +41,23 @@
.tao-btn-rainbow {
@extend .tao-btn-primary;
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 70%,$tao-bright-green-300 100%);
transition: all 2s ease;
transition: all 0.18s ease;
color: white;
border: none;
text-decoration: none !important;
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
&:active {
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09);
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
color: white;
padding: 5px 18px;
}
&:hover {
box-shadow: none;
background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
color: white;
}
}