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

fix: resuelve el type-checking estricto de plantillas y formatea con prettier

Browse Source
This commit is contained in:
Josep Piguillem
2026-07-28 00:06:55 +02:00
parent c15ccea103
commit 91a1c0ee4c
339 changed files with 4724 additions and 2236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
libs/ui/src/lib/styles/animations.ts
View File

@@ -1,4 +1,10 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import {
animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import { DURATION } from './configs';
export function transitionAnimation(duration: DURATION): any {
@@ -6,11 +12,21 @@ export function transitionAnimation(duration: DURATION): any {
trigger('collapse', [
state(
'off',
style({ transform: 'translateY(0%)', opacity: '0', visibility: 'hidden', height: '0' })
style({
transform: 'translateY(0%)',
opacity: '0',
visibility: 'hidden',
height: '0',
}),
),
state(
'on',
style({ transform: 'translateY(0%)', opacity: '1', visibility: 'visible', height: '100%' })
style({
transform: 'translateY(0%)',
opacity: '1',
visibility: 'visible',
height: '100%',
}),
),
transition('on <=> off', [animate('420ms ease-in-out')]),
]),
@@ -25,7 +41,7 @@ export const enterTransition = transition(':enter', [
'240ms 200ms ease-out',
style({
opacity: 1,
})
}),
),
]);
@@ -37,7 +53,7 @@ export const leaveTransition = transition(':leave', [
'180ms 120ms ease-out',
style({
opacity: 0,
})
}),
),
]);

6
libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss
View File

