Lism CSS
検索

-bd

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

  • 全方向表示には -bd クラスを使用します。
  • 単一方向にボーダーを表示する時は -bd-{side}クラスで指定します。block / inline 方向に加えて、top / right / bottom / left 方向もサポートしています。
  • これらの細かなスタイルは --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-s {
  border-inline-start-style: var(--bds);
}
.-bd-e {
  border-inline-end-style: var(--bds);
}
.-bd-bs {
  border-block-start-style: var(--bds);
}
.-bd-be {
  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.

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>

方向指定

一方向だけのボーダー指定をしたい場合、-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-s bdw="2px" px="10" bgc="base-2">inline-start</Box>
<Box bd-e bdw="2px" px="10" bgc="base-2">inline-end</Box>
<Box bd-bs bdw="2px" px="10" bgc="base-2">block-start</Box>
<Box bd-be 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="15">
  border
</Box>

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

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

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

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

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

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

© Lism CSS. All rights reserved.

目次