Chirp Sass Documentation

General

Css

/// Content styling for carousel items
///
/// Handles the visual presentation of item content including background,
/// overlay effects, and content positioning. Includes a dark gradient
/// overlay for better text readability.
///
/// @example scss
///   .kib-cover-stack-item { ... }/// Content styling for carousel items
///
/// Handles the visual presentation of item content including background,
/// overlay effects, and content positioning. Includes a dark gradient
/// overlay for better text readability.
///
/// @example scss
///   .kib-cover-stack-item {  }

Description

Cover Stack Item Mixins

This file contains mixins for the KibCoverStackItem component. The cover stack item is a single item in the cover stack carousel.

&::before { ... }&::before { content: '';
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0.74%, rgba(0, 0, 0, 0.95) 79.14%);
    border-radius: border.get('br02');
    pointer-events: none;
    z-index: 1; }

Description

Dark overlay for better text readability

/// Root container mixin for the cover stack carousel
///
/// Sets up the main container with container queries for responsive behavior,
/// touch handling, and proper sizing constraints.
///
/// @example scss
///   .kib-cover-stack { ... }/// Root container mixin for the cover stack carousel
///
/// Sets up the main container with container queries for responsive behavior,
/// touch handling, and proper sizing constraints.
///
/// @example scss
///   .kib-cover-stack {  }

Description

Cover Stack Carousel Mixins

This file contains mixins for the KibCoverStack carousel component. The cover stack creates a horizontal carousel with items that can be dragged and positioned with smooth transitions and visual effects.

& .kib-input-text__icon,
  & .kib-field__icon--action { ... }& .kib-input-text__icon,
  & .kib-field__icon--action { @include mixins.input-field-icon; }

Description

deprecate when field new is supported

.kib-input-text__icon &__adornment { ... }.kib-input-text__icon &__adornment { &.MuiInputAdornment-root {
      @include mixins.input-adornment;
    }

    .Mui-focusVisible {
      @include mixins.button-focus;
    }

    .MuiButtonBase-root {
      @include mixins.button;

      #{$parent} .kib-field__icon--action & {
        @include mixins.button-action;
      }

      #{$parent} .kib-field__icon--action &:focus {
        @include mixins.button-action-focus;
      }
    }

    #{$parent} .kib-field__icon--action &.is-expanded .MuiButtonBase-root {
      @include mixins.button-action-expanded;
    } }

Description

deprecate when field new is supported

.kib-input-text__icon &__adornment-icon { ... }.kib-input-text__icon &__adornment-icon { @include mixins.input-adornment-icon;

    .Mui-disabled & {
      @include mixins.input-adornment-icon-disabled;
    }

    #{$parent} .kib-field__icon--action .is-expanded & {
      @include mixins.input-adornment-icon-expanded;
    } }

Description

deprecate when field new is supported

.kib-field__action &__adornment { ... }.kib-field__action &__adornment { &.MuiInputAdornment-root {
      @include mixins.input-adornment-new;

      &.is-disabled {
        @include mixins.button-action-disabled;
      }
    }

    .Mui-focusVisible {
      @include mixins.button-focus;
    }

    .MuiButtonBase-root {
      @include mixins.button-new;
    }

    &.is-expanded .MuiButtonBase-root {
      @include mixins.button-action-expanded;
    } }

Description

new datepicker specific styles

.kib-field__action .Mui-disabled &__adornment-icon { ... }.kib-field__action .Mui-disabled &__adornment-icon { @include mixins.input-adornment-icon-disabled; }

Description

new datepicker specific styles

// Now uses container queries for responsive sizing
@mixin card-container { ... }// Now uses container queries for responsive sizing
@mixin card-container { width: unit.rem(264px);
  height: auto;

  @container (min-width: 361px) {
    width: unit.rem(319px);
  }

  @container (min-width: 648px) {
    width: unit.rem(296px);
  }

  @container (min-width: 1025px) {
    width: unit.rem(336px);
  }

  // Fallback for browsers without container queries
  @media (min-width: 361px) {
    width: unit.rem(319px);
  }

  @media (min-width: 648px) {
    width: unit.rem(296px);
  }

  @media (min-width: 1025px) {
    width: unit.rem(336px);
  } }

Description

Shared card sizing mixin

// Now uses container queries for responsive aspect ratio
@mixin media-container { ... }// Now uses container queries for responsive aspect ratio
@mixin media-container { width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;

  @container (min-width: #{$aspect-ratio-breakpoint}) {
    aspect-ratio: 16/7;
  }

  /// Fallback for browsers without aspect-ratio support
  @supports not (aspect-ratio: 1 / 1) {
    &::before {
      content: '';
      display: block;
      padding-top: math.percentage(math.div(9, 16)); // 56.25%
      min-height: unit.rem(124px);
    }

    @container (min-width: #{$aspect-ratio-breakpoint}) {
      &::before {
        padding-top: math.percentage(math.div(7, 16)); // ~43.75%
      }
    }

    // Fallback for browsers without container queries
    @media (min-width: #{$aspect-ratio-breakpoint}) {
      &::before {
        padding-top: math.percentage(math.div(7, 16)); // ~43.75%
      }
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  } }

Description

Shared media container mixin

&__autoship-icon { ... }&__autoship-icon { @include mixins.autoship-icon; }

&__autoship-text { ... }&__autoship-text { @include mixins.autoship-text;

    #{$parent}--condensed &,
    .kib-product-card--condensed & {
      @include mixins.autoship-text-condensed;
    } }

Mixins

@mixin root-container() { ... }@mixin root-container() { 
  @include typography.style-as('product-text-3');

  width: 100%;
  min-width: unit.rem(280px);
  max-width: unit.rem(460px);
  aspect-ratio: 4 / 3;
  background-color: color.get('ui-bg', '04');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: border.get('br02');
  padding: spacing.get('s3');
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: color.get('text', 'static', 'light', 'primary');
  font-weight: 600;
  cursor: pointer;

  /// Dark overlay for better text readability
  &::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0.74%, rgba(0, 0, 0, 0.95) 79.14%);
    border-radius: border.get('br02');
    pointer-events: none;
    z-index: 1;
  }
 }

