pigui/pireon-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix components

Browse Source
This commit is contained in:
Josep Piguillem
2026-07-30 11:56:57 +02:00
parent c446aa2b04
commit 85886a094a
156 changed files with 4180 additions and 7466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/playground/src/app/app.config.ts
View File

@@ -5,7 +5,10 @@ import {
provideBrowserGlobalErrorListeners,
} from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { provideStore } from '@ngrx/store';
import { routes } from './app.routes';
import {
TranslateLoader,
TranslationObject,
@@ -48,6 +51,12 @@ export const appConfig: ApplicationConfig = {
provideBrowserGlobalErrorListeners(),
provideAnimationsAsync(),
provideRouter(
routes,
// Al cambiar de página se vuelve arriba; el catálogo es muy largo.
withInMemoryScrolling({ scrollPositionRestoration: 'top' }),
),
// Los iconos son SVG registrados en el MatIconRegistry (assets/icons).
provideAppInitializer(() => inject(IconRegistryService).init()),

48
apps/playground/src/app/app.html Normal file
View File

@@ -0,0 +1,48 @@
<header class="page-header">
<div class="page-header__top">
<div>
<h1>@pi/ui</h1>
<p>
Catálogo de la librería migrada a Angular 22: componentes standalone,
señales, OnPush y Signal Forms.
</p>
</div>
<div class="theme-toggles">
<label class="theme-toggle">
<span>Tema alternativo</span>
<pi-slide-toggle [(checked)]="alternativeTheme" />
</label>
<label class="theme-toggle">
<span>Modo oscuro</span>
<pi-slide-toggle [(checked)]="darkMode" />
</label>
</div>
</div>
<nav class="page-nav">
@for (link of navLinks; track link.path) {
<a
[routerLink]="link.path"
routerLinkActive="is-active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ link.label }}</a
>
}
</nav>
<p class="theme-hint">
Tema:
<strong>{{ alternativeTheme() ? 'alternative' : 'default' }}</strong> ·
<code
>{{ alternativeTheme() ? 'pi-shell__alternative' : 'pi-shell__default'
}}</code
>
en el <code>&lt;body&gt;</code>. Los dos temas comparten exactamente los
mismos selectores: solo cambian los tokens <code>--pi-color-*</code> y
<code>--pi-theme-*</code> que definen <code>themes/_default.scss</code> y
<code>themes/_alternative.scss</code>.
</p>
</header>
<router-outlet />

18
apps/playground/src/app/app.routes.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'componentes' },
{
path: 'componentes',
title: 'Componentes · @pi/ui',
loadComponent: () =>
import('./pages/catalog/catalog.page').then((m) => m.CatalogPage),
},
{
path: 'layouts',
title: 'Layouts · @pi/ui',
loadComponent: () =>
import('./pages/layouts/layouts.page').then((m) => m.LayoutsPage),
},
{ path: '**', redirectTo: 'componentes' },
];

85
apps/playground/src/app/app.scss Normal file
View File

@@ -0,0 +1,85 @@
:host {
display: block;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.page-header {
margin-bottom: 2rem;
&__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
}
h1 {
margin: 0;
font-size: 2rem;
font-weight: 700;
color: var(--pg-heading);
}
p {
margin: 0.5rem 0 0;
color: var(--pg-text-muted);
max-width: 60ch;
}
}
.theme-toggles {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
flex-shrink: 0;
}
.theme-toggle {
display: flex;
align-items: center;
gap: 0.6rem;
flex-shrink: 0;
font-size: 0.85rem;
color: var(--pg-text-muted);
white-space: nowrap;
}
.theme-hint {
margin: 0.75rem 0 0;
font-size: 0.8rem;
color: var(--pg-text-muted);
max-width: 70ch;
code {
padding: 0.05rem 0.3rem;
border-radius: 4px;
background: var(--pg-badge-bg);
color: var(--pg-badge-text);
font-size: 0.95em;
}
}
.page-nav {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
a {
padding: 0.35rem 0.9rem;
border-radius: 999px;
border: 1px solid var(--pg-card-border);
color: var(--pg-text-muted);
font-size: 0.85rem;
text-decoration: none;
&.is-active {
border-color: transparent;
background: var(--pg-badge-bg);
color: var(--pg-badge-text);
font-weight: 600;
}
}
}

59
apps/playground/src/app/app.ts Normal file
View File

@@ -0,0 +1,59 @@
import { DOCUMENT } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
effect,
inject,
signal,
} from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { PiSlideToggleComponent, ShellClass } from '@pi/ui';
/**
* Shell del playground: cabecera, navegación y estado de tema. El contenido de
* cada página vive en `pages/` y entra por el `<router-outlet>`.
*/
@Component({
selector: 'app-root',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './app.html',
styleUrl: './app.scss',
imports: [RouterOutlet, RouterLink, RouterLinkActive, PiSlideToggleComponent],
})
export class App {
protected readonly navLinks = [
{ path: '/componentes', label: 'Componentes' },
{ path: '/layouts', label: 'Layouts' },
];
/* --- Tema y modo oscuro -------------------------------------------------- */
private readonly document = inject(DOCUMENT);
protected readonly darkMode = signal(false);
/**
* Tema visual de la librería. `ShellClass` devuelve las dos clases que hay
* que poner juntas (`pi-shell pi-shell__<tema>`); van en el `<body>` porque
* los overlays de Material (diálogos, snackbars) se montan fuera de
* `<app-root>` y también deben heredarlas.
*/
protected readonly alternativeTheme = signal(false);
constructor() {
effect(() => {
this.document.documentElement.classList.toggle(
'dark-mode',
this.darkMode(),
);
});
effect(() => {
const shell = this.alternativeTheme()
? ShellClass.Alternative
: ShellClass.Default;
this.document.body.className = shell;
});
}
}

488
apps/playground/src/app/pages/catalog/catalog.page.html
View File

@@ -1,11 +1,4 @@
<header class="page-header">
<h1>@pi/ui</h1>
<p>
Catálogo de la librería migrada a Angular 22: componentes standalone,
señales, OnPush y Signal Forms.
</p>
<span class="event">Último evento: {{ lastEvent() }}</span>
</header>
<span class="event">Último evento: {{ lastEvent() }}</span>
<main>
<div class="col">
@@ -48,6 +41,18 @@
<pi-search-field [formField]="f.search" placeholder="Buscar…" />
<pi-icon-field [formField]="f.website" icon="globe">
<pi-label>Web</pi-label>
</pi-icon-field>
<pi-phone-field [formField]="f.phone">
<pi-label>Teléfono</pi-label>
</pi-phone-field>
<pi-number-field [formField]="f.weight">
<pi-label>Peso (kg)</pi-label>
</pi-number-field>
<label class="inline">
<span>Newsletter</span>
<pi-slide-toggle [formField]="f.newsletter" />
@@ -59,6 +64,45 @@
label="Volumen"
[maxValue]="100"
/>
<div class="range-slider-caption">
<span
>Rango de precio (pi-range-slider no pinta su propia etiqueta)</span
>
<pi-range-slider
[formField]="f.priceRange"
unit="€"
[minValue]="0"
[maxValue]="100"
/>
</div>
<pi-date-field [formField]="f.birthDate">
<pi-label>Fecha de nacimiento</pi-label>
</pi-date-field>
<pi-radio-group
[formField]="f.shipping"
[options]="shippingOptions"
[columns]="1"
/>
<pi-checkbox [formField]="f.terms" label="Acepto los términos" />
<pi-file-upload
[formField]="f.attachments"
[multiple]="true"
accept="image/*,.pdf"
[maxSizeBytes]="2097152"
[maxFiles]="3"
label="Arrastra ficheros o pulsa para elegir"
hint="Imágenes o PDF · máx. 2 MB · hasta 3"
(rejected)="log('rechazados: ' + $event.length)"
/>
<button pi-primary w100 (click)="submitForm()">
Enviar (muestra los errores)
</button>
</div>
</app-section>
</div>
@@ -87,6 +131,24 @@
<pi-chevron-button (toggle)="log('chevron')" />
<pi-close-button (toggle)="log('close')" />
<pi-hamburger (toggle)="log('hamburger')" />
<pi-radio-button
[isActive]="radioActive()"
[isDisabled]="false"
(execute)="radioActive.set(!radioActive())"
/>
<pi-switch-button
[content]="['Mensual', 'Anual']"
contentType="text"
[(isActive)]="switchActive"
(toggledTo)="log('switch ' + $event)"
/>
<pi-toggle-button
text="Favorito"
icon="star-fill"
[isActive]="toggleActive()"
[isDisabled]="false"
(execute)="toggleActive.set(!toggleActive())"
/>
</app-section>
<app-section title="Iconos y texto">
@@ -99,10 +161,58 @@
appearance="fill"
[isStroked]="true"
/>
<pi-icon
icon="info"
color="primary"
size="large"
pi-tooltip
tooltipText="Esto usa PiTooltipDirective"
tooltipPosition="above"
/>
<pi-text-viewer value="Texto con el visor" fontSize="m" color="black" />
<pi-divider color="primary" width="large" label="Separador" />
</app-section>
<app-section
title="Cabecera y listado"
hint="pi-headline para portadas de sección, pi-list-item para filas de listado. pi-headline resuelve pathImg contra un CDN externo fijo, así que la ilustración solo carga con red."
>
<div class="stack full">
<pi-headline pathImg="404.svg" alt="Ilustración">
<pi-headline-label-content>
<h4>Bienvenido</h4>
</pi-headline-label-content>
<pi-headline-description-content>
<p>Gestiona tu cuenta desde aquí.</p>
</pi-headline-description-content>
</pi-headline>
<pi-list-item borderType="bottom" color="white" [isClickable]="true">
<pi-list-item-left-icon>
<pi-icon icon="user" color="primary" />
</pi-list-item-left-icon>
<pi-list-item-left-content>
<span>Perfil</span>
</pi-list-item-left-content>
<pi-list-item-right-icon>
<pi-icon icon="chevron-forward" color="grey" />
</pi-list-item-right-icon>
</pi-list-item>
<pi-list-item borderType="bottom" color="white" [isClickable]="true">
<pi-list-item-left-icon>
<pi-icon icon="notification-on" color="primary" />
</pi-list-item-left-icon>
<pi-list-item-left-content>
<span>Notificaciones</span>
</pi-list-item-left-content>
<pi-list-item-right-content>
<pi-chip-status status="pending" label="3" />
</pi-list-item-right-content>
</pi-list-item>
</div>
</app-section>
<app-section title="Chips">
<pi-chip label="Etiqueta" color="primary" />
<pi-chip-status status="success" label="Correcto" />
@@ -114,6 +224,359 @@
[isActive]="true"
(execute)="log('chip-action')"
/>
<pi-chip-time
date="2026-07-28"
time="2026-07-28T09:30:00Z"
[isActive]="false"
/>
<pi-chip-date date="2026-07-28" [isActive]="false" />
<pi-tile label="Ingresos" value="12.4K €" icon="coin" />
</app-section>
<app-section title="Card">
<pi-card
alignment="flex-start"
gap="m"
innerPadding="l"
context="public"
[isClickable]="true"
(execute)="log('card')"
>
<pi-card-top-content>
<h4>Título de la tarjeta</h4>
</pi-card-top-content>
<pi-card-center-content>
<p>Contenido de ejemplo para pi-card.</p>
</pi-card-center-content>
</pi-card>
</app-section>
<app-section
title="Panel"
hint="pi-expansion-panel[type=form] usa Reactive Forms clásico, no Signal Forms."
>
<div class="stack full">
<pi-panel
title="Resumen"
subtitle="Últimos 30 días"
height="medium"
outline="grey"
status=""
innerPadding="l"
>
<pi-panel-center-content>
<p>Contenido central del panel.</p>
</pi-panel-center-content>
<pi-panel-bottom-content>
<button pi-ghost (click)="log('panel bottom action')">
Ver más
</button>
</pi-panel-bottom-content>
</pi-panel>
<pi-expansion-panel
type="form"
title="Datos de contacto"
height="small"
outline="grey"
status=""
innerPadding="l"
[(isCollapsed)]="isPanelCollapsed"
(edit)="log('expansion-panel edit')"
>
<pi-panel-center-content>
<p>{{ f.contactEmail().value() || 'Sin email' }}</p>
</pi-panel-center-content>
<pi-panel-expandable-content>
<input
[formField]="f.contactEmail"
placeholder="email@ejemplo.com"
/>
</pi-panel-expandable-content>
</pi-expansion-panel>
</div>
</app-section>
<app-section title="Accordion">
<div class="stack full">
<pi-accordion
color="primary"
appearance="outline"
[(expandedItemIndex)]="expandedAccordionIndex"
>
<pi-accordion-item
title="Facturación"
subtitle="Datos de pago"
status="info"
statusLabel="Pendiente"
>
<ng-template pi-accordion-item-expandable-content>
<p>Contenido expandible del ítem 1.</p>
</ng-template>
</pi-accordion-item>
<pi-accordion-item
title="Envío"
status="success"
statusLabel="Completo"
>
<ng-template pi-accordion-item-expandable-content>
<p>Detalles de envío.</p>
</ng-template>
</pi-accordion-item>
</pi-accordion>
</div>
</app-section>
<app-section title="Tab">
<div class="stack full">
<pi-tab
[tabButtons]="tabs"
[isSmallDevice]="false"
(tabChange)="log('tab ' + $event)"
>
<ng-template pi-tab-content
>Contenido de la pestaña General.</ng-template
>
<ng-template pi-tab-content
>Contenido de la pestaña Facturación.</ng-template
>
<ng-template pi-tab-content
>Contenido de la pestaña Avanzado.</ng-template
>
</pi-tab>
</div>
</app-section>
<app-section title="Banner">
<div class="stack full">
<pi-banner
mode="dark"
title="Nueva funcionalidad"
message="Descubre el nuevo panel de control."
buttonText="Ver más"
pathImg="404.svg"
extension="svg"
(execute)="log('banner')"
/>
</div>
</app-section>
<app-section title="Note">
<div class="stack full">
<pi-note
title="Aviso"
text="Tu suscripción caduca pronto."
status="pending"
gap="s"
>
<pi-note-action-content>
<button pi-ghost (click)="log('note action')">Renovar</button>
</pi-note-action-content>
</pi-note>
</div>
</app-section>
<app-section
title="Select"
hint="pi-select* usa Signal Forms como el resto: [formField] enlaza el valor completo de la opción elegida. #optionTemplate/#selectedTemplate son content children obligatorios de la librería; sin ellos, Angular lanza NG0951."
>
<div class="stack full">
<pi-select
[formField]="f.country"
keyIdProperty="id"
label="País"
placeholder="Selecciona un país"
[options]="countries"
>
<ng-template #optionTemplate let-option>
<pi-select-option [id]="option.id" [label]="option.name" />
</ng-template>
<ng-template #selectedTemplate></ng-template>
</pi-select>
<pi-select-multiple
[formField]="f.tags"
keyIdProperty="id"
label="Etiquetas"
placeholder="Selecciona etiquetas"
[options]="tags"
[hasSelectAllOptions]="true"
selectAllLabel="Todas"
>
<ng-template #optionTemplate let-option>
<pi-select-option
type="multiple"
[id]="option.id"
[label]="option.name"
/>
</ng-template>
<ng-template #selectedTemplate></ng-template>
</pi-select-multiple>
<pi-select-period
[formField]="f.period"
keyIdProperty="id"
label="Periodo"
placeholder="Selecciona un periodo"
[options]="countries"
>
<ng-template #optionTemplate let-option>
<pi-select-option [id]="option.id" [label]="option.name" />
</ng-template>
<ng-template #selectedTemplate></ng-template>
</pi-select-period>
<pi-select-carousel
[formField]="f.plan"
keyIdProperty="id"
[options]="plans"
[itemsDesktop]="3"
[device]="device"
>
<ng-template #optionTemplate let-option>
<pi-select-option
[id]="option.id"
[label]="option.name"
[description]="option.description"
flexDirection="column"
/>
</ng-template>
<ng-template #selectedTemplate></ng-template>
</pi-select-carousel>
</div>
</app-section>
<app-section
title="Modal y notificaciones"
hint="pi-modal y pi-snack-bar no se usan como etiquetas: se abren desde TypeScript vía MatDialog y NotificationService."
>
<button pi-primary (click)="openDemoModal()">Abrir modal</button>
<button pi-outline (click)="showSuccessNotification()">
Notificación de éxito
</button>
<button pi-outline (click)="showErrorNotification()">
Notificación de error
</button>
</app-section>
<app-section title="Data grid">
<div class="stack full">
<pi-data-grid
[data]="employees"
[columns]="3"
[rows]="1"
[index]="0"
[isActive]="false"
mode="list"
dataDirection="column"
(clickItem)="log('data-grid item')"
>
<ng-template #valuesTemplate let-value let-i="index">
<span pi-cell [index]="i">{{ value.name }} — {{ value.role }}</span>
</ng-template>
</pi-data-grid>
</div>
</app-section>
<app-section title="Data table">
<div class="stack full">
<pi-base-data-table dataDirection="row" type="header">
<pi-data-table-item
heading="Concepto"
[values]="['Cliente', 'Importe', 'Fecha']"
>
<ng-template #item let-value="value">
<pi-cell-type type="text" [display]="value" />
</ng-template>
</pi-data-table-item>
</pi-base-data-table>
@for (row of invoiceRows; track row) {
<pi-base-data-table dataDirection="row" type="data">
<pi-data-table-item [values]="row">
<ng-template #item let-value="value" let-i="index">
<pi-cell-type
[type]="i === 1 ? 'amount' : 'text'"
[display]="value"
/>
</ng-template>
</pi-data-table-item>
</pi-base-data-table>
}
</div>
</app-section>
<app-section title="Chart">
<div class="stack full">
<pi-chart
type="line"
[device]="device"
[xAxisMarks]="['Ene', 'Feb', 'Mar', 'Abr']"
[datasets]="chartDatasets"
/>
</div>
</app-section>
<app-section title="Carousel">
<div class="stack full">
<pi-carousel
[itemsDesktop]="3"
[itemsTablet]="2"
[itemsMobile]="1"
[hideSwipeButtons]="false"
[device]="device"
color="primary"
(itemChanged)="log('carousel ' + $event)"
>
@for (item of carouselItems; track item.id) {
<ng-template pi-carousel-item>
<div class="demo-card">{{ item.label }}</div>
</ng-template>
}
</pi-carousel>
</div>
</app-section>
<app-section
title="Stepper"
hint="Cubre WrapperTypeClass.Steps, que estaba declarado sin componente ni CSS."
>
<div class="stack full">
<pi-stepper
#stepper
[steps]="steps"
[(selectedIndex)]="stepperIndex"
(stepChange)="log('paso ' + $event)"
/>
<div class="inline">
<button pi-ghost small (click)="stepper.previous()">Anterior</button>
<button pi-ghost small (click)="stepper.next()">Siguiente</button>
</div>
</div>
</app-section>
<app-section
title="Dynamic menu"
hint="ComponentFamilyClass ya declaraba la familia dynamic-menu y util/menu traía la clase base; faltaba el componente."
>
<div class="stack full">
<pi-dynamic-menu
label="Navegación"
[menuItems]="menuEntries"
(selectEntry)="log('menú: ' + $any($event).label)"
/>
</div>
</app-section>
<app-section
title="Skeleton"
hint="Resuelve el TODO que quedaba en pi-data-grid; también es el respaldo cuando no se pasa plantilla."
>
<div class="stack full">
<pi-skeleton [lines]="3" />
<pi-skeleton shape="block" width="100%" height="4rem" />
<pi-skeleton shape="circle" width="3rem" />
</div>
</app-section>
<app-section
@@ -130,5 +593,14 @@
(changePage)="log('página ' + $event)"
/>
</app-section>
<app-section
title="Página no encontrada"
hint="pi-not-found: página completa (pi-headline + botón volver), no un widget en línea."
>
<div class="not-found-frame">
<pi-not-found />
</div>
</app-section>
</div>
</main>

63
apps/playground/src/app/pages/catalog/catalog.page.scss
View File