@@ -46,9 +46,11 @@ $pi-border-radius-x-large: 1.375rem; // 22px
// Box shadow
$pi-box-shadow: rgba(#c5c5ce, 0.1) 3px 6px 6px 0px;
$pi-box-shadow-hover: rgba(#c3d5ff, 0.14) 2px 2px 5px 0px;
$pi-box-shadow-double: rgba(197, 197, 206, 0.1) 3px 6px 6px 0px,
$pi-box-shadow-double:
rgba(197, 197, 206, 0.1) 3px 6px 6px 0px,
-1px 4px 16px 2px rgba(197, 197, 206, 0.05);
$pi-box-shadow-panel-double: 7px 7px 12px 0px rgba(#c5c5ce, 0.12),
$pi-box-shadow-panel-double:
7px 7px 12px 0px rgba(#c5c5ce, 0.12),
-7px 7px 12 0px rgba(#c5c5ce, 0.06);
$pi-box-shadow-top: 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08);

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

@@ -277,7 +277,9 @@ a:not([href]):not([tabindex]) {
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
font-family:
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
font-size: 1em;
}

60
libs/ui/src/lib/styles/common/base/_pi-tipography.scss
View File

@@ -2,11 +2,15 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.svg#soehne-leicht')
format('svg');
font-weight: 300;
@@ -18,7 +22,8 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2')
format('woff2'),
@@ -37,11 +42,15 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.svg#soehne-buch')
format('svg');
font-weight: 400;
@@ -53,11 +62,13 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv')
@@ -71,11 +82,15 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.svg#soehne-kraftig')
format('svg');
font-weight: 600;
@@ -87,11 +102,15 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.svg#soehne-halbfett')
format('svg');
font-weight: 700;
@@ -103,7 +122,8 @@
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix')
src:
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2')
format('woff2'),

3
libs/ui/src/lib/styles/common/components/_pi-accordion.scss
View File

@@ -75,7 +75,8 @@
&:not(.pi-accordion__appearance--outline) {
// Footer
& > .pi-accordion-footer {
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium);
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small)
var(--pi-spacing-medium);
}
}
}

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

@@ -49,7 +49,8 @@
padding-left: var(--pi-spacing-#{$large-padding});
padding-bottom: var(--pi-spacing-#{$large-padding});
padding-right: var(--pi-spacing-#{$large-padding});
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large)
0 0;
}
& > *:nth-child(2) {
@@ -64,11 +65,13 @@
& > *:last-child {
padding-top: var(--pi-spacing-#{$small-padding});
padding-bottom: var(--pi-spacing-#{$small-padding});
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
}
& > * {
padding: 0 var(--pi-spacing-#{$large-padding}) var(--pi-spacing-#{$small-padding});
padding: 0 var(--pi-spacing-#{$large-padding})
var(--pi-spacing-#{$small-padding});
}
}
&.has-equal-inner-padding {
@@ -77,18 +80,21 @@
padding-top: var(--pi-spacing-#{$large-padding});
padding-bottom: var(--pi-spacing-#{$small-padding});
padding-right: var(--pi-spacing-#{$large-padding});
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large)
0 0;
}
& > *:last-child {
padding-top: var(--pi-spacing-#{$large-padding});
padding-bottom: var(--pi-spacing-#{$large-padding});
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
}
& > * {
&:not(:first-child) {
padding: var(--pi-spacing-#{$small-padding}) var(--pi-spacing-#{$large-padding})
padding: var(--pi-spacing-#{$small-padding})
var(--pi-spacing-#{$large-padding})
var(--pi-spacing-#{$small-padding});
}
}

8
libs/ui/src/lib/styles/common/components/_pi-list-item.scss
View File

@@ -93,8 +93,12 @@ html {
&.pi-list-item-icon__right {
background-color: var(--pi-color-primary-25);
border-top: 1px solid var(--pi-color-primary-50);
border-bottom-left-radius: calc(var(--pi-border-radius-large) - 1px);
border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px);
border-bottom-left-radius: calc(
var(--pi-border-radius-large) - 1px
);
border-bottom-right-radius: calc(
var(--pi-border-radius-large) - 1px
);
}
}
}

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

@@ -1,6 +1,9 @@
@mixin fixedBottomNote(
$left: 0,
$bottom: calc(var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)),
$bottom: calc(
var(--pi-height-footer) - var(--pi-spacing-large) +
env(safe-area-inset-bottom)
),
$width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)),
$min-width: auto
) {
@@ -48,9 +51,11 @@ html {
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
.pi-hamburger
):not(.pi-button__xx-small):not(.pi-button__x-large):not(
.pi-button__toggle
) {
height: var(--pi-spacing-xx-large);
padding-top: unset;
padding-bottom: unset;
@@ -78,7 +83,10 @@ html {
&.is-tablet__small {
@include fixedBottomNote(
0,
calc(env(safe-area-inset-bottom) + var(--pi-height-footer) - var(--pi-spacing-x-large)),
calc(
env(safe-area-inset-bottom) +
var(--pi-height-footer) - var(--pi-spacing-x-large)
),
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
);
}
@@ -94,16 +102,20 @@ html {
height: var(--pi-spacing-xx-large);
width: var(--pi-spacing-xx-large);
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):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-small);
padding-right: var(--pi-spacing-small);
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
.pi-hamburger
):not(.pi-button__xx-small):not(.pi-button__x-large):not(
.pi-button__toggle
) {
height: var(--pi-spacing-xx-large);
}
}

34
libs/ui/src/lib/styles/common/components/_pi-panel.scss
View File

@@ -10,11 +10,13 @@
padding-left: var(--pi-spacing-#{$padding});
padding-right: var(--pi-spacing-#{$padding});
&:first-child {
border-radius: var(--pi-border-radius-large) 0 0 var(--pi-border-radius-large);
border-radius: var(--pi-border-radius-large) 0 0
var(--pi-border-radius-large);
}
&:last-child {
border-radius: 0 var(--pi-border-radius-large) var(--pi-border-radius-large) 0;
border-radius: 0 var(--pi-border-radius-large)
var(--pi-border-radius-large) 0;
}
}
}
@@ -28,11 +30,13 @@
&:first-child {
padding-top: var(--pi-spacing-#{$padding});
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
border-radius: var(--pi-border-radius-large)
var(--pi-border-radius-large) 0 0;
}
&:last-child {
padding-bottom: var(--pi-spacing-#{$padding});
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
}
}
}
@@ -115,7 +119,9 @@
& > *:not(.pi-button):not(.pi-panel-content):not(.pi-chip) {
&:nth-child(n + 2) {
width: 100%;
& > .pi-text-viewer__flex-direction--row + .pi-text-viewer__flex-direction--row {
&
> .pi-text-viewer__flex-direction--row
+ .pi-text-viewer__flex-direction--row {
margin-top: var(--pi-spacing-xx-small);
}
}
@@ -376,15 +382,17 @@ html {
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__expandable {
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
button:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
) {
min-width: 100%;
}
}
}
.pi-saas-panel-subtitle {
.pi-panel-subtitle-content {
.pi-panel-subtitle-content {
width: 100%;
}
}
@@ -415,9 +423,11 @@ html {
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__expandable {
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
button:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
) {
min-width: 9.25rem;
}
}

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

@@ -178,70 +178,266 @@ mark {
}
@mixin textColor($color) {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color});
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color});
}
// (50)
&.pi-color__density--50 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-50);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-50);
}
}
// (100)
&.pi-color__density--100 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-100);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-100);
}
}
// (200)
&.pi-color__density--200 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-200);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-200);
}
}
// (300)
&.pi-color__density--300 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-300);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-300);
}
}
// (400)
&.pi-color__density--400 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-400);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-400);
}
}
// (900)
&.pi-color__density--900 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-900);
}
&:not(button):not([class*='content'])
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-#{$color}-900);
}
}
@@ -274,63 +470,266 @@ mark {
// Grey
.pi-color__grey {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey);
}
// Grey (50)
&.pi-color__density--50 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-75);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-75);
}
}
// Grey (100)
&.pi-color__density--100 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-100);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-100);
}
}
// Grey (200)
&.pi-color__density--200 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-200);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-200);
}
}
// Grey (300)
&.pi-color__density--300 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-300);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-300);
}
}
// Grey (400)
&.pi-color__density--400 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-300);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-300);
}
}
// Grey (900)
&.pi-color__density--900 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
}
@@ -338,27 +737,114 @@ mark {
// White
.pi-color__white {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white);
}
// White (200)
&.pi-color__density--200 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white-rgba-06);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white-rgba-06);
}
}
// White (900)
&.pi-color__density--900 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-white);
}
}
@@ -366,27 +852,114 @@ mark {
// Black
.pi-color__black {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
// Black (200)
&.pi-color__density--200 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
}
// Black (900)
&.pi-color__density--900 {
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
&:not(button)
> *:is(
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
strong,
label,
figcaption,
legend,
small
) {
color: var(--pi-color-grey-900);
}
}

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

@@ -1,32 +1,34 @@
@mixin privateButtonsSizes {
&: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-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);
}
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(.pi-button__trimmed):not(
.ch2-btn
):not(.pi-button__icon--single) {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(
.pi-button__trimmed
):not(.ch2-btn):not(.pi-button__icon--single) {
&.pi-button__x-small {
height: var(--pi-spacing-xx-large);
}
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
// Sizes
// X small
&.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
) {
&: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) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
}
@@ -36,7 +38,9 @@
// Fill
@mixin privateButtonFillColor($color) {
// Default color
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
background-color: var(--pi-color-#{$color});
color: var(--pi-color-white);
&:disabled {
@@ -99,9 +103,9 @@
@mixin privateButtonsColors {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
// Color
// White
&.pi-color__white {
@@ -118,9 +122,9 @@
}
}
// White default
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__highlighted
):not(.pi-color__white) {
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
.pi-color__warn
):not(.pi-color__highlighted):not(.pi-color__white) {
&:not(:hover) {
color: var(--pi-color-primary);
}
@@ -154,7 +158,9 @@
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey) {
):not(.pi-color__black):not(.pi-color__highlighted):not(
.pi-color__grey
) {
@include privateButtonGhostColor(primary);
}
// Ghost & Accent

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

@@ -1,5 +1,9 @@
@mixin publicGhostButtonsColors(
$background-image: linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)),
$background-image: linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
),
$color: primary
) {
color: var(--pi-color-#{$color});
@@ -29,7 +33,9 @@
}
@mixin publicFillButtonsGradients($color) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
background-size: 100%;
background-repeat: repeat;
color: var(--pi-color-white);
@@ -66,42 +72,44 @@
// Sizes
@mixin publicButtonsSizes {
&: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__type--menu-item
) {
&: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__type--menu-item) {
height: 2.875rem;
&.pi-button__icon--single {
width: var(--pi-spacing-xxxx-large);
}
}
&:not(.pi-button__toggle):not(.pi-button__x-large):not(.pi-button__trimmed):not(
.pi-button__type--menu-item
) {
&:not(.pi-button__toggle):not(.pi-button__x-large):not(
.pi-button__trimmed
):not(.pi-button__type--menu-item) {
height: 2.875rem;
&.pi-button__icon--single {
width: var(--pi-spacing-xxxx-large);
}
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
// Sizes
// X small
&.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
):not(.pi-button__trimed):not(.pi-button__xx-small):not(.pi-button__trimmed) {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
.pi-button__small
):not(.pi-button__large):not(.pi-button__trimed):not(
.pi-button__xx-small
):not(.pi-button__trimmed) {
min-height: 2.875rem;
}
&: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
) {
&: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) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
}
@@ -111,7 +119,9 @@
// Shine hover effect
@mixin publicButtonsShineHoverEffect {
// Hover shine effect
&:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(.pi-color__black) {
&:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(
.pi-color__black
) {
position: relative;
overflow: hidden;
&::after {
@@ -149,9 +159,12 @@
}
&:active {
box-shadow: 0px 0px 0px white;
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
}
}
// Mode Dark
@@ -166,9 +179,12 @@
}
&:active {
box-shadow: 0px 0px 0px white;
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.125);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.125);
box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.125);
}
}
&:focus {
@@ -193,9 +209,9 @@
@include publicButtonsShineHoverEffect;
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
font: {
weight: 600;
}
@@ -217,9 +233,9 @@
}
}
// White default
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__highlighted
) {
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
.pi-color__warn
):not(.pi-color__highlighted) {
&:not(:hover) {
color: var(--pi-color-primary);
}
@@ -263,9 +279,9 @@
}
}
// White default
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__highlighted
) {
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
.pi-color__warn
):not(.pi-color__highlighted) {
&:not(:hover) {
color: var(--pi-color-black);
}
@@ -274,17 +290,20 @@
// Warn
&.pi-color__warn {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
@include publicButtonsBackgroundColors(var(--pi-color-warn-200), var(--pi-color-warn-900));
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
@include publicButtonsBackgroundColors(
var(--pi-color-warn-200),
var(--pi-color-warn-900)
);
}
// Mode
// Default
&:not(.pi-color__mode--light) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(0deg 74% 71%) 0%,
@@ -302,9 +321,9 @@
}
// Light
&.pi-color__mode--light {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(350deg 100% 93%) 0%,
@@ -330,9 +349,9 @@
// Success
&.pi-color__success {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
@include publicButtonsBackgroundColors(
var(--pi-color-success-200),
var(--pi-color-success-900)
@@ -341,9 +360,9 @@
// Mode
// Default
&:not(.pi-color__mode--light) {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(155deg 48% 79%) 0%,
@@ -361,9 +380,9 @@
}
// Light
&.pi-color__mode--light {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-color__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-color__white) {
background-image: linear-gradient(
300deg,
hsl(155deg 62% 91%) 0%,
@@ -402,13 +421,17 @@
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey):not(
.pi-color__success
) {
):not(.pi-color__black):not(.pi-color__highlighted):not(
.pi-color__grey
):not(.pi-color__success) {
@include publicGhostButtonsColors;
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-primary-100), var(--pi-color-primary-200)),
linear-gradient(
30deg,
var(--pi-color-primary-100),
var(--pi-color-primary-200)
),
primary-200
);
}
@@ -416,12 +439,20 @@
// Ghost & Accent
&.pi-color__accent {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)),
linear-gradient(
30deg,
var(--pi-color-accent),
var(--pi-color-accent-900)
),
accent
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-accent-100), var(--pi-color-accent-100)),
linear-gradient(
30deg,
var(--pi-color-accent-100),
var(--pi-color-accent-100)
),
accent-200
);
}
@@ -429,12 +460,20 @@
// Ghost & Warn
&.pi-color__warn {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-warn), var(--pi-color-warn-900)),
linear-gradient(
30deg,
var(--pi-color-warn),
var(--pi-color-warn-900)
),
warn
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-warn-100), var(--pi-color-warn-200)),
linear-gradient(
30deg,
var(--pi-color-warn-100),
var(--pi-color-warn-200)
),
warn-200
);
}
@@ -444,7 +483,11 @@
@include publicGhostButtonsColors;
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-white), rgba($color: white, $alpha: 0.6)),
linear-gradient(
30deg,
var(--pi-color-white),
rgba($color: white, $alpha: 0.6)
),
white
);
}
@@ -452,12 +495,20 @@
// Ghost & Black
&.pi-color__black {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-black), var(--pi-color-grey-900)),
linear-gradient(
30deg,
var(--pi-color-black),
var(--pi-color-grey-900)
),
grey
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-black), rgba($color: #3d3d3d, $alpha: 0.6)),
linear-gradient(
30deg,
var(--pi-color-black),
rgba($color: #3d3d3d, $alpha: 0.6)
),
grey-200
);
}
@@ -465,7 +516,11 @@
// Ghost & Highlighted
&.pi-color__highlighted {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)),
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
),
highlighted
);
&:disabled {
@@ -482,12 +537,20 @@
// Ghost & Grey
&.pi-color__grey {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-grey-100), var(--pi-color-grey-400)),
linear-gradient(
30deg,
var(--pi-color-grey-100),
var(--pi-color-grey-400)
),
grey-400
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-grey-25), var(--pi-color-grey-75)),
linear-gradient(
30deg,
var(--pi-color-grey-25),
var(--pi-color-grey-75)
),
grey-50
);
}
@@ -495,12 +558,20 @@
// Ghost & Success
&.pi-color__success {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-success), var(--pi-color-success-900)),
linear-gradient(
30deg,
var(--pi-color-success),
var(--pi-color-success-900)
),
success
);
&:disabled {
@include publicGhostButtonsColors(
linear-gradient(30deg, var(--pi-color-success-100), var(--pi-color-success-200)),
linear-gradient(
30deg,
var(--pi-color-success-100),
var(--pi-color-success-200)
),
success-200
);
}
@@ -627,8 +698,12 @@
@mixin publicFixedButtonSideSpacing(
$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))
$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 {
&.pi-shell__deale-website,

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

@@ -13,9 +13,9 @@
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
border: none;
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
@@ -26,7 +26,9 @@
padding-top: var(--pi-spacing-xx-small);
padding-bottom: var(--pi-spacing-xx-small);
}
&:not(.pi-button__x-large):not(.pi-button__trimmed):not(.pi-button__toggle) {
&:not(.pi-button__x-large):not(.pi-button__trimmed):not(
.pi-button__toggle
) {
&:not(.pi-button__x-small) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
@@ -39,9 +41,9 @@
}
}
&:not(.pi-button__icon--single):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
):not(.ch2-btn) {
&:not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle):not(.ch2-btn) {
&:not(.pi-button__x-small) {
min-width: 5.5rem;
padding-left: var(--pi-spacing-x-large);
@@ -62,9 +64,9 @@
@mixin buttonsSizes {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item) {
&.pi-button__x-small {
font: {
size: 0.8125rem;

13
libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss
View File

@@ -1,10 +1,15 @@
@mixin cellWidth($default-width, $action-width, $icon-width, $description-width) {
@mixin cellWidth(
$default-width,
$action-width,
$icon-width,
$description-width
) {
.pi-cell {
display: flex;
// Cell type default
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(.pi-cell__type--checkbox):not(
.pi-cell__type--date
):not(.pi-cell__type--description) {
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(
.pi-cell__type--checkbox
):not(.pi-cell__type--date):not(.pi-cell__type--description) {
width: $default-width;
flex-grow: 1;
}

5
libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss
View File

@@ -21,7 +21,10 @@
&.pi-card {
display: grid;
.pi-cell {
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
min-height: calc(
var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) +
0.0625rem
);
margin-top: var(--pi-spacing-xx-small);
& > .pi-text-viewer,

10
libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss
View File

@@ -10,7 +10,10 @@
*
**/
@mixin dataGridDataDirectionColumn($key-cell-width: 15rem, $value-cell-width: 6rem) {
@mixin dataGridDataDirectionColumn(
$key-cell-width: 15rem,
$value-cell-width: 6rem
) {
// MODE List (Table)
.pi-data-grid {
@@ -24,7 +27,10 @@
// Cell
.pi-cell {
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
min-height: calc(
var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) +
0.0625rem
);
margin-top: var(--pi-spacing-xx-small);
// Vertival align
&.pi-cell__vertical-align--center {

4
libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss
View File

@@ -46,7 +46,9 @@
.mat-mdc-form-field-flex {
justify-content: space-between;
align-items: center;
height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small));
height: calc(
var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small)
);
.mat-mdc-form-field-infix {
text-align: center;
}

3
libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss
View File

@@ -32,7 +32,8 @@
padding: var(--pi-spacing-small) 0;
textarea {
&.mat-mdc-input-element {
padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small) 0;
padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small)
0;
}
}
}

8
libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss
View File

@@ -56,7 +56,9 @@
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-underline {
transform: translateY(calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)));
transform: translateY(
calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))
);
}
input {
@@ -122,7 +124,9 @@ html {
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-underline {
transform: translateY(
calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))
calc(
var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)
)
);
}

61
libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss
View File

@@ -32,8 +32,10 @@
&:active {
transform: translate(0, -0.125rem);
box-shadow: 0px 0px 0px white;
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem
rgba(255, 255, 255, 0.25);
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
}
}
@@ -49,7 +51,11 @@
}
}
@mixin billingCycleContentColor($text-color, $theming-color-light, $theming-color) {
@mixin billingCycleContentColor(
$text-color,
$theming-color-light,
$theming-color
) {
color: var(--pi-color-#{$text-color});
background-color: var(--pi-color-#{$theming-color});
border-color: var(--pi-color-#{$theming-color});
@@ -169,7 +175,11 @@
fieldset {
.pi-list-item {
&.is-active {
@include billingCycleContentColor(primary-900, primary, primary-100);
@include billingCycleContentColor(
primary-900,
primary,
primary-100
);
}
&:hover {
&:not(.is-active) {
@@ -237,7 +247,10 @@
}
}
@mixin pricingLayoutSpacings($bottom-blocks-top-spacing, $bottom-blocks-height) {
@mixin pricingLayoutSpacings(
$bottom-blocks-top-spacing,
$bottom-blocks-height
) {
.pi-layout {
&.pi-layout__09-pricing {
& > *:nth-child(4) {
@@ -253,10 +266,14 @@
.pi-card-content__center {
& > article {
&:nth-child(n + 2) {
margin-top: calc(#{$bottom-blocks-top-spacing} + 2 * var(--pi-spacing-xx-large));
margin-top: calc(
#{$bottom-blocks-top-spacing} + 2 * var(--pi-spacing-xx-large)
);
}
& > .pi-list-item {
height: calc(#{$bottom-blocks-height} + 2 * var(--pi-spacing-small));
height: calc(
#{$bottom-blocks-height} + 2 * var(--pi-spacing-small)
);
}
}
}
@@ -271,11 +288,19 @@
fieldset {
.pi-list-item {
&.is-active {
@include billingCycleContentColor(highlighted-900, highlighted, highlighted-100);
@include billingCycleContentColor(
highlighted-900,
highlighted,
highlighted-100
);
}
&:hover {
&:not(.is-active) {
@include billingCycleContentColor(highlighted, highlighted, highlighted-50);
@include billingCycleContentColor(
highlighted,
highlighted,
highlighted-50
);
}
}
}
@@ -285,7 +310,11 @@
&.pi-color__mode--light {
@include checkIconBackgroundColor(var(--pi-color-highlighted-50));
@include cardInternalBorders(var(--pi-color-highlighted-100));
@include pricingCardContentColor(highlighted, white, highlighted-dark);
@include pricingCardContentColor(
highlighted,
white,
highlighted-dark
);
}
}
}
@@ -293,7 +322,9 @@
}
}
@mixin pricingLayoutWidth($container-width: calc(100% - var(--pi-spacing-xx-large))) {
@mixin pricingLayoutWidth(
$container-width: calc(100% - var(--pi-spacing-xx-large))
) {
.pi-layout {
&.pi-layout__09-pricing {
max-width: $container-width;
@@ -720,9 +751,11 @@ html {
width: 100%;
font-weight: 300;
&:not(.mdc-switch):not(.pi-button__toggle) {
&: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(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle):not(
.pi-button__trimmed
) {
height: var(--pi-spacing-xxxx-large);
}
}

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

@@ -1,4 +1,7 @@
@mixin containerWidth($width: calc(100% - var(--pi-spacing-xx-large)), $no-padding-width: 100%) {
@mixin containerWidth(
$width: calc(100% - var(--pi-spacing-xx-large)),
$no-padding-width: 100%
) {
.pi-shell {
&.pi-shell__deale-website {
.pi-container-layout {
@@ -51,7 +54,10 @@ html {
&.is-desktop {
// Desktop S & M
&:not(.is-desktop__large) {
@include containerWidth(var(--pi-public-width-container), var(--pi-public-width-container));
@include containerWidth(
var(--pi-public-width-container),
var(--pi-public-width-container)
);
}
// Desktop L
&.is-desktop__large {

8
libs/ui/src/lib/styles/common/vendors/_ch2-button.scss vendored
View File

@@ -24,7 +24,9 @@
}
}
}
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
button:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
) {
&.ch2-btn {
min-height: var(--pi-spacing-xxx-large) !important;
&:not(.ch2-btn-primary) {
@@ -238,7 +240,9 @@
&:nth-child(1) {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
) {
min-width: unset;
width: 50%;
}

72
libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss vendored
View File

@@ -52,38 +52,76 @@
}
.mdc-checkbox {
padding: calc(
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
1.125rem
) /
2
);
margin: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
) - var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
)
) /
2
);
.mdc-checkbox__background {
top: calc((var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2);
top: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
1.125rem
) /
2
);
left: calc(
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
1.125rem
) /
2
);
}
.mdc-checkbox__native-control {
top: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
) - var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
)
) /
2
);
right: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
) - var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
)
) /
2
);
left: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
) - var(
--mdc-checkbox-state-layer-size,
var(--pi-spacing-x-large)
)
) /
2
);
width: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large));
height: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large));
@@ -115,7 +153,9 @@
&:hover {
.mdc-checkbox__native-control {
&:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
&:not(:checked):not(:indeterminate):not(
[data-indeterminate='true']
) {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-primary);
}

10
libs/ui/src/lib/styles/common/vendors/_mat-chip.scss vendored
View File

@@ -2,8 +2,8 @@
.mat-mdc-chip {
&.mat-mdc-standard-chip {
color: var(--pi-color-primary);
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small)
var(--pi-spacing-medium);
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small)
var(--pi-spacing-xx-small) var(--pi-spacing-medium);
gap: var(--pi-spacing-xxxx-small);
background-color: transparent;
border: 1px solid;
@@ -31,9 +31,9 @@
button {
&.pi-button {
&.pi-button__primary {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-button__white
) {
&:not(.pi-button__appearance--ghost):not(
.pi-button__appearance--outline
):not(.pi-button__white) {
background-color: transparent;
}
}

9
libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss vendored
View File

@@ -19,8 +19,13 @@
}
.mdc-linear-progress__bar-inner {
border-style: solid;
border-image: linear-gradient(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1;
border-top-width: var(--mdc-linear-progress-track-height, .375rem);
border-image: linear-gradient(
45deg,
var(--pi-color-primary),
var(--pi-color-highlighted)
)
1;
border-top-width: var(--mdc-linear-progress-track-height, 0.375rem);
}
}
}

13
libs/ui/src/lib/styles/common/vendors/_mat-slider.scss vendored
View File

@@ -126,8 +126,9 @@ html {
&:not(.pi-slider__range) {
.mat-mdc-slider {
width: calc(
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
var(--pi-spacing-xx-large)
100vw - var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xx-large
) - var(--pi-spacing-xx-large)
);
}
}
@@ -137,9 +138,11 @@ html {
.pi-slider {
.mat-mdc-slider {
width: calc(
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) -
var(--pi-spacing-medium)
100vw - var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xx-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(
--pi-spacing-medium
) - var(--pi-spacing-medium)
);
}
}

6
libs/ui/src/lib/styles/common/vendors/_typeform.scss vendored
View File

@@ -1,8 +1,8 @@
@media screen and (max-width: 77.5rem) {
.tf-v1-popup {
.tf-v1-close {
transform: translateX(2rem);
transform: translateY(-2rem);
transform: translateX(2rem);
transform: translateY(-2rem);
}
}
}
}

86
libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss
View File

@@ -27,14 +27,21 @@
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
left: var(--pi-spacing-#{$side-spacing});
width: calc(100% - var(--pi-spacing-#{$side-spacing}) - var(--pi-spacing-#{$side-spacing}));
width: calc(
100% - var(--pi-spacing-#{$side-spacing}) - var(
--pi-spacing-#{$side-spacing}
)
);
}
}
}
@mixin fixedActionWrapperMainBottom(
$position: fixed,
$bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large))
$bottom: calc(
var(--pi-height-footer) +
env(safe-area-inset-bottom) - var(--pi-spacing-x-large)
)
) {
.pi-layout {
&.pi-layout__main {
@@ -112,8 +119,9 @@ html {
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
bottom: calc(
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + var(--pi-height-footer) +
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) +
var(--pi-height-footer) + var(--pi-spacing-x-large) +
env(safe-area-inset-bottom)
);
}
}
@@ -130,7 +138,8 @@ html {
@include fixedActionWrapperMainBottom(
unset,
calc(
var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large)
var(--pi-height-footer) +
env(safe-area-inset-bottom) - var(--pi-spacing-x-large)
)
);
}
@@ -139,14 +148,14 @@ html {
.pi-layout {
.pi-wrapper__action {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button:not(.pi-button__icon):not(
.pi-button__x-small
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not(
.pi-button__xx-small
),
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
) {
&:not(.pi-close-button):not(.pi-hamburger).pi-button:not(
.pi-button__icon
):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
):not(.pi-button__trimed):not(.pi-button__xx-small),
&:not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__icon--single
):not(.pi-button__xx-small) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
padding-left: var(--pi-spacing-small);
padding-right: var(--pi-spacing-small);
@@ -169,7 +178,9 @@ html {
// Only fixed in small devices
&.pi-wrapper__action--position-fixed-mobile {
left: 0;
bottom: calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
bottom: calc(
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
);
width: 100%;
}
}
@@ -182,7 +193,8 @@ html {
// Only fixed in small devices
&.pi-wrapper__action--position-fixed-mobile {
bottom: calc(
var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)
var(--pi-height-footer) - var(--pi-spacing-large) +
env(safe-area-inset-bottom)
);
}
}
@@ -207,11 +219,13 @@ html {
&.is-tablet__large {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large)
),
calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
100% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
)
);
}
@@ -225,7 +239,10 @@ html {
& > div {
// Has Not Sticky Note
&:not(.has-bottom-sticky-note) {
@include fixedActionWrapperMainBottom(fixed, var(--pi-spacing-x-large));
@include fixedActionWrapperMainBottom(
fixed,
var(--pi-spacing-x-large)
);
}
// Sticky Note
&.has-bottom-sticky-note {
@@ -246,7 +263,10 @@ html {
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem)
calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) -
7.75rem
)
);
}
&.aside-is-closed {
@@ -256,8 +276,9 @@ html {
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-xxx-small)
90% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-xxx-small)
)
);
}
@@ -271,7 +292,10 @@ html {
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem)
calc(
100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) -
7.75rem
)
);
}
// Aside is closed
@@ -282,8 +306,10 @@ html {
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem
90% - var(--pi-width-navbar-expanded) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-medium) -
0.0625rem
)
);
}
@@ -301,7 +327,10 @@ html {
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem)
calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) -
7.75rem
)
);
}
// Aside is closed
@@ -324,7 +353,10 @@ html {
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem)
calc(
100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) -
7.75rem
)
);
}
// Aside is closed

