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

Change look and UI of messages, add new Avatao logo

Browse Source
This commit is contained in:
Gabor PEK
2020-06-12 17:04:29 +02:00
parent 2b301edccc
commit 0f324a108b
16 changed files with 107 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/scss/mixins/_button.scss Normal file
View File

@ -0,0 +1,14 @@
@import "../variables.scss";
@mixin set-button-style($color) {
box-sizing: border-box;
border-radius: 10px;
background: $color;
border: 1.5px solid $color;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 26px;
}

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

@ -2,8 +2,8 @@ $grid-columns-count: 100;
$grid-rows-count: 30;
$terminal-ide-web-layout: (
'header': (0, 20, 0, 8),
'messages': (0, 20, 8, 60),
'messages': (0, 20, 0, 52),
'header': (0, 20, 52, 60),
'ide': (56, 96, 0, 100),
'terminal': (0, 56, 60, 100),
'web': (20, 56, 0, 60),
@ -11,8 +11,8 @@ $terminal-ide-web-layout: (
);
$terminal-web-layout: (
'header': (0, 20, 0, 8),
'messages': (0, 20, 8, 100),
'messages': (0, 20, 0, 92),
'header': (0, 20, 92, 100),
'ide': (),
'terminal': (56, 96, 0, 100),
'web': (20, 56, 0, 100),
@ -20,8 +20,8 @@ $terminal-web-layout: (
);
$terminal-ide-vertical-layout: (
'header': (0, 20, 0, 8),
'messages': (0, 20, 8, 100),
'messages': (0, 20, 0, 92),
'header': (0, 20, 92, 100),
'ide': (56, 96, 0, 100),
'terminal': (20, 56, 0, 100),
'web': (),
@ -29,8 +29,8 @@ $terminal-ide-vertical-layout: (
);
$terminal-ide-horizontal-layout: (
'header': (0, 20, 0, 8),
'messages': (0, 20, 8, 100),
'messages': (0, 20, 0, 92),
'header': (0, 20, 92, 100),
'ide': (20, 96, 0, 60),
'terminal': (20, 96, 60, 100),
'web': (),
@ -38,8 +38,8 @@ $terminal-ide-horizontal-layout: (
);
$ide-web-vertical-layout: (
'header': (0, 20, 0, 8),
'messages': (0, 20, 8, 100),
'messages': (0, 20, 0, 92),
'header': (0, 20, 92, 100),
'ide': (56, 96, 0, 100),
'terminal': (),
'web': (20, 56, 0, 100),
@ -47,8 +47,8 @@ $ide-web-vertical-layout: (
);
$terminal-only-layout: (
'header': (0, 20, 0, 8),
'messages': (0, 20, 8, 100),
'messages': (0, 20, 0, 92),
'header': (0, 20, 92, 100),
'ide': (),
'terminal': (20, 96, 0, 100),
'web': (),
@ -56,8 +56,8 @@ $terminal-only-layout: (
);
$ide-only-layout: (
'header': (0, 20, 0, 8),
'messages': (0, 20, 8, 100),
'messages': (0, 20, 0, 92),
'header': (0, 20, 92, 100),
'ide': (20, 96, 0, 100),
'terminal': (),
'web': (),
@ -65,8 +65,8 @@ $ide-only-layout: (
);
$web-only-layout: (
'header': (0, 20, 0, 8),
'messages': (0, 20, 8, 100),
'messages': (0, 20, 0, 92),
'header': (0, 20, 92, 100),
'ide': (),
'terminal': (),
'web': (20, 96, 0, 100),

9
src/assets/scss/mixins/_scrollbar.scss
View File

@ -1,10 +1,10 @@
@mixin set-scrollbar-style($style, $selctor) {
@mixin set-scrollbar-style($style, $selector) {
::-webkit-scrollbar {
width: 3px !important;
height: 3px !important;
}
#{$selctor}::-webkit-scrollbar-track {
#{$selector}::-webkit-scrollbar-track {
border-radius: 10px !important;
width: 3px !important;
@if ($style == 'light') {
@ -15,7 +15,7 @@
};
}
#{$selctor}::-webkit-scrollbar-thumb {
#{$selector}::-webkit-scrollbar-thumb {
@if ($style == 'dark') {
background: #8a8a8a !important;
@ -25,7 +25,7 @@
border-radius: 10px !important;
}
#{$selctor}::-webkit-scrollbar-thumb:hover {
#{$selector}::-webkit-scrollbar-thumb:hover {
@if ($style == 'dark') {
background: #424242 !important;
@ -35,3 +35,4 @@
cursor: pointer !important;
}
}