@@ -1,36 +1,16 @@
:host {
display: block;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.page-header {
margin-bottom: 2rem;
h1 {
margin: 0;
font-size: 2rem;
font-weight: 700;
color: #5c82e9;
}
p {
margin: 0.5rem 0 0;
color: #6b7280;
max-width: 60ch;
}
.event {
.event {
display: inline-block;
margin-top: 0.75rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: #eef2ff;
color: #4c5fd7;
background: var(--pg-badge-bg);
color: var(--pg-badge-text);
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
}
}
main {
@@ -67,16 +47,47 @@ main {
.state {
margin: 0;
font-size: 0.85rem;
color: #374151;
color: var(--pg-state-text);
}
pre {
margin: 0;
padding: 0.9rem;
border-radius: 8px;
background: #0f172a;
color: #cbd5f5;
background: var(--pg-code-bg);
color: var(--pg-code-text);
font-size: 0.78rem;
line-height: 1.5;
overflow-x: auto;
}
.range-slider-caption {
display: flex;
flex-direction: column;
gap: 0.35rem;
width: 100%;
> span {
font-size: 0.75rem;
color: var(--pg-text-muted);
}
}
.demo-card {
display: flex;
align-items: center;
justify-content: center;
height: 4rem;
border-radius: 8px;
background: var(--pg-badge-bg);
color: var(--pg-badge-text);
font-size: 0.85rem;
}
.not-found-frame {
width: 100%;
max-height: 22rem;
overflow: auto;
border: 1px dashed var(--pg-card-border);
border-radius: 8px;
}

323
apps/playground/src/app/pages/catalog/catalog.page.ts
View File

@@ -1,4 +1,9 @@
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
inject,
signal,
} from '@angular/core';
import {
FormField,
email,
@@ -7,43 +12,118 @@ import {
min,
required,
} from '@angular/forms/signals';
import { MatDialog } from '@angular/material/dialog';
import {
PiAccordionComponent,
PiAccordionItemContentDirective,
PiAccordionItemDirective,
PiActionButtonComponent,
PiBannerComponent,
PiBaseDataTableComponent,
PiCardBottomContentDirective,
PiCardCenterContentDirective,
PiCardComponent,
PiCardTopContentDirective,
PiCarouselComponent,
PiCarouselItemDirective,
PiCellDirective,
PiCellTypeComponent,
PiChartComponent,
PiChevronButtonComponent,
PiChipActionComponent,
PiChipComponent,
PiChipDateComponent,
PiChipStatusComponent,
PiChipTimeComponent,
PiChipValueComponent,
PiCloseButtonComponent,
PiColorPrimaryDirective,
PiCurrencyFieldComponent,
PiDataGridComponent,
PiDataTableItemComponent,
Dataset,
DatasetColor,
Device,
PiDividerComponent,
PiEmailFieldComponent,
PiExpansionPanelComponent,
PiGhostButtonDirective,
PiHamburgerComponent,
PiHeadlineComponent,
PiHeadlineDescriptionContentDirective,
PiHeadlineLabelContentDirective,
PiIconButtonComponent,
PiIconComponent,
PiIconFieldComponent,
PiIncrementalNumberFieldComponent,
PiIncrementalRangeFieldComponent,
PiLabelDirective,
PiLargeButtonDirective,
PiListItemComponent,
PiListItemLeftContentDirective,
PiListItemLeftIconDirective,
PiListItemRightContentDirective,
PiListItemRightIconDirective,
ModalConfigKeys,
ModalStyleType,
ModalType,
NotificationService,
PiModalComponent,
PiNoteActionContentDirective,
PiNoteComponent,
PiNotFoundComponent,
getModalConfigs,
PiNumberFieldComponent,
PiOutlineButtonDirective,
PiPaginatorComponent,
PiPanelBottomContentDirective,
PiPanelCenterContentDirective,
PiPanelComponent,
PiPanelExpandableContentDirective,
PiPasswordFieldComponent,
PiPhoneFieldComponent,
PiProgressBarComponent,
PiRadioButtonComponent,
PiRange,
PiRangeSliderComponent,
PiSearchFieldComponent,
PiSelectCarouselComponent,
PiSelectComponent,
PiSelectMultipleComponent,
PiSelectOptionComponent,
PiSelectPeriodComponent,
PiSlideToggleComponent,
PiSliderComponent,
PiSmallButtonDirective,
PiProgressSpinnerComponent,
PiSwitchButtonComponent,
PiTabComponent,
PiTabContentDirective,
TabButton,
PiTextFieldComponent,
PiTextViewerComponent,
PiTextareaComponent,
PiTileComponent,
PiToggleButtonComponent,
PiTooltipDirective,
PiW100ButtonDirective,
PiCheckboxComponent,
PiRadioGroupComponent,
PiDateFieldComponent,
PiFileUploadComponent,
PiDynamicMenuComponent,
PiSkeletonComponent,
PiStepperComponent,
} from '@pi/ui';
import { ShowcaseSection } from './showcase-section';
import { ShowcaseSection } from '../showcase-section';
interface SelectOptionValue {
id: number;
name: string;
description?: string;
}
interface DemoModel {
name: string;
@@ -57,13 +137,26 @@ interface DemoModel {
volume: number;
newsletter: boolean;
search: string;
website: string;
phone: string;
weight: number | null;
priceRange: PiRange;
contactEmail: string;
country: SelectOptionValue | null;
tags: SelectOptionValue[];
period: SelectOptionValue | null;
plan: SelectOptionValue | null;
terms: boolean;
shipping: string | null;
birthDate: Date | null;
attachments: File[];
}
@Component({
selector: 'app-root',
selector: 'app-catalog',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './app.html',
styleUrl: './app.scss',
templateUrl: './catalog.page.html',
styleUrl: './catalog.page.scss',
imports: [
FormField,
ShowcaseSection,
@@ -75,10 +168,14 @@ interface DemoModel {
PiIconButtonComponent,
PiGhostButtonDirective,
PiOutlineButtonDirective,
PiColorPrimaryDirective,
PiLabelDirective,
PiLargeButtonDirective,
PiSmallButtonDirective,
PiW100ButtonDirective,
PiRadioButtonComponent,
PiSwitchButtonComponent,
PiToggleButtonComponent,
// Contenido
PiIconComponent,
PiTextViewerComponent,
@@ -87,6 +184,19 @@ interface DemoModel {
PiChipStatusComponent,
PiChipValueComponent,
PiChipActionComponent,
PiChipTimeComponent,
PiChipDateComponent,
PiTileComponent,
PiHeadlineComponent,
PiHeadlineLabelContentDirective,
PiHeadlineDescriptionContentDirective,
PiListItemComponent,
PiListItemLeftIconDirective,
PiListItemLeftContentDirective,
PiListItemRightContentDirective,
PiListItemRightIconDirective,
PiTooltipDirective,
PiNotFoundComponent,
// Feedback
PiProgressSpinnerComponent,
PiProgressBarComponent,
@@ -102,9 +212,54 @@ interface DemoModel {
PiSearchFieldComponent,
PiSlideToggleComponent,
PiSliderComponent,
PiRangeSliderComponent,
PiIconFieldComponent,
PiPhoneFieldComponent,
PiNumberFieldComponent,
// Contenedores
PiCardComponent,
PiCardTopContentDirective,
PiCardCenterContentDirective,
PiCardBottomContentDirective,
PiPanelComponent,
PiPanelCenterContentDirective,
PiPanelBottomContentDirective,
PiExpansionPanelComponent,
PiPanelExpandableContentDirective,
PiAccordionComponent,
PiAccordionItemDirective,
PiAccordionItemContentDirective,
PiTabComponent,
PiTabContentDirective,
PiBannerComponent,
PiNoteComponent,
PiNoteActionContentDirective,
// Selects
PiSelectComponent,
PiSelectMultipleComponent,
PiSelectPeriodComponent,
PiSelectCarouselComponent,
PiSelectOptionComponent,
// Datos
PiDataGridComponent,
PiCellDirective,
PiBaseDataTableComponent,
PiDataTableItemComponent,
PiCellTypeComponent,
PiChartComponent,
PiCarouselComponent,
PiCarouselItemDirective,
// Componentes nuevos
PiCheckboxComponent,
PiRadioGroupComponent,
PiDateFieldComponent,
PiFileUploadComponent,
PiDynamicMenuComponent,
PiSkeletonComponent,
PiStepperComponent,
],
})
export class App {
export class CatalogPage {
/* --- Signal Forms ----------------------------------------------------- */
private readonly model = signal<DemoModel>({
@@ -119,6 +274,19 @@ export class App {
volume: 40,
newsletter: false,
search: '',
website: '',
phone: '',
weight: null,
priceRange: { from: 20, to: 80 },
contactEmail: '',
country: null,
tags: [],
period: null,
plan: null,
terms: false,
shipping: null,
birthDate: null,
attachments: [],
});
protected readonly f = form(this.model, (m) => {
@@ -131,12 +299,155 @@ export class App {
/** Se muestra en el panel lateral para ver el modelo en vivo. */
protected readonly modelJson = () => JSON.stringify(this.model(), null, 2);
protected readonly countries = [
{ id: 1, name: 'España' },
{ id: 2, name: 'Portugal' },
{ id: 3, name: 'Francia' },
];
protected readonly tags = [
{ id: 1, name: 'Urgente' },
{ id: 2, name: 'Facturación' },
{ id: 3, name: 'Soporte' },
{ id: 4, name: 'Ventas' },
];
protected readonly plans = [
{ id: 1, name: 'Básico', description: '9 €/mes' },
{ id: 2, name: 'Pro', description: '29 €/mes' },
{ id: 3, name: 'Empresas', description: '99 €/mes' },
];
/**
* Los campos ya calculan sus errores en cuanto se marcan como `touched`
* (así lo exige `ErrorStateMatcher` de Material); antes de eso el usuario
* no ha interactuado y no tiene sentido mostrarlos. Este botón simula el
* envío del formulario para revelarlos todos de golpe.
*/
protected submitForm(): void {
this.f().markAsTouched();
this.log('formulario enviado');
}
/* --- Estado de los demás componentes ---------------------------------- */
protected readonly currentPage = signal(1);
protected readonly lastEvent = signal('—');
protected readonly radioActive = signal(false);
protected readonly switchActive = signal(true);
protected readonly toggleActive = signal(false);
protected readonly isPanelCollapsed = signal(false);
protected readonly expandedAccordionIndex = signal<number | null>(0);
protected readonly tabs: TabButton[] = [
{ label: 'General' },
{ label: 'Facturación', icon: 'euro' },
{ label: 'Avanzado', isDisabled: true },
];
protected readonly shippingOptions = [
{ value: 'standard', label: 'Estándar (3-5 días)' },
{ value: 'express', label: 'Exprés (24 h)' },
{ value: 'pickup', label: 'Recoger en tienda', disabled: true },
];
protected readonly stepperIndex = signal(1);
protected readonly steps = [
{ label: 'Cuenta', description: 'Datos de acceso' },
{ label: 'Perfil', description: 'Información personal' },
{ label: 'Pago', description: 'Método de cobro' },
];
protected readonly menuEntries = [
{ label: 'Panel', icon: 'dashboard', isActive: true },
{
label: 'Operaciones',
icon: 'briefcase',
entries: [
{ label: 'En curso', icon: 'time-detail' },
{ label: 'Cerradas', icon: 'check' },
],
},
{ label: 'Ajustes', icon: 'user', isDisabled: true },
];
protected log(what: string): void {
this.lastEvent.set(`${what} · ${new Date().toLocaleTimeString('es-ES')}`);
}
/* --- Modal y notificaciones --------------------------------------------- */
/**
* `pi-modal` y `pi-snack-bar` no se usan como etiquetas en una plantilla:
* viven detrás de `MatDialog`/`MatSnackBar` y se abren desde TypeScript.
*/
private readonly dialog = inject(MatDialog);
private readonly notification = inject(NotificationService);
protected openDemoModal(): void {
this.dialog.open(
PiModalComponent,
getModalConfigs(ModalConfigKeys.Small, {
type: ModalType.DIALOG,
pathImg: '404.svg',
label: 'Confirmar acción',
description: '¿Seguro que quieres continuar?',
style: ModalStyleType.PRIMARY,
buttonText: { primaryAction: 'Aceptar', secondaryAction: 'Cancelar' },
}),
);
this.log('modal abierto');
}
protected showSuccessNotification(): void {
this.notification.success(
'Guardado correctamente',
'Los cambios ya están disponibles',
);
}
protected showErrorNotification(): void {
this.notification.error(
'Ha ocurrido un error',
'Inténtalo de nuevo más tarde',
);
}
/* --- Datos: grid, tabla, gráfico, carrusel ------------------------------ */
protected readonly employees = [
{ name: 'Ana López', role: 'Diseño' },
{ name: 'Luis Marín', role: 'Backend' },
{ name: 'Marta Ruiz', role: 'Ventas' },
];
protected readonly invoiceRows = [
['Ana López', '150,00 €', '12/07/2026'],
['Luis Marín', '89,50 €', '15/07/2026'],
];
protected readonly device: Device = 'DESKTOP';
protected readonly chartDatasets: Dataset[] = [
{
label: 'Ingresos',
data: [120, 190, 150, 220],
borderColor: DatasetColor.primary,
backgroundColor: DatasetColor.primary,
cubicInterpolationMode: 'monotone',
unit: ' €',
unitPosition: 'after',
},
];
protected readonly carouselItems = [
{ id: 1, label: 'Elemento 1' },
{ id: 2, label: 'Elemento 2' },
{ id: 3, label: 'Elemento 3' },
{ id: 4, label: 'Elemento 4' },
{ id: 5, label: 'Elemento 5' },
{ id: 6, label: 'Elemento 6' },
];
}

82
apps/playground/src/app/pages/layouts/layouts.page.html Normal file
View File

@@ -0,0 +1,82 @@
<app-section
title="Cómo se usan"
hint="El layout es una clase en el contenedor de la vista, normalmente vía @HostBinding('class') con una constante de LayoutTypeClass. Casi todos esperan un .pi-container-layout como padre."
>
<pre class="snippet">
&#64;Component({{ '{' }} ... {{ '}' }})
export class MiVista {{ '{' }}
&#64;HostBinding('class') cls = LayoutTypeClass.VerticallyCentered;
{{ '}' }}</pre>
</app-section>
<app-section
title="Autónomos"
hint="Su CSS actúa sobre el propio contenedor, así que se ven con bloques sueltos. Las vistas van recortadas porque algunos se dimensionan en vh."
>
<label class="clip-toggle">
<input
type="checkbox"
[checked]="clipped()"
(change)="clipped.set($any($event.target).checked)"
/>
<span>Recortar vistas previas</span>
</label>
</app-section>
@for (layout of standalone; track layout.classes) {
<app-section [title]="layout.name" [hint]="layout.description">
<div class="demo">
<code class="demo__classes">{{ layout.classes }}</code>
<div class="demo__frame" [class.is-clipped]="clipped()">
<div class="pi-container-layout">
<div [class]="layout.classes">
@for (block of layout.blocks; track block) {
<div class="demo__block">{{ block }}</div>
}
</div>
</div>
</div>
</div>
</app-section>
}
<app-section
title="Dependen de composición"
hint="Estos no cambian nada con bloques sueltos: su CSS apunta a los componentes de wrapper o a estados del shell. Se listan con lo que necesitan alrededor para hacer algo."
>
<div class="needs">
@for (layout of compositional; track layout.classes) {
<div class="needs__item">
<strong>{{ layout.name }}</strong>
<code>{{ layout.classes }}</code>
<p>{{ layout.needs }}</p>
</div>
}
</div>
</app-section>
<app-section
title="Alturas"
hint="Se combinan con cualquier layout para fijar una altura mínima. Hay variantes por dispositivo con heights(mobile, tablet, desktop)."
>
<div class="heights">
@for (h of heights; track h.cls) {
<div class="heights__item">
<code>{{ h.cls }}</code>
<span>{{ h.hint }}</span>
</div>
}
</div>
</app-section>
<app-section
title="Sin CSS en la capa genérica"
hint="Siguen expuestos en LayoutTypeClass, pero su CSS eran composiciones de app (estados del aside, tipos de usuario) que vivían en la carpeta de marca y no se han traído a common/."
>
<div class="missing">
<code>pi-layout__00-authentication</code>
<code>pi-layout__01-dashboard</code>
<code>pi-layout__05a-splitted-paywall</code>
</div>
</app-section>

125
apps/playground/src/app/pages/layouts/layouts.page.scss Normal file
View File

@@ -0,0 +1,125 @@
:host {
display: block;
}
.snippet {
margin: 0;
padding: 0.9rem;
border-radius: 8px;
background: var(--pg-code-bg);
color: var(--pg-code-text);
font-size: 0.78rem;
line-height: 1.5;
overflow-x: auto;
}
.clip-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--pg-text-muted);
cursor: pointer;
}
.demo {
display: flex;
flex-direction: column;
gap: 0.6rem;
width: 100%;
&__classes {
align-self: flex-start;
padding: 0.15rem 0.5rem;
border-radius: 4px;
background: var(--pg-badge-bg);
color: var(--pg-badge-text);
font-size: 0.75rem;
}
// Marco que aísla la vista previa: el layout real se dimensiona dentro.
&__frame {
width: 100%;
border: 1px dashed var(--pg-card-border);
border-radius: 8px;
overflow: auto;
resize: vertical;
&.is-clipped {
max-height: 16rem;
}
}
&__block {
display: flex;
align-items: center;
justify-content: center;
min-height: 3rem;
padding: 0.75rem;
border-radius: 6px;
background: var(--pg-badge-bg);
color: var(--pg-badge-text);
font-size: 0.8rem;
// Marca los huecos que reparte el layout.
outline: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
}
.heights,
.missing {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
code {
padding: 0.2rem 0.55rem;
border-radius: 4px;
background: var(--pg-badge-bg);
color: var(--pg-badge-text);
font-size: 0.78rem;
}
}
.heights__item {
display: flex;
align-items: center;
gap: 0.5rem;
span {
font-size: 0.75rem;
color: var(--pg-text-muted);
}
}
.needs {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
&__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
padding-left: 0.75rem;
border-left: 2px solid var(--pg-card-border);
strong {
font-size: 0.9rem;
}
code {
padding: 0.15rem 0.5rem;
border-radius: 4px;
background: var(--pg-badge-bg);
color: var(--pg-badge-text);
font-size: 0.75rem;
}
p {
margin: 0;
font-size: 0.82rem;
color: var(--pg-text-muted);
max-width: 70ch;
}
}
}

117
apps/playground/src/app/pages/layouts/layouts.page.ts Normal file
View File

@@ -0,0 +1,117 @@
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { LayoutHeight, LayoutTypeClass } from '@pi/ui';
import { ShowcaseSection } from '../showcase-section';
interface LayoutDemo {
/** Nombre corto para el título del apartado. */
name: string;
/** Constante de `LayoutTypeClass`, tal cual se aplica en el HostBinding. */
classes: string;
/** Qué hace realmente el CSS de este layout. */
description: string;
/** Bloques de relleno que se pintan dentro de la vista previa. */
blocks: string[];
}
@Component({
selector: 'app-layouts',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './layouts.page.html',
styleUrl: './layouts.page.scss',
imports: [ShowcaseSection],
})
export class LayoutsPage {
/**
* Layouts que se sostienen solos: su CSS actúa sobre el propio contenedor,
* así que la vista previa con bloques sueltos ya enseña lo que hacen.
*/
protected readonly standalone: LayoutDemo[] = [
{
name: 'Vertically centered',
classes: LayoutTypeClass.VerticallyCentered,
description:
'Columna flex centrada verticalmente (justify-content: center). Típico de login, errores o estados vacíos.',
blocks: ['Bloque centrado'],
},
{
name: 'Space between',
classes: LayoutTypeClass.SpaceBetween,
description:
'Columna flex con justify-content: space-between: empuja el primer bloque arriba y el último abajo.',
blocks: ['Cabecera', 'Pie'],
},
{
name: 'Full width auto',
classes: LayoutTypeClass.FullWidthAuto,
description:
'Añade margin: auto sobre el full width, para centrar el bloque cuando no ocupa todo el ancho.',
blocks: ['Contenido centrado'],
},
{
name: 'Pricing',
classes: LayoutTypeClass.Pricing,
description:
'Rejilla de 3 columnas (repeat(3, 1fr)) para tarifas; tiene variante 1fr 3fr con tarjeta destacada.',
blocks: ['Básico', 'Pro', 'Empresas'],
},
];
/**
* Estos no se pueden enseñar con bloques sueltos: su CSS apunta a los
* componentes de wrapper o a estados del shell de la aplicación, así que
* fuera de esa composición no cambian nada visible.
*/
protected readonly compositional = [
{
name: 'Full width',
classes: LayoutTypeClass.FullWidth,
needs:
'Un ancestro con `aside-is-open`: los anchos máximos se calculan a partir del aside y el navbar.',
},
{
name: 'Splitted',
classes: LayoutTypeClass.Splitted,
needs:
'No parte en dos por sí solo: es una columna a 100vh y las mitades las aportan los slots izquierdo/derecho de `pi-main-wrapper`.',
},
{
name: 'Edge to edge',
classes: LayoutTypeClass.EdgeToEdge,
needs:
'Un `pi-wrapper__header` como hijo dentro de `.pi-container-layout`: lo que ajusta es su espaciado superior.',
},
{
name: 'List',
classes: LayoutTypeClass.List,
needs:
'Wrappers (`pi-wrapper`, `pi-wrapper__list`) y un `pi-data-grid`: limita sus anchos y centra la rejilla.',
},
{
name: 'List auto',
classes: LayoutTypeClass.ListAuto,
needs: 'Igual que List, para listados con scroll infinito.',
},
{
name: 'Form',
classes: LayoutTypeClass.Form,
needs:
'Ir anidado dentro de un `pi-layout__05-splitted`: solo ahí recibe padding y scrollbar propios.',
},
];
/** Alturas mínimas, aplicables sobre cualquier layout. */
protected readonly heights = [
{ label: 'small', cls: LayoutHeight.Small, hint: '33.33vh' },
{ label: 'medium', cls: LayoutHeight.Medium, hint: '40vh' },
{ label: 'large', cls: LayoutHeight.Large, hint: '75vh' },
{ label: 'full', cls: LayoutHeight.Full, hint: '100vh' },
];
/**
* Las vistas previas van recortadas: varios layouts piden `vh` y ocuparían
* pantallas enteras. Se puede soltar el recorte para verlos a tamaño real.
*/
protected readonly clipped = signal(true);
}

10
apps/playground/src/app/pages/showcase-section.ts
View File

@@ -17,14 +17,14 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
`,
styles: `
section {
background: #fff;
border: 1px solid #e7e9ee;
background: var(--pg-card-bg);
border: 1px solid var(--pg-card-border);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
header {
border-bottom: 1px solid #eef0f4;
border-bottom: 1px solid var(--pg-card-header-border);
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
}
@@ -34,12 +34,12 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #5c82e9;
color: var(--pg-heading);
}
p {
margin: 0.35rem 0 0;
font-size: 0.85rem;
color: #6b7280;
color: var(--pg-text-muted);
}
.content {
display: flex;

5
apps/playground/src/index.html
View File

@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" class="is-desktop">
<head>
<meta charset="utf-8" />
<title>playground</title>
@@ -7,7 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Valor inicial; App lo reescribe según el tema elegido (ver ShellClass). -->
<body class="pi-shell pi-shell__default">
<app-root></app-root>
</body>
</html>

96
apps/playground/src/styles.scss
View File

@@ -13,6 +13,14 @@
@use '../../../libs/ui/src/lib/styles/common/components' as *;
@use '../../../libs/ui/src/lib/styles/common/layouts' as *;
@use '../../../libs/ui/src/lib/styles/common/wrappers' as *;
// Overrides de Material (campos, checkbox, diálogos, sliders, menús...). Es lo
// que hace que los componentes se vean «pi» y no Material de serie; el
// `@import` de `@typeform/embed` que estorbaba está en `common/index.scss`, no
// aquí, así que este partial sí se puede cargar.
@use '../../../libs/ui/src/lib/styles/common/vendors' as *;
// Capa de temas: declara los tokens --pi-theme-* que consume `common/`.
// Va después de `common` para que sus overrides ganen.
@use '../../../libs/ui/src/lib/styles/themes' as *;
html {
@include mat.theme(
@@ -27,6 +35,90 @@ html {
);
color-scheme: light;
// Chrome propio del playground (cabecera, tarjetas de sección, bloque de
// estado). Los componentes de @pi/ui usan --pi-color-*, sobrescritas más
// abajo para el modo oscuro.
--pg-page-bg: #f7f8fa;
--pg-page-text: #1c1c1e;
--pg-heading: #5c82e9;
--pg-text-muted: #6b7280;
--pg-badge-bg: #eef2ff;
--pg-badge-text: #4c5fd7;
--pg-card-bg: #fff;
--pg-card-border: #e7e9ee;
--pg-card-header-border: #eef0f4;
--pg-state-text: #374151;
--pg-code-bg: #0f172a;
--pg-code-text: #cbd5f5;
}
// Modo oscuro: se activa añadiendo la clase `dark-mode` al <html> (ver
// App.darkMode en apps/playground/src/app/app.ts). @pi/ui no está diseñada
// con un tema oscuro propio, así que esto es una reasignación best-effort de
// sus variables --pi-color-* neutras (blancos/negros/grises/fondos); las
// paletas de marca (primary/accent/warn/success/highlighted) se mantienen
// igual y pueden perder algo de contraste en algunos componentes.
html.dark-mode {
@include mat.theme(
(
color: (
theme-type: dark,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: Roboto,
density: 0,
)
);
color-scheme: dark;
--pg-page-bg: #14161a;
--pg-page-text: #e5e7eb;
--pg-heading: #8cacf2;
--pg-text-muted: #9aa1ac;
--pg-badge-bg: #1f2a4d;
--pg-badge-text: #b9c4ff;
--pg-card-bg: #1c1f26;
--pg-card-border: #2a2f3a;
--pg-card-header-border: #262b35;
--pg-state-text: #cbd2db;
--pg-code-bg: #0a0d16;
--pg-code-text: #cbd5f5;
// --- @pi/ui: neutros -------------------------------------------------
--pi-color-white: #1c1f26;
--pi-color-white-900: #252932;
--pi-color-black: #f1f2f4;
--pi-color-black-200: #c7cbd4;
--pi-color-grey-10: #111318;
--pi-color-grey-25: #161920;
--pi-color-grey-50: #1b1e26;
--pi-color-grey-75: #20232c;
--pi-color-grey-100: #2a2e38;
--pi-color-grey-200: #3a3f4b;
--pi-color-grey-300: #565c6b;
--pi-color-grey-400: #7a8190;
--pi-color-grey: #9aa1ac;
--pi-color-grey-900: #e4e6ea;
--pi-color-background-300: #4b505c;
--pi-color-background-400: #1c1f26;
--pi-color-background-500: #181b22;
}
// El tema alternativo usa escalones claros de su marca como superficie de los
// campos (`--pi-theme-field-surface`). Como el bloque de arriba solo reasigna
// neutros, en oscuro esos campos se quedaban en claro: aquí se oscurecen los
// pocos escalones que actúan de superficie, manteniendo el tinte violeta.
html.dark-mode .pi-shell__alternative {
--pi-color-primary-10: #16131f;
--pi-color-primary-25: #1a1626;
--pi-color-primary-50: #201a30;
--pi-color-primary-75: #2a2140;
--pi-color-primary-100: #3a2d5c;
}
body {
@@ -36,6 +128,6 @@ body {
system-ui,
-apple-system,
sans-serif;
background: #f7f8fa;
color: #1c1c1e;
background: var(--pg-page-bg);
color: var(--pg-page-text);
}

41
libs/ui/src/index.ts
View File

@@ -9,11 +9,17 @@ export * from './lib/util/common';
export * from './lib/util/dato-cms';
export * from './lib/util/device-configs';
export * from './lib/util/environments';
export * from './lib/util/form-control';
export * from './lib/util/icon-registry';
export * from './lib/util/infinite-scroll';
// ./lib/util/list-configs: omitido(s) por colisión con otro módulo -> featureKey, getFeatureState, initialState
export { getListMode, ListConfigsFacade, listConfigsReducer, ListModeActionsType, resetListMode, setListMode } from './lib/util/list-configs';
export {
getListMode,
ListConfigsFacade,
listConfigsReducer,
ListModeActionsType,
resetListMode,
setListMode,
} from './lib/util/list-configs';
export type { ListConfigsState, ListMode } from './lib/util/list-configs';
export * from './lib/util/loaders';
export * from './lib/util/local-storage';
@@ -40,10 +46,12 @@ export * from './lib/ui/data-grid';
export * from './lib/ui/data-table';
export * from './lib/ui/divider';
export * from './lib/ui/error-status-code';
export * from './lib/ui/file-upload';
export * from './lib/ui/form-field';
export * from './lib/ui/icon';
export * from './lib/ui/image';
export * from './lib/ui/list-item';
export * from './lib/ui/menu';
export * from './lib/ui/modal';
export * from './lib/ui/note';
export * from './lib/ui/notification';
@@ -51,11 +59,36 @@ export * from './lib/ui/paginator';
export * from './lib/ui/panel';
export * from './lib/ui/progress';
export * from './lib/ui/select';
// ./lib/ui/slide-toggle: omitido(s) por colisión con otro módulo -> PiSlideToggleComponent
export * from './lib/ui/slider';
export * from './lib/ui/spinner';
export * from './lib/ui/stepper';
export * from './lib/ui/tab';
// ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
export { PiBaseTextViewerComponent, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
export {
PiBaseTextViewerComponent,
PiTextAreaExpansionComponent,
PiTextCenteredDirective,
PiTextColorDirective,
PiTextCoveredDirective,
PiTextGroupDirective,
PiTextGroupIndicatorDirective,
PiTextLargeDirective,
PiTextLetterSpacingDirective,
PiTextMediumDirective,
PiTextSizeDirective,
PiTextSmallDirective,
PiTextViewerComponent,
PiTextViewerLinkComponent,
PiTextWeightBlackDirective,
PiTextWeightBoldDirective,
PiTextWeightLightDirective,
PiTextWeightMediumDirective,
PiTextWeightNormalDirective,
PiTextXLargeDirective,
PiTextXSmallDirective,
PiTextXXLargeDirective,
PiTextXXSmallDirective,
PiTextXXXLargeDirective,
} from './lib/ui/text';
export * from './lib/ui/tooltip';
export * from './lib/ui/wrapper';

12
libs/ui/src/lib/styles/common/base/_pi-reset.scss
View File

@@ -538,7 +538,17 @@ template {
button,
.pi-input,
[class*='mat-'] {
// `[class*='mat-']` alcanza a cualquier elemento de Angular Material. Hay que
// excluir los que forman tabla: el datepicker monta el calendario con una
// `<table>` real, y forzarla a `display: block` le quita el contexto de
// formato de tabla y colapsa la rejilla de días en una sola columna.
//
// La exclusión va dentro de `:where()` a propósito: `:where()` no aporta
// especificidad, así que la regla sigue valiendo (0,1,0) como antes. Con un
// `:not(table):not(tr)...` normal subiría a (0,1,7) y pasaría a ganarle a
// reglas de Material que hasta ahora respetaba (los afijos de icono de los
// campos, entre otras).
[class*='mat-']:not(:where(table, thead, tbody, tfoot, tr, th, td)) {
display: block;
}

6
libs/ui/src/lib/styles/common/components/_pi-card.scss
View File

@@ -290,7 +290,7 @@
justify-content: space-between;
width: -webkit-fill-available;
padding: var(--pi-spacing-xx-large);
border-radius: var(--pi-border-radius-large);
border-radius: var(--pi-theme-card-radius);
transition: var(--pi-animation);
&:hover {
@@ -318,7 +318,7 @@
// Has Shadow
&.has-shadow {
box-shadow: var(--pi-box-shadow-panel);
box-shadow: var(--pi-theme-card-shadow, var(--pi-box-shadow-panel));
}
&:not(.has-shadow) {
box-shadow: none;
@@ -505,7 +505,7 @@
}
}
.pi-shell__deale-website,
// Solo la API `context` de `pi-card`; el tema ya viaja por tokens.
.is-public {
.pi-card {
// Color

2
libs/ui/src/lib/styles/common/components/_pi-note.scss
View File

@@ -8,7 +8,7 @@
$min-width: auto
) {
.pi-shell {
&.pi-shell__deale-saas {
&.pi-shell__default {
& > div {
&.has-bottom-sticky-note {
& > section {

2
libs/ui/src/lib/styles/common/components/_pi-text.scss
View File

@@ -71,7 +71,7 @@
}
}
.pi-shell__deale-saas {
.pi-shell__default {
h3 {
font: {
size: var(--pi-font-size-medium);

78
libs/ui/src/lib/styles/common/components/pi-button/_pi-button-fixed.scss Normal file
View File

@@ -0,0 +1,78 @@
// Posicionamiento fijo de botones flotantes (FAB). Es una utilidad de layout,
// no de tema: aplica igual en todos los shells.
@mixin fixedButtonSideSpacing(
$top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
$side-spacing: var(--pi-spacing-medium),
$bottom-left-spacing: calc(
var(--pi-spacing-medium) + env(safe-area-inset-bottom)
),
$bottom-right-spacing: calc(
5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)
)
) {
.pi-shell {
// Fixed
button,
.pi-icon-button,
.pi-action-button {
&.is-fixed {
position: fixed;
z-index: 999;
&.is-fixed--top-left,
&.is-fixed--top-right {
top: $top-spacing;
right: $side-spacing;
}
&.is-fixed--bottom-left {
bottom: $bottom-left-spacing;
left: $side-spacing;
}
&.is-fixed--bottom-right {
bottom: $bottom-right-spacing;
right: $side-spacing;
}
}
}
}
}
html,
.cdk-overlay-container {
// Mobile
&.is-mobile {
@include fixedButtonSideSpacing(
calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
var(--pi-spacing-medium),
calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
);
}
&.is-tablet {
&.is-tablet__small {
@include fixedButtonSideSpacing(
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
var(--pi-spacing-x-large),
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
calc(3.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
);
}
&.is-tablet__large {
@include fixedButtonSideSpacing(
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
var(--pi-spacing-x-large),
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
);
}
}
// Tablet & Desktop
&.is-desktop {
@include fixedButtonSideSpacing(
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
var(--pi-spacing-x-large),
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
);
}
}

71
libs/ui/src/lib/styles/common/components/pi-button/_pi-button-theme.scss
View File

@@ -1,11 +1,11 @@
@mixin privateButtonsSizes {
@mixin themeButtonsSizes {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
.pi-button__x-large
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
.pi-button__icon--single
) {
&:not(.pi-button__x-small):not(.pi-button__xx-small) {
height: var(--pi-spacing-xxx-large);
height: var(--pi-theme-button-height);
}
}
@@ -36,15 +36,22 @@
}
// Fill
@mixin privateButtonFillColor($color) {
@mixin themeButtonFillColor($color) {
// Default color
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
background-color: var(--pi-color-#{$color});
// Un tema puede inyectar aquí un degradado; por defecto es `none` y manda
// el `background-color` de arriba.
background-image: var(--pi-theme-button-fill-#{$color}, none);
box-shadow: var(--pi-theme-button-shadow);
color: var(--pi-color-white);
font-weight: var(--pi-theme-button-font-weight);
&:disabled {
background-color: var(--pi-color-#{$color}-200);
background-image: none;
box-shadow: none;
}
&:hover {
&:enabled {
@@ -64,7 +71,7 @@
}
// Ghost
@mixin privateButtonGhostColor($color) {
@mixin themeButtonGhostColor($color) {
color: var(--pi-color-#{$color});
&:hover {
&:enabled {
@@ -77,7 +84,7 @@
}
// Outline
@mixin privateButtonOutlineColor($color) {
@mixin themeButtonOutlineColor($color) {
background-color: transparent;
box-sizing: border-box;
transition: all 0.16s ease-in;
@@ -101,7 +108,7 @@
}
}
@mixin privateButtonsColors {
@mixin themeButtonsColors {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
@@ -134,20 +141,20 @@
// Fill
// Primary
&.pi-color__primary {
@include privateButtonFillColor(primary);
@include themeButtonFillColor(primary);
}
// Accent
&.pi-color__accent {
@include privateButtonFillColor(accent);
@include themeButtonFillColor(accent);
}
// Warn
&.pi-color__warn {
@include privateButtonFillColor(warn);
@include themeButtonFillColor(warn);
}
// Highlighted
&.pi-color__highlighted {
@include privateButtonFillColor(highlighted);
@include themeButtonFillColor(highlighted);
}
// Ghost
@@ -161,19 +168,19 @@
):not(.pi-color__black):not(.pi-color__highlighted):not(
.pi-color__grey
) {
@include privateButtonGhostColor(primary);
@include themeButtonGhostColor(primary);
}
// Ghost & Accent
&.pi-color__accent {
@include privateButtonGhostColor(accent);
@include themeButtonGhostColor(accent);
}
// Ghost & Warn
&.pi-color__warn {
@include privateButtonGhostColor(warn);
@include themeButtonGhostColor(warn);
}
// Ghost & Highlighted
&.pi-color__highlighted {
@include privateButtonGhostColor(Highlighted);
@include themeButtonGhostColor(Highlighted);
}
// Ghost & White
&.pi-color__white {
@@ -224,24 +231,24 @@
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__highlighted):not(.pi-color__black) {
@include privateButtonOutlineColor(primary);
@include themeButtonOutlineColor(primary);
}
// Outline & Accent
&.pi-color__accent {
@include privateButtonOutlineColor(accent);
@include themeButtonOutlineColor(accent);
}
// Outline & Warn
&.pi-color__warn {
@include privateButtonOutlineColor(warn);
@include themeButtonOutlineColor(warn);
}
// Outline & Highlighted
&.pi-color__highlighted {
@include privateButtonOutlineColor(highlighted);
@include themeButtonOutlineColor(highlighted);
}
&.pi-color__black {
@include privateButtonOutlineColor(grey);
@include themeButtonOutlineColor(grey);
}
// Outline & White
&.pi-color__white {
@@ -267,24 +274,30 @@
}
}
// Implementación única de los botones para todos los temas: lo que cambia
// entre uno y otro son los tokens `--pi-theme-button-*`, no estos selectores.
.pi-shell {
&.pi-shell__deale-saas {
.is-private {
button {
// Los `<button>` internos de Angular Material quedan fuera: el calendario del
// datepicker, por ejemplo, monta cada día como un `<button>` y el
// `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
// va en `:where()` para no alterar la especificidad de la regla.
button:not(:where([class*='mat-'])) {
// Colors
@include privateButtonsColors;
@include themeButtonsColors;
// Sizes
@include privateButtonsSizes;
}
}
@include themeButtonsSizes;
}
}
.cdk-overlay-container {
button {
// Los `<button>` internos de Angular Material quedan fuera: el calendario del
// datepicker, por ejemplo, monta cada día como un `<button>` y el
// `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
// va en `:where()` para no alterar la especificidad de la regla.
button:not(:where([class*='mat-'])) {
// Colors
@include privateButtonsColors;
@include themeButtonsColors;
// Sizes
@include privateButtonsSizes;
@include themeButtonsSizes;
}
}

22
libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss
View File

@@ -3,6 +3,10 @@
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
}
// Tematizable: ver `styles/themes/_default.scss`.
letter-spacing: var(--pi-theme-button-letter-spacing);
text-transform: var(--pi-theme-button-text-transform);
transition: var(--pi-theme-button-transition);
&:hover {
&:not(:disabled):not(.pi-button__toggle) {
cursor: pointer;
@@ -30,14 +34,14 @@
.pi-button__toggle
) {
&:not(.pi-button__x-small) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
-moz-border-radius: var(--pi-border-radius-medium);
border-radius: var(--pi-theme-button-radius);
-webkit-border-radius: var(--pi-theme-button-radius);
-moz-border-radius: var(--pi-theme-button-radius);
}
&.pi-button__x-small {
border-radius: 0.75rem;
-webkit-border-radius: 0.75rem;
-moz-border-radius: 0.75rem;
border-radius: min(0.75rem, var(--pi-theme-button-radius));
-webkit-border-radius: min(0.75rem, var(--pi-theme-button-radius));
-moz-border-radius: min(0.75rem, var(--pi-theme-button-radius));
}
}
@@ -138,7 +142,11 @@
}
html,
.cdk-overlay-container {
button {
// Los `<button>` internos de Angular Material quedan fuera: el calendario del
// datepicker, por ejemplo, monta cada día como un `<button>` y el
// `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
// va en `:where()` para no alterar la especificidad de la regla.
button:not(:where([class*='mat-'])) {
// Default properties
@include defaultButtonsProperties;

6
libs/ui/src/lib/styles/common/components/pi-button/index.scss
View File

@@ -1,3 +1,5 @@
@forward 'pi-button-private';
@forward 'pi-button-public';
// `theme` implementa los botones una sola vez para todos los temas (lo que
// varía son los tokens `--pi-theme-button-*`); `fixed` es utilidad de layout.
@forward 'pi-button-theme';
@forward 'pi-button-fixed';
@forward 'pi-button';

2
libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-02-full-width-layout.scss
View File

@@ -9,7 +9,7 @@
)
)
) {
.pi-shell__deale-saas {
.pi-shell {
& > div {
// Aside is open
&.aside-is-open {

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-02a-full-width-auto-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-02a-full-width-auto-layout.scss
View File

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-03-vertically-centered-layout.scss
View File

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-04-space-between-layout.scss
View File

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-05-splitted-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-05-splitted-layout.scss
View File

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-06-edge-to-edge-layout.scss
View File

10
libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-07-list-layout.scss
View File

@@ -61,7 +61,7 @@
}
@mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) {
.pi-shell__deale-saas {
.pi-shell {
& > div {
.pi-layout {
&.pi-layout__07-list {
@@ -75,7 +75,7 @@
@mixin paginatorWidth(
$width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
) {
.pi-shell__deale-saas {
.pi-shell {
& > div {
.pi-layout {
&.pi-layout__07-list {
@@ -88,7 +88,7 @@
}
}
.pi-shell__deale-saas {
.pi-shell {
& > div {
// Grid mode (Infinite scroll)
&.is-mode-grid {
@@ -111,7 +111,7 @@ html {
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-shell__deale-saas {
.pi-shell {
.pi-icon-button {
&.is-sticky {
position: absolute;
@@ -126,7 +126,7 @@ html {
}
// Small device
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
.pi-shell {
& > div {
.pi-layout {
&.pi-layout__07-list {

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-07a-list-auto-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-07a-list-auto-layout.scss
View File

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-08-form-layout.scss → libs/ui/src/lib/styles/common/layouts/_pi-08-form-layout.scss
View File

2
libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss
View File

@@ -3,7 +3,7 @@
$no-padding-width: 100%
) {
.pi-shell {
&.pi-shell__deale-website {
&.pi-shell__alternative {
.pi-container-layout {
.pi-layout {
&:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) {

11
libs/ui/src/lib/styles/common/layouts/index.scss
View File

@@ -1,3 +1,14 @@
// Tipos de layout genéricos. Estaban en `deale-saas/layouts` por herencia, pero
// no dependen de ninguna marca: solo de las variables globales de `abstracts`.
@forward 'pi-02-full-width-layout';
@forward 'pi-02a-full-width-auto-layout';
@forward 'pi-03-vertically-centered-layout';
@forward 'pi-04-space-between-layout';
@forward 'pi-05-splitted-layout';
@forward 'pi-06-edge-to-edge-layout';
@forward 'pi-07-list-layout';
@forward 'pi-07a-list-auto-layout';
@forward 'pi-08-form-layout';
@forward 'pi-09-pricing-layout';
@forward 'pi-container-layout';
@forward 'pi-layout';

49
libs/ui/src/lib/styles/common/vendors/_mat-datepicker.scss vendored Normal file
View File

@@ -0,0 +1,49 @@
// Datepicker
//
// El reset (`base/_pi-reset.scss`) declara `[class*='mat-'] { display: block }`.
// Ese selector empata en especificidad con las clases propias de Material
// (`.mat-calendar-controls`, etc.) y, al cargarse después, le gana: la
// cabecera del calendario pierde su `display: flex` y los controles se apilan.
//
// Aquí se devuelve el layout que Material necesita. Va en `vendors/` porque se
// carga tras `base/`, así que estas reglas mandan sin subir especificidad.
//
// La rejilla de días no hace falta tocarla: el reset ya excluye los elementos
// de tabla, que era lo que colapsaba el calendario a una sola columna.
.mat-datepicker-content {
// Cabecera: mes/año a la izquierda y flechas a la derecha.
.mat-calendar-controls {
display: flex;
align-items: center;
}
// Empuja las flechas al extremo opuesto del selector de periodo.
.mat-calendar-spacer {
flex: 1 1 auto;
}
// Los botones del calendario son `<button>`, que el reset también pasa a
// `block`; en línea vuelven a colocarse dentro de la fila de controles.
.mat-calendar-period-button,
.mat-calendar-previous-button,
.mat-calendar-next-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
// El contenido del selector de periodo (texto + flecha) también es flex.
.mat-calendar-period-button .mdc-button__label {
display: inline-flex;
align-items: center;
}
// Etiqueta solo para lectores de pantalla ("Comparison range"). Material la
// oculta, pero su clase contiene `mat-`, así que el reset la devolvía a
// `display: block` y aparecía como texto suelto bajo el calendario, además
// de ensanchar la celda y descuadrar la rejilla.
.mat-calendar-body-hidden-label {
display: none;
}
}

2
libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss vendored
View File

@@ -1,4 +1,4 @@
.pi-shell__deale-saas {
.pi-shell__default {
.mat-mdc-expansion-panel {
&:not([class*='mat-elevation-z']) {
box-shadow: unset;

22
libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss vendored
View File

@@ -13,7 +13,7 @@
[class*='mdc-notched-outline__'] {
max-width: unset;
width: var(--pi-spacing-small);
border-width: 1px;
border-width: var(--pi-theme-field-border-width);
}
}
@@ -45,10 +45,12 @@
}
.mdc-notched-outline__leading {
border-radius: 0.875rem 0 0 0.875rem;
border-radius: var(--pi-theme-field-radius) 0 0
var(--pi-theme-field-radius);
}
.mdc-notched-outline__trailing {
border-radius: 0 0.875rem 0.875rem 0;
border-radius: 0 var(--pi-theme-field-radius) var(--pi-theme-field-radius)
0;
}
.mat-mdc-form-field-label {
@@ -108,13 +110,14 @@
&:not(.mat-focused):not(.mat-form-field-invalid) {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-grey-200);
border-width: var(--pi-theme-field-border-width);
border-color: var(--pi-theme-field-border-color);
}
}
&:hover {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-grey-300);
border-color: var(--pi-theme-field-border-color-hover);
}
}
}
@@ -123,7 +126,7 @@
&.mat-focused {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-primary);
border-color: var(--pi-theme-field-border-color-focus);
}
}
}
@@ -221,7 +224,10 @@
}
&:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
.mdc-floating-label {
color: var(--pi-color-grey-300);
color: var(--pi-theme-field-label-color);
text-transform: var(--pi-theme-field-label-transform, none);
letter-spacing: var(--pi-theme-field-label-letter-spacing, normal);
font-weight: var(--pi-theme-field-label-weight, inherit);
}
}
&.mdc-text-field--invalid {
@@ -335,7 +341,7 @@
}
[class*='mdc-notched-outline__'] {
background-color: var(--pi-color-white);
background-color: var(--pi-theme-field-surface);
z-index: -99;
}

4
libs/ui/src/lib/styles/common/vendors/_ngx-slider.scss vendored
View File

@@ -1,5 +1,5 @@
.pi-shell__deale-saas,
.pi-shell__deale-website {
.pi-shell__default,
.pi-shell__alternative {
.ngx-slider {
& > .ngx-slider-pointer {
background-color: var(--pi-color-primary);

1
libs/ui/src/lib/styles/common/vendors/index.scss vendored
View File

@@ -1,6 +1,7 @@
@forward 'ch2-button';
@forward 'mat-checkbox';
@forward 'mat-chip';
@forward 'mat-datepicker';
@forward 'mat-dialog';
@forward 'mat-expansion-panel';
@forward 'mat-form-field';

6
libs/ui/src/lib/styles/common/wrappers/_pi-header-wrapper.scss
View File

@@ -113,7 +113,7 @@
html {
&.is-mobile {
.pi-shell {
&.pi-shell__deale-saas {
&.pi-shell__default {
@include headerWrapperHeight;
}
}
@@ -168,7 +168,7 @@ html {
// Tablet
&.is-tablet {
.pi-shell {
&.pi-shell__deale-saas {
&.pi-shell__default {
@include headerWrapperHeight(var(--pi-height-layout-header));
}
}
@@ -211,7 +211,7 @@ html {
}
.pi-shell {
&.pi-shell__deale-saas {
&.pi-shell__default {
@include headerWrapperHeight(var(--pi-height-layout-header));
}
}

2
libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss
View File

@@ -1,7 +1,7 @@
@mixin mainWrapperCentered(
$height: calc(100% - var(--pi-height-header-mobile))
) {
.pi-shell__deale-saas {
.pi-shell__default {
& > div {
// NOT Is fullscreen
&:not(.is-fullscreen) {

32
libs/ui/src/lib/styles/configs.ts
View File

@@ -2,13 +2,18 @@
export const shellTheming = (ShellClass: string) =>
`pi-shell pi-shell__${ShellClass}`;
/**
* Tema visual de toda la app. Se aplica a un contenedor raíz (normalmente
* `<body>`) y de él cuelga el aspecto de botones, cards, campos, etc.
*
* Dentro de un shell se puede forzar el aspecto contrario en un subárbol con
* `.is-private` / `.is-public` (p. ej. el input `context` de `pi-card`).
*/
export const ShellClass = {
// Deale Landings (Public)
DealeLandings: shellTheming('deale-landings'),
// Deale SaaS (Private)
DealeSaaS: shellTheming('deale-saas'),
// Deale Website (Public)
DealeWebsite: shellTheming('deale-website'),
/** Aspecto de aplicación: rellenos planos y sólidos, controles compactos. */
Default: shellTheming('default'),
/** Aspecto de marketing: degradados, brillo al hover y controles mayores. */
Alternative: shellTheming('alternative'),
};
// View component level
@@ -105,6 +110,10 @@ export const UserTypeClass = {
// Layouts (Add to any view)
export const LayoutTypeClass = {
// Specifics
//
// Authentication y Dashboard son composiciones de aplicación (estados del
// aside, tipos de usuario): la capa genérica no trae su CSS, lo aporta la app
// que los use. Ver la página «Layouts» del playground.
Authentication: 'pi-layout pi-layout__00-authentication',
Dashboard: 'pi-layout pi-layout__01-dashboard',
// TODO: Delete old dashboard layout when ready other users
@@ -113,8 +122,11 @@ export const LayoutTypeClass = {
// Full Width
FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
// Full Width Centered
// El modificador es `02-full-width--auto`, no `02a-...`: así lo espera
// `_pi-02a-full-width-auto-layout.scss`. Con el nombre antiguo la constante
// no casaba con ningún selector y el `margin: auto` nunca se aplicaba.
FullWidthAuto:
'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto',
'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02-full-width--auto',
// Main Vertically Centered
VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
// Main Space Between
@@ -130,18 +142,12 @@ export const LayoutTypeClass = {
List: 'pi-layout pi-layout__07-list',
// Infinite Scroll
ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
// List Left
PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated',
// Form Layout
Form: 'pi-layout pi-layout__08-form',
// Pricing Layout
Pricing: 'pi-layout pi-layout__09-pricing',
};
export const WebsiteScreenTypeClass = {
ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you',
};
// Wrappers
export const wrapperType = (wrapperClass: string) =>
`pi-wrapper pi-wrapper__${wrapperClass}`;

4
libs/ui/src/lib/styles/deale-saas/index.scss
View File

@@ -1,4 +0,0 @@
@use 'layouts' as *;
@use 'theming' as *;
@use 'shell' as *;
@use 'wrappers' as *;

367
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss
View File

@@ -1,367 +0,0 @@
@use 'pi-00a-authentication-layout-auth';
@use 'pi-00b-authentication-layout-recover-password';
@use 'pi-00c-authentication-layout-user-profile';
@use 'pi-00d-authentication-layout-default-space';
@use 'pi-00e-authentication-layout-impersonation';
@mixin authenticationLayoutSizes(
$width: calc(100% - var(--pi-spacing-xx-large)),
$max-width: calc(100% - var(--pi-spacing-xx-large)),
$height: 90vh
) {
& > .pi-component {
width: $width;
max-width: $max-width;
& > .pi-panel {
width: -webkit-fill-available;
& > section {
height: $height;
}
}
}
}
@mixin authenticationLayoutsButtonSize() {
}
@mixin authenticationLayoutSpacings($spacing, $gap) {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth):not(
.pi-layout__00-authentication--default-space
) {
.pi-panel {
.pi-panel-content__top,
.pi-panel-content__bottom {
gap: var(--pi-spacing-#{$gap});
}
&.pi-panel__inner-padding--xxxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-left: $spacing;
padding-right: $spacing;
}
}
}
}
}
}
}
}
}
@mixin authenticationLayoutMobileSmall {
// Mobile S
@media screen and (max-height: 41.6875rem) {
.pi-wrapper {
.pi-wrapper__gap--l {
gap: var(--pi-spacing-small);
}
}
.pi-panel {
&.pi-panel__inner-padding--xxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-top: var(--pi-spacing-x-large);
padding-bottom: var(--pi-spacing-x-large);
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}
.pi-layout__00-authentication {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
& > .pi-component {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
& > .pi-panel {
background:
linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box,
linear-gradient(
to right,
var(--pi-color-primary-50),
var(--pi-color-primary-25)
)
border-box;
background-color: rgba(255, 255, 255, 0.66);
animation: gradient 0.5s linear infinite;
animation-direction: alternate-reverse;
background-size: 150% 300%;
border: 0.0625rem solid transparent;
box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125);
.pi-panel-content__right {
& > * {
max-width: 21.25rem;
height: fit-content;
}
}
.pi-list-item {
.pi-text-viewer {
article {
label,
span {
line-height: 105%;
}
}
}
}
}
.pi-wrapper__form + .pi-wrapper__action {
margin-top: var(--pi-spacing-xxxx-large);
}
.pi-wrapper__action {
.pi-text-centered {
margin-top: var(--pi-spacing-x-large);
}
}
}
&:not(.pi-layout__00-authentication--auth) {
// Panel in other authentication layouts
.pi-panel {
.pi-panel-content__bottom {
position: sticky;
bottom: 0;
}
.pi-panel-content__top,
.pi-panel-content__bottom {
display: flex;
gap: var(--pi-spacing-x-small);
}
}
}
}
html {
// Mobile
&.is-mobile {
@include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small);
.pi-layout__00-authentication {
@include authenticationLayoutSizes;
// Mobile S
@include authenticationLayoutMobileSmall;
}
}
// Tablet
&.is-tablet {
&.is-tablet__small {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(80%, 80%, 80vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(80%, 80%, 85vh);
}
}
}
&.is-tablet__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(
calc(100% - 4rem),
calc(100% - 4rem),
70vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(
calc(100% - 4rem),
calc(100% - 4rem),
calc(100vh - 4rem)
);
}
}
}
}
// Tablet & Mobile
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-layout__00-authentication {
& > .pi-component {
// Panel in authentication layout
& > .pi-panel {
.pi-panel-content__bottom {
// Action wrapper in panel bottom content
.pi-wrapper {
&.pi-wrapper__action {
width: -webkit-fill-available;
// Hide 'Press enter' text viewer on mobile and tablet
& > *:last-child {
display: none;
}
}
}
}
}
}
// Not Auth Layout
&:not(.pi-layout__00-authentication--auth) {
// Panel in other authentication layouts
& > .pi-component {
.pi-panel {
& > section {
overflow: hidden;
.pi-panel-content__center {
flex-grow: 1;
overflow-y: auto;
// Generic Scroll
&::-webkit-scrollbar {
width: var(--pi-spacing-xxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-50);
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
background-color: var(--pi-color-primary-100);
}
}
}
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
.pi-panel {
position: relative;
// Add logo to bottom right corner of panel
&::after {
content: '';
position: absolute;
height: 100%;
width: 4.375rem;
right: var(--pi-spacing-xxx-large);
bottom: var(--pi-spacing-xxx-large);
background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg');
background-repeat: no-repeat;
background-position: bottom right;
}
}
}
}
}
.pi-shell {
.is-public {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth):not(
.pi-layout__00-authentication--recover-password
):not(.pi-layout__00-authentication--impersonation) {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(
.mdc-switch
):not(.pi-button__toggle):not(
.pi-button__type--menu-item
):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(
.ch2-btn
) {
min-width: 9.5rem;
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(
.mdc-switch
):not(.pi-button__toggle):not(
.pi-button__type--menu-item
).pi-button:not(.pi-button__icon):not(
.pi-button__x-small
):not(.pi-button__small):not(.pi-button__large):not(
.pi-button__large
):not(.pi-button__trimed):not(.pi-button__xx-small):not(
.pi-button__trimmed
) {
min-width: 11.5rem;
padding: var(--pi-spacing-xxxx-small)
var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}
}
}
&.is-desktop {
@include authenticationLayoutSpacings(4rem, x-large);
// Desktop S
&.is-desktop__small {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(
75%,
var(--pi-public-width-container),
70vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(
72%,
var(--pi-public-width-container),
76vh
);
}
}
}
// Desktop M & L
&.is-desktop__medium,
&.is-desktop__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(
72%,
var(--pi-public-width-container),
78vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(
66.66%,
var(--pi-public-width-container),
78vh
);
}
}
}
}
}

83
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00a-authentication-layout-auth.scss
View File

@@ -1,83 +0,0 @@
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small Device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__00-authentication {
&.pi-layout__00-authentication--auth {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__left {
display: none;
}
.pi-panel-content__right {
padding-top: var(--pi-spacing-xxx-large);
@media screen and (max-height: 41.6875rem) {
transform: scale(0.95);
&.pi-wrapper {
&.pi-wrapper__gap--xl {
gap: unset;
}
}
}
}
}
// Headline in authentication layout
.pi-headline {
&.pi-headline__type--logo {
& > figure {
max-width: 5.75rem;
}
}
}
}
// Panel in Root auth form
&.pi-layout__00-authentication--root-org {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__center {
.pi-wrapper {
&:first-child {
margin-top: var(--pi-spacing-medium);
}
}
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large Device
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__00-authentication {
&.pi-layout__00-authentication--auth {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__left {
display: grid;
grid-template-rows: repeat(2, 1fr);
& > *:nth-child(n + 1) {
align-self: end;
}
}
}
// Headline in authentication layout
.pi-headline {
&.pi-headline__type--logo {
& > figure {
max-width: 4.6875rem;
}
}
}
}
}
}
}
}
}

32
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss
View File

@@ -1,32 +0,0 @@
html {
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--recover-password {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(
.mdc-switch
):not(.pi-button__toggle):not(
.pi-button__type--menu-item
):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(
.ch2-btn
) {
min-width: 13.5rem;
}
}
}
}
}
}
}
}
}
}

112
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss
View File

@@ -1,112 +0,0 @@
@mixin authenticationLayoutSelectMenuTypeCustom(
$columnsNum: 1,
$card-height: unset
) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-select {
.pi-select-options-menu {
padding: unset;
background-color: transparent;
}
&.pi-select__menu-type--custom-grid {
.pi-select-options-menu {
& > div {
display: grid;
grid-template-columns: repeat(#{$columnsNum}, 1fr);
grid-gap: var(--pi-spacing-large);
.pi-card {
min-height: $card-height;
}
}
}
}
}
// Grid wrapper 3 cols in Authentiocation User Type layout
.pi-wrapper {
&.pi-wrapper__grid {
&.pi-wrapper__grid--columns-3 {
&.is-responsive {
grid-template-columns: repeat(#{$columnsNum}, 1fr);
}
}
}
}
}
}
}
@mixin authenticationLayoutMobile {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-select-option__large {
width: -webkit-fill-available;
}
.pi-card {
.pi-card-content__bottom {
display: none;
}
}
.pi-panel__gap--xxxl {
& > section {
gap: var(--pi-spacing-x-small);
}
}
}
}
}
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-card {
&.is-active {
.pi-card-content__bottom {
& > span {
font: {
weight: 400;
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include authenticationLayoutSelectMenuTypeCustom;
@include authenticationLayoutMobile;
}
&:not(.is-desktop) {
@media screen and (max-width: 62rem) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-panel-content__center {
padding-top: var(--pi-spacing-medium);
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet Small
&.is-tablet__small {
@include authenticationLayoutSelectMenuTypeCustom;
}
// Tablet L
&.is-tablet__large {
@include authenticationLayoutSelectMenuTypeCustom(3, 9rem);
}
}
// Desktop
&.is-desktop {
&.is-desktop__small {
@include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem);
}
&:not(.is-desktop__small) {
@include authenticationLayoutSelectMenuTypeCustom(3);
}
}
}

47
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss
View File

@@ -1,47 +0,0 @@
@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--default-space {
.pi-panel {
.pi-panel-content__top,
.pi-panel-content__bottom {
gap: var(--pi-spacing-#{$gap});
}
&.pi-panel__inner-padding--xxxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-left: $spacing;
padding-right: $spacing;
}
}
}
}
}
}
}
}
}
html {
&.is-mobile {
@include authenticationDefaultSpaceLayoutSpacings(
var(--pi-spacing-xxx-large),
x-small
);
}
&.is-tablet {
&.is-tablet__small {
@include authenticationDefaultSpaceLayoutSpacings(
var(--pi-spacing-xxxx-large),
small
);
}
&.is-tablet__large {
@include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);
}
}
&.is-desktop {
@include authenticationDefaultSpaceLayoutSpacings(11rem, x-large);
}
}

32
libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss
View File

@@ -1,32 +0,0 @@
html {
&:not(.is-mobile) {
.pi-shell {
.is-public {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--impersonation {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(
.mdc-switch
):not(.pi-button__toggle):not(
.pi-button__type--menu-item
):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(
.ch2-btn
) {
min-width: 13.5rem;
}
}
}
}
}
}
}
}
}
}
}

239
libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss
View File

@@ -1,239 +0,0 @@
.pi-layout {
&.pi-layout__01-dashboard-old {
.pi-panel__primary {
border: none;
background-color: var(--pi-color-primary);
}
}
}
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-company {
.pi-wrapper {
&.pi-wrapper__main {
& > section {
align-items: stretch;
.pi-panel {
height: 100%;
& > section {
height: 100%;
}
}
}
}
}
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-investor {
& > div {
& > div {
& > * {
display: block;
.pi-panel {
height: 100%;
}
}
}
}
.pi-panel {
& > section {
height: 100%;
// Press component
& > div {
a {
& > .pi-headline {
& > figure {
width: unset;
img {
height: 1.75rem;
width: 1.75rem;
}
}
}
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-company {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-investor {
.pi-panel {
& > section {
// Deal manager component
& > .pi-headline {
flex-direction: row;
}
}
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
}
// Tablet
&.is-tablet {
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-company {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-investor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
// Tablet S
&.is-tablet__small {
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Tablet L
&.is-tablet__large {
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
}
// Large device
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.is-mode-list {
.pi-layout {
&.pi-layout__01-dashboard-old {
.pi-data-grid {
&.pi-data-grid__data-direction--row {
height: calc(100% - 2.6563rem);
.pi-data-grid__content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 4.6563rem);
button {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-close-button
):not(.pi-hamburger):not(.pi-button__xx-small) {
height: 2.4rem;
min-height: unset;
padding-left: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-medium);
}
}
.pi-chip-label {
max-width: 15ch;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.is-advisor {
}
.is-company {
}
.is-investor {
}
// Desktop S
&.is-desktop__small {
.pi-layout__01-dashboard-old {
width: 90%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Desktop M
&.is-desktop__medium {
.pi-layout__01-dashboard-old {
width: 85%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Desktop L
&.is-desktop__large {
.pi-layout__01-dashboard-old {
width: 75%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
}
}

55
libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss
View File

@@ -1,55 +0,0 @@
@mixin dashboardLayoutWidth(
$width: calc(100% - var(--pi-spacing-x-large)),
$max-width: calc(100% - var(--pi-spacing-x-large)),
$margin: var(--pi-height-header-mobile) auto 0
) {
.pi-layout {
&.pi-layout__01-dashboard {
width: $width;
max-width: $max-width;
margin: $margin;
}
}
}
.pi-layout {
&.pi-layout__01-dashboard {
display: grid;
align-items: center;
}
}
html {
// Maobile & Tablet
&:not(.is-desktop) {
// Small devices
@include dashboardLayoutWidth;
}
// Large device
&:not(.is-mobile) {
// Tablet L & Desktop S, M & L > 2400px
@media screen and (min-width: 62rem) and (max-width: 140rem) {
@include dashboardLayoutWidth(
calc(100% - var(--pi-spacing-x-large)),
calc(100% - var(--pi-spacing-x-large)),
unset
);
}
// X Large device
@media screen and (min-width: 140rem) {
@include dashboardLayoutWidth(
calc(
100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(
--pi-spacing-x-large
)
),
calc(
100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(
--pi-spacing-x-large
)
),
unset
);
}
}
}

333
libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss
View File

@@ -1,333 +0,0 @@
$pi-seller-dashboard-overviews-height: 7.5rem; // 120px
:root {
// Company Dashboard Spacings
--pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px
}
@mixin companyDashboardGridMobileAndTablet {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-medium);
& > *:nth-child(n + 1) {
display: block;
width: -webkit-fill-available;
}
}
}
}
}
@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
& > *:nth-child(2) {
&.is-empty {
& > .pi-panel {
.pi-panel-content__center {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-height-header
) -
23.65rem
);
.pi-note {
width: $width;
}
}
}
}
}
}
}
}
}
@mixin companyDashboardGridDesktopSmall {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
'item1 item1'
'item2 item3'
'item4 item5';
& > *:nth-child(2),
& > *:nth-child(3) {
& > * {
max-width: 100%;
}
}
}
}
}
}
@mixin companyDashboardGridDesktop {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
'item1 item1 item1 item1 item3 item3'
'item2 item2 item2 item2 item3 item3'
'item4 item4 item5 item5 item3 item3';
& > *:nth-child(3) {
& > * {
min-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header)
);
}
.pi-panel-content {
// Center
&.pi-panel-content__center {
padding: unset;
&:nth-child(2) {
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
& > article {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
}
}
}
}
}
}
}
}
}
// Accordion horizontal in Insights panel
@mixin companyDashboardHorizontalAccordionDesktop {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
.pi-accordion {
&.pi-accordion__direction--horizontal {
& > section {
&:nth-child(1) {
header {
.pi-list-item {
flex-direction: column;
gap: unset;
.pi-list-item-icon {
&.pi-list-item-icon__left {
max-width: 100%;
width: 100%;
// Insights chip
.pi-chip__large {
&:not(.pi-chip__single-icon) {
height: calc(
var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xxx-small
)
);
max-width: 100%;
width: 100%;
}
}
}
}
.pi-list-item-content {
&.pi-list-item-content__left {
display: flex;
align-items: flex-end;
text-align: center;
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
}
}
}
}
}
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
@for $i from 1 through 5 {
& > *:nth-child(#{$i}) {
grid-area: item#{$i};
align-self: flex-start;
}
}
grid-gap: var(--pi-spacing-medium);
// Overviews
& > *:nth-child(1) {
.pi-card {
min-height: var(--pi-seller-dashboard-overviews-height);
.pi-card-content {
&.pi-card-content__top {
padding-left: var(--pi-spacing-large);
padding-top: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-large);
}
&.pi-card-content__bottom {
flex-direction: row;
align-items: center;
min-height: var(--pi-spacing-xxxx-large);
}
}
&:hover {
border-color: var(--pi-color-primary-100);
}
}
}
// TO·DO List
& > *:nth-child(3) {
.pi-panel {
.pi-panel-content {
& > .pi-divider {
padding-top: var(--pi-spacing-xxx-small);
& + * {
padding-top: var(--pi-spacing-medium);
}
}
& > .pi-text-viewer {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
// Top
&.pi-panel-content__top {
padding-left: var(--pi-spacing-xx-large);
padding-right: var(--pi-spacing-xx-large);
& > span {
line-height: 105%;
}
}
}
}
&:not(.is-empty) {
& > *:nth-child(3) {
.pi-panel {
.pi-panel-content {
// Center
&.pi-panel-content__center {
padding: unset;
&:nth-child(2) {
.pi-icon__appearance--fill {
&.pi-color__primary {
background-color: var(--pi-color-primary-50);
}
}
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
& > article {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
}
.pi-wrapper__flex-direction--column {
// Only scroll for desktop M & L
@media screen and (min-width: 90rem) {
max-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-height-header
) -
24rem
);
max-width: calc(100% - var(--pi-spacing-xxx-small));
overflow-y: auto;
// Generic Scroll
&::-webkit-scrollbar {
width: var(--pi-spacing-xxxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-100);
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
background-color: var(--pi-color-primary-200);
}
}
}
}
}
}
}
}
}
}
}
// Deal manager CTA
& > *:nth-child(5) {
.pi-headline {
height: var(--pi-spacing-xxx-large);
width: var(--pi-spacing-xxx-large);
&::after {
content: '';
position: relative;
z-index: 99;
height: var(--pi-spacing-xx-small);
width: var(--pi-spacing-xx-small);
margin-top: -4rem;
margin-left: 2.25rem;
border-radius: 50%;
background-color: var(--pi-color-success);
}
}
.pi-list-item-icon {
&.pi-list-item-icon__right {
display: flex;
align-items: center;
gap: var(--pi-spacing-xxx-small);
}
}
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
@include companyDashboardGridMobileAndTablet;
}
&.is-desktop {
// Desktop S
&.is-desktop__small {
@include companyDashboardGridDesktopSmall;
@include companyDashboardInsightsPanelEmptyState;
}
// Desktop S & M
&:not(.is-desktop__large) {
@include companyDashboardHorizontalAccordionDesktop;
}
// Desktop M & L
&:not(.is-desktop__small) {
@include companyDashboardGridDesktop;
@include companyDashboardInsightsPanelEmptyState(50%);
}
}
}

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-01b-dashboard-layout-investor.scss
View File

0
libs/ui/src/lib/styles/deale-saas/layouts/_pi-01c-dashboard-layout-advisor.scss
View File

429
libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss
View File

@@ -1,429 +0,0 @@
.pi-layout {
&.pi-05a-splitted-paywall-layout {
width: 100vw;
background-size: contain;
background-repeat: no-repeat;
background-position-x: right;
.pi-main-wrapper-content {
min-height: unset;
// Left
&.pi-main-wrapper-content__left {
display: flex;
flex-direction: column;
header {
h1 + * {
margin-top: var(--pi-spacing-x-small);
}
}
}
// Right
&.pi-main-wrapper-content__right {
display: flex;
flex-direction: column;
}
}
* + .mat-mdc-radio-group {
padding-top: var(--pi-spacing-x-large);
}
.mat-mdc-radio-group {
display: flex;
flex-direction: column;
label {
margin-bottom: unset;
}
}
.mat-mdc-radio-label-content {
padding-left: var(--pi-spacing-medium);
}
.pi-panel {
box-shadow: var(--pi-box-shadow);
transition: var(--pi-animation);
width: 100%;
max-width: 30rem;
&.is-active {
border: 1px solid var(--pi-color-primary-100);
background-color: var(--pi-color-primary-50);
}
&:hover {
cursor: pointer;
box-shadow: var(--pi-box-shadow-hover);
&:not(.is-active) {
border: 1px solid var(--pi-color-primary-200);
}
}
// Padding
&.has-padding {
width: 100%;
padding: var(--pi-spacing-large);
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
@media screen and (max-height: 46.25rem) {
min-height: calc(198vh + var(--pi-height-footer));
}
.pi-main-wrapper-content {
// Right
&.pi-main-wrapper-content__right {
height: calc(
100vh - var(--pi-spacing-x-large) - var(
--pi-spacing-x-large
) - var(--pi-height-footer) -
8rem
);
}
// Left
&.pi-main-wrapper-content__left {
// Header
& > header {
transform: scale(0.92);
.pi-color__black-primary {
& > article {
display: flex;
gap: var(--pi-spacing-xxx-small);
}
}
}
}
}
// Radio panels
.mat-mdc-radio-group {
gap: var(--pi-spacing-small);
width: 100%;
transform: scale(0.92);
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
.pi-button__small
):not(.pi-button__large) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
}
}
}
}
}
}
&.is-tablet {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
.pi-wrapper__main {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
& > header {
max-width: 66.66%;
margin: 0 auto;
}
}
&.pi-main-wrapper-content__right {
min-height: calc(
100vh - var(--pi-spacing-xx-large) - var(
--pi-spacing-xx-large
) - var(--pi-height-footer) -
20rem
);
}
}
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
.pi-button__small
):not(.pi-button__large) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
min-width: 11rem;
}
}
}
}
}
// Tablet S
&.is-tablet__small {
.pi-wrapper__main {
.pi-main-wrapper-content {
& > * + *:not(:last-child) {
width: 66.66%;
margin: var(--pi-spacing-x-large) auto;
}
}
}
}
// Tablet L
&.is-tablet__large {
.pi-wrapper__main {
.pi-main-wrapper-content {
& > * + *:not(:last-child) {
width: 50%;
margin: var(--pi-spacing-x-large) auto;
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
// Main
.pi-wrapper {
&.pi-wrapper__main {
& > section {
padding-bottom: var(--pi-height-header);
}
.pi-main-wrapper-content {
width: 100%;
// Left
&.pi-main-wrapper-content__left {
& > header {
justify-content: center;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
h3 {
display: block;
}
}
form {
& > h4 {
text-align: center;
}
}
// Action wrapper
.pi-wrapper__action {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
height: var(--pi-height-footer);
width: 100%;
margin-top: unset;
background-color: var(--pi-color-white-rgba-06);
box-shadow: var(--pi-box--shadow-top);
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-xxxx-large);
padding-top: 6rem;
background-image: unset;
& > form {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
}
}
}
}
}
.mat-mdc-radio-group {
align-items: center;
}
.mat-mdc-radio-label-content {
h3 {
font: {
size: var(--pi-font-size-xx-large);
}
}
}
// Mobile and Tablet S
@media screen and (max-width: 62rem) {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
// Header
& > header {
h1 {
font: {
size: var(--pi-font-size-x-large);
}
}
}
}
}
}
// Action wrapper
.pi-wrapper__action {
justify-content: space-around;
}
}
}
}
// Small device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
.mat-mdc-radio-group > * {
width: -webkit-fill-available;
}
}
}
}
}
} // Tablet & Desktop
&:not(.is-mobile) {
// Tablet L and Desktop
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
// Header
& > header {
h1 {
font: {
size: var(--pi-font-size-xx-large);
}
}
}
}
}
.mat-mdc-radio-label-content {
h3 {
font: {
size: 2.375rem;
}
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
height: 100vh;
overflow-y: hidden;
.pi-wrapper__main {
.pi-main-wrapper-content {
// Left
&.pi-main-wrapper-content__left {
justify-content: space-between;
max-width: 50%;
.pi-panel {
&.has-padding {
max-width: 32rem;
}
}
.pi-wrapper {
&.pi-wrapper__action {
gap: var(--pi-spacing-x-large);
}
}
}
// Right
&.pi-main-wrapper-content__right {
justify-content: center;
}
}
}
}
}
}
&.is-desktop__small {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxx-large);
gap: var(--pi-spacing-xx-large);
.pi-main-wrapper-content {
height: calc(
100vh - var(--pi-spacing-xxx-large) - var(
--pi-spacing-xxx-large
)
);
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {
max-width: 70%;
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-medium);
}
}
}
}
}
}
&.is-desktop__medium {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxx-large);
gap: var(--pi-spacing-xxx-large);
.pi-main-wrapper-content {
// Left
&.pi-main-wrapper-content__left {
height: calc(
100vh - var(--pi-spacing-xxx-large) - var(
--pi-spacing-xxx-large
)
);
.mat-mdc-radio-group {
max-width: 66.66%;
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-x-large);
}
}
}
}
}
}
}
&.is-desktop__large {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxxx-large);
gap: var(--pi-spacing-xxxx-large);
.pi-main-wrapper-content {
height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xxxx-large
)
);
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {
max-width: 50%;
}
.pi-wrapper__action {
margin-top: 5rem;
}
}
}
}
}
}
}
}

3
libs/ui/src/lib/styles/deale-saas/layouts/_pi-container-layout.scss
View File

@@ -1,3 +0,0 @@
.pi-container-layout {
padding-bottom: var(--pi-spacing-xxxx-large);
}

217
libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss
View File

@@ -1,217 +0,0 @@
@mixin layoutHeight(
$height: calc(
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large)
)
) {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
height: $height;
}
}
}
@mixin layoutWidth(
$max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
$margin: var(--pi-height-header-mobile) auto 0
) {
.pi-layout {
// Default scroll
&.pi-layout__main {
max-width: $max-width;
margin: $margin;
}
}
}
.pi-layout {
&:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) {
display: block;
}
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
overflow-y: scroll;
overflow-x: hidden;
}
&.pi-layout__main {
& > *:nth-child(1) {
margin-top: var(--pi-spacing-xx-large);
}
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-x-large);
}
& > .pi-component {
display: block;
& > .pi-panel {
box-shadow: var(--pi-box-shadow);
}
}
}
&.pi-layout__no-padding {
padding: 0;
}
}
html {
// Mobile
&.is-mobile {
@include layoutHeight;
@include layoutWidth;
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__01-dashboard,
&.pi-layout__main {
padding-bottom: 11.5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
.pi-layout {
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
max-width: calc(
100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium)
);
}
&.pi-layout__main {
padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer));
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-medium);
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
.has-bottom-sticky-note {
@include layoutHeight(
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) -
2rem
)
);
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer))
);
@include layoutWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
var(--pi-height-header-tablet) auto 0
);
.pi-layout {
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
max-width: calc(
100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
&.pi-layout__main {
padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer));
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-x-large);
}
}
}
}
// Tablet L
&.is-tablet__large {
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - 3.25rem)
);
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
}
}
// Tablet & Desktop
&:not(.is-desktop) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__main {
.pi-layout {
&.pi-layout__main {
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-xx-large);
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(
calc(
100vh - var(--pi-height-header-tablet) - var(
--pi-spacing-x-large
) - var(--pi-spacing-large)
)
);
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
}
}