5
libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss
View File

@@ -7,7 +7,10 @@
& > section {
overflow-y: scroll;
height: calc(
100vh - var(--pi-height-header-#{$device}) - var(--pi-height-layout-header) - #{$extra-height}rem
100vh - var(--pi-height-header-#{$device}) - var(
--pi-height-layout-header
) -
#{$extra-height}rem
);
&::-webkit-scrollbar {
display: none;

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

@@ -1,4 +1,6 @@
@mixin mainWrapperCentered($height: calc(100% - var(--pi-height-header-mobile))) {
@mixin mainWrapperCentered(
$height: calc(100% - var(--pi-height-header-mobile))
) {
.pi-shell__deale-saas {
& > div {
// NOT Is fullscreen
@@ -54,7 +56,9 @@
}
// Type document
&.pi-wrapper__main--type-document {
padding-bottom: calc(var(--pi-height-action-bar) + var(--pi-spacing-x-large));
padding-bottom: calc(
var(--pi-height-action-bar) + var(--pi-spacing-x-large)
);
h1 {
text-align: center;
}

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

@@ -1,5 +1,6 @@
// Shell level
export const shellTheming = (ShellClass: string) => `pi-shell pi-shell__${ShellClass}`;
export const shellTheming = (ShellClass: string) =>
`pi-shell pi-shell__${ShellClass}`;
export const ShellClass = {
// Deale Landings (Public)
@@ -29,7 +30,7 @@ export const height = (height: Height): string => `pi-layout__${height}`;
export const heights = (
mobileHeight: Height,
tabletHeight: Height,
desktopHeight: Height
desktopHeight: Height,
): string =>
`pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`;
@@ -121,7 +122,8 @@ export const LayoutTypeClass = {
// Splitted
Splitted: 'pi-layout pi-layout__05-splitted',
// SplittedPaywall
SplittedPaywall: 'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout',
SplittedPaywall:
'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout',
// Edge to Edge
EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge',
// List Left
@@ -141,7 +143,8 @@ export const WebsiteScreenTypeClass = {
};
// Wrappers
export const wrapperType = (wrapperClass: string) => `pi-wrapper pi-wrapper__${wrapperClass}`;
export const wrapperType = (wrapperClass: string) =>
`pi-wrapper pi-wrapper__${wrapperClass}`;
export const WrapperTypeClass = {
Action: wrapperType('action'),
@@ -153,7 +156,8 @@ export const WrapperTypeClass = {
};
// Components
export const componentFamily = (componentClass: string) => `pi-component pi-${componentClass}`;
export const componentFamily = (componentClass: string) =>
`pi-component pi-${componentClass}`;
export const ComponentFamilyClass = {
Button: componentFamily('button'),

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

@@ -26,7 +26,9 @@
@mixin authenticationLayoutSpacings($spacing, $gap) {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth):not(.pi-layout__00-authentication--default-space) {
&:not(.pi-layout__00-authentication--auth):not(
.pi-layout__00-authentication--default-space
) {
.pi-panel {
.pi-panel-content__top,
.pi-panel-content__bottom {
@@ -88,8 +90,14 @@
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:
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;
@@ -164,7 +172,11 @@ html {
&.is-tablet__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(calc(100% - 4rem), calc(100% - 4rem), 70vh);
@include authenticationLayoutSizes(
calc(100% - 4rem),
calc(100% - 4rem),
70vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(
@@ -272,24 +284,33 @@ html {
.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(
&: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) {
):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(
&: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) {
):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);
padding: var(--pi-spacing-xxxx-small)
var(--pi-spacing-x-large);
}
}
}
@@ -307,10 +328,18 @@ html {
&.is-desktop__small {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(75%, var(--pi-public-width-container), 70vh);
@include authenticationLayoutSizes(
75%,
var(--pi-public-width-container),
70vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(72%, var(--pi-public-width-container), 76vh);
@include authenticationLayoutSizes(
72%,
var(--pi-public-width-container),
76vh
);
}
}
}
@@ -319,10 +348,18 @@ html {
&.is-desktop__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(72%, var(--pi-public-width-container), 78vh);
@include authenticationLayoutSizes(
72%,
var(--pi-public-width-container),
78vh
);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(66.66%, var(--pi-public-width-container), 78vh);
@include authenticationLayoutSizes(
66.66%,
var(--pi-public-width-container),
78vh
);
}
}
}

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

@@ -10,11 +10,15 @@ html {
.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(
&: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) {
):not(.pi-button__trimmed):not(.pi-button__toggle):not(
.ch2-btn
) {
min-width: 13.5rem;
}
}

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

@@ -1,4 +1,7 @@
@mixin authenticationLayoutSelectMenuTypeCustom($columnsNum: 1, $card-height: unset) {
@mixin authenticationLayoutSelectMenuTypeCustom(
$columnsNum: 1,
$card-height: unset
) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-select {

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

@@ -25,11 +25,17 @@
html {
&.is-mobile {
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxx-large), x-small);
@include authenticationDefaultSpaceLayoutSpacings(
var(--pi-spacing-xxx-large),
x-small
);
}
&.is-tablet {
&.is-tablet__small {
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxxx-large), small);
@include authenticationDefaultSpaceLayoutSpacings(
var(--pi-spacing-xxxx-large),
small
);
}
&.is-tablet__large {
@include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);

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

@@ -9,11 +9,15 @@ html {
.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(
&: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) {
):not(.pi-button__trimmed):not(.pi-button__toggle):not(
.ch2-btn
) {
min-width: 13.5rem;
}
}

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

@@ -165,9 +165,9 @@ html {
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) {
&: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);

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

@@ -38,8 +38,16 @@ html {
// 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)),
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
);
}

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

@@ -33,7 +33,10 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
justify-content: center;
align-items: center;
min-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 23.65rem
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-height-header
) -
23.65rem
);
.pi-note {
width: $width;
@@ -79,7 +82,9 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
& > *:nth-child(3) {
& > * {
min-height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header));
min-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header)
);
}
.pi-panel-content {
// Center
@@ -125,7 +130,9 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
.pi-chip__large {
&:not(.pi-chip__single-icon) {
height: calc(
var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxx-small)
var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xxx-small
)
);
max-width: 100%;
width: 100%;
@@ -238,7 +245,10 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
// 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
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-height-header
) -
24rem
);
max-width: calc(100% - var(--pi-spacing-xxx-small));
overflow-y: auto;

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

@@ -1,8 +1,13 @@
@mixin fullWidthLayoutWidthLargeDevice(
$width: calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem),
$width: calc(
100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem
),
$max-width-closed: var(--pi-width-container-s),
$max-width-open:
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
$max-width-open: calc(
100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(
--pi-spacing-x-large
)
)
) {
.pi-shell__deale-saas {
& > div {
@@ -90,7 +95,8 @@ html {
&.is-desktop {
.pi-layout {
&.pi-layout__02-full-width {
padding: 0 0 calc(var(--pi-spacing-xxxx-large) + var(--pi-height-footer));
padding: 0 0
calc(var(--pi-spacing-xxxx-large) + var(--pi-height-footer));
}
}
@@ -105,9 +111,16 @@ html {
// Desktop M
&.is-desktop__medium {
@include fullWidthLayoutWidthLargeDevice(
calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem),
calc(
100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) -
6.5rem
),
var(--pi-width-container),
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
calc(
100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(
--pi-spacing-x-large
)
)
);
}
// Desktop L

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

@@ -1,4 +1,6 @@
@mixin layoutVerticallyCenteredSpacings($padding-top: var(--pi-public-height-header-mobile)) {
@mixin layoutVerticallyCenteredSpacings(
$padding-top: var(--pi-public-height-header-mobile)
) {
.pi-container-layout {
& > .pi-layout__06-edge-to-edge {
& > .pi-wrapper__header {
@@ -96,7 +98,9 @@ html {
// Tablet & Desktop
&:not(.is-mobile) {
@media screen and (min-width: 62rem) {
@include layoutVerticallyCenteredSpacings(var(--pi-public-height-header-desktop));
@include layoutVerticallyCenteredSpacings(
var(--pi-public-height-header-desktop)
);
}
}
}

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

@@ -5,4 +5,3 @@
justify-content: space-between;
}
}

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

@@ -78,8 +78,10 @@ html {
// Right
&.pi-main-wrapper-content__right {
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large) -
var(--pi-height-footer) - 8rem
100vh - var(--pi-spacing-x-large) - var(
--pi-spacing-x-large
) - var(--pi-height-footer) -
8rem
);
}
// Left
@@ -105,9 +107,9 @@ html {
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
) {
&: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);
}
}
@@ -130,16 +132,18 @@ html {
}
&.pi-main-wrapper-content__right {
min-height: calc(
100vh - var(--pi-spacing-xx-large) - var(--pi-spacing-xx-large) -
var(--pi-height-footer) - 20rem
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
) {
&: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;
}
@@ -346,7 +350,11 @@ html {
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));
height: calc(
100vh - var(--pi-spacing-xxx-large) - var(
--pi-spacing-xxx-large
)
);
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {
@@ -372,7 +380,11 @@ html {
.pi-main-wrapper-content {
// Left
&.pi-main-wrapper-content__left {
height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large));
height: calc(
100vh - var(--pi-spacing-xxx-large) - var(
--pi-spacing-xxx-large
)
);
.mat-mdc-radio-group {
max-width: 66.66%;
}
@@ -395,7 +407,11 @@ html {
gap: var(--pi-spacing-xxxx-large);
.pi-main-wrapper-content {
height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxxx-large));
height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(
--pi-spacing-xxxx-large
)
);
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {

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

@@ -1,4 +1,6 @@
@mixin saasContainerSpacings($padding-top: var(--pi-public-height-header-mobile)) {
@mixin saasContainerSpacings(
$padding-top: var(--pi-public-height-header-mobile)
) {
.pi-container-layout {
padding-bottom: var(--pi-spacing-xxxx-large);
& > .pi-layout__06-edge-to-edge {

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

@@ -72,7 +72,9 @@
}
}
@mixin paginatorWidth($width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))) {
@mixin paginatorWidth(
$width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
) {
.pi-shell__deale-saas {
& > div {
.pi-layout {
@@ -115,8 +117,8 @@ html {
position: absolute;
right: var(--pi-spacing-x-large);
bottom: calc(
var(--pi-height-footer) + env(safe-area-inset-bottom) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-small)
var(--pi-height-footer) + env(safe-area-inset-bottom) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-small)
);
z-index: 99;
}
@@ -176,8 +178,9 @@ html {
&.is-tablet__large {
@include listLayoutHeight(
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
100vh - var(--pi-height-header-tablet) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
)
);
@include wrappersWidth(
@@ -193,8 +196,9 @@ html {
&.is-desktop {
@include listLayoutHeight(
calc(
100vh - var(--pi-height-header-desktop) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-medium)
100vh - var(--pi-height-header-desktop) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-medium)
)
);
// Desktop S
@@ -209,7 +213,12 @@ html {
}
// Desktop M
&.is-desktop__medium {
@include wrappersWidth(calc(100% - var(--pi-spacing-x-large)), left, unset, unset);
@include wrappersWidth(
calc(100% - var(--pi-spacing-x-large)),
left,
unset,
unset
);
@include paginatorWidth(calc(100% - var(--pi-spacing-x-large)));
}
// Desktop L

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

@@ -1,8 +1,8 @@
@mixin layoutHeight(
$height:
calc(
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large)
$height: calc(
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large)
)
) {
.pi-layout {
@@ -32,8 +32,9 @@
}
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(.pi-layout__05-splitted):not(.pi-layout__08-form
) {
&: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;
}
@@ -82,7 +83,9 @@ html {
&: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));
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));
@@ -99,7 +102,10 @@ html {
&.is-tablet__small {
.has-bottom-sticky-note {
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) - 2rem)
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) -
2rem
)
);
.pi-layout {
&.pi-layout__main,
@@ -116,7 +122,9 @@ html {
}
}
@include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer)));
@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
@@ -126,7 +134,9 @@ html {
&: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));
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));
@@ -153,7 +163,9 @@ html {
}
}
}
@include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - 3.25rem));
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - 3.25rem)
);
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
}
}
@@ -195,7 +207,9 @@ html {
}
@include layoutHeight(
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) - var(--pi-spacing-large)
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);

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

