colette/src/styl/_elements/_icon.styl

A CSS and JS starter kit for 20 Minutes web projects

// Icon
//
// Button with icon and label.
//
// It can be styled by `btnSkin`
//
// .icon-inline - inline version
//
// Markup: icon.twig
//
// Styleguide: Elements.Icons
.icon
    --btn-color transparent
    --btn-text-color var(--color-base)

    _fontload($fontstack-secondary)
    display inline-block
    vertical-align middle
    border-radius .5em
    padding .2em .3em
    text-align center
    font-size .6875em
    font-weight bold
    color var(--btn-text-color)
    text-decoration none
    // fallback for IE because --btn-color is set loccaly here
    background-color transparent
    /* postcss-custom-properties: ignore next */
    background-color var(--btn-color)
    transition filter .2s ease

    &-picto
        _m(0 auto)
        display block
        width 2.5em
        height 2.5em
        fill currentColor

    &-label
        display block
        line-height 1em
        padding 0 .2em
        text-transform uppercase

    &:enabled
    &[href]
        &:hover
            filter brightness(90%) contrast(110%)

    &-inline
        text-align left

        .icon-picto
        .icon-label
            display inline-block
            vertical-align middle

        .icon-picto
            margin 0 .2em