package.components.FormControl.form-control.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
@use '../../sass-utilities' as *;

@include pf-root($form-control) {
  --#{$form-control}--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
  --#{$form-control}--Color: var(--pf-t--global--text--color--regular);
  --#{$form-control}--FontSize: var(--pf-t--global--font--size--body--default);
  --#{$form-control}--LineHeight: var(--pf-t--global--font--line-height--body);
  --#{$form-control}--Resize: none;
  --#{$form-control}--OutlineOffset: -6px;
  --#{$form-control}--BorderRadius: var(--pf-t--global--border--radius--small);
  --#{$form-control}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
  --#{$form-control}--before--BorderStyle: solid;
  --#{$form-control}--before--BorderColor: var(--pf-t--global--border--color--default);
  --#{$form-control}--before--BorderRadius: var(--#{$form-control}--BorderRadius);
  --#{$form-control}--after--BorderWidth: var(--pf-t--global--border--width--control--default);
  --#{$form-control}--after--BorderStyle: solid;
  --#{$form-control}--after--BorderColor: transparent;
  --#{$form-control}--after--BorderRadius: var(--#{$form-control}--BorderRadius);
  --#{$form-control}--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --#{$form-control}--Width: 100%;

  // padding
  --#{$form-control}--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
  --#{$form-control}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
  --#{$form-control}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
  --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--inset--base);
  --#{$form-control}--PaddingInlineStart: var(--#{$form-control}--inset--base);

  // hover
  --#{$form-control}--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
  --#{$form-control}--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
  --#{$form-control}--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
  --#{$form-control}--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
  --#{$form-control}--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);

  // expanded
  --#{$form-control}--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
  --#{$form-control}--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);

  // placeholder
  --#{$form-control}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
  --#{$form-control}--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);

  // disabled
  --#{$form-control}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
  --#{$form-control}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
  --#{$form-control}--m-disabled--after--BorderColor: transparent;

  // readonly
  --#{$form-control}--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
  --#{$form-control}--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
  --#{$form-control}--m-readonly--hover--after--BorderColor: revert;

  // readonly plain
  --#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
  --#{$form-control}--m-readonly--m-plain--BorderColor: transparent;
  --#{$form-control}--m-readonly--m-plain--inset--base: 0;
  --#{$form-control}--m-readonly--m-plain--OutlineOffset: 0;

  // success
  --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
  --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
  --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));

  // warning
  --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
  --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
  --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));

  // error
  --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
  --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
  --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
  --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);

  // custom icon
  --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
  --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
  --#{$form-control}--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
  --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
  --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}--inset--base);
  --#{$form-control}__select--PaddingInlineStart: var(--#{$form-control}--inset--base);

  // Select success
  --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));

  // Select warning
  --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));

  // Select invalid
  --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));

  // Textarea
  --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
  --#{$form-control}--textarea--Height: auto;
  --#{$form-control}--textarea--PaddingBlockStart--offset: calc(-1 * var(--#{$form-control}--OutlineOffset));
  --#{$form-control}--textarea--PaddingBlockEnd--offset: calc(-1 * var(--#{$form-control}--OutlineOffset));
  --#{$form-control}--textarea--PaddingInlineEnd--offset: calc(-1 * var(--#{$form-control}--OutlineOffset));
  --#{$form-control}--textarea--PaddingInlineStart--offset: calc(-1 * var(--#{$form-control}--OutlineOffset));

  // Form control icon
  --#{$form-control}__icon--Color: var(--pf-t--global--icon--color--regular);
  --#{$form-control}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
  --#{$form-control}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
  --#{$form-control}--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
  --#{$form-control}--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
  --#{$form-control}--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);

  // Form control utilities
  --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
  --#{$form-control}__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
  --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--inset--base);

  // Form control select toggle icon
  --#{$form-control}__toggle-icon--PaddingInlineEnd: var(--#{$form-control}--inset--base);
  --#{$form-control}__toggle-icon--PaddingInlineStart: var(--#{$form-control}--inset--base);
  --#{$form-control}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
  --#{$form-control}--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
}

