shared/common-adapters/box.css - master - githubmirror/client

shared/common-adapters/box.css
293 строки6 KB
chrisnojima-zoom
Version 670 - clean2 (#29122)
08 июн 2026, 19:31
08 июн 2026, 19:311943197
/* 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;
}
.box2_flex1 {
  flex: 1;
}
.box2_justifyContent_center {
  justify-content: center;
}
.box2_justifyContent_flex-start {
  justify-content: flex-start;
}
.box2_justifyContent_flex-end {
  justify-content: flex-end;
}
.box2_justifyContent_space-between {
  justify-content: space-between;
}
.box2_justifyContent_space-around {
  justify-content: space-around;
}
.box2_justifyContent_space-evenly {
  justify-content: space-evenly;
}
.box2_overflow_hidden {
  overflow: hidden;
}
.box2_overflow_scroll {
  overflow: scroll;
}
.box2_overflow_visible {
  overflow: visible;
}
.box2_overflow_auto {
  overflow: auto;
}
.box2_padding_xxtiny {
  padding: var(--size-xxtiny);
}
.box2_padding_xtiny {
  padding: var(--size-xtiny);
}
.box2_padding_tiny {
  padding: var(--size-tiny);
}
.box2_padding_xsmall {
  padding: var(--size-xsmall);
}
.box2_padding_small {
  padding: var(--size-small);
}
.box2_padding_medium {
  padding: var(--size-medium);
}
.box2_padding_mediumLarge {
  padding: var(--size-mediumLarge);
}
.box2_padding_large {
  padding: var(--size-large);
}
.box2_padding_xlarge {
  padding: var(--size-xlarge);
}
.box2_relative {
  position: relative;
}