amazeui/less/ui.ucheck.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:            uCheck
//
// Description:     Define style for uCheck Plugin
//
// Component:       `.am-ucheck`
//
// Sub-objects:     `.am-ucheck-icons`
//                  `.am-ucheck-checkbox`
//                  `.am-ucheck-radio`
//
// States:
//
// Used:            Icon
//
// Uses:
//
// =============================================================================

/* ==========================================================================
   Component: uCheck Plugin
 ============================================================================ */

@ucheck-disabled-color: mix(@gray-light, white, 38%);

.@{ns}checkbox,
.@{ns}radio,
.@{ns}checkbox-inline,
.@{ns}radio-inline {
  // margin-bottom: 12px;
  padding-left: 22px;
  position: relative;
  transition: color .25s linear;
  font-size: 14px;
  line-height: 1.5; // 21px;
}

label {
  &.@{ns}checkbox,
  &.@{ns}radio {
    font-weight: normal;
  }
}

.@{ns}ucheck-icons {
  color: @gray-light;
  display: block;
  height: 20px;
  top: 0;
  left: 0;
  position: absolute;
  width: 20px;
  text-align: center;
  line-height: 21px;
  font-size: 18px;
  cursor: pointer;
}

.@{ns}checkbox,
.@{ns}radio,
.@{ns}checkbox-inline,
.@{ns}radio-inline {
  .@{ns}icon-checked,
  .@{ns}icon-unchecked {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-table;
    margin: 0;
    background-color: transparent;
    transition: color .25s linear;

    &:before {
      // speak: none;
      .am-icon-font();
    }
  }

  .@{ns}icon-checked {
    opacity: 0;
  }
}

.@{ns}checkbox,
.@{ns}checkbox-inline {
  .@{ns}icon-checked:before {
    content: @fa-var-check-square-o;
  }

  .@{ns}icon-unchecked:before {
    content: @fa-var-square-o;
  }
}

.@{ns}radio,
.@{ns}radio-inline {
  .@{ns}icon-checked:before {
    content: @fa-var-dot-circle-o;
  }
  .@{ns}icon-unchecked:before {
    content: @fa-var-circle-o;
  }
}

.ucheck-state-variant(@color) {
  .@{ns}ucheck-checkbox,
  .@{ns}ucheck-radio {
    // hover
    &:hover:not(.@{ns}nohover):not(:disabled) + .@{ns}ucheck-icons {
      color: @color;
    }

    // checked
    &:checked + .@{ns}ucheck-icons {
      color: @color;
    }
  }
}

.@{ns}ucheck-checkbox,
.@{ns}ucheck-radio {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  opacity: 0;
  outline: none !important;

  // hover state
  &:hover:not(.@{ns}nohover):not(:disabled) + .@{ns}ucheck-icons {
    color: @global-primary;
  }

  // checked
  &:checked + .@{ns}ucheck-icons {
    color: @global-primary;

    .@{ns}icon-unchecked {
      opacity: 0;
    }

    .@{ns}icon-checked {
      opacity: 1;
    }
  }

  // disabled
  &:disabled + .@{ns}ucheck-icons {
    cursor: default;
    color: @ucheck-disabled-color;
  }

  &:disabled:checked + .@{ns}ucheck-icons {
    .@{ns}icon-unchecked {
      opacity: 0;
    }

    .@{ns}icon-checked {
      opacity: 1;
      color: @ucheck-disabled-color;
    }
  }
}

// color modifiers
.@{ns}checkbox,
.@{ns}radio,
.@{ns}checkbox-inline,
.@{ns}radio-inline {
  &.@{ns}secondary {
    .ucheck-state-variant(@global-secondary);
  }

  &.@{ns}success {
    .ucheck-state-variant(@global-success);
  }

  &.@{ns}warning {
    .ucheck-state-variant(@global-warning);
  }

  &.@{ns}danger {
    .ucheck-state-variant(@global-danger);
  }
}

// form validate state
.@{ns}field-error + .@{ns}ucheck-icons {
  color: @global-danger;
}

.@{ns}field-valid + .@{ns}ucheck-icons {
  color: @global-success;
}

/*
// Group Addon
.@{ns}input-group-label {
  .@{ns}radio,
  .@{ns}checkbox {
    margin: -2px 0;
    padding-left: 15px;
  }
}

// Form inline style
.@{ns}form-inline .@{ns}checkbox,
.@{ns}form-inline .@{ns}radio {
  padding-left: 24px;
}
*/