18
libs/ui/src/lib/styles/deale-saas/layouts/index.scss
View File

@@ -1,18 +0,0 @@
@forward 'pi-00-authentication-layout';
@forward 'pi-01-dashboard-layout';
@forward 'pi-01a-dashboard-layout-company';
@forward 'pi-01b-dashboard-layout-investor';
@forward 'pi-01c-dashboard-layout-advisor';
@forward 'pi-01-dashboard-layout-old';
@forward 'pi-02-full-width-layout';
@forward 'pi-02a-full-width-auto-layout';
@forward 'pi-03-vertically-centered-layout';
@forward 'pi-04-space-between-layout';
@forward 'pi-05-splitted-layout';
@forward 'pi-05a-splitted-paywall-layout';
@forward 'pi-06-edge-to-edge-layout';
@forward 'pi-07-list-layout';
@forward 'pi-07a-list-auto-layout';
@forward 'pi-08-form-layout';
@forward 'pi-container-layout';
@forward 'pi-layout';

384
libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss
View File

@@ -1,384 +0,0 @@
@mixin asideActionWrapper() {
gap: var(--pi-spacing-medium);
& > *:nth-child(n + 1) {
display: flex;
justify-content: center;
align-items: center;
min-width: 50%;
width: -webkit-fill-available;
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle) {
min-width: unset;
padding-left: unset;
padding-right: unset;
}
}
.pi-button__w100 {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle) {
min-width: 100%;
}
}
}
}
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
display: block;
position: fixed;
z-index: 99;
padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
overflow: hidden;
transition: var(--pi-animation);
& > .pi-close-button {
position: absolute;
margin-top: -1rem;
}
& > .pi-icon {
position: absolute;
height: var(--pi-spacing-xxx-large);
width: var(--pi-spacing-xxx-large);
margin-left: var(--pi-spacing-x-small);
margin-top: -0.475rem;
transition: var(--pi-animation);
}
&.pi-saas-aside__white {
background-color: var(--pi-color-white);
border: 1px solid var(--pi-color-white-900);
.pi-buyer-companies-list-filters {
.pi-accordion + .pi-wrapper {
padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
}
}
}
.pi-accordion-item-content__header {
& > .pi-text-viewer {
&.pi-text-viewer__font-size--m-xs {
label {
font: {
size: var(--pi-font-size-small);
}
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
opacity: 1;
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-aside {
transform: translateX(
calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large))
);
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(2) {
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0;
.pi-wrapper__action {
flex-direction: column;
@include asideActionWrapper;
}
}
& > *:nth-child(3) {
@include asideActionWrapper;
}
}
}
// Dynamic menu
.pi-dynamic-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
overflow-y: scroll;
.pi-panel {
width: 100%;
}
& > *:nth-child(1) {
flex-shrink: 0;
height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top));
.pi-headline {
max-width: 50%;
margin: auto;
}
}
& > *:nth-child(2) {
&.pi-wrapper__flex {
overflow-y: auto;
height: 100%;
// Generic Scroll
&::-webkit-scrollbar {
width: 0.1875rem;
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
}
}
}
& > .pi-list-item {
border-radius: var(--pi-border-radius-medium);
padding: var(--pi-spacing-medium);
}
}
& > *:nth-child(3) {
flex-shrink: 0;
width: calc(
100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
margin: 0 auto;
.pi-icon-button {
margin-bottom: var(--pi-spacing-x-large);
width: -webkit-fill-available;
}
}
&.pi-saas-admin-user-profile {
.pi-icon__x-large {
&.is-stroked {
&.pi-icon__appearance--fill {
height: 7rem;
width: 7rem;
border-radius: 50%;
.mat-icon {
height: 4rem;
width: 4rem;
}
}
}
}
}
}
}
// Aside is NOT closable
&:not(.aside-is-closable) {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
calc(var(--pi-spacing-x-large) + var(--pi-spacing-large));
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
& > .pi-close-button {
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
transform: translateX(var(--pi-spacing-x-large));
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
& > div {
// Not fullscreen
&:not(.is-fullscreen) {
.pi-saas-aside {
top: 0;
height: calc(
100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)
);
width: 100%;
& > .pi-close-button {
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
}
& > *:nth-child(2) {
height: calc(
100% - env(safe-area-inset-top) - env(
safe-area-inset-bottom
) - var(--pi-height-header-aside) - var(
--pi-height-footer-aside
)
);
}
}
// Aside is open
&.aside-is-open {
overflow: hidden;
.pi-saas-aside {
transform: translateX(0);
transition-duration: 0.4s;
}
& > section,
& > .pi-saas-navbar {
position: fixed;
transform: translateX(calc(-100vw));
transition-duration: 0.4s;
}
}
// Aside is closed
&.aside-is-closed {
overflow: unset;
.pi-saas-aside {
transition-duration: 0.4s;
}
& > section,
& > .pi-saas-navbar {
transform: translateX(calc(0));
transition-duration: 0.5s;
}
}
.pi-dynamic-menu {
& > *:nth-child(3) {
height: calc(
var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
);
margin: 0 auto var(--pi-spacing-xxx-large);
}
& > *:nth-child(n + 2) {
padding: 0 var(--pi-spacing-x-large);
}
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
var(--pi-spacing-xxxx-large);
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
// Not fullscreen
&:not(.is-fullscreen) {
.pi-saas-aside {
top: var(--pi-spacing-x-large);
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
width: var(--pi-width-aside);
border-radius: var(--pi-border-radius-large);
box-shadow: var(--pi-box-shadow-panel-double);
& > *:nth-child(2) {
flex-grow: 1;
height: 100%;
}
& > .pi-close-button {
margin-left: calc(
var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large)
);
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
transform: translateX(
calc(
100vw - var(--pi-width-aside) - var(--pi-spacing-x-large)
)
);
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-aside {
opacity: 0;
transition-duration: 0.6s;
}
}
.pi-dynamic-menu {
& > *:nth-child(2) {
padding: var(--pi-spacing-x-large);
}
& > *:nth-child(3) {
height: calc(
var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
);
margin: 0 auto;
padding: var(--pi-spacing-x-large) 0 0;
}
}
// Back link is hidden
&.backlink-is-hidden {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large);
}
}
.pi-saas-aside {
& > .pi-icon {
display: none;
}
}
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}

380
libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss
View File

@@ -1,380 +0,0 @@
.pi-shell__deale-saas {
& > div {
.pi-saas-header {
// Private
display: flex;
border-radius: var(--pi-border-radius-large);
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--pi-spacing-xxxx-small);
}
// Right
&.pi-saas-header-content__right {
display: flex;
justify-content: flex-end;
align-items: center;
& > *:nth-child(n + 1) {
display: flex;
align-items: center;
transition: var(--pi-animation);
&:hover {
cursor: pointer;
}
}
.pi-icon-button {
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
}
.pi-icon {
// Common
&:not(.is-stroked) {
&:hover {
img,
.mat-icon {
transition-duration: 0.15s;
transform: scale(1.15);
}
}
&:not(:hover):not(.is-active) {
img,
.mat-icon {
transition-duration: 0.15s;
transform: scale(1);
}
}
}
// Type stroke
&.is-stroked {
&:hover {
transition-duration: 0.15s;
transform: scale(1.1);
}
&:not(:hover):not(.is-active) {
transition-duration: 0.15s;
transform: scale(1);
}
}
// Active
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-header-content {
// Right
&.pi-saas-header-content__right {
.pi-icon {
&.is-active {
background-color: var(--pi-color-primary-50);
border-radius: 50%;
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-saas-header {
left: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
h2 {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
// Right
&.pi-saas-header-content__right {
gap: var(--pi-spacing-medium);
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small Devices
@media screen and (max-width: 62rem) {
.pi-saas-header {
position: fixed;
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
& > span {
display: flex;
gap: var(--pi-spacing-xx-small);
& > h1 {
font: {
size: var(--pi-font-size-medium);
}
}
}
}
// Mobile
@media screen and (max-width: 40rem) {
height: var(--pi-height-header-mobile);
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle) {
min-width: unset;
padding-left: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-medium);
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
) {
min-width: var(--pi-spacing-xx-large);
}
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
padding: var(--pi-spacing-xxxx-small) unset;
}
&:not(.pi-close-button):not(
.pi-hamburger
).pi-button__appearance--outline {
background-color: var(--pi-color-accent-75);
transition: all 0.16s ease-in;
border: unset;
}
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__x-large
) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
-moz-border-radius: var(--pi-border-radius-medium);
}
}
}
}
// Tablet S
@media screen and (min-width: 40rem) {
height: var(--pi-height-header-tablet);
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
padding: var(--pi-spacing-xxxx-small)
var(--pi-spacing-x-small);
}
}
}
}
// Left
&.pi-saas-header-content__left {
width: 60%;
& > span {
& > h1 {
font: {
size: var(--pi-font-size-medium);
}
}
}
}
// Right
&.pi-saas-header-content__right {
width: 40%;
display: flex;
align-items: center;
.pi-avatar {
padding: var(--pi-spacing-xxx-small);
&:hover,
&.is-active {
transform: scale(1.05);
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
.pi-avatar {
picture {
width: 3rem;
height: 3rem;
}
}
&.is-tablet__small {
.pi-saas-header {
left: var(--pi-spacing-x-large);
width: calc(
100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
}
// Tablet L
&.is-tablet__large {
.pi-saas-header {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
height: var(--pi-height-header-tablet);
padding-top: var(--pi-spacing-large);
}
// Right
&.pi-saas-header-content__right {
height: var(--pi-height-header-tablet);
padding-top: var(--pi-spacing-xx-small);
}
}
}
}
}
// Tablet L & Desktop
&:not(.is-mobile) {
.pi-saas-header {
.pi-saas-header-content {
// Right
&.pi-saas-header-content__right {
gap: var(--pi-spacing-medium);
.pi-icon-button,
.pi-icon:nth-of-type(1) {
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
&:not(.is-active) {
&::after {
content: '|';
color: var(--pi-color-primary-200);
margin-left: var(--pi-spacing-medium);
font: {
size: var(--pi-font-size-small);
}
}
}
}
}
}
}
// Large Devices
@media screen and (min-width: 62rem) {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
& span {
& > h1 {
font: {
size: var(--pi-font-size-large);
}
}
}
}
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
&.pi-button__appearance--ghost {
padding: var(--pi-spacing-xxxx-small) 0;
}
&:not(.pi-button__appearance--ghost) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large);
}
}
}
}
}
}
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
.pi-saas-header {
transition: var(--pi-animation);
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
width: 45%;
}
// Right
&.pi-saas-header-content__right {
justify-content: flex-end;
width: 55%;
.pi-avatar {
padding: 0.375rem;
&:hover,
&.is-active {
transform: scale(1.075);
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-header {
width: calc(
100% - var(--pi-width-aside) - var(--pi-spacing-x-large)
);
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-header {
width: 100%;
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-saas-header {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
height: var(--pi-height-header);
padding-top: var(--pi-spacing-small);
}
// Right
&.pi-saas-header-content__right {
height: var(--pi-height-header);
padding-top: var(--pi-spacing-medium);
}
}
}
}
}

164
libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss
View File

@@ -1,164 +0,0 @@
.pi-shell__deale-saas {
& > div {
width: 100%;
// NOT Is fullscreen
&:not(.is-fullscreen) {
& > section {
position: fixed;
}
}
// Is fullscreen
&.is-fullscreen {
& > section {
left: 0;
width: 100%;
}
.pi-saas-header,
.pi-saas-navbar {
display: none;
}
}
}
}
html {
// Mobile & Tablet S
&:not(.is-desktop) {
// Tablet L
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
& > div {
& > section {
width: 100%;
padding: 0;
}
// Footer logo
& > .pi-headline {
display: none;
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet L
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
& > section {
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
// Not is fullscreen
&:not(.is-fullscreen) {
& > section {
left: calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
// Not is fullscreen
&:not(.is-fullscreen) {
// Layout container
& > section {
top: var(--pi-spacing-x-large);
& > *:nth-child(1) {
padding-right: var(--pi-spacing-x-large);
}
}
}
// Aside is open
&.aside-is-open {
& > .pi-headline {
transform: var(--pi-animation);
transform: translateX(0);
}
}
// Aside is closed
&.aside-is-closed {
& > .pi-headline {
transform: var(--pi-animation);
transform: translateX(
calc(var(--pi-width-aside) + var(--pi-spacing-x-large))
);
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-shell__deale-saas {
& > div {
// Not is fullscreen
&:not(.is-fullscreen) {
// Layout container
& > section {
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
transition: var(--pi-animation);
& > *:nth-child(1) {
padding-right: var(--pi-spacing-x-large);
}
}
// Navbar is expanded
&.navbar-is-expanded {
& > section {
left: calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-expanded) - var(
--pi-spacing-x-large
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}
// Navbar is collapsed
&.navbar-is-collapsed {
& > section {
left: calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}
}
}
}
}
}

653
libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss
View File

@@ -1,653 +0,0 @@
@mixin parentMenuEntryAppearance($justify-content, $height) {
.pi-saas-navbar {
.pi-menu-event-item {
display: flex;
align-items: center;
justify-content: $justify-content;
gap: var(--pi-spacing-medium);
width: -webkit-fill-available;
height: $height;
}
}
}
@mixin parentMenuItemExpanded($height: var(--pi-size-menu-item-expanded)) {
.pi-shell__deale-saas {
& > div {
&.navbar-is-expanded {
// Navbar
.pi-saas-navbar {
.pi-menu {
& > nav {
& > .pi-menu-event-item {
.pi-menu-entry {
&.pi-menu-entry__context--parent-menu {
height: var(--pi-size-menu-item-expanded);
width: calc(
100% - var(--pi-spacing-large) - var(--pi-spacing-large)
);
margin-left: var(--pi-spacing-large);
padding: 0 var(--pi-spacing-large);
border-radius: var(--pi-border-radius-medium);
transition: var(--pi-animation);
article {
transition: var(--pi-animation);
transform: scale(1);
transition-delay: 0.1s;
visibility: visible;
opacity: 1;
}
label {
line-height: 1.25;
}
}
}
}
}
}
}
}
}
}
}
@mixin parentMenuItemCollapsed(
$size: var(--pi-spacing-xxxx-large),
$radius: medium,
$scale: 1
) {
.pi-saas-navbar {
.pi-menu {
.pi-menu-entry {
&.pi-menu-entry__context--parent-menu {
justify-content: center;
height: $size;
width: $size;
border-radius: var(--pi-border-radius-#{$radius});
transition: var(--pi-animation);
article {
position: absolute;
transform: scale(0.5);
visibility: hidden;
opacity: 0;
}
}
// Not disabled hover and active effects
&:not(.is-disabled) {
&.pi-menu-entry__context--parent-menu {
&:hover {
&:not(.is-active) {
.mat-icon {
transform: scale(#{$scale});
}
}
}
&.is-active {
background-color: var(--pi-color-primary-50);
color: var(--pi-color-primary-900);
.mat-icon {
transform: scale(#{$scale});
}
}
}
}
}
}
}
}
@mixin parentMenuEntryColor {
.pi-menu-event-item {
&.is-selected {
.pi-menu-entry {
&:not(.is-disabled) {
&:not([class*='pi-menu-entry__context--aside-menu']):not(
[class*='children']
) {
background-color: var(--pi-color-primary-25);
color: var(--pi-color-primary);
.mat-icon {
color: var(--pi-color-primary);
}
}
}
}
}
&.is-disabled {
opacity: 0.3;
}
&:not(.is-disabled) {
.pi-menu-entry {
&.pi-menu-entry__context--parent-menu,
&.pi-menu-entry__context--children-submenu {
&.pi-text-viewer {
&.pi-text-viewer__icon-color--black {
&:not(.pi-menu-entry__context--children-menu):not(
.pi-menu-entry__context--aside-menu
) {
&:not(.is-active) {
color: var(--pi-color-grey);
.mat-icon {
color: var(--pi-color-grey);
}
}
&:hover {
&:not(.is-active):not(.is-disabled) {
background-color: var(--pi-color-primary-50);
span,
label,
.mat-icon {
color: var(--pi-color-primary);
}
}
}
&:not(.is-disabled) {
&.is-active {
max-width: -webkit-fill-available;
background-color: var(--pi-color-primary-50);
color: var(--pi-color-primary-900);
.mat-icon {
color: var(--pi-color-primary-900);
}
}
}
&:hover {
&:not(.is-active):not(.is-disabled) {
background-color: var(--pi-color-primary-50);
label,
.mat-icon {
color: var(--pi-color-primary);
}
}
}
}
}
}
&.is-disabled {
opacity: 0.3;
}
}
}
}
}
}
@mixin childrenMenuEntryAppearance {
.pi-menu-entry {
&.pi-menu-entry__context--children-menu {
max-width: -webkit-fill-available;
padding-left: var(--pi-spacing-xx-small);
font: {
size: var(--pi-font-size-x-small);
}
}
&.pi-menu-entry__context--children-submenu {
height: var(--pi-size-menu-item-expanded);
padding: var(--pi-spacing-medium);
border-radius: var(--pi-border-radius-medium);
transition: var(--pi-animation);
article {
transition: var(--pi-animation);
transform: scale(1);
transition-delay: 0.1s;
visibility: visible;
opacity: 1;
}
label {
line-height: 1.25;
}
}
}
}
@mixin childrenMenuCollapsed {
position: fixed;
display: none;
visibility: hidden;
opacity: 0;
transition: var(--pi-animation-slow);
}
@mixin childrenMenuPosition($left) {
// Menu item
transform: translate($left, var(--pi-spacing-xxx-large));
}
@mixin childrenMenuAppearance($width: -webkit-fill-available) {
.pi-saas-navbar {
.pi-menu__children {
position: absolute;
flex-direction: column;
gap: var(--pi-spacing-x-small);
width: $width;
padding-top: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-xxxx-small);
padding-bottom: var(--pi-spacing-x-large);
border-radius: var(--pi-border-radius-large);
background-color: var(--pi-color-white);
border: 0.5px solid var(--pi-color-grey-50);
box-shadow: var(--pi-box-shadow-double);
// Submenu entries
& > *:nth-child(n + 1) {
& > *:nth-child(n + 1) {
&:not(.pi-menu-entry__context--children-menu) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
}
}
.pi-menu-event-children {
&.pi-menu-children__entries {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-xxx-small);
& > section {
max-height: 25vh;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.1875rem;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-grey-50);
&:hover {
background-color: var(--pi-color-grey-75);
}
}
}
}
}
.pi-submenu-children__aside-entries {
margin-top: var(--pi-spacing-x-small);
}
.pi-menu-entry {
width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: space-between;
transition: var(--pi-animation);
&:hover {
cursor: pointer;
}
&.pi-menu-entry__context--aside-menu {
button {
width: -webkit-fill-available;
}
}
&.pi-menu-entry__context--children-menu {
padding-bottom: var(--pi-spacing-xxx-small);
border-bottom: 1px solid;
margin-left: calc(
var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)
);
margin-right: calc(
var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)
);
&:nth-of-type(1) {
border-color: var(--pi-color-grey-100);
}
&:nth-of-type(2) {
border-color: var(--pi-color-primary-75);
}
&:nth-of-type(3) {
border-color: var(--pi-color-accent-75);
}
&:nth-of-type(n + 2) {
margin-top: var(--pi-spacing-x-large);
}
}
}
}
}
}
@mixin childrenMenuVisibility {
& > .pi-menu-event-item {
&.has-children {
&.is-selected {
// Child menu visible
.pi-menu__children {
&.is-visible {
opacity: 1;
visibility: visible;
}
&:not(.is-visible) {
display: none;
}
}
}
&:not(.is-selected) {
// Child menu hidden
.pi-menu__children {
&:not(.is-visible) {
display: none;
opacity: 0;
visibility: hidden;
}
}
}
}
}
}
@mixin smallDeviceChildrenMenuPosition {
.pi-saas-navbar {
.pi-menu {
&.pi-menu__children {
left: 0;
bottom: calc(
env(safe-area-inset-bottom) + var(--pi-spacing-medium) +
var(--pi-height-footer)
);
z-index: 99;
}
& > nav {
@include childrenMenuVisibility;
}
}
}
}
@mixin largeDeviceChildrenMenuPosition {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
.pi-menu {
&.pi-menu__parent {
width: -webkit-fill-available;
}
& > nav {
display: flex;
flex-direction: column;
// Hide - show child menu
@include childrenMenuVisibility;
}
}
}
}
}
}
// Menu in navbar
.pi-saas-navbar {
@include parentMenuEntryColor;
@include childrenMenuAppearance;
@include childrenMenuEntryAppearance;
}
html {
&.is-mobile {
@include smallDeviceChildrenMenuPosition;
.pi-shell__deale-saas {
& > div {
@include parentMenuItemCollapsed;
}
}
}
&.is-tablet {
&.is-tablet__small {
@include smallDeviceChildrenMenuPosition;
.pi-shell__deale-saas {
& > div {
@include parentMenuItemCollapsed(3.375rem, medium, 1.1);
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small Device
@media screen and (max-width: 62rem) {
@include childrenMenuAppearance;
.pi-shell__deale-saas {
& > div {
@include parentMenuEntryAppearance(center, 3.25rem);
.pi-saas-navbar {
.pi-menu-entry {
&.pi-menu-entry__context--parent-menu {
gap: 0;
transition: var(--pi-animation-slow);
&:not(.is-active) {
.mat-icon {
color: var(--pi-color-black);
}
}
article {
display: none;
}
}
}
.pi-menu {
& > nav {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--pi-height-footer);
padding-left: var(--pi-spacing-xx-small);
padding-right: var(--pi-spacing-xx-small);
}
}
.pi-chevron-button {
display: none;
}
}
}
}
// Menu in layout
}
}
// Tablet
&.is-tablet {
&.is-tablet__large {
.pi-shell__deale-saas {
& > div {
@include parentMenuEntryAppearance(
center,
var(--pi-size-menu-item-collapsed)
);
@include parentMenuItemCollapsed(
var(--pi-size-menu-item-collapsed),
large,
1.2
);
.pi-saas-navbar {
// Tablet L
.pi-menu {
& > nav {
gap: var(--pi-spacing-xxx-small);
& > .pi-menu-event-item {
.pi-menu-entry {
& > span {
@include childrenMenuCollapsed;
}
}
// Child menu
&.has-children {
.pi-menu__children {
@include childrenMenuPosition(
calc(
var(--pi-width-navbar-collapsed) +
var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) +
var(--pi-spacing-xxx-small)
)
);
}
// Is selected and children is visible
&.is-selected {
&:not(.is-disabled) {
.pi-menu-entry {
&:not(.is-active) {
.mat-icon {
color: var(--pi-color-primary);
}
}
}
}
}
}
}
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
@include childrenMenuAppearance(var(--pi-width-children-menu-expanded));
@include largeDeviceChildrenMenuPosition;
// Menu in layout
.pi-layout {
.pi-menu {
&.pi-menu__parent {
& > nav {
width: calc(
var(--pi-width-navbar-expanded) - var(
--pi-spacing-xxxx-large
) - var(--pi-spacing-xxxx-small)
);
}
.pi-menu-event-item {
& > *:nth-child(1) {
width: 100%;
}
&.has-children {
padding-left: var(--pi-spacing-large);
padding-right: var(--pi-spacing-large);
.pi-menu__children {
transform: translate(-1.25rem, -1rem);
}
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
@include parentMenuItemExpanded;
.pi-shell__deale-saas {
& > div {
// Cursor styles
.pi-menu-event-item {
&:not(.is-active) {
&:hover {
.pi-menu-entry {
&:not(.is-disabled) {
cursor: pointer;
label {
&:hover {
&:not(.is-disabled) {
cursor: pointer;
}
}
}
}
}
}
}
.pi-menu-entry {
&.pi-menu-entry__context--children-submenu {
&:hover {
&:not(.is-active):not(.is-disabled) {
cursor: pointer;
}
}
article,
span,
label {
&:hover {
cursor: pointer;
}
}
}
}
}
// Expanded
&.navbar-is-expanded {
@include parentMenuEntryAppearance(
flex-start,
var(--pi-size-menu-item-expanded)
);
// Navbar
.pi-saas-navbar {
.pi-menu {
& > nav {
gap: var(--pi-spacing-x-small);
& > .pi-menu-event-item {
// Child menu
&.has-children {
.pi-menu__children {
@include childrenMenuPosition(
calc(
var(--pi-width-navbar-expanded) +
var(--pi-spacing-xx-large)
)
);
}
}
}
}
}
}
}
// Collapsed
&.navbar-is-collapsed {
@include parentMenuEntryAppearance(
center,
var(--pi-size-menu-item-collapsed)
);
@include parentMenuItemCollapsed(
var(--pi-size-menu-item-collapsed),
large,
1.2
);
.pi-saas-navbar {
.pi-menu {
& > nav {
gap: var(--pi-spacing-xxx-small);
& > .pi-menu-event-item {
// Child menu
&.has-children {
.pi-menu__children {
@include childrenMenuPosition(
calc(
var(--pi-width-navbar-collapsed) +
var(--pi-spacing-xx-large) +
var(--pi-spacing-xx-large) +
var(--pi-spacing-large) + var(--pi-spacing-x-large)
)
);
}
}
}
}
}
}
}
}
}
}
}

286
libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss
View File

@@ -1,286 +0,0 @@
.pi-saas-navbar {
position: fixed;
z-index: 99;
background-color: var(--pi-color-white);
border: 1px solid var(--pi-color-white-900);
border-radius: var(--pi-border-radius-large);
.pi-headline {
margin: auto;
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
.pi-headline {
width: calc(100% - var(--pi-spacing-x-large));
padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large);
}
.pi-chevron-button {
width: var(--pi-spacing-x-large);
margin-bottom: 1.125rem;
padding: 0.1375rem;
}
}
}
.pi-chevron-button {
position: relative;
left: var(--pi-spacing-small);
border-radius: 50%;
box-shadow: var(--pi-box-shadow);
}
}
@mixin multispaceNavbarGridLargeDevice {
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pi-spacing-xxx-small);
.pi-divider {
width: -webkit-fill-available;
max-width: calc(100% - var(--pi-spacing-xxxx-large));
}
}
}
}
@mixin multispaceNavbarGridSmallDevice {
// Advisor Profile Multispace
.is-advisor {
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
display: flex;
flex-direction: row-reverse;
align-items: center;
.pi-menu {
&.pi-menu__parent {
&:first-of-type {
width: 20%;
& > nav {
padding-left: unset;
.pi-menu-event-item {
&.has-children {
border-left: 1px solid var(--pi-color-grey-75);
}
}
}
}
&:last-of-type {
width: 80%;
& > nav {
padding-right: unset;
}
}
}
}
}
}
}
}
html {
// Mobile & Tablet
&.is-mobile {
@include multispaceNavbarGridSmallDevice;
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
left: var(--pi-spacing-medium);
bottom: var(--pi-spacing-medium);
width: calc(
100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)
);
}
}
}
}
&:not(.is-desktop) {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
position: fixed;
height: var(--pi-height-footer);
box-shadow: var(--pi-box-shadow-panel);
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top,
&.pi-saas-navbar-content__bottom {
display: none;
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include multispaceNavbarGridSmallDevice;
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
left: var(--pi-spacing-x-large);
bottom: var(--pi-spacing-x-large);
width: calc(
100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
}
}
}
// Tablet L
&.is-tablet__large {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
width: var(--pi-width-navbar-collapsed);
box-shadow: var(--pi-box-shadow-panel);
.pi-headline {
height: 5.25rem;
max-width: 3.35rem;
padding: 1.6rem var(--pi-spacing-small);
}
.pi-chevron-button {
display: none;
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > .pi-chip {
transform: scale(0.8);
img {
transform: scale(0.8);
}
}
}
&.pi-saas-navbar-content__bottom {
padding: var(--pi-spacing-x-large) 0;
margin: 0 auto;
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
@include multispaceNavbarGridLargeDevice;
.pi-shell__deale-saas {
& > div {
&:not(.is-fullscreen) {
.pi-saas-navbar {
top: var(--pi-spacing-x-large);
left: var(--pi-spacing-x-large);
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
.pi-chip {
margin: auto;
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
width: var(--pi-width-navbar-expanded);
box-shadow: var(--pi-box-shadow-panel);
transition: var(--pi-animation);
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > header {
display: flex;
align-items: flex-end;
}
& > .pi-chip {
margin: auto;
transform: scale(0.9);
img {
transform: scale(0.9);
}
}
}
&.pi-saas-navbar-content__bottom {
padding: var(--pi-spacing-x-large) 0;
text-align: center;
}
}
.pi-headline {
transition: var(--pi-animation);
}
}
// Expanded
&.navbar-is-expanded {
.pi-saas-navbar {
width: var(--pi-width-navbar-expanded);
.pi-headline {
max-width: 8rem;
height: 5rem;
opacity: 0;
&.pi-logo {
transition: var(--pi-animation);
transition-duration: 0.35s;
transition-delay: 0.15s;
opacity: 1;
}
& > .pi-chip {
transform: scale(0.9);
}
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
padding: var(--pi-spacing-x-large) 0;
}
}
}
}
// Collapsed
&.navbar-is-collapsed {
.pi-saas-navbar {
width: var(--pi-width-navbar-collapsed);
.pi-headline {
max-width: 3.35rem;
height: 5.25rem;
padding: 1.25rem 0 0 var(--pi-spacing-x-large);
opacity: 0;
transition: var(--pi-animation);
&.pi-logo-simple {
transition: var(--pi-animation);
transition-duration: 0.35s;
transition-delay: 0.15s;
opacity: 1;
}
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > .pi-chip {
transform: scale(0.8);
}
}
}
}
}
}
}
}
}
}

5
libs/ui/src/lib/styles/deale-saas/shell/index.scss
View File

@@ -1,5 +0,0 @@
@forward 'pi-aside';
@forward 'pi-header';
@forward 'pi-main';
@forward 'pi-menu';
@forward 'pi-navbar';

293
libs/ui/src/lib/styles/deale-saas/theming/_pi-user-type-theming.scss
View File

@@ -1,293 +0,0 @@
@mixin asideColor($color) {
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
// Aside theme
&.pi-saas-aside__theme {
// Not custom
&:not(.is-custom) {
background-color: var(--pi-color-#{$color}-50);
.pi-close-button {
&:hover {
&::before,
&::after {
background-color: var(--pi-color-#{$color});
}
}
}
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-#{$color}-100);
&:hover {
background-color: var(--pi-color-#{$color}-200);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-#{$color}-100);
}
.pi-list-item {
transition: var(--pi-animation);
&.is-clickable {
&:hover {
&.pi-color__primary {
&:not(.is-disabled):not(.is-active) {
background-color: var(--pi-color-#{$color}-75);
}
}
}
}
&.pi-color__primary {
&.is-active {
background-color: var(--pi-color-#{$color}-75);
}
}
.pi-chip {
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
color: var(--pi-color-#{$color});
label {
color: var(--pi-color-#{$color});
}
}
}
}
}
}
// User profile
&.pi-saas-admin-user-profile {
.pi-chip {
// Profile
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--fill {
&:not(.pi-chip__single-icon) {
background-color: var(--pi-color-#{$color});
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
}
}
}
}
// Subscription
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
color: var(--pi-color-#{$color});
}
}
}
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
label {
color: var(--pi-color-#{$color});
}
}
}
}
}
.pi-icon {
&.is-stroked {
&.pi-icon__appearance--fill {
&.pi-icon__x-large {
border-color: var(--pi-color-#{$color}-200);
background-color: var(--pi-color-#{$color}-75);
.mat-icon {
color: var(--pi-color-#{$color});
}
}
}
}
}
}
}
}
// Custom
&.is-custom {
background-color: var(--pi-color-primary-50);
.pi-close-button {
&:hover {
&::before,
&::after {
background-color: var(--pi-color-primary);
}
}
}
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-100);
&:hover {
background-color: var(--pi-color-primary-200);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-primary-100);
}
.pi-list-item {
transition: var(--pi-animation);
&.is-clickable {
&:hover {
&.pi-color__primary {
&:not(.is-disabled):not(.is-active) {
background-color: var(--pi-color-primary-100);
}
}
}
}
&.pi-color__primary {
&.is-active {
background-color: var(--pi-color-primary-100);
}
}
.pi-chip {
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
color: var(--pi-color-primary);
label {
color: var(--pi-color-primary);
}
}
}
}
}
}
// User profile
&.pi-saas-admin-user-profile {
.pi-chip {
// Profile
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--fill {
&:not(.pi-chip__single-icon) {
background-color: var(--pi-color-primary);
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
}
}
}
}
// Subscription
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
color: var(--pi-color-primary);
}
}
}
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
label {
color: var(--pi-color-primary);
}
}
}
}
}
.pi-icon {
&.is-stroked {
&.pi-icon__appearance--fill {
&.pi-icon__x-large {
border-color: var(--pi-color-primary-200);
background-color: var(--pi-color-primary-200-rgba);
.mat-icon {
color: var(--pi-color-primary);
}
}
}
}
}
}
}
}
}
// Aside white
&.pi-saas-aside__white {
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-grey-25);
&:hover {
background-color: var(--pi-color-grey-75);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-white-900);
}
}
}
}
&:not(.is-fullscreen) {
// Large device
@media screen and (min-width: 62rem) {
.pi-saas-aside {
&.pi-saas-aside__theme {
border-width: 1px;
border-style: solid;
&:not(.is-custom) {
border-color: var(--pi-color-#{$color}-100);
}
&.is-custom {
border-color: var(--pi-color-primary-100);
}
}
}
}
}
}
}
}
.is-company {
@include asideColor(primary);
}
.is-investor {
@include asideColor(accent);
}
.is-advisor {
@include asideColor(highlighted);
}

