conzer12/yaru.css
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

add boxes and sidebars

Browse source
This commit is contained in:
conzer 2024-12-05 02:18:52 -05:00
parent 2f727c0810
commit 656158f5da
5 changed files with 149 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

0
scss/_colors-light.scss → scss/_colors.scss
View file

50
scss/yaru-dark.scss
View file

@ -61,3 +61,53 @@ button:hover {
border-radius: 6px;
}
.sidebar {
width: 200px;
height: 100%;
background-color: $sidebar_bg_color;
color: $text_color;
border-radius: 0 20px 20px 0;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sb_button {
min-height: 48px;
width: 185px;
padding-left: 8px;
padding-right: 8px;
border: 0px solid;
border-radius: 6px;
border-spacing: 6px;
transition: all 200ms ease-out;
background-color: $base_color;
color: $text_color;
};
.sb_button:hover {
min-height: 48px;
width: 185px;
padding-left: 8px;
padding-right: 8px;
border: 0px solid;
border-radius: 6px;
border-spacing: 6px;
transition: all 200ms ease-out;
background-color: $menu_selected_color;
color: $text_color;
};
.box {
display: flex;
height: 100vh;
};
.box-content-1 {
flex: 1;
padding: 20px;
background-color: $bg_color;
overflow-y: auto;
}

62
scss/yaru-light.scss
View file

@ -1,5 +1,6 @@
@import 'colors-light';
@import 'font';
@import 'palette';
$variant: 'light';
@ -61,3 +62,64 @@ button:hover {
border-radius: 6px;
}
.sidebar {
width: 200px;
height: 100%;
background-color: $porcelain;
color: $text_color;
border-radius: 0 20px 20px 0;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sb_button {
min-height: 48px;
width: 185px;
padding-left: 8px;
padding-right: 8px;
border: 0px solid;
border-radius: 6px;
border-spacing: 6px;
transition: all 200ms ease-out;
background-color: $base_color;
color: $text_color;
};
.sb_button:hover {
min-height: 48px;
width: 185px;
padding-left: 8px;
padding-right: 8px;
border: 0px solid;
border-radius: 6px;
border-spacing: 6px;
transition: all 200ms ease-out;
background-color: $menu_selected_color;
color: $text_color;
};
.box {
display: flex;
height: 100vh;
};
.box-content-1 {
flex: 1;
padding: 20px;
background-color: $bg_color;
overflow-y: auto;
}
.box-v {
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-start;
padding: 20px;
background-color: $bg_color;
max-width: 400px;
margin: auto;
}