SemanSemantic-UItic-UI/build/less/definitions/modules/checkbox.less

/*
 * # Semantic - Checkbox
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'module';
@element : 'checkbox';

@import '../../semantic.config';


/*******************************
           Checkbox
*******************************/


/*--------------
    Content
---------------*/

.ui.checkbox {
  position: relative;
  display: inline-block;

  height: @checkboxSize;

  font-size: 1rem;
  line-height: @checkboxLineHeight;
  min-width: @checkboxSize;
  backface-visibility: hidden;

  outline: none;
  vertical-align: middle;
}
.ui.checkbox input {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  outline: none;
  z-index: -1;
}


/*--------------
      Box
---------------*/


.ui.checkbox .box,
.ui.checkbox label {
  cursor: pointer;
  padding-left: @labelPadding;
  outline: none;
}
.ui.checkbox label {
  font-size: @fontSize;
}

.ui.checkbox .box:before,
.ui.checkbox label:before {
  position: absolute;

  line-height: 1;
  width: @checkboxSize;
  height: @checkboxSize;
  top: 0em;
  left: 0em;
  content: '';

  background: @checkboxBackground;
  border-radius: @checkboxBorderRadius;

  transition: @checkboxTransition;
  border: @checkboxBorder;
}

/*--------------
    Checkmark
---------------*/

.ui.checkbox .box:after,
.ui.checkbox label:after {
  position: absolute;
  top: @checkboxCheckOffset;
  left: 0px;
  line-height: 1;
  width: @checkboxSize;
  text-align: center;

  opacity: 0;
  color: @checkboxColor;
  transition: opacity 0.1s ease;
}

/*--------------
      Label
---------------*/

/* Inside */
.ui.checkbox label,
.ui.checkbox + label {
  cursor: pointer;
  color: @labelColor;
  transition: color 0.2s ease;
  user-select: none;
}

/* Outside */
.ui.checkbox + label {
  vertical-align: middle;
}


/*******************************
           States
*******************************/


/*--------------
      Hover
---------------*/

.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
  background: @checkboxHoverBackground;
  border: @checkboxHoverBorder;
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
  color: @labelHoverColor;
}

/*--------------
      Down
---------------*/

.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
  background: @checkboxSelectedBackground;
  border: 1px solid @checkboxSelectedBorder;
}
.ui.checkbox input:active ~ label {
  color: @labelSelectedColor;
}

/*--------------
      Focus
---------------*/

.ui.checkbox input:focus ~ .box:before,
.ui.checkbox input:focus ~ label:before {
  background: @checkboxSelectedBackground;
  border: 1px solid @checkboxSelectedBorder;
}
.ui.checkbox input:focus ~ label {
  color: @labelSelectedColor;
}


/*--------------
     Active
---------------*/

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
  opacity: 1;
}

/*--------------
     Disabled
---------------*/

.ui.disabled.checkbox .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ .box:after,
.ui.checkbox input[disabled] ~ label {
  opacity: @disabledCheckboxOpacity;
  color: @disabledCheckboxLabelColor;
}


/*******************************
             Types
*******************************/


/*--------------
     Radio
---------------*/

/* Box */
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
  border-radius: @circularRadius;
  transform: none;
}

/* Circle */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
  border: none;
  top: @checkboxRadioOffset;
  left: 0em;
  font-size: @checkboxRadioCircleSize;
}

/*--------------
     Slider
---------------*/

.ui.slider.checkbox {
  cursor: pointer;
}

.ui.slider.checkbox .box,
.ui.slider.checkbox label {
  padding-left: @sliderLabelDistance;
}

/* Line */
.ui.slider.checkbox .box:before,
.ui.slider.checkbox label:before {
  cursor: pointer;
  display: block;

  position: absolute;
  content: '';
  top: @sliderLineVerticalOffset;
  left: 0em;
  z-index: 1;
  border: none !important;

  background-color: @neutralCheckbox;
  width: @sliderLineWidth;
  height: @sliderLineHeight;

  transform: none;
  border-radius: @circularRadius;
  transition:
    background 0.3s ease
  ;
}

/* Handle */
.ui.slider.checkbox .box:after,
.ui.slider.checkbox label:after {
  background: @handleBackground;
  position: absolute;
  content: '';
  opacity: 1;
  z-index: 2;

  border: none;
  box-shadow: @handleBoxShadow;
  width: @handleSize;
  height: @handleSize;
  top: @sliderHandleOffset;
  left: 0em;

  border-radius: @circularRadius;
  transition:
    left 0.3s ease 0s
  ;
}

/* Focus */
.ui.slider.checkbox input:focus ~ .box:before,
.ui.slider.checkbox input:focus ~ label:before {
  background-color: @toggleFocusColor;
  border: none;
}

/* Active */
.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ label:before {
  background-color: @positiveCheckbox;
}
.ui.slider.checkbox input:checked ~ .box:after,
.ui.slider.checkbox input:checked ~ label:after {
  left: @sliderTravelDistance;
}


/*--------------
     Toggle
---------------*/

.ui.toggle.checkbox {
  cursor: pointer;
}

.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
  padding-left: 3em;
}

/* Switch */
.ui.toggle.checkbox .box:before,
.ui.toggle.checkbox label:before {
  cursor: pointer;
  display: block;

  position: absolute;
  content: '';

  top: @toggleSwitchVerticalOffset;
  z-index: 1;
  border: none;

  background-color: @neutralCheckbox;
  width: @toggleSwitchWidth;
  height: @toggleSwitchHeight;
  border-radius: @circularRadius;
}

/* Handle */
.ui.toggle.checkbox .box:after,
.ui.toggle.checkbox label:after {
  background: @handleBackground;
  position: absolute;
  content: '';
  opacity: 1;
  z-index: 2;

  border: none;
  box-shadow: @handleBoxShadow;
  width: @handleSize;
  height: @handleSize;
  top: @sliderHandleOffset;
  left: 0em;

  border-radius: @circularRadius;
  transition:
    background 0.3s ease 0s,
    left 0.3s ease 0s
  ;
}

.ui.toggle.checkbox input ~ .box:after,
.ui.toggle.checkbox input ~ label:after {
  left: @toggleOffOffset;
}

/* Focus */
.ui.toggle.checkbox input:focus ~ .box:before,
.ui.toggle.checkbox input:focus ~ label:before {
  background-color: @toggleFocusColor;
  border: none;
}

/* Active */
.ui.toggle.checkbox input:checked ~ .box,
.ui.toggle.checkbox input:checked ~ label {
  color: @positiveCheckbox;
}
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: @positiveCheckbox;
}
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
  left: @toggleOnOffset;
}


.loadUIOverrides();