List Title
タイトルのインデントを付けたリスト
.mod_listTitle {border-spacing: 0;}
.mod_listTitle-list {text-align: left;}
.mod_listTitle-list:not(:last-child) {height: 35px;}
.mod_listTitle-ti {
height: 20px;
padding-right: 16px;
font-weight: bold;
white-space: nowrap;
}
.mod_listTitle-ti::before {
height: 20px;
aspect-ratio: 1/1;
margin-right: 8px;
text-align: center;
font-size: var(--typo-min);
font-weight: normal;
border-radius: var(--radius-round);
background: var(--primary-main);
color: var(--white-main);
display: inline-block;
}
.mod_listTitle.mark .mod_listTitle-ti::before {
content: '';
height: 12px;
}
.mod_listTitle.num .mod_listTitle-list {counter-increment: num;}
.mod_listTitle.num .mod_listTitle-ti::before {content: counter(num);}
.mod_listTitle-ti[data-ico]::before {
content: attr(data-ico);
font-family: 'Material Icons';
}
@media (770px >= width) {
[data-card="xm"]:has(.mod_listTitle) {padding: 12px 8px 12px 10px;}
.mod_listTitle-ti {padding-right: 8px;}
.mod_listTitle-ti::before {margin-right: 6px;}
}
使い方
リストといいながらテーブル使ってます。
デザイン的にも構造的にもTableとかTable Fit使ったほうがいい。どうしてもな時用
以下はListと同じ仕様。
頭の記号の色は[var(--primary-dark)]を指定しています。
+-ul.mod_list-+に+-.num-+クラスを付けることで頭の記号に数字が入ります。
+-.mod_list-li-+に[data-ico]属性を入れることで、入力値のアイコンを表示します。
ナンバリングは{content: counter(num, decimal-leading-zero);}とすることで、01,02となる。