コンテンツにスキップ
Lism UI

border

Lismでは、border系の指定が少し特殊になっています。

全方向用の-bd:クラスと、特定の方向だけにボーダーを表示するための.-bd\:{side}クラスがあります。
いずれも、細かなボーダースタイルは --bdc, --bdw, --bds の3つの変数で管理します。

↓
css
:where([class*='-bd:']) {
  --bds: solid;
  --bdw: 1px;
  --bdc: currentColor;
  --bd: var(--bdw) var(--bds) var(--bdc);
}
.-bd\: {
  border-style: var(--bds);
  border-width: var(--bdw);
  border-color: var(--bdc);
}
.-bd\:l { border-left: var(--bd) }
.-bd\:r { border-right: var(--bd) }
.-bd\:t { border-top: var(--bd) }
.-bd\:b { border-bottom: var(--bd) }
// ...

これに合わせて、コンポーネントでも bd, bdc, bdw, bds がそれぞれ指定できるようになっており、bdc, bdw, bds はCSS変数が出力されるようになっています。

また、bdwはブレイクポイント指定も可能です。

↓
使用例

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 

<Box bd bdc='red' bds='dashed' p='20'>
  <Dummy length='s'/>
</Box>
<Box bd='l' bdc='blue' bdw='0.4em' p='20'>
  <Dummy length='s'/>
</Box>

方向指定

一方向だけのボーダー指定をしたい場合、.-bd:の派生クラスを使います。

↓
方向指定
left
right
top
bottom 
<Box bd='l' px='10'>left</Box>
<Box bd='r' px='10'>right</Box>
<Box bd='t' p='10'>top</Box>
<Box bd='b' p='10'>bottom</Box>
↓
block, inline方向での指定
inline-start
inline-end
block-start
block-end 
<Box bd='is' p='10'>inline-start</Box>
<Box bd='ie' p='10'>inline-end</Box>
<Box bd='bs' p='10'>block-start</Box>
<Box bd='be' p='10'>block-end</Box>

コンポーネントでは、bdの値を,区切りで複数指定することで複数のクラスを出力できます。

↓
,区切りで複数指定
inline-start, bottom
リサイズ可能 
<Box bd='is,b' bdc='red' p='10'>inline-start, bottom</Box>

.-bd\:クラスが border-style border-width border-color を分割指定していることにより、以下のようなボーダーを出力することもできます。

↓
bdw,bds,bdcそれぞれの方向指定

border

リサイズ可能 
<Box bd bdw='0 0 1px .5em' bds='dashed solid' bdc='var(--purple) var(--blue)' p='20'>
  border
</Box>

bdwをブレイクポイントで切り替える

bdwは、ブレイクポイント指定に対応しています。

↓
bdの例
border
リサイズ可能 
<Box bd bdw={['1px','3px','6px']} p='20'>border</Box>
↓
ボーダーの方向を切り替える

Box

Box

Box

Box

リサイズ可能 
<Flex fxd={['column','row']} bd bdc='blue'>
  <FlexItem fx='1' bd bdw={['0 0 1px 0','0 1px 0 0']} bdc='inherit' p='20'>
    Box
  </FlexItem>
  <FlexItem fx='1' bd bdw={['0 0 1px 0','0 1px 0 0']} bdc='inherit' p='20'>
    Box
  </FlexItem>
  <FlexItem fx='1' bd bdw={['0 0 1px 0','0 1px 0 0']} bdc='inherit' p='20'>
    Box
  </FlexItem>
  <FlexItem fx='1' p='20'>
    Box
  </FlexItem>
</Flex>

任意のborderをインライン出力する方法

bdに直接値を指定することももちろん可能です。

↓
bdの例
border
リサイズ可能 
<Box bd='solid 1px #555' p='10'>border</Box>