159 lines
4.1 KiB
SCSS
159 lines
4.1 KiB
SCSS
$grid-columns-count: 100;
|
|
$grid-rows-count: 30;
|
|
|
|
$terminal-ide-web-layout: (
|
|
'header': (0, 20, 0, 8),
|
|
'messages': (0, 20, 8, 60),
|
|
'ide': (56, 96, 0, 100),
|
|
'terminal': (0, 56, 60, 100),
|
|
'web': (20, 56, 0, 60),
|
|
'sidebar': (96, 100, 0, 100)
|
|
);
|
|
|
|
$terminal-web-layout: (
|
|
'header': (0, 20, 0, 8),
|
|
'messages': (0, 20, 8, 100),
|
|
'ide': (),
|
|
'terminal': (56, 96, 0, 100),
|
|
'web': (20, 56, 0, 100),
|
|
'sidebar': (96, 100, 0, 100)
|
|
);
|
|
|
|
$terminal-ide-vertical-layout: (
|
|
'header': (0, 20, 0, 8),
|
|
'messages': (0, 20, 8, 100),
|
|
'ide': (56, 96, 0, 100),
|
|
'terminal': (20, 56, 0, 100),
|
|
'web': (),
|
|
'sidebar': (96, 100, 0, 100)
|
|
);
|
|
|
|
$terminal-ide-horizontal-layout: (
|
|
'header': (0, 20, 0, 8),
|
|
'messages': (0, 20, 8, 100),
|
|
'ide': (20, 96, 0, 60),
|
|
'terminal': (20, 96, 60, 100),
|
|
'web': (),
|
|
'sidebar': (96, 100, 0, 100)
|
|
);
|
|
|
|
$ide-web-vertical-layout: (
|
|
'header': (0, 20, 0, 8),
|
|
'messages': (0, 20, 8, 100),
|
|
'ide': (56, 96, 0, 100),
|
|
'terminal': (),
|
|
'web': (20, 56, 0, 100),
|
|
'sidebar': (96, 100, 0, 100)
|
|
);
|
|
|
|
$terminal-only-layout: (
|
|
'header': (0, 20, 0, 8),
|
|
'messages': (0, 20, 8, 100),
|
|
'ide': (),
|
|
'terminal': (20, 96, 0, 100),
|
|
'web': (),
|
|
'sidebar': (96, 100, 0, 100)
|
|
);
|
|
|
|
$ide-only-layout: (
|
|
'header': (0, 20, 0, 8),
|
|
'messages': (0, 20, 8, 100),
|
|
'ide': (20, 96, 0, 100),
|
|
'terminal': (),
|
|
'web': (),
|
|
'sidebar': (96, 100, 0, 100)
|
|
);
|
|
|
|
$web-only-layout: (
|
|
'header': (0, 20, 0, 8),
|
|
'messages': (0, 20, 8, 100),
|
|
'ide': (),
|
|
'terminal': (),
|
|
'web': (20, 96, 0, 100),
|
|
'sidebar': (96, 100, 0, 100)
|
|
);
|
|
|
|
$layouts: (
|
|
'terminal-ide-web': $terminal-ide-web-layout,
|
|
'terminal-web': $terminal-web-layout,
|
|
'terminal-ide-vertical': $terminal-ide-vertical-layout,
|
|
'terminal-ide-horizontal': $terminal-ide-horizontal-layout,
|
|
'ide-web-vertical': $ide-web-vertical-layout,
|
|
'terminal-only': $terminal-only-layout,
|
|
'ide-only': $ide-only-layout,
|
|
'web-only': $web-only-layout
|
|
);
|
|
|
|
@mixin set-layout($layouts-key) {
|
|
@if(index(map_keys($layouts), $layouts-key)) {
|
|
$layout: map_get($layouts, $layouts-key)
|
|
}
|
|
@else {
|
|
@error 'Invalid layout value: "#{$layouts-key}"'
|
|
}
|
|
}
|
|
|
|
@mixin hide-component() {
|
|
// We need to make sure the DOM element is displayed but not visible
|
|
visibility: hidden;
|
|
position: absolute;
|
|
z-index: -10000000;
|
|
}
|
|
|
|
.hide-attribute {
|
|
@include hide-component();
|
|
}
|
|
|
|
@function get-layout($layouts-key) {
|
|
@return map_get($layouts, $layouts-key);
|
|
}
|
|
|
|
@function convert-ratio($ratio, $max) {
|
|
@return round(($ratio * $max) / 100) + 1;
|
|
}
|
|
|
|
@mixin position-grid-items($map, $sel) {
|
|
$sel: if($sel == '' and &, &, $sel);
|
|
|
|
@each $k, $v in $map {
|
|
#{$sel}#{$k} {
|
|
@if (length($v) == 0) {
|
|
@include hide-component();
|
|
}
|
|
@else {
|
|
grid-column-start: convert-ratio(nth($v, 1), $grid-columns-count);
|
|
grid-column-end: convert-ratio(nth($v, 2), $grid-columns-count);
|
|
grid-row-start: convert-ratio(nth($v, 3), $grid-rows-count);
|
|
grid-row-end: convert-ratio(nth($v, 4), $grid-rows-count);
|
|
max-width: calc(100vw / #{$grid-columns-count} * (#{convert-ratio(nth($v, 2), $grid-columns-count)} - #{convert-ratio(nth($v, 1), $grid-columns-count)}));
|
|
}
|
|
/* A hack for Chrome, without this there is a white 1px strip on the left of the terminal */
|
|
/* You have been warned: don't try to understand this */
|
|
@if($sel == 'terminal-ide-web' & & $k == 'terminal') {
|
|
transform: translateX(-1px);
|
|
}
|
|
/* End of hack */
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin set-component-size($layouts-key, $layout-key) {
|
|
$tfw-component: map_get(get-layout($layouts-key), $layout-key);
|
|
|
|
@if (length($tfw-component) > 0) {
|
|
$columns-count: convert-ratio(nth($tfw-component,2), $grid-columns-count) - convert-ratio(nth($tfw-component,1), $grid-columns-count);
|
|
$rows-count: convert-ratio(nth($tfw-component,4), $grid-rows-count) - convert-ratio(nth($tfw-component,3), $grid-rows-count);
|
|
|
|
min-width: #{$columns-count / $grid-columns-count * 100}vw;
|
|
min-height: #{$rows-count / $grid-rows-count * 100}vh;
|
|
}
|
|
}
|
|
|
|
@mixin word-break() {
|
|
/* For Firefox */
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
/* For Chrome and IE */
|
|
word-wrap: break-word;
|
|
}
|