migs/asteroid
1
0
Fork 0
mirror of https://github.com/miggymofongo/asteroid.git synced 2024-11-24 14:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity
asteroid/bibi/resources/styles/_slider.scss
miggymofongo2 f9db4792c8 a commit message
2023-12-27 22:39:56 -08:00

358 lines
No EOL
13 KiB
SCSS
Raw Blame History

// ================================================================================
// + Slider
// --------------------------------------------------------------------------------
div#bibi-slider {
& {
overflow: hidden;
position: relative;
box-sizing: border-box;
display: block;
position: absolute;
z-index: $INVARIABLE__Slider_ZIndex;
cursor: pointer;
// @____Bibi:Dress__('-') box-shadow: $Slider_BoxShadow;
will-change: height;
&:after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
z-index: 0;
border-style: solid;
border-width: 0;
// @____Bibi:Dress__('-') border-color: $Slider_BorderColor;
@include size(100%);
// @____Bibi:Dress__('-') background: $Slider_Background;
}
// @____Bibi:Dress__('-') &, &:after { transition: $Slider_Transition__Close; }
}
html.appearance-horizontal & {
@include offset(auto, 0, 0, 0);
@include size(
100%,
$TEMPORARY__Scrollbar-Track_Size // TO BE OVERWRITTEN
);
&:after { border-top-width: 1px; }
}
html.appearance-horizontal.panel-opened & { height: 0; }
html.appearance-vertical & {
@include offset(0, 0, 0, auto);
@include size(
$TEMPORARY__Scrollbar-Track_Size, // TO BE OVERWRITTEN
100%
);
&:after { border-left-width: 1px; }
}
html.appearance-vertical.panel-opened & { width: 0; }
html.slider-opened & {
overflow: visible;
// @____Bibi:Dress__('-') box-shadow: $Slider_BoxShadow__SliderOpened;
// @____Bibi:Dress__('-') &:after { background: $Slider_Background__SliderOpened; }
// @____Bibi:Dress__('-') &, &:after { transition: $Slider_Transition__Open; }
}
html.slider-opened.appearance-horizontal & {
// @____Bibi:Dress__('-') height: $Slider_Size !important;
// @____Bibi:Dress__('-') &:after { border-top-color: $Slider_BorderColor__SliderOpened; }
}
html.slider-opened.appearance-vertical & {
// @____Bibi:Dress__('-') width: $Slider_Size !important;
// @____Bibi:Dress__('-') &:after { border-left-color: $Slider_BorderColor__SliderOpened; }
}
html.slider-sliding &,
html.busy & { transition: none; }
html.waiting &,
html.busy &,
html.panel-opened & { display: none; }
overscroll-behavior-x: none;
overscroll-behavior-y: none;
}
// - . History
// --------------------------------------------------------------------------------
div#bibi-slider-history {
div#bibi-slider:not(.bibi-slider-with-history) & { display: none; }
html:not(.slider-opened) & {
transform: scale(0);
// @____Bibi:Dress__('-') transition: $Slider_Transition__Close;
}
html.slider-opened & {
// @____Bibi:Dress__('-') transition: $Slider_Transition__Open;
}
.bibi-buttongroup { // ul
.bibi-buttonbox { // li
.bibi-button#bibi-slider-history-button {
position: absolute;
z-index: 1;
margin: auto;
// @____Bibi:Dress__('-') @include size($Slider-History-Button-Icon_Size);
html.appearance-vertical & {
left: 0; right: 0;
bottom: auto;
// @____Bibi:Dress__('-') top: $Slider-History-Button-Icon_Margin;
}
html.appearance-horizontal & {
top: 0; bottom: 0;
}
html.appearance-ltr & {
right: auto;
// @____Bibi:Dress__('-') left: $Slider-History-Button-Icon_Margin;
}
html.appearance-rtl & {
left: auto;
// @____Bibi:Dress__('-') right: $Slider-History-Button-Icon_Margin;
}
span.bibi-button-label {
position: absolute;
@include offset(0);
overflow: hidden;
@include size(0);
color: transparent;
}
}
}
}
}
// - . Thumb
// --------------------------------------------------------------------------------
div#bibi-slider-thumb {
display: block;
box-sizing: border-box;
position: absolute;
z-index: 100000;
html.appearance-horizontal & {
top: 0; bottom: 0;
height: $TEMPORARY__Scrollbar-Thumb_Size; // TO BE OVERWRITTEN
}
html.appearance-vertical & {
left: 0; right: 0;
width: $TEMPORARY__Scrollbar-Thumb_Size; // TO BE OVERWRITTEN
}
html.slider-opened.appearance-horizontal & { height: 100%; cursor: col-resize; }
html.slider-opened.appearance-vertical & { width: 100%; cursor: row-resize; }
margin: auto;
//pointer-events: none;
background: transparent;
will-change: width, height, transform, left, top;
&:before,
&:after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
z-index: 10;
margin: auto;
// @____Bibi:Dress__('-') html.slider-opened & { transition: $Slider_Transition__Open; }
// @____Bibi:Dress__('-') html:not(.slider-opened) & { transition: $Slider_Transition__Close; }
}
&:before {
@include offset($TEMPORARY__Scrollbar-Thumb_Size * -1); // TO BE OVERWRITTEN
@include size(100%);
border-radius: $TEMPORARY__Scrollbar-Thumb_Size * 0.5; // TO BE OVERWRITTEN
html.appearance-horizontal & { min-width: $TEMPORARY__Scrollbar-Thumb_Size; } // TO BE OVERWRITTEN
html.appearance-vertical & { min-height: $TEMPORARY__Scrollbar-Thumb_Size; } // TO BE OVERWRITTEN
// @____Bibi:Dress__('-') background: $Slider-Thumb_BackgroundColor;
html.slider-opened & { transform: scale(0); opacity: 0; }
}
// @____Bibi:Dress__('-') html:not(.slider-opened):not(.touch) &:hover:before { background-color: $Slider-Thumb_BackgroundColor__Hover; }
// @____Bibi:Dress__('-') html:not(.slider-opened):not(.touch) &:active:before { background-color: $Slider-Thumb_BackgroundColor__Active; }
&:after {
// @____Bibi:Dress__('-') @include offset($Slider-Thumb_Size__SliderOpened * -1);
// @____Bibi:Dress__('-') html.appearance-horizontal & { @include size(100%, $Slider-Thumb_Size__SliderOpened); }
// @____Bibi:Dress__('-') html.appearance-vertical & { @include size($Slider-Thumb_Size__SliderOpened, 100%); }
// @____Bibi:Dress__('-') @include min-size($Slider-Thumb_Size__SliderOpened);
// @____Bibi:Dress__('-') border-radius: $Slider-Thumb_Size__SliderOpened * .5;
// @____Bibi:Dress__('-') border: $Slider-Thumb_Border__SliderOpened;
// @____Bibi:Dress__('-') background: $Slider-Thumb_BackgroundColor__SliderOpened;
// @____Bibi:Dress__('-') box-shadow: 0 0 0 $Slider-Thumb-Halo_Width__SliderOpened $Slider-Thumb-Halo_Color__SliderOpened;
html:not(.slider-opened) & { transform: scale(0); opacity: 0; }
}
&.min:after {
// @____Bibi:Dress__('-') border: $Slider-Thumb_Border__SliderOpened__Min;
// @____Bibi:Dress__('-') background: $Slider-Thumb_BackgroundColor__SliderOpened__Min;
}
}
// - . Rail
// --------------------------------------------------------------------------------
div#bibi-slider-rail,
div#bibi-slider-rail-groove,
div#bibi-slider-rail-progress {
& {
box-sizing: border-box;
position: absolute;
pointer-events: none;
transition: background-color linear .33s;
}
}
div#bibi-slider-rail {
& {
z-index: 10000;
@include offset(0);
margin: auto;
// @____Bibi:Dress__('-') background: $Slider-Rail-FullLength_Color__SliderOpened;
}
html.appearance-horizontal & { @include size(100%, 0); }
html.appearance-vertical & { @include size(0, 100%); }
// @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { height: $Slider-Rail-FullLength_Width__SliderOpened; }
// @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { width: $Slider-Rail-FullLength_Width__SliderOpened; }
// @____Bibi:Dress__('-') div#bibi-slider:hover & { background: $Slider-Rail-FullLength_Color__SliderOpened__Hover; }
}
div#bibi-slider-rail-groove,
div#bibi-slider-rail-progress {
& {
@include size(0);
}
}
div#bibi-slider-rail-groove {
& {
// @____Bibi:Dress__('-') border-top-color: $Slider-Rail-Groove_Color__SliderOpened;
}
html.appearance-horizontal & { @include offset(-100%); margin: auto; }
html.appearance-vertical & { @include offset(-100%); margin: auto; }
// @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { border-top: $Slider-Rail-Groove_Width__SliderOpened; }
// @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { width: $Slider-Rail-Groove_Width__SliderOpened; }
// @____Bibi:Dress__('-') div#bibi-slider:hover & { background: $Slider-Rail-Groove_Color__SliderOpened__Hover; }
}
div#bibi-slider-rail-progress {
& {
// @____Bibi:Dress__('-') background: $Slider-Rail-Progress_Color__SliderOpened;
will-change: width, height;
}
html.appearance-rtl & { @include offset(-100%, 0, -100%, auto); margin: auto 0; transform-origin: 100% 50%; }
html.appearance-ltr & { @include offset(-100%, auto, -100%, 0); margin: auto 0; transform-origin: 0 50%; }
html.appearance-ttb & { @include offset(0, -100%, auto, -100%); margin: 0 auto; transform-origin: 50% 0 ; }
// @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { height: $Slider-Rail-Progress_Width__SliderOpened; }
// @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { width: $Slider-Rail-Progress_Width__SliderOpened; }
// @____Bibi:Dress__('-') html.slider-opened.appearance-ltr & { border-radius: 0 ($Slider-Rail-Progress_Width__SliderOpened * .5) ($Slider-Rail-Progress_Width__SliderOpened * .5) 0; }
// @____Bibi:Dress__('-') html.slider-opened.appearance-rtl & { border-radius: ($Slider-Rail-Progress_Width__SliderOpened * .5) 0 0 ($Slider-Rail-Progress_Width__SliderOpened * .5); }
// @____Bibi:Dress__('-') html.slider-opened.appearance-ttb & { border-radius: 0 0 ($Slider-Rail-Progress_Width__SliderOpened * .5) ($Slider-Rail-Progress_Width__SliderOpened * .5); }
// @____Bibi:Dress__('-') div#bibi-slider:hover & { background: $Slider-Rail-Progress_Color__SliderOpened__Hover; }
}
// - Edgebar Box
// --------------------------------------------------------------------------------
div#bibi-slider-edgebar-box {
& {
box-sizing: border-box;
position: absolute;
@include offset(0);
z-index: 10;
margin: auto;
background: transparent;
will-change: width, height;
html.appearance-horizontal & {
@include offset(1px, 0, auto, 0);
height: calc(100% - 1px );
width: calc(100% - #{ $TEMPORARY__Scrollbar-Thumb_Size * 0.5 * 2 });
}
html.appearance-vertical & {
@include offset(0, auto, 0, 1px);
width: calc(100% - 1px );
height: calc(100% - #{ $TEMPORARY__Scrollbar-Thumb_Size * 0.5 * 2 });
}
html.slider-opened.appearance-horizontal & {
// @____Bibi:Dress__('-') top: 1px + $Slider_PaddingStart__SliderOpened;
bottom: auto;
// @____Bibi:Dress__('-') height: calc(100% - #{ 1px + $Slider_PaddingStart__SliderOpened + $Slider_PaddingEnd__SliderOpened });
}
html.slider-opened.appearance-ltr & {
right: auto;
}
html.slider-opened.appearance-rtl & {
left: auto;
}
html.slider-opened.appearance-vertical & {
// @____Bibi:Dress__('-') left: 1px + $Slider_PaddingStart__SliderOpened;
right: auto;
bottom: auto;
// @____Bibi:Dress__('-') width: calc(100% - #{ 1px + $Slider_PaddingStart__SliderOpened + $Slider_PaddingEnd__SliderOpened });
}
}
div#bibi-slider:not(.bibi-slider-with-history) & {
html.slider-opened.appearance-horizontal & {
// @____Bibi:Dress__('-') width: calc(100% - #{ $Slider_PaddingBefore__SliderOpened + $Slider_PaddingAfter__SliderOpened });
}
html.slider-opened.appearance-ltr & {
// @____Bibi:Dress__('-') left: $Slider_PaddingBefore__SliderOpened;
}
html.slider-opened.appearance-rtl & {
// @____Bibi:Dress__('-') right: $Slider_PaddingBefore__SliderOpened;
}
html.slider-opened.appearance-vertical & {
// @____Bibi:Dress__('-') top: $Slider_PaddingBefore__SliderOpened;
// @____Bibi:Dress__('-') height: calc(100% - #{ $Slider_PaddingBefore__SliderOpened + $Slider_PaddingAfter__SliderOpened });
}
}
div#bibi-slider.bibi-slider-with-history & {
html.slider-opened.appearance-horizontal & {
// @____Bibi:Dress__('-') width: calc(100% - #{ $Slider_PaddingBefore__SliderOpened__WithHistory + $Slider_PaddingAfter__SliderOpened });
}
html.slider-opened.appearance-ltr & {
// @____Bibi:Dress__('-') left: $Slider_PaddingBefore__SliderOpened__WithHistory;
}
html.slider-opened.appearance-rtl & {
// @____Bibi:Dress__('-') right: $Slider_PaddingBefore__SliderOpened__WithHistory;
}
html.slider-opened.appearance-vertical & {
// @____Bibi:Dress__('-') top: $Slider_PaddingBefore__SliderOpened__WithHistory;
// @____Bibi:Dress__('-') height: calc(100% - #{ $Slider_PaddingBefore__SliderOpened__WithHistory + $Slider_PaddingAfter__SliderOpened });
}
}
}
// - Edgebar
// --------------------------------------------------------------------------------
div#bibi-slider-edgebar {
box-sizing: border-box;
position: absolute;
z-index: 10;
@include offset(0);
@include size(100%);
margin: auto;
will-change: width, height;
}
// - Edgebar
// --------------------------------------------------------------------------------
div#bibi-slider-edgebar {
// @____Bibi:Dress__('-') background: $Slider-Edgebar_Background;
}
// - . History
// --------------------------------------------------------------------------------
div#bibi-slider-history {
ul {
li {
span.bibi-button {
span.bibi-button-iconbox {
span.bibi-icon {
}
span.bibi-icon-historyback {
}
}
span.bibi-button-label {
}
}
}
}
}
Reference in a new issue View git blame Copy permalink