Profile Card

Installation

  yarn add @chewy/kib-profile-styles

Import

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

Mixins

icon

@mixin icon() { ... }@mixin icon() { 
  width: unit.rem(24px);
  height: unit.rem(24px);
 }
Description

icon styles

Parameters

None.

Requires

disabled

@mixin disabled() { ... }@mixin disabled() { 
  opacity: 0.5;
  pointer-events: none;
 }
Description

disabled styles

Parameters

None.

button

@mixin button() { ... }@mixin button() { 
  @include card.card;

  position: absolute;
  inset: 0;
  box-sizing: border-box;

  border-width: var(--kib-profile-ingress-border-width);
  border-style: solid;
  border-radius: border.get('br02');
  border-color: var(--kib-profile-ingress-border-color);

  outline: 0;

  background: none;

  cursor: pointer;

  &:hover {
    box-shadow: none;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --kib-profile-ingress-border-color: #{color.get(
          'ct',
          'ingress-card',
          'container',
          'hover',
          'border-color'
        )};
    }
  }

  &:focus-visible {
    --kib-profile-ingress-border-width: #{border.get(
        'ct',
        'ingress-card',
        'border-width',
        'focused'
      )};
    --kib-profile-ingress-border-color: #{color.get(
        'ct',
        'ingress-card',
        'container',
        'focus',
        'border-color'
      )};
    outline: 0;
  }

  &:active {
    --kib-profile-ingress-border-width: #{border.get(
        'ct',
        'ingress-card',
        'border-width',
        'standard'
      )};
    --kib-profile-ingress-border-color: #{color.get(
        'ct',
        'ingress-card',
        'container',
        'pressed',
        'border-color'
      )};
    box-shadow: none;
  }
 }
Description

overlay button styles Uses the same CT ingress-card border tokens as kib-ingress-card (gray outline; not CTA blue).

Parameters

None.

Requires

card

@mixin card() { ... }@mixin card() { 
  container: kib-profile-card / inline-size;
 }
Description

profile card styles

Parameters

None.

card-heading

@mixin card-heading() { ... }@mixin card-heading() { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--kib-profile-card-heading-spacing, #{spacing.get('s3')});
  margin-bottom: 0;
 }
Description

heading styles

Parameters

None.

Requires

card-heading-airy

@mixin card-heading-airy() { ... }@mixin card-heading-airy() { 
  --kib-profile-card-heading-spacing: #{spacing.get('s4')};

  margin-bottom: 0;

  // does not use customer properites
  @container kib-profile-card (max-width: #{settings.$card-condensed-max-width}) {
    --kib-profile-card-heading-spacing: #{spacing.get('s3')};

    margin-bottom: 0;
  }
 }
Description

heading airy styles

Parameters

None.

Requires

card-content

@mixin card-content() { ... }@mixin card-content() { 
  margin: var(--kib-profile-card-content-spacing, #{spacing.get('s3')});
 }
Description

content styles

Parameters

None.

Requires

card-content-airy

@mixin card-content-airy() { ... }@mixin card-content-airy() { 
  --kib-profile-card-content-spacing: #{spacing.get('s4')};

  @container (max-width: #{settings.$card-condensed-max-width}) {
    --kib-profile-card-content-spacing: #{spacing.get('s3')};
  }
 }
Description

content airy styles

Parameters

None.

Requires