| /******************************* |
| Checkbox |
| *******************************/ |
| |
| @checkboxSize: 17px; |
| @checkboxColor: @textColor; |
| @checkboxLineHeight: @checkboxSize; |
| |
| |
| /* Label */ |
| @labelDistance: 1.85714em; /* 26px @ 14/em */ |
| |
| /* Checkbox */ |
| @checkboxBackground: @white; |
| @checkboxBorder: 1px solid @solidBorderColor; |
| @checkboxBorderRadius: @3px; |
| @checkboxTransition: |
| border @defaultDuration @defaultEasing, |
| opacity @defaultDuration @defaultEasing, |
| transform @defaultDuration @defaultEasing, |
| box-shadow @defaultDuration @defaultEasing |
| ; |
| |
| /* Checkmark */ |
| @checkboxCheckFontSize: 14px; |
| @checkboxCheckTop: 0px; |
| @checkboxCheckLeft: 0px; |
| @checkboxCheckSize: @checkboxSize; |
| |
| /* Label */ |
| @labelFontSize: @relativeMedium; |
| @labelColor: @textColor; |
| @labelTransition: color @defaultDuration @defaultEasing; |
| |
| /*------------------- |
| States |
| --------------------*/ |
| |
| /* Hover */ |
| @checkboxHoverBackground: @checkboxBackground; |
| @checkboxHoverBorderColor: @selectedBorderColor; |
| @labelHoverColor: @hoveredTextColor; |
| |
| /* Pressed */ |
| @checkboxPressedBackground: @offWhite; |
| @checkboxPressedBorderColor: @selectedBorderColor; |
| @checkboxPressedColor: @selectedTextColor; |
| @labelPressedColor: @selectedTextColor; |
| |
| /* Focus */ |
| @checkboxFocusBackground: @white; |
| @checkboxFocusBorderColor: @focusedFormMutedBorderColor; |
| @checkboxFocusCheckColor: @selectedTextColor; |
| @labelFocusColor: @selectedTextColor; |
| |
| /* Active */ |
| @labelActiveColor: @selectedTextColor; |
| @checkboxActiveBackground: @white; |
| @checkboxActiveBorderColor: @selectedBorderColor; |
| @checkboxActiveCheckColor: @selectedTextColor; |
| @checkboxActiveCheckOpacity: 1; |
| |
| /* Active Focus */ |
| @checkboxActiveFocusBackground: @white; |
| @checkboxActiveFocusBorderColor: @checkboxFocusBorderColor; |
| @checkboxActiveFocusCheckColor: @selectedTextColor; |
| |
| /* Indeterminate */ |
| @checkboxIndeterminateBackground: @checkboxActiveBackground; |
| @checkboxIndeterminateBorderColor: @checkboxActiveBorderColor; |
| @checkboxIndeterminateCheckOpacity: 1; |
| @checkboxIndeterminateCheckColor: @checkboxActiveCheckColor; |
| |
| /* Disabled */ |
| @disabledCheckboxOpacity: 0.5; |
| @disabledCheckboxLabelColor: rgba(0, 0, 0, 1); |
| |
| /*------------------- |
| Types |
| --------------------*/ |
| |
| /* Radio */ |
| /* Uses px to avoid rounding issues with circles */ |
| |
| @radioSize: 15px; |
| @radioTop: 1px; |
| @radioLeft: 0px; |
| @radioLabelDistance: @labelDistance; |
| |
| @bulletTop: 1px; |
| @bulletLeft: 0px; |
| @bulletScale: (7 / 15); /* 7px as unitless value from radio size */ |
| @bulletColor: @textColor; |
| @bulletRadius: @circularRadius; |
| |
| @radioFocusBackground: @checkboxFocusBackground; |
| @radioFocusBulletColor: @checkboxFocusCheckColor; |
| |
| @radioActiveBackground: @checkboxActiveBackground; |
| @radioActiveBulletColor: @checkboxActiveCheckColor; |
| |
| @radioActiveFocusBackground: @checkboxActiveFocusBackground; |
| @radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor; |
| |
| /* Slider & Toggle Handle */ |
| @handleBackground: @white @subtleGradient; |
| @handleBoxShadow: |
| @subtleShadow, |
| 0px 0px 0px 1px @borderColor inset |
| ; |
| |
| /* Slider */ |
| @sliderHandleSize: 1.5rem; |
| @sliderLineWidth: 3.5rem; |
| @sliderTransitionDuration: 0.3s; |
| |
| @sliderHandleOffset: (1rem - @sliderHandleSize) / 2; |
| @sliderHandleTransition: left @sliderTransitionDuration @defaultEasing; |
| |
| @sliderWidth: @sliderLineWidth; |
| @sliderHeight: (@sliderHandleSize + @sliderHandleOffset); |
| |
| @sliderLineHeight: @3px; |
| @sliderLineVerticalOffset: 0.4rem; |
| @sliderLineColor: @transparentBlack; |
| @sliderLineRadius: @circularRadius; |
| @sliderLineTransition: background @sliderTransitionDuration @defaultEasing; |
| |
| @sliderTravelDistance: @sliderLineWidth - @sliderHandleSize; |
| |
| @sliderLabelDistance: @sliderLineWidth + 1rem; |
| @sliderOffLabelColor: @unselectedTextColor; |
| |
| @sliderLabelLineHeight: 1rem; |
| |
| /* Slider States */ |
| @sliderHoverLaneBackground: @veryStrongTransparentBlack; |
| @sliderHoverLabelColor: @hoveredTextColor; |
| |
| @sliderOnLineColor: @lightBlack; |
| @sliderOnLabelColor: @selectedTextColor; |
| |
| @sliderOnFocusLineColor: @lightBlackFocus; |
| @sliderOnFocusLabelColor: @sliderOnLabelColor; |
| |
| |
| |
| /* Toggle */ |
| @toggleLaneWidth: 3.5rem; |
| @toggleHandleSize: 1.5rem; |
| @toggleTransitionDuration: 0.2s; |
| |
| @toggleWidth: @toggleLaneWidth; |
| @toggleHeight: @toggleHandleSize; |
| |
| @toggleHandleRadius: @circularRadius; |
| @toggleHandleOffset: 0rem; |
| @toggleHandleTransition: |
| background @sliderTransitionDuration @defaultEasing, |
| left @sliderTransitionDuration @defaultEasing |
| ; |
| |
| @toggleLaneBackground: @transparentBlack; |
| @toggleLaneHeight: @toggleHandleSize; |
| @toggleLaneBoxShadow: none; |
| @toggleLaneVerticalOffset: 0rem; |
| @toggleOffOffset: -0.05rem; |
| @toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.15rem; |
| |
| @toggleLabelDistance: @toggleLaneWidth + 1rem; |
| @toggleLabelLineHeight: 1.5rem; |
| @toggleLabelOffset: 0.15em; |
| |
| |
| @toggleFocusColor: @veryStrongTransparentBlack; |
| @toggleHoverColor: @toggleFocusColor; |
| |
| @toggleOffLabelColor: @checkboxColor; |
| @toggleOffHandleBoxShadow: none; |
| |
| @toggleOnLabelColor: @selectedTextColor; |
| @toggleOnLaneColor: @primaryColor; |
| |
| @toggleOnHandleBoxShadow: none; |
| |
| @toggleOnFocusLaneColor: @primaryColorFocus; |
| @toggleOnFocusLabelColor: @toggleOnLabelColor; |
| |
| |
| |
| /*------------------- |
| Variations |
| --------------------*/ |