colette/src/styl/_components/_block.styl

A CSS and JS starter kit for 20 Minutes web projects

// Blocks
//
// Colette comes with basic styles for block elements. Gives a white background, a full width, a relative position and align the text to the left.
// Can provides optionnal title and footer. The SVG in the title is optionnal too.
// You can add a 'box' class to Block, it will give it a border and paddings. It's optionnal too.
// It can be modified by `-stretch`, it'll be useful to make it stretch in height.
//
// Markup: block.twig
//
// .block-default - default theme color
// .block-sport - default theme color
//
// Styleguide: Components.Block

// Block title and modifiers
//
// Markup:
// <p class="block-title {{ modifier_class }}">
//     <svg height="11" width="11"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-clock"></use></svg>
//     Example of a title
// </p>
//
// block-title-lined - title with bottom border instead of background color
//
// Weight: 1
//
// Styleguide: Components.Block.BlockTitle

// Block List with a pager
//
// Markup: block-list.twig
//
// Weight: 2
//
// Styleguide: Components.Block.BlockList

// Block List can be used with article cards
//
// Markup: block-list-with-cards.twig
//
// Weight: 3
//
// Styleguide: Components.Block.BlockList-with-Cards
$block-custom-color ?= var(--color-bg-base)
$block-header-minheight ?= _rem(36px)

$block-colors ?= merge($colors-themes, {
    highlight: $color-highlight,
})

.block
    display flex
    flex-direction column
    overflow hidden
    width 100%
    background-color var(--color-bg-primary)
    position relative
    text-align left

    &-title
        _p(.75 1 .5 1)
        min-height $block-header-minheight
        line-height _rem(19px)
        color var(--color-base-foreground)
        background-color var(--color-base)
        font-size _rem(14px)
        font-family $fontstack-headings
        font-weight bold
        text-transform uppercase

        svg
            width 1em
            height @width
            margin 0 .3em -.1em 0

        &-lined
            background-color transparent
            border-bottom 3px solid var(--color-base)
            color var(--color-base)

    &-list
        margin 0
        padding 0
        display flex
        flex-direction column
        justify-content stretch
        align-items stretch
        flex-grow 1
        list-style none
        width 100%
        border-spacing 0 1px

        &-item
            flex 1 1 auto // IE10 / IE11 hack for flexbox
            display flex
            align-items stretch

            &:nth-child(even)
                background-color var(--color-bg-base)

            &[aria-hidden=true]
                display none

            // change display of the child with stronger selector than simple class
            > :only-child
                display block // IE10 / IE11 hack for flexbox
                display flex
                width 100%
                align-items center

            > :link:hover
                background-color var(--color-bg-base)

    /* Block footer */
    &-footer
        {fontSecondary}
        _p(.5 1)
        line-height _rem(18px)
        background-color var(--color-bg-primary)
        overflow hidden // clearfix, don’t use `{clearfix}` here because `::after` invalid `:empty`
        color var(--color-base)

        &:empty
            display none

        a
            color inherit

        .linkIcon
        .pager-next:not(:disabled)
        .pager-prev:not(:disabled)
            svg
                color var(--color-base)

    /* Category theme */
    /* Applies theme color on title background and footer icons */
    for key, value in $block-colors
        $name = replace('theme-', '', key)
        $theme-color = value
        $theme-color-dark = lookup('$color-' + key + '-dark') || value
        $theme-shadow-color = _contrast_choose($color-white, $theme-color darken($theme-color, 20%) darken($theme-color, 40%) darken($theme-color, 60%) darken($theme-color, 80%))
        $theme-shadow-color-dark = _contrast_choose($color-white, $theme-color-dark darken($theme-color-dark, 20%) darken($theme-color-dark, 40%) darken($theme-color-dark, 60%) darken($theme-color-dark, 80%))

        &-{$name}
            .block-title
                background-color s('var(--color-%s)', unquote(key))
                color $color-white

                &
                [data-theme=light] &
                    text-shadow 0 0 3px $theme-shadow-color

                [data-theme=dark] &
                    text-shadow 0 0 3px $theme-shadow-color-dark

                &-lined
                    background-color transparent // overide theme for `.block-title`
                    border-bottom-color s('var(--color-%s)', unquote(key))
                    text-shadow none
                    color _contrast_choose($color-white, value darken(value, 10%) darken(value, 20%) darken(value, 30%) darken(value, 40%) $color-base)

                    &
                    [data-theme=light] &
                    [data-theme=dark] &
                        text-shadow none // stronger than previous selector

                    [data-theme=dark] &
                        color $theme-color-dark

            .block-footer
                .linkIcon
                .pager-next:not(:disabled)
                .pager-prev:not(:disabled)
                    svg
                        color value