mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-10-18 13:41:47 +00:00
329 lines
11 KiB
SCSS
329 lines
11 KiB
SCSS
// ================================================================================
|
|
// + Base
|
|
// --------------------------------------------------------------------------------
|
|
|
|
|
|
// - Colors & Interaction: Mix-Ins
|
|
// --------------------------------------------------------------------------------
|
|
|
|
@mixin Icon-OutlineColor($SCOPED__TextOrBox, $SCOPED__Icon-OutlineColor) {
|
|
#{$SCOPED__TextOrBox}-shadow:
|
|
-1px -1px 0px $SCOPED__Icon-OutlineColor,
|
|
0px -1px 0px $SCOPED__Icon-OutlineColor,
|
|
1px -1px 0px $SCOPED__Icon-OutlineColor,
|
|
1px 0px 0px $SCOPED__Icon-OutlineColor,
|
|
1px 1px 0px $SCOPED__Icon-OutlineColor,
|
|
0px 1px 0px $SCOPED__Icon-OutlineColor,
|
|
-1px 1px 0px $SCOPED__Icon-OutlineColor,
|
|
-1px 0px 0px $SCOPED__Icon-OutlineColor,
|
|
0px 0px 1px $SCOPED__Icon-OutlineColor;
|
|
}
|
|
|
|
@mixin Icon-Colouring($SCOPED__Icon-Font_PaintColor, $SCOPED__Icon-Font_OutlineColor, $SCOPED__Icon-Shape_PaintColor, $SCOPED__Icon-Shape_OutlineColor, $SCOPED__Icon-BackgroundColor, $SCOPED__Icon-BorderColor) {
|
|
color: $SCOPED__Icon-BorderColor;
|
|
border-color: $SCOPED__Icon-BorderColor;
|
|
background-color: $SCOPED__Icon-BackgroundColor;
|
|
&:before, &:after {
|
|
color: $SCOPED__Icon-Font_PaintColor;
|
|
@if $SCOPED__Icon-Font_OutlineColor != transparent { @include Icon-OutlineColor("text", $SCOPED__Icon-Font_OutlineColor); }
|
|
}
|
|
span.bibi-shape-spreads {
|
|
span.bibi-shape-spread {
|
|
span.bibi-shape-item {
|
|
border-color: $SCOPED__Icon-Shape_OutlineColor;
|
|
background-color: $SCOPED__Icon-Shape_PaintColor;
|
|
}
|
|
}
|
|
}
|
|
&.bibi-icon-toggle-panel {
|
|
>span {
|
|
background-color: $SCOPED__Icon-Font_PaintColor;
|
|
@if $SCOPED__Icon-Font_OutlineColor != transparent { @include Icon-OutlineColor("box", $SCOPED__Icon-Font_OutlineColor); }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// - Colors & Interaction: Default
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-icon {
|
|
.bibi-button.disabled & {
|
|
&:before, &:after { opacity: 0.33 !important; }
|
|
}
|
|
#bibi-menu & {
|
|
@include Icon-Colouring(
|
|
$Menu-Icon-Font_PaintColor,
|
|
$Menu-Icon-Font_OutlineColor,
|
|
$Menu-Icon-Shape_PaintColor,
|
|
$Menu-Icon-Shape_OutlineColor,
|
|
$Menu-Icon_BackgroundColor,
|
|
$Menu-Icon_BorderColor
|
|
);
|
|
&, &:before, &:after, * { transition: $Menu-Icon_Transition; }
|
|
&:before, &:after { transform: $Menu-Icon_Transform; }
|
|
}
|
|
#bibi-slider & {
|
|
@include Icon-Colouring(
|
|
$Slider-Icon-Font_PaintColor,
|
|
$Slider-Icon-Font_OutlineColor,
|
|
$Slider-Icon-Shape_PaintColor,
|
|
$Slider-Icon-Shape_OutlineColor,
|
|
$Slider-Icon_BackgroundColor,
|
|
$Slider-Icon_BorderColor
|
|
);
|
|
&, &:before, &:after, * { transition: $Slider-Icon_Transition; }
|
|
&:before, &:after { transform: $Slider-Icon_Transform; }
|
|
}
|
|
.bibi-subpanel & {
|
|
@include Icon-Colouring(
|
|
$Subpanel-Icon-Font_PaintColor,
|
|
$Subpanel-Icon-Font_OutlineColor,
|
|
$Subpanel-Icon-Shape_PaintColor,
|
|
$Subpanel-Icon-Shape_OutlineColor,
|
|
$Subpanel-Icon_BackgroundColor,
|
|
$Subpanel-Icon_BorderColor
|
|
);
|
|
&, &:before, &:after, * { transition: $Subpanel-Icon_Transition; }
|
|
&:before, &:after { transform: $Subpanel-Icon_Transform; }
|
|
}
|
|
}
|
|
|
|
|
|
// - Colors & Interaction: Default + Hover
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-button.default { &.hover/*, &:hover*/ { .bibi-icon {
|
|
#bibi-menu & {
|
|
@include Icon-Colouring(
|
|
$Menu-Icon-Font_PaintColor__Hover,
|
|
$Menu-Icon-Font_OutlineColor__Hover,
|
|
$Menu-Icon-Shape_PaintColor__Hover,
|
|
$Menu-Icon-Shape_OutlineColor__Hover,
|
|
$Menu-Icon_BackgroundColor__Hover,
|
|
$Menu-Icon_BorderColor__Hover
|
|
);
|
|
&:before, &:after { transform: $Menu-Icon_Transform__Hover; }
|
|
}
|
|
#bibi-slider & {
|
|
@include Icon-Colouring(
|
|
$Slider-Icon-Font_PaintColor__Hover,
|
|
$Slider-Icon-Font_OutlineColor__Hover,
|
|
$Slider-Icon-Shape_PaintColor__Hover,
|
|
$Slider-Icon-Shape_OutlineColor__Hover,
|
|
$Slider-Icon_BackgroundColor__Hover,
|
|
$Slider-Icon_BorderColor__Hover
|
|
);
|
|
&:before, &:after { transform: $Slider-Icon_Transform__Hover; }
|
|
}
|
|
.bibi-subpanel & {
|
|
@include Icon-Colouring(
|
|
$Subpanel-Icon-Font_PaintColor__Hover,
|
|
$Subpanel-Icon-Font_OutlineColor__Hover,
|
|
$Subpanel-Icon-Shape_PaintColor__Hover,
|
|
$Subpanel-Icon-Shape_OutlineColor__Hover,
|
|
$Subpanel-Icon_BackgroundColor__Hover,
|
|
$Subpanel-Icon_BorderColor__Hover
|
|
);
|
|
&:before, &:after { transform: $Subpanel-Icon_Transform__Hover; }
|
|
}
|
|
}}}
|
|
|
|
|
|
// - Colors & Interaction: Active
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-button.active { .bibi-icon {
|
|
#bibi-menu & {
|
|
@include Icon-Colouring(
|
|
$Menu-Icon-Font_PaintColor__Active,
|
|
$Menu-Icon-Font_OutlineColor__Active,
|
|
$Menu-Icon-Shape_PaintColor__Active,
|
|
$Menu-Icon-Shape_OutlineColor__Active,
|
|
$Menu-Icon_BackgroundColor__Active,
|
|
$Menu-Icon_BorderColor__Active
|
|
);
|
|
&:before, &:after { transform: $Menu-Icon_Transform__Active; }
|
|
}
|
|
#bibi-slider & {
|
|
@include Icon-Colouring(
|
|
$Slider-Icon-Font_PaintColor__Active,
|
|
$Slider-Icon-Font_OutlineColor__Active,
|
|
$Slider-Icon-Shape_PaintColor__Active,
|
|
$Slider-Icon-Shape_OutlineColor__Active,
|
|
$Slider-Icon_BackgroundColor__Active,
|
|
$Slider-Icon_BorderColor__Active
|
|
);
|
|
&:before, &:after { transform: $Slider-Icon_Transform__Active; }
|
|
}
|
|
.bibi-subpanel & {
|
|
@include Icon-Colouring(
|
|
$Subpanel-Icon-Font_PaintColor__Active,
|
|
$Subpanel-Icon-Font_OutlineColor__Active,
|
|
$Subpanel-Icon-Shape_PaintColor__Active,
|
|
$Subpanel-Icon-Shape_OutlineColor__Active,
|
|
$Subpanel-Icon_BackgroundColor__Active,
|
|
$Subpanel-Icon_BorderColor__Active
|
|
);
|
|
&:before, &:after { transform: $Subpanel-Icon_Transform__Active; }
|
|
}
|
|
}}
|
|
|
|
|
|
// - Colors & Interaction: Active + Hover
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-button-normal, .bibi-button-toggle { &.active { &.hover/*, &:hover*/ { .bibi-icon {
|
|
#bibi-menu & {
|
|
@include Icon-Colouring(
|
|
$Menu-Icon-Font_PaintColor__Active-Hover,
|
|
$Menu-Icon-Font_OutlineColor__Active-Hover,
|
|
$Menu-Icon-Shape_PaintColor__Active-Hover,
|
|
$Menu-Icon-Shape_OutlineColor__Active-Hover,
|
|
$Menu-Icon_BackgroundColor__Active-Hover,
|
|
$Menu-Icon_BorderColor__Active-Hover
|
|
);
|
|
&:before, &:after { transform: $Menu-Icon_Transform__Active-Hover; }
|
|
}
|
|
#bibi-slider & {
|
|
@include Icon-Colouring(
|
|
$Slider-Icon-Font_PaintColor__Active-Hover,
|
|
$Slider-Icon-Font_OutlineColor__Active-Hover,
|
|
$Slider-Icon-Shape_PaintColor__Active-Hover,
|
|
$Slider-Icon-Shape_OutlineColor__Active-Hover,
|
|
$Slider-Icon_BackgroundColor__Active-Hover,
|
|
$Slider-Icon_BorderColor__Active-Hover
|
|
);
|
|
&:before, &:after { transform: $Slider-Icon_Transform__Active-Hover; }
|
|
}
|
|
.bibi-subpanel & {
|
|
@include Icon-Colouring(
|
|
$Subpanel-Icon-Font_PaintColor__Active-Hover,
|
|
$Subpanel-Icon-Font_OutlineColor__Active-Hover,
|
|
$Subpanel-Icon-Shape_PaintColor__Active-Hover,
|
|
$Subpanel-Icon-Shape_OutlineColor__Active-Hover,
|
|
$Subpanel-Icon_BackgroundColor__Active-Hover,
|
|
$Subpanel-Icon_BorderColor__Active-Hover
|
|
);
|
|
&:before, &:after { transform: $Subpanel-Icon_Transform__Active-Hover; }
|
|
}
|
|
}}}}
|
|
|
|
|
|
// - Colors & Interaction: Disabled
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-button.disabled .bibi-icon {
|
|
#bibi-menu & { &:before, &:after { opacity: $Menu-Icon_Opacity__Disabled !important; } }
|
|
#bibi-slider & { &:before, &:after { opacity: $Slider-Icon_Opacity__Disabled !important; } }
|
|
.bibi-subpanel & { &:before, &:after { opacity: $Subpanel-Icon_Opacity__Disabled !important; } }
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================================================================================
|
|
// + General Icons
|
|
// --------------------------------------------------------------------------------
|
|
|
|
|
|
// - General Icons' Common Style
|
|
// --------------------------------------------------------------------------------
|
|
|
|
// -- In Menu
|
|
.bibi-icon-config,
|
|
.bibi-icon-change-fontsize,
|
|
.bibi-icon-loupe,
|
|
.bibi-icon-manage-bookmarks,
|
|
// -- In Slider
|
|
.bibi-icon-history,
|
|
// -- In Subpanel
|
|
.bibi-icon-full-breadth-layout,
|
|
.bibi-icon-toggle-fullscreen,
|
|
.bibi-icon-open-newwindow,
|
|
.bibi-icon-fontsize,
|
|
.bibi-icon-bookmark { @include GENERALICON__Common(); }
|
|
|
|
|
|
// - General Icons in Menu
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-icon-config,
|
|
.bibi-icon-change-fontsize,
|
|
.bibi-icon-loupe,
|
|
.bibi-icon-manage-bookmarks { @include GENERALICON__CommonInMenu(); }
|
|
|
|
.bibi-icon-config { @include GENERALICON__Config(); }
|
|
|
|
.bibi-icon-change-fontsize { @include GENERALICON__ChangeFontSize(); }
|
|
|
|
.bibi-icon-loupe { @include GENERALICON__LoupeCommon();
|
|
&-zoomin { @include GENERALICON__LoupeZoomIn(); }
|
|
&-zoomout { @include GENERALICON__LoupeZoomOut(); }
|
|
&-reset { @include GENERALICON__LoupeReset(); }
|
|
}
|
|
|
|
.bibi-icon-manage-bookmarks { @include GENERALICON__ManageBookmarks(); }
|
|
|
|
|
|
// - General Icons in Slider
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-icon-history { @include GENERALICON__CommonInSlider(); }
|
|
|
|
.bibi-icon-history { @include GENERALICON__History(); }
|
|
|
|
|
|
// - General Icons in Subpanels
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-icon-full-breadth-layout,
|
|
.bibi-icon-toggle-fullscreen,
|
|
.bibi-icon-open-newwindow,
|
|
.bibi-icon-fontsize,
|
|
.bibi-icon-bookmark { @include GENERALICON__CommonInSubpanels(); }
|
|
|
|
.bibi-icon-full-breadth-layout { @include GENERALICON__UseFullBreadth(); }
|
|
|
|
.bibi-icon-toggle-fullscreen { @include GENERALICON__ToggleFullscreen(); }
|
|
|
|
.bibi-icon-open-newwindow { @include GENERALICON__OpenNewWindow(); }
|
|
|
|
.bibi-icon-fontsize { @include GENERALICON__FontSizeCommon();
|
|
&-exlarge { @include GENERALICON__FontSizeXL(); }
|
|
&-large { @include GENERALICON__FontSizeL(); }
|
|
&-medium { @include GENERALICON__FontSizeM(); }
|
|
&-small { @include GENERALICON__FontSizeS(); }
|
|
&-exsmall { @include GENERALICON__FontSizeXS(); }
|
|
}
|
|
|
|
.bibi-icon-bookmark { @include GENERALICON__BookmarkCommon(); }
|
|
.bibi-icon-add-a-bookmark { @include GENERALICON__AddABookmark(); }
|
|
.bibi-icon-a-bookmark { @include GENERALICON__ABookmark(); }
|
|
|
|
|
|
|
|
|
|
// ================================================================================
|
|
// + Special Icons
|
|
// --------------------------------------------------------------------------------
|
|
|
|
|
|
// - "Toggle Panel" Icon in Menu
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-icon-toggle-panel {
|
|
@include SPECIALICON__TogglePanel();
|
|
.bibi-button.active & { @include SPECIALICON__TogglePanel__Active(); }
|
|
}
|
|
|
|
|
|
// - "View Xxxx" Icons in Subpanels
|
|
// --------------------------------------------------------------------------------
|
|
|
|
.bibi-icon-view { @include SPECIALICON__View_Common();
|
|
&-paged { @include SPECIALICON__ViewPaged(); }
|
|
&-horizontal { @include SPECIALICON__ViewHorizontal(); }
|
|
&-vertical { @include SPECIALICON__ViewVertical(); }
|
|
}
|
|
|