Hola!
Esta noche estaba investigando cómo hacer que el efecto de clic en los botones sea opcional a través de una configuración. Personalmente, creo que se ve bastante mal, pero probablemente haya gente a la que le guste mucho.
No creo que el equipo esté buscando eliminarlo por completo, así que iba a investigar cómo hacer una configuración del sitio y luego acceder a ella a través de los SCSS de los botones .
No creo que haya un archivo fácil para simplemente crear una configuración y darle una propiedad. ¿Lo hay? Si no, ¿cómo lo hago y luego lo obtengo en el archivo SCSS?
¡Gracias por cualquier ayuda!
Falco
24 Julio, 2022 04:17
2
¿No es esto algo que se puede sobrescribir a través de un componente temático?
3 Me gusta
Supongo que me olvidé de los componentes para este problema en específico, ¡jaja!
Pero para el futuro, ¿es posible crear configuraciones? Arreglaré el problema por mi cuenta en un momento.
EDITAR: Acabo de intentar arreglarlo por mi cuenta y no funcionó.
Don
24 Julio, 2022 08:47
4
Hola,
Si entiendo correctamente, este es el estado :active del botón lo que quieres cambiar.
Hay un mixin linear-gradient para la transición de color.
//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 se usa cuando el botón está activo. Como puedes ver en buttons.css
Todo esto es el mixin de botón predeterminado.
@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
Y solo las variables de color cambian en el otro botón como .btn-primary y los siguientes:
.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)
);
}
Por lo tanto, puedes anular la salida del mixin linear-gradient apuntando a las clases active.
Algo como esto debería funcionar.
Tenemos que apuntar a las clases de los tipos de botón porque las variables de color son diferentes, por lo que no podemos apuntar globalmente.
// Botón predeterminado
.btn {
&:active,
&.btn-active {
background-image: none;
border-bottom-color: transparent;
background-color: var(--primary-medium);
}
// Botón primario
&.btn-primary {
&:active,
&.btn-active {
background-color: var(--tertiary-hover);
}
}
// Botón de peligro y ✘
&.btn-danger,
&.cancel {
&:active,
&.btn-active {
background-color: var(--danger-hover);
}
}
// Botón ✔
&.ok {
&:active,
&.btn-active {
background-color: var(--success-hover);
}
}
}
Antes
Después
5 Me gusta
system
8 Diciembre, 2022 15:40
5
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
