mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-11-24 14:10:27 +00:00
267 lines
8.3 KiB
SCSS
267 lines
8.3 KiB
SCSS
|
// ================================================================================
|
||
|
|
// + Subpanel
|
||
|
|
// --------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
$Subpanel_KeyColor: saturate(steelblue, 20%);
|
||
|
|
// [ja] └ Subpanel 内のキーカラー（アイコンや文字色の一貫性を保つための共通／事前定義）
|
||
|
|
|
||
|
|
$Subpanel-Icon_Size: 21px;
|
||
|
|
// [ja] └ Subpanel 内アイコン寸法（正方形の１辺）
|
||
|
|
|
||
|
|
$Subpanel_Margin: 4px;
|
||
|
|
$Subpanel_BorderRadius: 4px;
|
||
|
|
$Subpanel_BackgroundColor: rgba(252,252,252, 0.96);
|
||
|
|
$Subpanel_BoxShadow: rgba(black, 0.1) 0 2px 2px;
|
||
|
|
$Subpanel_TransitionTimingFunction__Open: cubic-bezier(.2,.8,.8,1.1);
|
||
|
|
$Subpanel_TransitionTimingFunction__Close: ease-out;
|
||
|
|
|
||
|
|
|
||
|
|
// - Sub Panel :: Scrollbar
|
||
|
|
// --------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
$Subpanel-Scrollbar-Track_Size: 6px;
|
||
|
|
$Subpanel-Scrollbar-Track_BackgroundColor: rgb(248,248,248);
|
||
|
|
|
||
|
|
$Subpanel-Scrollbar-Thumb_Size: 2px;
|
||
|
|
$Subpanel-Scrollbar-Thumb_BackgroundColor: rgb(195,195,195);
|
||
|
|
$Subpanel-Scrollbar-Thumb_BackgroundColor__Hover: rgb(125,125,125);
|
||
|
|
$Subpanel-Scrollbar-Thumb_BackgroundColor__Active: $Subpanel-Scrollbar-Thumb_BackgroundColor__Hover;
|
||
|
|
|
||
|
|
|
||
|
|
// - Sub Panel > Section
|
||
|
|
// --------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
$Subpanel-Section_VerticalMargin: 16px;
|
||
|
|
|
||
|
|
$Subpanel-Heading_HorizontalPadding: 8px;
|
||
|
|
$Subpanel-Heading_Color: rgb(64,64,64);
|
||
|
|
|
||
|
|
$Subpanel-ButtonGroup_VerticalMargin: 6px;
|
||
|
|
$Subpanel-ButtonGroup_BorderColor: rgba(black, 0.1);
|
||
|
|
|
||
|
|
$Subpanel-Button_HorizontalPadding: 8px;
|
||
|
|
$Subpanel-Button_Height: 38px;
|
||
|
|
$Subpanel-Button-FontSize: 13px;
|
||
|
|
|
||
|
|
$Subpanel-Button_Color: rgb(64,64,64);
|
||
|
|
$Subpanel-Button-Check_Color: rgb(160,160,160);
|
||
|
|
$Subpanel-Button_BorderColor: rgba(black, 0.1);
|
||
|
|
$Subpanel-Button_BackgroundColor: white;
|
||
|
|
|
||
|
|
$Subpanel-Button_Color__Active: $Subpanel-Button_Color;
|
||
|
|
$Subpanel-Button-Check_Color__Active: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Button_BorderColor__Active: $Subpanel-Button_BorderColor;
|
||
|
|
$Subpanel-Button_BackgroundColor__Active: $Subpanel-Button_BackgroundColor;
|
||
|
|
|
||
|
|
$Subpanel-Button_Color__Hover: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Button-Check_Color__Hover: rgba($Subpanel_KeyColor, 0.8);
|
||
|
|
$Subpanel-Button_BorderColor__Hover: rgba($Subpanel_KeyColor, 0.1);
|
||
|
|
$Subpanel-Button_BackgroundColor__Hover: rgba(244,248,252, 0.8);
|
||
|
|
|
||
|
|
$Subpanel-Icon_MarginRight: 6px;
|
||
|
|
|
||
|
|
|
||
|
|
// - Sub Panel: Bookmarks
|
||
|
|
// --------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
$BookmarkSubpanel-Button_BackgroundColor__Hot: rgba(gold, .125);
|
||
|
|
|
||
|
|
@mixin BookmarkSubpanel-Button-Label() {
|
||
|
|
.bibi-bookmark-page {
|
||
|
|
.bibi-bookmark-unit {
|
||
|
|
font-size: .9em;
|
||
|
|
}
|
||
|
|
.bibi-bookmark-number {
|
||
|
|
font-size: 1.1em;
|
||
|
|
margin-left: .125em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bibi-bookmark-total-pages {
|
||
|
|
font-size: .8em;
|
||
|
|
margin-left: .25em;
|
||
|
|
opacity: .75;
|
||
|
|
.bibi-bookmark-number {
|
||
|
|
margin-left: .125em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bibi-bookmark-percent {
|
||
|
|
.bibi-bookmark-parenthesis {
|
||
|
|
}
|
||
|
|
.bibi-bookmark-number {
|
||
|
|
}
|
||
|
|
.bibi-bookmark-unit {
|
||
|
|
font-size: .8em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bibi-bookmark-total-pages + .bibi-bookmark-percent {
|
||
|
|
font-size: .9em;
|
||
|
|
margin-left: .125em;
|
||
|
|
opacity: .75;
|
||
|
|
.bibi-bookmark-parenthesis {
|
||
|
|
}
|
||
|
|
.bibi-bookmark-number {
|
||
|
|
}
|
||
|
|
.bibi-bookmark-unit {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bibi-bookmark-is-current {
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 0; right: $Subpanel-Button_Height; bottom: 0; left: 0;
|
||
|
|
width: auto;
|
||
|
|
height: $Subpanel-Button_Height;
|
||
|
|
&:before {
|
||
|
|
$LOCAL__Height: $Subpanel-Icon_Size * .9;
|
||
|
|
content: " Current Page";
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 0; right: 0; bottom: 0; left: auto;
|
||
|
|
margin: auto;
|
||
|
|
border-radius: $LOCAL__Height * 0.5;
|
||
|
|
padding: 0 .75em;
|
||
|
|
width: auto;
|
||
|
|
height: $LOCAL__Height;
|
||
|
|
line-height: $LOCAL__Height;
|
||
|
|
font-size: .8em;
|
||
|
|
font-weight: bold;
|
||
|
|
color: $Subpanel_KeyColor;
|
||
|
|
background: rgba($Subpanel_KeyColor, .125);
|
||
|
|
}
|
||
|
|
&.bibi-bookmark-is-current-ja:before {
|
||
|
|
content: " 現在のページ";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin BookmarkSubpanel-Button-RemoveBookmark-Icon() {
|
||
|
|
@include GLOBAL__FontIcon_BaseStyles("Material Icons", $Subpanel-Icon_Size);
|
||
|
|
content: "cancel";
|
||
|
|
position: absolute;
|
||
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
||
|
|
margin: auto;
|
||
|
|
width: $Subpanel-Icon_Size;
|
||
|
|
height: $Subpanel-Icon_Size;
|
||
|
|
color: rgba($Subpanel-Button_Color, .75);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin BookmarkSubpanel-Button-RemoveBookmark-Icon__Hover() {
|
||
|
|
color: rgba(255,64,0, .875);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin BookmarkSubpanel-Button-RemoveBookmark-Icon__HoverOnBookmark() {
|
||
|
|
opacity: .25;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// ================================================================================
|
||
|
|
// + Icons in Subpanel
|
||
|
|
// --------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
|
||
|
|
// - Colors & Interaction
|
||
|
|
// --------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
// [In Subpanel] Default
|
||
|
|
$Subpanel-Icon-Font_PaintColor: rgb(128,128,128);
|
||
|
|
$Subpanel-Icon-Font_OutlineColor: transparent;
|
||
|
|
$Subpanel-Icon-Shape_PaintColor: white;
|
||
|
|
$Subpanel-Icon-Shape_OutlineColor: rgb(144,144,144);
|
||
|
|
$Subpanel-Icon_BackgroundColor: rgb(248,248,248);
|
||
|
|
$Subpanel-Icon_BorderColor: rgb(192,192,192);
|
||
|
|
$Subpanel-Icon_Transform: none;
|
||
|
|
|
||
|
|
// [In Subpanel] Default:Hover
|
||
|
|
$Subpanel-Icon-Font_PaintColor__Hover: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Icon-Font_OutlineColor__Hover: transparent;
|
||
|
|
$Subpanel-Icon-Shape_PaintColor__Hover: white;
|
||
|
|
$Subpanel-Icon-Shape_OutlineColor__Hover: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Icon_BackgroundColor__Hover: lighten($Subpanel_KeyColor, 45%);
|
||
|
|
$Subpanel-Icon_BorderColor__Hover: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Icon_Transform__Hover: $Subpanel-Icon_Transform;
|
||
|
|
|
||
|
|
// [In Subpanel] Active
|
||
|
|
$Subpanel-Icon-Font_PaintColor__Active: white;
|
||
|
|
$Subpanel-Icon-Font_OutlineColor__Active: transparent;
|
||
|
|
$Subpanel-Icon-Shape_PaintColor__Active: white;
|
||
|
|
$Subpanel-Icon-Shape_OutlineColor__Active: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Icon_BackgroundColor__Active: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Icon_BorderColor__Active: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Icon_Transform__Active: rotate(360deg);
|
||
|
|
|
||
|
|
// [In Subpanel] Active:Hover
|
||
|
|
$Subpanel-Icon-Font_PaintColor__Active-Hover: white;
|
||
|
|
$Subpanel-Icon-Font_OutlineColor__Active-Hover: transparent;
|
||
|
|
$Subpanel-Icon-Shape_PaintColor__Active-Hover: white;
|
||
|
|
$Subpanel-Icon-Shape_OutlineColor__Active-Hover: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Icon_BackgroundColor__Active-Hover: lighten($Subpanel_KeyColor, 20%);
|
||
|
|
$Subpanel-Icon_BorderColor__Active-Hover: $Subpanel_KeyColor;
|
||
|
|
$Subpanel-Icon_Transform__Active-Hover: $Subpanel-Icon_Transform__Active;
|
||
|
|
|
||
|
|
// [In Subpanel] Transition
|
||
|
|
$Subpanel-Icon_Transition:
|
||
|
|
color 0.125s linear,
|
||
|
|
background-color 0.125s linear,
|
||
|
|
border-color 0.125s linear,
|
||
|
|
text-shadow 0.125s linear,
|
||
|
|
box-shadow 0.125s linear,
|
||
|
|
transform 0.25s ease
|
||
|
|
;
|
||
|
|
|
||
|
|
// Disabled
|
||
|
|
$Subpanel-Icon_Opacity__Disabled: 0.33;
|
||
|
|
|
||
|
|
/*
|
||
|
|
|
||
|
|
<div class="bibi-subpanel opened">
|
||
|
|
<div class="bibi-subpanel-section">
|
||
|
|
<div class="bibi-hgroup">
|
||
|
|
<p class="bibi-h"><span class="bibi-h-label">{ Heading Text }</span></p>
|
||
|
|
</div>
|
||
|
|
<ul class="bibi-buttongroup">
|
||
|
|
<li class="bibi-buttonbox bibi-buttonbox-toggle">
|
||
|
|
<span class="bibi-button bibi-button-toggle active" title="{ Button Text }">
|
||
|
|
<span class="bibi-button-iconbox">
|
||
|
|
<span class="bibi-icon"></span>
|
||
|
|
</span>
|
||
|
|
<span class="bibi-button-label">{ Button Text }</span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
<li class="bibi-buttonbox bibi-buttonbox-toggle">
|
||
|
|
<span class="bibi-button bibi-button-toggle default" title="{ Button Text }">
|
||
|
|
<span class="bibi-button-iconbox">
|
||
|
|
<span class="bibi-icon"></span>
|
||
|
|
</span>
|
||
|
|
<span class="bibi-button-label">{ Button Text }</span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="bibi-subpanel-section">
|
||
|
|
<ul class="bibi-buttongroup">
|
||
|
|
<li class="bibi-buttonbox bibi-buttonbox-radio">
|
||
|
|
<span class="bibi-button bibi-button-radio active" title="{ Button Text }">
|
||
|
|
<span class="bibi-button-iconbox">
|
||
|
|
<span class="bibi-icon"></span>
|
||
|
|
</span>
|
||
|
|
<span class="bibi-button-label">{ Button Text }</span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
<li class="bibi-buttonbox bibi-buttonbox-radio">
|
||
|
|
<span class="bibi-button bibi-button-radio default" title="{ Button Text }">
|
||
|
|
<span class="bibi-button-iconbox">
|
||
|
|
<span class="bibi-icon"></span>
|
||
|
|
</span>
|
||
|
|
<span class="bibi-button-label">{ Button Text }</span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
*/
|