KNACSS/styl/utilities/_helpers.styl

/* ---------------------------------- */
/* ==Helpers                          */
/* ---------------------------------- */

/* State Helpers */
/* ------------- */

/* invisible for all */
.is-hidden
[hidden]
  display none

/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
.visually-hidden
  position absolute !important
  border 0 !important
  height 1px !important
  width 1px !important
  padding 0 !important
  overflow hidden !important
  clip rect(0, 0, 0, 0) !important

.is-disabled
[disabled]
  opacity 0.5
  pointer-events none
  cursor not-allowed
  filter grayscale(1)


ul
  &.is-unstyled
  &.unstyled
    list-style none
    padding-left 0

/* Width Helpers */
/* ------------- */

/* blocks widths (percentage and pixels) */
.{$kna-namespace}w10
  width 10%

.{$kna-namespace}w20
  width 20%

.{$kna-namespace}w25
  width 25%

.{$kna-namespace}w30
  width 30%

.{$kna-namespace}w33
  width 33.3333%

.{$kna-namespace}w40
  width 40%

.{$kna-namespace}w50
  width 50%

.{$kna-namespace}w60
  width 60%

.{$kna-namespace}w66
  width 66.6666%

.{$kna-namespace}w70
  width 70%

.{$kna-namespace}w75
  width 75%

.{$kna-namespace}w80
  width 80%

.{$kna-namespace}w90
  width 90%

.{$kna-namespace}w100
  width 100%

.{$kna-namespace}w50p
  width 50px

.{$kna-namespace}w100p
  width 100px

.{$kna-namespace}w150p
  width 150px

.{$kna-namespace}w200p
  width 200px

.{$kna-namespace}w300p
  width 300px

@media (min-width: 401px)
  .{$kna-namespace}w400p
    width 400px

  .{$kna-namespace}w500p
    width 500px

  .{$kna-namespace}w600p
    width 600px

@media (min-width: 701px)

  .{$kna-namespace}w700p
    width 700px

  .{$kna-namespace}w800p
    width 800px

@media (min-width: 961px)
  .{$kna-namespace}w960p
    width 960px

  .{$kna-namespace}mw960p
    max-width 960px

  .{$kna-namespace}w1140p
    width 1140px

  .{$kna-namespace}mw1140p
    max-width 1140px

.{$kna-namespace}wauto
  width auto

/* Spacing Helpers */
/* --------------- */

.{$kna-namespace}man
.{$kna-namespace}ma0
  margin 0

.{$kna-namespace}pan
.{$kna-namespace}pa0
  padding 0

.{$kna-namespace}mas
  margin $small-value

.{$kna-namespace}mam
  margin $medium-value

.{$kna-namespace}mal
  margin $large-value

.{$kna-namespace}pas
  padding $small-value

.{$kna-namespace}pam
  padding $medium-value

.{$kna-namespace}pal
  padding $large-value

.{$kna-namespace}mtn
.{$kna-namespace}mt0
  margin-top 0

.{$kna-namespace}mts
  margin-top $small-value

.{$kna-namespace}mtm
  margin-top $medium-value

.{$kna-namespace}mtl
  margin-top $large-value

.{$kna-namespace}mrn
.{$kna-namespace}mr0
  margin-right 0

.{$kna-namespace}mrs
  margin-right $small-value

.{$kna-namespace}mrm
  margin-right $medium-value

.{$kna-namespace}mrl
  margin-right $large-value

.{$kna-namespace}mbn
.{$kna-namespace}mb0
  margin-bottom 0

.{$kna-namespace}mbs
  margin-bottom $small-value

.{$kna-namespace}mbm
  margin-bottom $medium-value

.{$kna-namespace}mbl
  margin-bottom $large-value

.{$kna-namespace}mln
.{$kna-namespace}ml0
  margin-left 0

.{$kna-namespace}mls
  margin-left $small-value

.{$kna-namespace}mlm
  margin-left $medium-value

.{$kna-namespace}mll
  margin-left $large-value

.{$kna-namespace}mauto
  margin auto

.{$kna-namespace}mtauto
  margin-top auto

.{$kna-namespace}mrauto
  margin-right auto

.{$kna-namespace}mbauto
  margin-bottom auto

.{$kna-namespace}mlauto
  margin-left: auto

.{$kna-namespace}ptn
.{$kna-namespace}pt0
  padding-top 0

.{$kna-namespace}pts
  padding-top $small-value

.{$kna-namespace}ptm
  padding-top $medium-value

.{$kna-namespace}ptl
  padding-top $large-value

.{$kna-namespace}prn
.{$kna-namespace}pr0
  padding-right 0

.{$kna-namespace}prs
  padding-right $small-value

.{$kna-namespace}prm
  padding-right $medium-value

.{$kna-namespace}prl
  padding-right $large-value

.{$kna-namespace}pbn
.{$kna-namespace}pb0
  padding-bottom 0

.{$kna-namespace}pbs
  padding-bottom $small-value

.{$kna-namespace}pbm
  padding-bottom $medium-value

.{$kna-namespace}pbl
  padding-bottom $large-value

.{$kna-namespace}pln
.{$kna-namespace}pl0
  padding-left 0

.{$kna-namespace}pls
  padding-left $small-value

.{$kna-namespace}plm
  padding-left $medium-value

.{$kna-namespace}pll
  padding-left $large-value