1
libs/ui/src/lib/styles/deale-saas/theming/index.scss
View File

@@ -1 +0,0 @@
@forward 'pi-user-type-theming';

47
libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss
View File

@@ -1,47 +0,0 @@
.pi-wrapper {
// Header Wrapper
&.pi-wrapper__header {
// Center
&.pi-wrapper__align-items--center {
.pi-header-wrapper-content {
align-items: center;
}
}
}
}
.pi-layout__07-list {
.pi-header-wrapper-content {
&.pi-header-wrapper-content__left {
width: 100%;
}
&.pi-header-wrapper-content__right {
justify-content: flex-end;
display: flex;
& > aside {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--pi-spacing-xx-small);
.pi-select {
&.pi-select__picked-option-type--button {
.pi-select-picked-option {
background-color: var(--pi-color-white);
}
&:not(:hover) {
.pi-select-picked-option {
box-shadow: var(--pi-box-shadow);
}
}
}
}
.pi-toggle-button {
& > button {
border-radius: var(--pi-border-radius-large);
}
}
}
}
}
}

42
libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss
View File

@@ -1,42 +0,0 @@
@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) {
.pi-shell__deale-saas {
.pi-wrapper {
// Max width
&.pi-wrapper__full-width,
&.pi-wrapper__full-width-centered {
max-width: $max-width;
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-wrapper {
div {
// Fixed wrapper
&.is-fixed {
position: fixed;
z-index: 99;
left: 0;
bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom));
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
right: 0;
button {
min-width: 50%;
box-shadow: var(--pi-box-shadow);
}
}
}
}
}
// Desktop
&.is-desktop {
@include dealeSaaSWrapperMaxWidth;
}
}

