Set Class

@lism-base層の中で定義される、ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのユーティリティクラスをset--{className}の形式で定義しています。

`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--cqUnit`

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

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

`set--hov`

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

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

`set--transition`

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

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

`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>

`set--gutter`

コンテンツの左右にあらかじめ定義済みの余白をつけることができるクラスです。
サイト全体で統一した余白量を左右に確保するためのものとして、padding系のユーティリティとは別のクラスとして用意しています。

クラス名	余白量	初期値
`set--gutter`	`--gutter-size`	`1.5rem`

↓

例

Lorem ipsum content…

リサイズ可能

<div class="set--gutter">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</div>