|
|
/******************************* 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;
@toggleFocusColor: @strongTransparentBlack;@toggleHoverColor: @toggleFocusColor;
@toggleOffLabelColor: @checkboxColor;@toggleOnLabelColor: @positiveCheckbox;@toggleOnLaneColor: @positiveCheckbox;
/*------------------- Variations--------------------*/
|
