-bd

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

全方向表示には -bd クラスを使用します。
単一方向にボーダーを表示する時は .-bd-{side}クラスで指定します。（ただし標準でサポートがあるのは、block, inline形式のみです。）
これらの細かなスタイルは --bdc, --bdw, --bds の3つの変数で指定します。
ブレイクポイントでボーダーの方向を変えたい場合、--bdw で調整します。

↓

css

:where(.-bd, [class*=' -bd-'], [class^='-bd-']) {
  --bds: solid;
  --bdw: 1px;
  --bdc: var(--divider);
  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-t {
  border-top-style: var(--bds);
}
.-bd-b {
  border-bottom-style: var(--bds);
}
.-bd-l {
  border-left-style: var(--bds);
}
.-bd-r {
  border-right-style: var(--bds);
}

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

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

↓

使用例

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

<Box bd p="10">
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
</Box>
<Box bd bds="dashed" bdw="4px" bdc="red" p="15">
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
</Box>

<div class="l--box -bd -p:10">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
<div class="l--box -bd -bds:dashed -p:15" style="--bdw: 4px; --bdc: var(--red)">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>

方向指定

一方向だけのボーダー指定をしたい場合、.-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>

<div class="l--box -bd-x-s -px:10 -bgc:base-2" style="--bdw: 2px">inline-start</div>
<div class="l--box -bd-x-e -px:10 -bgc:base-2" style="--bdw: 2px">inline-end</div>
<div class="l--box -bd-y-s -px:10 -bgc:base-2" style="--bdw: 2px">block-start</div>
<div class="l--box -bd-y-e -px:10 -bgc:base-2" style="--bdw: 2px">block-end</div>
<div class="l--box -bd-x -px:10 -bgc:base-2" style="--bdw: 2px">inline</div>
<div class="l--box -bd-y -px:10 -bgc:base-2" style="--bdw: 2px">block</div>

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

↓

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

border

リサイズ

<Box bd bdw="0 0 1px .5em" bds="dashed solid" bdc="var(--purple) var(--blue)" p="15">
  border
</Box>

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

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

↓

bdの例

border

リサイズ

<Box bd bdw={['1px', '3px', '6px']} p="15">
  border
</Box>

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

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

↓

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

Box

リサイズ

<Flex fxd={['column', 'row']}>
  <Box px="15" py="5">
    Box
  </Box>
  <Box px="15" py="5" bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>
    Box
  </Box>
  <Box px="15" py="5" bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>
    Box
  </Box>
</Flex>

<div class="l--flex -fxd:column -fxd_sm" style="--fxd_sm: row">
  <div class="l--box -px:15 -py:5">Box</div>
  <div class="l--box -px:15 -py:5 -bd-x-s -bd-y-s -bdw_sm" style="--bdw: 1px 0; --bdw_sm: 0 1px">Box</div>
  <div class="l--box -px:15 -py:5 -bd-x-s -bd-y-s -bdw_sm" style="--bdw: 1px 0; --bdw_sm: 0 1px">Box</div>
</div>