@zohodesk/layout
Version:
Unified Component Library - Layout
178 lines (173 loc) • 3.44 kB
CSS
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.fullSize{
height: 100%;
width: 100%;
}
.inlineFlex {
display: inline-flex;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
}
/*Container Props */
.row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.rowReverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.columnReverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/* align-items props start */
.alignItems_center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.alignItems_start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.alignItems_end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.alignItems_baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
/* align-items props end */
/* justify-content props start */
.justifyContent_spaceBetween {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justifyContent_center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justifyContent_start{
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justifyContent_end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justifyContent_spaceAround {
-ms-flex-pack: distribute;
justify-content: space-around;
}
/* justify-content props end */
/* align-content props start*/
.alignContent_spaceBetween {
align-content: space-between;
}
.alignContent_center {
align-content: center;
}
.alignContent_start {
align-content: flex-start;
}
.alignContent_end {
align-content: flex-end;
}
.alignContent_spaceAround {
align-content: space-around;
}
/* align-content props end*/
/* flex-wrap props start*/
.wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrapReverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
/* flex-wrap props start*/
/* Container Props */
/*Item Props */
.flexible {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-height: 0;
min-width: 0;
}
.noShrink {
flex-shrink: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
}
.shrink {
flex-shrink: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
min-width: 0;
}
.basis_zero {
flex-basis: 0%;
-webkit-flex-basis: 0%;
-moz-flex-basis: 0%;
-ms-flex-basis: 0%;
}
.basis_auto {
flex-basis: auto;
-webkit-flex-basis: auto;
-moz-flex-basis: auto;
-ms-flex-basis: auto;
}
.alignSelf_start {
align-self: flex-start;
}
.alignSelf_end {
align-self: flex-end;
}
.alignSelf_center {
align-self: center;
}
.scroll_vertical {
overflow-y: auto;
overflow-x: hidden;
}
.scroll_horizontal {
overflow-x: auto;
overflow-y: hidden;
}
.scroll_both {
overflow: auto;
}
/*Item Props */