Chirp Sass Documentation

Fields Textarea

Installation

  yarn add @chewy/kib-fields-styles

Import

  @use '~@chewy/kib-fields-styles/src/kib-input-textarea/styles' as kib-input-textarea;

Mixins

@mixin field-spacing() { ... }@mixin field-spacing() { 
  padding-top: settings.$field-spacing;
 }

Description

Adds spacing to field wrapper to prevent overlap of content with floating label on overflow scroll

Parameters

None.

Requires

[variable] field-spacing

Author

@mixin field-textarea-control() { ... }@mixin field-textarea-control() { 
  min-height: settings.$height;
  resize: vertical;

  &[readonly] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
 }

Description

Additional textarea control styles

Parameters

None.

Requires

[variable] height

Author

@mixin field-textarea-outline() { ... }@mixin field-textarea-outline() { 
  #{$block}__control[readonly] ~ & {
    &::before {
      $border-width: unit.rem(1px);
      $radius: settings.$radius - $border-width;

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: settings.$field-spacing;
      background-color: settings.$background-color-read-only;
      border-radius: $radius $radius 0 0;
      content: '';
    }
  }

  #{$block}__control[readonly]:focus ~ & {
    &::before {
      left: unit.rem(1px);
      right: unit.rem(1px);
    }
  }
 }

Description

Additional textarea control styles

Parameters

None.

Requires

[function] rem
[variable] border-width
[variable] radius
[variable] field-spacing
[variable] background-color-read-only

Author

Variables

$field-spacing: spacing.get('s4') !default;

Description

Spacing between control and floating label to prevent overlap on overflow scroll

Type

Number

Used by

[mixin] field-spacing
[mixin] field-textarea-outline

Author

$height: unit.rem(72px) !default;

Description

Textarea control's minimum height when resized vertically

Type

Number