mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-11-24 14:10:27 +00:00
277 lines
No EOL
8.2 KiB
SCSS
277 lines
No EOL
8.2 KiB
SCSS
// ================================================================================
|
|
// + Panel
|
|
// --------------------------------------------------------------------------------
|
|
|
|
|
|
div#bibi-panel {
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
z-index: $INVARIABLE__Panel_ZIndex;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
@include size(100%);
|
|
// @____Bibi:Dress__('-') background: $Panel_Background;
|
|
opacity: 0;
|
|
transition: 0.15s ease-out;
|
|
transform: translateY(-100%);
|
|
html.panel-opened & {
|
|
transform: none;
|
|
opacity: 1;
|
|
transition: 0.15s ease-in;
|
|
user-select: text;
|
|
}
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 99999999999;
|
|
left: 0; right: 0;
|
|
width: 100%;
|
|
}
|
|
&:before {
|
|
top: 0;
|
|
// @____Bibi:Dress__('-') height: $Menu_Height;
|
|
// @____Bibi:Dress__('-') background: $Menu_BackgroundColor__PanelOpened;
|
|
// @____Bibi:Dress__('-') html:not(.book-full-height) & { background: $Menu_BackgroundColor__NotBFH__PanelOpened; }
|
|
}
|
|
&:after {
|
|
bottom: 0;
|
|
// @____Bibi:Dress__('-') height: $PoweredBy_Height;
|
|
// @____Bibi:Dress__('-') background: $PoweredBy_BackgroundColor__PanelOpened;
|
|
}
|
|
}
|
|
|
|
|
|
// - BookInfo
|
|
// --------------------------------------------------------------------------------
|
|
|
|
div#bibi-panel-bookinfo {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
// @____Bibi:Dress__('-') margin-top: $Menu_Height;
|
|
// @____Bibi:Dress__('-') margin-bottom: $PoweredBy_Height;
|
|
// @____Bibi:Dress__('-') height: calc(100% - #{$Menu_Height + $PoweredBy_Height});
|
|
width: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
html.nav-ttb & {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
@include writing-mode(horizontal-tb);
|
|
// @____Bibi:Dress__('-') padding: $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter $Panel_PaddingStart;
|
|
}
|
|
html.nav-rtl & {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
@include writing-mode(vertical-rl);
|
|
// @____Bibi:Dress__('-') padding: $Panel_PaddingStart $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter;
|
|
}
|
|
}
|
|
|
|
|
|
// . Navigation
|
|
// --------------------------------------------------------------------------------
|
|
|
|
div#bibi-panel-bookinfo-navigation {
|
|
box-sizing: border-box;
|
|
html.nav-ttb & {
|
|
>*:first-child,
|
|
>*:first-child >*:first-child,
|
|
>*:first-child >*:first-child >*:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
html.nav-rtl & {
|
|
>*:first-child,
|
|
>*:first-child >*:first-child,
|
|
>*:first-child >*:first-child >*:first-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
span.tcy {
|
|
@include text-combine-upright_all();
|
|
}
|
|
}
|
|
nav {
|
|
$SCOPED__MarginBefore: 2em;
|
|
$SCOPED__MarginAfter: 1em;
|
|
line-height: 1.2;
|
|
font-size: 20px;
|
|
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
|
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
|
h1, h2, h3, h4, h5, h6 {
|
|
$SCOPED__MarginBefore: 0;
|
|
$SCOPED__MarginAfter: 1em;
|
|
font-weight: bold;
|
|
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
|
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
|
}
|
|
small {
|
|
font-size: .8em;
|
|
}
|
|
br + small {
|
|
$SCOPED__MarginStart: 2em;
|
|
html.nav-ttb & { margin: 0 0 0 $SCOPED__MarginStart; }
|
|
html.nav-rtl & { margin: $SCOPED__MarginStart 0 0 0; }
|
|
}
|
|
ul, ol {
|
|
$SCOPED__MarginBefore: 0;
|
|
$SCOPED__MarginAfter: 1em;
|
|
font-size: .9em;
|
|
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
|
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
|
li {
|
|
$SCOPED__MarginBefore: 1em;
|
|
$SCOPED__MarginAfter: 0;
|
|
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
|
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
|
ul, ol {
|
|
position: relative;
|
|
$SCOPED__MarginBefore: 0;
|
|
$SCOPED__MarginAfter: 0;
|
|
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
|
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
$SCOPED__OffsetStart: .175em;
|
|
$SCOPED__OffsetBefore: 0;
|
|
$SCOPED__Breadth: 4px;
|
|
$SCOPED__Length: 100%;
|
|
background: white;
|
|
html.nav-ttb & { left: $SCOPED__OffsetStart; top: $SCOPED__OffsetBefore; @include size($SCOPED__Breadth, $SCOPED__Length); }
|
|
html.nav-rtl & { top: $SCOPED__OffsetStart; right: $SCOPED__OffsetBefore; @include size($SCOPED__Length, $SCOPED__Breadth); }
|
|
}
|
|
li {
|
|
$SCOPED__MarginBefore: .5em;
|
|
$SCOPED__MarginAfter: 0;
|
|
$SCOPED__MarginStart: 1em;
|
|
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter $SCOPED__MarginStart; }
|
|
html.nav-rtl & { margin: $SCOPED__MarginStart $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
border-style: solid;
|
|
border-width: 0;
|
|
// @____Bibi:Dress__('-') border-color: $Panel-Nav-A_TextDecorationColor;
|
|
html.nav-ttb & { border-bottom-width: 1px; padding-bottom: .1em; }
|
|
html.nav-rtl & { border-right-width: 1px; padding-right: .1em; }
|
|
// @____Bibi:Dress__('-') color: $Panel-Nav-A_Color;
|
|
text-decoration: none;
|
|
transition: linear .15s;
|
|
&:hover {
|
|
// @____Bibi:Dress__('-') border-color: $Panel-Nav-A_TextDecorationColor__Hover;
|
|
// @____Bibi:Dress__('-') color: $Panel-Nav-A_Color__Hover;
|
|
transition: none;
|
|
}
|
|
&.bibi-bookinfo-inactive-link {
|
|
color: inherit !important;
|
|
border: none 0 !important;
|
|
cursor: default !important;
|
|
&:hover {
|
|
color: inherit !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
nav.bibi-nav-landmarks,
|
|
nav.bibi-nav-page-list {
|
|
font-size: 16px;
|
|
h1, h2, h3, h4, h5, h6 {
|
|
$SCOPED__MarginBefore: 0;
|
|
$SCOPED__MarginAfter: .25em;
|
|
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
|
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
|
}
|
|
ul, ol {
|
|
overflow: hidden;
|
|
$SCOPED__PaddingAfter: .25em;
|
|
html.nav-ttb & { padding: 0 0 $SCOPED__PaddingAfter 0; }
|
|
html.nav-rtl & { padding: 0 0 0 $SCOPED__PaddingAfter; }
|
|
li {
|
|
float: left;
|
|
$SCOPED__PaddingEnd: 1em;
|
|
html.nav-ttb & { padding: 0 $SCOPED__PaddingEnd 0 0; &:last-child { padding: 0; } }
|
|
html.nav-rtl & { padding: 0 0 $SCOPED__PaddingEnd 0; &:last-child { padding: 0; } }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// . Cover
|
|
// --------------------------------------------------------------------------------
|
|
|
|
div#bibi-panel-bookinfo-cover {
|
|
& {
|
|
//box-sizing: border-box;
|
|
border-style: solid;
|
|
border-width: 0;
|
|
// @____Bibi:Dress__('-') border-color: $Panel-Cover_BorderColor;
|
|
@include writing-mode(horizontal-tb);
|
|
img {
|
|
display: block;
|
|
margin-bottom: .75em;
|
|
max-width: 100%;
|
|
// @____Bibi:Dress__('-') max-height: calc(#{ 100vh * 0.6 } - #{ ($Menu_Height + $Panel_PaddingBefore + $Panel_PaddingAfter + $PoweredBy_Height) * 0.6 });
|
|
}
|
|
p#bibi-panel-bookinfo-cover-info {
|
|
// @____Bibi:Dress__('-') color: $Panel-Cover-Info_Color;
|
|
> strong, > em, > span {
|
|
display: block;
|
|
line-height: 1.2;
|
|
margin: 0 0 .5rem 0;
|
|
span {
|
|
//display: inline-block;
|
|
}
|
|
}
|
|
> strong {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
> em {
|
|
font-size: 14px;
|
|
}
|
|
> span {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
html.nav-ttb & {
|
|
// @____Bibi:Dress__('-') margin-top: $Panel-Cover_MarginBefore;
|
|
// @____Bibi:Dress__('-') padding-top: $Panel-Cover_PaddingBefore;
|
|
border-top-width: 1px;
|
|
// @____Bibi:Dress__('-') max-width: calc(100vw - #{$Panel_PaddingStart + $Panel_PaddingEnd});
|
|
p#bibi-panel-bookinfo-cover-info {
|
|
text-align: left;
|
|
}
|
|
}
|
|
html.nav-rtl & {
|
|
// @____Bibi:Dress__('-') margin-right: $Panel-Cover_MarginBefore;
|
|
// @____Bibi:Dress__('-') padding-right: $Panel-Cover_PaddingBefore;
|
|
border-right-width: 1px;
|
|
// @____Bibi:Dress__('-') max-width: calc(100vw - #{$Panel_PaddingAfter * 2});
|
|
height: 100%;
|
|
img {
|
|
@include margin-h(auto);
|
|
}
|
|
p#bibi-panel-bookinfo-cover-info {
|
|
text-align: center;
|
|
}
|
|
}
|
|
&.without-cover-image {
|
|
.book-icon {
|
|
// @____Bibi:Dress__('-') @include DEFAULT__SPECIALICON__Book($Panel-Cover-Icon_Size__WithoutCoverImage, $Panel-Cover-Icon_OuterColor__WithoutCoverImage, $Panel-Cover-Icon_InnerColor__WithoutCoverImage, relative);
|
|
margin-bottom: .75em;
|
|
}
|
|
}
|
|
html.nav-rtl &.without-cover-image {
|
|
.book-icon {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
} |