Fields Password

Installation

  yarn add @chewy/kib-fields-styles

Import

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

Mixins

toggle-button

@mixin toggle-button() { ... }@mixin toggle-button() { 
  @include kib-button-new.generate-styles('utility', 'secondary', 'medium', true);

  $button-padding: map.get(kib-button-new.$icon-only-padding-sizes, medium) * 2;
  $button-height: kib-button-new.$icon-size-medium + $button-padding;

  position: absolute;
  top: calc((field-settings.$icon-size - $button-height) / 2);
  left: calc((field-settings.$icon-size - $button-height) / 2);
  cursor: pointer;
  pointer-events: auto;

  &:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
 }
Description

Password text visibility toggle button

Parameters

None.

Requires