@ohu-mobile/core/lib/Grid/style/index.css

Mobile UI Toolkit

.ohu-row {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.ohu-row.is-reverse {
  flex-direction: row-reverse;
}
.ohu-row.x-left {
  justify-content: flex-start;
}
.ohu-row.x-right {
  justify-content: flex-end;
}
.ohu-row.x-center {
  justify-content: center;
}
.ohu-row.x-between {
  justify-content: space-between;
}
.ohu-row.x-around {
  justify-content: space-around;
}
.ohu-row.x-evenly {
  justify-content: space-evenly;
}
.ohu-row.y-top {
  align-items: flex-start;
}
.ohu-row.y-bottom {
  align-items: flex-end;
}
.ohu-row.y-center {
  align-items: center;
}
.ohu-row.y-baseline {
  align-items: baseline;
}
.ohu-row.y-stretch {
  align-items: stretch;
}
.ohu-row.m-top {
  align-content: flex-start;
}
.ohu-row.m-bottom {
  align-content: flex-end;
}
.ohu-row.m-center {
  align-content: center;
}
.ohu-row.m-between {
  align-content: space-between;
}
.ohu-row.m-around {
  align-content: space-around;
}
.ohu-row.m-stretch {
  align-content: stretch;
}
.ohu-row.m-evenly {
  align-content: space-evenly;
}

.ohu-col {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.ohu-col.is-reverse {
  flex-direction: column-reverse;
}
.ohu-col.x-left {
  align-items: flex-start;
}
.ohu-col.x-right {
  align-items: flex-end;
}
.ohu-col.x-center {
  align-items: center;
}
.ohu-col.x-baseline {
  align-items: baseline;
}
.ohu-col.x-stretch {
  align-items: stretch;
}
.ohu-col.y-top {
  justify-content: flex-start;
}
.ohu-col.y-bottom {
  justify-content: flex-end;
}
.ohu-col.y-center {
  justify-content: center;
}
.ohu-col.y-between {
  justify-content: space-between;
}
.ohu-col.y-around {
  justify-content: space-around;
}
.ohu-col.y-evenly {
  justify-content: space-evenly;
}
.ohu-col.m-left {
  align-content: flex-start;
}
.ohu-col.m-right {
  align-content: flex-end;
}
.ohu-col.m-center {
  align-content: center;
}
.ohu-col.m-between {
  align-content: space-between;
}
.ohu-col.m-around {
  align-content: space-around;
}
.ohu-col.m-stretch {
  align-content: stretch;
}
.ohu-col.m-evenly {
  align-content: space-evenly;
}

.ohu-unit {
  margin: 0;
  flex-grow: 0;
}
.ohu-unit.is-1-24 {
  max-width: 4.1666666667%;
  flex-basis: 4.1666666667%;
}
.ohu-unit.is-offset-1 {
  margin-left: 4.1666666667%;
}
.ohu-unit.is-2-24 {
  max-width: 8.3333333333%;
  flex-basis: 8.3333333333%;
}
.ohu-unit.is-offset-2 {
  margin-left: 8.3333333333%;
}
.ohu-unit.is-1-12 {
  max-width: 8.3333333333%;
  flex-basis: 8.3333333333%;
}
.ohu-unit.is-3-24 {
  max-width: 12.5%;
  flex-basis: 12.5%;
}
.ohu-unit.is-offset-3 {
  margin-left: 12.5%;
}
.ohu-unit.is-1-8 {
  max-width: 12.5%;
  flex-basis: 12.5%;
}
.ohu-unit.is-4-24 {
  max-width: 16.6666666667%;
  flex-basis: 16.6666666667%;
}
.ohu-unit.is-offset-4 {
  margin-left: 16.6666666667%;
}
.ohu-unit.is-1-6 {
  max-width: 16.6666666667%;
  flex-basis: 16.6666666667%;
}
.ohu-unit.is-5-24 {
  max-width: 20.8333333333%;
  flex-basis: 20.8333333333%;
}
.ohu-unit.is-offset-5 {
  margin-left: 20.8333333333%;
}
.ohu-unit.is-6-24 {
  max-width: 25%;
  flex-basis: 25%;
}
.ohu-unit.is-offset-6 {
  margin-left: 25%;
}
.ohu-unit.is-1-4 {
  max-width: 25%;
  flex-basis: 25%;
}
.ohu-unit.is-7-24 {
  max-width: 29.1666666667%;
  flex-basis: 29.1666666667%;
}
.ohu-unit.is-offset-7 {
  margin-left: 29.1666666667%;
}
.ohu-unit.is-8-24 {
  max-width: 33.3333333333%;
  flex-basis: 33.3333333333%;
}
.ohu-unit.is-offset-8 {
  margin-left: 33.3333333333%;
}
.ohu-unit.is-1-3 {
  max-width: 33.3333333333%;
  flex-basis: 33.3333333333%;
}
.ohu-unit.is-9-24 {
  max-width: 37.5%;
  flex-basis: 37.5%;
}
.ohu-unit.is-offset-9 {
  margin-left: 37.5%;
}
.ohu-unit.is-3-8 {
  max-width: 37.5%;
  flex-basis: 37.5%;
}
.ohu-unit.is-10-24 {
  max-width: 41.6666666667%;
  flex-basis: 41.6666666667%;
}
.ohu-unit.is-offset-10 {
  margin-left: 41.6666666667%;
}
.ohu-unit.is-5-12 {
  max-width: 41.6666666667%;
  flex-basis: 41.6666666667%;
}
.ohu-unit.is-11-24 {
  max-width: 45.8333333333%;
  flex-basis: 45.8333333333%;
}
.ohu-unit.is-offset-11 {
  margin-left: 45.8333333333%;
}
.ohu-unit.is-12-24 {
  max-width: 50%;
  flex-basis: 50%;
}
.ohu-unit.is-offset-12 {
  margin-left: 50%;
}
.ohu-unit.is-1-2 {
  max-width: 50%;
  flex-basis: 50%;
}
.ohu-unit.is-13-24 {
  max-width: 54.1666666667%;
  flex-basis: 54.1666666667%;
}
.ohu-unit.is-offset-13 {
  margin-left: 54.1666666667%;
}
.ohu-unit.is-14-24 {
  max-width: 58.3333333333%;
  flex-basis: 58.3333333333%;
}
.ohu-unit.is-offset-14 {
  margin-left: 58.3333333333%;
}
.ohu-unit.is-7-12 {
  max-width: 58.3333333333%;
  flex-basis: 58.3333333333%;
}
.ohu-unit.is-15-24 {
  max-width: 62.5%;
  flex-basis: 62.5%;
}
.ohu-unit.is-offset-15 {
  margin-left: 62.5%;
}
.ohu-unit.is-5-8 {
  max-width: 62.5%;
  flex-basis: 62.5%;
}
.ohu-unit.is-16-24 {
  max-width: 66.6666666667%;
  flex-basis: 66.6666666667%;
}
.ohu-unit.is-offset-16 {
  margin-left: 66.6666666667%;
}
.ohu-unit.is-2-3 {
  max-width: 66.6666666667%;
  flex-basis: 66.6666666667%;
}
.ohu-unit.is-17-24 {
  max-width: 70.8333333333%;
  flex-basis: 70.8333333333%;
}
.ohu-unit.is-offset-17 {
  margin-left: 70.8333333333%;
}
.ohu-unit.is-18-24 {
  max-width: 75%;
  flex-basis: 75%;
}
.ohu-unit.is-offset-18 {
  margin-left: 75%;
}
.ohu-unit.is-3-4 {
  max-width: 75%;
  flex-basis: 75%;
}
.ohu-unit.is-19-24 {
  max-width: 79.1666666667%;
  flex-basis: 79.1666666667%;
}
.ohu-unit.is-offset-19 {
  margin-left: 79.1666666667%;
}
.ohu-unit.is-20-24 {
  max-width: 83.3333333333%;
  flex-basis: 83.3333333333%;
}
.ohu-unit.is-offset-20 {
  margin-left: 83.3333333333%;
}
.ohu-unit.is-5-6 {
  max-width: 83.3333333333%;
  flex-basis: 83.3333333333%;
}
.ohu-unit.is-21-24 {
  max-width: 87.5%;
  flex-basis: 87.5%;
}
.ohu-unit.is-offset-21 {
  margin-left: 87.5%;
}
.ohu-unit.is-7-8 {
  max-width: 87.5%;
  flex-basis: 87.5%;
}
.ohu-unit.is-22-24 {
  max-width: 91.6666666667%;
  flex-basis: 91.6666666667%;
}
.ohu-unit.is-offset-22 {
  margin-left: 91.6666666667%;
}
.ohu-unit.is-11-12 {
  max-width: 91.6666666667%;
  flex-basis: 91.6666666667%;
}
.ohu-unit.is-23-24 {
  max-width: 95.8333333333%;
  flex-basis: 95.8333333333%;
}
.ohu-unit.is-offset-23 {
  margin-left: 95.8333333333%;
}
.ohu-unit.is-24-24 {
  max-width: 100%;
  flex-basis: 100%;
}
.ohu-unit.is-offset-24 {
  margin-left: 100%;
}
.ohu-unit.is-1-1 {
  max-width: 100%;
  flex-basis: 100%;
}

.ohu-units-gap {
  margin: -8px;
}
.ohu-units-gap > .ohu-unit {
  box-sizing: border-box;
  padding: 8px;
}

.ohu-units-gap-1 {
  margin: -8px;
}
.ohu-units-gap-1 > .ohu-unit {
  box-sizing: border-box;
  padding: 8px;
}

.ohu-units-gap-2 {
  margin: -16px;
}
.ohu-units-gap-2 > .ohu-unit {
  box-sizing: border-box;
  padding: 16px;
}

.ohu-units-gap-3 {
  margin: -24px;
}
.ohu-units-gap-3 > .ohu-unit {
  box-sizing: border-box;
  padding: 24px;
}

.ohu-units-gap-4 {
  margin: -32px;
}
.ohu-units-gap-4 > .ohu-unit {
  box-sizing: border-box;
  padding: 32px;
}

.ohu-units-gap-5 {
  margin: -40px;
}
.ohu-units-gap-5 > .ohu-unit {
  box-sizing: border-box;
  padding: 40px;
}

.ohu-units-gap-6 {
  margin: -48px;
}
.ohu-units-gap-6 > .ohu-unit {
  box-sizing: border-box;
  padding: 48px;
}

.ohu-units-gap-7 {
  margin: -56px;
}
.ohu-units-gap-7 > .ohu-unit {
  box-sizing: border-box;
  padding: 56px;
}

.ohu-units-gap-8 {
  margin: -64px;
}
.ohu-units-gap-8 > .ohu-unit {
  box-sizing: border-box;
  padding: 64px;
}

.ohu-units-gap-9 {
  margin: -72px;
}
.ohu-units-gap-9 > .ohu-unit {
  box-sizing: border-box;
  padding: 72px;
}

.ohu-units-gap-10 {
  margin: -80px;
}
.ohu-units-gap-10 > .ohu-unit {
  box-sizing: border-box;
  padding: 80px;
}

.is-multi {
  flex-wrap: wrap;
}

.is-no-shrink {
  flex-shrink: 0;
}

.is-grow {
  flex-grow: 1;
}

.is-origin {
  flex-shrink: 0;
  flex-grow: 0;
}