theme-base.components.input._checkbox.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:math';

body {
  .ui-chkbox {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0;
    width: auto;
    height: auto;

    .ui-chkbox-box {
      border: $inputBorder;
      border-width: $checkboxBorderWidth;
      background: $inputBg;
      width: $checkboxWidth;
      min-width: $checkboxWidth;
      height: $checkboxHeight;
      text-align: center;
      position: relative;
      border-radius: $borderRadius;
      transition: $transition;

      &.ui-state-hover {
        border-color: $inputHoverBorderColor;
      }

      &.ui-state-focus {
        box-shadow: $checkboxFocusShadow;
        outline: 0 none;
      }

      &.ui-state-active {
        border-color:$checkboxActiveBorderColor;
        background: $checkboxActiveBg;
        color:$checkboxTextActiveColor;

        &.ui-state-hover {
          background: $checkboxActiveHoverBg;
        }
      }

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

      .ui-chkbox-icon {
        overflow: visible;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: math.div(-1 * $iconSize, 2);
        margin-top: math.div(-1 * $iconSize, 2);

        &.ui-icon-check {
          @include icon-override("\e909");
        }

        &.ui-icon-closethick {
          @include icon-override("\e90b");
        }
      }
    }
  }

  &.ui-input-filled,
  .ui-input-filled {
    .ui-chkbox {
      .ui-chkbox-box {
        background-color: $inputFilledBg;

        &.ui-state-hover {
          background-color: $inputFilledHoverBg;
        }

        &.ui-state-active {
          background: $checkboxActiveBg;

          &.ui-state-hover {
            background: $checkboxActiveHoverBg;
          }
        }
      }
    }
  }

  @if ($highlightBg == $checkboxActiveBg) {
    .ui-state-highlight {
      .ui-chkbox {
        .ui-chkbox-box.ui-state-active {
          border-color: $highlightTextColor;
        }
      }
    }
  }
}