formstone/src/less/themes/light/checkbox.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Checkbox
 */

.fs-checkbox {

  @import "_config.less";

  @theme_name: fs-light;

  // Config

  // @fs-checkbox-margin: 0 0 10px 0;

  // Label

  @fs-checkbox-label-color: @fs-light-primary_900;
  @fs-checkbox-label-font-size: 14px;

  // Marker

  @fs-checkbox-marker-background: @fs-light-white;
  @fs-checkbox-marker-border-color: @fs-light-primary_600;
  @fs-checkbox-marker-border-radius: 2px;
  @fs-checkbox-marker-height-width: 20px;
  @fs-checkbox-marker-margin: 0 10px 0 0;

  @fs-checkbox-flag-background: @fs-light-primary_600;

  // Disabled

  @fs-checkbox-disabled-opacity: 0.5;

  // Focus

  @fs-checkbox-hover-label-color: @fs-light-black;

  @fs-checkbox-hover-marker-background: @fs-light-primary_100;
  @fs-checkbox-hover-marker-border-color: @fs-light-primary_900;

  // Toggle

  @fs-checkbox-toggle-marker-background: @fs-light-primary_600;
  @fs-checkbox-toggle-marker-border-color: @fs-light-white;
  @fs-checkbox-toggle-marker-border-size: 2px;
  @fs-checkbox-toggle-marker-height: 40px;
  @fs-checkbox-toggle-marker-width: 100px;

  @fs-checkbox-toggle-flag-border-radius: 4px;

  @fs-checkbox-toggle-state-color: @fs-light-primary_700;
  @fs-checkbox-toggle-state-font-size: 12px;

  @fs-checkbox-toggle-icon-color: @fs-light-white;
  @fs-checkbox-toggle-icon-width: 2px;
  @fs-checkbox-toggle-icon-height: 10px;
  @fs-checkbox-toggle-icon-gap: 1px;

  &.@{theme_name} {
    // margin: @fs-checkbox-margin;
  }


  // &.@{theme_name} &-label {
  &-label.@{theme_name} {
    color: @fs-checkbox-label-color;
    font-size: @fs-checkbox-label-font-size;
    line-height: @fs-checkbox-marker-height-width;
  }

  &.@{theme_name} &-marker {
    width:  @fs-checkbox-marker-height-width;
    height: @fs-checkbox-marker-height-width;

    background: @fs-checkbox-marker-background;
    border: 1px solid @fs-checkbox-marker-border-color;
    border-radius: @fs-checkbox-marker-border-radius;
    margin: @fs-checkbox-marker-margin;
  }

  &.@{theme_name} &-flag:before {
    width: 5px;
    height: 10px;

    border: 2px solid @fs-checkbox-flag-background;
    border-top: 0;
    border-left: 0;
    margin: 3px 0 0 6px;
  }

  // Radio

  .@{theme_name}&-radio &-marker {
    border-radius: 100%;
  }

  .@{theme_name}&-radio &-flag {
    width:  (@fs-checkbox-marker-height-width / 2);
    height: (@fs-checkbox-marker-height-width / 2);

    background: @fs-checkbox-flag-background;
  }

  // Focus

  // .@{theme_name}&-focus &-label,
  // .no-touchevents .@{theme_name}:hover &-label {
  &-label.@{theme_name}&-focus,
  .no-touchevents &-label.@{theme_name}:hover {
    color: @fs-checkbox-hover-label-color;
  }

  .@{theme_name}&-focus &-marker,
  .no-touchevents .@{theme_name}:hover &-marker {
    background: @fs-checkbox-hover-marker-background;
    border-color: @fs-checkbox-hover-marker-border-color;
  }

  .@{theme_name}&-focus &-flag:before,
  .no-touchevents .@{theme_name}:hover &-flag:before {
    border-color: @fs-checkbox-hover-marker-border-color;
  }

  .@{theme_name}&-radio&-focus &-flag,
  .no-touchevents .@{theme_name}&-radio:hover &-flag {
    background: @fs-checkbox-hover-marker-border-color;
  }

  // Disabled

  .@{theme_name}&-disabled {
    opacity: @fs-checkbox-disabled-opacity;
  }

  // .@{theme_name}&-disabled &-label,
  // .no-touchevents .@{theme_name}&-disabled:hover &-label {
  &-label.@{theme_name}&-disabled,
  .no-touchevents &-label.@{theme_name}&-disabled:hover {
    color: @fs-checkbox-label-color;
  }

  .@{theme_name}&-disabled &-marker,
  .no-touchevents .@{theme_name}&-disabled:hover &-marker {
    background: @fs-checkbox-marker-background;
    border-color: @fs-checkbox-marker-border-color;
  }

  .@{theme_name}&-disabled &-flag:before,
  .no-touchevents .@{theme_name}&-disabled:hover &-flag:before {
    border-color: @fs-checkbox-marker-border-color;
  }

  .@{theme_name}&-radio&-disabled &-flag,
  .no-touchevents .@{theme_name}&-radio&-disabled:hover &-flag {
    background: @fs-checkbox-marker-border-color;
  }

  // Toggle

  // .@{theme_name}&-toggle &-label {
  &-label.@{theme_name}&-toggle {
    line-height: @fs-checkbox-toggle-marker-height;
  }

  .@{theme_name}&-toggle &-marker {
    width: @fs-checkbox-toggle-marker-width;
    height: @fs-checkbox-toggle-marker-height;

    border-radius: @fs-checkbox-marker-border-radius;
  }

  .@{theme_name}&-toggle &-flag {
    background: @fs-checkbox-toggle-marker-background;
    border: @fs-checkbox-toggle-marker-border-size solid @fs-checkbox-toggle-marker-border-color;
    border-radius: @fs-checkbox-toggle-flag-border-radius;

    &:before {
      display: none;
    }

    &:after {
      width: @fs-checkbox-toggle-icon-width;
      height: @fs-checkbox-toggle-icon-height;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      background: @fs-checkbox-toggle-icon-color;
      box-shadow:
        (@fs-checkbox-toggle-icon-width + @fs-checkbox-toggle-icon-gap) 0 0 @fs-checkbox-toggle-icon-color,
        -(@fs-checkbox-toggle-icon-width + @fs-checkbox-toggle-icon-gap) 0 0 @fs-checkbox-toggle-icon-color;
      content: '';
      margin: auto;
    }
  }

  .no-touchevents .@{theme_name}&-toggle:hover &-flag:after {
    opacity: 1;
  }

  .@{theme_name}&-toggle &-state {
    color: @fs-checkbox-toggle-state-color;
    font-size: @fs-checkbox-toggle-state-font-size;
    line-height: @fs-checkbox-toggle-marker-height;
    text-transform: uppercase;
  }

  .@{theme_name}&-toggle&-focus &-flag,
  .no-touchevents .@{theme_name}&-toggle:hover &-flag {
    background: @fs-checkbox-hover-marker-border-color;
    border-color: @fs-checkbox-hover-marker-background;
  }

  .@{theme_name}&-toggle&-disabled &-flag,
  .no-touchevents .@{theme_name}&-toggle&-disabled:hover &-flag {
    background: @fs-checkbox-marker-border-color;
    border-color: @fs-checkbox-marker-background;
  }
}