231 lines
4.8 KiB
Stylus
231 lines
4.8 KiB
Stylus
/* -------------------------- */
|
|
/* ==Responsive helpers */
|
|
/* -------------------------- */
|
|
|
|
/* large screens */
|
|
/* ------------- */
|
|
|
|
@media (min-width: ($medium + 1))
|
|
|
|
/* layouts for large screens */
|
|
.{$kna-namespace}large-hidden
|
|
display none !important
|
|
|
|
.{$kna-namespace}large-visible
|
|
display block !important
|
|
|
|
.{$kna-namespace}large-no-float
|
|
float none
|
|
|
|
.{$kna-namespace}large-inbl
|
|
display inline-block
|
|
float none
|
|
vertical-align top
|
|
|
|
/* widths for large screens */
|
|
.{$kna-namespace}large-w25
|
|
width 25% !important
|
|
|
|
.{$kna-namespace}large-w33
|
|
width 33.333333% !important
|
|
|
|
.{$kna-namespace}large-w50
|
|
width 50% !important
|
|
|
|
.{$kna-namespace}large-w66
|
|
width 66.666666% !important
|
|
|
|
.{$kna-namespace}large-w75
|
|
width 75% !important
|
|
|
|
.{$kna-namespace}large-w100
|
|
.{$kna-namespace}large-wauto
|
|
display block !important
|
|
float none !important
|
|
clear none !important
|
|
width auto !important
|
|
margin-left 0 !important
|
|
margin-right 0 !important
|
|
border 0
|
|
|
|
/* margins for large screens */
|
|
.{$kna-namespace}large-man
|
|
.{$kna-namespace}large-ma0
|
|
margin 0 !important
|
|
|
|
/* medium screens */
|
|
/* -------------- */
|
|
|
|
@media (min-width: ($small + 1)) and (max-width: $large)
|
|
|
|
/* layouts for medium screens */
|
|
.{$kna-namespace}medium-hidden
|
|
display none !important
|
|
|
|
.{$kna-namespace}medium-visible
|
|
display block !important
|
|
|
|
.{$kna-namespace}medium-no-float
|
|
float none
|
|
|
|
.{$kna-namespace}medium-inbl
|
|
display inline-block
|
|
float none
|
|
vertical-align top
|
|
|
|
/* widths for medium screens */
|
|
.{$kna-namespace}medium-w25
|
|
width 25% !important
|
|
|
|
.{$kna-namespace}medium-w33
|
|
width 33.333333% !important
|
|
|
|
.{$kna-namespace}medium-w50
|
|
width 50% !important
|
|
|
|
.{$kna-namespace}medium-w66
|
|
width 66.666666% !important
|
|
|
|
.{$kna-namespace}medium-w75
|
|
width 75% !important
|
|
|
|
.{$kna-namespace}medium-w100
|
|
.{$kna-namespace}medium-wauto
|
|
display block !important
|
|
float none !important
|
|
clear none !important
|
|
width auto !important
|
|
margin-left 0 !important
|
|
margin-right 0 !important
|
|
border 0
|
|
|
|
/* margins for medium screens */
|
|
.{$kna-namespace}medium-man
|
|
.{$kna-namespace}medium-ma0
|
|
margin 0 !important
|
|
|
|
/* small screens */
|
|
/* ------------- */
|
|
|
|
@media (min-width: ($tiny + 1)) and (max-width: $small)
|
|
|
|
/* layouts for small screens */
|
|
.{$kna-namespace}small-hidden
|
|
display none !important
|
|
|
|
.{$kna-namespace}small-visible
|
|
display block !important
|
|
|
|
.{$kna-namespace}small-no-float
|
|
float none
|
|
|
|
.{$kna-namespace}small-inbl
|
|
display inline-block
|
|
float none
|
|
vertical-align top
|
|
|
|
/* widths for small screens */
|
|
.{$kna-namespace}small-w25
|
|
width 25% !important
|
|
|
|
.{$kna-namespace}small-w33
|
|
width 33.333333% !important
|
|
|
|
.{$kna-namespace}small-w50
|
|
width 50% !important
|
|
|
|
.{$kna-namespace}small-w66
|
|
width 66.666666% !important
|
|
|
|
.{$kna-namespace}small-w75
|
|
width 75% !important
|
|
|
|
.{$kna-namespace}small-w100
|
|
.{$kna-namespace}small-wauto
|
|
display block !important
|
|
float none !important
|
|
clear none !important
|
|
width auto !important
|
|
margin-left 0 !important
|
|
margin-right 0 !important
|
|
border 0
|
|
|
|
/* margins for small screens */
|
|
.{$kna-namespace}small-man
|
|
.{$kna-namespace}small-ma0
|
|
margin 0 !important
|
|
|
|
.{$kna-namespace}small-pan
|
|
.{$kna-namespace}small-pa0
|
|
padding 0 !important
|
|
|
|
/* tiny screens */
|
|
/* ------------ */
|
|
|
|
@media (max-width: $tiny)
|
|
|
|
/* quick small resolution reset */
|
|
.{$kna-namespace}mod
|
|
.{$kna-namespace}col
|
|
fieldset
|
|
display block !important
|
|
float none !important
|
|
clear none !important
|
|
width auto !important
|
|
margin-left 0 !important
|
|
margin-right 0 !important
|
|
border 0
|
|
|
|
.{$kna-namespace}flex-container
|
|
flex-direction column
|
|
|
|
/* layouts for tiny screens */
|
|
.{$kna-namespace}tiny-hidden
|
|
display none !important
|
|
|
|
.{$kna-namespace}tiny-visible
|
|
display block !important
|
|
|
|
.{$kna-namespace}tiny-no-float
|
|
float none
|
|
|
|
.{$kna-namespace}tiny-inbl
|
|
display inline-block
|
|
float none
|
|
vertical-align top
|
|
|
|
/* widths for tiny screens */
|
|
.{$kna-namespace}tiny-w25
|
|
width 25% !important
|
|
|
|
.{$kna-namespace}tiny-w33
|
|
width 33.333333% !important
|
|
|
|
.{$kna-namespace}tiny-w50
|
|
width 50% !important
|
|
|
|
.{$kna-namespace}tiny-w66
|
|
width 66.666666% !important
|
|
|
|
.{$kna-namespace}tiny-w75
|
|
width 75% !important
|
|
|
|
.{$kna-namespace}tiny-w100
|
|
.{$kna-namespace}tiny-wauto
|
|
display block !important
|
|
float none !important
|
|
clear none !important
|
|
width auto !important
|
|
margin-left 0 !important
|
|
margin-right 0 !important
|
|
border 0
|
|
|
|
/* margins for tiny screens */
|
|
.{$kna-namespace}tiny-man
|
|
.{$kna-namespace}tiny-ma0
|
|
margin 0 !important
|
|
|
|
.{$kna-namespace}tiny-pan
|
|
.{$kna-namespace}tiny-pa0
|
|
padding 0 !important
|