Refactor SCSS to use @use and @forward for design tokens
- 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.
This commit is contained in:
Carlos Santos
parent
4bd66fc53a
commit
b0c29a6a4a
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
#dashboard-container,
|
||||
mat-sidenav-container {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Import design system utilities
|
||||
@import '../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// === DIALOG CONTAINER ===
|
||||
::ng-deep {
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
:host {
|
||||
.dialog-container {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
display: block;
|
||||
animation: dialogFadeIn 0.2s ease-out;
|
||||
}
|
||||
@ -36,8 +36,8 @@
|
||||
// === DIALOG TITLE ===
|
||||
.dialog-title {
|
||||
@extend .ov-text-center;
|
||||
@include ov-theme-transition;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
color: var(--ov-meet-text-primary);
|
||||
font-size: var(--ov-meet-font-size-xl) !important;
|
||||
@ -47,14 +47,14 @@
|
||||
line-height: var(--ov-meet-line-height-tight);
|
||||
|
||||
.dialog-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// === DIALOG CONTENT ===
|
||||
::ng-deep mat-dialog-content {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
color: var(--ov-meet-text-secondary);
|
||||
font-size: var(--ov-meet-font-size-md) !important;
|
||||
line-height: var(--ov-meet-line-height-relaxed);
|
||||
@ -67,7 +67,7 @@
|
||||
}
|
||||
|
||||
.force-checkbox-container {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
margin-top: var(--ov-meet-spacing-lg);
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
border: 1px solid var(--ov-meet-border-color);
|
||||
@ -93,7 +93,7 @@
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
|
||||
.warning-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
color: var(--ov-meet-color-warning);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px; // Align with first line of text
|
||||
@ -112,7 +112,7 @@
|
||||
|
||||
// === DIALOG ACTIONS ===
|
||||
.dialog-action {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
margin: 0;
|
||||
@ -120,15 +120,15 @@
|
||||
|
||||
// Button styling
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include ov-theme-transition;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-button-base;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
min-width: 80px;
|
||||
margin: 0; // Reset default margin
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
|
||||
// Cancel/Secondary button
|
||||
@ -138,7 +138,7 @@
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
@include ov-hover-lift(-1px);
|
||||
@include design-tokens.ov-hover-lift(-1px);
|
||||
background: var(--ov-meet-surface-hover);
|
||||
color: var(--ov-meet-text-primary);
|
||||
}
|
||||
@ -149,7 +149,7 @@
|
||||
color: var(--ov-meet-text-on-primary);
|
||||
|
||||
&:hover {
|
||||
@include ov-hover-lift(-1px);
|
||||
@include design-tokens.ov-hover-lift(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -176,7 +176,7 @@
|
||||
}
|
||||
|
||||
// === RESPONSIVE DESIGN ===
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.dialog-title {
|
||||
font-size: var(--ov-meet-font-size-lg);
|
||||
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0;
|
||||
@ -184,7 +184,7 @@
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
|
||||
.dialog-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Import design system utilities
|
||||
@import '../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// === DIALOG CONTAINER ===
|
||||
::ng-deep {
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
:host {
|
||||
.dialog-container {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
display: block;
|
||||
animation: dialogFadeIn 0.2s ease-out;
|
||||
}
|
||||
@ -36,8 +36,8 @@
|
||||
// === DIALOG TITLE ===
|
||||
.dialog-title {
|
||||
@extend .ov-text-center;
|
||||
@include ov-theme-transition;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
color: var(--ov-meet-text-primary);
|
||||
font-size: var(--ov-meet-font-size-xl) !important;
|
||||
@ -47,14 +47,14 @@
|
||||
line-height: var(--ov-meet-line-height-tight);
|
||||
|
||||
.dialog-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
color: var(--ov-meet-color-error);
|
||||
}
|
||||
}
|
||||
|
||||
// === DIALOG CONTENT ===
|
||||
::ng-deep mat-dialog-content {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
color: var(--ov-meet-text-secondary);
|
||||
font-size: var(--ov-meet-font-size-md) !important;
|
||||
line-height: var(--ov-meet-line-height-relaxed);
|
||||
@ -80,7 +80,7 @@
|
||||
|
||||
// === POLICY OPTIONS CONTAINER ===
|
||||
.policy-options-container {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
margin-top: var(--ov-meet-spacing-md);
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
background: var(--ov-meet-surface-variant);
|
||||
@ -111,7 +111,7 @@
|
||||
}
|
||||
|
||||
.policy-option {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
display: flex !important;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
@ -167,7 +167,7 @@
|
||||
|
||||
// === DIALOG ACTIONS ===
|
||||
.dialog-action {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
margin: 0;
|
||||
@ -175,15 +175,15 @@
|
||||
|
||||
// Button styling
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include ov-theme-transition;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-button-base;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
min-width: 100px;
|
||||
margin: 0;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
|
||||
// Cancel/Secondary button
|
||||
@ -193,7 +193,7 @@
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
@include ov-hover-lift(-1px);
|
||||
@include design-tokens.ov-hover-lift(-1px);
|
||||
background: var(--ov-meet-surface-hover);
|
||||
color: var(--ov-meet-text-primary);
|
||||
}
|
||||
@ -206,7 +206,7 @@
|
||||
color: var(--ov-meet-text-on-error);
|
||||
|
||||
&:hover {
|
||||
@include ov-hover-lift(-1px);
|
||||
@include design-tokens.ov-hover-lift(-1px);
|
||||
background: var(--ov-meet-color-error);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
@ -224,7 +224,7 @@
|
||||
}
|
||||
|
||||
// === RESPONSIVE DESIGN ===
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.dialog-title {
|
||||
font-size: var(--ov-meet-font-size-lg);
|
||||
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0;
|
||||
@ -232,7 +232,7 @@
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
|
||||
.dialog-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
@import '../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.share-recording-dialog {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
|
||||
.dialog-title {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
margin: 0;
|
||||
@ -14,23 +14,23 @@
|
||||
color: var(--ov-meet-text-primary);
|
||||
|
||||
.title-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
padding: var(--ov-meet-spacing-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
min-width: 400px;
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
min-width: 320px;
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
@ -59,7 +59,7 @@
|
||||
color: var(--ov-meet-color-error);
|
||||
|
||||
.error-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
@ -75,7 +75,7 @@
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
.access-option {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
border: 1px solid var(--ov-meet-border-color);
|
||||
border-radius: var(--ov-meet-radius-sm);
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
@ -92,13 +92,13 @@
|
||||
}
|
||||
|
||||
.option-content {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
margin-left: var(--ov-meet-spacing-lg);
|
||||
|
||||
.option-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
}
|
||||
|
||||
@ -124,11 +124,11 @@
|
||||
}
|
||||
|
||||
.generate-section {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
justify-content: center;
|
||||
|
||||
.loading-state {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
|
||||
@ -139,12 +139,12 @@
|
||||
}
|
||||
|
||||
.generate-button {
|
||||
@include ov-button-base;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-button-base;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -172,13 +172,13 @@
|
||||
}
|
||||
|
||||
.url-prefix-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
margin-right: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
color: var(--ov-meet-text-secondary);
|
||||
|
||||
&:hover {
|
||||
@ -192,13 +192,13 @@
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-success-message {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
justify-content: center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
margin-top: var(--ov-meet-spacing-sm);
|
||||
@ -211,18 +211,18 @@
|
||||
font-weight: var(--ov-meet-font-weight-medium);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.url-actions {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
justify-content: center;
|
||||
margin-top: var(--ov-meet-spacing-md);
|
||||
|
||||
.back-button {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
|
||||
@ -232,7 +232,7 @@
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -240,26 +240,26 @@
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-xl) var(--ov-meet-spacing-lg);
|
||||
border-top: 1px solid var(--ov-meet-border-color-light);
|
||||
justify-content: flex-end;
|
||||
|
||||
.close-button {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
color: var(--ov-meet-text-primary);
|
||||
background: var(--ov-meet-surface-hover);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.share-recording-dialog {
|
||||
.dialog-content {
|
||||
min-width: 280px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// Form styling
|
||||
.form-section {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.pro-badge {
|
||||
position: absolute;
|
||||
@ -18,6 +18,6 @@
|
||||
z-index: 2;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(xs);
|
||||
@include design-tokens.ov-icon(xs);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// === MOBILE CARDS VIEW ===
|
||||
.cards-container {
|
||||
@include ov-grid-responsive(280px);
|
||||
@include design-tokens.ov-grid-responsive(280px);
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
padding: var(--ov-meet-spacing-md) 0;
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
padding: var(--ov-meet-spacing-sm) 0;
|
||||
@ -14,8 +14,8 @@
|
||||
}
|
||||
|
||||
.recording-card {
|
||||
@include ov-card;
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-card;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
@ -29,10 +29,10 @@
|
||||
}
|
||||
|
||||
&:hover:not(.selected-card) {
|
||||
@include ov-hover-lift(-2px);
|
||||
@include design-tokens.ov-hover-lift(-2px);
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
}
|
||||
@ -67,7 +67,7 @@
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
.detail-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
@ -152,7 +152,7 @@
|
||||
margin-top: var(--ov-meet-spacing-sm);
|
||||
|
||||
.action-button {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
|
||||
padding: 0;
|
||||
width: 40px;
|
||||
@ -165,7 +165,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
|
||||
@ -182,7 +182,7 @@
|
||||
margin-bottom: 0;
|
||||
|
||||
// Responsive toolbar adjustments
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.toolbar-center {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
@ -206,7 +206,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -240,7 +240,7 @@
|
||||
@extend .ov-table-container;
|
||||
margin-top: 0;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
@ -274,7 +274,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.mat-column-duration,
|
||||
.mat-column-size {
|
||||
display: none;
|
||||
@ -295,7 +295,7 @@
|
||||
min-width: 0;
|
||||
|
||||
.room-name {
|
||||
@include ov-text-truncate;
|
||||
@include design-tokens.ov-text-truncate;
|
||||
font-weight: var(--ov-meet-font-weight-medium);
|
||||
margin-bottom: 2px;
|
||||
|
||||
@ -306,7 +306,7 @@
|
||||
}
|
||||
|
||||
.room-id {
|
||||
@include ov-text-truncate;
|
||||
@include design-tokens.ov-text-truncate;
|
||||
font-size: var(--ov-meet-font-size-xs);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
|
||||
@ -327,7 +327,7 @@
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
.status-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -338,12 +338,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
padding: var(--ov-meet-spacing-xxs) var(--ov-meet-spacing-xs);
|
||||
font-size: var(--ov-meet-font-size-xs);
|
||||
|
||||
.status-icon {
|
||||
@include ov-icon(xs);
|
||||
@include design-tokens.ov-icon(xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -364,7 +364,7 @@
|
||||
.action-buttons {
|
||||
@extend .ov-action-buttons;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.play-btn,
|
||||
.download-btn {
|
||||
display: none;
|
||||
@ -380,7 +380,7 @@
|
||||
@extend .ov-empty-state;
|
||||
|
||||
.getting-started-actions {
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -399,7 +399,7 @@
|
||||
@extend .ov-focus-visible;
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.mat-mdc-icon-button {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// Use utility classes for rooms toolbar
|
||||
.rooms-toolbar {
|
||||
@ -138,12 +138,12 @@
|
||||
width: fit-content;
|
||||
|
||||
.status-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
|
||||
.meeting-end-info-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
|
||||
&.meeting-end-close {
|
||||
color: var(--ov-meet-color-warning);
|
||||
@ -175,7 +175,7 @@
|
||||
text-transform: uppercase;
|
||||
|
||||
.deletion-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
|
||||
@ -282,7 +282,7 @@
|
||||
@extend .ov-empty-state;
|
||||
|
||||
.empty-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-text-hint);
|
||||
margin-bottom: var(--ov-meet-spacing-lg);
|
||||
display: block;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.option-card {
|
||||
@include ov-card;
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-card;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
@ -12,7 +12,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
&:hover:not(.no-hover):not(.selected) {
|
||||
@include ov-hover-lift(-2px);
|
||||
@include design-tokens.ov-hover-lift(-2px);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
@ -42,9 +42,9 @@
|
||||
z-index: 2;
|
||||
|
||||
.selection-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
color: var(--ov-meet-text-hint);
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
|
||||
&.selected {
|
||||
color: var(--ov-meet-color-primary);
|
||||
@ -69,7 +69,7 @@
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
}
|
||||
|
||||
// &:hover img {
|
||||
@ -86,8 +86,8 @@
|
||||
font-weight: var(--ov-meet-font-weight-semibold);
|
||||
|
||||
.option-icon {
|
||||
@include ov-icon(md);
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-icon(md);
|
||||
@include design-tokens.ov-theme-transition;
|
||||
}
|
||||
|
||||
.option-title {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.meeting-url-badge {
|
||||
margin: var(--ov-meet-spacing-sm) auto;
|
||||
@ -43,8 +43,8 @@
|
||||
margin: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
.meeting-url-badge-container {
|
||||
@include ov-flex-center;
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-flex-center;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
|
||||
background-color: var(--ov-surface-color); // Use ov-components variable
|
||||
@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.copy-url-btn {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
@ -84,7 +84,7 @@
|
||||
border: 0;
|
||||
|
||||
.mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -95,7 +95,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.meeting-url-badge-container {
|
||||
margin: var(--ov-meet-spacing-md) auto;
|
||||
padding: var(--ov-meet-spacing-xs) var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.step-indicator-wrapper {
|
||||
width: 100%;
|
||||
@ -8,7 +8,7 @@
|
||||
&[data-layout='vertical-sidebar'] {
|
||||
.wizard-stepper {
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
|
||||
::ng-deep {
|
||||
.mat-stepper-vertical {
|
||||
@ -53,7 +53,7 @@
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-xs);
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
|
||||
::ng-deep {
|
||||
.mat-step-text-label {
|
||||
@ -120,7 +120,7 @@
|
||||
background-color: var(--ov-meet-surface-variant);
|
||||
border-radius: var(--ov-meet-radius-md);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
|
||||
::ng-deep {
|
||||
.mat-stepper-vertical {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.wizard-navigation {
|
||||
width: 100%;
|
||||
padding: var(--ov-meet-spacing-md) 0 0 0;
|
||||
|
||||
.nav-buttons {
|
||||
@include ov-container;
|
||||
@include design-tokens.ov-container;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
border-radius: var(--ov-meet-radius-sm);
|
||||
min-width: 120px;
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
margin: 0 var(--ov-meet-spacing-xs);
|
||||
|
||||
&.leading-icon {
|
||||
@ -119,7 +119,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
padding: var(--ov-meet-spacing-md) 0;
|
||||
|
||||
.nav-buttons {
|
||||
@ -146,7 +146,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.nav-buttons {
|
||||
.nav-group {
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
@ -202,7 +202,7 @@
|
||||
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(xs);
|
||||
@include design-tokens.ov-icon(xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.ov-page-container {
|
||||
button {
|
||||
@ -54,18 +54,18 @@
|
||||
margin: var(--ov-meet-spacing-lg) 0;
|
||||
|
||||
// Tablet and larger - maintain 4 columns
|
||||
@include ov-tablet-up {
|
||||
@include design-tokens.ov-tablet-up {
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
|
||||
// Small tablets - 2 columns
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
}
|
||||
|
||||
// Mobile - single column
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -207,7 +207,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
|
||||
.mat-mdc-button,
|
||||
@ -218,7 +218,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-up {
|
||||
@include design-tokens.ov-tablet-up {
|
||||
justify-content: flex-start;
|
||||
|
||||
button:first-child {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
::ng-deep {
|
||||
mat-slide-toggle {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.ov-page-container {
|
||||
button {
|
||||
@ -113,7 +113,7 @@
|
||||
border-color: var(--ov-meet-color-error);
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
|
||||
.mat-mdc-button,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// Welcome State Styles
|
||||
.welcome-content {
|
||||
@ -29,20 +29,20 @@
|
||||
}
|
||||
|
||||
.getting-started-grid {
|
||||
@include ov-grid-responsive(280px);
|
||||
@include design-tokens.ov-grid-responsive(280px);
|
||||
margin-top: var(--ov-meet-spacing-lg);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
@include ov-card;
|
||||
@include ov-hover-lift(-5px);
|
||||
@include design-tokens.ov-card;
|
||||
@include design-tokens.ov-hover-lift(-5px);
|
||||
text-align: center;
|
||||
|
||||
mat-card-content {
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
}
|
||||
|
||||
@ -60,11 +60,11 @@
|
||||
}
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
width: 100%;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
margin-right: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
}
|
||||
@ -76,12 +76,12 @@
|
||||
.dashboard-content {
|
||||
padding: 5px;
|
||||
.quick-actions {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
margin-bottom: var(--ov-meet-spacing-xxl);
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
|
||||
mat-icon {
|
||||
margin-right: var(--ov-meet-spacing-sm);
|
||||
@ -90,11 +90,11 @@
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
@include ov-grid-responsive(300px);
|
||||
@include design-tokens.ov-grid-responsive(300px);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
@include ov-stat-card;
|
||||
@include design-tokens.ov-stat-card;
|
||||
padding: 0;
|
||||
|
||||
mat-card-content {
|
||||
@ -106,7 +106,7 @@
|
||||
|
||||
.stat-icon {
|
||||
mat-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
|
||||
mat-icon {
|
||||
margin-left: var(--ov-meet-spacing-xs);
|
||||
@ -133,7 +133,7 @@
|
||||
// .recordings-card uses .ov-recording-icon
|
||||
|
||||
.action-card {
|
||||
@include ov-card;
|
||||
@include design-tokens.ov-card;
|
||||
mat-card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -143,7 +143,7 @@
|
||||
|
||||
.action-icon {
|
||||
mat-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -169,14 +169,14 @@
|
||||
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-lg) var(--ov-meet-spacing-md);
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Design using design tokens breakpoints
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.overview-container {
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -205,7 +205,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.overview-header h1 {
|
||||
font-size: var(--ov-meet-font-size-xl);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.room-basic-creation-page {
|
||||
@include ov-page-content;
|
||||
@include ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
|
||||
padding: var(--ov-meet-spacing-xl);
|
||||
max-width: 600px;
|
||||
@ -15,7 +15,7 @@
|
||||
margin-bottom: var(--ov-meet-spacing-xl);
|
||||
|
||||
.page-icon {
|
||||
@include ov-icon(xxl);
|
||||
@include design-tokens.ov-icon(xxl);
|
||||
color: var(--ov-meet-icon-rooms);
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
@ -67,7 +67,7 @@
|
||||
// Icon styling in form fields
|
||||
.mat-mdc-form-field-icon-suffix {
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -81,7 +81,7 @@
|
||||
margin-top: var(--ov-meet-spacing-lg);
|
||||
|
||||
.create-button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
background-color: var(--ov-meet-color-success);
|
||||
@ -89,7 +89,7 @@
|
||||
box-shadow: var(--ov-meet-shadow-sm);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
margin-right: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
|
||||
@ -100,12 +100,12 @@
|
||||
}
|
||||
|
||||
.advanced-button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
margin-right: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
|
||||
.page-header {
|
||||
@ -157,7 +157,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.page-content {
|
||||
.room-basic-creation-form {
|
||||
.action-buttons {
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
@import '../../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.wizard-container {
|
||||
@include ov-container;
|
||||
@include ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
min-height: 600px;
|
||||
gap: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
@include ov-get-started-header;
|
||||
@include design-tokens.ov-get-started-header;
|
||||
|
||||
h2 {
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.step-content {
|
||||
@include ov-section-card;
|
||||
@include design-tokens.ov-section-card;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
min-height: 450px;
|
||||
@ -60,7 +60,7 @@
|
||||
padding: var(--ov-meet-spacing-md) 0 0 0;
|
||||
}
|
||||
.cancel-button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
border-radius: var(--ov-meet-radius-sm);
|
||||
min-width: 120px;
|
||||
color: var(--ov-meet-text-secondary);
|
||||
@ -110,7 +110,7 @@
|
||||
|
||||
// Room Creation Loading State
|
||||
.room-creation-loading {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
@ -118,7 +118,7 @@
|
||||
padding: var(--ov-meet-spacing-xl);
|
||||
|
||||
.loading-content {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-xl);
|
||||
width: 100%;
|
||||
@ -127,12 +127,12 @@
|
||||
margin-bottom: var(--ov-meet-spacing-lg);
|
||||
|
||||
.loading-title {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
|
||||
.loading-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@ -168,7 +168,7 @@
|
||||
}
|
||||
|
||||
// Responsive design using the system mixins
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.wizard-container {
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -196,7 +196,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.wizard-header {
|
||||
h2 {
|
||||
font-size: var(--ov-meet-font-size-lg);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.recording-config-step {
|
||||
@include ov-page-content;
|
||||
@include ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
|
||||
padding: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
.step-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-icon-recordings);
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
.recording-form {
|
||||
.options-grid {
|
||||
@include ov-grid-responsive(260px);
|
||||
@include design-tokens.ov-grid-responsive(260px);
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
margin-bottom: var(--ov-meet-spacing-lg);
|
||||
|
||||
.access-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
color: var(--ov-meet-icon-security);
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
@ -132,7 +132,7 @@
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.step-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
@ -169,7 +169,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
padding: var(--ov-meet-spacing-xs);
|
||||
|
||||
.step-content .recording-form {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.recording-layout-step {
|
||||
@include ov-page-content;
|
||||
@include ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
|
||||
padding: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
.step-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-icon-recordings);
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
@ -42,11 +42,11 @@
|
||||
|
||||
.layout-form {
|
||||
.options-grid {
|
||||
@include ov-grid-responsive(280px);
|
||||
@include design-tokens.ov-grid-responsive(280px);
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
|
||||
// Custom layout for recording layout selector
|
||||
@include ov-tablet-up {
|
||||
@include design-tokens.ov-tablet-up {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
@ -84,7 +84,7 @@
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.step-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
@ -123,7 +123,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
padding: var(--ov-meet-spacing-xs);
|
||||
|
||||
.step-content .layout-form .options-grid {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.recording-trigger-step {
|
||||
@include ov-page-content;
|
||||
@include ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
|
||||
padding: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
|
||||
.step-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
color: var(--ov-meet-icon-recordings);
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
@ -43,11 +43,11 @@
|
||||
|
||||
.trigger-form {
|
||||
.options-grid {
|
||||
@include ov-grid-responsive(260px);
|
||||
@include design-tokens.ov-grid-responsive(260px);
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
|
||||
// On larger screens, limit to 3 cards per row
|
||||
@include ov-tablet-up {
|
||||
@include design-tokens.ov-tablet-up {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.step-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
@ -74,7 +74,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
padding: var(--ov-meet-spacing-xs);
|
||||
|
||||
.step-content .trigger-form .options-grid {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.room-config-step {
|
||||
@include ov-page-content;
|
||||
@include ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
|
||||
padding: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
margin-bottom: var(--ov-meet-spacing-lg);
|
||||
|
||||
.step-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-icon-settings);
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
@ -60,7 +60,7 @@
|
||||
}
|
||||
|
||||
.config-card {
|
||||
@include ov-card;
|
||||
@include design-tokens.ov-card;
|
||||
border: 2px solid var(--ov-meet-border-secondary);
|
||||
transition: all 0.2s ease-in-out;
|
||||
cursor: default;
|
||||
@ -88,7 +88,7 @@
|
||||
flex: 1;
|
||||
|
||||
.feature-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
color: var(--ov-meet-icon-primary);
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.room-details-step {
|
||||
@include ov-page-content;
|
||||
@include ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
// margin-bottom: var(--ov-meet-spacing-xl);
|
||||
|
||||
.step-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-icon-rooms);
|
||||
margin-top: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
@ -42,7 +42,7 @@
|
||||
// margin-bottom: var(--ov-meet-spacing-xl);
|
||||
|
||||
.room-details-form {
|
||||
@include ov-grid-responsive(280px);
|
||||
@include design-tokens.ov-grid-responsive(280px);
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
|
||||
.form-field {
|
||||
@ -66,23 +66,23 @@
|
||||
// Icon styling in form fields
|
||||
.mat-mdc-form-field-icon-suffix {
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datepicker-toggle {
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear button styling
|
||||
.clear-date-button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
padding: var(--ov-meet-spacing-xs);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,7 +122,7 @@
|
||||
color: var(--ov-meet-text-primary);
|
||||
|
||||
.policies-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
color: var(--ov-meet-primary);
|
||||
}
|
||||
}
|
||||
@ -162,7 +162,7 @@
|
||||
border-left: 3px solid var(--ov-meet-primary);
|
||||
|
||||
.hint-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
color: var(--ov-meet-color-warning);
|
||||
}
|
||||
|
||||
@ -176,7 +176,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.step-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
@ -220,7 +220,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.step-content {
|
||||
.room-details-form {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.form-field-header {
|
||||
position: relative;
|
||||
@ -105,7 +105,7 @@
|
||||
border-color: var(--ov-meet-color-error);
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
|
||||
.mat-mdc-button,
|
||||
|
||||
@ -17,7 +17,7 @@ import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ProFeatureBadgeComponent } from '@lib/components';
|
||||
// import { ProFeatureBadgeComponent } from '@lib/components';
|
||||
import { AuthService, GlobalConfigService, NotificationService } from '@lib/services';
|
||||
import { AuthMode } from '@lib/typings/ce';
|
||||
|
||||
@ -34,7 +34,7 @@ import { AuthMode } from '@lib/typings/ce';
|
||||
MatProgressSpinnerModule,
|
||||
MatDividerModule,
|
||||
ReactiveFormsModule,
|
||||
ProFeatureBadgeComponent
|
||||
// ProFeatureBadgeComponent
|
||||
],
|
||||
templateUrl: './users-permissions.component.html',
|
||||
styleUrl: './users-permissions.component.scss'
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.error-page {
|
||||
@include ov-theme-transition;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
@include design-tokens.ov-flex-center;
|
||||
min-height: 100vh;
|
||||
background: var(--ov-meet-background-color);
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
|
||||
.error-container {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@ -16,7 +16,7 @@
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-xl);
|
||||
text-align: center;
|
||||
@ -29,15 +29,15 @@
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
|
||||
.error-icon-section {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
justify-content: flex-start;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.error-main-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-color-error);
|
||||
background: rgba(var(--ov-meet-color-error), 0.1);
|
||||
border-radius: var(--ov-meet-radius-circle);
|
||||
@ -56,7 +56,7 @@
|
||||
color: var(--ov-meet-text-primary);
|
||||
line-height: var(--ov-meet-line-height-tight);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
font-size: var(--ov-meet-font-size-xl);
|
||||
}
|
||||
}
|
||||
@ -68,11 +68,11 @@
|
||||
line-height: var(--ov-meet-line-height-normal);
|
||||
max-width: 400px;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
font-size: var(--ov-meet-font-size-sm);
|
||||
}
|
||||
}
|
||||
@ -83,18 +83,18 @@
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
margin-top: var(--ov-meet-spacing-md);
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
@include ov-button-base;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-button-base;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
min-width: 120px;
|
||||
|
||||
@ -110,10 +110,10 @@
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
@ -122,14 +122,14 @@
|
||||
|
||||
.error-illustration {
|
||||
flex: 1;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.illustration-container {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
opacity: 0.6;
|
||||
@ -140,7 +140,7 @@
|
||||
height: 120px;
|
||||
color: var(--ov-meet-text-hint);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
font-size: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
@ -158,7 +158,7 @@
|
||||
font-weight: var(--ov-meet-font-weight-bold);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
font-size: var(--ov-meet-font-size-lg);
|
||||
}
|
||||
}
|
||||
@ -179,7 +179,7 @@
|
||||
}
|
||||
|
||||
// Enhanced responsive design
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.error-page {
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// Login Page Container - Full height centered layout
|
||||
.ov-page-container {
|
||||
@include ov-flex-center;
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-flex-center;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
min-height: 100vh;
|
||||
background: var(--ov-meet-background-color);
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
}
|
||||
|
||||
.login-page-content {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
// gap: var(--ov-meet-spacing-xl);
|
||||
width: 100%;
|
||||
@ -19,10 +19,10 @@
|
||||
|
||||
// Login Header - Using get-started-header mixin for consistency
|
||||
.get-started-header {
|
||||
@include ov-get-started-header;
|
||||
@include design-tokens.ov-get-started-header;
|
||||
|
||||
.login-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
}
|
||||
|
||||
@ -52,8 +52,8 @@
|
||||
|
||||
// Login Card - Form section
|
||||
.login-card {
|
||||
@include ov-card;
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-card;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
flex: 1;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
@ -75,7 +75,7 @@
|
||||
width: 100%;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
}
|
||||
}
|
||||
@ -92,7 +92,7 @@
|
||||
margin-top: var(--ov-meet-spacing-md);
|
||||
|
||||
.primary-button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
width: 100%;
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
font-size: var(--ov-meet-font-size-md);
|
||||
@ -103,8 +103,8 @@
|
||||
|
||||
// Brand Section - Visual branding area
|
||||
.brand-section {
|
||||
@include ov-flex-center;
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-flex-center;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
flex: 1;
|
||||
background: var(--ov-meet-color-secondary);
|
||||
padding: var(--ov-meet-spacing-xl);
|
||||
@ -123,7 +123,7 @@
|
||||
}
|
||||
|
||||
// Responsive design using design system breakpoints
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.ov-page-container {
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -157,7 +157,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.ov-page-container {
|
||||
padding: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
@ -190,7 +190,7 @@
|
||||
|
||||
.get-started-header {
|
||||
.login-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import '../../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.disconnected-container {
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.disconnect-content {
|
||||
@include ov-card;
|
||||
@include design-tokens.ov-card;
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@ -19,7 +19,7 @@
|
||||
background: var(--ov-meet-surface-elevated);
|
||||
box-shadow: var(--ov-meet-shadow-lg);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
padding: var(--ov-meet-spacing-xl);
|
||||
margin: var(--ov-meet-spacing-md);
|
||||
max-width: calc(100vw - 2 * var(--ov-meet-spacing-md));
|
||||
@ -31,6 +31,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.logo-image {
|
||||
width: 50px;
|
||||
@ -39,7 +40,7 @@
|
||||
display: block;
|
||||
transition: all var(--ov-meet-transition-normal);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
@ -53,13 +54,12 @@
|
||||
border-radius: var(--ov-meet-radius-circle);
|
||||
z-index: -1;
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.disconnect-message {
|
||||
@ -72,7 +72,7 @@
|
||||
margin: 0 0 var(--ov-meet-spacing-sm) 0;
|
||||
line-height: var(--ov-meet-line-height-tight);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
font-size: var(--ov-meet-font-size-xl);
|
||||
}
|
||||
}
|
||||
@ -86,7 +86,7 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
font-size: var(--ov-meet-font-size-sm);
|
||||
}
|
||||
}
|
||||
@ -107,7 +107,7 @@
|
||||
font-weight: var(--ov-meet-font-weight-medium);
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.footer-text {
|
||||
font-size: var(--ov-meet-font-size-xs);
|
||||
flex-direction: column;
|
||||
@ -116,12 +116,12 @@
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
margin-top: var(--ov-meet-spacing-md);
|
||||
|
||||
.quick-action-button {
|
||||
@include ov-button-base;
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-button-base;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// Room Access Container - Main layout using design tokens
|
||||
.room-access-container {
|
||||
@include ov-container;
|
||||
@include ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
padding-top: var(--ov-meet-spacing-xxl);
|
||||
background: var(--ov-meet-background-color);
|
||||
gap: 0;
|
||||
@ -11,14 +11,14 @@
|
||||
|
||||
// Room Header - Clean title section
|
||||
.room-header {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
margin-bottom: var(--ov-meet-spacing-xxl);
|
||||
text-align: center;
|
||||
|
||||
.room-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-icon-rooms);
|
||||
margin-bottom: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
@ -36,7 +36,7 @@
|
||||
|
||||
// Action Cards Grid - Responsive layout
|
||||
.action-cards-grid {
|
||||
@include ov-grid-responsive(320px);
|
||||
@include design-tokens.ov-grid-responsive(320px);
|
||||
gap: var(--ov-meet-spacing-xl);
|
||||
margin-bottom: var(--ov-meet-spacing-xxl);
|
||||
justify-content: center;
|
||||
@ -52,7 +52,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
|
||||
@ -67,9 +67,9 @@
|
||||
|
||||
// Action Card Base - Consistent card styling
|
||||
.action-card {
|
||||
@include ov-card;
|
||||
@include ov-hover-lift(-4px);
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-card;
|
||||
@include design-tokens.ov-hover-lift(-4px);
|
||||
@include design-tokens.ov-theme-transition;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
min-height: 300px;
|
||||
@ -86,7 +86,7 @@
|
||||
flex-shrink: 0;
|
||||
|
||||
.card-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -139,13 +139,13 @@
|
||||
}
|
||||
|
||||
.room-closed-message {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
text-align: center;
|
||||
|
||||
.warning-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-color-warning);
|
||||
}
|
||||
|
||||
@ -184,7 +184,7 @@
|
||||
}
|
||||
|
||||
.join-button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -212,7 +212,7 @@
|
||||
}
|
||||
|
||||
.recordings-button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -223,7 +223,7 @@
|
||||
|
||||
// Quick Actions - Footer actions
|
||||
.quick-actions {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
margin-top: var(--ov-meet-spacing-xl);
|
||||
|
||||
.quick-action-button {
|
||||
@ -231,7 +231,7 @@
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
@include ov-theme-transition;
|
||||
@include design-tokens.ov-theme-transition;
|
||||
|
||||
&:hover {
|
||||
color: var(--ov-meet-text-primary);
|
||||
@ -257,7 +257,7 @@
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.room-access-container {
|
||||
padding: 0;
|
||||
padding-top: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
.ov-page-container {
|
||||
height: 100vh;
|
||||
@ -6,8 +6,8 @@
|
||||
}
|
||||
|
||||
.recordings-page-header {
|
||||
@include ov-container;
|
||||
@include ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
gap: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: var(--ov-meet-spacing-xxl);
|
||||
@ -16,13 +16,13 @@
|
||||
|
||||
// Room Header
|
||||
.recordings-header {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: row;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
text-align: center;
|
||||
|
||||
.room-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-icon-recordings);
|
||||
margin-bottom: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
@ -46,23 +46,23 @@
|
||||
// === CONTENT SECTIONS ===
|
||||
|
||||
.recordings-content {
|
||||
@include ov-container;
|
||||
@include ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
margin-top: var(--ov-meet-spacing-xl);
|
||||
flex: 1;
|
||||
padding-bottom: var(--ov-meet-spacing-xl); // Add bottom padding for better UX
|
||||
}
|
||||
|
||||
.recordings-loading-container {
|
||||
@include ov-container;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-container;
|
||||
@include design-tokens.ov-flex-center;
|
||||
min-height: 60vh;
|
||||
padding: var(--ov-meet-spacing-xxl);
|
||||
}
|
||||
|
||||
.loading-card {
|
||||
@include ov-card;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-card;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
text-align: center;
|
||||
@ -70,7 +70,7 @@
|
||||
padding: var(--ov-meet-spacing-xxl);
|
||||
|
||||
.loading-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-icon-recordings);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
// === RESPONSIVE DESIGN ===
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.recordings-page-header {
|
||||
padding-top: var(--ov-meet-spacing-lg);
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
@ -104,7 +104,7 @@
|
||||
|
||||
.recordings-header {
|
||||
.room-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
}
|
||||
|
||||
.room-info {
|
||||
@ -127,7 +127,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.recordings-page-header {
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -142,7 +142,7 @@
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
|
||||
.loading-icon {
|
||||
@include ov-icon(lg);
|
||||
@include design-tokens.ov-icon(lg);
|
||||
}
|
||||
|
||||
.loading-title {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../../../../src/assets/styles/design-tokens';
|
||||
@use '../../../../../../src/assets/styles/design-tokens';
|
||||
|
||||
// === MOBILE RESPONSIVE EXPERIENCE ===
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include ov-tablet-up {
|
||||
@include design-tokens.ov-tablet-up {
|
||||
display: none; // Hide on tablet and desktop
|
||||
}
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
flex-shrink: 0;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,13 +66,13 @@
|
||||
|
||||
.recording-date,
|
||||
.recording-duration {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
font-size: var(--ov-meet-font-size-xs);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(xs);
|
||||
@include design-tokens.ov-icon(xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -94,14 +94,14 @@
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include design-tokens.ov-icon(md);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--ov-meet-color-warning) 12%, transparent);
|
||||
@ -111,7 +111,7 @@
|
||||
color: var(--ov-meet-color-warning);
|
||||
|
||||
.status-icon {
|
||||
@include ov-icon(xs);
|
||||
@include design-tokens.ov-icon(xs);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
@ -146,7 +146,7 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
background: var(--ov-meet-background-color);
|
||||
@ -157,7 +157,7 @@
|
||||
|
||||
.video-error-container,
|
||||
.video-unavailable-container {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
min-height: 300px;
|
||||
background: var(--ov-meet-surface-color);
|
||||
border-radius: var(--ov-meet-radius-lg);
|
||||
@ -172,7 +172,7 @@
|
||||
|
||||
.error-icon,
|
||||
.status-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
}
|
||||
|
||||
@ -199,7 +199,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
@ -210,8 +210,8 @@
|
||||
// === MAIN PAGE LAYOUT ===
|
||||
|
||||
.recording-page-content {
|
||||
@include ov-container;
|
||||
@include ov-page-content;
|
||||
@include design-tokens.ov-container;
|
||||
@include design-tokens.ov-page-content;
|
||||
max-width: 1000px;
|
||||
padding-top: var(--ov-meet-spacing-xl);
|
||||
}
|
||||
@ -219,7 +219,7 @@
|
||||
// === LOADING STATES ===
|
||||
|
||||
.loading-container {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
height: 60vh;
|
||||
@ -235,7 +235,7 @@
|
||||
// === ERROR STATES ===
|
||||
|
||||
.error-container {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
min-height: 60vh;
|
||||
padding: var(--ov-meet-spacing-xl);
|
||||
|
||||
@ -244,7 +244,7 @@
|
||||
max-width: 500px;
|
||||
|
||||
.error-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
color: var(--ov-meet-color-error);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -270,7 +270,7 @@
|
||||
flex-wrap: wrap;
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
@ -290,7 +290,7 @@
|
||||
align-items: flex-start;
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
@ -311,7 +311,7 @@
|
||||
color: var(--ov-meet-text-primary);
|
||||
line-height: var(--ov-meet-line-height-tight);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
font-size: var(--ov-meet-font-size-xxl);
|
||||
}
|
||||
}
|
||||
@ -322,31 +322,31 @@
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
margin-bottom: var(--ov-meet-spacing-sm);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
|
||||
.recording-date,
|
||||
.recording-duration {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
font-size: var(--ov-meet-font-size-sm);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recording-status {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
justify-content: flex-start;
|
||||
|
||||
.status-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
|
||||
&.complete {
|
||||
color: var(--ov-meet-color-success);
|
||||
@ -401,7 +401,7 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
background: var(--ov-meet-surface-color);
|
||||
@ -412,7 +412,7 @@
|
||||
|
||||
.video-error-container,
|
||||
.video-unavailable-container {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
min-height: 300px;
|
||||
background: var(--ov-meet-surface-color);
|
||||
border-radius: var(--ov-meet-radius-lg);
|
||||
@ -426,7 +426,7 @@
|
||||
|
||||
.error-icon,
|
||||
.status-icon {
|
||||
@include ov-icon(xl);
|
||||
@include design-tokens.ov-icon(xl);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
}
|
||||
|
||||
@ -453,7 +453,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
@ -469,13 +469,13 @@
|
||||
align-self: self-end;
|
||||
|
||||
.primary-actions {
|
||||
@include ov-flex-center;
|
||||
@include design-tokens.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
|
||||
.action-btn {
|
||||
@include ov-button-base;
|
||||
@include design-tokens.ov-button-base;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
@ -483,7 +483,7 @@
|
||||
height: 48px;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include design-tokens.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -491,7 +491,7 @@
|
||||
|
||||
// === RESPONSIVE ADJUSTMENTS ===
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include design-tokens.ov-mobile-down {
|
||||
.recording-page-content {
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
padding-top: var(--ov-meet-spacing-xl);
|
||||
@ -508,7 +508,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include design-tokens.ov-tablet-down {
|
||||
.video-section {
|
||||
.video-error-container,
|
||||
.video-unavailable-container {
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
// Design Tokens - Centralized design variable system for OpenVidu Meet
|
||||
// This file imports all modular design system files to maintain the same public API
|
||||
// This file forwards all modular design system files to maintain the same public API
|
||||
// while organizing the code in a more maintainable structure
|
||||
|
||||
// Core tokens (colors, spacing, typography, etc.)
|
||||
@import 'tokens-core';
|
||||
@forward 'tokens-core';
|
||||
|
||||
// Theme-specific variables (light/dark themes)
|
||||
@import 'tokens-themes';
|
||||
@forward 'tokens-themes';
|
||||
|
||||
// Layout-related mixins (containers, grids, positioning)
|
||||
@import 'mixins-layout';
|
||||
@forward 'mixins-layout';
|
||||
|
||||
// Component-specific mixins (cards, buttons, headers)
|
||||
@import 'mixins-components';
|
||||
@forward 'mixins-components';
|
||||
|
||||
// Responsive design utilities
|
||||
@import 'mixins-responsive';
|
||||
@forward 'mixins-responsive';
|
||||
|
||||
// Animation keyframes and classes
|
||||
@import 'animations';
|
||||
@forward 'animations';
|
||||
|
||||
// Utility classes
|
||||
@import 'utilities';
|
||||
@forward 'utilities';
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
// Component Mixins - Specific mixins for UI components like cards, buttons, headers
|
||||
// This file contains mixins for specific component patterns
|
||||
|
||||
@use 'mixins-layout' as layout;
|
||||
@use 'mixins-responsive' as responsive;
|
||||
|
||||
// Mixin for consistent cards
|
||||
@mixin ov-card {
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
background: var(--ov-meet-card-background);
|
||||
border-radius: var(--ov-meet-card-border-radius);
|
||||
box-shadow: var(--ov-meet-card-shadow);
|
||||
@ -20,7 +23,7 @@
|
||||
|
||||
// Mixin for consistent buttons
|
||||
@mixin ov-button-base {
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
border-radius: var(--ov-meet-button-border-radius);
|
||||
font-weight: var(--ov-meet-button-font-weight);
|
||||
transition:
|
||||
@ -33,7 +36,7 @@
|
||||
// Mixin for statistics and metrics
|
||||
@mixin ov-stat-card {
|
||||
@include ov-card;
|
||||
@include ov-hover-lift(-2px);
|
||||
@include layout.ov-hover-lift(-2px);
|
||||
|
||||
.stat-content {
|
||||
.stat-number {
|
||||
@ -129,7 +132,7 @@
|
||||
color: var(--ov-meet-text-primary);
|
||||
text-transform: uppercase;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include responsive.ov-tablet-down {
|
||||
font-size: var(--ov-meet-font-size-lg);
|
||||
}
|
||||
}
|
||||
@ -141,7 +144,7 @@
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
@include ov-icon(lg);
|
||||
@include layout.ov-icon(lg);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
// Utility Classes - Helper classes for common styling patterns
|
||||
// This file contains reusable utility classes
|
||||
|
||||
@use 'mixins-layout' as layout;
|
||||
@use 'mixins-components' as components;
|
||||
@use 'mixins-responsive' as responsive;
|
||||
|
||||
// === UTILITY CLASSES ===
|
||||
|
||||
.ov-text-center {
|
||||
@ -8,11 +12,11 @@
|
||||
}
|
||||
|
||||
.ov-text-truncate {
|
||||
@include ov-text-truncate;
|
||||
@include layout.ov-text-truncate;
|
||||
}
|
||||
|
||||
.ov-flex-center {
|
||||
@include ov-flex-center;
|
||||
@include layout.ov-flex-center;
|
||||
}
|
||||
.ov-meet-dialog {
|
||||
border-radius: var(--ov-meet-spacing-md);
|
||||
@ -20,7 +24,7 @@
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
background-color: var(--ov-meet-color-secondary);
|
||||
color: var(--ov-meet-text-on-secondary) !important;
|
||||
|
||||
@ -88,50 +92,50 @@
|
||||
|
||||
// === THEME CLASSES ===
|
||||
.ov-theme-transition {
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
// === CONCEPTUAL ICON CLASSES ===
|
||||
// Apply these classes directly to mat-icon elements for consistent conceptual colors
|
||||
.ov-room-icon {
|
||||
color: var(--ov-meet-icon-rooms) !important;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
.ov-recording-icon {
|
||||
color: var(--ov-meet-icon-recordings) !important;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
.ov-users-permissions {
|
||||
color: var(--ov-meet-icon-users-permissions) !important;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
.ov-settings-icon {
|
||||
color: var(--ov-meet-icon-settings) !important;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
.ov-developer-icon {
|
||||
color: var(--ov-meet-icon-developer) !important;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
.ov-about-icon {
|
||||
color: var(--ov-meet-icon-about) !important;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
.ov-surface {
|
||||
background-color: var(--ov-meet-surface-color);
|
||||
color: var(--ov-meet-text-on-surface);
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
.ov-background {
|
||||
background-color: var(--ov-meet-background-color);
|
||||
color: var(--ov-meet-text-on-background);
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
.ov-text-primary {
|
||||
@ -239,7 +243,7 @@
|
||||
color: var(--ov-meet-color-primary);
|
||||
|
||||
.selection-icon {
|
||||
@include ov-icon(md);
|
||||
@include layout.ov-icon(md);
|
||||
}
|
||||
|
||||
.selection-text {
|
||||
@ -255,7 +259,7 @@
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
|
||||
button {
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
|
||||
&[color='warn'] {
|
||||
color: var(--ov-meet-color-error);
|
||||
@ -384,7 +388,7 @@
|
||||
font-weight: var(--ov-meet-font-weight-medium);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include layout.ov-icon(sm);
|
||||
}
|
||||
|
||||
.status-label {
|
||||
@ -418,7 +422,7 @@
|
||||
|
||||
.mat-mdc-icon-button {
|
||||
.mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include layout.ov-icon(sm);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -454,7 +458,7 @@
|
||||
|
||||
// Empty State
|
||||
.ov-empty-state {
|
||||
@include ov-card;
|
||||
@include components.ov-card;
|
||||
text-align: center;
|
||||
margin: var(--ov-meet-spacing-xl) 0;
|
||||
|
||||
@ -479,10 +483,10 @@
|
||||
|
||||
.action-buttons {
|
||||
.refresh-btn {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include layout.ov-icon(md);
|
||||
margin-right: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
}
|
||||
@ -492,7 +496,7 @@
|
||||
// === NAVIGATION UTILITIES ===
|
||||
// For console navigation and sidebar components
|
||||
.meet-toolbar {
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
background-color: var(--ov-meet-surface-color);
|
||||
}
|
||||
|
||||
@ -500,7 +504,7 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
|
||||
.toolbar-title {
|
||||
font-size: var(--ov-meet-font-size-xxl);
|
||||
@ -514,11 +518,11 @@
|
||||
}
|
||||
|
||||
.ov-sidenav {
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
background-color: var(--ov-meet-surface-color);
|
||||
padding-top: 3.5rem;
|
||||
|
||||
@include ov-tablet-up {
|
||||
@include responsive.ov-tablet-up {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
@ -550,7 +554,7 @@
|
||||
.ov-sidenav-content {
|
||||
padding-top: 3.5rem;
|
||||
|
||||
@include ov-tablet-up {
|
||||
@include responsive.ov-tablet-up {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
@ -560,7 +564,7 @@
|
||||
}
|
||||
|
||||
.page-content {
|
||||
@include ov-container;
|
||||
@include layout.ov-container;
|
||||
}
|
||||
}
|
||||
|
||||
@ -569,7 +573,7 @@
|
||||
text-align: justify;
|
||||
transition: var(--ov-meet-transition-normal);
|
||||
border-radius: var(--ov-meet-radius-sm);
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--ov-meet-surface-hover) !important;
|
||||
@ -590,13 +594,13 @@
|
||||
font-size: var(--ov-meet-font-size-xs);
|
||||
color: var(--ov-text-hint);
|
||||
text-align: center;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
.ov-nav-separator {
|
||||
margin: 0;
|
||||
border-top: 1px solid var(--ov-border-color);
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
}
|
||||
|
||||
// === MENU AND FILTER UTILITIES ===
|
||||
@ -635,7 +639,7 @@
|
||||
// Toolbar Responsive Patterns
|
||||
.ov-data-toolbar {
|
||||
background-color: var(--ov-meet-background-color) !important;
|
||||
@include ov-tablet-down {
|
||||
@include responsive.ov-tablet-down {
|
||||
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
@ -656,7 +660,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
@ -694,7 +698,7 @@
|
||||
|
||||
// Table Responsive Patterns
|
||||
.ov-table-container {
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
margin: 0 calc(-1 * var(--ov-meet-spacing-sm));
|
||||
border-radius: var(--ov-meet-radius-sm);
|
||||
border-left: none;
|
||||
@ -704,7 +708,7 @@
|
||||
|
||||
.ov-data-table {
|
||||
background-color: rgba(var(--ov-meet-surface-color), 0.8);
|
||||
@include ov-tablet-down {
|
||||
@include responsive.ov-tablet-down {
|
||||
.mat-mdc-header-cell,
|
||||
.mat-mdc-cell {
|
||||
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-xs);
|
||||
@ -721,7 +725,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
font-size: var(--ov-meet-font-size-xs);
|
||||
|
||||
.mat-mdc-header-cell {
|
||||
@ -747,7 +751,7 @@
|
||||
}
|
||||
|
||||
.ov-action-buttons {
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
.mat-mdc-icon-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@ -763,7 +767,7 @@
|
||||
}
|
||||
|
||||
.ov-empty-state {
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
padding: var(--ov-meet-spacing-xl) var(--ov-meet-spacing-lg);
|
||||
|
||||
.empty-icon {
|
||||
@ -870,7 +874,7 @@
|
||||
gap: var(--ov-meet-spacing-lg);
|
||||
align-items: flex-start;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include responsive.ov-tablet-down {
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
}
|
||||
@ -893,7 +897,7 @@
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(xl);
|
||||
@include layout.ov-icon(xl);
|
||||
color: var(--ov-meet-text-hint);
|
||||
}
|
||||
}
|
||||
@ -914,10 +918,10 @@
|
||||
}
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include layout.ov-icon(sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -938,12 +942,12 @@
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include responsive.ov-tablet-down {
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
min-height: 40vh;
|
||||
}
|
||||
@ -964,7 +968,7 @@
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
|
||||
.loading-icon {
|
||||
@include ov-icon(xl);
|
||||
@include layout.ov-icon(xl);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@ -1005,31 +1009,31 @@
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
padding: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
@include ov-tablet-down {
|
||||
@include responsive.ov-tablet-down {
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@include ov-page-header;
|
||||
@include components.ov-page-header;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
@include ov-page-content;
|
||||
@include components.ov-page-content;
|
||||
}
|
||||
|
||||
.get-started-header {
|
||||
@include ov-get-started-header;
|
||||
@include components.ov-get-started-header;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
@include ov-section-card;
|
||||
@include components.ov-section-card;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
@ -1047,7 +1051,7 @@
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
@ -1059,13 +1063,13 @@
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
border-radius: var(--ov-meet-radius-circle);
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
@ -1077,13 +1081,13 @@
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include layout.ov-icon(md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ov-table-page-container {
|
||||
@include ov-card;
|
||||
@include components.ov-card;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@ -1109,7 +1113,7 @@
|
||||
color: var(--ov-meet-text-secondary);
|
||||
|
||||
.no-results-icon {
|
||||
@include ov-icon(lg);
|
||||
@include layout.ov-icon(lg);
|
||||
color: var(--ov-meet-text-hint);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
display: block;
|
||||
@ -1129,7 +1133,7 @@
|
||||
|
||||
button {
|
||||
mat-icon {
|
||||
@include ov-icon(sm);
|
||||
@include layout.ov-icon(sm);
|
||||
margin-right: var(--ov-meet-spacing-xs);
|
||||
}
|
||||
}
|
||||
@ -1164,7 +1168,7 @@
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
padding: var(--ov-meet-spacing-md);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
@ -1185,13 +1189,13 @@
|
||||
border-color: var(--ov-border-color);
|
||||
}
|
||||
|
||||
@include ov-tablet-down {
|
||||
@include responsive.ov-tablet-down {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-api-key-btn {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
background-color: var(--ov-meet-color-primary);
|
||||
color: white;
|
||||
|
||||
@ -1200,11 +1204,11 @@
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include layout.ov-icon(md);
|
||||
margin-right: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -1221,7 +1225,7 @@
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
@ -1237,7 +1241,7 @@
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
justify-content: flex-end;
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@ -1266,7 +1270,7 @@
|
||||
}
|
||||
|
||||
.field-icon {
|
||||
@include ov-icon(md);
|
||||
@include layout.ov-icon(md);
|
||||
color: var(--ov-meet-text-secondary);
|
||||
}
|
||||
}
|
||||
@ -1288,7 +1292,7 @@
|
||||
align-items: center;
|
||||
gap: var(--ov-meet-spacing-sm);
|
||||
|
||||
@include ov-mobile-down {
|
||||
@include responsive.ov-mobile-down {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
@ -1314,10 +1318,10 @@
|
||||
border-top: 1px solid var(--ov-border-color-light);
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include layout.ov-icon(md);
|
||||
margin-right: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
}
|
||||
@ -1384,15 +1388,15 @@
|
||||
}
|
||||
|
||||
.ov-feature-card {
|
||||
@include ov-card;
|
||||
@include ov-hover-lift(-5px);
|
||||
@include components.ov-card;
|
||||
@include layout.ov-hover-lift(-5px);
|
||||
text-align: center;
|
||||
|
||||
mat-card-content {
|
||||
padding: var(--ov-meet-spacing-lg);
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(xl);
|
||||
@include layout.ov-icon(xl);
|
||||
margin-bottom: var(--ov-meet-spacing-md);
|
||||
}
|
||||
|
||||
@ -1410,11 +1414,11 @@
|
||||
}
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
width: 100%;
|
||||
|
||||
mat-icon {
|
||||
@include ov-icon(md);
|
||||
@include layout.ov-icon(md);
|
||||
margin-right: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
}
|
||||
@ -1422,17 +1426,17 @@
|
||||
}
|
||||
|
||||
.ov-getting-started-grid {
|
||||
@include ov-grid-responsive(280px);
|
||||
@include layout.ov-grid-responsive(280px);
|
||||
margin-top: var(--ov-meet-spacing-lg);
|
||||
}
|
||||
|
||||
.ov-quick-actions {
|
||||
@include ov-flex-center;
|
||||
@include layout.ov-flex-center;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
margin-bottom: var(--ov-meet-spacing-xxl);
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
|
||||
mat-icon {
|
||||
margin-right: var(--ov-meet-spacing-sm);
|
||||
@ -1441,16 +1445,16 @@
|
||||
}
|
||||
|
||||
.ov-stats-grid {
|
||||
@include ov-grid-responsive(300px);
|
||||
@include layout.ov-grid-responsive(300px);
|
||||
}
|
||||
|
||||
.ov-stats-card {
|
||||
@include ov-card;
|
||||
@include components.ov-card;
|
||||
text-align: center;
|
||||
@include ov-theme-transition;
|
||||
@include layout.ov-theme-transition;
|
||||
|
||||
&:hover {
|
||||
@include ov-hover-lift(-3px);
|
||||
@include layout.ov-hover-lift(-3px);
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
@ -1458,7 +1462,7 @@
|
||||
}
|
||||
|
||||
.stats-icon {
|
||||
@include ov-icon(lg);
|
||||
@include layout.ov-icon(lg);
|
||||
margin-bottom: var(--ov-meet-spacing-sm);
|
||||
}
|
||||
|
||||
@ -1488,7 +1492,7 @@
|
||||
gap: var(--ov-meet-spacing-xs);
|
||||
|
||||
button {
|
||||
@include ov-button-base;
|
||||
@include components.ov-button-base;
|
||||
|
||||
mat-icon {
|
||||
margin-left: var(--ov-meet-spacing-xs);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@use '@angular/material' as mat;
|
||||
@use './assets/styles/openvidu-theme.scss';
|
||||
@import './assets/styles/design-tokens';
|
||||
@use './assets/styles/design-tokens';
|
||||
|
||||
@include mat.elevation-classes();
|
||||
@include mat.app-background();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user