@superflycss/utilities-layout/dimension/height-width.css

Layout utilities

/**
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
 *
 * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
 *    http://git.io/vllMD
 */

 .u-size1of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 12) !important;
}

.u-size1of10 {
  flex-basis: auto !important;
  width: 10% !important;
}

.u-size1of8 {
  flex-basis: auto !important;
  width: 12.5% !important;
}

.u-size1of6,
.u-size2of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 6) !important;
}

.u-size1of5,
.u-size2of10 {
  flex-basis: auto !important;
  width: 20% !important;
}

.u-size1of4,
.u-size2of8,
.u-size3of12 {
  flex-basis: auto !important;
  width: 25% !important;
}

.u-size3of10 {
  flex-basis: auto !important;
  width: 30% !important;
}

.u-size1of3,
.u-size2of6,
.u-size4of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 3) !important;
}

.u-size3of8 {
  flex-basis: auto !important;
  width: 37.5% !important;
}

.u-size2of5,
.u-size4of10 {
  flex-basis: auto !important;
  width: 40% !important;
}

.u-size5of12 {
  flex-basis: auto !important;
  width: calc(100% * 5 / 12) !important;
}

.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
  flex-basis: auto !important;
  width: 50% !important;
}

.u-size7of12 {
  flex-basis: auto !important;
  width: calc(100% * 7 / 12) !important;
}

.u-size3of5,
.u-size6of10 {
  flex-basis: auto !important;
  width: 60% !important;
}

.u-size5of8 {
  flex-basis: auto !important;
  width: 62.5% !important;
}

.u-size2of3,
.u-size4of6,
.u-size8of12 {
  flex-basis: auto !important;
  width: calc(100% * 2 / 3) !important;
}

.u-size7of10 {
  flex-basis: auto !important;
  width: 70% !important;
}

.u-size3of4,
.u-size6of8,
.u-size9of12 {
  flex-basis: auto !important;
  width: 75% !important;
}

.u-size4of5,
.u-size8of10 {
  flex-basis: auto !important;
  width: 80% !important;
}

.u-size5of6,
.u-size10of12 {
  flex-basis: auto !important;
  width: calc(100% * 5 / 6) !important;
}

.u-size7of8 {
  flex-basis: auto !important;
  width: 87.5% !important;
}

.u-size9of10 {
  flex-basis: auto !important;
  width: 90% !important;
}

.u-size11of12 {
  flex-basis: auto !important;
  width: calc(100% * 11 / 12) !important;
}

/* Intrinsic widths
   ========================================================================== */

/**
 * Make an element shrink wrap its content.
 */

.u-sizeFit {
  flex-basis: auto !important;
  width: auto !important;
}

/**
 * Make an element fill the remaining space.
 *
 * 1. Be explicit to work around IE10 bug with shorthand flex
 *    http://git.io/vllC7
 * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
 *    http://git.io/vllMt
 */

.u-sizeFill {
  flex: 1 1 0% !important; /* 1 */
  flex-basis: 0% !important; /* 2 */
}

/**
 * An alternative method to make an element fill the remaining space.
 * Distributes space based on the initial width and height of the element
 *
 * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
 */

.u-sizeFillAlt {
  flex: 1 1 auto !important;
  flex-basis: auto !important;
}

/**
 * Make an element the width of its parent.
 */

.u-sizeFull {
  width: 100% !important;
}

.u-height-halfrem {
  height: 0.5rem !important;
}

.u-h-halfrem {
  height: 0.5rem !important;
}

.u-min-height-halfrem {
  min-height: 0.5rem !important;
}

.u-mh-halfrem {
  min-height: 0.5rem !important;
}

.u-max-height-halfrem {
  max-height: 0.5rem !important;
}

.u-mxh-halfrem {
  max-height: 0.5rem !important;
}

.u-height-100 {
  height: 100% !important;
}

.u-h100 {
  height: 100% !important;
}

.u-min-width-halfrem {
  min-width: 0.5rem !important;
}

.u-mw-halfrem {
  min-width: 0.5rem !important;
}

.u-max-width-halfrem {
  max-width: 0.5rem !important;
}

.u-mxw-halfrem {
  max-width: 0.5rem !important;
}

.u-width-halfrem {
  width: 0.5rem !important;
}

.u-w-halfrem {
  width: 0.5rem !important;
}

.u-width-100 {
  width: 100% !important;
}

.u-w100 {
  width: 100% !important;
}

@for $factor from 0 to 100 {
  .u-height$(factor)px {
    height: $(factor)px !important;
  }
  .u-h$(factor)px {
    height: $(factor)px !important;
  }
  .u-min-height$(factor)px {
    min-height: $(factor)px !important;
  }
  .u-mh$(factor)px {
    min-height: $(factor)px !important;
  }
  .u-max-height$(factor)px {
    max-height: $(factor)px !important;
  }
  .u-mxh$(factor)px {
    max-height: $(factor)px !important;
  }
  .u-min-width$(factor)px {
    min-width: $(factor)px !important;
  }
  .u-mw$(factor)px {
    min-width: $(factor)px !important;
  }
  .u-max-width$(factor)px {
    max-width: $(factor)px !important;
  }
  .u-width$(factor)px {
    width: $(factor)px !important;
  }
  .u-w$(factor)px {
    width: $(factor)px !important;
  }
}

@for $factor from 0 to 100 {
  .u-height$(factor)rem {
    height: $(factor)rem !important;
  }
  .u-h$(factor)rem {
    height: $(factor)rem !important;
  }
  .u-min-height$(factor)rem {
    min-height: $(factor)rem !important;
  }
  .u-mh$(factor)rem {
    min-height: $(factor)rem !important;
  }
  .u-max-height$(factor)rem {
    max-height: $(factor)rem !important;
  }
  .u-mxh$(factor)rem {
    max-height: $(factor)rem !important;
  }
  .u-min-width$(factor)rem {
    min-width: $(factor)rem !important;
  }
  .u-mw$(factor)rem {
    min-width: $(factor)rem !important;
  }
  .u-max-width$(factor)rem {
    max-width: $(factor)rem !important;
  }
  
  .u-mxw$(factor)rem {
    max-width: $(factor)rem !important;
  }
  .u-width$(factor)rem {
    width: $(factor)rem !important;
  }
  .u-w$(factor)rem {
    width: $(factor)rem !important;
  }
}