Skip to main content

Mixins

flex Mixin​

Quickly create flexbox layouts:

@mixin flex($direction: row, $justify: normal, $align: normal, $wrap: nowrap) // Usage
  .my-container {
  @include flex($justify: center, $align: center);
}

.my-column {
  @include flex($direction: column, $justify: space-between);
}

font Mixin​

Apply font styles consistently:

@mixin font($size: $t3-text, $color: $primary-text-clr, $weight: normal) // Usage
  .my-label {
  @include font($size: $t4-text, $color: $ink-lighter-clr, $weight: bold);
}

typography Mixin​

Enhanced typography with more options:

@mixin typography(
    $size: 14,
    $weight: "regular",
    $color: $primary-text-clr,
    $line-height: 1.5,
    $family: $primary-font
  ) // Usage
  .field-label {
  @include typography(14, "bold", $primary-text-clr);
}

.section-heading {
  @include typography(16, "bold", $primary-text-clr);
}

text-truncate Mixin​

Truncate text with ellipsis:

@mixin text-truncate($lines: 1) // Single line truncation
  .truncate-single {
  @include text-truncate(1);
}

// Multi-line truncation
.truncate-multi {
  @include text-truncate(3);
}

transition-linear Mixin​

Standard transition for hover effects:

@mixin transition-linear // Usage
  .my-button {
  @include transition-linear;
  &:hover {
    background: $brand-hover-color;
  }
}

Utility Classes​

Font Size Classes​

.fs-12, .f12  // 12px
.fs-14, .f14  // 14px
.fs-16, .f16  // 16px
.fs-18, .f18  // 18px
.fs-20, .f20  // 20px
.fs-24, .f24  // 24px

Font Weight Classes​

.fw-regular  // 400
.fw-medium   // 500
.fw-bold     // 600
.fw-bolder   // 900
.bold        // 600 (legacy)
.bolder      // 900 (legacy)

Line Height Classes​

.lh-tight    // 1.2
.lh-normal   // 1.5
.lh-relaxed  // 1.75
.lh-loose    // 2

Text Truncation Classes​

.text-truncate    // Single line
.text-truncate-2  // 2 lines
.text-truncate-3  // 3 lines

Creating New Components​

When adding new components, follow this pattern:

// 1. Import helpers
@import "../helpers/index.scss";

// 2. Scope under .cm-admin
.cm-admin .my-component {
  // 3. Extend Bootstrap classes
  @extend .d-flex, .align-items-center;

  // 4. Use cm-admin variables
  background: $grey-lightest-clr;
  border-radius: $radius-4;

  // 5. Use mixins for common patterns
  @include font($size: $t4-text, $color: $primary-text-clr);

  // 6. Add custom styles
  padding: 16px;

  &:hover {
    @include transition-linear;
    background: $grey-lighter-clr;
  }
}

Example: Custom Alert​

@import "../helpers/index";

.cm-admin .alert {
  @extend .alert-dismissible, .d-flex, .align-items-center;
}

.flag-alert {
  max-width: 752px;
  padding: 24px;
  background: $red-lightest-clr;
  border-radius: $radius-4;

  .alert-header {
    @include font($size: $t6-text, $color: $red-regular-clr, $weight: bold);
    text-transform: uppercase;
  }

  .alert-body {
    margin-top: 16px;

    .body-title {
      @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
    }
  }
}

Best Practices​

  1. Always scope under .cm-admin - Prevents style leakage
  2. Use @extend for Bootstrap classes - Keeps markup clean
  3. Prefer variables over hardcoded values - Ensures consistency
  4. Use mixins for repeated patterns - Reduces code duplication
  5. Follow the color scale - Use semantic colors for states (error, success, etc.)