From c9b4fe800f37782bbe78079a511c3c1fd44c3b93 Mon Sep 17 00:00:00 2001 From: Yaotzin Sanabria Date: Thu, 2 Oct 2025 22:43:06 -0600 Subject: [PATCH] feat(ui): scaffold initial layout and styles --- .gitignore | 1 + src/app/app.config.ts | 22 +- src/app/app.css | 0 src/app/app.html | 351 +---------- src/app/app.routes.ts | 3 - src/app/app.spec.ts | 25 - src/app/app.ts | 7 +- src/app/header/header.component.html | 5 + src/app/header/header.component.ts | 7 + src/app/tasks/noTask/noTask.component.html | 3 + src/app/tasks/noTask/noTask.component.ts | 7 + src/app/tasks/tasks.component.html | 8 + src/app/tasks/tasks.component.ts | 9 + .../users/user-tasks/userTasks.component.html | 3 + .../users/user-tasks/userTasks.component.ts | 7 + src/app/users/user/user.component.css | 23 + src/app/users/user/user.component.html | 8 + src/app/users/user/user.component.ts | 20 + src/app/users/user/user.model.ts | 5 + src/app/users/users.component.html | 7 + src/app/users/users.component.ts | 12 + src/dummy-tasks.ts | 83 +++ src/dummy-users.ts | 32 + src/main.ts | 5 +- src/styles.css | 579 +++++++++++++++++- 25 files changed, 853 insertions(+), 379 deletions(-) delete mode 100644 src/app/app.css delete mode 100644 src/app/app.routes.ts delete mode 100644 src/app/app.spec.ts create mode 100644 src/app/header/header.component.html create mode 100644 src/app/header/header.component.ts create mode 100644 src/app/tasks/noTask/noTask.component.html create mode 100644 src/app/tasks/noTask/noTask.component.ts create mode 100644 src/app/tasks/tasks.component.html create mode 100644 src/app/tasks/tasks.component.ts create mode 100644 src/app/users/user-tasks/userTasks.component.html create mode 100644 src/app/users/user-tasks/userTasks.component.ts create mode 100644 src/app/users/user/user.component.css create mode 100644 src/app/users/user/user.component.html create mode 100644 src/app/users/user/user.component.ts create mode 100644 src/app/users/user/user.model.ts create mode 100644 src/app/users/users.component.html create mode 100644 src/app/users/users.component.ts create mode 100644 src/dummy-tasks.ts create mode 100644 src/dummy-users.ts diff --git a/.gitignore b/.gitignore index cc7b141..d59e522 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ testem.log # System files .DS_Store Thumbs.db +TODO \ No newline at end of file diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 2e06ce8..373c740 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,12 +1,24 @@ -import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core'; -import { provideRouter } from '@angular/router'; +import { + ApplicationConfig, + provideBrowserGlobalErrorListeners, + provideZonelessChangeDetection, +} from '@angular/core'; +import { provideRouter, Routes } from '@angular/router'; +import { NoTaskComponent } from './tasks/noTask/noTask.component'; +import { TasksComponent } from './tasks/tasks.component'; -import { routes } from './app.routes'; +const routes: Routes = [ + { path: '', component: NoTaskComponent }, + { + path: 'users/:userId', + component: TasksComponent, + }, +]; export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection(), - provideRouter(routes) - ] + provideRouter(routes), + ], }; diff --git a/src/app/app.css b/src/app/app.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/app.html b/src/app/app.html index 7528372..cc4f492 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,342 +1,13 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title() }}

-

