185 lines
3.8 KiB
CSS
185 lines
3.8 KiB
CSS
/* Stile, die NUR für diese Button-Komponente gelten */
|
|
:host {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
/* Basis-Stil für alle Buttons */
|
|
.btn {
|
|
position: relative; /* Wichtig für den Ripple-Effekt */
|
|
overflow: hidden; /* Verhindert, dass der Ripple über den Button hinausgeht */
|
|
|
|
border: none;
|
|
border-radius: var(--border-radius-md);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
padding: 0.6rem 1.2rem;
|
|
transition: all 0.2s ease-out;
|
|
|
|
/* Stellt sicher, dass der Inhalt (Text/Icon) zentriert ist */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--box-shadow-md);
|
|
}
|
|
|
|
.btn:active:not(:disabled) {
|
|
/* Kleiner "Drück"-Effekt beim aktiven Klick */
|
|
transform: translateY(0);
|
|
box-shadow: var(--box-shadow-sm);
|
|
}
|
|
|
|
/* Farbvarianten */
|
|
.btn-primary {
|
|
background: var(--color-primary-gradient);
|
|
color: #fff;
|
|
}
|
|
.btn-secondary {
|
|
background-color: var(--color-surface);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.btn-stroked {
|
|
background-color: transparent;
|
|
color: var(--color-primary);
|
|
border: 1px solid var(--color-primary);
|
|
}
|
|
.btn-flat {
|
|
background-color: transparent;
|
|
color: var(--color-primary);
|
|
box-shadow: none; /* Flat-Buttons haben keinen Schatten */
|
|
}
|
|
.btn-icon {
|
|
background-color: transparent;
|
|
color: var(--color-text-light);
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
box-shadow: none;
|
|
}
|
|
.btn-icon:hover:not(:disabled) {
|
|
background-color: var(--color-border);
|
|
transform: none; /* Kein Hover-Effekt für Icon-Buttons */
|
|
box-shadow: none;
|
|
}
|
|
.btn-icon-danger:hover:not(:disabled) {
|
|
background-color: #fee2e2;
|
|
color: var(--color-danger);
|
|
}
|
|
:host-context(body.dark-theme) .btn-icon-danger:hover:not(:disabled) {
|
|
background-color: #991b1b;
|
|
}
|
|
|
|
/* Deaktivierter Zustand */
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Modifikatoren */
|
|
.btn-full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Klick-Effekt (Ripple) */
|
|
.ripple {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
animation: ripple-effect 0.6s linear;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
.btn-secondary .ripple,
|
|
.btn-stroked .ripple,
|
|
.btn-flat .ripple,
|
|
.btn-icon .ripple {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
@keyframes ripple-effect {
|
|
to {
|
|
transform: scale(4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-tooltip] {
|
|
position: relative;
|
|
}
|
|
[data-tooltip]::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-8px);
|
|
background-color: #2c3e50;
|
|
color: #fff;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 0.85rem;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity var(--transition-speed), transform var(--transition-speed);
|
|
}
|
|
[data-tooltip]:hover::after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(-50%) translateY(-12px);
|
|
}
|
|
|
|
.btn.is-loading {
|
|
cursor: wait;
|
|
}
|
|
|
|
.btn-content {
|
|
display: flex;
|
|
}
|
|
.btn-content span {
|
|
display: flex;
|
|
height: auto;
|
|
align-content: center;
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
.btn-content.is-hidden {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Der Lade-Spinner */
|
|
.spinner {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-top-color: #fff; /* Farbe des sich drehenden Teils */
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Spinner-Farbe für nicht-primäre Buttons anpassen */
|
|
.btn-secondary .spinner,
|
|
.btn-stroked .spinner,
|
|
.btn-flat .spinner,
|
|
.btn-icon .spinner {
|
|
border: 2px solid rgba(0, 0, 0, 0.1);
|
|
border-top-color: var(--color-primary);
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
|
}
|
|
}
|