@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
//  • SIZES
//  • RESPONSIVE STYLE

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

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

    justify-content: flex-start;
  }

  &-column-reverse {
    --stack-direction: column-reverse;

    justify-content: flex-start;
  }

  &-row {
    --stack-direction: row;

    align-items: center;
    justify-content: normal;
  }

  &-row-reverse {
    --stack-direction: row-reverse;

    align-items: center;
    justify-content: normal;
  }
}

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

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

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

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

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

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

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

.d-stack {
  --stack-gap: 0;
  --stack-direction: column;

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

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

  justify-content: flex-start;
}

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

  align-items: center;
  justify-content: normal;
}

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

  align-items: center;
  justify-content: normal;
}

//  ============================================================================
//  $   SIZES
//  ----------------------------------------------------------------------------
.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-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-600 { --stack-gap: var(--dt-space-600); }


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

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

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

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