themes.primefaces-material-light-common.extensions._mixins.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces-themes
There is a newer version: 15.0.0
@use 'sass:list';

@mixin filled-input() {
  @include filled-input-default();
  @include filled-input-interaction();
}

@mixin filled-input-wrapper() {
  @include filled-input-wrapper-default();
  @include filled-input-wrapper-interaction();
}

@mixin filled-input-default() {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid transparent;
  background: $inputFilledBg no-repeat;
  background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, list.nth($inputBorder, 3), list.nth($inputBorder, 3));
  background-size: 0 2px, 100% 1px;
  background-position: 50% 100%, 50% 100%;
  background-origin: border-box;
}

@mixin invalid-filled-input() {
  border-color: transparent;
  background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);

  &.ui-state-focus {
    box-shadow: none;
    border-color: transparent;
  }
}

@mixin filled-input-interaction() {
  &.ui-state-hover {
    background-color: $inputFilledHoverBg;
    border-color: transparent;
    background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, $inputHoverBorderColor, $inputHoverBorderColor);
  }

  &.ui-state-focus {
    box-shadow: none;
    background-color: $inputFilledFocusBg;
    border-color: transparent;
    background-size: 100% 2px, 100% 1px;
  }

  &.ui-state-error {
    @include invalid-filled-input();
  }
}

@mixin filled-input-wrapper-default() {
  @include filled-input-default();

  .ui-inputfield {
    background-image: none;
    background-color: transparent;
  }
}

@mixin invalid-filled-input-wrapper() {
  border-color: transparent;
  background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);

  &:not(.ui-state-disabled).ui-state-focus {
    box-shadow: none;
    border-color: transparent;
  }
}

@mixin filled-input-wrapper-interaction() {
  &:not(.ui-state-disabled).ui-state-hover {
    background-color: $inputFilledHoverBg;
    border-color: transparent;
    background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, $emphasis-high, $emphasis-high);
  }

  &:not(.ui-state-disabled).ui-state-focus,
  &:not(.ui-state-disabled).ui-inputwrapper-focus {
    box-shadow: none;
    background-color: $inputFilledFocusBg;
    border-color: transparent;
    background-size: 100% 2px, 100% 1px;
  }

  .ui-inputfield {
    &.ui-state-hover,
    &.ui-state-focus {
      background-image: none;
      background: transparent;
    }
  }
}

@mixin filled-input-float-label() {
  @if (list.nth($inputPadding, 1) == 1rem) {
    padding-top: 1.5rem;
    padding-bottom: .5rem;
  } @else if (list.nth($inputPadding, 1) == .75rem) {
    padding-top: 1.25rem;
    padding-bottom: .25rem;
  }
}