Congratulations! Your app is running. 馃帀

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'}, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
+ +
+
+ +
+ +
- - - - - - - - - - - diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts deleted file mode 100644 index dc39edb..0000000 --- a/src/app/app.routes.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Routes } from '@angular/router'; - -export const routes: Routes = []; diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts deleted file mode 100644 index 477d1b3..0000000 --- a/src/app/app.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { provideZonelessChangeDetection } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { App } from './app'; - -describe('App', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [App], - providers: [provideZonelessChangeDetection()] - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(App); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(App); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, easytask-routing-angular'); - }); -}); diff --git a/src/app/app.ts b/src/app/app.ts index da5afca..dc20ea2 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,12 +1,15 @@ import { Component, signal } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { DUMMY_USERS } from '../dummy-users'; +import { HeaderComponent } from './header/header.component'; +import { UsersComponent } from './users/users.component'; @Component({ selector: 'app-root', - imports: [RouterOutlet], templateUrl: './app.html', - styleUrl: './app.css' + imports: [HeaderComponent, UsersComponent, RouterOutlet], }) export class App { protected readonly title = signal('easytask-routing-angular'); + users = DUMMY_USERS; } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html new file mode 100644 index 0000000..d57faad --- /dev/null +++ b/src/app/header/header.component.html @@ -0,0 +1,5 @@ +
+ +

EasyTask

+

Enterprise-level task management without friction

+
\ No newline at end of file diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts new file mode 100644 index 0000000..00bb401 --- /dev/null +++ b/src/app/header/header.component.ts @@ -0,0 +1,7 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: 'app-header', + templateUrl: './header.component.html', +}) +export class HeaderComponent {} \ No newline at end of file diff --git a/src/app/tasks/noTask/noTask.component.html b/src/app/tasks/noTask/noTask.component.html new file mode 100644 index 0000000..fc8e0bb --- /dev/null +++ b/src/app/tasks/noTask/noTask.component.html @@ -0,0 +1,3 @@ +
+

Select a user to see their tasks!

+
\ No newline at end of file diff --git a/src/app/tasks/noTask/noTask.component.ts b/src/app/tasks/noTask/noTask.component.ts new file mode 100644 index 0000000..dfe29d0 --- /dev/null +++ b/src/app/tasks/noTask/noTask.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-noTask', + templateUrl: './noTask.component.html', +}) +export class NoTaskComponent {} diff --git a/src/app/tasks/tasks.component.html b/src/app/tasks/tasks.component.html new file mode 100644 index 0000000..bf596f6 --- /dev/null +++ b/src/app/tasks/tasks.component.html @@ -0,0 +1,8 @@ +
+

User's Tasks

+ Add task +
+ + diff --git a/src/app/tasks/tasks.component.ts b/src/app/tasks/tasks.component.ts new file mode 100644 index 0000000..efe6827 --- /dev/null +++ b/src/app/tasks/tasks.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; +import { RouterLink, RouterOutlet } from '@angular/router'; + +@Component({ + selector: 'app-tasks', + templateUrl: 'tasks.component.html', + imports: [RouterOutlet, RouterLink], +}) +export class TasksComponent {} diff --git a/src/app/users/user-tasks/userTasks.component.html b/src/app/users/user-tasks/userTasks.component.html new file mode 100644 index 0000000..f97cc5d --- /dev/null +++ b/src/app/users/user-tasks/userTasks.component.html @@ -0,0 +1,3 @@ +
    + ...TODO +
diff --git a/src/app/users/user-tasks/userTasks.component.ts b/src/app/users/user-tasks/userTasks.component.ts new file mode 100644 index 0000000..0256239 --- /dev/null +++ b/src/app/users/user-tasks/userTasks.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-user/tasks', + templateUrl: './userTasks.component.html', +}) +export class UserTasksComponent {} diff --git a/src/app/users/user/user.component.css b/src/app/users/user/user.component.css new file mode 100644 index 0000000..326a1bd --- /dev/null +++ b/src/app/users/user/user.component.css @@ -0,0 +1,23 @@ +.avatar { + height: 2.5rem; + width: 2.5rem; +} + +.wrapper { + background-color: var(--c-primary-700); + color: var(--text-on-primary); + min-width: 17rem; +} +.wrapper:hover { + background-color: var(--c-primary-500); +} +.wrapper:focus { + outline: var(--glow) solid var(--c-primary-300); + background-color: var(--c-primary-500); +} +.wrapper:active { + background-color: var(--c-primary-700); +} +.wrapper.active { + background-color: var(--c-primary-500); +} diff --git a/src/app/users/user/user.component.html b/src/app/users/user/user.component.html new file mode 100644 index 0000000..8b22465 --- /dev/null +++ b/src/app/users/user/user.component.html @@ -0,0 +1,8 @@ + + + {{ name }} + diff --git a/src/app/users/user/user.component.ts b/src/app/users/user/user.component.ts new file mode 100644 index 0000000..2478493 --- /dev/null +++ b/src/app/users/user/user.component.ts @@ -0,0 +1,20 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { RouterLink, RouterLinkActive } from '@angular/router'; +import { UserType } from './user.model'; + +@Component({ + selector: 'app-user', + templateUrl: './user.component.html', + styleUrl: './user.component.css', + imports: [RouterLink, RouterLinkActive], +}) +export class UserComponent { + @Input({ required: true }) id!: UserType['id']; + @Input({ required: true }) name!: UserType['name']; + @Input({ required: true }) avatar!: UserType['avatar']; + @Output() userSelected = new EventEmitter(); + + emitUserSelected() { + this.userSelected.emit(this.id); + } +} diff --git a/src/app/users/user/user.model.ts b/src/app/users/user/user.model.ts new file mode 100644 index 0000000..615f11c --- /dev/null +++ b/src/app/users/user/user.model.ts @@ -0,0 +1,5 @@ +export type UserType = { + id: string; + name: string; + avatar: string; +}; diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html new file mode 100644 index 0000000..80d4c20 --- /dev/null +++ b/src/app/users/users.component.html @@ -0,0 +1,7 @@ +
    + @for (user of users; track user.id) { +
  • + +
    • + } +
diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts new file mode 100644 index 0000000..061408f --- /dev/null +++ b/src/app/users/users.component.ts @@ -0,0 +1,12 @@ +import { Component, Input } from '@angular/core'; +import { UserComponent } from './user/user.component'; +import { UserType } from './user/user.model'; + +@Component({ + selector: 'app-users', + templateUrl: './users.component.html', + imports: [UserComponent], +}) +export class UsersComponent { + @Input({ required: true }) users: UserType[] = []; +} diff --git a/src/dummy-tasks.ts b/src/dummy-tasks.ts new file mode 100644 index 0000000..80aee1c --- /dev/null +++ b/src/dummy-tasks.ts @@ -0,0 +1,83 @@ +export const DUMMY_TASKS = [ + { + id: 't1', + title: 'Revisar propuesta de dise帽o', + dueDate: '2025-07-27T10:15:00Z', + summary: + 'Validar las secciones visuales antes de la revisi贸n final del cliente.', + complete: false, + userId: 'u1', + }, + { + id: 't2', + title: 'Actualizar documentaci贸n t茅cnica', + dueDate: '2025-07-26T14:45:00Z', + summary: 'Agregar nuevos endpoints REST al documento compartido.', + complete: true, + userId: 'u2', + }, + { + id: 't3', + title: 'Configurar servidor de staging', + dueDate: '2025-07-28T09:00:00Z', + summary: 'Preparar el entorno de pruebas para el release semanal.', + complete: false, + userId: 'u3', + }, + { + id: 't4', + title: 'Crear mockups del dashboard', + dueDate: '2025-07-25T16:30:00Z', + summary: 'Generar prototipos responsivos con base en el nuevo layout.', + complete: true, + userId: 'u4', + }, + { + id: 't5', + title: 'Escribir pruebas unitarias', + dueDate: '2025-07-24T11:20:00Z', + summary: 'Cubrir los nuevos reducers y efectos del store.', + complete: false, + userId: 'u5', + }, + { + id: 't6', + title: 'Coordinar reuni贸n de equipo', + dueDate: '2025-07-29T08:00:00Z', + summary: 'Definir agenda para el cierre de sprint y retrospectiva.', + complete: false, + userId: 'u6', + }, + { + id: 't7', + title: 'Optimizar queries en la base de datos', + dueDate: '2025-07-23T13:15:00Z', + summary: 'Reducir latencia en los endpoints cr铆ticos.', + complete: true, + userId: 'u3', + }, + { + id: 't8', + title: 'Dise帽ar estructura de componente modular', + dueDate: '2025-07-28T18:00:00Z', + summary: 'Separar l贸gica visual y funcional del panel de m茅tricas.', + complete: false, + userId: 'u2', + }, + { + id: 't9', + title: 'Integrar se帽ales reactivas en el feature de notificaciones', + dueDate: '2025-07-27T20:10:00Z', + summary: 'Actualizar l贸gica para usar Signals en lugar de Subjects.', + complete: true, + userId: 'u5', + }, + { + id: 't10', + title: 'Redise帽ar mixins para utilidades CSS', + dueDate: '2025-07-22T17:00:00Z', + summary: 'Mejorar la reusabilidad de los mixins de espaciado y bordes.', + complete: true, + userId: 'u1', + }, +]; diff --git a/src/dummy-users.ts b/src/dummy-users.ts new file mode 100644 index 0000000..0f1f9e1 --- /dev/null +++ b/src/dummy-users.ts @@ -0,0 +1,32 @@ +export const DUMMY_USERS = [ + { + id: 'u1', + name: 'Jasmine Washington', + avatar: 'https://i.pravatar.cc/150?img=3', + }, + { + id: 'u2', + name: 'Emily Thompson', + avatar: 'https://i.pravatar.cc/150?img=4', + }, + { + id: 'u3', + name: 'Marcus Johnson', + avatar: 'https://i.pravatar.cc/150?img=5', + }, + { + id: 'u4', + name: 'David Miller', + avatar: 'https://i.pravatar.cc/150?img=6', + }, + { + id: 'u5', + name: 'Priya Patel', + avatar: 'https://i.pravatar.cc/150?img=7', + }, + { + id: 'u6', + name: 'Arjun Singh', + avatar: 'https://i.pravatar.cc/150?img=8', + }, +]; diff --git a/src/main.ts b/src/main.ts index 5df75f9..2108cd9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser'; -import { appConfig } from './app/app.config'; import { App } from './app/app'; +import { appConfig } from './app/app.config'; -bootstrapApplication(App, appConfig) - .catch((err) => console.error(err)); +bootstrapApplication(App, appConfig).catch((err) => console.error(err)); diff --git a/src/styles.css b/src/styles.css index 90d4ee0..865a9be 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,578 @@ -/* You can add global styles to this file, and also import other style files */ +:root { + --c-primary-50: #ede7f6; + --c-primary-100: #d1c4e9; + --c-primary-200: #b39ddb; + --c-primary-300: #9575cd; + --c-primary-400: #7e57c2; + --c-primary-500: #6f42c1; + --c-primary-600: #5e35b1; + --c-primary-700: #512da8; + --c-primary-800: #4527a0; + --c-primary-900: #311b92; + + --c-secondary-50: #d4effa; + --c-secondary-100: #c7e9f9; + --c-secondary-200: #a9dbf4; + --c-secondary-300: #8accee; + --c-secondary-400: #6bbbe7; + --c-secondary-500: #3795bd; + --c-secondary-600: #2d7aa1; + --c-secondary-700: #235f80; + --c-secondary-800: #183f57; + --c-secondary-900: #0a1f2f; + + --c-info-50: #f1fbff; + --c-info-100: #e3f7ff; + --c-info-200: #c2eaff; + --c-info-300: #9edcff; + --c-info-400: #78cbf9; + --c-info-500: #3ca9e2; + --c-info-600: #1d91d6; + --c-info-700: #1a74b3; + --c-info-800: #15578a; + --c-info-900: #0d3657; + + --c-success-100: #d4edda; + --c-success-300: #77dd8e; + --c-success-500: #28a745; + --c-success-700: #1c7730; + --c-success-900: #0e3b18; + + --c-warning-50: #fff8e1; + --c-warning-100: #ffecb3; + --c-warning-200: #ffe082; + --c-warning-300: #ffd54f; + --c-warning-400: #ffca28; + --c-warning-500: #ffc107; + --c-warning-600: #ffb300; + --c-warning-700: #ffa000; + --c-warning-800: #ff8f00; + --c-warning-900: #ff6f00; + + --c-danger-100: #f8d7da; + --c-danger-300: #eb8f97; + --c-danger-500: #dc3545; + --c-danger-700: #9f2633; + --c-danger-900: #5e171e; + + --c-light-100: #ffffff; + --c-light-500: #f5f5f5; + + --c-dark-500: #252525; + --c-dark-900: #1a1a1a; + + --text-on-primary: var(--c-light-100); + --text-on-secondary: var(--c-light-100); + --text-on-info: var(--c-dark-900); + --text-on-warning: var(--c-dark-900); + --text-on-danger: var(--c-light-100); + --text-on-success: var(--c-light-100); + --text-on-light: var(--c-dark-500); + --text-on-dark: var(--c-light-500); + --space-1: 0.25em; + --space-2: 0.5em; + --space-3: 0.75em; + --space-4: 1em; + --space-5: 1.5em; + --space-6: 2em; + --shadow-1: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, + rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; + --shadow-2: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, + rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; + --shadow-3: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, + rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; + --glow: 0.25rem; +} + +*, +*::before, +*::after { + box-sizing: inherit; + padding: 0; + margin: 0; +} + +html { + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + line-height: 1.6; + background-color: var(--c-light-500); + color: var(--c-dark-500); + display: flex; + flex-direction: column; + min-height: 100vh; +} + +a { + text-decoration: none; +} + +main { + flex-grow: 1; + overflow: auto; +} + +img { + display: block; + width: 100%; + height: auto; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + line-height: 1.2; +} + +input, +button, +textarea { + font: inherit; +} + +ul { + list-style-type: none; +} + +.heading-1 { + font-size: 3.815rem; +} +.heading-2 { + font-size: 3.052rem; +} +.heading-3 { + font-size: 2.441rem; +} +.heading-4 { + font-size: 1.953rem; +} +.heading-5 { + font-size: 1.563rem; +} +.heading-6 { + font-size: 1.25rem; +} + +.container { + width: 56.25rem; + max-width: 68.75rem; + margin: 0 auto; + padding-left: var(--space-4); + padding-right: var(--space-4); +} + +.logo { + display: block; + border-radius: 50%; + height: 5rem; + width: 5rem; + background-color: var(--c-primary-700); +} + +.backdrop { + background-color: rgba(0, 0, 0, 0.7); + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; +} + +.button { + display: inline-block; + cursor: pointer; + border: none; + outline: none; + padding: var(--space-2) var(--space-5); + border-radius: var(--space-1); + font-weight: bold; +} +.button:disabled { + opacity: 0.65; + cursor: not-allowed; +} +.button--primary { + background-color: var(--c-primary-500); + color: var(--text-on-primary); +} +.button--primary:focus { + outline: var(--glow) solid var(--c-primary-300); +} +.button--primary:hover:not(:disabled) { + background-color: var(--c-primary-400); +} +.button--primary:active { + background-color: var(--c-primary-600); +} +.button--secondary { + background-color: var(--c-secondary-500); + color: var(--text-on-secondary); +} +.button--secondary:focus { + outline: var(--glow) solid var(--c-secondary-300); +} +.button--secondary:hover:not(:disabled) { + background-color: var(--c-secondary-400); +} +.button--secondary:active { + background-color: var(--c-secondary-600); +} +.button--info { + background-color: var(--c-info-500); + color: var(--text-on-info); +} +.button--info:focus { + outline: var(--glow) solid var(--c-info-300); +} +.button--info:hover:not(:disabled) { + background-color: var(--c-info-400); +} +.button--info:active { + background-color: var(--c-info-600); +} +.button--warning { + background-color: var(--c-warning-500); + color: var(--text-on-warning); +} +.button--warning:focus { + outline: var(--glow) solid var(--c-warning-300); +} +.button--warning:hover:not(:disabled) { + background-color: var(--c-warning-400); +} +.button--warning:active { + background-color: var(--c-warning-600); +} + +.form-control { + display: block; + background-color: var(--c-light-100); + width: 100%; + border-radius: var(--space-1); + border: 0.1rem solid lightgray; + outline: none; + padding: var(--space-2) var(--space-4); +} +.form-control:focus { + outline: var(--glow) solid var(--c-primary-100); +} +.form-control--textarea { + resize: vertical; + min-height: 240px; +} +.form__feedback { + display: block; + font-size: small; + margin-top: var(--space-2); +} +.form__feedback--invalid { + color: var(--c-danger-500); +} + +.align-items-center { + align-items: center; +} +.align-self-center { + align-self: center; +} +.justify-content-sb { + justify-content: space-between; +} +.justify-content-end { + justify-content: end; +} +.justify-content-center { + justify-content: center; +} +.d-flex { + display: flex; +} +.flex-column { + flex-direction: column; +} +.flex-grow-1 { + flex-grow: 1; +} +.d-inline-flex { + display: inline-flex; +} +.gap { + gap: var(--space-5); +} +.gap-sm { + gap: var(--space-4); +} +.gap-lg { + gap: var(--space-6); +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.mt-1 { + margin-top: var(--space-1); +} +.mt-2 { + margin-top: var(--space-2); +} +.mt-3 { + margin-top: var(--space-3); +} +.mt-4 { + margin-top: var(--space-4); +} +.mt-5 { + margin-top: var(--space-5); +} +.mt-6 { + margin-top: var(--space-6); +} +.mr-1 { + margin-right: var(--space-1); +} +.mr-2 { + margin-right: var(--space-2); +} +.mr-3 { + margin-right: var(--space-3); +} +.mr-4 { + margin-right: var(--space-4); +} +.mr-5 { + margin-right: var(--space-5); +} +.mr-6 { + margin-right: var(--space-6); +} +.mb-1 { + margin-bottom: var(--space-1); +} +.mb-2 { + margin-bottom: var(--space-2); +} +.mb-3 { + margin-bottom: var(--space-3); +} +.mb-4 { + margin-bottom: var(--space-4); +} +.mb-5 { + margin-bottom: var(--space-5); +} +.mb-6 { + margin-bottom: var(--space-6); +} +.ml-1 { + margin-left: var(--space-1); +} +.ml-2 { + margin-left: var(--space-2); +} +.ml-3 { + margin-left: var(--space-3); +} +.ml-4 { + margin-left: var(--space-4); +} +.ml-5 { + margin-left: var(--space-5); +} +.ml-6 { + margin-left: var(--space-6); +} + +.pt-1 { + padding-top: var(--space-1); +} +.pt-2 { + padding-top: var(--space-2); +} +.pt-3 { + padding-top: var(--space-3); +} +.pt-4 { + padding-top: var(--space-4); +} +.pt-5 { + padding-top: var(--space-5); +} +.pt-6 { + padding-top: var(--space-6); +} +.pr-1 { + padding-right: var(--space-1); +} +.pr-2 { + padding-right: var(--space-2); +} +.pr-3 { + padding-right: var(--space-3); +} +.pr-4 { + padding-right: var(--space-4); +} +.pr-5 { + padding-right: var(--space-5); +} +.pr-6 { + padding-right: var(--space-6); +} +.pb-1 { + padding-bottom: var(--space-1); +} +.pb-2 { + padding-bottom: var(--space-2); +} +.pb-3 { + padding-bottom: var(--space-3); +} +.pb-4 { + padding-bottom: var(--space-4); +} +.pb-5 { + padding-bottom: var(--space-5); +} +.pb-6 { + padding-bottom: var(--space-6); +} +.pl-1 { + padding-left: var(--space-1); +} +.pl-2 { + padding-left: var(--space-2); +} +.pl-3 { + padding-left: var(--space-3); +} +.pl-4 { + padding-left: var(--space-4); +} +.pl-5 { + padding-left: var(--space-5); +} +.pl-6 { + padding-left: var(--space-6); +} + +.rounded-circle { + border-radius: 50%; +} +.rounded-1 { + border-radius: var(--space-1); +} +.rounded-2 { + border-radius: var(--space-2); +} + +.text-center { + text-align: center; +} + +.shadow-1 { + box-shadow: var(--shadow-1); +} +.shadow-2 { + box-shadow: var(--shadow-2); +} +.shadow-3 { + box-shadow: var(--shadow-3); +} + +.bg-primary { + background-color: var(--c-primary-500); +} +.bg-primary-700 { + background-color: var(--c-primary-700); +} +.bg-secondary { + background-color: var(--c-secondary-500); +} +.bg-info { + background-color: var(--c-info-500); +} +.bg-warning { + background-color: var(--c-warning-500); +} +.bg-danger { + background-color: var(--c-danger-500); +} +.bg-success { + background-color: var(--c-success-500); +} +.bg-light { + background-color: var(--c-light-500); +} +.bg-dark { + background-color: var(--c-dark-500); +} + +.text-primary { + color: var(--c-primary-500); +} +.text-secondary { + color: var(--c-secondary-500); +} +.text-info { + color: var(--c-info-500); +} +.text-warning { + color: var(--c-warning-500); +} +.text-danger { + color: var(--c-danger-500); +} +.text-success { + color: var(--c-success-500); +} +.text-light { + color: var(--c-light-500); +} +.text-dark { + color: var(--c-dark-500); +} + +.text-on-primary { + color: var(--text-on-primary); +} +.text-on-secondary { + color: var(--text-on-secondary); +} +.text-on-info { + color: var(--text-on-info); +} +.text-on-warning { + color: var(--text-on-warning); +} +.text-on-danger { + color: var(--text-on-danger); +} +.text-on-success { + color: var(--text-on-success); +} +.text-on-light { + color: var(--text-on-light); +} +.text-on-dark { + color: var(--text-on-dark); +} + +.opacity-70 { + opacity: 70%; +} + +.h-100 { + height: 100%; +} +.w-100 { + width: 100%; +}