@@ -9,9 +9,11 @@
}
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) {
&: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;
@@ -19,9 +21,11 @@
}
.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) {
&: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%;
}
}
@@ -81,7 +85,9 @@
// Aside is closed
&.aside-is-closed {
.pi-saas-aside {
transform: translateX(calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large)));
transform: translateX(
calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large))
);
}
}
// Aside is closable
@@ -151,7 +157,9 @@
}
& > *:nth-child(3) {
flex-shrink: 0;
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
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);
@@ -217,7 +225,9 @@ html {
&:not(.is-fullscreen) {
.pi-saas-aside {
top: 0;
height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
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));
@@ -225,8 +235,11 @@ html {
& > *: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)
100% - env(safe-area-inset-top) - env(
safe-area-inset-bottom
) - var(--pi-height-header-aside) - var(
--pi-height-footer-aside
)
);
}
}
@@ -260,7 +273,9 @@ html {
.pi-dynamic-menu {
& > *:nth-child(3) {
height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
height: calc(
var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
);
margin: 0 auto var(--pi-spacing-xxx-large);
}
& > *:nth-child(n + 2) {
@@ -292,7 +307,9 @@ html {
&: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));
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);
@@ -302,14 +319,18 @@ html {
}
& > .pi-close-button {
margin-left: calc(var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large));
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))
calc(
100vw - var(--pi-width-aside) - var(--pi-spacing-x-large)
)
);
}
}
@@ -325,7 +346,9 @@ html {
padding: var(--pi-spacing-x-large);
}
& > *:nth-child(3) {
height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
height: calc(
var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
);
margin: 0 auto;
padding: var(--pi-spacing-x-large) 0 0;
}

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