Description

Content styling for carousel items

Handles the visual presentation of item content including background, overlay effects, and content positioning. Includes a dark gradient overlay for better text readability.

Parameters

None.

Example

.kib-cover-stack-item {
  @include root-container;
}

Requires

[function] rem
[function] get

@mixin meta-data() { ... }@mixin meta-data() { 
  .kib-article-meta-data__date {
    color: color.get('text', 'static', 'light', 'primary');
  }
  .kib-article-meta-data__category {
    color: color.get('text', 'static', 'light', 'primary');
  }
 }

Description

Meta data styling

Styles the meta data for the cover stack item.

Parameters

None.

Example

.kib-cover-stack-item {
  @include meta-data;

Requires

[function] get

@mixin root-container() { ... }@mixin root-container() { 
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: unit.rem(700px);
  min-width: unit.rem(320px);
  margin: 0 auto;
  overflow: hidden;
  touch-action: none;
  user-select: none;
 }

Description

Root container mixin for the cover stack carousel

Sets up the main container with container queries for responsive behavior, touch handling, and proper sizing constraints.

Parameters

None.

Example

.kib-cover-stack {
  @include root-container;
}

Requires

[function] rem

@mixin item() { ... }@mixin item() { 
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: unit.rem(460px);
  min-width: unit.rem(280px);
  width: 90%;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.15s ease;
  pointer-events: none;
  cursor: pointer;
  will-change: transform, filter;
  user-select: none;

  &:focus-visible {
    border: unit.rem(2px) solid color.get('link', 'active', 'primary');
    border-radius: border.get('br02f');
  }
 }

Description

Base item styling for carousel items

Provides the foundational positioning and sizing for all carousel items. Items are absolutely positioned and have responsive width constraints.

Parameters

None.

Example

.kib-cover-stack__item {
  @include item;
}

Requires

[function] rem
[function] get

@mixin item-content() { ... }@mixin item-content() { 
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: border.get('br02');
  position: relative;
  overflow: hidden;
 }

Description

Content styling for carousel items

Handles the visual presentation of item content including background, overlay effects, and content positioning. Includes a dark gradient overlay for better text readability.

Parameters

None.

Example

.kib-cover-stack__item-content {
  @include item-content;
}

Requires

[function] get

@mixin active-item() { ... }@mixin active-item() { 
  z-index: 3;
  left: 50%;
  transform: translateX(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  cursor: default;
 }

Description

Active item styling

Applies to the currently focused/selected item in the carousel. Centers the item and gives it full opacity and interaction capabilities.

Parameters

None.

Example

.kib-cover-stack__item--active {
  @include active-item;
}

@mixin start-item() { ... }@mixin start-item() { 
  @include non-active-item;

  left: 50%;
  transform: translateX(-60%) scale(0.9);

  // Reveal a bit more on wider screens
  @include media.query('min-md') {
    transform: translateX(-70%) scale(0.9);
  }
 }

Description

Start item styling

Applies to items positioned at the beginning of the carousel. Positions items to the left with reduced scale and opacity.

Parameters

None.

Example

.kib-cover-stack__item--start {
  @include start-item;
}

Requires

[mixin] non-active-item

@mixin end-item() { ... }@mixin end-item() { 
  @include non-active-item;
  left: 50%;
  transform: translateX(-40%) scale(0.9);

  // Reveal a bit more on wider screens
  @include media.query('min-md') {
    transform: translateX(-30%) scale(0.9);
  }
 }

Description

End item styling

Applies to items positioned at the end of the carousel. Positions items to the right with reduced scale and opacity.

Parameters

None.

Example

.kib-cover-stack__item--end {
  @include end-item;
}

Requires

[mixin] non-active-item

@mixin non-active-item() { ... }@mixin non-active-item() { 
  filter: blur(unit.rem(2px));
  position: absolute;
  z-index: 2;
  opacity: 0.7;
  pointer-events: auto;
  cursor: pointer;
 }

Description

Non-active item styling

Applies to items that are not currently interactive. Disables pointer events and adds a blur effect for visual hierarchy.

Parameters

None.

Example

.kib-cover-stack__item--non-active {
  @include non-active-item;
}

Requires

[function] rem

Used by

[mixin] start-item
[mixin] end-item

@mixin direction-transition() { ... }@mixin direction-transition() { 
  .kib-cover-stack__item {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
 }

Description

Use inside .kib-cover-stack--dir-left and --dir-right modifiers so we keep all timing logic in mixins like the rest of the component.

Parameters

None.

@mixin sr-only() { ... }@mixin sr-only() { 
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: unit.rem(1px);
  width: unit.rem(1px);
  margin: unit.rem(-1px);
  padding: 0;
  border: 0;
 }

Description

SR-only mixin Used to hide elements from the screen but keep them in the tab order.

Parameters

None.