xref: /openbmc/phosphor-webui/app/common/styles/components/form-elements.scss (revision 6f7ec80e)

// Drop downs
.dropdown__button {
  position: relative;
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: .5em;
  padding-right: 1.5em;
  margin-top: 0;
  border: 1px solid $border-color-02;
  min-width: 70px;
  font-weight: 400;
  @include bgImage__arrowDown-primary;
  &[disabled] {
    @include bgImage__arrowDown-disabled;
  }
}

.dropdown__wrapper {
  position: relative;
  display: inline-block;
}

.dropdown__list {
  position: absolute;
  z-index: 100;
  right: 0;
  top: 100%;
  background: $primary-light;
  padding: 0;
  width: 100%;
  border: 1px solid $border-color-02;
  margin-top: -5px;
  box-shadow: 0 4px 10px -2px $base-02--02;
  li {
    list-style-type: none;
  }
  button {
    padding: 1em 1em 1em 1.8em;
    text-align: left;
    width: 100%;
    font-weight: 400;
    &:hover {
      background: $background-02;
    }
  }
}

.dropdown__list {
  min-width: 230px;
}
.dropdown__list.multi-select {
  > .active {
    position: relative;
    &:before {
      content: '\2713';
      position: absolute;
      display: inline-block;
      top: 50%;
      left: .6em;
      color: $primary-accent;
      transform: translateY(-50%);
    }
  }
}

.dropdown__date {
  width: 430px;
  .row {
    padding: 1em;
    margin-right: 0;
  }
  input {
    max-width: 170px;
    color: $text-01;
  }
}



// Checkbox

.control-check,
.control-radio {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  padding-top: 7px;
  cursor: pointer;
  line-height: initial;
}

.control-check input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background: $primary-light;
  border: 1px solid $border-color-02;
  font-size: 0;
}

/* Hover and focus states */
.control-check:hover input ~ .control__indicator,
.control-check input:focus ~ .control__indicator {
  border: 1px solid $primary-accent;
  background-color: $primary-accent;
}

/* Checked state */
.control-check input:checked ~ .control__indicator {
  background: $primary-accent;
}

/* Hover state whilst checked */
.control-check:hover input:not([disabled]):checked ~ .control__indicator {
  background: $primary-accent;
}

/* Disabled state */
.control-check input:disabled ~ .control__indicator {
  pointer-events: none;
  opacity: .6;
  background: $base-02--04;
  border: 1px solid $primary-light;
}

.control-check:hover > input:disabled ~ .control__indicator {
  outline: 0;
}

/* Check mark */
.control__indicator:after,
.control-check input:not(:checked){
  position: absolute;
  display: none;
  content: '';
}

/* Show check mark */
.control-check input:checked ~ .control__indicator:after {
  display: block;
}

/* Checkbox tick */
.control-check .control__indicator:after {
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  transform: rotate(45deg);
  border: solid $primary-light;
  border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control-check input:disabled ~ .control__indicator:after {
  border-color: $primary-light;
  color: $primary-light;
}

// Radio Buttons
.control-radio {
  padding-left: 3em;
}
.control-radio.disabled:hover {
  cursor: default;
}
.control-radio .control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 30px;
  height: 30px;
  background: $primary-light;
  border: 2px solid $border-color-02;
}
.control-radio input{
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control-radio .control__indicator {
  border-radius: 50%;
}

/* Hover and focus states */
.control-radio input:focus ~ .control__indicator {
  background: $primary-accent;
  outline: 1px solid $primary-accent;
  outline-offset: 3px;
}

.control-radio input:checked ~ .control__indicator {
  background: $background-02;
  border: 2px solid $primary-accent;
}

/* Disabled state */
.control-radio input:disabled ~ .control__indicator{
  pointer-events: none;
  opacity: .6;
  background: $base-02--04;
  border: 1px solid $border-color-01;
}

.control-radio:hover > input:disabled ~ .control__indicator{
  outline: 0;
}

.control-radio:hover input:disabled {
  cursor: default;
}

/* mark */
.control__indicator:after {
  position: absolute;
  display: none;
  content: '';
}

/* Show mark */
.control-radio input:checked ~ .control__indicator:after {
  display: block;
}

/* Disabled tick colour */
.control-radio input:disabled ~ .control__indicator:after{
  border-color: $primary-light;
  color: $primary-light;
}

/* Radio button inner circle */
.control-radio .control__indicator:after {
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: $primary-accent;
}

.control-radio:hover .control__indicator:after {
  display: block;
}

/* Disabled circle colour */
.control-radio input:disabled ~ .control__indicator:after {
  background: $base-02--03;
  width: 20px;
  height: 20px;
}