mirror of
https://github.com/dgtlmoon/changedetection.io.git
synced 2026-09-22 21:36:18 +00:00
dgtlmoon
4b9ae5a97c
Build and push containers / metadata (push) Has been cancelled
Build and push containers / build-push-containers (push) Has been cancelled
Publish Python 🐍distribution 📦 to PyPI and TestPyPI / Build distribution 📦 (push) Has been cancelled
ChangeDetection.io App Test / lint-code (push) Has been cancelled
Publish Python 🐍distribution 📦 to PyPI and TestPyPI / Test the built 📦 package works basically. (push) Has been cancelled
Publish Python 🐍distribution 📦 to PyPI and TestPyPI / Publish Python 🐍 distribution 📦 to PyPI (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-10 (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-11 (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-12 (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-13 (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
114 lines
2.3 KiB
SCSS
114 lines
2.3 KiB
SCSS
|
|
// Ternary radio button group component
|
|
.ternary-radio-group {
|
|
display: flex;
|
|
gap: 0;
|
|
border: 1px solid var(--color-grey-750);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
width: fit-content;
|
|
background: var(--color-background);
|
|
|
|
.ternary-radio-option {
|
|
position: relative;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
input[type="radio"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.ternary-radio-label {
|
|
padding: 8px 16px;
|
|
background: var(--color-grey-900);
|
|
border: none;
|
|
border-right: 1px solid var(--color-grey-750);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-text);
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
&:last-child .ternary-radio-label {
|
|
border-right: none;
|
|
}
|
|
|
|
input:checked + .ternary-radio-label {
|
|
background: var(--color-link);
|
|
color: var(--color-text-button);
|
|
font-weight: 600;
|
|
|
|
&.ternary-default {
|
|
background: var(--color-grey-600);
|
|
color: var(--color-text-button);
|
|
}
|
|
|
|
&:hover {
|
|
background: #1a7bc4;
|
|
|
|
&.ternary-default {
|
|
background: var(--color-grey-500);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover .ternary-radio-label {
|
|
background: var(--color-grey-800);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
width: 100%;
|
|
|
|
.ternary-radio-label {
|
|
flex: 1;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Standard radio button styling
|
|
input[type="radio"].pure-radio:checked + label,
|
|
input[type="radio"].pure-radio:checked {
|
|
background: var(--color-link);
|
|
color: var(--color-text-button);
|
|
}
|
|
|
|
html[data-darkmode="true"] {
|
|
.ternary-radio-group {
|
|
.ternary-radio-option {
|
|
.ternary-radio-label {
|
|
background: var(--color-grey-350);
|
|
}
|
|
|
|
&:hover .ternary-radio-label {
|
|
background: var(--color-grey-400);
|
|
}
|
|
|
|
input:checked + .ternary-radio-label {
|
|
background: var(--color-link);
|
|
color: var(--color-text-button);
|
|
|
|
&.ternary-default {
|
|
background: var(--color-grey-600);
|
|
}
|
|
|
|
&:hover {
|
|
background: #1a7bc4;
|
|
|
|
&.ternary-default {
|
|
background: var(--color-grey-500);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |