<div class="other-20">
<div class="modal">
<p>モーダル1</p>
<div><button class="button">ボタン1</button></div>
</div>
<div class="modal" style="--type: disabled;">
<p>モーダル2</p>
<div><button class="button">ボタン2</button></div>
</div>
<div class="card">
<p>カード1</p>
<div><button class="button">ボタン3</button></div>
</div>
<div class="card" style="--type: disabled;">
<p>カード2</p>
<div><button class="button">ボタン4</button></div>
</div>
</div>
.other-20
.modal
p モーダル1
div
button.button ボタン1
.modal(style="--type: disabled;")
p モーダル2
div
button.button ボタン2
.card
p カード1
div
button.button ボタン3
.card(style="--type: disabled;")
p カード2
div
button.button ボタン4
/* No context defined. */
$BLOCK_NAME: '.other-20';
// 変数
#{ $BLOCK_NAME } {
.modal {
container-type: inline-size;
container-name: modal;
border: 1px solid #000;
padding: 24px;
margin-bottom: 24px;
background: color-mix(in srgb, black, white);
}
.card {
container-type: inline-size;
container-name: card;
border: 1px solid #000;
padding: 24px;
margin-bottom: 24px;
}
.button {
&::before {
content: '[通常]';
}
@container style(--type: disabled) {
opacity: 0.5;
&::before {
content: '[無効状態]';
}
}
@container modal (min-width: 800px) {
&::before {
content: '[modalが800px以上]';
}
}
@container card (min-width: 400px) {
&::before {
content: '[modalが400px以上]';
}
}
@container card (min-width: 900px) {
&::before {
content: '[modalが900px以上]';
}
}
}
}