Create colors file, and add basic classes such as button, h1, h2, h3, and a headerbar div
This commit is contained in:
parent
8197940a73
commit
2f727c0810
11 changed files with 377 additions and 6 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/output
|
||||||
3
comp.sh
Normal file → Executable file
3
comp.sh
Normal file → Executable file
|
|
@ -1 +1,2 @@
|
||||||
sass ./scss/yaru.scss ./output/yaru.css
|
sass ./scss/yaru-light.scss ./output/yaru-light.css
|
||||||
|
sass ./scss/yaru-dark.scss ./output/yaru-dark.css
|
||||||
20
example.html
Normal file
20
example.html
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!--This is the Ubuntu Font beginning. INCLUDE THIS!-->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
|
||||||
|
<!--This is the Ubuntu Font ending. INCLUDE THIS!-->
|
||||||
|
<link href='./output/yaru-light.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
Hello yaru!
|
||||||
|
</div>
|
||||||
|
<h1>Hello yaru!</h1>
|
||||||
|
<h2>Hello yaru!</h2>
|
||||||
|
<h3>Hello yaru!</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
<button>Test</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
exampledark.html
Normal file
20
exampledark.html
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!--This is the Ubuntu Font beginning. INCLUDE THIS!-->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
|
||||||
|
<!--This is the Ubuntu Font ending. INCLUDE THIS!-->
|
||||||
|
<link href='./output/yaru-dark.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
Hello yaru!
|
||||||
|
</div>
|
||||||
|
<h1>Hello yaru!</h1>
|
||||||
|
<h2>Hello yaru!</h2>
|
||||||
|
<h3>Hello yaru!</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
<button>Test</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
80
scss/_colors-dark.scss
Normal file
80
scss/_colors-dark.scss
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
// When col def diffs for dark and light variant
|
||||||
|
// it gets @if ed depending on $variant
|
||||||
|
|
||||||
|
$variant: 'dark';
|
||||||
|
|
||||||
|
@import 'palette';
|
||||||
|
|
||||||
|
$base_color: if($variant == 'light', #ffffff, lighten($jet, 6%));
|
||||||
|
$text_color: if($variant == 'light', black, white);
|
||||||
|
$bg_color: if($variant == 'light', #FAFAFA, lighten($jet, 8%));
|
||||||
|
$fg_color: if($variant == 'light', $inkstone, $porcelain);
|
||||||
|
|
||||||
|
$selected_fg_color: $accent_fg_color;
|
||||||
|
$selected_bg_color: $accent_bg_color;
|
||||||
|
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
|
||||||
|
$selected_text_bg_color: if($variant == 'light', transparentize($selected_bg_color, 0.7), transparentize($selected_bg_color, 0.2));
|
||||||
|
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
|
||||||
|
$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
|
||||||
|
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
|
||||||
|
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
|
||||||
|
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
|
||||||
|
$top_hilight: $borders_edge;
|
||||||
|
$dark_fill: mix($borders_color, $bg_color, 50%);
|
||||||
|
$headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
|
||||||
|
$menu_color: if($variant == 'light', $bg_color, lighten($jet, 2%));
|
||||||
|
$menu_selected_color: if($variant =='light', darken($bg_color, 6%), lighten($bg_color, 6%)); // Yaru change: use lighter color in dark theme (mimic Libadwaita)
|
||||||
|
|
||||||
|
$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
|
||||||
|
$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
|
||||||
|
$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
|
||||||
|
$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
|
||||||
|
|
||||||
|
$warning_color: $yellow;
|
||||||
|
$error_color: $red;
|
||||||
|
$success_color: lighten($green, 5%);
|
||||||
|
$destructive_color: if($variant == 'light', $red, darken($red, 10%));
|
||||||
|
|
||||||
|
$osd_fg_color: #eeeeec;
|
||||||
|
$osd_text_color: white;
|
||||||
|
$osd_bg_color: transparentize(lighten($jet, 2%),0.025);
|
||||||
|
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||||
|
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
|
||||||
|
$osd_borders_color: transparentize(black, 0.3);
|
||||||
|
|
||||||
|
$sidebar_bg_color: mix($bg_color, $base_color, 50%);
|
||||||
|
|
||||||
|
$tooltip_borders_color: transparentize(white, 0.9);
|
||||||
|
$shadow_color: transparentize(black, 0.9);
|
||||||
|
|
||||||
|
$drop_target_color: $success_color;
|
||||||
|
|
||||||
|
//insensitive state derived colors
|
||||||
|
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
|
||||||
|
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
|
||||||
|
$insensitive_borders_color: $borders_color;
|
||||||
|
|
||||||
|
//colors for the backdrop state, derived from the main colors.
|
||||||
|
$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 3%));
|
||||||
|
$backdrop_text_color: if($variant == 'light', transparentize($text_color, 0.31), transparentize(white, 0.45));
|
||||||
|
$backdrop_bg_color: if($variant == 'light', $bg_color, lighten($bg_color, 3%));
|
||||||
|
$backdrop_fg_color: if($variant == 'light', mix($fg_color, $backdrop_bg_color, 80%), transparentize(white, 0.35));
|
||||||
|
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
|
||||||
|
$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
|
||||||
|
$backdrop_selected_bg_color: transparentize(desaturate($selected_bg_color,100%),0.5);
|
||||||
|
$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
|
||||||
|
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
|
||||||
|
|
||||||
|
//special cased widget colors
|
||||||
|
$suggested_bg_color: if($accent_bg_color == $orange, if($variant == 'light', lighten($green, 5%), darken($green, 5%)), $accent_bg_color);
|
||||||
|
$suggested_border_color: if($variant=='light', darken($suggested_bg_color, 5%), darken($suggested_bg_color, 10%));
|
||||||
|
$progress_bg_color: if($variant== 'light', lighten($accent_bg_color, 10%), lighten($accent_bg_color, 5%));
|
||||||
|
$progress_border_color: $progress_bg_color;
|
||||||
|
$checkradio_bg_color: if($variant=='light', lighten($accent_bg_color, 5%), $accent_bg_color);
|
||||||
|
$checkradio_fg_color: $accent_fg_color;
|
||||||
|
$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color, 10%), darken($checkradio_bg_color, 40%));
|
||||||
|
$switch_bg_color: $selected_bg_color;
|
||||||
|
$switch_borders_color: if($variant == 'light', darken($checkradio_bg_color, 10%), darken($checkradio_bg_color,40%));
|
||||||
|
$focus_border_color: transparentize(lighten($accent_bg_color, 14%), 0.3);
|
||||||
|
$alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
|
||||||
|
$dim_label_opacity: 0.55;
|
||||||
80
scss/_colors-light.scss
Normal file
80
scss/_colors-light.scss
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
// When col def diffs for dark and light variant
|
||||||
|
// it gets @if ed depending on $variant
|
||||||
|
|
||||||
|
$variant: 'light';
|
||||||
|
|
||||||
|
@import 'palette';
|
||||||
|
|
||||||
|
$base_color: if($variant == 'light', #ffffff, lighten($jet, 6%));
|
||||||
|
$text_color: if($variant == 'light', black, white);
|
||||||
|
$bg_color: if($variant == 'light', #FAFAFA, lighten($jet, 8%));
|
||||||
|
$fg_color: if($variant == 'light', $inkstone, $porcelain);
|
||||||
|
|
||||||
|
$selected_fg_color: $accent_fg_color;
|
||||||
|
$selected_bg_color: $accent_bg_color;
|
||||||
|
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
|
||||||
|
$selected_text_bg_color: if($variant == 'light', transparentize($selected_bg_color, 0.7), transparentize($selected_bg_color, 0.2));
|
||||||
|
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
|
||||||
|
$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
|
||||||
|
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
|
||||||
|
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
|
||||||
|
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
|
||||||
|
$top_hilight: $borders_edge;
|
||||||
|
$dark_fill: mix($borders_color, $bg_color, 50%);
|
||||||
|
$headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
|
||||||
|
$menu_color: if($variant == 'light', $bg_color, lighten($jet, 2%));
|
||||||
|
$menu_selected_color: if($variant =='light', darken($bg_color, 6%), lighten($bg_color, 6%)); // Yaru change: use lighter color in dark theme (mimic Libadwaita)
|
||||||
|
|
||||||
|
$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
|
||||||
|
$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
|
||||||
|
$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
|
||||||
|
$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
|
||||||
|
|
||||||
|
$warning_color: $yellow;
|
||||||
|
$error_color: $red;
|
||||||
|
$success_color: lighten($green, 5%);
|
||||||
|
$destructive_color: if($variant == 'light', $red, darken($red, 10%));
|
||||||
|
|
||||||
|
$osd_fg_color: #eeeeec;
|
||||||
|
$osd_text_color: white;
|
||||||
|
$osd_bg_color: transparentize(lighten($jet, 2%),0.025);
|
||||||
|
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||||
|
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
|
||||||
|
$osd_borders_color: transparentize(black, 0.3);
|
||||||
|
|
||||||
|
$sidebar_bg_color: mix($bg_color, $base_color, 50%);
|
||||||
|
|
||||||
|
$tooltip_borders_color: transparentize(white, 0.9);
|
||||||
|
$shadow_color: transparentize(black, 0.9);
|
||||||
|
|
||||||
|
$drop_target_color: $success_color;
|
||||||
|
|
||||||
|
//insensitive state derived colors
|
||||||
|
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
|
||||||
|
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
|
||||||
|
$insensitive_borders_color: $borders_color;
|
||||||
|
|
||||||
|
//colors for the backdrop state, derived from the main colors.
|
||||||
|
$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 3%));
|
||||||
|
$backdrop_text_color: if($variant == 'light', transparentize($text_color, 0.31), transparentize(white, 0.45));
|
||||||
|
$backdrop_bg_color: if($variant == 'light', $bg_color, lighten($bg_color, 3%));
|
||||||
|
$backdrop_fg_color: if($variant == 'light', mix($fg_color, $backdrop_bg_color, 80%), transparentize(white, 0.35));
|
||||||
|
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
|
||||||
|
$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
|
||||||
|
$backdrop_selected_bg_color: transparentize(desaturate($selected_bg_color,100%),0.5);
|
||||||
|
$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
|
||||||
|
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
|
||||||
|
|
||||||
|
//special cased widget colors
|
||||||
|
$suggested_bg_color: if($accent_bg_color == $orange, if($variant == 'light', lighten($green, 5%), darken($green, 5%)), $accent_bg_color);
|
||||||
|
$suggested_border_color: if($variant=='light', darken($suggested_bg_color, 5%), darken($suggested_bg_color, 10%));
|
||||||
|
$progress_bg_color: if($variant== 'light', lighten($accent_bg_color, 10%), lighten($accent_bg_color, 5%));
|
||||||
|
$progress_border_color: $progress_bg_color;
|
||||||
|
$checkradio_bg_color: if($variant=='light', lighten($accent_bg_color, 5%), $accent_bg_color);
|
||||||
|
$checkradio_fg_color: $accent_fg_color;
|
||||||
|
$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color, 10%), darken($checkradio_bg_color, 40%));
|
||||||
|
$switch_bg_color: $selected_bg_color;
|
||||||
|
$switch_borders_color: if($variant == 'light', darken($checkradio_bg_color, 10%), darken($checkradio_bg_color,40%));
|
||||||
|
$focus_border_color: transparentize(lighten($accent_bg_color, 14%), 0.3);
|
||||||
|
$alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
|
||||||
|
$dim_label_opacity: 0.55;
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
// When col def diffs for dark and light variant
|
|
||||||
// it gets @if ed depending on $variant
|
|
||||||
|
|
||||||
@import 'palette';
|
|
||||||
48
scss/_font.scss
Normal file
48
scss/_font.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
.ubuntu-light {
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-regular {
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-medium {
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-bold {
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-light-italic {
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-regular-italic {
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-medium-italic {
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu-bold-italic {
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
63
scss/yaru-dark.scss
Normal file
63
scss/yaru-dark.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
@import 'colors-dark';
|
||||||
|
@import 'font';
|
||||||
|
|
||||||
|
$variant: 'dark';
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $bg_color;
|
||||||
|
color: $fg_color;
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
};
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
};
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
};
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-height: 32px;
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
min-height: 32px;
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: $headerbar_bg_color;
|
||||||
|
color: $text_color;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
63
scss/yaru-light.scss
Normal file
63
scss/yaru-light.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
@import 'colors-light';
|
||||||
|
@import 'font';
|
||||||
|
|
||||||
|
$variant: 'light';
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $bg_color;
|
||||||
|
color: $fg_color;
|
||||||
|
font-family: "Ubuntu", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
margin: 10px;
|
||||||
|
};
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
};
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
};
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
};
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-height: 32px;
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
min-height: 32px;
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: $headerbar_bg_color;
|
||||||
|
color: $text_color;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
@import 'colors';
|
|
||||||
Loading…
Reference in a new issue