Piet Ostendorp
50cac8ac24
Introduces ReservationSuccess, ReservationFailed, PurchaseSuccess, PurchaseFailed, TicketSmall, and TicketList components for handling and displaying reservation and purchase outcomes. Updates order flow logic in OrderComponent to support reservation and purchase states, disables/enables form inputs during submission, and integrates new UI feedback. Also adds angularx-qrcode dependency and updates @infinimotion/model-frontend version.
126 lines
3.0 KiB
SCSS
126 lines
3.0 KiB
SCSS
|
|
// Include theming for Angular Material with `mat.theme()`.
|
|
// This Sass mixin will define CSS variables that are used for styling Angular Material
|
|
// components according to the Material 3 design spec.
|
|
// Learn more about theming and how to use it for your application's
|
|
// custom components at https://material.angular.dev/guide/theming
|
|
@use '@angular/material' as mat;
|
|
@use './_theme-colors' as theme-colors;
|
|
|
|
// Light Theme
|
|
html {
|
|
color-scheme: light;
|
|
@include mat.theme((
|
|
color: (
|
|
theme-type: light,
|
|
primary: theme-colors.$primary-palette,
|
|
tertiary: theme-colors.$tertiary-palette,
|
|
),
|
|
));
|
|
}
|
|
|
|
// Dark Theme
|
|
html.dark {
|
|
color-scheme: dark;
|
|
@include mat.theme((
|
|
color: (
|
|
theme-type: dark,
|
|
primary: theme-colors.$primary-palette,
|
|
tertiary: theme-colors.$tertiary-palette,
|
|
),
|
|
));
|
|
}
|
|
|
|
|
|
|
|
@include mat.progress-bar-overrides((
|
|
active-indicator-color: white,
|
|
track-color: transparent,
|
|
));
|
|
|
|
.mdc-linear-progress__buffer-bar {
|
|
background: linear-gradient(to right, #6366f1, #db2777) !important;
|
|
}
|
|
|
|
@include mat.snack-bar-overrides((
|
|
container-color: red,
|
|
));
|
|
|
|
|
|
|
|
.error-snackbar .mat-mdc-snack-bar-label {
|
|
color: white !important;
|
|
}
|
|
|
|
.error-snackbar .mat-mdc-button {
|
|
color: white !important;
|
|
}
|
|
|
|
.backdropBackground {
|
|
background-color: rgba(0, 0, 0, 0.75) !important;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.mat-step-header .mat-step-icon:not(.mat-step-icon-selected):not(.mat-step-icon-completed):not(.mat-step-icon-state-edit) {
|
|
background-color: #bbb;
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
.error-button {
|
|
@include mat.button-overrides((
|
|
outlined-ripple-color: rgba(255, 0, 0, 0.1),
|
|
));
|
|
|
|
&.mdc-button:not(.mat-mdc-outlined-button):not(:disabled) {
|
|
background-color: var(--color-red-500) !important;
|
|
}
|
|
|
|
&.mdc-button.mat-mdc-outlined-button:not(:disabled) {
|
|
color: var(--color-red-500) !important;
|
|
}
|
|
|
|
&.mdc-button.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
|
|
background-color: var(--color-red-500) !important;
|
|
}
|
|
}
|
|
|
|
.success-button {
|
|
@include mat.button-overrides((
|
|
outlined-ripple-color: rgba(0, 255, 0, 0.1),
|
|
));
|
|
|
|
&.mdc-button:not(.mat-mdc-outlined-button):not(:disabled) {
|
|
background-color: var(--color-green-500) !important;
|
|
}
|
|
|
|
&.mdc-button.mat-mdc-outlined-button:not(:disabled) {
|
|
color: var(--mat-sys-on-surface) !important;
|
|
}
|
|
|
|
&.mdc-button.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
|
|
background-color: var(--color-green-500) !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
// Default the application to a light color theme. This can be changed to
|
|
// `dark` to enable the dark color theme, or to `light dark` to defer to the
|
|
// user's system settings.
|
|
color-scheme: light;
|
|
|
|
// Set a default background, font and text colors for the application using
|
|
// Angular Material's system-level CSS variables. Learn more about these
|
|
// variables at https://material.angular.dev/guide/system-variables
|
|
background-color: var(--mat-sys-surface);
|
|
color: var(--mat-sys-on-surface);
|
|
font: var(--mat-sys-body-medium);
|
|
|
|
// Reset the user agent margin.
|
|
margin: 0;
|
|
}
|