githubmirror/client

shared/common-adapters/box.css
230 строк5 KB
chrisnojima
v630 start (#25648)
08 дек 2023, 00:43
08 дек 2023, 00:436a3aef2
/* Used by box on desktop to speed up perf */
.box2_vertical {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  &.box2_reverse {
    flex-direction: column-reverse;
  }
  /* gap */
  &.box2_gap_xxtiny {
    row-gap: var(--size-xxtiny);
  }
  &.box2_gap_xtiny {
    row-gap: var(--size-xtiny);
  }
  &.box2_gap_tiny {
    row-gap: var(--size-tiny);
  }
  &.box2_gap_xsmall {
    row-gap: var(--size-xsmall);
  }
  &.box2_gap_small {
    row-gap: var(--size-small);
  }
  &.box2_gap_medium {
    row-gap: var(--size-medium);
  }
  &.box2_gap_mediumlarge {
    row-gap: var(--size-mediumlarge);
  }
  &.box2_gap_large {
    row-gap: var(--size-large);
  }
  &.box2_gap_xlarge {
    row-gap: var(--size-xlarge);
  }
  /* gap start */
  &.box2_gapStart_xxtiny {
    padding-top: var(--size-xxtiny);
  }
  &.box2_gapStart_xtiny {
    padding-top: var(--size-xtiny);
  }
  &.box2_gapStart_tiny {
    padding-top: var(--size-tiny);
  }
  &.box2_gapStart_xsmall {
    padding-top: var(--size-xsmall);
  }
  &.box2_gapStart_small {
    padding-top: var(--size-small);
  }
  &.box2_gapStart_medium {
    padding-top: var(--size-medium);
  }
  &.box2_gapStart_mediumlarge {
    padding-top: var(--size-mediumlarge);
  }
  &.box2_gapStart_large {
    padding-top: var(--size-large);
  }
  &.box2_gapStart_xlarge {
    padding-top: var(--size-xlarge);
  }
  /* gap end */
  &.box2_gapEnd_xxtiny {
    padding-bottom: var(--size-xxtiny);
  }
  &.box2_gapEnd_xtiny {
    padding-bottom: var(--size-xtiny);
  }
  &.box2_gapEnd_tiny {
    padding-bottom: var(--size-tiny);
  }
  &.box2_gapEnd_xsmall {
    padding-bottom: var(--size-xsmall);
  }
  &.box2_gapEnd_small {
    padding-bottom: var(--size-small);
  }
  &.box2_gapEnd_medium {
    padding-bottom: var(--size-medium);
  }
  &.box2_gapEnd_mediumlarge {
    padding-bottom: var(--size-mediumlarge);
  }
  &.box2_gapEnd_large {
    padding-bottom: var(--size-large);
  }
  &.box2_gapEnd_xlarge {
    padding-bottom: var(--size-xlarge);
  }
}

.box2_horizontal {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  &.box2_reverse {
    flex-direction: row-reverse;
  }
  /* gap */
  &.box2_gap_xxtiny {
    column-gap: var(--size-xxtiny);
  }
  &.box2_gap_xtiny {
    column-gap: var(--size-xtiny);
  }
  &.box2_gap_tiny {
    column-gap: var(--size-tiny);
  }
  &.box2_gap_xsmall {
    column-gap: var(--size-xsmall);
  }
  &.box2_gap_small {
    column-gap: var(--size-small);
  }
  &.box2_gap_medium {
    column-gap: var(--size-medium);
  }
  &.box2_gap_mediumlarge {
    column-gap: var(--size-mediumlarge);
  }
  &.box2_gap_large {
    column-gap: var(--size-large);
  }
  &.box2_gap_xlarge {
    column-gap: var(--size-xlarge);
  }
  /* gap start */
  &.box2_gapStart_xxtiny {
    padding-left: var(--size-xxtiny);
  }
  &.box2_gapStart_xtiny {
    padding-left: var(--size-xtiny);
  }
  &.box2_gapStart_tiny {
    padding-left: var(--size-tiny);
  }
  &.box2_gapStart_xsmall {
    padding-left: var(--size-xsmall);
  }
  &.box2_gapStart_small {
    padding-left: var(--size-small);
  }
  &.box2_gapStart_medium {
    padding-left: var(--size-medium);
  }
  &.box2_gapStart_mediumlarge {
    padding-left: var(--size-mediumlarge);
  }
  &.box2_gapStart_large {
    padding-left: var(--size-large);
  }
  &.box2_gapStart_xlarge {
    padding-left: var(--size-xlarge);
  }
  /* gap end */
  &.box2_gapEnd_xxtiny {
    padding-right: var(--size-xxtiny);
  }
  &.box2_gapEnd_xtiny {
    padding-right: var(--size-xtiny);
  }
  &.box2_gapEnd_tiny {
    padding-right: var(--size-tiny);
  }
  &.box2_gapEnd_xsmall {
    padding-right: var(--size-xsmall);
  }
  &.box2_gapEnd_small {
    padding-right: var(--size-small);
  }
  &.box2_gapEnd_medium {
    padding-right: var(--size-medium);
  }
  &.box2_gapEnd_mediumlarge {
    padding-right: var(--size-mediumlarge);
  }
  &.box2_gapEnd_large {
    padding-right: var(--size-large);
  }
  &.box2_gapEnd_xlarge {
    padding-right: var(--size-xlarge);
  }
}
.box2_centered {
  align-self: center;
}
.box2_centeredChildren {
  align-items: center;
  justify-content: center;
}
.box2_fullHeight {
  height: 100%;
  max-height: 100%;
}
.box2_fullWidth {
  width: 100%;
  max-width: 100%;
}
.box2_alignSelf_center {
  align-self: center;
}
.box2_alignSelf_flex-start {
  align-self: flex-start;
}
.box2_alignSelf_flex-end {
  align-self: flex-end;
}
.box2_alignSelf_stretch {
  align-self: stretch;
}
.box2_no_shrink {
  flex-shrink: 0;
}
.box2_alignItems_center {
  align-items: center;
}
.box2_alignItems_flex-start {
  align-items: flex-start;
}
.box2_alignItems_flex-end {
  align-items: flex-end;
}
.box2_pointerEvents_none {
  pointer-events: none;
}