SimenB/stylint

/**
 * All extends, code bits that are reused a lot, don't generate extra css
 * mostly alphabetical, some re-jiggering cause of dependencies
*/

// ambroise defaults, no size set
$ambroise
    font-family $ambroise
    font-style normal
    font-weight 400
    text-transform uppercase

    em,
    cite
        display inline-block
        font-family inherit
        font-style inherit
        line-height inherit
        transform skew( -5deg ) // dont have italic font...


// default ambroise header (header tags in a post, card headers)
$ambroise-hdr
    @extends $ambroise
    font-size 45px
    line-height 40px

    .card &
        line-height 37px


// default body copy
$body-copy
    font-family $exchange
    font-size 18px
    line-height 28px

    em,
    cite
        font-family $exchange-ital
        font-style normal


// brandon defaults
$brandon
    font-family $brandon
    font-style normal
    font-weight 400

    em,
    cite
        display inline-block
        font-family inherit
        font-style inherit
        line-height inherit
        transform skew( -5deg ) // dont have italic font...


// default button and input styles, appliable anywherez
$button-base
    background $gray-5
    border 0
    border-radius 3px
    box-shadow none
    color $white
    font-family $oxide
    font-size 10px
    letter-spacing .08em
    padding 11px $gutter-med 9px
    transition background $fast $timing
    &:hover
        background $black


/**
 * default card style. make unto antyhing a card
 * 1 fixes box-shadow not working on retina, ios8
 */
$card
    background $white
    border-radius 1px // 1
    border-top 3px solid $black
    box-shadow $depth-1
    margin-bottom $gutter-med
    position relative
    width 100%


// center a thing safely (without messing up top or bottom margin)
$center
    display block
    margin-left auto
    margin-right auto


// extendable clearfix
$clearfix
    clear both
    display block
    &:before
    &:after
        content ''
        display table

    &:after
        clear both


// italic exchange
$exchange-italic
    font-family $exchange-ital
    font-style normal


// small exchange spec for smart cards
$exchange-sm
    color $gray-6
    font-family $exchange
    font-size 13px
    line-height 16px

    em,
    cite
        @extends $exchange-italic


// hopefully temp extension for nav icons
$icon
    background-repeat no-repeat
    display block
    overflow hidden


// blue underlines under text
$link-underline
    border-bottom 3px solid $light-blue
    box-shadow inset 0 -5px 0 $light-blue
    color inherit
    transition background $fast $timing
    &:hover,
    &:focus,
    &:active
        background $light-blue


$link-underline-sm
    border-bottom 1px solid $light-blue
    box-shadow inset 0 -5px 0 $light-blue
    color inherit
    transition background $fast $timing
    &:hover,
    &:focus,
    &:active
        background $light-blue


// dark blue underline for dark bg
$link-underline-dark
    border-bottom 3px solid $dark-blue
    box-shadow inset 0 -5px 0 $dark-blue
    color inherit
    transition background $fast $timing
    &:hover,
    &:focus,
    &:active
        background $dark-blue


$link-underline-dark-sm
    border-bottom 1px solid $dark-blue
    box-shadow inset 0 -4px 0 $dark-blue
    color inherit
    transition background $fast $timing
    &:hover,
    &:focus,
    &:active
        background $light-blue


// remove list styles from article lists, the extend version
$list-none
    list-style none

    li:before
        content ''
        margin 0
        width 0


// oxide defaults
$oxide
    font-family $oxide
    font-style normal
    font-weight 400
    letter-spacing .08em
    text-transform uppercase

    em,
    cite
        font-family inherit
        font-style italic
        line-height inherit


// first 3 words in an article usually
$lede
    @extends $oxide
    font-size 14px
    line-height 14px


/**
 * slightly out of order cause dependency on oxide
 * meta text (time, bylines, sections, tags, all metadata basically)
 */
$meta
    @extends $oxide
    color $gray-5
    display block
    font-size 10px
    line-height 12px
    transition color $fast $timing
    &:empty
        display none

    a:hover
        color black


// remove blue underline under links
$no-underline
    border-bottom 0
    box-shadow none
    outline 0

    &.no-hover:hover
        background none


// well its proxima
$proxima
    font-family $proxima
    font-style normal
    font-weight 400

    a
        color inherit

    em,
    cite
        font-family inherit
        font-style italic
        line-height inherit


// captions, dependent on proxima
$caption
    @extends $proxima
    color $gray-4
    font-size 14px
    line-height 20px


// tungsten is the big loud angry typeface
$tungsten
    font-family $tungsten
    font-size 45px
    font-style normal
    font-weight normal
    line-height 36px
    text-transform uppercase

    em,
    cite
        display inline-block
        font-family inherit
        font-style inherit
        line-height inherit
        transform skew( -5deg )

    // this could be better... @TODO
    .text &
        color $gray-5
        margin-top 2px // same for you


/**
 * Hide element visually, but leave it available for screenreaders
 * anything that gets toggled but needs to be accessible
 * is a good candidate for this instead of display none
 */
$visually-hidden
    border 0
    clip rect( 0 0 0 0 )
    height 1px
    margin -1px
    overflow hidden
    padding 0
    position absolute
    width 1px