style.scss
122 lines
| 1 | /*-------------------------------------------*/ |
| 2 | /* core/navigation : メニュー� |
| 3 | 目の説明を表示 */ |
| 4 | /* Show menu item description option */ |
| 5 | /*-------------------------------------------*/ |
| 6 | |
| 7 | /* |
| 8 | * コアは `.wp-block-navigation .wp-block-navigation-item__description { display: none; }` |
| 9 | * （詳細度 0,2,0）で説明を非表示にしている。 |
| 10 | * ブロック単位クラスを最外殻 `.wp-block-navigation` に付与した上で、 |
| 11 | * `.wp-block-navigation.vk-navigation-show-description`（詳細度 0,3,0）で |
| 12 | * 確実に上書きする。!important は使わない。 |
| 13 | * |
| 14 | * Core hides the description with `.wp-block-navigation .wp-block-navigation-item__description` |
| 15 | * (specificity 0,2,0). We override it with a higher specificity selector |
| 16 | * (0,3,0) scoped to the block that has the toggle enabled, without !important. |
| 17 | */ |
| 18 | .wp-block-navigation.vk-navigation-show-description { |
| 19 | /* |
| 20 | * 説明あり（2行）と説明なし（1行）の� |
| 21 | 目が混在すると、� |
| 22 | 目ごとに |
| 23 | * 高さが変わる。コアは各� |
| 24 | 目（li）� |
| 25 | でサブメニューの矢印を縦中央に置くため、 |
| 26 | * � |
| 27 | 目の高さがバラつくと矢印の縦位置も� |
| 28 | 目ごとにズレてしまう。 |
| 29 | * コンテナを align-items: stretch にして� |
| 30 | �� |
| 31 | 目の高さを最も高い� |
| 32 | 目に |
| 33 | * そろえ、矢印の縦位置を安定させる。 |
| 34 | * （height: stretch ではなくコンテナ側の align-items を使う。後� |
| 35 | は |
| 36 | * クロスブラウザで安定し、モバイルのオーバーレイ表示時はコアが |
| 37 | * align-items を上書きするため、この指定は横並び時のみ効く。） |
| 38 | * Items with a description (2 lines) and without (1 line) end up at |
| 39 | * different heights. Core vertically centers the submenu arrow inside each |
| 40 | * item, so mismatched item heights make the arrow position drift per item. |
| 41 | * Stretch all items to the tallest one's height so the arrow stays put. |
| 42 | * (Use the container's align-items, not height: stretch, for cross-browser |
| 43 | * stability; in the mobile overlay core overrides align-items, so this only |
| 44 | * affects the horizontal layout.) |
| 45 | */ |
| 46 | .wp-block-navigation__container { |
| 47 | align-items: stretch; |
| 48 | } |
| 49 | /* |
| 50 | * 高さをそろえても、ラベルは引き続き上端でそろえたい。さらに、� |
| 51 | 目に背景色や |
| 52 | * 枠線を付けるテーマ（ピル型・ボタン型メニュー）でも、説明なし� |
| 53 | 目の背景や |
| 54 | * クリック範囲が隣の説明あり� |
| 55 | 目より低くならないよう、コンテンツ（<a>）自体を |
| 56 | * � |
| 57 | 目いっぱいに伸ばす。<a> はブロック要素なので、高さを伸ばしてもラベルの |
| 58 | * テキストは上端から流れ、ラベルは上にそろったままになる。 |
| 59 | * Keep labels aligned to the top, and also stretch the content (<a>) to fill |
| 60 | * the item height so that—on themes that give menu items a background or |
| 61 | * border (pill/button menus)—a description-less item's background and click |
| 62 | * area don't come out shorter than its neighbors. The content is a block |
| 63 | * element, so stretching its height keeps the label flowing from the top. |
| 64 | */ |
| 65 | .wp-block-navigation__container |
| 66 | > .wp-block-navigation-item |
| 67 | > .wp-block-navigation-item__content { |
| 68 | align-self: stretch; |
| 69 | } |
| 70 | /* |
| 71 | * 矢印（サブメニューインジケーター）は� |
| 72 | 目の縦中央に固定する。 |
| 73 | * 上でコンテンツ（<a>）を stretch にしたが、矢印は引き伸ばさず中央へ置き、 |
| 74 | * 説明あり／なしのどちらの� |
| 75 | 目でも矢印が同じ高さに来るようにする。 |
| 76 | * Pin the submenu arrow to the vertical center of the item. The content (<a>) |
| 77 | * is stretched above, but the arrow should stay centered (not stretched) so it |
| 78 | * lands at the same height whether or not the item has a description. |
| 79 | */ |
| 80 | .wp-block-navigation__container |
| 81 | > .wp-block-navigation-item |
| 82 | > .wp-block-navigation__submenu-icon { |
| 83 | align-self: center; |
| 84 | } |
| 85 | .wp-block-navigation-item__description { |
| 86 | display: block; |
| 87 | /* |
| 88 | * 説明文は副次� |
| 89 | 報なのでラベルより一回り小さくし、ラベルとの間に余白を取る。 |
| 90 | * 色は固定せずテーマの文字色（currentColor）を継承させたうえで、 |
| 91 | * opacity で少しだけ弱め、ラベルとの主従（� |
| 92 | 報の優� |
| 93 | �順位）を表す。 |
| 94 | * 固定色ではなく opacity にすることで、暗背景テーマでも文字色に追従する。 |
| 95 | * The description is secondary info: render it a bit smaller than the label |
| 96 | * and add spacing from the label. No fixed color is set so it inherits the |
| 97 | * theme text color (currentColor); opacity slightly de-emphasizes it to |
| 98 | * express the label/description hierarchy while still following the theme. |
| 99 | */ |
| 100 | font-size: 0.8em; |
| 101 | margin-top: 0.25em; |
| 102 | opacity: 0.85; |
| 103 | } |
| 104 | /* |
| 105 | * サブメニュー（ドロップダウン）� |
| 106 | の� |
| 107 | 目。コアは |
| 108 | * `...__submenu-container > ... > .wp-block-navigation-item__content` |
| 109 | * を display:flex（既定 row）にしているため、説明が出るとラベルの |
| 110 | * 右隣に横並びになってしまう。縦積み（flex-direction: column）に戻し、 |
| 111 | * 左寄せにして自然に読めるようにする。 |
| 112 | * Submenu (dropdown) items. Core sets the submenu item content to |
| 113 | * display:flex (default row), so the description ends up beside the label. |
| 114 | * Restore vertical stacking and left-align it so the dropdown reads naturally. |
| 115 | */ |
| 116 | .wp-block-navigation__submenu-container .wp-block-navigation-item__content { |
| 117 | flex-direction: column; |
| 118 | align-items: flex-start; |
| 119 | text-align: left; |
| 120 | } |
| 121 | } |
| 122 |