blog/_src/_assets/styl/_kremalicious/mixins.styl

//
// kremalicious3
// --------------
// Mixins
//


// Micro Clearfix
/////////////////////////////////////

clearfix()
    &:before,
    &:after
        content: " "
        display: table
    &:after
        clear: both

.clearfix
    clearfix()


// Floats
/////////////////////////////////////

alignright()
    float: right

alignleft()
    float: left

.alignright
    alignright()

.alignleft
    alignleft()


// Centering Blocks
/////////////////////////////////////

aligncenter()
    display: block
    margin-left: auto
    margin-right: auto

.aligncenter
    aligncenter()


// Centering Text
/////////////////////////////////////

textcenter()
    text-align: center

.textcenter
    textcenter()


// Toggling content
/////////////////////////////////////

// Hide from both screenreaders and browsers: h5bp.com/u
hide()
    display: none !important
    visibility: hidden

show()
    display: block
    visibility: visible

.hide
    hide()

.show
    show()

// Hide only visually, but have it available for screenreaders: h5bp.com/v
visuallyhidden()
    border: 0
    clip: rect(0 0 0 0)
    height: 1px
    margin: -1px
    overflow: hidden
    padding: 0
    position: absolute
    width: 1px

    // Extends the .visuallyhidden class to allow the
    // element to be focusable when navigated to via the keyboard: h5bp.com/p
    &.focusable:active,
    &.focusable:focus
        clip: auto
        height: auto
        margin: 0
        overflow: visible
        position: static
        width: auto

.visuallyhidden
    visuallyhidden()

// Hide visually and from screenreaders, but maintain layout
.invisible
    visibility: hidden


// CSS image replacement
/////////////////////////////////////

.ir,
.hide-text
    font: 0/0 a
    color: transparent
    text-shadow: none
    background-color: transparent
    border: 0


// Text overflow
/////////////////////////////////////

ellipsis()
    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap

.ellipsis
    ellipsis()


// Default transition
/////////////////////////////////////

transition()
    transition: all ease-in-out .15s

.transition
    transition()

// Dashed Dividers
/////////////////////////////////////

.divider-top,
.divider-bottom
    position: relative

    &:before
        content: ""
        position: absolute
        left: 0
        height: 1px

.divider-top
    border-top: 1px dashed #afc3cb
    padding-top: 1em

    &:after
        content: ""
        position: absolute
        left: 0
        height: 1px
        top: 0
        width: 100%
        border-top: 1px dashed #fff

.divider-bottom
    border-bottom: 1px dashed #afc3cb
    padding-bottom: 1em

    &:before
        bottom: -2px
        width: 100%
        border-bottom: 1px dashed #fff

// Heading band
/////////////////////////////////////

.heading-band
    display: inline-block
    clear: both
    background: rgba(255,255,255,.55)
    padding: ($spacer/2) $spacer ($spacer/2) 100%
    margin-left: -100%


// Lead paragraph
/////////////////////////////////////

.lead
    font-size: $font-size-large
    line-height: ($spacer*1.15)


// Layout breakout
/////////////////////////////////////

breakoutviewport()
    margin-left: calc(-50vw + 50%)
    margin-right: calc(-50vw + 50%)

    @media $screen-md
        breakoutviewport--base()

breakoutviewport--base()
    margin-left: -($gutter-space * 4)
    margin-right: -($gutter-space * 4)

breakoutviewport--full()
    margin-left: calc(-50vw + 50%)
    margin-right: calc(-50vw + 50%)

.breakoutviewport
    breakoutviewport()

.breakoutviewport--base
    breakoutviewport--base()

.breakoutviewport--full
    breakoutviewport--full()

// Button sizing
/////////////////////////////////////

button-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius)
    padding: padding-vertical padding-horizontal
    font-size: font-size
    line-height: line-height
    border-radius: border-radius


// Form control sizing
/////////////////////////////////////

input-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius)
    padding: padding-vertical padding-horizontal
    font-size: font-size
    line-height: line-height
    border-radius: border-radius

    input[type="search"]&
        background-size: font-size
        background-position: padding-vertical center
        padding-left: (padding-vertical*4)

    select&
        line-height: input-height

    textarea&,
    select[multiple]&
        height: auto


// Placeholder text
/////////////////////////////////////

placeholder($color = $input-color-placeholder)
    &::-moz-placeholder // Firefox
        color $color
        opacity 1 // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
    &:-ms-input-placeholder // Internet Explorer 10+
        color $color
    &::-webkit-input-placeholder // Safari and Chrome
        color $color