Setter Class

lism.baseレイヤーの後半で定義される、トークンを再定義したり、変数セットなどを行うクラス群を set-{className} の形式で定義しています。

Lism では、これらを Setter Class と呼びます。

`set-plain`

主要スタイルをリセットするためのクラスです。

↓

set-plainをbuttonに適用する例

<div class='l--flex -g:20 -ff:mono'>
  <button class='set-plain'>button</button>
</div>

`set-shadow`

.set-shadow クラスを指定した要素では、シャドウを構成する--bxsh--変数が再定義されます。

ここで--shc変数を上書きすることで、シャドウの色味を調整したりすることが可能です。

↓

シャドウの上書き例

Default:

Box

set-shadow で変数を上書きした例:

Box

<div class="set-shadow l--flex -g:30" style="--shc:hsl(200 50% 50% / 20%)">
  <div class="l--box -bxsh:20 -p:30 -bdrs:20">Box</div>
  <div class="l--box -bxsh:40 -p:30 -bdrs:20">Box</div>
</div>

`set-bp`

特定のブレイクポイント以上でのみスタイルを適用させるためのユーティリティクラスです。ブレイクポイント対応していないプロパティを変化させたい時のハック的手段として活用できます。

↓

smサイズ以上でテキストカラーを赤に変える例

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

リサイズ可能

<div class="set-bp l--box -p:20" style="color:var(--_is_sm) red;">
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
</div>

<Box className='set-bp' p='20' style={{'color': 'var(--_is_sm) red;'}}>
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
</Box>

`set-hov`

ホバースタイル管理用のCSS変数をセットします。主に子要素のホバースタイルを制御するために使用します。

活用例は hoverの解説ページを参照してください。

`set-transition`

専用の変数を用いて、transitionプロパティをセットします。

活用例は hoverの解説ページを参照してください。

`set-cqUnit`

cqw単位でのスケーリングを行うためのクラスです。

フォントサイズのclamp()をvwではなくcqwで再計算し、スペーシングトークン・・ハーフレディングの単位も改めて再定義します。

`set-snap`

scroll-snap-系のプロパティをCSS変数でセットできるようにします。

`set-innerRs`

親要素の角丸とPaddingの値から、内側の要素の角丸(--bdrs--inner)を計算するユーティリティクラスです。親要素(set--innerRs)の p(--p), bdrs(--bdrs) を元に計算します。（これらの指定が必須となります。）

計算された--bdrs--innerをセットするには、子要素で-bdrs:innerを指定します。

↓

使用例

<Lism className='set-innerRs' p='15' bd bxsh='20' bdrs='50'>
  <Frame bdrs='inner' ar='og'>
    <img src='https://cdn.lism-css.com/img/u-5.jpg' width='1920' height='1280' alt='' />
  </Frame>
</Lism>

<div class="set-innerRs -p:15 -bd -bxsh:20 -bdrs:50">
  <div class="l--frame -bdrs:inner -ar:og">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" width="1920" height="1280" alt="" />
  </div>
</div>

p, bdrsはブレイクポイントで値を変えても変数管理されているため、set-innerRsの角丸もレスポンシブ対応できます。

↓

使用例

Example

リサイズ可能

<Lism p={[10, 20, 30]} bd bdw='2px' bdrs={['40',null,'50']} class='set-innerRs'>
  <Lism bd p='15' bdrs='inner'>
    Example
  </Lism>
</Lism>