aboutsummaryrefslogtreecommitdiff
path: root/semantic/src/definitions/modules/checkbox.less
diff options
context:
space:
mode:
Diffstat (limited to 'semantic/src/definitions/modules/checkbox.less')
-rw-r--r--semantic/src/definitions/modules/checkbox.less814
1 files changed, 0 insertions, 814 deletions
diff --git a/semantic/src/definitions/modules/checkbox.less b/semantic/src/definitions/modules/checkbox.less
deleted file mode 100644
index 32974de..0000000
--- a/semantic/src/definitions/modules/checkbox.less
+++ /dev/null
@@ -1,814 +0,0 @@
-/*!
- * # Fomantic-UI - Checkbox
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'checkbox';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Checkbox
-*******************************/
-
-
-/*--------------
- Content
----------------*/
-
-.ui.checkbox {
- position: relative;
- display: inline-block;
- backface-visibility: hidden;
- outline: none;
- vertical-align: baseline;
- font-style: normal;
-
- min-height: @checkboxSize;
- font-size: @relativeMedium;
- line-height: @checkboxLineHeight;
- min-width: @checkboxSize;
-}
-
-/* HTML Checkbox */
-.ui.checkbox input[type="checkbox"],
-.ui.checkbox input[type="radio"] {
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0 !important;
- outline: none;
- z-index: 3;
- width: @checkboxSize;
- height: @checkboxSize;
-}
-
-
-& when (@variationCheckboxBox) {
- /*--------------
- Box
- ---------------*/
-
- /* .box selector is deprecated and will be removed in v3 */
- .ui.checkbox .box {
- &:extend(.ui.checkbox label all);
- }
- .ui.checkbox + .box {
- &:extend(.ui.checkbox + label all);
- }
- .ui.checkbox input:focus ~ .box {
- &:extend(.ui.checkbox input:focus ~ label all);
- }
- .ui.checkbox input:checked ~ .box {
- &:extend(.ui.checkbox input:checked ~ label all);
- }
- & when (@variationCheckboxIndeterminate) {
- .ui.checkbox input:not([type=radio]):indeterminate ~ .box {
- &:extend(.ui.checkbox input:not([type=radio]):indeterminate ~ label all);
- }
- .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box {
- &:extend(.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label all);
- }
- }
- .ui.checkbox input:checked:focus ~ .box {
- &:extend(.ui.checkbox input:checked:focus ~ label all);
- }
- & when (@variationCheckboxDisabled) {
- .ui.disabled.checkbox .box {
- &:extend(.ui.disabled.checkbox label all);
- }
-
- .ui.checkbox input[disabled] ~ .box {
- &:extend(.ui.checkbox input[disabled] ~ label all);
- }
- }
- & when (@variationCheckboxRadio) {
- .ui.radio.checkbox .box {
- &:extend(.ui.radio.checkbox label all);
- }
- .ui.radio.checkbox input:focus ~ .box {
- &:extend(.ui.radio.checkbox input:focus ~ label all);
- }
- .ui.radio.checkbox input:indeterminate ~ .box {
- &:extend(.ui.radio.checkbox input:indeterminate ~ label all);
- }
- .ui.radio.checkbox input:checked ~ .box {
- &:extend(.ui.radio.checkbox input:checked ~ label all);
- }
- .ui.radio.checkbox input:focus:checked ~ .box {
- &:extend(.ui.radio.checkbox input:focus:checked ~ label all);
- }
- }
- & when (@variationCheckboxSlider) {
- .ui.slider.checkbox .box {
- &:extend(.ui.slider.checkbox label all);
- }
- .ui.slider.checkbox input:focus ~ .box {
- &:extend(.ui.slider.checkbox input:focus ~ label all);
- }
- .ui.slider.checkbox input:checked ~ .box {
- &:extend(.ui.slider.checkbox input:checked ~ label all);
- }
- .ui.slider.checkbox input:focus:checked ~ .box {
- &:extend(.ui.slider.checkbox input:focus:checked ~ label all);
- }
- }
- & when (@variationCheckboxToggle) {
- .ui.toggle.checkbox .box {
- &:extend(.ui.toggle.checkbox label all);
- }
- .ui.toggle.checkbox input ~ .box {
- &:extend(.ui.toggle.checkbox input ~ label all);
- }
- .ui.toggle.checkbox input:focus ~ .box {
- &:extend(.ui.toggle.checkbox input:focus ~ label all);
- }
- .ui.toggle.checkbox input:checked ~ .box {
- &:extend(.ui.toggle.checkbox input:checked ~ label all);
- }
- .ui.toggle.checkbox input:focus:checked ~ .box {
- &:extend(.ui.toggle.checkbox input:focus:checked ~ label all);
- }
- }
- & when (@variationCheckboxFitted) {
- .ui.fitted.checkbox .box {
- &:extend(.ui.fitted.checkbox label all);
- }
- }
- & when (@variationCheckboxInverted) {
- .ui.inverted.checkbox .box {
- &:extend(.ui.inverted.checkbox label all);
- }
- & when (@variationCheckboxSlider) {
- .ui.inverted.slider.checkbox .box {
- &:extend(.ui.inverted.slider.checkbox label all);
- }
- .ui.inverted.slider.checkbox input:checked ~ .box {
- &:extend(.ui.inverted.slider.checkbox input:checked ~ label all);
- }
- .ui.inverted.slider.checkbox input:focus:checked ~ .box {
- &:extend(.ui.inverted.slider.checkbox input:focus:checked ~ label all);
- }
- }
- & when (@variationCheckboxToggle) {
- .ui.inverted.toggle.checkbox .box {
- &:extend(.ui.inverted.toggle.checkbox label all);
- }
- .ui.inverted.toggle.checkbox input:checked ~ .box {
- &:extend(.ui.inverted.toggle.checkbox input:checked ~ label all);
- }
- .ui.inverted.toggle.checkbox input:focus:checked ~ .box {
- &:extend(.ui.inverted.toggle.checkbox input:focus:checked ~ label all);
- }
- }
- }
-}
-
-.ui.checkbox label {
- cursor: auto;
- position: relative;
- display: block;
- padding-left: @labelDistance;
- outline: none;
- font-size: @labelFontSize;
-}
-
-.ui.checkbox label:before {
- position: absolute;
- top: 0;
- left: 0;
-
- width: @checkboxSize;
- height: @checkboxSize;
- content: '';
-
- background: @checkboxBackground;
- border-radius: @checkboxBorderRadius;
-
- transition: @checkboxTransition;
- border: @checkboxBorder;
-}
-
-/*--------------
- Checkmark
----------------*/
-
-.ui.checkbox label:after {
- position: absolute;
- font-size: @checkboxCheckFontSize;
- top: @checkboxCheckTop;
- left: @checkboxCheckLeft;
- width: @checkboxCheckSize;
- height: @checkboxCheckSize;
- text-align: center;
-
- opacity: 0;
- color: @checkboxColor;
- transition: @checkboxTransition;
-}
-
-/*--------------
- Label
----------------*/
-
-/* Inside */
-.ui.checkbox label,
-.ui.checkbox + label {
- color: @labelColor;
- transition: @labelTransition;
-}
-
-/* Outside */
-.ui.checkbox + label {
- vertical-align: middle;
-}
-
-
-/*******************************
- States
-*******************************/
-
-
-/*--------------
- Hover
----------------*/
-
-.ui.checkbox label:hover::before {
- background: @checkboxHoverBackground;
- border-color: @checkboxHoverBorderColor;
-}
-.ui.checkbox label:hover,
-.ui.checkbox + label:hover {
- color: @labelHoverColor;
-}
-
-/*--------------
- Down
----------------*/
-
-.ui.checkbox label:active::before {
- background: @checkboxPressedBackground;
- border-color: @checkboxPressedBorderColor;
-}
-.ui.checkbox label:active::after {
- color: @checkboxPressedColor;
-}
-.ui.checkbox input:active ~ label {
- color: @labelPressedColor;
-}
-
-/*--------------
- Focus
----------------*/
-
-.ui.checkbox input:focus ~ label:before {
- background: @checkboxFocusBackground;
- border-color: @checkboxFocusBorderColor;
-}
-.ui.checkbox input:focus ~ label:after {
- color: @checkboxFocusCheckColor;
-}
-.ui.checkbox input:focus ~ label {
- color: @labelFocusColor;
-}
-
-/*--------------
- Active
----------------*/
-
-.ui.checkbox input:checked ~ label:before {
- background: @checkboxActiveBackground;
- border-color: @checkboxActiveBorderColor;
-}
-.ui.checkbox input:checked ~ label:after {
- opacity: @checkboxActiveCheckOpacity;
- color: @checkboxActiveCheckColor;
-}
-
-& when (@variationCheckboxIndeterminate){
- /*--------------
- Indeterminate
- ---------------*/
-
- .ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
- background: @checkboxIndeterminateBackground;
- border-color: @checkboxIndeterminateBorderColor;
- }
- .ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
- opacity: @checkboxIndeterminateCheckOpacity;
- color: @checkboxIndeterminateCheckColor;
- }
- .ui.indeterminate.toggle.checkbox {
- & input:not([type=radio]):indeterminate ~ label:before {
- background: @toggleCenterLaneBackground;
- }
- & input:not([type=radio]) ~ label:after {
- left: @toggleCenterOffset;
- }
- }
-}
-
-/*--------------
- Active Focus
----------------*/
-
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
-.ui.checkbox input:checked:focus ~ label:before {
- background: @checkboxActiveFocusBackground;
- border-color: @checkboxActiveFocusBorderColor;
-}
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
-.ui.checkbox input:checked:focus ~ label:after {
- color: @checkboxActiveFocusCheckColor;
-}
-
-
-/*--------------
- Read-Only
----------------*/
-
-.ui.read-only.checkbox,
-.ui.read-only.checkbox label {
- cursor: default;
-}
-
-& when (@variationCheckboxDisabled) {
- /*--------------
- Disabled
- ---------------*/
-
- .ui.disabled.checkbox label,
- .ui.checkbox input[disabled] ~ label {
- cursor: default !important;
- opacity: @disabledCheckboxOpacity;
- color: @disabledCheckboxLabelColor;
- pointer-events: none;
- }
-}
-
-/*--------------
- Hidden
----------------*/
-
-/* Initialized checkbox moves input below element
- to prevent manually triggering */
-.ui.checkbox input.hidden {
- z-index: -1;
-}
-
-/* Selectable Label */
-.ui.checkbox input.hidden + label {
- cursor: pointer;
- user-select: none;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationCheckboxRadio) {
- /*--------------
- Radio
- ---------------*/
-
- .ui.radio.checkbox {
- min-height: @radioSize;
- }
-
- .ui.radio.checkbox label {
- padding-left: @radioLabelDistance;
- }
-
- /* Box */
- .ui.radio.checkbox label:before {
- content: '';
- transform: none;
-
- width: @radioSize;
- height: @radioSize;
- border-radius: @circularRadius;
- top: @radioTop;
- left: @radioLeft;
- }
-
- /* Bullet */
- .ui.radio.checkbox label:after {
- border: none;
- content: '' !important;
- line-height: @radioSize;
- top: @bulletTop;
- left: @bulletLeft;
- width: @radioSize;
- height: @radioSize;
- border-radius: @bulletRadius;
- transform: scale(@bulletScale);
- background-color: @bulletColor;
- }
-
- /* Focus */
- .ui.radio.checkbox input:focus ~ label:before {
- background-color: @radioFocusBackground;
- }
- .ui.radio.checkbox input:focus ~ label:after {
- background-color: @radioFocusBulletColor;
- }
-
- /* Indeterminate */
- .ui.radio.checkbox input:indeterminate ~ label:after {
- opacity: 0;
- }
-
- /* Active */
- .ui.radio.checkbox input:checked ~ label:before {
- background-color: @radioActiveBackground;
- }
- .ui.radio.checkbox input:checked ~ label:after {
- background-color: @radioActiveBulletColor;
- }
-
- /* Active Focus */
- .ui.radio.checkbox input:focus:checked ~ label:before {
- background-color: @radioActiveFocusBackground;
- }
- .ui.radio.checkbox input:focus:checked ~ label:after {
- background-color: @radioActiveFocusBulletColor;
- }
-}
-
-& when (@variationCheckboxSlider) {
- /*--------------
- Slider
- ---------------*/
-
- .ui.slider.checkbox {
- min-height: @sliderHeight;
- }
-
- /* Input */
- .ui.slider.checkbox input {
- width: @sliderWidth;
- height: @sliderHeight;
- }
-
- /* Label */
- .ui.slider.checkbox label {
- padding-left: @sliderLabelDistance;
- line-height: @sliderLabelLineHeight;
- color: @sliderOffLabelColor;
- }
-
- /* Line */
- .ui.slider.checkbox label:before {
- display: block;
- position: absolute;
- content: '';
- transform: none;
- border: none !important;
- left: 0;
- z-index: 1;
-
- top: @sliderLineVerticalOffset;
-
- background-color: @sliderLineColor;
- width: @sliderLineWidth;
- height: @sliderLineHeight;
-
- border-radius: @sliderLineRadius;
- transition: @sliderLineTransition;
-
- }
-
- /* Handle */
- .ui.slider.checkbox label:after {
- background: @handleBackground;
- position: absolute;
- content: '' !important;
- opacity: 1;
- z-index: 2;
-
- border: none;
- box-shadow: @handleBoxShadow;
- width: @sliderHandleSize;
- height: @sliderHandleSize;
- top: @sliderHandleOffset;
- left: 0;
- transform: none;
-
- border-radius: @circularRadius;
- transition: @sliderHandleTransition;
- }
-
- /* Focus */
- .ui.slider.checkbox input:focus ~ label:before {
- background-color: @toggleFocusColor;
- border: none;
- }
-
- /* Hover */
- .ui.slider.checkbox label:hover {
- color: @sliderHoverLabelColor;
- }
- .ui.slider.checkbox label:hover::before {
- background: @sliderHoverLaneBackground;
- }
-
- /* Active */
- .ui.slider.checkbox input:checked ~ label {
- color: @sliderOnLabelColor !important;
- }
- .ui.slider.checkbox input:checked ~ label:before {
- background-color: @sliderOnLineColor !important;
- }
- .ui.slider.checkbox input:checked ~ label:after {
- left: @sliderTravelDistance;
- }
-
- /* Active Focus */
- .ui.slider.checkbox input:focus:checked ~ label {
- color: @sliderOnFocusLabelColor !important;
- }
- .ui.slider.checkbox input:focus:checked ~ label:before {
- background-color: @sliderOnFocusLineColor !important;
- }
-}
-
-& when (@variationCheckboxToggle) {
- /*--------------
- Toggle
- ---------------*/
-
- .ui.toggle.checkbox {
- min-height: @toggleHeight;
- }
-
- /* Input */
- .ui.toggle.checkbox input {
- width: @toggleWidth;
- height: @toggleHeight;
- }
-
- /* Label */
- .ui.toggle.checkbox label {
- min-height: @toggleHandleSize;
- padding-left: @toggleLabelDistance;
- color: @toggleOffLabelColor;
- }
- .ui.toggle.checkbox label {
- padding-top: @toggleLabelOffset;
- }
-
- /* Switch */
- .ui.toggle.checkbox label:before {
- display: block;
- position: absolute;
- content: '';
- z-index: 1;
- transform: none;
- border: none;
-
- top: @toggleLaneVerticalOffset;
-
- background: @toggleLaneBackground;
- box-shadow: @toggleLaneBoxShadow;
- width: @toggleLaneWidth;
- height: @toggleLaneHeight;
- border-radius: @toggleHandleRadius;
- }
-
- /* Handle */
- .ui.toggle.checkbox label:after {
- background: @handleBackground;
- position: absolute;
- content: '' !important;
- opacity: 1;
- z-index: 2;
-
- border: none;
- box-shadow: @handleBoxShadow;
- width: @toggleHandleSize;
- height: @toggleHandleSize;
- top: @toggleHandleOffset;
- left: 0;
-
- border-radius: @circularRadius;
- transition: @toggleHandleTransition;
- }
-
- .ui.toggle.checkbox input ~ label:after {
- left: @toggleOffOffset;
- box-shadow: @toggleOffHandleBoxShadow;
- }
-
- /* Focus */
- .ui.toggle.checkbox input:focus ~ label:before {
- background-color: @toggleFocusColor;
- border: none;
- }
-
- /* Hover */
- .ui.toggle.checkbox label:hover::before {
- background-color: @toggleHoverColor;
- border: none;
- }
-
- /* Active */
- .ui.toggle.checkbox input:checked ~ label {
- color: @toggleOnLabelColor !important;
- }
- .ui.toggle.checkbox input:checked ~ label:before {
- background-color: @toggleOnLaneColor !important;
- }
- .ui.toggle.checkbox input:checked ~ label:after {
- left: @toggleOnOffset;
- box-shadow: @toggleOnHandleBoxShadow;
- }
-
-
- /* Active Focus */
- .ui.toggle.checkbox input:focus:checked ~ label {
- color: @toggleOnFocusLabelColor !important;
- }
- .ui.toggle.checkbox input:focus:checked ~ label:before {
- background-color: @toggleOnFocusLaneColor !important;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-& when (@variationCheckboxFitted) {
- /*--------------
- Fitted
- ---------------*/
-
- .ui.fitted.checkbox label {
- padding-left: 0 !important;
- }
-
- .ui.fitted.toggle.checkbox {
- width: @toggleWidth;
- }
-
- .ui.fitted.slider.checkbox {
- width: @sliderWidth;
- }
-}
-
-& when (@variationCheckboxInverted) {
- /*--------------
- Inverted
- ---------------*/
- .ui.inverted.checkbox label,
- .ui.inverted.checkbox + label {
- color: @invertedTextColor !important;
- }
-
- /* Hover */
- .ui.inverted.checkbox label:hover {
- color: @invertedHoveredTextColor !important;
- }
- .ui.inverted.checkbox label:hover::before {
- border-color: @strongSelectedBorderColor;
- }
- & when (@variationCheckboxSlider) {
- /*Slider Label */
- .ui.inverted.slider.checkbox label {
- color: @invertedUnselectedTextColor;
- }
-
- /* Slider Line */
- .ui.inverted.slider.checkbox label:before {
- background-color: @invertedUnselectedTextColor !important;
- }
-
- /* Slider Hover */
- .ui.inverted.slider.checkbox label:hover::before {
- background: @invertedLightTextColor !important;
- }
-
- /* Slider Active */
- .ui.inverted.slider.checkbox input:checked ~ label {
- color: @invertedSelectedTextColor !important;
- }
- .ui.inverted.slider.checkbox input:checked ~ label:before {
- background-color: @selectedWhiteBorderColor !important;
- }
-
- /* Slider Active Focus */
- .ui.inverted.slider.checkbox input:focus:checked ~ label {
- color: @invertedSelectedTextColor !important;
- }
- .ui.inverted.slider.checkbox input:focus:checked ~ label:before {
- background-color: @selectedWhiteBorderColor !important;
- }
- }
- & when (@variationCheckboxToggle) {
- /* Toggle Switch */
- .ui.inverted.toggle.checkbox label:before {
- background-color: @invertedTextColor !important;
- }
-
- /* Toggle Hover */
- .ui.inverted.toggle.checkbox label:hover::before {
- background: @invertedHoveredTextColor !important;
- }
-
- /* Toggle Active */
- .ui.inverted.toggle.checkbox input:checked ~ label {
- color: @invertedSelectedTextColor !important;
- }
- .ui.inverted.toggle.checkbox input:checked ~ label:before {
- background-color: @toggleOnLaneColor !important;
- }
-
- /* Toggle Active Focus */
- .ui.inverted.toggle.checkbox input:focus:checked ~ label {
- color: @invertedSelectedTextColor !important;
- }
- .ui.inverted.toggle.checkbox input:focus:checked ~ label:before {
- background-color: @toggleOnFocusLaneColor !important;
- }
- }
-}
-
-/*--------------------
- Size
----------------------*/
-
-each(@variationCheckboxSizes, {
- @raw: @{value}Raw;
- @size: @{value}CheckboxSize;
- @circleScale: @{value}CheckboxCircleScale;
- @circleLeft: @{value}CheckboxCircleLeft;
-
- .ui.@{value}.checkbox {
- font-size: @@size;
- }
-
- & when (@@raw > 1) {
- .ui.@{value}.form .checkbox,
- .ui.@{value}.checkbox {
- &:not(.slider):not(.toggle):not(.radio) {
- &
- label:after,
- label:before {
- transform: scale(@@raw);
- transform-origin:left;
- }
- }
- &.radio when (@variationCheckboxRadio) {
- &
- label:before {
- transform: scale(@@raw);
- transform-origin:left;
- }
- &
- label:after {
- transform:scale(@@circleScale);
- transform-origin:left;
- left: @@circleLeft;
- }
- }
- }
- }
- & when (@@raw > 1) and (@variationCheckboxBox) {
- .ui.@{value}.form .checkbox,
- .ui.@{value}.checkbox {
- &:not(.slider):not(.toggle):not(.radio) {
- &
- .box:after,
- .box:before {
- transform: scale(@@raw);
- transform-origin:left;
- }
- }
- &.radio when (@variationCheckboxRadio) {
- &
- .box:before {
- transform: scale(@@raw);
- transform-origin:left;
- }
- &
- .box:after {
- transform:scale(@@circleScale);
- transform-origin:left;
- left: @@circleLeft;
- }
- }
- }
- }
-})
-
-.loadUIOverrides();
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 13:58:51 +0000