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

A CSS and JS starter kit for 20 Minutes web projects

// @blocks: Text elements
//
// Styleguide: @blocks.Text

// {fontSecondary}
//
// Assigns the properties of the `.font-secondary` class to an element.
//
// **Usage**
// ```stylus
// .foo
//     {fontSecondary}
// ```
// is equivalent to
// ```stylus
// .foo
//    font-family $fontstack-secondary
//    font-weight bold
//    font-size _rem(11px)
//    text-transform uppercase
// ```
//
// Styleguide: @blocks.Text.fontSecondary
fontSecondary = @block
    _fontload($fontstack-secondary)
    font-weight bold
    font-size _rem(11px)
    text-transform uppercase

// {listPosOutside}
//
// Override the default positionning of the `list-style-position: outside`.
//
// **Usage**
// ```stylus
// .foo
//     {listPosOutside}
// ```
// is equivalent to
// ```stylus
// .foo
//    &
//    li
//        list-style-position inside
//        padding-left 1em
//        text-indent -1em
// ```
//
// Styleguide: @blocks.Text.listPosOutside
listPosOutside = @block
    &
    li
        list-style-position inside
        padding-left 1em
        text-indent -1em