asteroid/bibi/wardrobe/_dress-codes/_icons.scss

346 lines
10 KiB
SCSS
Raw Normal View History

2023-12-28 06:39:56 +00:00
// ================================================================================
// + General Icons
// --------------------------------------------------------------------------------
// - General Icons' Common Style
// --------------------------------------------------------------------------------
// [ja] 場所を問わず、一般アイコンすべてに適用される共通スタイル
@mixin GENERALICON__Common() {
display: flex;
justify-content: center;
align-items: center;
@include size(100%);
text-decoration: none;
&:before {
position: relative;
// ----
font: 1em / .98em "Material Icons";
-ms-font-feature-settings: 'liga' 1; font-feature-settings: 'liga'; text-transform: none;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility;
speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal;
}
}
// - General Icons in Menu
// --------------------------------------------------------------------------------
// [ja] メニューバー内のアイコンすべてに適用される共通スタイル
@mixin GENERALICON__CommonInMenu() {
&:before {
font-size: $Menu-Icon_Size * 25/31;
}
}
@mixin GENERALICON__Config() {
&:before {
content: "settings";
}
}
@mixin GENERALICON__ChangeFontSize() {
&:before {
content: "format_size";
top: 1px;
text-indent: -1px;
}
}
// [ja] 3種の拡大/縮小アイコンすべてに適用される共通スタイル
@mixin GENERALICON__LoupeCommon() {
&:before {
text-indent: 1px;
}
}
@mixin GENERALICON__LoupeZoomIn() {
&:before {
content: "zoom_in";
.bibi-button.active &, .bibi-button.active.hover & { transform: scale(1.25) !important; }
}
}
@mixin GENERALICON__LoupeZoomOut() {
&:before {
content: "zoom_out";
.bibi-button.active &, .bibi-button.active.hover & { transform: scale(0.80) !important; }
}
}
@mixin GENERALICON__LoupeReset() {
&:before {
content: "search";
.bibi-button.active &, .bibi-button.active.hover & { html.zoomed-in & { transform: scale(0.80) !important; } html.zoomed-out & { transform: scale(1.25) !important; } }
}
&:after {
content: "=";
display: block;
position: absolute;
@include offset(22%, auto, auto, 22%);
margin: auto;
@include size(1em);
font-size: 1em * (13px / 18px);
line-height: 1;
html.macOS.Safari & { top: 16%; }
.bibi-button.active &, .bibi-button.active.hover & { transform: translateX(4px) scale(0) !important; }
}
}
@mixin GENERALICON__ManageBookmarks() {
&:before {
content: "bookmarks";
font-size: $Menu-Icon_Size * 21/31;
}
}
// - General Icons in Slider
// --------------------------------------------------------------------------------
// [ja] Slider 内のアイコンすべてに適用される共通スタイル
@mixin GENERALICON__CommonInSlider() {
border-radius: 50%;
&:before {
font-size: 24px;
}
}
@mixin GENERALICON__History() {
transition: none !important; .bibi-button:hover & { transition: $Slider-Icon_Transition !important; }
&:before {
content: "history";
left: -.01em;
transform: none !important;
}
}
// - General Icons in Subpanels
// --------------------------------------------------------------------------------
// [ja] Subpanel 内のアイコンすべてに適用される共通スタイル
@mixin GENERALICON__CommonInSubpanels() {
&:before {
font-size: $Subpanel-Icon_Size * 3/4;
}
}
@mixin GENERALICON__UseFullBreadth() {
&:before {
content: "settings_overscan";
}
}
@mixin GENERALICON__ToggleFullscreen() {
&:before {
content: "fullscreen";
html.InternetExplorer & { top: -.05em; }
*:fullscreen & {
content: "fullscreen_exit";
}
}
}
@mixin GENERALICON__OpenNewWindow() {
&:before {
content: "open_in_new";
}
}
// [ja] 5種のフォントサイズ変更アイコンすべてに適用される共通スタイル
@mixin GENERALICON__FontSizeCommon() {
&:before {
content: "title";
top: 1px;
}
}
// [ja] 5種のフォントサイズ変更アイコンの font-size 値を同一比率で段階づけするためにここだけで使っている関数。使用しなくても構いません。
@function LOCAL__GENERALICON__FontSize_FontSizePow($SCOPED__Size) {
$SCOPED__FontSize: 10px; @if $SCOPED__Size > 1 { @for $i from 1 through ($SCOPED__Size - 1) { $SCOPED__FontSize: $SCOPED__FontSize * 1.28; } }
@return $SCOPED__FontSize;
}
@mixin GENERALICON__FontSizeXL() {
&:before {
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(5);
}
}
@mixin GENERALICON__FontSizeL() {
&:before {
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(4);
}
}
@mixin GENERALICON__FontSizeM() {
&:before {
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(3);
}
}
@mixin GENERALICON__FontSizeS() {
&:before {
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(2);
}
}
@mixin GENERALICON__FontSizeXS() {
&:before {
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(1);
}
}
@mixin GENERALICON__BookmarkCommon() {
&:before {
font-size: $Subpanel-Icon_Size * .9;
top: .05em;
}
}
@mixin GENERALICON__AddABookmark() {
&:before {
content: "book";
}
}
@mixin GENERALICON__ABookmark() {
&:before {
content: "bookmark_border";
}
}
// ================================================================================
// + Special Icons
// --------------------------------------------------------------------------------
/* [ja]
* これ以降にあるアイコンはデフォルトではアイコンフォントや画像を使わず専用に生成された HTML 要素をスタイリングすることで図形を描画しているものです
* いずれも1行の @include でデフォルトのデザインを呼び出してあります
* その @include をコメントアウトして独自の CSS を記述することでたとえば背景画像を利用するなど独自のデザインに変更することができますいくつかのプロパティはリセットした方がよいかもしれません
* 対象となる要素の HTML ソースを添えてありますので独自デザインを行う際には参考にしてください例示ソース内部の改行インデントは実際の DOM には存在しません
* いずれの @mixin の展開先セレクタも添えられた HTML ソースの一番外側の要素です子要素には入れ子書式でスタイルを適用することができます
*/
// - "Toggle Panel" Icon in Menu
// --------------------------------------------------------------------------------
/* [ja]
* バーガーメニューアイコンのスタイルです
* 1つめの @mixin は通常時開くためのボタンのスタイルです
* 2つめの @mixin はパネルが開いているとき閉じるためのボタンのスタイルとして通常時のスタイルに追加上書きで適用されるスタイルです
*/
@mixin SPECIALICON__TogglePanel() {
@include DEFAULT__SPECIALICON__TogglePanel();
}
@mixin SPECIALICON__TogglePanel__Active() {
@include DEFAULT__SPECIALICON__TogglePanel__Active();
}
/*
<span class="bibi-icon bibi-icon-toggle-panel">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
*/
// - "View Xxxx" Icons in Subpanels
// --------------------------------------------------------------------------------
/* [ja]
* 右上のボタンから開く設定メニューの Subpanel 内にある3つの表示モードページ単位横スクロール縦スクロールを示すアイコンのスタイルです
* 1つめの @mixin 3つに共通して適用されるスタイルです
* 以降3つの @mixin 順にページ単位横スクロール縦スクロールアイコンのスタイルとして共通スタイルに追加上書きで適用されます
*/
@mixin SPECIALICON__View_Common() {
@include DEFAULT__SPECIALICON__View_Common();
}
@mixin SPECIALICON__ViewPaged() {
@include DEFAULT__SPECIALICON__ViewPaged();
}
@mixin SPECIALICON__ViewHorizontal() {
@include DEFAULT__SPECIALICON__ViewHorizontal();
}
@mixin SPECIALICON__ViewVertical() {
@include DEFAULT__SPECIALICON__ViewVertical();
}
/*
// SPECIALICON__ViewPaged
<span class="bibi-icon bibi-icon-view bibi-icon-view-paged">
<span class="bibi-shape bibi-shape-spreads bibi-shape-spreads-paged">
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
</span>
</span>
// SPECIALICON__ViewHorizontal
<span class="bibi-icon bibi-icon-view bibi-icon-view-horizontal">
<span class="bibi-shape bibi-shape-spreads bibi-shape-spreads-horizontal">
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
</span>
</span>
// SPECIALICON__ViewVertical
<span class="bibi-icon bibi-icon-view bibi-icon-view-vertical">
<span class="bibi-shape bibi-shape-spreads bibi-shape-spreads-vertical">
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
<span class="bibi-shape bibi-shape-spread">
<span class="bibi-shape bibi-shape-item"></span>
<span class="bibi-shape bibi-shape-item"></span>
</span>
</span>
</span>
*/