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

-bd

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

  • 全方向表示には -bd クラスを使用します。
  • 単一方向にボーダーを表示する時は .-bd-{side}クラスで指定します。（ただし標準でサポートがあるのは、block, inline形式のみです。）
  • これらの細かなスタイルは --bdc, --bdw, --bds の3つの変数で指定します。
  • ブレイクポイントでボーダーの方向を変えたい場合、--bdw で調整します。
↓
css
:where(.-bd,[class*='-bd-']) {
  --bds: solid;
  --bdw: 1px;
  --bdc: currentColor;
}
:where(.-bd,[class*='-bd-']) {
  border-width: var(--bdw);
  border-color: var(--bdc);
}
.-bd { border-style: var(--bds) }
.-bd-x { border-inline-style: var(--bds) }
.-bd-y { border-block-style: var(--bds) }
.-bd-x-s { border-inline-start-style: var(--bds) }
.-bd-x-e { border-inline-end-style: var(--bds) }
.-bd-y-s { border-block-start-style: var(--bds) }
.-bd-y-e { border-block-end-style: var(--bds) }

これに合わせて、コンポーネントでも bd, bd-{side} 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. 

<Box bd bdc='line' p='10'>
  <Dummy length='s'/>
</Box>
<Box bd bds='dashed' bdw='4px' bdc='red' p='20'>
  <Dummy length='s'/>
</Box>

方向指定

Section titled “方向指定”

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

↓
4方向の指定
-t: Top
-r: Right
-b: Bottom
-l: Left 
<Box bd-t px='10'>-t: Top</Box>
<Box bd-r px='10'>-r: Right</Box>
<Box bd-b px='10'>-b: Bottom</Box>
<Box bd-l px='10'>-l: Left</Box>
↓
block, inline方向での指定
inline-start
inline-end
block-start
block-end
inline
block 
<Box bd-x-s bdw='2px' px='10' bgc='base-2'>inline-start</Box>
<Box bd-x-e bdw='2px' px='10' bgc='base-2'>inline-end</Box>
<Box bd-y-s bdw='2px' px='10' bgc='base-2'>block-start</Box>
<Box bd-y-e bdw='2px' px='10' bgc='base-2'>block-end</Box>
<Box bd-x bdw='2px' px='10' bgc='base-2'>inline</Box>
<Box bd-y bdw='2px' px='10' bgc='base-2'>block</Box>

複数方向のボーダーそれぞれのスタイルがバラバラの場合、.-bdクラスと --bdw --bds --bdc を組み合わせて次のように指定できます。

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

border

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

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

Section titled “bdwをブレイクポイントで切り替える”

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

↓
bdの例
border
リサイズ可能 
<Box bd bdw={['1px','3px','6px']} p='20'>border</Box>

ボーダーの方向を切り替える

Section titled “ボーダーの方向を切り替える”

bdwをブレイクポイントで切り替えることで、ボーダーの方向を切り替えることができます。

↓
ボーダーの方向を切り替える
Box
Box
Box
リサイズ可能 
<Flex fxd={['column','row']}>
  <Box px='20' py='5'>Box</Box>
  <Box px='20' py='5' bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>Box</Box>
  <Box px='20' py='5' bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>Box</Box>
</Flex>