Files
Readarr/frontend/src/Components/Form/CheckInput.css
Zak Saunders 6e38df366f New: Darkmode
* New: Native Theme Engine

Co-Authored-By: Zak Saunders <thezak48@users.noreply.github.com>
(cherry picked from commit 2291f3e00eb2ff9268a0b2f49da8dde82ee13c04)

* Update CSS for themes

* Fixup CSS values

* Fixup remove duped Color-Impaired setting

* Fixup Link Colors

Co-Authored-By: Qstick <qstick@gmail.com>
2023-01-21 18:18:48 -06:00

106 lines
1.7 KiB
CSS

.container {
position: relative;
display: flex;
flex: 1 1 65%;
user-select: none;
}
.label {
display: flex;
margin-bottom: 0;
min-height: 21px;
font-weight: normal;
cursor: pointer;
}
.checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
pointer-events: none;
&:global(.isDisabled) {
cursor: not-allowed;
}
}
.input {
flex: 1 0 auto;
margin-top: 7px;
margin-right: 5px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: var(--white);
color: var(--white);
text-align: center;
line-height: 20px;
}
.checkbox:focus + .input {
outline: 0;
border-color: var(--inputFocusBorderColor);
box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
}
.dangerIsChecked {
border-color: var(--dangerColor);
background-color: var(--dangerColor);
&.isDisabled {
opacity: 0.7;
}
}
.primaryIsChecked {
border-color: var(--primaryColor);
background-color: var(--primaryColor);
&.isDisabled {
opacity: 0.7;
}
}
.successIsChecked {
border-color: var(--successColor);
background-color: var(--successColor);
&.isDisabled {
opacity: 0.7;
}
}
.warningIsChecked {
border-color: var(--warningColor);
background-color: var(--warningColor);
&.isDisabled {
opacity: 0.7;
}
}
.isNotChecked {
&.isDisabled {
border-color: var(--disabledCheckInputColor);
background-color: var(--disabledCheckInputColor);
opacity: 0.7;
}
}
.isIndeterminate {
border-color: var(--gray);
background-color: var(--gray);
}
.helpText {
composes: helpText from '~Components/Form/FormInputHelpText.css';
margin-top: 8px;
margin-left: 5px;
}
.isDisabled {
cursor: not-allowed;
}