@@ -154,18 +154,24 @@ html {
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
&: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 {
&: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) {
&: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);
@@ -180,7 +186,8 @@ html {
&.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);
padding: var(--pi-spacing-xxxx-small)
var(--pi-spacing-x-small);
}
}
}
@@ -228,7 +235,9 @@ html {
&.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));
width: calc(
100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
}
// Tablet L
@@ -336,7 +345,9 @@ html {
// Aside is open
&.aside-is-open {
.pi-saas-header {
width: calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large));
width: calc(
100% - var(--pi-width-aside) - var(--pi-spacing-x-large)
);
}
}
// Aside is closed

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

@@ -49,7 +49,9 @@ html {
.pi-shell__deale-saas {
& > div {
& > section {
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
// Not is fullscreen
&:not(.is-fullscreen) {
@@ -59,8 +61,9 @@ html {
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)
100% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
}
}
@@ -100,7 +103,9 @@ html {
&.aside-is-closed {
& > .pi-headline {
transform: var(--pi-animation);
transform: translateX(calc(var(--pi-width-aside) + var(--pi-spacing-x-large)));
transform: translateX(
calc(var(--pi-width-aside) + var(--pi-spacing-x-large))
);
}
}
}
@@ -115,7 +120,9 @@ html {
&:not(.is-fullscreen) {
// Layout container
& > section {
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
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);
@@ -130,8 +137,9 @@ html {
);
width: calc(
100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
100% - var(--pi-width-navbar-expanded) - var(
--pi-spacing-x-large
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}
@@ -143,8 +151,9 @@ html {
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)
100% - var(--pi-width-navbar-collapsed) - var(
--pi-spacing-x-large
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}

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

@@ -23,7 +23,9 @@
.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));
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);
@@ -49,7 +51,11 @@
}
}
@mixin parentMenuItemCollapsed($size: var(--pi-spacing-xxxx-large), $radius: medium, $scale: 1) {
@mixin parentMenuItemCollapsed(
$size: var(--pi-spacing-xxxx-large),
$radius: medium,
$scale: 1
) {
.pi-saas-navbar {
.pi-menu {
.pi-menu-entry {
@@ -96,7 +102,9 @@
&.is-selected {
.pi-menu-entry {
&:not(.is-disabled) {
&:not([class*='pi-menu-entry__context--aside-menu']):not([class*='children']) {
&: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 {
@@ -276,8 +284,12 @@
&.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));
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);
@@ -333,7 +345,8 @@
&.pi-menu__children {
left: 0;
bottom: calc(
env(safe-area-inset-bottom) + var(--pi-spacing-medium) + var(--pi-height-footer)
env(safe-area-inset-bottom) + var(--pi-spacing-medium) +
var(--pi-height-footer)
);
z-index: 99;
}
@@ -441,8 +454,15 @@ html {
&.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);
@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 {
@@ -459,9 +479,12 @@ html {
.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)
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)
)
);
}
@@ -498,8 +521,9 @@ html {
&.pi-menu__parent {
& > nav {
width: calc(
var(--pi-width-navbar-expanded) - var(--pi-spacing-xxxx-large) -
var(--pi-spacing-xxxx-small)
var(--pi-width-navbar-expanded) - var(
--pi-spacing-xxxx-large
) - var(--pi-spacing-xxxx-small)
);
}
.pi-menu-event-item {
@@ -563,7 +587,10 @@ html {
}
// Expanded
&.navbar-is-expanded {
@include parentMenuEntryAppearance(flex-start, var(--pi-size-menu-item-expanded));
@include parentMenuEntryAppearance(
flex-start,
var(--pi-size-menu-item-expanded)
);
// Navbar
.pi-saas-navbar {
.pi-menu {
@@ -574,7 +601,10 @@ html {
&.has-children {
.pi-menu__children {
@include childrenMenuPosition(
calc(var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large))
calc(
var(--pi-width-navbar-expanded) +
var(--pi-spacing-xx-large)
)
);
}
}
@@ -585,8 +615,15 @@ html {
}
// Collapsed
&.navbar-is-collapsed {
@include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed));
@include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2);
@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 {
@@ -597,9 +634,10 @@ html {
.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)
var(--pi-width-navbar-collapsed) +
var(--pi-spacing-xx-large) +
var(--pi-spacing-xx-large) +
var(--pi-spacing-large) + var(--pi-spacing-x-large)
)
);
}

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

@@ -87,7 +87,9 @@ html {
.pi-saas-navbar {
left: var(--pi-spacing-medium);
bottom: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
width: calc(
100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)
);
}
}
}
@@ -123,7 +125,9 @@ html {
.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));
width: calc(
100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
}
}
}
@@ -178,7 +182,9 @@ html {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
);
.pi-chip {
margin: auto;
}

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

@@ -44,4 +44,4 @@
}
}
}
}
}

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

