128 lines
4.6 KiB
SCSS
128 lines
4.6 KiB
SCSS
:host {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn {
|
|
min-height: var(--app-button-min-height, 40px);
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.btn {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
.btn-primary,
|
|
.btn-secondary,
|
|
.btn-danger {
|
|
--bs-btn-bg: transparent;
|
|
--bs-btn-border-color: transparent;
|
|
--bs-btn-color: #fff;
|
|
--bs-btn-hover-color: #fff;
|
|
--bs-btn-active-color: #fff;
|
|
}
|
|
|
|
.btn-outline-primary,
|
|
.btn-outline-neutral,
|
|
.btn-outline-danger,
|
|
.btn-borderless {
|
|
--bs-btn-bg: transparent;
|
|
--bs-btn-hover-color: #fff;
|
|
--bs-btn-active-color: #fff;
|
|
}
|
|
|
|
.btn-primary {
|
|
--bs-btn-bg: var(--tenant-primary);
|
|
--bs-btn-border-color: var(--tenant-primary);
|
|
--bs-btn-hover-bg: color-mix(in srgb, black 40%, var(--tenant-primary));
|
|
--bs-btn-hover-border-color: color-mix(in srgb, black 40%, var(--tenant-primary));
|
|
--bs-btn-active-bg: color-mix(in srgb, black 44%, var(--tenant-primary));
|
|
--bs-btn-active-border-color: color-mix(in srgb, black 44%, var(--tenant-primary));
|
|
--bs-btn-disabled-color: #fff;
|
|
--bs-btn-disabled-bg: color-mix(in srgb, white 50%, var(--tenant-primary));
|
|
--bs-btn-disabled-border-color: color-mix(in srgb, white 50%, var(--tenant-primary));
|
|
--bs-btn-disabled-opacity: 1;
|
|
}
|
|
|
|
.btn-secondary {
|
|
--bs-btn-bg: var(--tenant-secondary);
|
|
--bs-btn-border-color: var(--tenant-secondary);
|
|
--bs-btn-hover-bg: color-mix(in srgb, black 26%, var(--tenant-secondary));
|
|
--bs-btn-hover-border-color: color-mix(in srgb, black 26%, var(--tenant-secondary));
|
|
--bs-btn-active-bg: color-mix(in srgb, black 30%, var(--tenant-secondary));
|
|
--bs-btn-active-border-color: color-mix(in srgb, black 30%, var(--tenant-secondary));
|
|
--bs-btn-disabled-color: #fff;
|
|
--bs-btn-disabled-bg: color-mix(in srgb, transparent 50%, var(--tenant-secondary));
|
|
--bs-btn-disabled-border-color: color-mix(in srgb, transparent 50%, var(--tenant-secondary));
|
|
--bs-btn-disabled-opacity: 1;
|
|
}
|
|
|
|
.btn-danger {
|
|
--bs-btn-bg: var(--tenant-danger);
|
|
--bs-btn-border-color: var(--tenant-danger);
|
|
--bs-btn-hover-bg: color-mix(in srgb, black 38%, var(--tenant-danger));
|
|
--bs-btn-hover-border-color: color-mix(in srgb, black 38%, var(--tenant-danger));
|
|
--bs-btn-active-bg: color-mix(in srgb, black 44%, var(--tenant-danger));
|
|
--bs-btn-active-border-color: color-mix(in srgb, black 44%, var(--tenant-danger));
|
|
--bs-btn-disabled-color: #fff;
|
|
--bs-btn-disabled-bg: color-mix(in srgb, transparent 50%, var(--tenant-danger));
|
|
--bs-btn-disabled-border-color: color-mix(in srgb, transparent 50%, var(--tenant-danger));
|
|
--bs-btn-disabled-opacity: 1;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
--bs-btn-color: var(--tenant-primary);
|
|
--bs-btn-border-color: var(--tenant-primary);
|
|
--bs-btn-hover-bg: var(--tenant-primary);
|
|
--bs-btn-hover-border-color: var(--tenant-primary);
|
|
--bs-btn-active-bg: color-mix(in srgb, black 12%, var(--tenant-primary));
|
|
--bs-btn-active-border-color: color-mix(in srgb, black 12%, var(--tenant-primary));
|
|
--bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
|
|
--bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
|
|
}
|
|
|
|
.btn-outline-neutral {
|
|
--bs-btn-color: #666666;
|
|
--bs-btn-border-color: #a0a0a0;
|
|
--bs-btn-hover-bg: #a0a0a0;
|
|
--bs-btn-hover-border-color: #a0a0a0;
|
|
--bs-btn-active-bg: #8a8a8a;
|
|
--bs-btn-active-border-color: #8a8a8a;
|
|
--bs-btn-disabled-color: rgba(102, 102, 102, 0.55);
|
|
--bs-btn-disabled-border-color: rgba(160, 160, 160, 0.55);
|
|
}
|
|
|
|
.btn-outline-danger {
|
|
--bs-btn-color: var(--tenant-danger);
|
|
--bs-btn-border-color: var(--tenant-danger);
|
|
--bs-btn-hover-bg: var(--tenant-danger);
|
|
--bs-btn-hover-border-color: var(--tenant-danger);
|
|
--bs-btn-active-bg: color-mix(in srgb, black 12%, var(--tenant-danger));
|
|
--bs-btn-active-border-color: color-mix(in srgb, black 12%, var(--tenant-danger));
|
|
--bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
|
|
--bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
|
|
}
|
|
|
|
.btn-borderless {
|
|
min-width: auto;
|
|
padding-inline: 0;
|
|
border: 0;
|
|
color: var(--tenant-primary);
|
|
font-weight: 700;
|
|
--bs-btn-border-color: transparent;
|
|
--bs-btn-hover-color: color-mix(in srgb, black 18%, var(--tenant-primary));
|
|
--bs-btn-hover-bg: transparent;
|
|
--bs-btn-hover-border-color: transparent;
|
|
--bs-btn-active-color: color-mix(in srgb, black 24%, var(--tenant-primary));
|
|
--bs-btn-active-bg: transparent;
|
|
--bs-btn-active-border-color: transparent;
|
|
--bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
|
|
--bs-btn-disabled-bg: transparent;
|
|
--bs-btn-disabled-border-color: transparent;
|
|
--bs-btn-disabled-opacity: 1;
|
|
}
|