asteroid/bibi/wardrobe/_dress-patterns/_panel.scss

77 lines
2.3 KiB
SCSS
Raw Normal View History

2023-12-28 06:39:56 +00:00
// ================================================================================
// + Panel
// --------------------------------------------------------------------------------
div#bibi-panel {
background: $Panel_Background;
&:before {
height: $Menu_Height;
background: $Menu_BackgroundColor__PanelOpened;
html:not(.book-full-height) & { background: $Menu_BackgroundColor__NotBFH__PanelOpened; }
}
&:after {
height: $PoweredBy_Height;
background: $PoweredBy_BackgroundColor__PanelOpened;
}
}
// - BookInfo
// --------------------------------------------------------------------------------
div#bibi-panel-bookinfo {
margin-top: $Menu_Height;
margin-bottom: $PoweredBy_Height;
height: calc(100% - #{$Menu_Height + $PoweredBy_Height});
html.nav-ttb & { padding: $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter $Panel_PaddingStart; }
html.nav-rtl & { padding: $Panel_PaddingStart $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter; }
}
// . Navigation
// --------------------------------------------------------------------------------
div#bibi-panel-bookinfo-navigation {
nav {
a {
border-color: $Panel-Nav-A_TextDecorationColor;
color: $Panel-Nav-A_Color;
&:hover {
border-color: $Panel-Nav-A_TextDecorationColor__Hover;
color: $Panel-Nav-A_Color__Hover;
}
}
}
}
// . Cover
// --------------------------------------------------------------------------------
div#bibi-panel-bookinfo-cover {
& {
border-color: $Panel-Cover_BorderColor;
img {
max-height: calc(#{ 100vh * 0.6 } - #{ ($Menu_Height + $Panel_PaddingBefore + $Panel_PaddingAfter + $PoweredBy_Height) * 0.6 });
}
p#bibi-panel-bookinfo-cover-info {
color: $Panel-Cover-Info_Color;
}
}
&.without-cover-image {
.book-icon {
@include DEFAULT__SPECIALICON__Book($Panel-Cover-Icon_Size__WithoutCoverImage, $Panel-Cover-Icon_OuterColor__WithoutCoverImage, $Panel-Cover-Icon_InnerColor__WithoutCoverImage, relative);
}
}
html.nav-ttb & {
margin-top: $Panel-Cover_MarginBefore;
padding-top: $Panel-Cover_PaddingBefore;
max-width: calc(100vw - #{$Panel_PaddingStart + $Panel_PaddingEnd});
}
html.nav-rtl & {
margin-right: $Panel-Cover_MarginBefore;
padding-right: $Panel-Cover_PaddingBefore;
max-width: calc(100vw - #{$Panel_PaddingAfter * 2});
}
}