asteroid/bibi/wardrobe/_dress-patterns/_menu.scss
2023-12-27 22:39:56 -08:00

67 lines
No EOL
2.3 KiB
SCSS

// ================================================================================
// + Menu
// --------------------------------------------------------------------------------
div#bibi-menu {
height: $Menu_Height;
.bibi-icon { @include size($Menu-Icon_Size); }
html.appearance-vertical.slider-opened & { width: calc(100% - #{$Slider_Size}); }
html.appearance-vertical.slider-opened.panel-opened &,
html.appearance-vertical.slider-opened.subpanel-opened & { padding-right: $Slider_Size; }
}
html.book-full-height {
& div#bibi-menu { background-color: $Menu_BackgroundColor; }
& div#bibi-menu.hover,
&.panel-opened div#bibi-menu,
&.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Hover; }
&.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Active; box-shadow: $Menu_BoxShadow__Active; }
}
html:not(.book-full-height) {
& div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH; }
& div#bibi-menu.hover,
&.panel-opened div#bibi-menu,
&.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Hover; }
&.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Active; box-shadow: $Menu_BoxShadow__NotBFH__Active; }
}
// - Menu-L & Menu-R
// --------------------------------------------------------------------------------
div#bibi-menu-l,
div#bibi-menu-r {
ul {
padding: $Menu-ButtonGroup_Padding;
height: $Menu-Icon_Size;
&:before {
width: $Menu-ButtonGroup-Separator_Width;
background: $Menu-ButtonGroup-Separator_Color;
top: $Menu-ButtonGroup_Padding;
height: $Menu-Icon_Size;
}
li {
@include size($Menu-Icon_Size);
}
}
}
div#bibi-menu-l {
ul {
&:first-child { padding-left: $Menu-ButtonGroup_Padding; }
&:not(:first-child) { padding-left: $Menu-ButtonGroup_Padding$Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width; }
li {
&:not(:first-child) { margin-left: $Menu-ButtonGroup-Button_Margin; }
}
}
}
div#bibi-menu-r {
ul {
&:first-child { padding-right: $Menu-ButtonGroup_Padding; }
&:not(:first-child) { padding-right: $Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width; }
li {
&:not(:first-child) { margin-right: $Menu-ButtonGroup-Button_Margin; }
}
}
}