mirror of
https://github.com/go-gitea/gitea
synced 2025-03-10 20:54:30 +00:00
303af554c9
Fix: https://github.com/go-gitea/gitea/issues/33519 As discussed in [PR #33614](https://github.com/go-gitea/gitea/pull/33614), the ScopedAccessTokenSelector Vue component is not particularly useful. This PR removes the component and reverts to using HTML templates. It also introduces some (hopefully) useful refactoring. The Vue component was causing the UX bug reported in the linked issue. Required form fields are now properly working, as expected (see screenshot).  --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
132 lines
2.7 KiB
CSS
132 lines
2.7 KiB
CSS
/* 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: 20px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
label.gt-checkbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.ui.form .field > label.gt-checkbox {
|
|
display: flex;
|
|
}
|