colette/src/styl/_@blocks/_block.styl

A CSS and JS starter kit for 20 Minutes web projects

// @blocks: Block elements
//
// Styleguide: @blocks.Block

// {clearfix}
//
// Adds a clearfix behavior on containers that have floating children.
//
// **Usage**
// ```stylus
// .foo
//     {clearfix}
// ```
// is equivalent to
// ```stylus
// .foo
//     &:after
//         content ''
//         display block
//         height 0
//         clear both
//         visibility hidden
// ```
//
// Styleguide: @blocks.Block.clearfix
clearfix = @block
    &:after
        content ''
        display block
        height 0
        clear both
        visibility hidden

// {outline}
//
// Add a style on the focused outline.
//
// **Usage**
// ```stylus
// .foo
//     {outline}
// ```
// is equivalent to
// ```stylus
// .foo
//    outline dashed thin var(--color-secondary)
// ```
//
// Styleguide: @blocks.Block.outline
outline = @block
    outline dotted thin var(--color-secondary)

// {fullWidth}
//
// Streches an element to match the width of its parent.
//
// **Usage**
// ```stylus
// .foo
//     {fullWidth}
// ```
// is equivalent to
// ```stylus
// .foo
//    display block
//    width 100%
//    height auto
// ```
//
// Styleguide: @blocks.Block.fullWidth
fullWidth = @block
    display block
    width 100%
    height auto // overrides images `height` attribute|property

// {inlined}
//
// Makes an element display inline.
// If applied to a `<ul>` or `<ol>` tag, all its `<li>` children will be displayed inline as well.
//
// **Usage**
// ```stylus
// .foo
//     {inlined}
// ```
// is equivalent to
// ```stylus
// .foo
//    display inline
//
//        > li
//            display inline
// ```
//
// Styleguide: @blocks.Block.inlined
inlined = @block
    display inline

    > li
        display inline