KNACSS/styl/utilities/_responsive.styl

231 lines
4.7 KiB
Stylus
Raw Normal View History

2017-03-06 17:35:08 +01:00
/* -------------------------- */
/* ==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