Hallo!
Heute Abend habe ich mir überlegt, einen PR zu erstellen, um den Klick-Effekt auf Buttons optional über eine Einstellung zu machen. Ich persönlich finde, dass er ziemlich schlecht aussieht, aber es gibt wahrscheinlich Leute, denen er wirklich gefällt.
Ich glaube nicht, dass das Team plant, ihn komplett zu entfernen, also wollte ich eine Website-Einstellung vornehmen und dann über den Button SCSS darauf zugreifen.
Ich glaube nicht, dass es eine einfache Datei gibt, um einfach eine Einstellung vorzunehmen und ihr eine Eigenschaft zu geben. Gibt es das? Wenn nicht, wie mache ich das und bekomme es dann in die SCSS-Datei?
Vielen Dank für jede Hilfe!
Falco
24. Juli 2022 um 04:17
2
Ist das nicht etwas, das über eine Theme-Komponente überschrieben werden kann?
3 „Gefällt mir“
Ich habe wohl die Komponenten für dieses Problem speziell vergessen, lol
Aber ist es für die Zukunft möglich, Einstellungen zu erstellen? Ich werde das Problem gleich auf meiner Seite beheben
EDIT: Habe gerade versucht, es auf meiner Seite zu beheben, und es hat nicht funktioniert.
Don
24. Juli 2022 um 08:47
4
Hallo,
Wenn ich das richtig verstehe, ist es der :active-Status des Buttons, den Sie ändern möchten.
Es gibt einen linear-gradient-Mixin für den Farbverlauf.
//noinspection CssOptimizeSimilarProperties
@mixin linear-gradient($start-color, $end-color) {
background-color: $start-color;
background-image: linear-gradient(to bottom, $start-color, $end-color);
}
linear-gradient wird verwendet, wenn der Button aktiv ist. Wie Sie in buttons.css sehen können
Das Ganze ist der Standard-Button-Mixin.
@mixin btn(
$text-color: var(--primary),
$bg-color: var(--primary-low),
$icon-color: var(--primary-high),
$hover-text-color: var(--secondary),
$hover-bg-color: var(--primary-medium),
$hover-icon-color: var(--primary-low)
) {
@include form-item-sizing;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
font-weight: normal;
color: $text-color;
background: $bg-color;
cursor: pointer;
transition: all 0.25s;
.d-icon {
color: $icon-color;
show original
Und nur die Farbvariablen ändern sich bei anderen Buttons wie .btn-primary und darunter:
.btn-primary {
@include btn(
$text-color: var(--secondary),
$bg-color: var(--tertiary),
$icon-color: var(--secondary),
$hover-bg-color: var(--tertiary-hover),
$hover-icon-color: var(--secondary)
);
}
Sie können also die Ausgabe des linear-gradient-Mixins überschreiben, indem Sie die active-Klassen ansprechen.
So etwas sollte funktionieren.
Wir müssen die Button-Typ-Klassen ansprechen, da die Farbvariablen unterschiedlich sind und wir sie nicht global ansprechen können.
// Standard-Button
.btn {
&:active,
&.btn-active {
background-image: none;
border-bottom-color: transparent;
background-color: var(--primary-medium);
}
// Primär-Button
&.btn-primary {
&:active,
&.btn-active {
background-color: var(--tertiary-hover);
}
}
// Gefahr und ✘-Button
&.btn-danger,
&.cancel {
&:active,
&.btn-active {
background-color: var(--danger-hover);
}
}
// ✔-Button
&.ok {
&:active,
&.btn-active {
background-color: var(--success-hover);
}
}
}
Vorher
Nachher
5 „Gefällt mir“
system
8. Dezember 2022 um 15:40
5
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
