@nami-ui/stack/lib/stack.css

A basic layout component.

.nami-stack {
  display: flex;
  --nami-stack--spacing-horizontal: 0px;
  --nami-stack--spacing-vertical: 0px;
  gap: var(--nami-stack--spacing-vertical) var(--nami-stack--spacing-horizontal);
}
.nami-stack--horizontal {
  flex-direction: row;
}
.nami-stack--vertical {
  flex-direction: column;
}
.nami-stack--justify-start {
  justify-content: flex-start;
}
.nami-stack--justify-end {
  justify-content: flex-end;
}
.nami-stack--justify-center {
  justify-content: center;
}
.nami-stack--justify-between {
  justify-content: space-between;
}
.nami-stack--justify-around {
  justify-content: space-around;
}
.nami-stack--align-start {
  align-items: flex-start;
}
.nami-stack--align-end {
  align-items: flex-end;
}
.nami-stack--align-center {
  align-items: center;
}
.nami-stack--align-stretch {
  align-items: stretch;
}
.nami-stack--padding-micor {
  padding: var(--nami-distance-micor, 1px);
}
.nami-stack--padding-top-micor, .nami-stack--padding-vertical-micor {
  padding-top: var(--nami-distance-micor, 1px);
}
.nami-stack--padding-bottom-micor, .nami-stack--padding-vertical-micor {
  padding-bottom: var(--nami-distance-micor, 1px);
}
.nami-stack--padding-left-micor, .nami-stack--padding-horizontal-micor {
  padding-left: var(--nami-distance-micor, 1px);
}
.nami-stack--padding-right-micor, .nami-stack--padding-horizontal-micor {
  padding-right: var(--nami-distance-micor, 1px);
}
.nami-stack--padding-mini {
  padding: var(--nami-distance-mini, 2px);
}
.nami-stack--padding-top-mini, .nami-stack--padding-vertical-mini {
  padding-top: var(--nami-distance-mini, 2px);
}
.nami-stack--padding-bottom-mini, .nami-stack--padding-vertical-mini {
  padding-bottom: var(--nami-distance-mini, 2px);
}
.nami-stack--padding-left-mini, .nami-stack--padding-horizontal-mini {
  padding-left: var(--nami-distance-mini, 2px);
}
.nami-stack--padding-right-mini, .nami-stack--padding-horizontal-mini {
  padding-right: var(--nami-distance-mini, 2px);
}
.nami-stack--padding-tiny {
  padding: var(--nami-distance-tiny, 4px);
}
.nami-stack--padding-top-tiny, .nami-stack--padding-vertical-tiny {
  padding-top: var(--nami-distance-tiny, 4px);
}
.nami-stack--padding-bottom-tiny, .nami-stack--padding-vertical-tiny {
  padding-bottom: var(--nami-distance-tiny, 4px);
}
.nami-stack--padding-left-tiny, .nami-stack--padding-horizontal-tiny {
  padding-left: var(--nami-distance-tiny, 4px);
}
.nami-stack--padding-right-tiny, .nami-stack--padding-horizontal-tiny {
  padding-right: var(--nami-distance-tiny, 4px);
}
.nami-stack--padding-small {
  padding: var(--nami-distance-small, 8px);
}
.nami-stack--padding-top-small, .nami-stack--padding-vertical-small {
  padding-top: var(--nami-distance-small, 8px);
}
.nami-stack--padding-bottom-small, .nami-stack--padding-vertical-small {
  padding-bottom: var(--nami-distance-small, 8px);
}
.nami-stack--padding-left-small, .nami-stack--padding-horizontal-small {
  padding-left: var(--nami-distance-small, 8px);
}
.nami-stack--padding-right-small, .nami-stack--padding-horizontal-small {
  padding-right: var(--nami-distance-small, 8px);
}
.nami-stack--padding-middle {
  padding: var(--nami-distance-middle, 12px);
}
.nami-stack--padding-top-middle, .nami-stack--padding-vertical-middle {
  padding-top: var(--nami-distance-middle, 12px);
}
.nami-stack--padding-bottom-middle, .nami-stack--padding-vertical-middle {
  padding-bottom: var(--nami-distance-middle, 12px);
}
.nami-stack--padding-left-middle, .nami-stack--padding-horizontal-middle {
  padding-left: var(--nami-distance-middle, 12px);
}
.nami-stack--padding-right-middle, .nami-stack--padding-horizontal-middle {
  padding-right: var(--nami-distance-middle, 12px);
}
.nami-stack--padding-large {
  padding: var(--nami-distance-large, 16px);
}
.nami-stack--padding-top-large, .nami-stack--padding-vertical-large {
  padding-top: var(--nami-distance-large, 16px);
}
.nami-stack--padding-bottom-large, .nami-stack--padding-vertical-large {
  padding-bottom: var(--nami-distance-large, 16px);
}
.nami-stack--padding-left-large, .nami-stack--padding-horizontal-large {
  padding-left: var(--nami-distance-large, 16px);
}
.nami-stack--padding-right-large, .nami-stack--padding-horizontal-large {
  padding-right: var(--nami-distance-large, 16px);
}
.nami-stack--padding-big {
  padding: var(--nami-distance-big, 24px);
}
.nami-stack--padding-top-big, .nami-stack--padding-vertical-big {
  padding-top: var(--nami-distance-big, 24px);
}
.nami-stack--padding-bottom-big, .nami-stack--padding-vertical-big {
  padding-bottom: var(--nami-distance-big, 24px);
}
.nami-stack--padding-left-big, .nami-stack--padding-horizontal-big {
  padding-left: var(--nami-distance-big, 24px);
}
.nami-stack--padding-right-big, .nami-stack--padding-horizontal-big {
  padding-right: var(--nami-distance-big, 24px);
}
.nami-stack--padding-huge {
  padding: var(--nami-distance-huge, 36px);
}
.nami-stack--padding-top-huge, .nami-stack--padding-vertical-huge {
  padding-top: var(--nami-distance-huge, 36px);
}
.nami-stack--padding-bottom-huge, .nami-stack--padding-vertical-huge {
  padding-bottom: var(--nami-distance-huge, 36px);
}
.nami-stack--padding-left-huge, .nami-stack--padding-horizontal-huge {
  padding-left: var(--nami-distance-huge, 36px);
}
.nami-stack--padding-right-huge, .nami-stack--padding-horizontal-huge {
  padding-right: var(--nami-distance-huge, 36px);
}
.nami-stack--padding-massive {
  padding: var(--nami-distance-massive, 60px);
}
.nami-stack--padding-top-massive, .nami-stack--padding-vertical-massive {
  padding-top: var(--nami-distance-massive, 60px);
}
.nami-stack--padding-bottom-massive, .nami-stack--padding-vertical-massive {
  padding-bottom: var(--nami-distance-massive, 60px);
}
.nami-stack--padding-left-massive, .nami-stack--padding-horizontal-massive {
  padding-left: var(--nami-distance-massive, 60px);
}
.nami-stack--padding-right-massive, .nami-stack--padding-horizontal-massive {
  padding-right: var(--nami-distance-massive, 60px);
}
.nami-stack--spacing-micor, .nami-stack--spacing-horizontal-micor {
  --nami-stack--spacing-horizontal: var(--nami-distance-micor, 1px);
}
.nami-stack--spacing-micor, .nami-stack--spacing-vertical-micor {
  --nami-stack--spacing-vertical: var(--nami-distance-micor, 1px);
}
.nami-stack--spacing-mini, .nami-stack--spacing-horizontal-mini {
  --nami-stack--spacing-horizontal: var(--nami-distance-mini, 2px);
}
.nami-stack--spacing-mini, .nami-stack--spacing-vertical-mini {
  --nami-stack--spacing-vertical: var(--nami-distance-mini, 2px);
}
.nami-stack--spacing-tiny, .nami-stack--spacing-horizontal-tiny {
  --nami-stack--spacing-horizontal: var(--nami-distance-tiny, 4px);
}
.nami-stack--spacing-tiny, .nami-stack--spacing-vertical-tiny {
  --nami-stack--spacing-vertical: var(--nami-distance-tiny, 4px);
}
.nami-stack--spacing-small, .nami-stack--spacing-horizontal-small {
  --nami-stack--spacing-horizontal: var(--nami-distance-small, 8px);
}
.nami-stack--spacing-small, .nami-stack--spacing-vertical-small {
  --nami-stack--spacing-vertical: var(--nami-distance-small, 8px);
}
.nami-stack--spacing-middle, .nami-stack--spacing-horizontal-middle {
  --nami-stack--spacing-horizontal: var(--nami-distance-middle, 12px);
}
.nami-stack--spacing-middle, .nami-stack--spacing-vertical-middle {
  --nami-stack--spacing-vertical: var(--nami-distance-middle, 12px);
}
.nami-stack--spacing-large, .nami-stack--spacing-horizontal-large {
  --nami-stack--spacing-horizontal: var(--nami-distance-large, 16px);
}
.nami-stack--spacing-large, .nami-stack--spacing-vertical-large {
  --nami-stack--spacing-vertical: var(--nami-distance-large, 16px);
}
.nami-stack--spacing-big, .nami-stack--spacing-horizontal-big {
  --nami-stack--spacing-horizontal: var(--nami-distance-big, 24px);
}
.nami-stack--spacing-big, .nami-stack--spacing-vertical-big {
  --nami-stack--spacing-vertical: var(--nami-distance-big, 24px);
}
.nami-stack--spacing-huge, .nami-stack--spacing-horizontal-huge {
  --nami-stack--spacing-horizontal: var(--nami-distance-huge, 36px);
}
.nami-stack--spacing-huge, .nami-stack--spacing-vertical-huge {
  --nami-stack--spacing-vertical: var(--nami-distance-huge, 36px);
}
.nami-stack--spacing-massive, .nami-stack--spacing-horizontal-massive {
  --nami-stack--spacing-horizontal: var(--nami-distance-massive, 60px);
}
.nami-stack--spacing-massive, .nami-stack--spacing-vertical-massive {
  --nami-stack--spacing-vertical: var(--nami-distance-massive, 60px);
}
.nami-stack--wrap {
  flex-wrap: wrap;
}