2
libs/ui/src/lib/styles/deale-saas/wrappers/index.scss
View File

@@ -1,2 +0,0 @@
@forward 'pi-header-wrapper';
@forward 'pi-wrapper';

39
libs/ui/src/lib/styles/deale-website/components/_pi-text.scss
View File

@@ -1,39 +0,0 @@
h1 {
line-height: 110%;
}
html {
// Mobile
&.is-mobile {
.pi-website-text {
// xxxxl - 2.875rem - 46px
&.pi-website-text__size--xxxxl {
font: {
size: 2.875rem;
}
}
}
}
// Tablet
&.is-tablet {
.pi-website-text {
// xxxxl - 62px
&.pi-website-text__size--xxxxl {
font: {
size: 3.875rem;
}
}
}
}
// Desktop
&.is-desktop {
.pi-website-text {
// xxxxl - 4.5rem - 72px
&.pi-website-text__size--xxxxl {
font: {
size: var(--pi-public-font-size-xxx-large);
}
}
}
}
}

1
libs/ui/src/lib/styles/deale-website/components/index.scss
View File

@@ -1 +0,0 @@
@forward 'pi-text';

5
libs/ui/src/lib/styles/deale-website/index.scss
View File

@@ -1,5 +0,0 @@
@use 'components' as *;
@use 'layouts' as *;
@use 'screens' as *;
@use 'shell' as *;
@use 'wrappers' as *;

