/******************************* Checkbox *******************************/ @checkboxColor: @selectedTextColor; @fontSize: 1em; @checkboxLineHeight: 15px; /* Label */ @labelPadding: 1.75em; @neutralCheckbox: @transparentBlack; @positiveCheckbox: @positiveColor; @negativeCheckbox: @negativeColor; /* Checkbox */ @checkboxSize: 16px; @checkboxBackground: @white; @checkboxBorder: 1px solid @borderColor; @checkboxBorderRadius: 0.25em; @checkboxTransition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease ; /* Checkmark */ @checkboxCheckOffset: 1px; /*------------------- Coupling --------------------*/ @labelColor: @textColor; @labelOpacity: 0.6; @labelHoverOpacity: 0.8; @labelSelectedOpacity: 1; /*------------------- States --------------------*/ @checkboxHoverBackground: @checkboxBackground; @checkboxHoverBorder: 1px solid @selectedBorderColor; @labelHoverColor: @selectedTextColor; @checkboxSelectedBackground: #F5F5F5; @checkboxSelectedBorder: 1px solid @selectedBorderColor; @labelSelectedColor: @selectedTextColor; /* Disabled */ @disabledCheckboxOpacity: @disabledOpacity; @disabledCheckboxLabelColor: rgba(0, 0, 0, 0.3); /*------------------- Types --------------------*/ /* Radio */ @checkboxRadioOffset: 3px; @checkboxRadioCircleSize: 9px; /* Slider & Toggle Handle */ @handleBackground: @white @subtleGradient; @handleBoxShadow: @subtleShadow, 0px 0px 0px 1px @borderColor inset ; /* Slider */ @sliderHandleSize: 1.5rem; @sliderLineWidth: 3.5rem; @sliderLineHeight: 0.25rem; @sliderLineVerticalOffset: 0.4rem; @sliderHandleOffset: (1rem - @sliderHandleSize) / 2; @sliderTravelDistance: @sliderLineWidth - @sliderHandleSize; @sliderLabelDistance: @sliderLineWidth + 1rem; @sliderSize: @sliderHandleSize; @sliderLabelLineHeight: 1rem; /* Toggle */ @toggleSize: 1.75rem; @toggleHandleSize: @toggleSize; @toggleHandleRadius: @circularRadius; @toggleHandleOffset: 0rem; @toggleLaneWidth: 3.5rem; @toggleLaneHeight: 1.75rem; @toggleLaneVerticalOffset: 0rem; @toggleOffOffset: -0.05rem; @toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.05rem; @toggleLabelDistance: @toggleLaneWidth + @toggleSize; @toggleLabelLineHeight: 1.5rem; @toggleLabelTransition: background 0.3s ease 0s, left 0.3s ease 0s ; @toggleFocusColor: @strongTransparentBlack; /*------------------- Variations --------------------*/