diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index e4e9035..0b0f021 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -13,7 +13,14 @@ export * from './lib/util/form-control';
export * from './lib/util/icon-registry';
export * from './lib/util/infinite-scroll';
// ./lib/util/list-configs: omitido(s) por colisión con otro módulo -> featureKey, getFeatureState, initialState
-export { getListMode, ListConfigsFacade, listConfigsReducer, ListModeActionsType, resetListMode, setListMode } from './lib/util/list-configs';
+export {
+ getListMode,
+ ListConfigsFacade,
+ listConfigsReducer,
+ ListModeActionsType,
+ resetListMode,
+ setListMode,
+} from './lib/util/list-configs';
export type { ListConfigsState, ListMode } from './lib/util/list-configs';
export * from './lib/util/loaders';
export * from './lib/util/local-storage';
@@ -56,6 +63,31 @@ export * from './lib/ui/slider';
export * from './lib/ui/spinner';
export * from './lib/ui/tab';
// ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
-export { PiBaseTextViewerComponent, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
+export {
+ PiBaseTextViewerComponent,
+ PiTextAreaExpansionComponent,
+ PiTextCenteredDirective,
+ PiTextColorDirective,
+ PiTextCoveredDirective,
+ PiTextGroupDirective,
+ PiTextGroupIndicatorDirective,
+ PiTextLargeDirective,
+ PiTextLetterSpacingDirective,
+ PiTextMediumDirective,
+ PiTextSizeDirective,
+ PiTextSmallDirective,
+ PiTextViewerComponent,
+ PiTextViewerLinkComponent,
+ PiTextWeightBlackDirective,
+ PiTextWeightBoldDirective,
+ PiTextWeightLightDirective,
+ PiTextWeightMediumDirective,
+ PiTextWeightNormalDirective,
+ PiTextXLargeDirective,
+ PiTextXSmallDirective,
+ PiTextXXLargeDirective,
+ PiTextXXSmallDirective,
+ PiTextXXXLargeDirective,
+} from './lib/ui/text';
export * from './lib/ui/tooltip';
export * from './lib/ui/wrapper';
diff --git a/libs/ui/src/lib/styles/animations.ts b/libs/ui/src/lib/styles/animations.ts
index bbf5654..1a89117 100644
--- a/libs/ui/src/lib/styles/animations.ts
+++ b/libs/ui/src/lib/styles/animations.ts
@@ -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,
- })
+ }),
),
]);
diff --git a/libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss b/libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss
index 6967821..c95cea5 100644
--- a/libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss
+++ b/libs/ui/src/lib/styles/common/abstracts/_pi-global-variables.scss
@@ -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);
diff --git a/libs/ui/src/lib/styles/common/base/_pi-reset.scss b/libs/ui/src/lib/styles/common/base/_pi-reset.scss
index c57641a..b75860b 100644
--- a/libs/ui/src/lib/styles/common/base/_pi-reset.scss
+++ b/libs/ui/src/lib/styles/common/base/_pi-reset.scss
@@ -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;
}
diff --git a/libs/ui/src/lib/styles/common/base/_pi-tipography.scss b/libs/ui/src/lib/styles/common/base/_pi-tipography.scss
index a29de24..193e2d1 100644
--- a/libs/ui/src/lib/styles/common/base/_pi-tipography.scss
+++ b/libs/ui/src/lib/styles/common/base/_pi-tipography.scss
@@ -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'),
diff --git a/libs/ui/src/lib/styles/common/components/_pi-accordion.scss b/libs/ui/src/lib/styles/common/components/_pi-accordion.scss
index c61e17d..4320f22 100644
--- a/libs/ui/src/lib/styles/common/components/_pi-accordion.scss
+++ b/libs/ui/src/lib/styles/common/components/_pi-accordion.scss
@@ -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);
}
}
}
diff --git a/libs/ui/src/lib/styles/common/components/_pi-card.scss b/libs/ui/src/lib/styles/common/components/_pi-card.scss
index 54b40a2..0714c80 100644
--- a/libs/ui/src/lib/styles/common/components/_pi-card.scss
+++ b/libs/ui/src/lib/styles/common/components/_pi-card.scss
@@ -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});
}
}
diff --git a/libs/ui/src/lib/styles/common/components/_pi-list-item.scss b/libs/ui/src/lib/styles/common/components/_pi-list-item.scss
index 1ff6a06..04d6bad 100644
--- a/libs/ui/src/lib/styles/common/components/_pi-list-item.scss
+++ b/libs/ui/src/lib/styles/common/components/_pi-list-item.scss
@@ -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
+ );
}
}
}
diff --git a/libs/ui/src/lib/styles/common/components/_pi-note.scss b/libs/ui/src/lib/styles/common/components/_pi-note.scss
index 30248cc..7cf2df8 100644
--- a/libs/ui/src/lib/styles/common/components/_pi-note.scss
+++ b/libs/ui/src/lib/styles/common/components/_pi-note.scss
@@ -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);
}
}
diff --git a/libs/ui/src/lib/styles/common/components/_pi-panel.scss b/libs/ui/src/lib/styles/common/components/_pi-panel.scss
index f2046da..ff88a2a 100644
--- a/libs/ui/src/lib/styles/common/components/_pi-panel.scss
+++ b/libs/ui/src/lib/styles/common/components/_pi-panel.scss
@@ -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;
}
}
diff --git a/libs/ui/src/lib/styles/common/components/_pi-text.scss b/libs/ui/src/lib/styles/common/components/_pi-text.scss
index d6f6849..0ab30a8 100644
--- a/libs/ui/src/lib/styles/common/components/_pi-text.scss
+++ b/libs/ui/src/lib/styles/common/components/_pi-text.scss
@@ -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);
}
}
diff --git a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss
index b1ad104..49b4984 100644
--- a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-private.scss
@@ -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
diff --git a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss
index c0c3942..6ba592f 100644
--- a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button-public.scss
@@ -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,
diff --git a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss
index 561a902..a3eff38 100644
--- a/libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss
@@ -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;
diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss
index 935875a..e430f30 100644
--- a/libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/_base-data-grid.scss
@@ -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;
}
diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss
index 73fe2ff..5cda2a1 100644
--- a/libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/_card-type.scss
@@ -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,
diff --git a/libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss b/libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss
index d78cb28..95de0c0 100644
--- a/libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-data-grid/_data-direction.scss
@@ -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 {
diff --git a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss
index a083723..df1f57b 100644
--- a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-incremental.scss
@@ -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;
}
diff --git a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss
index e790d41..269718c 100644
--- a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field-textarea.scss
@@ -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;
}
}
}
diff --git a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss
index 1cfaab9..5b062f7 100644
--- a/libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss
+++ b/libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss
@@ -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)
+ )
);
}
diff --git a/libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss b/libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss
index 0c4dee5..8e90ca6 100644
--- a/libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss
+++ b/libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss
@@ -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);
}
}
diff --git a/libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss b/libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss
index d698bf1..319de6a 100644
--- a/libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss
+++ b/libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss
@@ -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 {
diff --git a/libs/ui/src/lib/styles/common/vendors/_ch2-button.scss b/libs/ui/src/lib/styles/common/vendors/_ch2-button.scss
index 199c928..292558a 100644
--- a/libs/ui/src/lib/styles/common/vendors/_ch2-button.scss
+++ b/libs/ui/src/lib/styles/common/vendors/_ch2-button.scss
@@ -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%;
}
diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss b/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss
index bd52d5e..a7ad891 100644
--- a/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss
+++ b/libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss
@@ -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);
}
diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-chip.scss b/libs/ui/src/lib/styles/common/vendors/_mat-chip.scss
index 3df53ea..8b1785d 100644
--- a/libs/ui/src/lib/styles/common/vendors/_mat-chip.scss
+++ b/libs/ui/src/lib/styles/common/vendors/_mat-chip.scss
@@ -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;
}
}
diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss b/libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss
index b192c84..f7e6a15 100644
--- a/libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss
+++ b/libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss
@@ -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);
}
}
}
diff --git a/libs/ui/src/lib/styles/common/vendors/_mat-slider.scss b/libs/ui/src/lib/styles/common/vendors/_mat-slider.scss
index 815bf55..50cbbbb 100644
--- a/libs/ui/src/lib/styles/common/vendors/_mat-slider.scss
+++ b/libs/ui/src/lib/styles/common/vendors/_mat-slider.scss
@@ -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)
);
}
}
diff --git a/libs/ui/src/lib/styles/common/vendors/_typeform.scss b/libs/ui/src/lib/styles/common/vendors/_typeform.scss
index 99c0e85..c934bba 100644
--- a/libs/ui/src/lib/styles/common/vendors/_typeform.scss
+++ b/libs/ui/src/lib/styles/common/vendors/_typeform.scss
@@ -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);
}
- }
+ }
}
diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss
index 06654d4..3dd4d2d 100644
--- a/libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss
+++ b/libs/ui/src/lib/styles/common/wrappers/_pi-action-wrapper.scss
@@ -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
diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss
index 8e12b8d..74194ef 100644
--- a/libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss
+++ b/libs/ui/src/lib/styles/common/wrappers/_pi-list-wrapper.scss
@@ -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;
diff --git a/libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss b/libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss
index 321d991..69cad67 100644
--- a/libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss
+++ b/libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss
@@ -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;
}
diff --git a/libs/ui/src/lib/styles/configs.ts b/libs/ui/src/lib/styles/configs.ts
index 3b7f5e9..cfa366a 100644
--- a/libs/ui/src/lib/styles/configs.ts
+++ b/libs/ui/src/lib/styles/configs.ts
@@ -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'),
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss
index bda79fa..660a0a6 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss
@@ -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
+ );
}
}
}
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss
index b21f302..618b03a 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss
@@ -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;
}
}
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss
index 447f354..27f9436 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss
@@ -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 {
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss
index 1b04be4..c08b505 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss
@@ -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);
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss
index 1027078..a8d8ede 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss
@@ -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;
}
}
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss
index 01e4125..308f732 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss
@@ -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);
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss
index 23d650b..40b6f6f 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss
@@ -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
);
}
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss
index f19226f..a175bca 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss
@@ -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;
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss
index f32c3c4..047fa37 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-02-full-width-layout.scss
@@ -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
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss
index db192e8..65ac55b 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-03-vertically-centered-layout.scss
@@ -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)
+ );
}
}
}
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss
index bcc581c..f974566 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-04-space-between-layout.scss
@@ -5,4 +5,3 @@
justify-content: space-between;
}
}
-
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss
index 1ebebb8..16f4919 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss
@@ -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 {
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss
index c6964a8..e069583 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-06-edge-to-edge-layout.scss
@@ -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 {
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss
index 10e36bd..91d01a3 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-07-list-layout.scss
@@ -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
diff --git a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss
index c83dd19..c1e68bd 100644
--- a/libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss
+++ b/libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss
@@ -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);
diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss
index b30aa88..2da9158 100644
--- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss
+++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss
@@ -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;
}
diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss
index e325424..09d74a1 100644
--- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss
+++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss
@@ -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
diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss
index 93ef2f7..f2173c2 100644
--- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss
+++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss
@@ -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)
);
}
}
diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss
index a532e96..fd82866 100644
--- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss
+++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss
@@ -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)
)
);
}
diff --git a/libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss b/libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss
index 7ace306..fda5ba8 100644
--- a/libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss
+++ b/libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss
@@ -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;
}
diff --git a/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss b/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss
index 513bbbe..160ebd1 100644
--- a/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss
+++ b/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss
@@ -44,4 +44,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss b/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss
index 2a19264..6c42759 100644
--- a/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss
+++ b/libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss
@@ -33,7 +33,7 @@ html {
}
}
}
- }
+ }
}
// Desktop
&.is-desktop {
diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss
index 7ffd9cb..6910f36 100644
--- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss
+++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss
@@ -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 {
diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss
index a25715e..a67f297 100644
--- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss
+++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss
@@ -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%);
}
}
diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss
index e3af087..b75f6d6 100644
--- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss
+++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss
@@ -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
);
}
diff --git a/libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss b/libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss
index c8ad2dd..fa4e309 100644
--- a/libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss
+++ b/libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss
@@ -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)
diff --git a/libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss b/libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss
index 83d9d5e..f2e31a9 100644
--- a/libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss
+++ b/libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss
@@ -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
);
diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss
index 7097748..d05b5ba 100644
--- a/libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss
+++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss
@@ -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;
diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss
index 90db182..697a8e5 100644
--- a/libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss
+++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss
@@ -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)
+ )
);
}
}
diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss
index 16c3490..8f48500 100644
--- a/libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss
+++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss
@@ -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
+ );
}
}
}
diff --git a/libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss b/libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss
index 169add4..7d4bc35 100644
--- a/libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss
+++ b/libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss
@@ -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;
diff --git a/libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss b/libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss
index 3249eef..6060450 100644
--- a/libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss
+++ b/libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss
@@ -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
diff --git a/libs/ui/src/lib/styles/definitions.ts b/libs/ui/src/lib/styles/definitions.ts
index fdcc215..0e08e09 100644
--- a/libs/ui/src/lib/styles/definitions.ts
+++ b/libs/ui/src/lib/styles/definitions.ts
@@ -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 =
diff --git a/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html b/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html
index 4f0dd92..2782302 100644
--- a/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html
+++ b/libs/ui/src/lib/ui/accordion/accordion/accordion.component.html
@@ -42,10 +42,16 @@
"
>
-