mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-11-24 14:10:27 +00:00
120 lines
No EOL
4.2 KiB
SCSS
120 lines
No EOL
4.2 KiB
SCSS
// ================================================================================
|
|
// + Arrows
|
|
// --------------------------------------------------------------------------------
|
|
|
|
div.bibi-arrow {
|
|
//// Layout
|
|
& {
|
|
pointer-events: none;
|
|
display: none; html.arrows-active & { display: block; }
|
|
position: absolute;
|
|
z-index: $INVARIABLE__Arrow_ZIndex;
|
|
margin: auto;
|
|
line-height: 1;
|
|
&:before, &:after {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
&:before { // icon
|
|
z-index: 2;
|
|
// @____Bibi:Dress__('-') @include Arrow-Icon();
|
|
}
|
|
&:after { // edge shadow
|
|
//display: none !important;
|
|
content: "";
|
|
z-index: 1;
|
|
}
|
|
}
|
|
html.appearance-horizontal & {
|
|
// ←→
|
|
bottom: auto; width: 0;
|
|
&:before { top: 0; bottom: 0; }
|
|
&:after { top: 0; bottom: 0; height: 100%;
|
|
// @____Bibi:Dress__('-') width: $Arrow-Bar_Width;
|
|
}
|
|
}
|
|
html.appearance-horizontal.book-full-height:not(.slider-opened) & {
|
|
top: 0;
|
|
height: 100vh; // TO BE OVERWRITTEN
|
|
}
|
|
// @____Bibi:Dress__('-') html.appearance-horizontal.book-full-height.slider-opened &,
|
|
// @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height) & {
|
|
// @____Bibi:Dress__('-') top: $Menu_Height;
|
|
// @____Bibi:Dress__('-') }
|
|
// @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height):not(.slider-opened) & {
|
|
// @____Bibi:Dress__('-') height: calc(100vh - #{$Menu_Height}); // TO BE OVERWRITTEN
|
|
// @____Bibi:Dress__('-') }
|
|
// @____Bibi:Dress__('-') html.appearance-horizontal.book-full-height.slider-opened &,
|
|
// @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height).slider-opened & {
|
|
// @____Bibi:Dress__('-') height: calc(100vh - #{$Menu_Height + $Slider_Size});
|
|
// @____Bibi:Dress__('-') }
|
|
html.appearance-vertical & {
|
|
// ↑↓
|
|
left: 0; right: auto; height: 0;
|
|
&:before { left: 0; right: 0; }
|
|
&:after { left: 0; right: 0; width: 100%;
|
|
// @____Bibi:Dress__('-') height: $Arrow-Bar_Width;
|
|
}
|
|
}
|
|
html.appearance-vertical:not(.slider-opened) & {
|
|
width: 100vw; // TO BE OVERWRITTEN
|
|
}
|
|
// @____Bibi:Dress__('-') html.appearance-vertical.slider-opened & {
|
|
// @____Bibi:Dress__('-') width: calc(100vw - #{$Slider_Size});
|
|
// @____Bibi:Dress__('-') }
|
|
html.busy & {
|
|
&:before, &:after { opacity: 0 !important; transition: none !important; }
|
|
}
|
|
//// Interaction
|
|
& {
|
|
&:before, &:after { transition-duration: .4s; }
|
|
&:before { opacity: 0.00; transform: scale(1.10); transition-timing-function: cubic-bezier(.2, .8, .8, 1.6); }
|
|
&:after { opacity: 1.00; transition-timing-function: ease-out; }
|
|
}
|
|
&.available.hover {
|
|
cursor: pointer;
|
|
&:before, &:after { transition-duration: .2s; }
|
|
&:before { opacity: 1.00; transform: scale(1.10); }
|
|
}
|
|
&.available.active {
|
|
&:before, &:after { transition-duration: .1s; }
|
|
&:before { opacity: 0.75; transform: scale(1.00); }
|
|
}
|
|
&.available.glowing {
|
|
&:before, &:after { transition-duration: .1s; }
|
|
&:before { opacity: 1.00; transform: scale(1.10); }
|
|
}
|
|
}
|
|
|
|
// @____Bibi:Dress__('-') html.appearance-ttb.book-full-height.slider-opened div#bibi-arrow-back,
|
|
// @____Bibi:Dress__('-') html.appearance-ttb:not(.book-full-height) div#bibi-arrow-back {
|
|
// @____Bibi:Dress__('-') & {
|
|
// @____Bibi:Dress__('-') &:before { margin-top: $Menu_Height; }
|
|
// @____Bibi:Dress__('-') }
|
|
// @____Bibi:Dress__('-') }
|
|
|
|
@mixin Arrow-Base($SCOPED__Arrow_Dir, $SCOPED__Arrow_TransformOrigin) {
|
|
& {
|
|
#{$SCOPED__Arrow_Dir}: 0;
|
|
&:before, &:after { transform-origin: $SCOPED__Arrow_TransformOrigin; }
|
|
&:before { #{$SCOPED__Arrow_Dir}: 8px; }
|
|
&:after { background: linear-gradient(to $SCOPED__Arrow_Dir, transparent, rgba(black, 0) 25%, rgba(black, 0.1)); opacity: 0; }
|
|
}
|
|
&.available.hover, &.available.glowing {
|
|
&:after { opacity: 1; }
|
|
}
|
|
&.available.glowing {
|
|
&:before { #{$SCOPED__Arrow_Dir}: 8px; }
|
|
}
|
|
}
|
|
|
|
html.appearance-ltr div#bibi-arrow-back,
|
|
html.appearance-rtl div#bibi-arrow-forward { /* ← */ @include Arrow-Base(left, 0% 50%); }
|
|
|
|
html.appearance-ltr div#bibi-arrow-forward,
|
|
html.appearance-rtl div#bibi-arrow-back { /* → */ @include Arrow-Base(right, 100% 50%); }
|
|
|
|
html.appearance-ttb div#bibi-arrow-back { /* ↑ */ @include Arrow-Base(top, 50% 0%); }
|
|
|
|
html.appearance-ttb div#bibi-arrow-forward { /* ↓ */ @include Arrow-Base(bottom, 50% 100%); } |