Profile Detail

Installation

  yarn add @chewy/kib-profile-styles

Import

  @use '~@chewy/kib-profile-styles/src/kib-profile-detail/styles' as kib-profile-detail;

Mixins

item

@mixin item() { ... }@mixin item() { 
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
 }
Description

Profile avatar image styles

Parameters

None.

label

@mixin label() { ... }@mixin label() { 
  @include typography.style-as('caption');

  color: color.get('text', 'tertiary');

  #{$parent}--airy & {
    @include label-airy;
  }
 }
Description

Profile label styles

Parameters

None.

Requires

content

@mixin content() { ... }@mixin content() { 
  @include typography.style-as('paragraph-2');

  color: color.get('text', 'primary');

  #{$parent}--airy & {
    @include content-airy;
  }
 }
Description

Profile content styles

Parameters

None.

Requires

label-airy

@mixin label-airy() { ... }@mixin label-airy() { 
  @include typography.style-as('paragraph-2');

  @container kib-profile-card (max-width: #{settings.$card-condensed-max-width}) {
    @include typography.style-as('caption');
  }
 }
Description

Profile label airy styles

Parameters

None.

Requires
Used by

content-airy

@mixin content-airy() { ... }@mixin content-airy() { 
  @include typography.style-as('paragraph-1');

  @container kib-profile-card (max-width: #{settings.$card-condensed-max-width}) {
    @include typography.style-as('paragraph-2');
  }
 }
Description

Profile content airy styles

Parameters

None.

Requires
Used by