blog/_src/assets/styl/mixins.styl

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


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

clearfix()
    &:after
        content: ""
        display: table
        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 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

// 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


// Dimmed Text
/////////////////////////////////////

dimmed()
	color: $text-color-dimmed
	p
        color: $text-color-dimmed
	li
        color: $text-color-dimmed

.dimmed
    dimmed()


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

.ellipsis
    text-overflow: ellipsis
    white-space: nowrap
	overflow: hidden


// 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: $line-height-computed/2 $line-height-computed $line-height-computed/2 100%
	margin-left: -100%;
	.border-right-radius($border-radius-base)


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

.lead
    font-size: $font-size-large;
    line-height: $line-height-computed*1.15


// 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(input-height, padding-vertical, padding-horizontal, font-size, line-height, border-radius)
    height: input-height
    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&
        height: input-height
        line-height: input-height

    textarea&,
    select[multiple]&
        height: auto