gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Interactive Elements: Aktivierung über Schalter statt Entfernen-Button

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-23 10:01:42 +02:00
parent 857785da1b
commit 4278019c02
3 changed files with 172 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styleguide.css
+8 -75
View File
@@ -507,6 +507,12 @@ section + section {
gap: var(--spacing-small);
}
.sg-activatable-row {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
}
.sg-interaction-element {
box-sizing: border-box;
height: var(--interaction-height);
@@ -1012,36 +1018,6 @@ section + section {
color: var(--text-control-default);
}
.sg-slider-row[data-activatable="true"] {
position: relative;
padding-right: calc(var(--interaction-height) + var(--spacing-small));
}
#component-slider .sg-form-preview-area {
padding-right: calc(var(--spacing-large) + var(--interaction-height) + var(--spacing-small));
}
.sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
#component-slider .sg-slider-row[data-activatable="true"] {
position: static;
padding-right: 0;
}
#component-slider .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
top: auto;
right: auto;
transform: none;
align-self: center;
margin-left: calc(var(--spacing-small) * 1.5);
}
.sg-slider-row--inactive-selectable {
opacity: var(--disabled-opacity);
}
@@ -1051,11 +1027,9 @@ section + section {
grid-template-columns:
var(--layout-input-label-width)
minmax(0, 1fr)
auto
var(--interaction-height);
auto;
align-items: center;
column-gap: var(--spacing-small);
padding-right: 0;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
@@ -1082,16 +1056,6 @@ section + section {
grid-row: 1;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
top: auto;
right: auto;
transform: none;
margin-left: calc(var(--spacing-small) * 1.5);
grid-column: 4;
grid-row: 1;
}
@media (max-width: 48rem) {
#component-slider .sg-state-example {
grid-template-columns: 1fr;
@@ -1130,18 +1094,6 @@ section + section {
white-space: nowrap;
}
.sg-slider-row[data-activatable="true"] {
padding-right: 0;
}
.sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
top: auto;
right: auto;
transform: none;
align-self: center;
margin-left: calc(var(--spacing-small) * 1.5);
}
}
.sg-sandwich-button {
@@ -1350,8 +1302,7 @@ section + section {
color: var(--text-control-default);
}
.sg-pulldown-panel__remove,
.sg-activatable-remove {
.sg-pulldown-panel__remove {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -1374,10 +1325,6 @@ section + section {
display: none;
}
.sg-activatable-remove[hidden] {
display: none;
}
.sg-pulldown-panel__row--disabled {
color: var(--text-control-disabled);
opacity: var(--disabled-opacity);
@@ -1764,7 +1711,6 @@ section + section {
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-small);
padding-right: 0;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
@@ -1786,19 +1732,6 @@ section + section {
flex: 0 0 auto;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
transform: none;
margin-left: calc(var(--spacing-small) * 1.5);
flex: 0 0 var(--interaction-height);
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove[hidden] {
display: inline-flex;
visibility: hidden;
pointer-events: none;
}
.sg-pulldown-panel__row {
grid-template-columns: minmax(0, 1fr) var(--interaction-height);
}