Sha256: 0fda485a0650fc3423cfe74d2414eca5bc5943e982e67a26929bbf9fae10021a

Contents?: true

Size: 1.25 KB

Versions: 8

Compression:

Stored size: 1.25 KB

Contents

@import "../tokens/colors";
$transition: $transition_cubic;

[class^=pb_checkbox_kit] {
  display: inline-flex;
  .pb_checkbox_label {
    padding-left: $space_xs;
    cursor: pointer;
    font-size: $text_lt_default;
    user-select: none;
  }
  .pb_checkbox_checkmark {
    position: relative;
    height: 22px;
    width: 22px;
    border: solid $border_light 2px;
    border-radius: $border_rad_light;
    .check_icon{
      opacity: 0;
      position: relative;
      top: -2px;
      left: 1px;
      height: 16px;
      width:16px;
      color: $white;

    }
  }

  &:hover input ~ .pb_checkbox_checkmark {
    border-color: $primary_action;
  }

  input {
    position: relative;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    display: none;
    &:checked ~ .pb_checkbox_checkmark {
      background-color: $primary_action;
      border-color: $primary_action;
    }
    &:checked ~ .pb_checkbox_checkmark {
      display: inline-block;
      .check_icon{
        opacity: $opacity_10;
      }
    }
  }



  &[class*=_dark] {
    input:checked ~ .pb_checkbox_checkmark {
      background-color: $primary_action;
      border-color: $primary_action;
    }

    &:hover .pb_checkbox_checkmark {
      border-color: $primary_action;
    }
  }
}

Version data entries

8 entries across 8 versions & 1 rubygems

Version Path
playbook_ui-3.4.0 app/pb_kits/playbook/pb_checkbox/_checkbox.scss
playbook_ui-3.3.0 app/pb_kits/playbook/pb_checkbox/_checkbox.scss
playbook_ui-3.2.0 app/pb_kits/playbook/pb_checkbox/_checkbox.scss
playbook_ui-3.1.0 app/pb_kits/playbook/pb_checkbox/_checkbox.scss
playbook_ui-3.0.1 app/pb_kits/playbook/pb_checkbox/_checkbox.scss
playbook_ui-3.0.0 app/pb_kits/playbook/pb_checkbox/_checkbox.scss
playbook_ui-2.9.9 app/pb_kits/playbook/pb_checkbox/_checkbox.scss
playbook_ui-2.9.8 app/pb_kits/playbook/pb_checkbox/_checkbox.scss