colette/src/styl/_components/_box.styl

A CSS and JS starter kit for 20 Minutes web projects

// Box
//
// A `box` is a skin for block present on the body background.
// It can be used on a simple `div` on a component block or preview (on homepage or listing pages) or on the content container (content view).
//
// .box-borderless - box without white border
// .box-lined - box with left colored border (can use `border-color-…` helpers)
//
// Markup: box.twig
//
// Styleguide: Components.Box

$box-edge-color ?= alpha($color-black, .02)
$box-edge-color-dark ?= alpha($color-white, .15)

/:root
/[data-theme=light]
/[data-theme] [data-theme=light]
    --box-edge-color $box-edge-color

/[data-theme=dark],
/[data-theme] [data-theme=dark]
    --box-edge-color $box-edge-color-dark

.box
    overflow hidden
    border-radius $radius
    border 1px solid var(--color-bg-primary)
    background-color var(--color-bg-primary)
    box-shadow 0 0 0 _rem(1px) var(--box-edge-color), 0 _rem(1px) _rem(4px) _rem(1px) rgba($color-black, .06)

    &-borderless
        border-width 0

    &-lined
        border-width 0
        border-left 5px solid currentColor