b0c29a6a4a
- Updated all SCSS files to replace @import with @use and @forward for better modularity and maintainability. - Adjusted mixin calls to reference the new design tokens structure. - Ensured consistent usage of design tokens across various components including login, meeting, and recordings pages. - Improved organization of design tokens and mixins for a cleaner codebase.
211 lines
3.8 KiB
SCSS
211 lines
3.8 KiB
SCSS
@use '../../../../../../src/assets/styles/design-tokens';
|
|
|
|
.wizard-navigation {
|
|
width: 100%;
|
|
padding: var(--ov-meet-spacing-md) 0 0 0;
|
|
|
|
.nav-buttons {
|
|
@include design-tokens.ov-container;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 0 var(--ov-meet-spacing-md) 0;
|
|
|
|
.spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.cancel-btn, .back-btn {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.nav-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ov-meet-spacing-md);
|
|
}
|
|
|
|
button {
|
|
@include design-tokens.ov-button-base;
|
|
border-radius: var(--ov-meet-radius-sm);
|
|
min-width: 120px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.cancel-btn, &.back-btn {
|
|
color: var(--ov-meet-text-secondary);
|
|
border-color: var(--ov-meet-border-color-strong);
|
|
|
|
&:hover {
|
|
background-color: var(--ov-meet-surface-hover);
|
|
}
|
|
}
|
|
|
|
&.skip-btn {
|
|
background-color: var(--ov-meet-color-success);
|
|
color: var(--ov-meet-text-on-primary);
|
|
box-shadow: var(--ov-meet-shadow-sm);
|
|
}
|
|
|
|
&.prev-btn {
|
|
color: var(--ov-meet-color-primary);
|
|
border-color: var(--ov-meet-color-primary);
|
|
|
|
&:hover {
|
|
background-color: var(--ov-meet-surface-hover);
|
|
}
|
|
|
|
&:disabled {
|
|
color: var(--ov-meet-text-disabled);
|
|
border-color: var(--ov-meet-border-color);
|
|
}
|
|
}
|
|
|
|
&.next-btn,
|
|
&.continue-btn {
|
|
background-color: var(--ov-meet-color-primary);
|
|
color: var(--ov-meet-text-on-primary);
|
|
box-shadow: var(--ov-meet-shadow-sm);
|
|
|
|
&:hover {
|
|
background-color: var(--ov-meet-color-primary-dark);
|
|
box-shadow: var(--ov-meet-shadow-md);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--ov-meet-border-color);
|
|
color: var(--ov-meet-text-disabled);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.finish-btn,
|
|
&.save-btn {
|
|
background-color: var(--ov-meet-color-success);
|
|
color: var(--ov-meet-text-on-primary);
|
|
box-shadow: var(--ov-meet-shadow-sm);
|
|
|
|
&:hover {
|
|
box-shadow: var(--ov-meet-shadow-md);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--ov-meet-border-color);
|
|
color: var(--ov-meet-text-disabled);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
mat-icon {
|
|
@include design-tokens.ov-icon(sm);
|
|
margin: 0 var(--ov-meet-spacing-xs);
|
|
|
|
&.leading-icon {
|
|
margin-right: var(--ov-meet-spacing-sm);
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.trailing-icon {
|
|
margin-left: var(--ov-meet-spacing-sm);
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include design-tokens.ov-mobile-down {
|
|
padding: var(--ov-meet-spacing-md) 0;
|
|
|
|
.nav-buttons {
|
|
padding: 0 var(--ov-meet-spacing-sm);
|
|
flex-direction: column;
|
|
gap: var(--ov-meet-spacing-md);
|
|
|
|
.cancel-btn, .back-btn {
|
|
margin-right: 0;
|
|
order: 3;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-group {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
|
|
button {
|
|
flex: 1;
|
|
min-width: auto;
|
|
max-width: 150px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include design-tokens.ov-tablet-down {
|
|
.nav-buttons {
|
|
.nav-group {
|
|
gap: var(--ov-meet-spacing-sm);
|
|
|
|
button {
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
&:focus-visible {
|
|
outline: 2px solid var(--ov-meet-color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&[aria-disabled='true'] {
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
&.loading {
|
|
button:not(.cancel-btn):not(.back-btn) {
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
|
|
mat-icon {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
&.compact {
|
|
padding: var(--ov-meet-spacing-sm) 0;
|
|
border-top: none;
|
|
|
|
.nav-buttons {
|
|
padding: 0 var(--ov-meet-spacing-sm);
|
|
|
|
button {
|
|
min-width: 80px;
|
|
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
|
|
|
|
mat-icon {
|
|
@include design-tokens.ov-icon(xs);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|