106
libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss
View File

@@ -1,106 +0,0 @@
.pi-layout {
&.pi-layout__02-full-width {
&:not(.pi-layout__02a-full-width--auto) {
& > *:nth-child(1) {
&
> *:nth-child(n + 1):not(
:is(h1, h2, h3, h4, h5, p, i, figcaption, small)
) {
margin: 0 auto;
}
& > *:nth-child(n + 1):is(h1, h2, h3, h4, h5, p, i, figcaption, small) {
margin: var(--pi-spacing-medium) auto;
}
}
}
}
}
@mixin layoutBasicPages(
$padding-top-1: calc(
var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)
),
$padding-top-2: var(--pi-spacing-xxx-large)
) {
.pi-shell__deale-website {
.pi-container-layout {
&.pi-layout {
&.pi-layout__02-full-width {
& > *:nth-child(1) {
padding-top: $padding-top-1;
}
& > *:nth-child(2) {
padding-top: $padding-top-2;
padding-bottom: $padding-top-2;
}
}
}
}
}
}
html {
&.is-mobile {
@include layoutBasicPages;
.pi-layout {
&.pi-layout__02-full-width {
padding: var(--pi-spacing-x-large);
}
}
}
&.is-tablet {
@include layoutBasicPages(
calc(
var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)
),
var(--pi-spacing-xxxx-large)
);
.pi-layout {
&.pi-layout__02-full-width {
padding: var(--pi-spacing-xx-large);
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__02-full-width {
max-width: 100%;
}
}
}
// Desktop
&.is-desktop {
@include layoutBasicPages(
calc(
var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)
),
var(--pi-spacing-xxxx-large)
);
.pi-layout {
&.pi-layout__02-full-width {
padding: var(--pi-spacing-xxxx-large) var(--pi-spacing-xxxx-large);
// Desktop M
@media screen and (min-width: 90rem) and (max-width: 120rem) {
& > *:nth-child(n + 1) {
max-width: var(--pi-public-width-container);
}
}
&:not(.pi-container-layout) {
// Desktop S
@media screen and (min-width: 77.5rem) and (max-width: 90rem) {
& > *:nth-child(n + 1) {
max-width: 100%;
}
}
// Desktop L
@media screen and (min-width: 120rem) {
& > *:nth-child(n + 1) {
max-width: var(--pi-public-width-container-l);
}
}
}
}
}
}
}

9
libs/ui/src/lib/styles/deale-website/layouts/_pi-02a-full-width-auto-layout.scss
View File

@@ -1,9 +0,0 @@
.pi-layout {
&.pi-layout__02-full-width {
&.pi-layout__02a-full-width--auto {
& > *:nth-child(n + 1) {
margin: 0 auto;
}
}
}
}

117
libs/ui/src/lib/styles/deale-website/layouts/_pi-03-vertically-centered-layout.scss
View File

@@ -1,117 +0,0 @@
@mixin headingsWidth($max-width: 100%) {
.pi-container-layout {
.pi-layout {
&.pi-layout__03-vertically-centered {
.pi-text__centered {
& > *:nth-child(n + 1) {
&:is(h2, h3, h4, h5) {
max-width: $max-width;
margin: auto;
}
}
}
}
}
}
}
//
@mixin thankYouPageHeaderHeight($device: mobile) {
.pi-layout {
&.pi-layout__03-vertically-centered {
&.pi-layout__full {
& > .pi-wrapper {
&.pi-background-image {
min-height: calc(100vh - var(--pi-public-height-header-#{$device}));
}
}
}
}
}
}
.pi-container-layout {
.pi-layout {
&.pi-layout__03-vertically-centered {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-size: cover;
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
@include headingsWidth;
// Small device
@media screen and (max-width: 62rem) {
@include thankYouPageHeaderHeight;
}
&:not(.is-desktop__large) {
.pi-layout {
&.pi-layout__03-vertically-centered {
&.pi-layout__02-full-width {
&:not(.pi-layout__06-edge-to-edge) {
& > *:nth-child(1) {
max-width: 100%;
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
@include thankYouPageHeaderHeight(desktop);
}
}
// Desktop
&.is-desktop {
.pi-layout {
@include headingsWidth(75%);
&.pi-layout__03-vertically-centered {
&.pi-layout__02-full-width {
&:not(.pi-layout__06-edge-to-edge) {
max-width: var(--pi-public-width-container-l);
}
&.pi-layout__02a-full-width--auto {
margin: auto;
}
}
}
}
&:not(.is-desktop__large) {
.pi-layout {
&.pi-layout__03-vertically-centered {
& > *:nth-child(1) {
max-width: 100%;
}
}
}
}
&.is-desktop__medium {
@include headingsWidth(70%);
}
&.is-desktop__large {
@include headingsWidth(66.66%);
.pi-layout {
&.pi-layout__03-vertically-centered {
&:not(.pi-layout__06-edge-to-edge) {
& > *:nth-child(1) {
max-width: var(--pi-public-width-container-l);
}
}
}
}
}
}
}

9
libs/ui/src/lib/styles/deale-website/layouts/_pi-06-edge-to-edge-layout.scss
View File

@@ -1,9 +0,0 @@
.pi-layout {
&.pi-layout__06-edge-to-edge {
width: 100%;
& > *:nth-child(n + 1) {
width: 100%;
margin: 0 auto;
}
}
}

61
libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss
View File

@@ -1,61 +0,0 @@
@mixin websiteHomeUserSpacings($max-width) {
.pi-layout {
&.pi-website-home-user {
.pi-list-item-content__left {
max-width: $max-width;
}
}
}
}
@mixin edgeToEdgeLayoutCarouselBehavior($max-width) {
.pi-layout {
&.pi-layout__06-edge-to-edge {
.pi-carousel {
& > main {
& > section {
max-width: $max-width;
}
}
}
}
}
}
.pi-layout {
&.pi-website-home-user {
.pi-carousel {
display: block;
}
.pi-switch-button {
margin-top: var(--pi-spacing-xxx-large);
}
&:not(.pi-website-home-user__advisor) {
.pi-carousel {
margin-top: var(--pi-spacing-xxx-large);
}
}
}
}
html {
// Desktop
&.is-desktop {
// Desktop S & M
&:not(.is-desktop__large) {
@include edgeToEdgeLayoutCarouselBehavior(
var(--pi-public-width-container)
);
}
// Desktop M
&.is-desktop__medium {
@include websiteHomeUserSpacings(80%);
}
// Desktop L
&.is-desktop__large {
@include edgeToEdgeLayoutCarouselBehavior(
var(--pi-public-width-container-l)
);
@include websiteHomeUserSpacings(66.66%);
}
}
}

176
libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss
View File

@@ -1,176 +0,0 @@
.pi-layout {
&.pi-layout__07-list {
padding: 0;
overflow-y: hidden;
& > header {
position: fixed;
z-index: 99;
display: flex;
align-items: flex-end;
width: 100%;
margin: auto;
background-color: rgba($color: white, $alpha: 0.6);
.pi-wrapper {
&.pi-wrapper__header {
margin: auto;
padding-bottom: var(--pi-spacing-xx-small);
}
}
}
& > section {
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--pi-spacing-medium);
height: 7rem;
text-align: center;
background-color: var(--pi-color-white);
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__07-list {
& > header {
.pi-wrapper {
&.pi-wrapper__header {
min-height: var(--pi-height-layout-header);
width: 100%;
padding-right: var(--pi-spacing-x-large);
padding-left: var(--pi-spacing-x-large);
header {
display: flex;
align-items: center;
& > h1 {
margin-top: var(--pi-spacing-medium);
font: {
size: var(--pi-font-size-large);
}
}
}
}
}
}
& > section {
padding-top: calc(
var(--pi-height-layout-header) - var(--pi-spacing-medium)
);
.pi-wrapper {
&.pi-wrapper__list {
max-height: calc(
100vh - var(--pi-public-height-header-mobile) - var(
--pi-height-layout-header
) -
7.35rem
);
.pi-data-grid__mode--grid {
justify-content: center;
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-layout {
&.pi-layout__07-list {
& > header {
.pi-wrapper {
&.pi-wrapper__header {
min-height: var(--pi-height-layout-header);
padding: var(--pi-spacing-xxx-large) var(--pi-spacing-x-large);
}
}
}
& > section {
padding-top: calc(
var(--pi-height-layout-header) - var(--pi-spacing-medium)
);
.pi-wrapper {
&.pi-wrapper__list {
max-height: calc(
100vh - var(--pi-public-height-header-desktop) - var(
--pi-height-layout-header
) -
7.35rem
);
& > section {
.pi-data-grid__mode--grid {
justify-content: center;
max-width: var(--pi-width-container-l);
margin: auto;
padding-top: 3rem;
padding-bottom: var(--pi-spacing-xxxx-large);
}
}
}
}
}
}
}
// Desktop medium & large
&:not(.is-desktop__large) {
.pi-layout {
&.pi-layout__07-list {
& > header {
.pi-wrapper {
&.pi-wrapper__header {
width: 100%;
padding-right: var(--pi-spacing-xxxx-large);
padding-left: var(--pi-spacing-xxxx-large);
header {
width: 80%;
}
}
}
}
}
}
}
// Desktop large
&.is-desktop__large {
.pi-layout {
&.pi-layout__07-list {
& > header {
.pi-wrapper {
&.pi-wrapper__header {
min-height: var(--pi-height-layout-header);
width: var(--pi-public-width-container-l);
padding-right: var(--pi-spacing-xxx-large);
padding-left: var(--pi-spacing-xxx-large);
}
}
}
& > section {
padding-top: calc(
var(--pi-height-layout-header) - var(--pi-spacing-medium)
);
.pi-wrapper {
&.pi-wrapper__list {
max-height: calc(
100vh - var(--pi-public-height-header-desktop) - var(
--pi-height-layout-header
) -
7.35rem
);
}
}
}
}
}
}
}
}

57
libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss
View File

@@ -1,57 +0,0 @@
@mixin containerSpacings(
$padding-top: calc(
var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)
),
$default-vertical-padding: calc(
var(--pi-spacing-xxx-large) + var(--pi-spacing-xxx-large)
),
$default-vertical-margin: var(--pi-spacing-xx-large)
) {
.pi-container-layout {
.pi-layout {
&:nth-child(1) {
&:not(.pi-layout__09-pricing):not(.pi-website-home-user):not(
.pi-layout__03-vertically-centered
) {
& > *:nth-child(1) {
padding-top: $padding-top;
}
}
}
}
.pi-layout + .pi-layout__03-vertically-centered {
& > *:nth-child(1) {
padding-top: $default-vertical-padding;
padding-bottom: $default-vertical-padding;
}
}
.pi-layout + .pi-layout {
margin-top: $default-vertical-margin;
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
@include containerSpacings;
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
@include containerSpacings(
calc(
var(--pi-public-height-header-desktop) +
var(--pi-spacing-xxxx-large) + var(--pi-spacing-x-large)
),
var(--pi-spacing-xxxx-large),
var(--pi-spacing-xx-large)
);
}
}
}

33
libs/ui/src/lib/styles/deale-website/layouts/_pi-layout.scss
View File

@@ -1,33 +0,0 @@
@mixin layoutSpacings($padding: var(--pi-spacing-xx-large)) {
.pi-container-layout {
.pi-layout {
&:not(.pi-layout__03-vertically-centered) {
& > *:first-child {
padding-top: $padding;
}
& > *:last-child {
padding-bottom: $padding;
}
}
}
.pi-domain-component {
display: block;
width: -webkit-fill-available;
}
}
}
html {
// Mobile
&.is-mobile {
@include layoutSpacings;
}
// Tablet
&.is-tablet {
@include layoutSpacings(var(--pi-spacing-xxx-large));
}
// Desktop
&.is-desktop {
@include layoutSpacings(var(--pi-spacing-xxxx-large));
}
}

8
libs/ui/src/lib/styles/deale-website/layouts/index.scss
View File

@@ -1,8 +0,0 @@
@forward 'pi-02-full-width-layout';
@forward 'pi-02a-full-width-auto-layout';
@forward 'pi-03-vertically-centered-layout';
@forward 'pi-06-edge-to-edge-layout';
@forward 'pi-06b-edge-to-edge-home-users-layout';
@forward 'pi-07-list-layout';
@forward 'pi-container-layout';
@forward 'pi-layout';

103
libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss
View File

@@ -1,103 +0,0 @@
@mixin thankYouScreenHeader($device: mobile) {
.pi-website-screen {
&.pi-website-screen__00-type-thank-you {
& > header {
display: block;
width: -webkit-fill-available;
padding-top: calc(
var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device})
);
}
}
}
}
.pi-website-screen {
&.pi-website-screen__00-type-thank-you {
justify-content: space-evenly !important;
& > *:nth-child(n + 1) {
text-align: center;
}
& > picture {
& > main {
display: grid;
height: 100%;
@for $i from 1 through 2 {
& > *:nth-child(#{$i}) {
grid-area: item#{$i};
align-self: center;
height: fit-content;
}
}
}
}
}
}
@mixin thankYouScreenMain(
$cols: 4,
$rows: 6,
$areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .'
'. . item2 item2' '. . item2 item2',
$min-height: 50
) {
.pi-website-screen {
&.pi-website-screen__00-type-thank-you {
& > picture {
& > main {
grid-template-columns: repeat(#{$cols}, 1fr);
grid-template-rows: repeat(#{$rows}, 1fr);
grid-template-areas: $areas;
min-height: #{$min-height}vh;
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include thankYouScreenMain;
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small devices
@media screen and (max-width: 62rem) {
@include thankYouScreenHeader;
}
}
// Tablet
&.is-tablet {
@include thankYouScreenMain(
6,
6,
'. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .'
'. item1 item1 . item2 item2' '. item1 item1 . item2 item2'
'. . . . . .',
50
);
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large devices
@media screen and (min-width: 62rem) {
@include thankYouScreenHeader(desktop);
}
}
&.is-desktop {
@include thankYouScreenMain(
12,
6,
'. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .'
'. . item1 item1 item1 . . . . . . .'
'. . item1 item1 item1 . . item2 item2 item2 . .'
'. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .',
50
);
}
}

1
libs/ui/src/lib/styles/deale-website/screens/index.scss
View File

@@ -1 +0,0 @@
@forward 'pi-00-thank-you-screen';

197
libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss
View File

@@ -1,197 +0,0 @@
@mixin websiteFooterTop($flex-direction: column) {
.pi-website-footer {
& > footer {
flex-direction: $flex-direction;
}
}
}
@mixin websiteFooterBottom($flex-direction: column-reverse) {
.pi-website-footer {
& > aside {
flex-direction: $flex-direction;
}
}
}
@mixin websiteFooterTopLeft(
$flex-direction: column,
$width: 100%,
$justify-right: flex-start
) {
.pi-website-footer-content__top-left {
flex-direction: $flex-direction;
width: $width;
& > section {
justify-content: $justify-right;
}
}
}
@mixin websiteFooterTopRight($columns: 2, $width: 100%) {
.pi-website-footer-content__top-right {
grid-template-columns: repeat($columns, 1fr);
width: $width;
}
}
@mixin websiteFooterBottomLeft($text-align: flex-start) {
.pi-website-footer-content__bottom-left {
text-align: $text-align;
}
}
@mixin websiteFooterBottomRight() {
.pi-website-footer-content__bottom-right {
}
}
@mixin websiteFooterGap($gap: var(--pi-spacing-x-large)) {
.pi-website-footer {
gap: $gap;
& > footer,
& > aside {
gap: $gap;
}
& > footer {
& > .pi-website-footer-content {
&.pi-website-footer-content__top-right {
gap: $gap;
}
}
}
}
}
@mixin websiteFooterWidth($width: calc(100% - var(--pi-spacing-xx-large))) {
.pi-website-footer {
& > *:nth-child(n + 2) {
width: $width;
margin: 0 auto;
}
}
}
.pi-website-footer {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: -webkit-fill-available;
background-color: var(--pi-color-grey-25);
// divider
& > span {
width: 100%;
height: 4.25rem;
left: 0px;
background: linear-gradient(
to right bottom,
var(--pi-color-white) 49%,
var(--pi-color-grey-25) 50%
);
}
& > footer,
& > aside {
display: flex;
padding: var(--pi-spacing-xx-large);
}
& > footer {
& > .pi-website-footer-content {
gap: var(--pi-spacing-small);
&.pi-website-footer-content__top-left {
display: flex;
justify-content: space-between;
.pi-headline {
& > figure {
max-width: 5.625rem;
}
}
}
&.pi-website-footer-content__top-right {
margin: 0 auto;
display: grid;
.pi-menu {
& > nav {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-small);
& > .pi-menu-event-item:first-child {
margin-bottom: var(--pi-spacing-small);
font: {
weight: 600;
}
}
& > :nth-child(n + 2) {
cursor: pointer;
}
}
}
}
}
}
& > aside {
align-items: center;
justify-content: space-between;
max-height: 12.5625rem;
border-top: 1px solid var(--pi-color-grey-100);
padding: var(--pi-spacing-x-large);
}
}
html {
// Mobile
&.is-mobile {
@include websiteFooterBottom;
@include websiteFooterBottomLeft(center);
@include websiteFooterGap;
@include websiteFooterTopLeft;
@include websiteFooterTopRight;
@include websiteFooterWidth;
}
// Tablet
&.is-tablet {
@include websiteFooterWidth(calc(100% - 3rem));
// Tablet S
@media screen and (max-width: 62rem) {
@include websiteFooterTopLeft(row, 100%, flex-end);
@include websiteFooterTopRight(3);
}
// Tablet L
@media screen and (min-width: 62rem) {
@include websiteFooterTopLeft(column, 25%);
@include websiteFooterTopRight(3, 75%);
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Large device
@media screen and (max-width: 62rem) {
@include websiteFooterTop;
}
}
// Tablet & Desktop
&:not(.is-mobile) {
@include websiteFooterBottom(row);
@include websiteFooterGap(var(--pi-spacing-xxxx-large));
}
// Desktop
&.is-desktop {
@include websiteFooterTop(row);
@include websiteFooterTopLeft(column, 25%);
@include websiteFooterTopRight(3, 75%);
// Desktop S & M
&:not(.is-desktop__large) {
@include websiteFooterWidth(var(--pi-public-width-container));
}
// Desktop L
&.is-desktop__large {
@include websiteFooterWidth(var(--pi-public-width-container-l));
}
}
}

36
libs/ui/src/lib/styles/deale-website/shell/_pi-main.scss
View File

@@ -1,36 +0,0 @@
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-shell {
&.pi-shell__deale-website {
display: block;
max-width: 100vw;
overflow-x: hidden;
& > div {
&.is-menu-open {
position: fixed;
&::after {
content: '';
position: fixed;
z-index: 9;
height: 100vh;
width: 100%;
top: 0;
left: 0;
background-color: rgba($color: #0d2a6b, $alpha: 0.5);
}
.pi-container-layout {
& > .is-fixed {
display: none;
}
}
}
}
}
}
}
}
}

482
libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss
View File

@@ -1,482 +0,0 @@
@keyframes gradient {
0% {
background-position: 0%;
}
25% {
background-position: 25%;
}
50% {
background-position: 50%;
}
75% {
background-position: 75%;
}
100% {
background-position: 100%;
}
}
@mixin parentMenuItemColorLargeDevice($color, $border-color, $text-gradient) {
&:hover {
color: $color;
background: $border-color;
background-color: rgba($color: white, $alpha: 0.33);
animation: gradient 1.5s linear infinite;
animation-direction: alternate-reverse;
background-size: 150% 300%;
border: 0.0625rem solid transparent;
&::before {
background-color: rgba($color: white, $alpha: 0.0125);
}
& > span {
& > span {
background-image: $text-gradient;
}
}
}
}
// Mode light
@mixin topbarActionButtonLargeDeviceModeLight {
.pi-website-topbar-content {
&.pi-website-topbar-content__right {
// Login
.pi-button__action {
&.pi-button__type--menu-item {
box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66);
& > span {
& > span {
background-color: var(--pi-color-white);
}
}
&::before {
background-color: rgba($color: white, $alpha: 0.0125);
}
background-color: var(--pi-color-white);
border-color: var(--pi-color-primary);
& > svg {
color: var(--pi-color-highlighted);
}
& > span {
background-image: linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
);
}
}
}
}
}
}
@mixin topbarParentMenuItemLargeDeviceModeLight {
.pi-menu {
.pi-menu-event-item {
box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66);
& > span {
& > span {
background-color: var(--pi-color-white);
}
}
}
}
}
@mixin parentMenuItemNotHoverColorModeLight {
&:not(:hover) {
border-color: rgba($color: white, $alpha: 0.66);
background-color: rgba($color: white, $alpha: 0.15);
}
}
@mixin parentMenuItemColorLargeDeviceModeLight {
.pi-website-topbar-content {
// Center
&.pi-website-topbar-content__center {
.pi-menu {
&.pi-menu__parent {
& > nav {
& > .pi-menu-event-item {
// Company
&:nth-child(1) {
@include parentMenuItemColorLargeDevice(
var(--pi-color-primary),
(
linear-gradient(
rgba($color: white, $alpha: 0.125),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-primary-200),
var(--pi-color-primary)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
)
);
}
// Investor
&:nth-child(2) {
@include parentMenuItemColorLargeDevice(
var(--pi-color-accent),
(
linear-gradient(
rgba($color: white, $alpha: 0.125),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-accent-200),
var(--pi-color-accent)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-accent),
var(--pi-color-accent-900)
)
);
}
// Advisor
&:nth-child(3) {
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(
rgba($color: white, $alpha: 0.5),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-highlighted-200),
var(--pi-color-highlighted)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
@include parentMenuItemNotHoverColorModeLight;
}
}
}
}
}
// Right
&.pi-website-topbar-content__right {
.pi-menu {
&:not(.pi-menu__children) {
& > nav {
& > .pi-menu-event-item {
// Prices
&:nth-of-type(1) {
@include parentMenuItemNotHoverColorModeLight;
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(
rgba($color: white, $alpha: 0.95),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-highlighted-200),
var(--pi-color-highlighted)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
}
}
}
}
// Login
.pi-button__action {
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(
rgba($color: white, $alpha: 0.95),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-highlighted-200),
var(--pi-color-highlighted)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
}
}
}
// Mode dark
@mixin topbarActionButtonLargeDeviceModeDark {
.pi-website-topbar-content {
&.pi-website-topbar-content__right {
// Login
.pi-button__action {
box-shadow: 0 0 0 0 rgba($color: #0d2a6b, $alpha: 0.66);
& > span {
background-image: linear-gradient(
30deg,
var(--pi-color-white),
var(--pi-color-white)
);
& > span {
background-color: var(--pi-color-highlighted);
}
}
&::before {
background-color: rgba($color: #0d2a6b, $alpha: 0.0125);
}
background-color: var(--pi-color-highlighted);
border-color: var(--pi-color-highlighted);
& > svg {
color: var(--pi-color-white);
}
&:hover {
& > span {
background-image: linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted)
);
& > span {
background-color: var(--pi-color-highlighted-100);
}
}
& > svg {
color: var(--pi-color-highlighted);
}
}
}
}
}
}
@mixin topbarParentMenuItemLargeDeviceModeDark {
.pi-menu {
.pi-menu-event-item {
box-shadow: 0 0 0 0 rgba($color: #3d3d3d, $alpha: 0.26);
& > span {
& > span {
background-color: var(--pi-color-grey);
}
}
}
}
}
@mixin parentMenuItemNotHoverColorModeDark {
&:not(:hover) {
border-color: rgba($color: #3d3d3d, $alpha: 0.36);
background-color: rgba($color: white, $alpha: 0.44);
}
}
@mixin parentMenuItemColorLargeDeviceModeDark {
.pi-website-topbar-content {
// Center
&.pi-website-topbar-content__center {
.pi-menu {
&.pi-menu__parent {
& > nav {
& > .pi-menu-event-item {
// Company
&:nth-child(1) {
@include parentMenuItemColorLargeDevice(
var(--pi-color-primary),
(
linear-gradient(
rgba($color: white, $alpha: 0.125),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-primary-75),
var(--pi-color-primary-200)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
)
);
}
// Investor
&:nth-child(2) {
@include parentMenuItemColorLargeDevice(
var(--pi-color-accent),
(
linear-gradient(
rgba($color: white, $alpha: 0.125),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-accent-100),
var(--pi-color-accent-200)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-accent),
var(--pi-color-accent-900)
)
);
}
// Advisor
&:nth-child(3) {
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(
rgba($color: white, $alpha: 0.5),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-highlighted-100),
var(--pi-color-highlighted-200)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
@include parentMenuItemNotHoverColorModeDark;
}
}
}
}
}
// Right
&.pi-website-topbar-content__right {
.pi-menu {
&:not(.pi-menu__children) {
& > nav {
& > .pi-menu-event-item {
// Prices
&:nth-of-type(1) {
@include parentMenuItemNotHoverColorModeDark;
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(
rgba($color: white, $alpha: 0.95),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-highlighted-200),
var(--pi-color-highlighted)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
}
}
}
}
// Login
.pi-button__action {
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(
rgba($color: white, $alpha: 0.95),
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(
to right,
var(--pi-color-highlighted-200),
var(--pi-color-highlighted)
)
border-box
),
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
}
}
}
html {
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
// Topbar
.pi-website-topbar {
// Mode light (White menu)
&:not(.is-mode-dark) {
@include parentMenuItemColorLargeDeviceModeLight;
@include topbarParentMenuItemLargeDeviceModeLight;
@include topbarActionButtonLargeDeviceModeLight;
}
// Mode dark
&.is-mode-dark {
@include parentMenuItemColorLargeDeviceModeDark;
@include topbarParentMenuItemLargeDeviceModeDark;
@include topbarActionButtonLargeDeviceModeDark;
}
}
}
}
}

518
libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss
View File

@@ -1,518 +0,0 @@
@keyframes pulse {
to {
box-shadow: 0 0 0 var(--pi-spacing-xxx-small) transparent;
}
}
@keyframes gradient {
0% {
background-position: 0%;
}
25% {
background-position: 25%;
}
50% {
background-position: 50%;
}
75% {
background-position: 75%;
}
100% {
background-position: 100%;
}
}
@mixin topbarParentMenuItemLargeDevice {
border: 0.0625rem solid;
border-radius: var(--pi-border-radius-medium);
transition: 0.4s all ease-in-out;
animation: pulse 1.5s infinite 2s ease-in;
&:hover {
cursor: pointer;
animation: unset;
&::before {
height: 2.75rem;
width: 6rem;
margin-top: -0.125rem;
margin-left: -0.125rem;
opacity: 1;
filter: blur(0.1rem);
}
}
&::before {
content: '';
position: absolute;
transition: all 0.3s ease;
border-radius: 0.75rem;
opacity: 0;
height: 0;
width: 0;
margin-top: 1.1875rem;
margin-left: 2.8125rem;
}
& > span {
& > span {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 2.25rem;
width: 6rem;
padding-bottom: 0.05rem;
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
transition: all 0.45s ease-Out;
font: {
weight: 400;
}
}
}
}
@mixin largeDeviceChildMenu(
$margin-left,
$background-color,
$grid-template-columns: repeat(2, 1fr)
) {
// Menu item
.pi-menu__children {
z-index: 99;
position: absolute;
margin-top: var(--pi-spacing-large);
margin-left: $margin-left;
border-radius: var(--pi-border-radius-large);
background-color: var(--pi-color-white);
box-shadow: var(--pi-box-shadow-double);
& > div {
display: grid;
grid-template-columns: $grid-template-columns;
gap: var(--pi-spacing-medium);
}
& > aside {
background-color: $background-color;
}
// Submenu entry
.pi-list-item {
min-width: 15.625rem;
&:not(:hover) {
.pi-list-item-content {
&.pi-list-item-content__left {
& > span {
//
&:nth-child(1) {
color: var(--pi-color-black);
}
&:nth-child(2) {
color: var(--pi-color-grey-300);
}
}
}
}
}
&:hover {
cursor: pointer;
}
}
}
}
@mixin largeDeviceChildMenuItemColor($background-color) {
// Submenu entry
.pi-list-item {
&:hover {
background-color: $background-color;
}
}
}
// Small device
@mixin smallDevieMenuSize($topbar-center-content-height: calc(100vh - 10rem)) {
.pi-website-topbar-content {
// Center
&.pi-website-topbar-content__center {
height: $topbar-center-content-height;
min-height: $topbar-center-content-height;
overflow: auto;
// Generic Scroll
&::-webkit-scrollbar {
width: var(--pi-spacing-xxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
border-radius: var(--pi-border-radius-small);
background-color: var(--pi-color-grey-75);
&:hover {
background-color: var(--pi-color-grey-100);
transition: var(--pi-animation);
}
}
}
}
}
@mixin smallDeviceMenuColor($border-color, $color) {
& > span {
border-color: $border-color;
& > span {
color: $color;
}
}
}
.pi-website-footer-content {
&.pi-website-footer-content__top-right {
.pi-menu-event-item {
&:nth-child(2) {
.pi-menu__children {
.pi-text {
color: var(--pi-color-primary);
}
}
}
&:nth-child(3) {
.pi-menu__children {
.pi-text {
color: var(--pi-color-accent);
}
}
}
&:nth-child(4) {
.pi-menu__children {
.pi-text {
color: var(--pi-color-highlighted);
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include smallDevieMenuSize;
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-website-topbar-content {
// Center
&.pi-website-topbar-content__center {
.pi-menu {
// Parent
&.pi-menu__parent {
& > nav {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-xx-large);
padding-bottom: var(--pi-spacing-xx-large);
.pi-menu-event-item {
&.has-children {
& > span {
display: flex;
width: -webkit-fill-available;
border-bottom: 1px solid;
padding-bottom: var(--pi-spacing-xxx-small);
& > span {
padding-left: var(--pi-spacing-xx-small);
font: {
size: var(--pi-font-size-x-small);
}
}
}
// Company
&:nth-child(1) {
@include smallDeviceMenuColor(
var(--pi-color-primary-100),
var(--pi-color-primary)
);
}
// Investor
&:nth-child(2) {
@include smallDeviceMenuColor(
var(--pi-color-accent-100),
var(--pi-color-accent)
);
}
// Advisor
&:nth-child(3) {
@include smallDeviceMenuColor(
var(--pi-color-highlighted-100),
var(--pi-color-highlighted)
);
}
}
}
}
}
// Children
&.pi-menu__children {
.pi-list-item {
padding-top: var(--pi-spacing-small);
padding-bottom: var(--pi-spacing-small);
&:nth-child(n + 2) {
padding-left: var(--pi-spacing-x-large);
.pi-list-item-content {
&.pi-list-item-content__left {
& > span {
&:nth-child(1) {
color: var(--pi-color-grey);
font: {
weight: 600;
}
}
}
}
}
}
}
.pi-list-item-content {
&.pi-list-item-content__left {
& > span {
&:nth-child(2) {
color: var(--pi-color-grey-300);
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
&.is-tablet__small {
@include smallDevieMenuSize(calc(100vh - 11.5rem));
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-shell__deale-website {
// Topbar
.pi-website-topbar {
.pi-menu {
.pi-menu-event-item {
@include topbarParentMenuItemLargeDevice;
}
// Parent
&.pi-menu__parent {
& > nav {
display: flex;
gap: var(--pi-spacing-medium);
}
.pi-menu-event-item {
&.has-children {
&:not(.is-selected) {
.pi-menu__children {
opacity: 0;
transform: scale(0);
}
}
&.is-selected {
.pi-menu__children {
opacity: 1;
transform: scale(1);
}
}
}
}
}
// Child
&.pi-menu__children {
& > div,
& > aside {
// Menu items
& > div {
& > span {
display: flex;
align-items: center;
gap: var(--pi-spacing-xxx-small);
}
}
}
// Child menu
& > div {
padding: var(--pi-spacing-medium);
border-radius: var(--pi-border-radius-large)
var(--pi-border-radius-large) 0 0;
// Child Menu items
& > div {
& > span {
display: flex;
align-items: center;
gap: var(--pi-spacing-xxx-small);
}
}
}
// Aside menu
& > aside {
display: flex;
justify-content: space-between;
width: 100%;
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large)
var(--pi-spacing-medium);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
// Aside Menu items
& > div {
& > span {
display: flex;
align-items: center;
gap: var(--pi-spacing-xxx-small);
}
}
}
}
}
.pi-website-topbar-content {
// Center
&.pi-website-topbar-content__center {
.pi-menu {
&.pi-menu__parent {
& > nav {
& > .pi-menu-event-item {
// Company
&:nth-child(1) {
@include largeDeviceChildMenu(
-18.75rem,
var(--pi-color-primary-25)
);
@include largeDeviceChildMenuItemColor(
var(--pi-color-primary-25)
);
}
// Investor
&:nth-child(2) {
@include largeDeviceChildMenu(
-14.125rem,
var(--pi-color-accent-25)
);
@include largeDeviceChildMenuItemColor(
var(--pi-color-accent-25)
);
}
// Advisor
&:nth-child(3) {
@include largeDeviceChildMenu(
-14.625rem,
var(--pi-color-highlighted-25)
);
@include largeDeviceChildMenuItemColor(
var(--pi-color-highlighted-25)
);
}
}
}
}
}
}
// Right
&.pi-website-topbar-content__right {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--pi-spacing-medium);
@include largeDeviceChildMenu(-100px, unset, 1fr);
.pi-menu {
&:not(.pi-menu__children) {
& > nav {
& > .pi-menu-event-item {
@include topbarParentMenuItemLargeDevice;
// Prices
&:nth-of-type(1) {
.pi-menu__children {
& > div {
.pi-list-item {
&:hover {
// Company Pricing
&:nth-child(1) {
color: var(--pi-color-primary);
background-color: var(--pi-color-primary-25);
}
// Investor Pricing
&:nth-child(2) {
color: var(--pi-color-accent);
background-color: var(--pi-color-accent-25);
}
// Advisor Pricing
&:nth-child(3) {
color: var(--pi-color-highlighted);
background-color: var(
--pi-color-highlighted-25
);
}
}
}
}
}
}
}
}
}
}
// Login
.pi-button__type--menu-item {
&.pi-button__action {
display: flex;
justify-content: center;
align-items: center;
height: 2.25rem;
width: 7rem;
border-radius: var(--pi-border-radius-medium);
@include topbarParentMenuItemLargeDevice;
& > span {
padding-bottom: 0.1875rem;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
font: {
weight: 400;
}
}
position: relative;
transition: all 0.45s ease-Out;
}
}
}
}
}
}
}
}
// LargeDevice
&.is-desktop {
}
}

334
libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss
View File

@@ -1,334 +0,0 @@
@mixin topbarCommonSizes(
$height: var(--pi-public-height-header-mobile),
$max-width: calc(100% - var(--pi-spacing-xx-large)),
$small-size: -webkit-fill-available,
$large-size: calc(100% - var(--pi-spacing-xxx-small))
) {
.pi-website-topbar {
& > header {
height: $height;
max-width: $max-width;
margin: 0 auto;
.pi-website-topbar-content {
// Left
&.pi-website-topbar-content__left {
width: $small-size;
}
// Center
&.pi-website-topbar-content__center {
width: $large-size;
}
// Right
&.pi-website-topbar-content__right {
width: $small-size;
}
}
}
}
}
@mixin logoSize($max-width: 7.125rem) {
.pi-website-topbar {
.pi-website-topbar-content {
&.pi-website-topbar-content__left {
& > .pi-headline {
max-width: $max-width;
&:hover {
cursor: pointer;
}
}
}
}
}
}
// Topbar menu is closed
@mixin smallDeviceTopbarMenuIsClosed {
.pi-shell {
&.pi-shell__deale-website {
& > div {
// Is Open
&:not(.is-menu-open) {
.pi-website-topbar {
top: 0;
left: 0;
height: var(--pi-public-height-header-mobile);
width: -webkit-fill-available;
padding: 0;
border-radius: var(--pi-border-radius-large);
.pi-website-topbar-content {
// Center
&.pi-website-topbar-content__center {
transform: scale(0);
opacity: 0;
}
// Right
&.pi-website-topbar-content__right {
display: flex;
flex-direction: row-reverse;
gap: var(--pi-spacing-x-small);
}
}
}
}
}
}
}
}
// Ope topbar menu
@mixin smallDeviceTopbarMenuIsOpen(
$side-spacing: var(--pi-spacing-medium),
$height: calc(100vh - var(--pi-spacing-xx-large)),
$width: calc(100% - var(--pi-spacing-xx-large))
) {
.pi-shell {
&.pi-shell__deale-website {
& > div {
// Is Open
&.is-menu-open {
.pi-website-topbar {
position: fixed;
top: $side-spacing;
left: $side-spacing;
z-index: 99;
height: $height;
width: $width;
border-radius: var(--pi-border-radius-large);
background-color: var(--pi-color-white);
box-shadow: var(--pi-box-shadow-double);
.pi-close-button {
position: absolute;
top: var(--pi-spacing-large);
right: var(--pi-spacing-x-large);
}
& > header {
flex-direction: column;
gap: var(--pi-spacing-xxxx-small);
}
.pi-website-topbar-content {
padding-left: calc(
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
padding-right: calc(
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
// Left (=== top)
&.pi-website-topbar-content__left {
padding-top: var(--pi-spacing-large);
padding-bottom: var(--pi-spacing-large);
}
// Center
&.pi-website-topbar-content__center {
width: calc(100% - var(--pi-spacing-xx-small));
margin: 0 auto;
transform: scale(1);
opacity: 1;
}
// Right (=== bottom)
&.pi-website-topbar-content__right {
padding-bottom: var(--pi-spacing-large);
.pi-button__action {
&.pi-button__type--menu-item {
height: var(--pi-spacing-xxx-large);
min-width: var(--pi-spacing-xxx-large);
width: -webkit-fill-available;
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
-moz-border-radius: var(--pi-border-radius-medium);
color: var(--pi-color-white);
background-image: var(--pi-gradient-primary-dark);
font: {
weight: 400;
}
}
}
}
}
}
}
}
}
}
}
.pi-website-topbar {
position: absolute;
z-index: 99;
width: -webkit-fill-available;
background-color: transparent;
& > header {
display: flex;
justify-content: space-between;
}
}
.pi-shell {
&.pi-shell__deale-website {
& > div {
// Is Closed
&:not(.is-menu-open) {
width: -webkit-fill-available;
}
}
}
}
html {
// Mobile
&.is-mobile {
@include smallDeviceTopbarMenuIsOpen;
.pi-shell {
&.pi-shell__deale-website {
& > div {
// Is Closed
&:not(.is-menu-open) {
@include logoSize;
@include topbarCommonSizes;
}
// Is Open
&.is-menu-open {
@include logoSize(6.625rem);
@include topbarCommonSizes(
var(--pi-public-height-header-mobile),
-webkit-fill-available
);
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include smallDeviceTopbarMenuIsOpen(
var(--pi-spacing-x-large),
calc(100vh - 3rem),
calc(100% - 3rem)
);
.pi-shell {
&.pi-shell__deale-website {
& > div {
// Is Closed
&:not(.is-menu-open) {
@include logoSize(7.5rem);
@include topbarCommonSizes(
var(--pi-public-height-header-mobile),
calc(100% - 3rem)
);
}
// Is Open
&.is-menu-open {
@include logoSize(7.125rem);
@include topbarCommonSizes(
var(--pi-public-height-header-mobile),
-webkit-fill-available
);
}
}
}
}
}
// Tablet L
&.is-tablet__large {
@include topbarCommonSizes(
var(--pi-public-height-header-mobile),
calc(100% - 3rem)
);
@include logoSize(8.4375rem);
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
// Closded menu has equal properties for Mobile & Tablet S
@include smallDeviceTopbarMenuIsClosed;
.pi-shell {
&.pi-shell__deale-website {
.pi-website-topbar {
& > header {
align-items: center;
}
}
// Override right content buttons
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item).pi-color__white {
border-color: var(--pi-color-primary-100);
background-color: rgba(255, 255, 255, 0.7);
background-image: unset;
&:hover {
border-color: var(--pi-color-primary-200);
background-color: rgba(255, 255, 255, 0.9);
.mat-icon {
color: var(--pi-color-primary);
}
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large Device
@media screen and (min-width: 62rem) {
.pi-website-topbar {
& > header {
align-items: flex-end;
}
}
}
}
// Desktop
&.is-desktop {
.pi-website-topbar-content {
display: flex;
// Center
&.pi-website-topbar-content__center {
justify-content: center;
}
// Right
&.pi-website-topbar-content__right {
justify-content: flex-end;
}
}
@include logoSize(8.75rem);
// Desktop S
&.is-desktop__small {
@include topbarCommonSizes(
var(--pi-public-height-header-desktop),
var(--pi-public-width-container),
30%,
40%
);
}
// Desktop S & M
&:not(.is-desktop__large) {
@include topbarCommonSizes(
var(--pi-public-height-header-desktop),
var(--pi-public-width-container),
30%,
40%
);
}
// Desktop L
&.is-desktop__large {
@include topbarCommonSizes(
var(--pi-public-height-header-desktop),
var(--pi-public-width-container-l),
30%,
40%
);
}
}
}

5
libs/ui/src/lib/styles/deale-website/shell/index.scss
View File

@@ -1,5 +0,0 @@
@forward 'pi-footer';
@forward 'pi-main';
@forward 'pi-menu';
@forward 'pi-menu-theming';
@forward 'pi-topbar';

62
libs/ui/src/lib/styles/deale-website/wrappers/_pi-form-wrapper.scss
View File

@@ -1,62 +0,0 @@
.pi-shell__deale-website {
.pi-wrapper {
&.pi-wrapper__form {
// Vertically behavior
& > form {
& > fieldset {
& > label {
&.pi-text__size--x-small {
padding-left: var(--pi-spacing-x-small);
padding-bottom: var(--pi-spacing-xxx-small);
}
}
.pi-panel {
margin-bottom: var(--pi-spacing-x-small);
border: 1px solid var(--pi-color-grey-75);
}
}
}
.pi-list-item + .pi-list-item {
margin-top: unset;
}
}
}
.pi-website-contact-form {
.pi-panel__padding--m {
padding: var(--pi-spacing-xx-small) var(--pi-spacing-medium);
}
}
}
html {
// Mobile
&.is-mobile {
.pi-shell__deale-website {
.pi-wrapper {
&.pi-wrapper__form {
// Vertically behavior
& > form {
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-large);
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
.pi-shell__deale-website {
.pi-wrapper {
&.pi-wrapper__form {
// Vertically behavior
& > form {
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-xxx-small);
}
}
}
}
}
}
}

11
libs/ui/src/lib/styles/deale-website/wrappers/_pi-header-wrapper.scss
View File

@@ -1,11 +0,0 @@
.pi-wrapper {
// Header Wrapper
&.pi-wrapper__header {
// Flex direction
&.pi-wrapper__flex-direction--column {
.pi-header-wrapper-content {
gap: var(--pi-spacing-medium);
}
}
}
}

32
libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss
View File

@@ -1,32 +0,0 @@
@mixin dealeWebsiteWrapperMaxWidth(
$max-width: calc(100% - var(--pi-spacing-xx-large))
) {
.pi-shell__deale-website {
.pi-wrapper {
// Max width
&.pi-wrapper__full-width,
&.pi-wrapper__full-width-centered {
max-width: $max-width;
}
}
}
}
html {
&.is-mobile {
@include dealeWebsiteWrapperMaxWidth;
}
&.is-tablet {
@include dealeWebsiteWrapperMaxWidth(calc(100% - 3rem));
}
&.is-desktop {
// Desktop S & M
&:not(.is-desktop__large) {
@include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container));
}
// Desktop L
&.is-desktop__large {
@include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container-l));
}
}
}

3
libs/ui/src/lib/styles/deale-website/wrappers/index.scss
View File

@@ -1,3 +0,0 @@
@forward 'pi-form-wrapper';
@forward 'pi-header-wrapper';
@forward 'pi-wrapper';

103
libs/ui/src/lib/styles/themes/_alternative.scss Normal file
View File

@@ -0,0 +1,103 @@
// TEMA ALTERNATIVO
//
// Demuestra hasta dónde llega el theming: no duplica ni un selector de
// componente, solo redefine tokens. Todo lo que cambia aquí (paleta, formas,
// tipografía de los controles, superficies) se propaga solo porque los
// componentes de `common/` consumen `--pi-color-*` y `--pi-theme-*`.
//
// Se dejan intactos `warn` y `success`: son colores semánticos (error / éxito)
// y cambiarlos perjudicaría la lectura del estado.
@mixin alternativeThemeTokens {
// --- Paleta de marca --------------------------------------------------
// Primary: azul -> violeta
--pi-color-primary-10: #fdfcff;
--pi-color-primary-25: #fbf9ff;
--pi-color-primary-50: #f4f0ff;
--pi-color-primary-75: #ede6ff;
--pi-color-primary-100: #ded1fb;
--pi-color-primary-200: #cbb8ff;
--pi-color-primary-200-rgba: rgba(203, 184, 255, 0.15);
--pi-color-primary-300: #b096ff;
--pi-color-primary-400: #9b7cf2;
--pi-color-primary: #8a63f0;
--pi-color-primary-900: #6a3fd4;
// Accent: ámbar -> turquesa
--pi-color-accent-10: #f7fefd;
--pi-color-accent-25: #edfcfa;
--pi-color-accent-50: #e0f7f4;
--pi-color-accent-75: #c4efe9;
--pi-color-accent-100: #a9e7de;
--pi-color-accent-200: #7dd9cc;
--pi-color-accent-200-rgba: rgba(125, 217, 204, 0.15);
--pi-color-accent-300: #4ec9b8;
--pi-color-accent-400: #2fbda9;
--pi-color-accent: #14b09a;
--pi-color-accent-900: #0d8f7e;
// Highlighted: azul marino -> ciruela
--pi-color-highlighted-10: #fdf9ff;
--pi-color-highlighted-25: #faf2ff;
--pi-color-highlighted-50: #f5e9ff;
--pi-color-highlighted-75: #ecdaff;
--pi-color-highlighted-100: #dcbcfa;
--pi-color-highlighted-200: #9a64d7;
--pi-color-highlighted-200-rgba: rgba(154, 100, 215, 0.15);
--pi-color-highlighted-300: #7d43c1;
--pi-color-highlighted-400: #521d8a;
--pi-color-highlighted: #3b0d6b;
--pi-color-highlighted-900: #1c033c;
// --- Botones: pastilla, degradado, versalitas -------------------------
--pi-theme-button-height: 2.875rem;
--pi-theme-button-radius: 999px;
--pi-theme-button-font-weight: 700;
--pi-theme-button-letter-spacing: 0.04em;
--pi-theme-button-text-transform: uppercase;
--pi-theme-button-shadow: 0 6px 16px -6px rgba(106, 63, 212, 0.55);
--pi-theme-button-transition: all 0.2s ease-out;
--pi-theme-button-fill-primary: linear-gradient(
100deg,
var(--pi-color-primary-900),
var(--pi-color-primary-400)
);
--pi-theme-button-fill-accent: linear-gradient(
100deg,
var(--pi-color-accent-900),
var(--pi-color-accent-400)
);
--pi-theme-button-fill-highlighted: linear-gradient(
100deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-300)
);
// --- Campos: superficie tintada, borde grueso, etiqueta en versalitas --
--pi-theme-field-radius: 999px;
--pi-theme-field-border-width: 2px;
--pi-theme-field-border-color: var(--pi-color-primary-100);
--pi-theme-field-border-color-hover: var(--pi-color-primary-300);
--pi-theme-field-border-color-focus: var(--pi-color-primary);
--pi-theme-field-surface: var(--pi-color-primary-25);
--pi-theme-field-label-color: var(--pi-color-primary-900);
--pi-theme-field-label-transform: uppercase;
--pi-theme-field-label-letter-spacing: 0.08em;
--pi-theme-field-label-weight: 700;
// --- Superficies ------------------------------------------------------
--pi-theme-card-radius: 1.5rem;
--pi-theme-card-shadow: 0 10px 30px -12px rgba(59, 13, 107, 0.28);
--pi-theme-panel-radius: 1.5rem;
--pi-theme-chip-radius: 0.25rem;
}
.pi-shell__alternative {
@include alternativeThemeTokens;
}
// Los overlays de Material se montan fuera del shell: se les propaga el tema
// marcando el contenedor (lo hace la app al cambiar de tema).
.cdk-overlay-container.pi-shell__alternative {
@include alternativeThemeTokens;
}

75
libs/ui/src/lib/styles/themes/_default.scss Normal file
View File

@@ -0,0 +1,75 @@
// TEMA POR DEFECTO
//
// Este fichero es el *contrato* de theming de la librería: declara todos los
// tokens `--pi-theme-*` que los componentes de `common/` consumen. Un tema
// alternativo no necesita duplicar selectores: le basta con redefinir estos
// tokens (ver `_alternative.scss`).
//
// Los valores viven en `.pi-shell` (no en `:root`) para que puedan convivir
// varios temas en la misma página, y se repiten en `.cdk-overlay-container`
// porque los overlays de Material (diálogos, snackbars, menús) se montan fuera
// del árbol del shell y no heredarían nada.
@mixin defaultThemeTokens {
// --- Botones ---------------------------------------------------------
--pi-theme-button-height: var(--pi-spacing-xxx-large);
--pi-theme-button-radius: var(--pi-border-radius-medium);
--pi-theme-button-font-weight: 600;
--pi-theme-button-letter-spacing: normal;
--pi-theme-button-text-transform: none;
--pi-theme-button-shadow: none;
--pi-theme-button-transition: background-color 0.16s ease-in;
// Superficie del relleno. Por defecto es plano (solo `background-color`);
// un tema puede inyectar aquí un degradado por color de marca.
--pi-theme-button-fill-primary: none;
--pi-theme-button-fill-accent: none;
--pi-theme-button-fill-warn: none;
--pi-theme-button-fill-success: none;
--pi-theme-button-fill-highlighted: none;
// --- Campos de formulario --------------------------------------------
--pi-theme-field-radius: 0.875rem;
--pi-theme-field-border-width: 1px;
--pi-theme-field-border-color: var(--pi-color-grey-200);
--pi-theme-field-border-color-hover: var(--pi-color-grey-300);
--pi-theme-field-border-color-focus: var(--pi-color-primary);
--pi-theme-field-surface: var(--pi-color-white);
--pi-theme-field-label-color: var(--pi-color-grey-300);
// La tipografía de la etiqueta y el radio del chip no se declaran: sus
// consumidores usan `var(--token, <valor original>)`, así el tema por
// defecto conserva exactamente el aspecto previo a los tokens.
// --- Superficies ------------------------------------------------------
--pi-theme-card-radius: var(--pi-border-radius-large);
--pi-theme-card-shadow: var(--pi-box-shadow-panel);
--pi-theme-panel-radius: var(--pi-border-radius-large);
// --- Puente con Angular Material --------------------------------------
// Los componentes de Material (slider, checkbox, radio, progress...) pintan
// con sus roles `--mat-sys-*`, que `mat.theme()` genera de una paleta propia
// y por tanto ignoran `--pi-color-*`. Aquí se reengancha una cosa con otra.
//
// Se define una sola vez, en el tema por defecto y por indirección
// (`var(--pi-color-*)`): como el tema alternativo redefine esas variables,
// Material le sigue solo, sin repetir este bloque.
--mat-sys-primary: var(--pi-color-primary);
--mat-sys-on-primary: var(--pi-color-white);
--mat-sys-primary-container: var(--pi-color-primary-100);
--mat-sys-on-primary-container: var(--pi-color-primary-900);
--mat-sys-secondary: var(--pi-color-accent);
--mat-sys-on-secondary: var(--pi-color-white);
--mat-sys-secondary-container: var(--pi-color-accent-100);
--mat-sys-on-secondary-container: var(--pi-color-accent-900);
--mat-sys-tertiary: var(--pi-color-highlighted);
--mat-sys-on-tertiary: var(--pi-color-white);
--mat-sys-error: var(--pi-color-warn);
--mat-sys-on-error: var(--pi-color-white);
}
// Base para *todos* los shells: así un tema solo tiene que declarar lo que
// cambia, y lo que no redefina sigue teniendo valor (incluido el puente con
// Material). Los temas concretos se aplican encima; ver `_alternative.scss`.
.pi-shell,
.cdk-overlay-container {
@include defaultThemeTokens;
}

7
libs/ui/src/lib/styles/themes/index.scss Normal file
View File

@@ -0,0 +1,7 @@
// El orden importa: `default` declara el contrato completo de tokens y
// `alternative` lo sobreescribe.
@forward 'default';
@forward 'alternative';
@use 'default' as *;
@use 'alternative' as *;

4
libs/ui/src/lib/ui/accordion/accordion/accordion.component.html
View File

@@ -176,8 +176,8 @@
<ng-template #defaultHeader let-item>
<pi-text-viewer
[label]="item?.title"
[value]="item?.subtitle"
[label]="item?.title()"
[value]="item?.subtitle()"
flexDirection="column"
fontWeight="600-300"
fontSize="m-xs"

4
libs/ui/src/lib/ui/button/icon-button/icon-button.component.html
View File

@@ -23,7 +23,7 @@
@if (text()) {
<span>{{ text() }}</span>
}
<ng-content></ng-content>
<span #projectedText><ng-content></ng-content></span>
<img src="/assets/icons/{{ icon() }}.svg" />
</button>
} @else {
@@ -54,7 +54,7 @@
@if (text()) {
<span>{{ text() }}</span>
}
<ng-content></ng-content>
<span #projectedText><ng-content></ng-content></span>
@if (!previous()) {
<mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
}

28
libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts
View File

@@ -1,9 +1,11 @@
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
ElementRef,
HostBinding,
input,
signal,
viewChild,
} from '@angular/core';
import { buttonSize, mode } from '../../../styles';
@@ -18,7 +20,10 @@ import { MatIcon } from '@angular/material/icon';
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatIcon],
})
export class PiIconButtonComponent extends PiBaseButtonComponent {
export class PiIconButtonComponent
extends PiBaseButtonComponent
implements AfterViewInit
{
@HostBinding('class') get classes(): string {
const customIconClass =
this.iconType() === 'custom' && 'pi-icon-button__custom-icon';
@@ -58,8 +63,27 @@ export class PiIconButtonComponent extends PiBaseButtonComponent {
return width ? `pi-button__${width}` : null;
}
/**
* La etiqueta se puede dar de dos formas: por el input `text` o proyectando
* contenido (`<pi-icon-button>Siguiente</pi-icon-button>`). La plantilla
* pinta ambas, pero esta clase solo miraba `text`, así que los consumidores
* que proyectan (el banner, el paginador) quedaban marcados como «solo
* icono» y el botón colapsaba al cuadrado del icono, partiendo el texto.
*/
private readonly projectedText =
viewChild<ElementRef<HTMLElement>>('projectedText');
protected readonly hasProjectedText = signal(false);
ngAfterViewInit(): void {
const el = this.projectedText()?.nativeElement;
this.hasProjectedText.set(!!el?.textContent?.trim());
}
get textClass(): string | null {
return this.text() ? 'has-text' : 'pi-button__icon--single';
return this.text() || this.hasProjectedText()
? 'has-text'
: 'pi-button__icon--single';
}
get iconPositionClass(): string | null {

8
libs/ui/src/lib/ui/chip/styles/_size.scss
View File

@@ -2,7 +2,7 @@
@mixin chipSize($chip-height, $chip-border-radius) {
&:not(.pi-chip-date):not(.pi-chip-value) {
height: var(--pi-spacing-#{$chip-height});
border-radius: $chip-border-radius;
border-radius: var(--pi-theme-chip-radius, #{$chip-border-radius});
}
}
@@ -13,12 +13,12 @@
&.pi-chip__single-icon {
height: var(--pi-spacing-#{$chip-size});
width: var(--pi-spacing-#{$chip-size});
border-radius: $border-radius;
border-radius: var(--pi-theme-chip-radius, #{$border-radius});
.pi-chip-affix {
height: var(--pi-spacing-#{$chip-size});
width: var(--pi-spacing-#{$chip-size});
border-radius: $border-radius;
border-radius: var(--pi-theme-chip-radius, #{$border-radius});
// Icon
& > .pi-chip-affix__icon {
height: var(--pi-spacing-#{$icon-size});
@@ -146,7 +146,7 @@
&:not(.pi-chip__single-icon) {
.pi-chip-affix {
height: $size;
border-radius: $affix-border-radius;
border-radius: var(--pi-theme-chip-radius, #{$affix-border-radius});
}
}

Some files were not shown because too many files have changed in this diff Show More