.nami-stack__item {
  margin: 0 !important;
}
.nami-stack__item--col, .nami-stack__item--flex {
  min-width: var(--nami-stack__item--min-width);
  min-height: var(--nami-stack__item--min-height);
}
.nami-stack--horizontal > .nami-stack__item--col, .nami-stack--horizontal > .nami-stack__item--flex {
  --nami-stack__item--min-width: 0px;
  --nami-stack__item--col-spacing: var(--nami-stack--spacing-horizontal, 0px);
}
.nami-stack--vertical > .nami-stack__item--col, .nami-stack--vertical > .nami-stack__item--flex {
  --nami-stack__item--min-height: 0px;
  --nami-stack__item--col-spacing: var(--nami-stack--spacing-vertical, 0px);
}

.nami-stack__item--flex {
  flex: 1 1 0;
}
.nami-stack__item--col {
  flex: 0 0 0;
}
.nami-stack__item--col.nami-stack__item--flex {
  flex-shrink: 1;
}
.nami-stack__item--col.nami-stack__item--col-0 {
  display: none;
}
.nami-stack__item--col-1 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 23) / 24 );
}
.nami-stack__item--col-2 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 11) / 12 );
}
.nami-stack__item--col-3 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 7) / 8 );
}
.nami-stack__item--col-4 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 5) / 6 );
}
.nami-stack__item--col-5 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 3.8) / 4.8 );
}
.nami-stack__item--col-6 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 3) / 4 );
}
.nami-stack__item--col-7 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 2.4285714286) / 3.4285714286 );
}
.nami-stack__item--col-8 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 2) / 3 );
}
.nami-stack__item--col-9 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 1.6666666667) / 2.6666666667 );
}
.nami-stack__item--col-10 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 1.4) / 2.4 );
}
.nami-stack__item--col-11 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 1.1818181818) / 2.1818181818 );
}
.nami-stack__item--col-12 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 1) / 2 );
}
.nami-stack__item--col-13 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.8461538462) / 1.8461538462 );
}
.nami-stack__item--col-14 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.7142857143) / 1.7142857143 );
}
.nami-stack__item--col-15 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.6) / 1.6 );
}
.nami-stack__item--col-16 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.5) / 1.5 );
}
.nami-stack__item--col-17 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.4117647059) / 1.4117647059 );
}
.nami-stack__item--col-18 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.3333333333) / 1.3333333333 );
}
.nami-stack__item--col-19 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.2631578947) / 1.2631578947 );
}
.nami-stack__item--col-20 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.2) / 1.2 );
}
.nami-stack__item--col-21 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.1428571429) / 1.1428571429 );
}
.nami-stack__item--col-22 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.0909090909) / 1.0909090909 );
}
.nami-stack__item--col-23 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0.0434782609) / 1.0434782609 );
}
.nami-stack__item--col-24 {
  flex-basis: calc( (100% - var(--nami-stack__item--col-spacing) * 0) / 1 );
}
.nami-stack__item--align-start {
  align-self: flex-start;
}
.nami-stack__item--align-end {
  align-self: flex-end;
}
.nami-stack__item--align-center {
  align-self: center;
}
.nami-stack__item--align-stretch {
  align-self: stretch;
}