summaryrefslogtreecommitdiffstats
path: root/web_src/css/modules/checkbox.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel@debian.org>2024-10-18 20:33:49 +0200
committerDaniel Baumann <daniel@debian.org>2024-12-12 23:57:56 +0100
commite68b9d00a6e05b3a941f63ffb696f91e554ac5ec (patch)
tree97775d6c13b0f416af55314eb6a89ef792474615 /web_src/css/modules/checkbox.css
parentInitial commit. (diff)
downloadforgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.tar.xz
forgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.zip
Adding upstream version 9.0.3.
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'web_src/css/modules/checkbox.css')
-rw-r--r--web_src/css/modules/checkbox.css121
1 files changed, 121 insertions, 0 deletions
diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css
new file mode 100644
index 0000000..8d73573
--- /dev/null
+++ b/web_src/css/modules/checkbox.css
@@ -0,0 +1,121 @@
+/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
+ unused rules here after refactoring, please remove them. */
+
+input[type="checkbox"],
+input[type="radio"] {
+ width: var(--checkbox-size);
+ height: var(--checkbox-size);
+}
+
+.ui.checkbox {
+ position: relative;
+ display: inline-block;
+ vertical-align: baseline;
+ min-height: var(--checkbox-size);
+ line-height: var(--checkbox-size);
+ min-width: var(--checkbox-size);
+ padding: 1px;
+}
+
+.ui.checkbox input[type="checkbox"],
+.ui.checkbox input[type="radio"] {
+ position: absolute;
+ top: 1px;
+ left: 0;
+ width: var(--checkbox-size);
+ height: var(--checkbox-size);
+}
+
+.ui.checkbox input[type="checkbox"]:enabled,
+.ui.checkbox input[type="radio"]:enabled,
+.ui.checkbox label:enabled {
+ cursor: pointer;
+}
+
+.ui.checkbox label {
+ cursor: auto;
+ position: relative;
+ display: block;
+ user-select: none;
+}
+
+.ui.checkbox label,
+.ui.radio.checkbox label {
+ margin-left: 1.85714em;
+}
+
+.ui.checkbox + label {
+ vertical-align: middle;
+}
+
+.ui.disabled.checkbox label,
+.ui.checkbox input[disabled] ~ label {
+ cursor: default !important;
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.ui.radio.checkbox {
+ min-height: var(--checkbox-size);
+}
+
+/* "switch" styled checkbox */
+
+.ui.toggle.checkbox {
+ min-height: 1.5rem;
+}
+.ui.toggle.checkbox input {
+ width: 3.5rem;
+ height: 21px;
+ opacity: 0;
+ z-index: 3;
+}
+.ui.toggle.checkbox label {
+ min-height: 1.5rem;
+ padding-left: 4.5rem;
+ padding-top: 0.15em;
+}
+.ui.toggle.checkbox label::before {
+ display: block;
+ position: absolute;
+ content: "";
+ z-index: 1;
+ top: 0;
+ width: 49px;
+ height: 21px;
+ border-radius: 500rem;
+ left: 0;
+}
+.ui.toggle.checkbox label::after {
+ background: var(--color-white);
+ box-shadow: 1px 1px 4px 1px var(--color-shadow);
+ position: absolute;
+ content: "";
+ opacity: 1;
+ z-index: 2;
+ width: 18px;
+ height: 18px;
+ top: 1.5px;
+ left: 1.5px;
+ border-radius: 500rem;
+ transition: background 0.3s ease, left 0.3s ease;
+}
+.ui.toggle.checkbox input ~ label::after {
+ left: 1.5px;
+}
+.ui.toggle.checkbox input:checked ~ label::after {
+ left: 29px;
+}
+.ui.toggle.checkbox input:focus ~ label::before,
+.ui.toggle.checkbox label::before {
+ background: var(--color-input-toggle-background);
+}
+.ui.toggle.checkbox label,
+.ui.toggle.checkbox input:checked ~ label,
+.ui.toggle.checkbox input:focus:checked ~ label {
+ color: var(--color-text) !important;
+}
+.ui.toggle.checkbox input:checked ~ label::before,
+.ui.toggle.checkbox input:focus:checked ~ label::before {
+ background: var(--color-primary) !important;
+}