.#{$form-control} {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--#{$form-control}--ColumnGap);
  align-items: start;
  width: var(--#{$form-control}--Width);
  font-size: var(--#{$form-control}--FontSize);
  line-height: var(--#{$form-control}--LineHeight);
  resize: var(--#{$form-control}--Resize);
  background-color: var(--#{$form-control}--BackgroundColor);
  border-radius: var(--#{$form-control}--BorderRadius);

  &::before,
  &::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
  }

  &::before {
    border-color: var(--#{$form-control}--before--BorderColor);
    border-style: var(--#{$form-control}--before--BorderStyle);
    border-width: var(--#{$form-control}--before--BorderWidth);
    border-radius: var(--#{$form-control}--before--BorderRadius);
  }

  &::after {
    border: var(--#{$form-control}--after--BorderWidth) var(--#{$form-control}--after--BorderStyle) var(--#{$form-control}--after--BorderColor);
    border-radius: var(--#{$form-control}--before--BorderRadius);
  }

  > :is(input, select, textarea) {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    padding-block-start: var(--#{$form-control}--PaddingBlockStart);
    padding-block-end: var(--#{$form-control}--PaddingBlockEnd);
    padding-inline-start: var(--#{$form-control}--PaddingInlineStart);
    padding-inline-end: var(--#{$form-control}--PaddingInlineEnd);
    color: var(--#{$form-control}--Color);
    background-color: transparent;
    border: none;
    border-radius: var(--#{$form-control}--BorderRadius);
    outline-offset: var(--#{$form-control}--OutlineOffset);

    // stylelint-disable
    -moz-appearance: none;
    -webkit-appearance: none;
    // stylelint-enable
  }

  > ::placeholder {
    color: var(--#{$form-control}--m-placeholder--Color); // TODO update to set --#{$form-control}--Color in breaking change - also look for any other place to do that in this component
  }

  > :is(input, select) {
    text-overflow: ellipsis;
  }

  &.pf-m-textarea {
    padding-block-start: var(--#{$form-control}--textarea--PaddingBlockStart--offset);
    padding-block-end: var(--#{$form-control}--textarea--PaddingBlockEnd--offset);
    padding-inline-start: var(--#{$form-control}--textarea--PaddingInlineStart--offset);
    padding-inline-end: var(--#{$form-control}--textarea--PaddingInlineEnd--offset);
   
    &.pf-m-success,
    &.pf-m-warning,
    &.pf-m-error {
      --#{$form-control}--m-status--PaddingInlineEnd--offset: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--ColumnGap)); 
    }

    > textarea {
      padding-block-start: calc(var(--#{$form-control}--PaddingBlockStart) - var(--#{$form-control}--textarea--PaddingBlockStart--offset));
      padding-block-end: calc(var(--#{$form-control}--PaddingBlockEnd) - var(--#{$form-control}--textarea--PaddingBlockEnd--offset));
      padding-inline-start: calc(var(--#{$form-control}--PaddingInlineStart) - var(--#{$form-control}--textarea--PaddingInlineStart--offset));
      padding-inline-end: calc(var(--#{$form-control}--PaddingInlineEnd) - var(--#{$form-control}--textarea--PaddingInlineEnd--offset) + var(--#{$form-control}--m-status--PaddingInlineEnd--offset, 0));  
      outline-offset: 0;
      scrollbar-gutter: stable;
    }
  }

  &.pf-m-readonly {
    --#{$form-control}--BackgroundColor: var(--#{$form-control}--m-readonly--BackgroundColor);
    --#{$form-control}--before--BorderColor: var(--#{$form-control}--m-readonly--BorderColor);

    &:hover {
      --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
    }

    // stylelint-disable selector-not-notation
    &:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
      --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
    }

    &.pf-m-plain {
      --#{$form-control}--m-readonly--BackgroundColor: var(--#{$form-control}--m-readonly--m-plain--BackgroundColor);
      --#{$form-control}--m-readonly--BorderColor: var(--#{$form-control}--m-readonly--m-plain--BorderColor);
      --#{$form-control}--inset--base: var(--#{$form-control}--m-readonly--m-plain--inset--base);
      --#{$form-control}--before--BorderStyle: none;
      --#{$form-control}--after--BorderStyle: none;
      --#{$form-control}--OutlineOffset: var(--#{$form-control}--m-readonly--m-plain--OutlineOffset);
    }
  }

  &.pf-m-expanded {
    --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-expanded--after--BorderColor);
    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-expanded--after--BorderWidth);
  }

  &.pf-m-disabled {
    --#{$form-control}--BackgroundColor: var(--#{$form-control}--m-disabled--BackgroundColor);
    --#{$form-control}--Color: var(--#{$form-control}--m-disabled--Color);
    --#{$form-control}--m-placeholder--Color: var(--#{$form-control}--m-disabled--Color);
    --#{$form-control}__toggle-icon--Color: var(--#{$form-control}--m-disabled__toggle-icon--Color);
    --#{$form-control}--before--BorderStyle: none;
    --#{$form-control}--after--BorderStyle: none;

    cursor: not-allowed;
  }

  &.pf-m-error {
    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-error--PaddingInlineEnd);
    --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-error--after--BorderColor);
    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-error--hover--after--BorderColor);
    --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd);
    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);

    &.pf-m-icon {
      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
    }
  }

  &.pf-m-success {
    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-success--PaddingInlineEnd);
    --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-success--after--BorderColor);
    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-success--hover--after--BorderColor);
    --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd);
    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-success--after--BorderWidth);

    &.pf-m-icon {
      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
    }
  }

  &.pf-m-warning {
    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-warning--PaddingInlineEnd);
    --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-warning--after--BorderColor);
    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-warning--hover--after--BorderColor);
    --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
    --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd);
    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-warning--after--BorderWidth);

    &.pf-m-icon {
      --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--icon--PaddingInlineEnd);
    }
  }

  &:hover {
    --#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
  }

  &.pf-m-icon {
    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--PaddingInlineEnd);
  }

  > select {
    --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}__select--PaddingInlineEnd);
    --#{$form-control}--PaddingInlineStart: var(--#{$form-control}__select--PaddingInlineStart);

    // Firefox's select text has additional padding
    // stylelint-disable-next-line
    @-moz-document url-prefix() {
      --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) - 1px);
      --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__select--PaddingInlineStart) - 4px);
    }

    // We need this property for certain Linux distros/non-Mac OS where dark theme styles aren't applied properly.
    background-color: var(--#{$form-control}--BackgroundColor);
  }

  &.pf-m-placeholder > select {
    --#{$form-control}--Color: var(--#{$form-control}--m-placeholder--Color);

    * {
      // We need to use the color property instead of redefining a var
      // for certain Linux distros/non-Mac OS
      color: var(--#{$form-control}--m-placeholder--child--Color);

      // stylelint-disable max-nesting-depth
      &:disabled {
        color: revert;
      }
      // stylelint-enable
    }
  }

  > textarea {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    resize: none;
  }

  &.pf-m-resize-vertical {
    --#{$form-control}--Resize: vertical;

    overflow: auto;
  }

  &.pf-m-resize-horizontal {
    --#{$form-control}--Resize: horizontal;

    overflow: auto;
  }

  &.pf-m-resize-both {
    --#{$form-control}--Resize: both;

    overflow: auto;
  }
}

.#{$form-control}__icon {
  font-size: var(--#{$form-control}__icon--FontSize);
  color: var(--#{$form-control}__icon--Color);

  &.pf-m-status {
    --#{$form-control}__icon--Color: var(--#{$form-control}__icon--m-status--Color);
  }
}

.#{$form-control}__toggle-icon {
  grid-row: 1 / 2;
  grid-column: 3;
  padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingInlineStart);
  padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingInlineEnd);
  color: var(--#{$form-control}__toggle-icon--Color);
  pointer-events: none;
}

.#{$form-control}__utilities {
  display: flex;
  flex-wrap: nowrap;
  grid-row: 1 / 2;
  grid-column: 2;
  gap: var(--#{$form-control}__utilities--Gap);
  padding-block-start: var(--#{$form-control}__utilities--PaddingBlockStart);
  padding-inline-end: var(--#{$form-control}__utilities--PaddingInlineEnd);
  pointer-events: none;
}

select ~ .#{$form-control}__utilities {
  --#{$form-control}__utilities--PaddingInlineEnd: 0;
}