|
|
/******************************* Checkbox*******************************/
@checkboxColor: @selectedTextColor;@fontSize: 1em;@checkboxLineHeight: 15px;
/* Label */@labelPadding: 1.75em;
@neutralCheckbox: @transparentBlack;@positiveCheckbox: @positiveColor;@negativeCheckbox: @negativeColor;
/* Checkbox */@checkboxSize: 17px;@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 */@checkboxCheckTop: 0px;@checkboxCheckLeft: 0px;
/*------------------- 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 */@checkboxRadioSize: 16px;@checkboxRadioCircleSize: 9px;@checkboxRadioTop: 0px;@checkboxRadioLeft: 0px;
/* Slider & Toggle Handle */@handleBackground: @white @subtleGradient;@handleBoxShadow: @subtleShadow, 0px 0px 0px 1px @borderColor inset;
/* Slider */@sliderSize: 1.5rem;@sliderHandleSize: @sliderSize;
@sliderLineWidth: 3.5rem;@sliderLineHeight: 0.25rem;@sliderLineVerticalOffset: 0.4rem;@sliderLineColor: @neutralCheckbox;@sliderLineRadius: @circularRadius;
@sliderHandleOffset: (1rem - @sliderHandleSize) / 2;@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;
@sliderLabelDistance: @sliderLineWidth + 1rem;@sliderOffLabelColor: @unselectedTextColor;
@sliderOnLineColor: @strongTransparentBlack;@sliderOnLabelColor: @selectedTextColor;@sliderLabelLineHeight: 1rem;
@sliderHoverLaneBackground: @strongTransparentBlack;@sliderHoverLabelColor: @selectedTextColor;
/* Toggle */@toggleSize: 1.5rem;@toggleHandleSize: @toggleSize;@toggleHandleRadius: @circularRadius;@toggleHandleOffset: 0rem;@toggleHandleTransition: background 0.3s ease 0s, left 0.3s ease 0s;
@toggleLaneWidth: 3.5rem;@toggleLaneHeight: @toggleSize;@toggleLaneVerticalOffset: 0rem;@toggleOffOffset: -0.05rem;@toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.05rem;
@toggleLabelDistance: @toggleLaneWidth + 1rem;@toggleLabelLineHeight: 1.5rem;
@toggleFocusColor: @strongTransparentBlack;@toggleHoverColor: @toggleFocusColor;
@toggleOffLabelColor: @checkboxColor;@toggleOnLabelColor: @positiveCheckbox;@toggleOnLaneColor: @positiveCheckbox;
/*------------------- Variations--------------------*/
|