@@ -33,7 +33,7 @@ html {
}
}
}
}
}
}
// Desktop
&.is-desktop {

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

@@ -2,7 +2,10 @@
&.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)) {
&
> *: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) {
@@ -13,7 +16,9 @@
}
}
@mixin layoutBasicPages(
$padding-top-1: calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)),
$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 {
@@ -44,7 +49,9 @@ html {
}
&.is-tablet {
@include layoutBasicPages(
calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)),
calc(
var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)
),
var(--pi-spacing-xxxx-large)
);
.pi-layout {
@@ -64,7 +71,9 @@ html {
// Desktop
&.is-desktop {
@include layoutBasicPages(
calc(var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)),
calc(
var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)
),
var(--pi-spacing-xxxx-large)
);
.pi-layout {

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

@@ -42,7 +42,9 @@ html {
&.is-desktop {
// Desktop S & M
&:not(.is-desktop__large) {
@include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container));
@include edgeToEdgeLayoutCarouselBehavior(
var(--pi-public-width-container)
);
}
// Desktop M
&.is-desktop__medium {
@@ -50,7 +52,9 @@ html {
}
// Desktop L
&.is-desktop__large {
@include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container-l));
@include edgeToEdgeLayoutCarouselBehavior(
var(--pi-public-width-container-l)
);
@include websiteHomeUserSpacings(66.66%);
}
}

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

