mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-11 23:55:16 +01:00
220 lines
3.8 KiB
Stylus
220 lines
3.8 KiB
Stylus
//
|
|
// 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 |