@superflycss/utilities-layout
Version:
331 lines (278 loc) • 6.53 kB
CSS
/** @define utilities */
@import "@superflycss/variables-dimension";
@media (--lg-viewport) {
/**
* 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-lg-size1of12 {
flex-basis: auto ;
width: calc(100% * 1 / 12) ;
}
.u-lg-size1of10 {
flex-basis: auto ;
width: 10% ;
}
.u-lg-size1of8 {
flex-basis: auto ;
width: 12.5% ;
}
.u-lg-size1of6,
.u-lg-size2of12 {
flex-basis: auto ;
width: calc(100% * 1 / 6) ;
}
.u-lg-size1of5,
.u-lg-size2of10 {
flex-basis: auto ;
width: 20% ;
}
.u-lg-size1of4,
.u-lg-size2of8,
.u-lg-size3of12 {
flex-basis: auto ;
width: 25% ;
}
.u-lg-size3of10 {
flex-basis: auto ;
width: 30% ;
}
.u-lg-size1of3,
.u-lg-size2of6,
.u-lg-size4of12 {
flex-basis: auto ;
width: calc(100% * 1 / 3) ;
}
.u-lg-size3of8 {
flex-basis: auto ;
width: 37.5% ;
}
.u-lg-size2of5,
.u-lg-size4of10 {
flex-basis: auto ;
width: 40% ;
}
.u-lg-size5of12 {
flex-basis: auto ;
width: calc(100% * 5 / 12) ;
}
.u-lg-size1of2,
.u-lg-size2of4,
.u-lg-size3of6,
.u-lg-size4of8,
.u-lg-size5of10,
.u-lg-size6of12 {
flex-basis: auto ;
width: 50% ;
}
.u-lg-size7of12 {
flex-basis: auto ;
width: calc(100% * 7 / 12) ;
}
.u-lg-size3of5,
.u-lg-size6of10 {
flex-basis: auto ;
width: 60% ;
}
.u-lg-size5of8 {
flex-basis: auto ;
width: 62.5% ;
}
.u-lg-size2of3,
.u-lg-size4of6,
.u-lg-size8of12 {
flex-basis: auto ;
width: calc(100% * 2 / 3) ;
}
.u-lg-size7of10 {
flex-basis: auto ;
width: 70% ;
}
.u-lg-size3of4,
.u-lg-size6of8,
.u-lg-size9of12 {
flex-basis: auto ;
width: 75% ;
}
.u-lg-size4of5,
.u-lg-size8of10 {
flex-basis: auto ;
width: 80% ;
}
.u-lg-size5of6,
.u-lg-size10of12 {
flex-basis: auto ;
width: calc(100% * 5 / 6) ;
}
.u-lg-size7of8 {
flex-basis: auto ;
width: 87.5% ;
}
.u-lg-size9of10 {
flex-basis: auto ;
width: 90% ;
}
.u-lg-size11of12 {
flex-basis: auto ;
width: calc(100% * 11 / 12) ;
}
/* Intrinsic widths
========================================================================== */
/**
* Make an element shrink wrap its content.
*/
.u-lg-sizeFit {
flex-basis: auto ;
width: auto ;
}
/**
* 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-lg-sizeFill {
flex: 1 1 0% ; /* 1 */
flex-basis: 0% ; /* 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-lg-sizeFillAlt {
flex: 1 1 auto ;
flex-basis: auto ;
}
/**
* Make an element the width of its parent.
*/
.u-lg-sizeFull {
width: 100% ;
}
.u-lg-height-halfrem {
height: 0.5rem ;
}
.u-lg-h-halfrem {
height: 0.5rem ;
}
.u-lg-min-height-halfrem {
min-height: 0.5rem ;
}
.u-lg-mh-halfrem {
min-height: 0.5rem ;
}
.u-lg-max-height-halfrem {
max-height: 0.5rem ;
}
.u-lg-mxh-halfrem {
max-height: 0.5rem ;
}
.u-lg-height-100 {
height: 100% ;
}
.u-lg-h100 {
height: 100% ;
}
.u-lg-min-width-halfrem {
min-width: 0.5rem ;
}
.u-lg-mw-halfrem {
min-width: 0.5rem ;
}
.u-lg-max-width-halfrem {
max-width: 0.5rem ;
}
.u-lg-mxw-halfrem {
max-width: 0.5rem ;
}
.u-lg-width-halfrem {
width: 0.5rem ;
}
.u-lg-w-halfrem {
width: 0.5rem ;
}
.u-lg-width-100 {
width: 100% ;
}
.u-lg-w100 {
width: 100% ;
}
@for $factor from 0 to 100 {
.u-lg-height$(factor)px {
height: $(factor)px ;
}
.u-lg-h$(factor)px {
height: $(factor)px ;
}
.u-lg-min-height$(factor)px {
min-height: $(factor)px ;
}
.u-lg-mh$(factor)px {
min-height: $(factor)px ;
}
.u-lg-max-height$(factor)px {
max-height: $(factor)px ;
}
.u-lg-mxh$(factor)px {
max-height: $(factor)px ;
}
.u-lg-min-width$(factor)px {
min-width: $(factor)px ;
}
.u-lg-mw$(factor)px {
min-width: $(factor)px ;
}
.u-lg-max-width$(factor)px {
max-width: $(factor)px ;
}
.u-lg-width$(factor)px {
width: $(factor)px ;
}
.u-lg-w$(factor)px {
width: $(factor)px ;
}
}
@for $factor from 0 to 100 {
.u-lg-height-$(factor)rem {
height: $(factor) rem ;
}
.u-lg-h$(factor)rem {
height: $(factor) rem ;
}
.u-lg-min-height-$(factor)rem {
min-height: $(factor) rem ;
}
.u-lg-mh$(factor)rem {
min-height: $(factor) rem ;
}
.u-lg-max-height-$(factor)rem {
max-height: $(factor) rem ;
}
.u-lg-mxh$(factor)rem {
max-height: $(factor) rem ;
}
.u-lg-min-width-$(factor)rem {
min-width: $(factor) rem ;
}
.u-lg-mw$(factor)rem {
min-width: $(factor) rem ;
}
.u-lg-max-width-$(factor)rem {
max-width: $(factor) rem ;
}
.u-lg-width-$(factor)rem {
width: $(factor) rem ;
}
.u-lg-w$(factor)rem {
width: $(factor) rem ;
}
}
}