@@ -58,12 +58,16 @@ html {
}
}
& > section {
padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium));
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) -
100vh - var(--pi-public-height-header-mobile) - var(
--pi-height-layout-header
) -
7.35rem
);
.pi-data-grid__mode--grid {
@@ -89,12 +93,16 @@ html {
}
}
& > section {
padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium));
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) -
100vh - var(--pi-public-height-header-desktop) - var(
--pi-height-layout-header
) -
7.35rem
);
& > section {
@@ -146,12 +154,16 @@ html {
}
}
& > section {
padding-top: calc(var(--pi-height-layout-header) - var(--pi-spacing-medium));
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) -
100vh - var(--pi-public-height-header-desktop) - var(
--pi-height-layout-header
) -
7.35rem
);
}

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

@@ -1,6 +1,10 @@
@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)),
$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 {
@@ -42,8 +46,8 @@ html {
@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-public-height-header-desktop) +
var(--pi-spacing-xxxx-large) + var(--pi-spacing-x-large)
),
var(--pi-spacing-xxxx-large),
var(--pi-spacing-xx-large)

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

@@ -4,7 +4,9 @@
& > header {
display: block;
width: -webkit-fill-available;
padding-top: calc(var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device}));
padding-top: calc(
var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device})
);
}
}
}
@@ -36,8 +38,8 @@
@mixin thankYouScreenMain(
$cols: 4,
$rows: 6,
$areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .' '. . item2 item2'
'. . item2 item2',
$areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .'
'. . item2 item2' '. . item2 item2',
$min-height: 50
) {
.pi-website-screen {
@@ -72,8 +74,9 @@ html {
@include thankYouScreenMain(
6,
6,
'. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .' '. item1 item1 . item2 item2'
'. item1 item1 . item2 item2' '. . . . . .',
'. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .'
'. item1 item1 . item2 item2' '. item1 item1 . item2 item2'
'. . . . . .',
50
);
}
@@ -91,7 +94,8 @@ html {
12,
6,
'. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .'
'. . item1 item1 item1 . . . . . . .' '. . item1 item1 item1 . . item2 item2 item2 . .'
'. . item1 item1 item1 . . . . . . .'
'. . item1 item1 item1 . . item2 item2 item2 . .'
'. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .',
50
);

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

@@ -14,7 +14,11 @@
}
}
@mixin websiteFooterTopLeft($flex-direction: column, $width: 100%, $justify-right: flex-start) {
@mixin websiteFooterTopLeft(
$flex-direction: column,
$width: 100%,
$justify-right: flex-start
) {
.pi-website-footer-content__top-left {
flex-direction: $flex-direction;
width: $width;

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

@@ -110,10 +110,18 @@
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(to right, var(--pi-color-primary-200), var(--pi-color-primary))
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))
linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
)
);
}
// Investor
@@ -126,10 +134,18 @@
rgba($color: white, $alpha: 1)
)
padding-box,
linear-gradient(to right, var(--pi-color-accent-200), var(--pi-color-accent))
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))
linear-gradient(
30deg,
var(--pi-color-accent),
var(--pi-color-accent-900)
)
);
}
// Advisor
@@ -202,12 +218,23 @@
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(rgba($color: white, $alpha: 0.95), rgba($color: white, $alpha: 1))
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))
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))
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
}
@@ -222,7 +249,11 @@
.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));
background-image: linear-gradient(
30deg,
var(--pi-color-white),
var(--pi-color-white)
);
& > span {
background-color: var(--pi-color-highlighted);
}
@@ -301,7 +332,11 @@
)
border-box
),
linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900))
linear-gradient(
30deg,
var(--pi-color-primary),
var(--pi-color-primary-900)
)
);
}
// Investor
@@ -321,7 +356,11 @@
)
border-box
),
linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900))
linear-gradient(
30deg,
var(--pi-color-accent),
var(--pi-color-accent-900)
)
);
}
// Advisor
@@ -394,12 +433,23 @@
@include parentMenuItemColorLargeDevice(
var(--pi-color-highlighted),
(
linear-gradient(rgba($color: white, $alpha: 0.95), rgba($color: white, $alpha: 1))
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))
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))
linear-gradient(
30deg,
var(--pi-color-highlighted),
var(--pi-color-highlighted-900)
)
);
}
}

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

