@dialpad/dialtone-css/lib/build/less/components/stack.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: STACK
//
//  These are the styles for stack component.
//
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//  • VISUAL STYLES
//  • ALIGNMENT
//  • JUSTIFY
//  • SIZES
//  • RESPONSIVE STYLE

//  @@  BASE STYLE
//  ----------------------------------------------------------------------------

.direction-options() {
  &-column {
    --stack-direction: column;
    --stack-align: initial;
  }

  &-column-reverse {
    --stack-direction: column-reverse;
    --stack-align: initial;
  }

  &-row {
    --stack-direction: row;
    --stack-align: center;
  }

  &-row-reverse {
    --stack-direction: row-reverse;
    --stack-align: center;
  }
}

.gap-options() {
  &-gap-50 {
    .d-stack--gap-50();
  }

  &-gap-100 {
    .d-stack--gap-100();
  }

  &-gap-200 {
    .d-stack--gap-200();
  }

  &-gap-300 {
    .d-stack--gap-300();
  }

  &-gap-350 {
    .d-stack--gap-350();
  }

  &-gap-400 {
    .d-stack--gap-400();
  }

  &-gap-450 {
    .d-stack--gap-450();
  }

  &-gap-500 {
    .d-stack--gap-500();
  }

  &-gap-525 {
    .d-stack--gap-525();
  }

  &-gap-550 {
    .d-stack--gap-550();
  }

  &-gap-600 {
    .d-stack--gap-600();
  }

  &-gap-625 {
    .d-stack--gap-625();
  }

  &-gap-650 {
    .d-stack--gap-650();
  }

  &-gap-700 {
    .d-stack--gap-700();
  }
}

.align-options() {
  &-align-start {
    align-items: start;
  }

  &-align-center {
    align-items: center;
  }

  &-align-end {
    align-items: end;
  }

  &-align-stretch {
    align-items: stretch;
  }

  &-align-baseline {
    align-items: baseline;
  }
}

.justify-options() {
  &-justify-start {
    justify-content: start;
  }

  &-justify-center {
    justify-content: center;
  }

  &-justify-end {
    justify-content: end;
  }

  &-justify-around {
    justify-content: space-around;
  }

  &-justify-between {
    justify-content: space-between;
  }

  &-justify-evenly {
    justify-content: space-evenly;
  }
}

.d-stack {
  --stack-gap: 0;
  --stack-direction: column;
  --stack-align: initial;
  --stack-justify: initial;

  display: flex;
  flex-direction: var(--stack-direction);
  gap: var(--stack-gap);
  align-items: var(--stack-align);
  justify-content: var(--stack-justify);
}

//  ============================================================================
//  $   VISUAL STYLES
//  ----------------------------------------------------------------------------
//  $$  COLUMN-REVERSE
//  ----------------------------------------------------------------------------
.d-stack--column-reverse {
  --stack-direction: column-reverse;
  --stack-align: initial;
}

//  ----------------------------------------------------------------------------
//  $$  ROW
//  ----------------------------------------------------------------------------
.d-stack--row {
  --stack-direction: row;
  --stack-align: center;
}

//  ----------------------------------------------------------------------------
//  $$  ROW-REVERSE
//  ----------------------------------------------------------------------------
.d-stack--row-reverse {
  --stack-direction: row-reverse;
  --stack-align: center;
}

//  ============================================================================
//  $   ALIGNMENT
//  ----------------------------------------------------------------------------

.d-stack--align-start {
  --stack-align: start;
}

.d-stack--align-center {
  --stack-align: center;
}

.d-stack--align-end {
  --stack-align: end;
}

.d-stack--align-stretch {
  --stack-align: stretch;
}

.d-stack--align-baseline {
  --stack-align: baseline;
}

//  ============================================================================
//  $   JUSTIFY
//  ----------------------------------------------------------------------------

.d-stack--justify-start {
  --stack-justify: start;
}

.d-stack--justify-center {
  --stack-justify: center;
}

.d-stack--justify-end {
  --stack-justify: end;
}

.d-stack--justify-around {
  --stack-justify: space-around;
}

.d-stack--justify-between {
  --stack-justify: space-between;
}

.d-stack--justify-evenly {
  --stack-justify: space-evenly;
}

//  ============================================================================
//  $   SIZES
//  ----------------------------------------------------------------------------
.d-stack--gap-50  { --stack-gap: var(--dt-space-50); }
.d-stack--gap-100 { --stack-gap: var(--dt-space-100); }
.d-stack--gap-200 { --stack-gap: var(--dt-space-200); }
.d-stack--gap-300 { --stack-gap: var(--dt-space-300); }
.d-stack--gap-350 { --stack-gap: var(--dt-space-350); }
.d-stack--gap-400 { --stack-gap: var(--dt-space-400); }
.d-stack--gap-450 { --stack-gap: var(--dt-space-450); }
.d-stack--gap-500 { --stack-gap: var(--dt-space-500); }
.d-stack--gap-525 { --stack-gap: var(--dt-space-525); }
.d-stack--gap-550 { --stack-gap: var(--dt-space-550); }
.d-stack--gap-600 { --stack-gap: var(--dt-space-600); }
.d-stack--gap-625 { --stack-gap: var(--dt-space-625); }
.d-stack--gap-650 { --stack-gap: var(--dt-space-650); }
.d-stack--gap-700 { --stack-gap: var(--dt-space-700); }

//  ============================================================================
//  $   RESPONSIVE
//  ----------------------------------------------------------------------------
//  $$ SMALL
//  ----------------------------------------------------------------------------
.d-stack--sm {
  @media screen and (min-width: 480px) {
    .direction-options();
    .gap-options();
    .align-options();
    .justify-options();
  }
}

//  $$  MEDIUM
//  ----------------
.d-stack--md {
  @media screen and (min-width: 640px) {
    .direction-options();
    .gap-options();
    .align-options();
    .justify-options();
  }
}

//  $$  LARGE
//  ----------------------------------------------------------------------------
.d-stack--lg {
  @media screen and (min-width: 980px) {
    .direction-options();
    .gap-options();
    .align-options();
    .justify-options();
  }
}

//  $$  EXTRA LARGE
//  ----------------------------------------------------------------------------
.d-stack--xl {
  @media screen and (min-width: 1264px) {
    .direction-options();
    .gap-options();
    .align-options();
    .justify-options();
  }
}