You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

139 lines
3.1 KiB

/*******************************
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
--------------------*/