mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-10-18 13:41:47 +00:00
140 lines
No EOL
6 KiB
SCSS
140 lines
No EOL
6 KiB
SCSS
// ================================================================================
|
||
// + Slider
|
||
// --------------------------------------------------------------------------------
|
||
|
||
$Slider_Size: 64px;
|
||
|
||
$Slider_PaddingStart__SliderOpened: 8px;
|
||
$Slider_PaddingEnd__SliderOpened: 8px;
|
||
$Slider_PaddingBefore__SliderOpened: 8px; $Slider_PaddingBefore__SliderOpened__WithHistory: 48px;
|
||
$Slider_PaddingAfter__SliderOpened: 8px;
|
||
|
||
$Slider_Transition__Open: .01s ease;
|
||
$Slider_Transition__Close: .1s ease;
|
||
|
||
$Slider_KeyColor: steelblue;
|
||
// [ja] └ Slider 内のキーカラー（アイコンや文字色の一貫性を保つための共通／事前定義）※以降の項目で利用できますが、してもしなくても構いません
|
||
|
||
$Slider_BorderColor: rgb(232,232,232);
|
||
$Slider_Background: white;
|
||
$Slider_BoxShadow: none;
|
||
|
||
$Slider_BorderColor__SliderOpened: darken($Slider_Background, 20%);
|
||
$Slider_Background__SliderOpened: rgb(236,236,236);//rgb(222,222,222);
|
||
$Slider_BoxShadow__SliderOpened: 0 0 16px rgba(black, 0.125);
|
||
|
||
|
||
// - . History
|
||
// --------------------------------------------------------------------------------
|
||
|
||
$Slider-History-Button-Icon_Size: 32px;
|
||
$Slider-History-Button-Icon_Margin: 8px;
|
||
$Slider-History-Button-Icon_Margin: 8px;
|
||
|
||
|
||
// - . Thumb
|
||
// --------------------------------------------------------------------------------
|
||
|
||
$Slider-Thumb_BackgroundColor: rgb(160,160,160);//rgb(192,192,192);
|
||
$Slider-Thumb_BackgroundColor__Hover: rgb(128,128,128);
|
||
$Slider-Thumb_BackgroundColor__Active: rgb(160,160,160);
|
||
$Slider-Thumb_BorderColor: transparent;//rgb(32,32,32);
|
||
// [ja] └ 画面中央タップ以前の細い状態（スクロールバーを模した状態）の Slider の、現在位置表示となるサムの色（Slider 以外のスクロールバーは WebKit/Blink 系のみに適用されます）
|
||
|
||
$Slider-Thumb_Size__SliderOpened: 11px;
|
||
|
||
$Slider-Thumb_Border__SliderOpened: none 0 transparent;//solid 1px rgba($Slider_KeyColor, .1);
|
||
$Slider-Thumb_BackgroundColor__SliderOpened: rgba($Slider_KeyColor, .5);//linear-gradient(to left, $Slider_KeyColor 0, $Slider_KeyColor $Slider-Thumb_Size__SliderOpened, rgba($Slider_KeyColor, .25) $Slider-Thumb_Size__SliderOpened, rgba($Slider_KeyColor, .25) 100%);
|
||
|
||
$Slider-Thumb_Border__SliderOpened__Min: $Slider-Thumb_Border__SliderOpened;//none 0 transparent;
|
||
$Slider-Thumb_BackgroundColor__SliderOpened__Min: $Slider-Thumb_BackgroundColor__SliderOpened;//$Slider_KeyColor;
|
||
|
||
$Slider-Thumb-Halo_Width__SliderOpened: 0;//1px;
|
||
$Slider-Thumb-Halo_Color__SliderOpened: transparent;//rgba(white, .625);
|
||
|
||
|
||
// - . Rail
|
||
// --------------------------------------------------------------------------------
|
||
|
||
$Slider-Rail-FullLength_Width__SliderOpened: 1px;
|
||
$Slider-Rail-FullLength_Color__SliderOpened: rgb(216,216,216);
|
||
$Slider-Rail-FullLength_Color__SliderOpened__Hover: $Slider-Rail-FullLength_Color__SliderOpened;
|
||
|
||
$Slider-Rail-Groove_Width__SliderOpened: 1px;
|
||
$Slider-Rail-Groove_Color__SliderOpened: rgb(216,216,216);
|
||
$Slider-Rail-Groove_Color__SliderOpened__Hover: $Slider-Rail-Groove_Color__SliderOpened;
|
||
|
||
$Slider-Rail-Progress_Width__SliderOpened: 3px;
|
||
$Slider-Rail-Progress_Color__SliderOpened: $Slider_KeyColor;
|
||
$Slider-Rail-Progress_Color__SliderOpened__Hover: $Slider_KeyColor;
|
||
|
||
|
||
// - Edgebar Box
|
||
// --------------------------------------------------------------------------------
|
||
|
||
|
||
// - Edgebar
|
||
// --------------------------------------------------------------------------------
|
||
|
||
$Slider-Edgebar_BorderRadius: 2px;//($Slider_Size - $Slider_PaddingStart__SliderOpened - $Slider_PaddingEnd__SliderOpened) * 0.5;
|
||
$Slider-Edgebar_Background: white;
|
||
|
||
|
||
|
||
|
||
// ================================================================================
|
||
// + Icons in Slider
|
||
// --------------------------------------------------------------------------------
|
||
|
||
|
||
// - Colors & Interaction
|
||
// --------------------------------------------------------------------------------
|
||
|
||
// [In Slider] Default
|
||
$Slider-Icon-Font_PaintColor: rgb(128,128,128);
|
||
$Slider-Icon-Font_OutlineColor: transparent;
|
||
$Slider-Icon-Shape_PaintColor: white;
|
||
$Slider-Icon-Shape_OutlineColor: rgb(128,128,128);
|
||
$Slider-Icon_BackgroundColor: white;
|
||
$Slider-Icon_BorderColor: rgb(234,234,234);
|
||
$Slider-Icon_Transform: none;
|
||
|
||
// [In Slider] Default:Hover
|
||
$Slider-Icon-Font_PaintColor__Hover: white;
|
||
$Slider-Icon-Font_OutlineColor__Hover: $Slider-Icon-Font_OutlineColor;
|
||
$Slider-Icon-Shape_PaintColor__Hover: $Slider_KeyColor;
|
||
$Slider-Icon-Shape_OutlineColor__Hover: white;
|
||
$Slider-Icon_BackgroundColor__Hover: $Slider_KeyColor;
|
||
$Slider-Icon_BorderColor__Hover: $Slider_KeyColor;
|
||
$Slider-Icon_Transform__Hover: $Slider-Icon_Transform;
|
||
|
||
// [In Slider] Active
|
||
$Slider-Icon-Font_PaintColor__Active: $Slider-Icon-Font_PaintColor__Hover;
|
||
$Slider-Icon-Font_OutlineColor__Active: $Slider-Icon-Font_OutlineColor__Hover;
|
||
$Slider-Icon-Shape_PaintColor__Active: $Slider-Icon-Shape_PaintColor__Hover;
|
||
$Slider-Icon-Shape_OutlineColor__Active: $Slider-Icon-Shape_OutlineColor__Hover;
|
||
$Slider-Icon_BackgroundColor__Active: $Slider-Icon_BackgroundColor__Hover;
|
||
$Slider-Icon_BorderColor__Active: $Slider-Icon_BorderColor__Hover;
|
||
$Slider-Icon_Transform__Active: rotate(360deg);
|
||
|
||
// [In Slider] Active:Hover
|
||
$Slider-Icon-Font_PaintColor__Active-Hover: $Slider-Icon-Font_PaintColor__Active;
|
||
$Slider-Icon-Font_OutlineColor__Active-Hover: $Slider-Icon-Font_OutlineColor__Active;
|
||
$Slider-Icon-Shape_PaintColor__Active-Hover: $Slider-Icon-Shape_PaintColor__Active;
|
||
$Slider-Icon-Shape_OutlineColor__Active-Hover: $Slider-Icon-Shape_OutlineColor__Active;
|
||
$Slider-Icon_BackgroundColor__Active-Hover: $Slider-Icon_BackgroundColor__Active;
|
||
$Slider-Icon_BorderColor__Active-Hover: $Slider-Icon_BorderColor__Active;
|
||
$Slider-Icon_Transform__Active-Hover: $Slider-Icon_Transform__Active;
|
||
|
||
// [In Slider] Transition
|
||
$Slider-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
|
||
$Slider-Icon_Opacity__Disabled: 0.33; |