@@ -358,7 +358,8 @@ html {
// Child menu
& > div {
padding: var(--pi-spacing-medium);
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
border-radius: var(--pi-border-radius-large)
var(--pi-border-radius-large) 0 0;
// Child Menu items
& > div {
& > span {
@@ -376,7 +377,8 @@ html {
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);
border-radius: 0 0 var(--pi-border-radius-large)
var(--pi-border-radius-large);
// Aside Menu items
& > div {
& > span {
@@ -398,18 +400,33 @@ html {
& > .pi-menu-event-item {
// Company
&:nth-child(1) {
@include largeDeviceChildMenu(-18.75rem, var(--pi-color-primary-25));
@include largeDeviceChildMenuItemColor(var(--pi-color-primary-25));
@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));
@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));
@include largeDeviceChildMenu(
-14.625rem,
var(--pi-color-highlighted-25)
);
@include largeDeviceChildMenuItemColor(
var(--pi-color-highlighted-25)
);
}
}
}
@@ -448,7 +465,9 @@ html {
// Advisor Pricing
&:nth-child(3) {
color: var(--pi-color-highlighted);
background-color: var(--pi-color-highlighted-25);
background-color: var(
--pi-color-highlighted-25
);
}
}
}

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

@@ -108,8 +108,12 @@
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));
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);
@@ -210,7 +214,10 @@ html {
// Is Closed
&:not(.is-menu-open) {
@include logoSize(7.5rem);
@include topbarCommonSizes(var(--pi-public-height-header-mobile), calc(100% - 3rem));
@include topbarCommonSizes(
var(--pi-public-height-header-mobile),
calc(100% - 3rem)
);
}
// Is Open
@@ -227,7 +234,10 @@ html {
}
// Tablet L
&.is-tablet__large {
@include topbarCommonSizes(var(--pi-public-height-header-mobile), calc(100% - 3rem));
@include topbarCommonSizes(
var(--pi-public-height-header-mobile),
calc(100% - 3rem)
);
@include logoSize(8.4375rem);
}
}
@@ -248,9 +258,9 @@ html {
// 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 {
&: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;

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

@@ -1,4 +1,6 @@
@mixin dealeWebsiteWrapperMaxWidth($max-width: calc(100% - var(--pi-spacing-xx-large))) {
@mixin dealeWebsiteWrapperMaxWidth(
$max-width: calc(100% - var(--pi-spacing-xx-large))
) {
.pi-shell__deale-website {
.pi-wrapper {
// Max width

14
libs/ui/src/lib/styles/definitions.ts
View File

@@ -1,5 +1,11 @@
// Types
export type justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
export type justify =
| 'flex-start'
| 'center'
| 'flex-end'
| 'space-between'
| 'space-around'
| 'space-evenly';
export type grid =
| 'quarter'
| 'third'
@@ -27,9 +33,11 @@ export type borderType = 'top' | 'bottom' | 'middle';
export type borderRadius = 'small' | 'medium' | 'large';
export type display = 'inline' | 'flex' | 'grid';
export type padding = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'none';
export type padding =
'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'none';
export type maxWidth = 'full-width' | 'full-width-auto' | 'edge-to-edge' | 'fit-content';
export type maxWidth =
'full-width' | 'full-width-auto' | 'edge-to-edge' | 'fit-content';
export type itemsWidth = 'quarter' | 'third' | 'half' | 'full';
// Fonts
export type fontSize =