KNACSS/sass/_library/_utilities.scss

/* ---------------------------------- */
/* ==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],
.is-disabled ~ label,
[disabled] ~ label {
  opacity: 0.5;
  cursor: not-allowed !important;
  filter: grayscale(1);
}

ul {
  &.is-unstyled,
  &.unstyled {
    list-style: none;
    padding-left: 0;
  }
}

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

/* blocks widths (percentage and pixels) */
.w10 {
  width: 10%;
}

.w20 {
  width: 20%;
}

.w25 {
  width: 25%;
}

.w30 {
  width: 30%;
}

.w33 {
  width: 33.3333%;
}

.w40 {
  width: 40%;
}

.w50 {
  width: 50%;
}

.w60 {
  width: 60%;
}

.w66 {
  width: 66.6666%;
}

.w70 {
  width: 70%;
}

.w75 {
  width: 75%;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

.w100 {
  width: 100%;
}

.w50p {
  width: 50px;
}

.w100p {
  width: 100px;
}

.w150p {
  width: 150px;
}

.w200p {
  width: 200px;
}

.w300p {
  width: 300px;
}

@media (min-width: 401px) {
  .w400p {
    width: 400px;
  }

  .w500p {
    width: 500px;
  }

  .w600p {
    width: 600px;
  }
}

@media (min-width: 701px) {

  .w700p {
    width: 700px;
  }

  .w800p {
    width: 800px;
  }
}

@media (min-width: 961px) {
  .w960p {
    width: 960px;
  }

  .mw960p {
    max-width: 960px;
  }

  .w1140p {
    width: 1140px;
  }

  .mw1140p {
    max-width: 1140px;
  }
}

.wauto {
  width: auto;
}

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

.man,
.ma0 {
  margin: 0;
}

.pan,
.pa0 {
  padding: 0;
}

.mas {
  margin: $small-value;
}

.mam {
  margin: $medium-value;
}

.mal {
  margin: $large-value;
}

.pas {
  padding: $small-value;
}

.pam {
  padding: $medium-value;
}

.pal {
  padding: $large-value;
}

.mtn,
.mt0 {
  margin-top: 0;
}

.mts {
  margin-top: $small-value;
}

.mtm {
  margin-top: $medium-value;
}

.mtl {
  margin-top: $large-value;
}

.mrn,
.mr0 {
  margin-right: 0;
}

.mrs {
  margin-right: $small-value;
}

.mrm {
  margin-right: $medium-value;
}

.mrl {
  margin-right: $large-value;
}

.mbn,
.mb0 {
  margin-bottom: 0;
}

.mbs {
  margin-bottom: $small-value;
}

.mbm {
  margin-bottom: $medium-value;
}

.mbl {
  margin-bottom: $large-value;
}

.mln,
.ml0 {
  margin-left: 0;
}

.mls {
  margin-left: $small-value;
}

.mlm {
  margin-left: $medium-value;
}

.mll {
  margin-left: $large-value;
}

.mauto {
  margin: auto;
}

.mtauto {
  margin-top: auto;
}

.mrauto {
  margin-right: auto;
}

.mbauto {
  margin-bottom: auto;
}

.mlauto {
  margin-left: auto;
}

.ptn,
.pt0 {
  padding-top: 0;
}

.pts {
  padding-top: $small-value;
}

.ptm {
  padding-top: $medium-value;
}

.ptl {
  padding-top: $large-value;
}

.prn,
.pr0 {
  padding-right: 0;
}

.prs {
  padding-right: $small-value;
}

.prm {
  padding-right: $medium-value;
}

.prl {
  padding-right: $large-value;
}

.pbn,
.pb0 {
  padding-bottom: 0;
}

.pbs {
  padding-bottom: $small-value;
}

.pbm {
  padding-bottom: $medium-value;
}

.pbl {
  padding-bottom: $large-value;
}

.pln,
.pl0 {
  padding-left: 0;
}

.pls {
  padding-left: $small-value;
}

.plm {
  padding-left: $medium-value;
}

.pll {
  padding-left: $large-value;
}