/*******************************

Checkbox

*******************************/

@checkboxColor: @textColor; @fontSize: 1em; @checkboxLineHeight: 15px;

/* Label */ @labelPadding: 1.75em;

@neutralCheckbox: @transparentBlack; @positiveCheckbox: @positiveColor; @negativeCheckbox: @negativeColor;

/* Checkbox */ @checkboxSize: 17px; @checkboxBackground: @white; @checkboxBorder: 1px solid @solidBorderColor; @checkboxBorderRadius: 0.25em; @checkboxTransition:

background-color 0.3s ease,
border 0.3s ease,
box-shadow 0.3s ease

;

/* Checkmark */ @checkboxCheckTop: 0px; @checkboxCheckLeft: 0px;

/*——————-

Coupling

——————–*/

@labelColor: @textColor;

@labelOpacity: 0.6; @labelHoverOpacity: 0.8; @labelSelectedOpacity: 1;

/*——————-

States

——————–*/

@checkboxHoverBackground: @checkboxBackground; @checkboxHoverBorder: 1px solid @selectedBorderColor; @labelHoverColor: @hoveredTextColor;

@checkboxSelectedBackground: F5F5F5; @checkboxSelectedBorder: 1px solid @selectedBorderColor; @labelSelectedColor: @selectedTextColor;

/* Disabled */ @disabledCheckboxOpacity: 0.5; @disabledCheckboxLabelColor: rgba(0, 0, 0, 1);

/*——————-

Types

——————–*/

/* Radio */ @checkboxRadioSize: 14px; @checkboxRadioCircleSize: 9px; @checkboxRadioTop: 1px; @checkboxRadioLeft: 0px;

@checkboxBulletScale: 0.428571428; @checkboxBulletColor: @textColor; @checkboxBulletRadius: @circularRadius;

/* Slider & Toggle Handle */ @handleBackground: @white @subtleGradient; @handleBoxShadow:

@subtleShadow,
0px 0px 0px 1px @borderColor inset

;

/* Slider */ @sliderHandleSize: 1.5rem; @sliderHandleOffset: (1rem - @sliderHandleSize) / 2; @sliderLineWidth: 3.5rem;

@sliderWidth: @sliderLineWidth; @sliderHeight: (@sliderHandleSize + @sliderHandleOffset);

@sliderLineHeight: 0.25rem; @sliderLineVerticalOffset: 0.4rem; @sliderLineColor: @neutralCheckbox; @sliderLineRadius: @circularRadius;

@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;

@sliderLabelDistance: @sliderLineWidth + 1rem; @sliderOffLabelColor: @unselectedTextColor;

@sliderOnLineColor: @strongTransparentBlack; @sliderOnLabelColor: @selectedTextColor; @sliderLabelLineHeight: 1rem;

@sliderHoverLaneBackground: @strongTransparentBlack; @sliderHoverLabelColor: @hoveredTextColor;

/* Toggle */ @toggleLaneWidth: 3.5rem; @toggleHandleSize: 1.5rem;

@toggleWidth: @toggleLaneWidth; @toggleHeight: @toggleHandleSize;

@toggleHandleRadius: @circularRadius; @toggleHandleOffset: 0rem; @toggleHandleTransition:

background 0.3s ease 0s,
left 0.3s ease 0s

;

@toggleLaneHeight: @toggleHandleSize; @toggleLaneVerticalOffset: 0rem; @toggleOffOffset: -0.05rem; @toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.05rem;

@toggleLabelDistance: @toggleLaneWidth + 1rem; @toggleLabelLineHeight: 1.5rem; @toggleLabelOffset: 0.15em;

@toggleFocusColor: @strongTransparentBlack; @toggleHoverColor: @toggleFocusColor;

@toggleOffLabelColor: @checkboxColor; @toggleOnLabelColor: @positiveCheckbox; @toggleOnLaneColor: @positiveCheckbox;

/*——————-

Variations

——————–*/