_admin-balloon.scss
3 years ago
_admin-block-manager.scss
11 months ago
_admin-breadcrumb.scss
2 years ago
_admin-common.scss
3 years ago
_admin-custom-block-style.scss
3 years ago
_admin-custom-format.scss
3 years ago
_admin-import-export.scss
5 days ago
_admin-margin.scss
3 years ago
admin-merge.scss
2 years ago
_admin-import-export.scss
74 lines
| 1 | .import_export_add_modal_button_area { |
| 2 | position: sticky; |
| 3 | bottom: 0; |
| 4 | } |
| 5 | |
| 6 | /* ========================================================================== |
| 7 | エクスポート欄（「すべて切り替える」＋個別チェックボックス一覧） |
| 8 | ========================================================================== */ |
| 9 | |
| 10 | // 「すべて切り替える」は個別� |
| 11 | 目と同列ではなく群� |
| 12 | �体を操作するコントロールのため、 |
| 13 | // 個別� |
| 14 | 目群との間だけ区切り線を� |
| 15 | �れて階層を分ける |
| 16 | .import_export_toggle_all { |
| 17 | padding-bottom: 12px; |
| 18 | margin-bottom: 24px; |
| 19 | border-bottom: 1px solid #c5c5c5; |
| 20 | } |
| 21 | |
| 22 | // 左マージンの解除・list-style の解除は vk-admin の ul.no-style（JSX側で付与） |
| 23 | // が� |
| 24 | 当する。ここではブラウザ既定の ul 下マージン（margin-block-end: 1em） |
| 25 | // だけを打ち消す |
| 26 | .import_export_list { |
| 27 | margin-bottom: 0; |
| 28 | } |
| 29 | |
| 30 | .import_export_list_item { |
| 31 | // wp-admin の `li, dd { margin-bottom: 6px }` を打ち消し、� |
| 32 | 目間の |
| 33 | // 余白は下の隣接セレクタ1箇所だけで決まるようにする |
| 34 | margin-bottom: 0; |
| 35 | |
| 36 | // margin-bottom + :last-child ではなく、隣接セレクタで前後の� |
| 37 | 目間 |
| 38 | // だけに余白を付ける（余白の付け方を1流儀に統一し、将来 li 以外の |
| 39 | // 要素が増えても静かに崩れないようにする） |
| 40 | + .import_export_list_item { |
| 41 | margin-top: 12px; |
| 42 | } |
| 43 | |
| 44 | // クリック領域を確保しつつ、チェックボックスとラベルの近接（標準ギャップ）は変更しない |
| 45 | .components-checkbox-control__label { |
| 46 | padding: 4px 0; |
| 47 | } |
| 48 | |
| 49 | // ラベルに padding を足すとラベルのボックスだけ縦に伸び、CheckboxControl |
| 50 | // � |
| 51 | 部の HStack（align-items: flex-start）によってチェックボックスと |
| 52 | // ラベルの文字が上下にズレる。block-manager と同じく input 側を |
| 53 | // 中央揃えにして解消する（options-css/_admin-block-manager.scss 参� |
| 54 | �）。 |
| 55 | .components-checkbox-control__input-container { |
| 56 | align-self: center; |
| 57 | } |
| 58 | } |
| 59 | |
| 60 | /* ========================================================================== |
| 61 | インポート欄（設定グループごとの囲み） |
| 62 | ========================================================================== */ |
| 63 | |
| 64 | // .import_export_section の後には常に .import_export_add_modal_button_area |
| 65 | // （送信ボタン領域）が続くため margin-bottom + :last-child では最後の1件を |
| 66 | // 判定できない。上の .import_export_list_item と同じく隣接セレクタで統一する |
| 67 | .import_export_section + .import_export_section { |
| 68 | margin-top: 24px; |
| 69 | } |
| 70 | |
| 71 | .import_export_detail_area { |
| 72 | margin: 0 0 calc(8px) 2em; |
| 73 | } |
| 74 |