Fix sudevars abd scrolling, ready to ship
This commit is contained in:
parent
45c765a6bc
commit
d28f8ee07e
4 changed files with 112 additions and 7 deletions
|
@ -3,6 +3,10 @@
|
|||
|
||||
$variant: 'dark';
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $bg_color;
|
||||
color: $fg_color;
|
||||
|
@ -52,6 +56,9 @@ button:hover {
|
|||
};
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: $headerbar_bg_color;
|
||||
|
@ -62,17 +69,19 @@ button:hover {
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: $sidebar_bg_color;
|
||||
background-color: $headerbar_bg_color;
|
||||
color: $text_color;
|
||||
border-radius: 0 20px 20px 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.sb_button {
|
||||
min-height: 48px;
|
||||
width: 185px;
|
||||
|
@ -121,3 +130,23 @@ button:hover {
|
|||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.col-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.col-btn:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
.col-btn:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.col-btn:last-child {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
|
@ -4,6 +4,11 @@
|
|||
|
||||
$variant: 'light';
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: $bg_color;
|
||||
color: $fg_color;
|
||||
|
@ -53,6 +58,9 @@ button:hover {
|
|||
};
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: $headerbar_bg_color;
|
||||
|
@ -63,8 +71,10 @@ button:hover {
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
height: calc(100vh - 50px);
|
||||
background-color: $porcelain;
|
||||
color: $text_color;
|
||||
border-radius: 0 20px 20px 0;
|
||||
|
@ -72,6 +82,7 @@ button:hover {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.sb_button {
|
||||
|
@ -123,3 +134,26 @@ button:hover {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.col-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.col-btn:first-child {
|
||||
background-color: $porcelain;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
.col-btn:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
background-color: $porcelain;
|
||||
}
|
||||
|
||||
.col-btn:last-child {
|
||||
background-color: $porcelain;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue