fix components
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
$min-width: auto
|
||||
) {
|
||||
.pi-shell {
|
||||
&.pi-shell__deale-saas {
|
||||
&.pi-shell__default {
|
||||
& > div {
|
||||
&.has-bottom-sticky-note {
|
||||
& > section {
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell__deale-saas {
|
||||
.pi-shell__default {
|
||||
h3 {
|
||||
font: {
|
||||
size: var(--pi-font-size-medium);
|
||||
|
||||
@@ -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))
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
// Colors
|
||||
@include privateButtonsColors;
|
||||
// Sizes
|
||||
@include privateButtonsSizes;
|
||||
}
|
||||
}
|
||||
// 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 themeButtonsColors;
|
||||
// Sizes
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
)
|
||||
)
|
||||
) {
|
||||
.pi-shell__deale-saas {
|
||||
.pi-shell {
|
||||
& > div {
|
||||
// Aside is open
|
||||
&.aside-is-open {
|
||||
@@ -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 {
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
49
libs/ui/src/lib/styles/common/vendors/_mat-datepicker.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.pi-shell__deale-saas {
|
||||
.pi-shell__default {
|
||||
.mat-mdc-expansion-panel {
|
||||
&:not([class*='mat-elevation-z']) {
|
||||
box-shadow: unset;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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,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';
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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}`;
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
@use 'layouts' as *;
|
||||
@use 'theming' as *;
|
||||
@use 'shell' as *;
|
||||
@use 'wrappers' as *;
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.pi-container-layout {
|
||||
padding-bottom: var(--pi-spacing-xxxx-large);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
@forward 'pi-aside';
|
||||
@forward 'pi-header';
|
||||
@forward 'pi-main';
|
||||
@forward 'pi-menu';
|
||||
@forward 'pi-navbar';
|
||||
@@ -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 +0,0 @@
|
||||
@forward 'pi-user-type-theming';
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@forward 'pi-header-wrapper';
|
||||
@forward 'pi-wrapper';
|
||||
@@ -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 +0,0 @@
|
||||
@forward 'pi-text';
|
||||
@@ -1,5 +0,0 @@
|
||||
@use 'components' as *;
|
||||
@use 'layouts' as *;
|
||||
@use 'screens' as *;
|
||||
@use 'shell' as *;
|
||||
@use 'wrappers' as *;
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.pi-layout {
|
||||
&.pi-layout__02-full-width {
|
||||
&.pi-layout__02a-full-width--auto {
|
||||
& > *:nth-child(n + 1) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.pi-layout {
|
||||
&.pi-layout__06-edge-to-edge {
|
||||
width: 100%;
|
||||
& > *:nth-child(n + 1) {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -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 +0,0 @@
|
||||
@forward 'pi-00-thank-you-screen';
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
@@ -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%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
@forward 'pi-footer';
|
||||
@forward 'pi-main';
|
||||
@forward 'pi-menu';
|
||||
@forward 'pi-menu-theming';
|
||||
@forward 'pi-topbar';
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
103
libs/ui/src/lib/styles/themes/_alternative.scss
Normal 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
75
libs/ui/src/lib/styles/themes/_default.scss
Normal 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
7
libs/ui/src/lib/styles/themes/index.scss
Normal 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 *;
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -96,7 +96,10 @@ Data Direction:
|
||||
ROW
|
||||
-->
|
||||
|
||||
<!--
|
||||
Respaldo cuando el consumidor no proporciona `#keysTemplate`/`#valuesTemplate`:
|
||||
se pinta un esqueleto de carga en lugar de un texto de error suelto.
|
||||
-->
|
||||
<ng-template #defaultErrorTemplate>
|
||||
<!-- Add data grid skeleton template -->
|
||||
<span>Template Error</span>
|
||||
<pi-skeleton [lines]="3" />
|
||||
</ng-template>
|
||||
|
||||
@@ -19,12 +19,13 @@ import {
|
||||
} from '../entities/data-grid.model';
|
||||
import { NgTemplateOutlet } from '@angular/common';
|
||||
import { PiGridItemDirective } from '../directives/grid-item.directive';
|
||||
import { PiSkeletonComponent } from '../../progress/skeleton/skeleton.component';
|
||||
|
||||
@Component({
|
||||
selector: 'pi-data-grid',
|
||||
templateUrl: './data-grid.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [PiGridItemDirective, NgTemplateOutlet],
|
||||
imports: [PiGridItemDirective, NgTemplateOutlet, PiSkeletonComponent],
|
||||
})
|
||||
export class PiDataGridComponent<T> {
|
||||
@HostBinding('class') get classes(): string {
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<!--
|
||||
La zona es un <button>: así entra en el orden de tabulación y responde a
|
||||
Enter/Espacio sin necesidad de gestionar teclas a mano.
|
||||
-->
|
||||
<button
|
||||
type="button"
|
||||
class="pi-file-upload__dropzone"
|
||||
[disabled]="disabled()"
|
||||
(click)="openPicker()"
|
||||
>
|
||||
<pi-icon icon="upload" color="primary" size="large" />
|
||||
<span class="pi-file-upload__label">{{ label() | translate }}</span>
|
||||
@if (hint()) {
|
||||
<small class="pi-file-upload__hint">{{ hint() | translate }}</small>
|
||||
}
|
||||
</button>
|
||||
|
||||
<input
|
||||
#fileInput
|
||||
type="file"
|
||||
class="pi-file-upload__native"
|
||||
[accept]="accept()"
|
||||
[multiple]="multiple()"
|
||||
[disabled]="disabled()"
|
||||
[required]="required()"
|
||||
[name]="name()"
|
||||
(change)="onPicked($event)"
|
||||
(blur)="touch.emit()"
|
||||
/>
|
||||
|
||||
@if (value().length) {
|
||||
<ul class="pi-file-upload__files">
|
||||
@for (file of value(); track file.name + file.size; let i = $index) {
|
||||
<li class="pi-file-upload__file">
|
||||
<pi-icon icon="document" color="grey" size="x-small" />
|
||||
<span class="pi-file-upload__file-name">{{ file.name }}</span>
|
||||
<small>{{ readableSize(file.size) }}</small>
|
||||
<button
|
||||
type="button"
|
||||
class="pi-file-upload__remove"
|
||||
[disabled]="disabled()"
|
||||
[attr.aria-label]="'common.close' | translate"
|
||||
(click)="remove(i)"
|
||||
>
|
||||
<pi-icon icon="close" color="grey" size="x-small" />
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
|
||||
@if (enableErrorMessage() && hasError()) {
|
||||
<span class="pi-file-upload__error">
|
||||
@for (message of errorMessages(); track message) {
|
||||
{{ message | translate }}
|
||||
}
|
||||
</span>
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pi-file-upload {
|
||||
&__dropzone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
width: 100%;
|
||||
padding: var(--pi-spacing-x-large);
|
||||
border: 2px dashed var(--pi-theme-field-border-color);
|
||||
border-radius: var(--pi-theme-field-radius, var(--pi-border-radius-large));
|
||||
background-color: var(--pi-theme-field-surface);
|
||||
color: var(--pi-color-grey);
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: var(--pi-theme-button-transition);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--pi-theme-field-border-color-hover);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
color: var(--pi-color-black);
|
||||
font-size: var(--pi-font-size-small);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: var(--pi-font-size-xx-small);
|
||||
}
|
||||
|
||||
// El input nativo se oculta: lo abre el botón de la zona de arrastre.
|
||||
&__native {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__files {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--pi-spacing-xxx-small);
|
||||
margin: var(--pi-spacing-x-small) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&__file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-small);
|
||||
border-radius: var(--pi-border-radius-small);
|
||||
background-color: var(--pi-color-grey-25);
|
||||
font-size: var(--pi-font-size-x-small);
|
||||
|
||||
small {
|
||||
color: var(--pi-color-grey);
|
||||
}
|
||||
}
|
||||
|
||||
&__file-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--pi-color-black);
|
||||
}
|
||||
|
||||
&__remove {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__error {
|
||||
display: block;
|
||||
margin-top: var(--pi-spacing-xx-small);
|
||||
color: var(--pi-color-warn);
|
||||
font-size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
|
||||
// Realce mientras se arrastra un fichero encima.
|
||||
:host(.is-dragging) .pi-file-upload__dropzone {
|
||||
border-color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-primary-50);
|
||||
}
|
||||
|
||||
:host(.has-error) .pi-file-upload__dropzone {
|
||||
border-color: var(--pi-color-warn);
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
HostBinding,
|
||||
HostListener,
|
||||
computed,
|
||||
input,
|
||||
model,
|
||||
output,
|
||||
signal,
|
||||
viewChild,
|
||||
ElementRef,
|
||||
} from '@angular/core';
|
||||
import { FormValueControl, ValidationError } from '@angular/forms/signals';
|
||||
import { TranslatePipe } from '@ngx-translate/core';
|
||||
|
||||
import { ComponentFamilyClass } from '../../../styles';
|
||||
import { PiIconComponent } from '../../icon/icon/icon.component';
|
||||
|
||||
/** Motivo por el que se descartó un fichero. */
|
||||
export type PiFileRejectionReason = 'type' | 'size' | 'max-files';
|
||||
|
||||
export interface PiFileRejection {
|
||||
file: File;
|
||||
reason: PiFileRejectionReason;
|
||||
}
|
||||
|
||||
/**
|
||||
* Subida de ficheros con arrastrar y soltar.
|
||||
*
|
||||
* `ComponentFamilyClass` ya declaraba la familia `file-upload` pero no existía
|
||||
* ni componente ni estilos.
|
||||
*
|
||||
* Implementa `FormValueControl<File[]>`, así que se enlaza con `[formField]`
|
||||
* como cualquier otro campo. La validación de tipo y tamaño se resuelve aquí
|
||||
* (el navegador solo filtra en el diálogo, no al soltar) y lo rechazado se
|
||||
* comunica por `rejected` en vez de descartarse en silencio.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'pi-file-upload',
|
||||
templateUrl: './file-upload.component.html',
|
||||
styleUrls: ['./file-upload.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [PiIconComponent, TranslatePipe],
|
||||
})
|
||||
export class PiFileUploadComponent implements FormValueControl<File[]> {
|
||||
@HostBinding('class') get classes(): string {
|
||||
return [
|
||||
ComponentFamilyClass.FileUpload,
|
||||
this.isDragging() ? 'is-dragging' : '',
|
||||
this.disabled() ? 'is-disabled' : '',
|
||||
this.hasError() ? 'has-error' : '',
|
||||
].join(' ');
|
||||
}
|
||||
|
||||
/* --- Contrato FormValueControl --------------------------------------- */
|
||||
|
||||
readonly value = model<File[]>([]);
|
||||
|
||||
readonly errors = input<readonly ValidationError.WithOptionalFieldTree[]>([]);
|
||||
readonly disabled = input(false);
|
||||
readonly required = input(false);
|
||||
readonly name = input('');
|
||||
|
||||
readonly touch = output<void>();
|
||||
|
||||
/* --- Configuración ---------------------------------------------------- */
|
||||
|
||||
/** Igual que el `accept` nativo: `image/*`, `.pdf`, … */
|
||||
readonly accept = input<string>('');
|
||||
|
||||
readonly multiple = input(false);
|
||||
|
||||
/** Tamaño máximo por fichero, en bytes. */
|
||||
readonly maxSizeBytes = input<number>();
|
||||
|
||||
/** Número máximo de ficheros cuando `multiple` está activo. */
|
||||
readonly maxFiles = input<number>();
|
||||
|
||||
readonly label = input('common.fileUpload.dropHere');
|
||||
readonly hint = input<string>();
|
||||
|
||||
readonly enableErrorMessage = input(true);
|
||||
|
||||
/** Ficheros descartados en el último intento. */
|
||||
readonly rejected = output<PiFileRejection[]>();
|
||||
|
||||
private readonly fileInput =
|
||||
viewChild<ElementRef<HTMLInputElement>>('fileInput');
|
||||
|
||||
protected readonly isDragging = signal(false);
|
||||
|
||||
protected readonly errorMessages = computed(() =>
|
||||
this.errors().map((error) => error.message ?? error.kind),
|
||||
);
|
||||
|
||||
protected readonly hasError = computed(() => this.errors().length > 0);
|
||||
|
||||
/* --- Arrastrar y soltar ----------------------------------------------- */
|
||||
|
||||
@HostListener('dragover', ['$event'])
|
||||
protected onDragOver(event: DragEvent): void {
|
||||
if (this.disabled()) return;
|
||||
// Sin `preventDefault` el navegador abriría el fichero en la pestaña.
|
||||
event.preventDefault();
|
||||
this.isDragging.set(true);
|
||||
}
|
||||
|
||||
@HostListener('dragleave', ['$event'])
|
||||
protected onDragLeave(event: DragEvent): void {
|
||||
event.preventDefault();
|
||||
this.isDragging.set(false);
|
||||
}
|
||||
|
||||
@HostListener('drop', ['$event'])
|
||||
protected onDrop(event: DragEvent): void {
|
||||
if (this.disabled()) return;
|
||||
event.preventDefault();
|
||||
this.isDragging.set(false);
|
||||
this.addFiles(Array.from(event.dataTransfer?.files ?? []));
|
||||
}
|
||||
|
||||
protected openPicker(): void {
|
||||
if (this.disabled()) return;
|
||||
this.fileInput()?.nativeElement.click();
|
||||
}
|
||||
|
||||
protected onPicked(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
this.addFiles(Array.from(input.files ?? []));
|
||||
// Permite volver a elegir el mismo fichero justo después.
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
protected remove(index: number): void {
|
||||
const next = [...this.value()];
|
||||
next.splice(index, 1);
|
||||
this.value.set(next);
|
||||
this.touch.emit();
|
||||
}
|
||||
|
||||
/** Tamaño legible; se usa en la lista de ficheros. */
|
||||
protected readableSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
private addFiles(incoming: File[]): void {
|
||||
if (!incoming.length) return;
|
||||
|
||||
const rejections: PiFileRejection[] = [];
|
||||
const accepted: File[] = [];
|
||||
|
||||
for (const file of incoming) {
|
||||
if (!this.matchesAccept(file)) {
|
||||
rejections.push({ file, reason: 'type' });
|
||||
continue;
|
||||
}
|
||||
const maxSize = this.maxSizeBytes();
|
||||
if (maxSize !== undefined && file.size > maxSize) {
|
||||
rejections.push({ file, reason: 'size' });
|
||||
continue;
|
||||
}
|
||||
accepted.push(file);
|
||||
}
|
||||
|
||||
// En modo simple el último sustituye al anterior.
|
||||
let next = this.multiple() ? [...this.value(), ...accepted] : accepted.slice(-1);
|
||||
|
||||
const maxFiles = this.maxFiles();
|
||||
if (this.multiple() && maxFiles !== undefined && next.length > maxFiles) {
|
||||
for (const file of next.slice(maxFiles)) {
|
||||
rejections.push({ file, reason: 'max-files' });
|
||||
}
|
||||
next = next.slice(0, maxFiles);
|
||||
}
|
||||
|
||||
this.value.set(next);
|
||||
this.touch.emit();
|
||||
if (rejections.length) this.rejected.emit(rejections);
|
||||
}
|
||||
|
||||
/**
|
||||
* Réplica de la comprobación del `accept` nativo, necesaria porque al soltar
|
||||
* ficheros el navegador no filtra nada.
|
||||
*/
|
||||
private matchesAccept(file: File): boolean {
|
||||
const accept = this.accept().trim();
|
||||
if (!accept) return true;
|
||||
|
||||
return accept.split(',').some((rawPattern) => {
|
||||
const pattern = rawPattern.trim().toLowerCase();
|
||||
if (!pattern) return false;
|
||||
if (pattern.startsWith('.')) {
|
||||
return file.name.toLowerCase().endsWith(pattern);
|
||||
}
|
||||
if (pattern.endsWith('/*')) {
|
||||
return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
|
||||
}
|
||||
return file.type.toLowerCase() === pattern;
|
||||
});
|
||||
}
|
||||
}
|
||||
1
libs/ui/src/lib/ui/file-upload/index.ts
Normal file
1
libs/ui/src/lib/ui/file-upload/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './file-upload/file-upload.component';
|
||||
@@ -3,12 +3,16 @@ import {
|
||||
Component,
|
||||
HostBinding,
|
||||
computed,
|
||||
effect,
|
||||
input,
|
||||
model,
|
||||
output,
|
||||
signal,
|
||||
viewChild,
|
||||
} from '@angular/core';
|
||||
import { FormValueControl, ValidationError } from '@angular/forms/signals';
|
||||
import { ErrorStateMatcher } from '@angular/material/core';
|
||||
import { MatInput } from '@angular/material/input';
|
||||
import { ComponentFamilyClass } from '../../styles';
|
||||
|
||||
/**
|
||||
@@ -74,6 +78,35 @@ export abstract class PiBaseFormFieldComponent<
|
||||
|
||||
protected readonly hasError = computed(() => this.errors().length > 0);
|
||||
|
||||
/**
|
||||
* `MatInput` normalmente deriva `errorState` de un `NgControl` (`ngModel`,
|
||||
* `formControlName`...); aquí no hay ninguno, el estado vive en `errors()`
|
||||
* (relleno por la directiva `FormField` de Signal Forms). Sin este matcher
|
||||
* Material nunca marca el campo como inválido (ni borde rojo ni mensaje),
|
||||
* pase lo que pase con `touched`/`invalid`.
|
||||
*/
|
||||
protected readonly errorStateMatcher: ErrorStateMatcher = {
|
||||
isErrorState: () => this.hasError(),
|
||||
};
|
||||
|
||||
/**
|
||||
* Sin `NgControl`, el `ngDoCheck` de `MatInput` nunca recalcula
|
||||
* `errorState` por sí solo, así que forzamos el recálculo a mano cada vez
|
||||
* que cambian los errores. Si el campo concreto no usa `matInput` (p. ej.
|
||||
* `pi-search-field`), `matInputRef()` sale `undefined` y no hace nada.
|
||||
*/
|
||||
private readonly matInputRef = viewChild(MatInput);
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
this.hasError();
|
||||
const matInput = this.matInputRef();
|
||||
if (!matInput) return;
|
||||
matInput.errorStateMatcher = this.errorStateMatcher;
|
||||
matInput.updateErrorState();
|
||||
});
|
||||
}
|
||||
|
||||
protected get focusedClass(): string | boolean {
|
||||
return this.focused() ? 'is-focused' : false;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<mat-checkbox
|
||||
[id]="inputId()"
|
||||
[checked]="checked()"
|
||||
[indeterminate]="indeterminate()"
|
||||
[disabled]="disabled()"
|
||||
[required]="required()"
|
||||
(change)="onChange($any($event).checked)"
|
||||
(blur)="touch.emit()"
|
||||
>
|
||||
@if (label()) {
|
||||
{{ label() | translate }}
|
||||
}
|
||||
<ng-content />
|
||||
</mat-checkbox>
|
||||
|
||||
@if (enableErrorMessage() && hasError()) {
|
||||
<span class="pi-checkbox__error">
|
||||
@for (message of errorMessages(); track message) {
|
||||
{{ message | translate }}
|
||||
}
|
||||
</span>
|
||||
}
|
||||
89
libs/ui/src/lib/ui/form-field/checkbox/checkbox.component.ts
Normal file
89
libs/ui/src/lib/ui/form-field/checkbox/checkbox.component.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
HostBinding,
|
||||
computed,
|
||||
input,
|
||||
model,
|
||||
output,
|
||||
} from '@angular/core';
|
||||
import { FormCheckboxControl, ValidationError } from '@angular/forms/signals';
|
||||
import { MatCheckbox } from '@angular/material/checkbox';
|
||||
import { TranslatePipe } from '@ngx-translate/core';
|
||||
|
||||
import { ComponentFamilyClass } from '../../../styles';
|
||||
|
||||
/** Contador para dar un `id` único a cada instancia. */
|
||||
let nextUniqueId = 0;
|
||||
|
||||
/**
|
||||
* Casilla de verificación.
|
||||
*
|
||||
* Implementa `FormCheckboxControl` (como `pi-slide-toggle`): el contrato de
|
||||
* Signal Forms para casillas usa `checked` y prohíbe declarar `value`, así que
|
||||
* no puede extender `PiBaseFormFieldComponent`.
|
||||
*
|
||||
* Envuelve `MatCheckbox` a propósito: los estilos de la librería
|
||||
* (`common/vendors/_mat-checkbox.scss`) apuntan a las clases `.mat-mdc-checkbox`
|
||||
* y `.mdc-checkbox__*`, así que heredarlos exige el componente de Material
|
||||
* debajo.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'pi-checkbox',
|
||||
templateUrl: './checkbox.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [MatCheckbox, TranslatePipe],
|
||||
})
|
||||
export class PiCheckboxComponent implements FormCheckboxControl {
|
||||
@HostBinding('class') get classes(): string {
|
||||
return [
|
||||
ComponentFamilyClass.Field,
|
||||
'pi-checkbox',
|
||||
this.checked() ? 'is-checked' : '',
|
||||
this.disabled() ? 'is-disabled' : '',
|
||||
this.hasError() ? 'has-error' : '',
|
||||
].join(' ');
|
||||
}
|
||||
|
||||
/* --- Contrato FormCheckboxControl ------------------------------------ */
|
||||
|
||||
readonly checked = model(false);
|
||||
readonly disabled = input(false);
|
||||
readonly required = input(false);
|
||||
readonly name = input('');
|
||||
readonly errors = input<readonly ValidationError.WithOptionalFieldTree[]>([]);
|
||||
|
||||
readonly touch = output<void>();
|
||||
|
||||
/* --- Presentación ----------------------------------------------------- */
|
||||
|
||||
/** Texto de la casilla. También se puede proyectar contenido libre. */
|
||||
readonly label = input<string>();
|
||||
|
||||
/** Estado intermedio, para casillas que agrupan a otras. */
|
||||
readonly indeterminate = model(false);
|
||||
|
||||
readonly enableErrorMessage = input(true);
|
||||
|
||||
/** Mismo criterio que `PiBaseFormFieldComponent`. */
|
||||
protected readonly errorMessages = computed(() =>
|
||||
this.errors().map((error) => error.message ?? error.kind),
|
||||
);
|
||||
|
||||
protected readonly hasError = computed(() => this.errors().length > 0);
|
||||
|
||||
/**
|
||||
* `name` solo lo rellena la directiva `FormField`; suelto llega vacío. Sin
|
||||
* este respaldo todas las instancias compartirían `id` y el `for` del
|
||||
* `<label>` apuntaría siempre a la primera de la página.
|
||||
*/
|
||||
private readonly uniqueId = `pi-checkbox-${nextUniqueId++}`;
|
||||
|
||||
protected readonly inputId = computed(() => this.name() || this.uniqueId);
|
||||
|
||||
protected onChange(isChecked: boolean): void {
|
||||
this.checked.set(isChecked);
|
||||
this.indeterminate.set(false);
|
||||
this.touch.emit();
|
||||
}
|
||||
}
|
||||
@@ -20,12 +20,12 @@
|
||||
pi-autofocus
|
||||
[isAutofocusSelected]="isAutofocus()"
|
||||
/>
|
||||
|
||||
@if (enableErrorMessage() && hasError()) {
|
||||
<mat-error>
|
||||
@for (message of errorMessages(); track message) {
|
||||
{{ message | translate }}
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@if (enableErrorMessage() && hasError()) {
|
||||
<mat-error>
|
||||
@for (message of errorMessages(); track message) {
|
||||
{{ message | translate }}
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<mat-form-field [appearance]="appearance()" floatLabel="always">
|
||||
<mat-label><ng-content select="pi-label"></ng-content></mat-label>
|
||||
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="picker"
|
||||
[value]="value()"
|
||||
[min]="min() ?? null"
|
||||
[max]="max() ?? null"
|
||||
[matDatepickerFilter]="dateFilter()"
|
||||
[placeholder]="placeholder()!"
|
||||
[disabled]="disabled()"
|
||||
(dateChange)="onDateChange($any($event).value)"
|
||||
(focus)="onFocus()"
|
||||
(blur)="onBlur()"
|
||||
/>
|
||||
|
||||
<mat-datepicker-toggle matSuffix [for]="picker" />
|
||||
<mat-datepicker #picker />
|
||||
</mat-form-field>
|
||||
|
||||
@if (enableErrorMessage() && hasError()) {
|
||||
<mat-error>
|
||||
@for (message of errorMessages(); track message) {
|
||||
{{ message | translate }}
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
|
||||
import {
|
||||
MatFormField,
|
||||
MatLabel,
|
||||
MatSuffix,
|
||||
MatError,
|
||||
} from '@angular/material/form-field';
|
||||
import { MatInput } from '@angular/material/input';
|
||||
import {
|
||||
MatDatepicker,
|
||||
MatDatepickerInput,
|
||||
MatDatepickerToggle,
|
||||
} from '@angular/material/datepicker';
|
||||
import { provideNativeDateAdapter } from '@angular/material/core';
|
||||
import { TranslatePipe } from '@ngx-translate/core';
|
||||
|
||||
import { PiBaseFormFieldComponent } from '../base-form-field.component';
|
||||
|
||||
/**
|
||||
* Campo de fecha.
|
||||
*
|
||||
* La librería ya traía todo el andamiaje de fechas (`pi-chip-date`,
|
||||
* `pi-chip-time`, `pi-select-period`, el patrón `monthYearPattern`) pero no un
|
||||
* selector. Este lo completa.
|
||||
*
|
||||
* Extiende `PiBaseFormFieldComponent` y envuelve `mat-form-field`, así hereda
|
||||
* sin trabajo extra los tokens de tema y el `errorStateMatcher` que hace
|
||||
* aparecer el borde rojo y el mensaje.
|
||||
*
|
||||
* Se provee aquí el adaptador nativo de fechas (trabaja con `Date`): el
|
||||
* proyecto no tiene instalado ningún adaptador de luxon o moment, así que sin
|
||||
* esto el datepicker fallaría al inyectar `DateAdapter`.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'pi-date-field',
|
||||
templateUrl: './date-field.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [provideNativeDateAdapter()],
|
||||
imports: [
|
||||
MatFormField,
|
||||
MatLabel,
|
||||
MatSuffix,
|
||||
MatInput,
|
||||
MatDatepicker,
|
||||
MatDatepickerInput,
|
||||
MatDatepickerToggle,
|
||||
MatError,
|
||||
TranslatePipe,
|
||||
],
|
||||
})
|
||||
export class PiDateFieldComponent extends PiBaseFormFieldComponent<Date | null> {
|
||||
@HostBinding('class') className = 'pi-form-field__date';
|
||||
|
||||
/**
|
||||
* `min` y `max` forman parte del contrato `FormUiControl`: si el campo
|
||||
* enlazado declara validadores `minDate`/`maxDate`, la directiva `FormField`
|
||||
* los inyecta aquí.
|
||||
*/
|
||||
readonly min = input<Date | undefined>(undefined);
|
||||
readonly max = input<Date | undefined>(undefined);
|
||||
|
||||
/** Deshabilita días sueltos (fines de semana, festivos...). */
|
||||
readonly dateFilter = input<(date: Date | null) => boolean>(() => true);
|
||||
|
||||
protected onDateChange(value: Date | null): void {
|
||||
this.value.set(value);
|
||||
}
|
||||
}
|
||||
@@ -17,12 +17,12 @@
|
||||
pi-autofocus
|
||||
[isAutofocusSelected]="isAutofocus()"
|
||||
/>
|
||||
|
||||
@if (enableErrorMessage() && hasError()) {
|
||||
<mat-error>
|
||||
@for (message of errorMessages(); track message) {
|
||||
{{ message | translate }}
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@if (enableErrorMessage() && hasError()) {
|
||||
<mat-error>
|
||||
@for (message of errorMessages(); track message) {
|
||||
{{ message | translate }}
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
appearance="fill"
|
||||
[isStroked]="true"
|
||||
></pi-icon>
|
||||
<mat-form-field appearance="fill" floatLabel="always">
|
||||
<mat-form-field [appearance]="appearance()" floatLabel="always">
|
||||
<mat-label><ng-content select="pi-label"></ng-content></mat-label>
|
||||
<input
|
||||
[value]="value()"
|
||||
|
||||
@@ -3,12 +3,13 @@
|
||||
flex-direction: column;
|
||||
& > section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// Alineado arriba, no centrado: `mat-form-field` reserva debajo un hueco
|
||||
// para el mensaje de error, así que centrarlo dejaba el icono por debajo
|
||||
// del centro real de la caja del input. Icono y caja miden lo mismo
|
||||
// (--pi-spacing-xxxx-large), así que alineándolos arriba quedan a la par.
|
||||
align-items: flex-start;
|
||||
gap: var(--pi-spacing-medium);
|
||||
width: 100%;
|
||||
.pi-icon {
|
||||
margin-top: var(--pi-spacing-small);
|
||||
}
|
||||
}
|
||||
.mat-mdc-form-field-error {
|
||||
margin-left: 3.8rem;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user