UNPKG

@zohodesk/layout

Version:

Unified Component Library - Layout

178 lines (173 loc) 3.44 kB
.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 */