superfly-css-utilities-layout
Version:
233 lines (229 loc) • 6.11 kB
CSS
/** @define utilities */
@import "superfly-css-variables-dimension";
/**
* Flex Container Level Utilities
*/
@media (--md-viewport) {
.u-md-flex {
display: flex ;
}
.u-md-inline-flex {
display: inline-flex ;
}
.u-md-flex-row {
flex-direction: row ;
}
.u-md-flex-row-reverse {
flex-direction: row-reverse ;
}
.u-md-flex-column {
flex-direction: column ;
}
.u-md-flex-column-reverse {
flex-direction: column-reverse ;
}
.u-md-flex-wrap {
flex-wrap: wrap ;
}
.u-md-flex-no-wrap {
flex-wrap: nowrap ;
}
.u-md-flex-wrap-reverse {
flex-wrap: wrap-reverse ;
}
.u-md-flex-justify-start {
justify-content: flex-start ;
}
.u-md-flex-justify-end {
justify-content: flex-end ;
}
.u-md-flex-justify-center {
justify-content: center ;
}
.u-md-flex-justify-between {
justify-content: space-between ;
}
.u-md-flex-justify-around {
justify-content: space-around ;
}
.u-md-flex-align-items-start {
align-items: flex-start ;
}
.u-md-flex-align-items-end {
align-items: flex-end ;
}
.u-md-flex-align-items-center {
align-items: center ;
}
.u-md-flex-align-items-stretch {
align-items: stretch ;
}
.u-md-flex-align-items-baseline {
align-items: baseline ;
}
.u-md-flex-align-content-start {
align-content: flex-start ;
}
.u-md-flex-align-content-end {
align-content: flex-end ;
}
.u-md-flex-align-content-center {
align-content: center ;
}
.u-md-flex-align-content-stretch {
align-content: stretch ;
}
.u-md-flexAlignContentBetween {
align-content: space-between ;
}
.u-md-flexAlignContentAround {
align-content: space-around ;
}
/* Applies to flex items
========================================================================== */
/**
* Override default alignment of single item when specified by `align-items`
*/
.u-md-flex-align-self-start {
align-self: flex-start ;
}
.u-md-flex-align-self-end {
align-self: flex-end ;
}
.u-md-flex-align-self-center {
align-self: center ;
}
.u-md-flex-align-self-stretch {
align-self: stretch ;
}
.u-md-flex-align-self-baseline {
align-self: baseline ;
}
.u-md-flex-align-self-auto {
align-self: auto ;
}
.u-md-flex-order-first {
order: -1 ;
}
.u-md-flex-order-last {
order: 1 ;
}
.u-md-flex-order-none {
order: 0 ;
}
/**
* Specify the flex grow factor, which determines how much the flex item will
* grow relative to the rest of the flex items in the flex container.
*
* Supports 1-5 proportions
*
* 1. Provide all values to avoid IE10 bug with shorthand flex
* - http://git.io/vllC7
*
* Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
* instead of `auto` as this matches what the default would be with `flex`
* shorthand - http://git.io/vllWx
*/
.u-md-flex-grow1 {
flex: 1 1 0% ;
/* 1 */
}
.u-md-flex-grow2 {
flex: 2 1 0% ;
}
.u-md-flex-grow3 {
flex: 3 1 0% ;
}
.u-md-flex-grow4 {
flex: 4 1 0% ;
}
.u-md-flex-grow5 {
flex: 5 1 0% ;
}
/**
* Specify the flex shrink factor, which determines how much the flex item will
* shrink relative to the rest of the flex items in the flex container.
*/
.u-md-flex-shrink0 {
flex-shrink: 0 ;
}
.u-md-flex-shrink1 {
flex-shrink: 1 ;
}
.u-md-flex-shrink2 {
flex-shrink: 2 ;
}
.u-md-flex-shrink3 {
flex-shrink: 3 ;
}
.u-md-flex-shrink4 {
flex-shrink: 4 ;
}
.u-md-flex-shrink5 {
flex-shrink: 5 ;
}
/**
* Aligning with `auto` margins
* http://www.w3.org/TR/css-flexbox-1/#auto-margins
*/
.u-md-flex-expand {
margin: auto ;
}
.u-md-flex-expand-left {
margin-left: auto ;
}
.u-md-flex-expand-right {
margin-right: auto ;
}
.u-md-flex-expand-top {
margin-top: auto ;
}
.u-md-flex-expand-bottom {
margin-bottom: auto ;
}
/**
* Basis
*/
.u-md-flex-basis-auto {
flex-basis: auto ;
}
.u-md-flex-basis0 {
flex-basis: 0 ;
}
/*
* Shorthand
*
* Declares all values instead of keywords like 'initial' to work around IE10
* https://www.w3.org/TR/css-flexbox-1/#flex-common
*
* 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
* This ensures it overrides flex-basis set in other utilities.
*/
/*
* Sizes the item based on the width/height properties
*/
.u-md-flex-initial {
flex: 0 1 auto ;
flex-basis: auto ;
/* 1 */
}
/*
* Sizes the item based on the width/height properties, but makes them fully
* flexible, so that they absorb any free space along the main axis.
*/
.u-md-flex-auto {
flex: 1 1 auto ;
flex-basis: auto ;
/* 1 */
}
/*
* Sizes the item according to the width/height properties, but makes the flex
* item fully inflexible. Similar to initial, except that flex items are
* not allowed to shrink, even in overflow situations.
*/
.u-md-flex-none {
flex: 0 0 auto ;
flex-basis: auto ;
/* 1 */
}
}