From 91a1c0ee4c82ef36fbbe7130ba8f2fc33be7180c Mon Sep 17 00:00:00 2001 From: Josep Piguillem Date: Tue, 28 Jul 2026 00:06:55 +0200 Subject: [PATCH] fix: resuelve el type-checking estricto de plantillas y formatea con prettier --- libs/ui/src/index.ts | 36 +- libs/ui/src/lib/styles/animations.ts | 26 +- .../abstracts/_pi-global-variables.scss | 6 +- .../src/lib/styles/common/base/_pi-reset.scss | 4 +- .../styles/common/base/_pi-tipography.scss | 60 +- .../common/components/_pi-accordion.scss | 3 +- .../styles/common/components/_pi-card.scss | 18 +- .../common/components/_pi-list-item.scss | 8 +- .../styles/common/components/_pi-note.scss | 34 +- .../styles/common/components/_pi-panel.scss | 34 +- .../styles/common/components/_pi-text.scss | 653 ++++++++++++++++-- .../pi-button/_pi-button-private.scss | 50 +- .../pi-button/_pi-button-public.scss | 223 ++++-- .../components/pi-button/_pi-button.scss | 22 +- .../pi-data-grid/_base-data-grid.scss | 13 +- .../components/pi-data-grid/_card-type.scss | 5 +- .../pi-data-grid/_data-direction.scss | 10 +- .../pi-field/_pi-field-incremental.scss | 4 +- .../pi-field/_pi-field-textarea.scss | 3 +- .../common/components/pi-field/_pi-field.scss | 8 +- .../common/layouts/_pi-09-pricing-layout.scss | 61 +- .../common/layouts/_pi-container-layout.scss | 10 +- .../styles/common/vendors/_ch2-button.scss | 8 +- .../styles/common/vendors/_mat-checkbox.scss | 72 +- .../lib/styles/common/vendors/_mat-chip.scss | 10 +- .../common/vendors/_mat-progress-bar.scss | 9 +- .../styles/common/vendors/_mat-slider.scss | 13 +- .../lib/styles/common/vendors/_typeform.scss | 6 +- .../common/wrappers/_pi-action-wrapper.scss | 86 ++- .../common/wrappers/_pi-list-wrapper.scss | 5 +- .../common/wrappers/_pi-main-wrapper.scss | 8 +- libs/ui/src/lib/styles/configs.ts | 14 +- .../layouts/_pi-00-authentication-layout.scss | 75 +- ...uthentication-layout-recover-password.scss | 12 +- ...0c-authentication-layout-user-profile.scss | 5 +- ...d-authentication-layout-default-space.scss | 10 +- ...e-authentication-layout-impersonation.scss | 12 +- .../layouts/_pi-01-dashboard-layout-old.scss | 6 +- .../layouts/_pi-01-dashboard-layout.scss | 12 +- .../_pi-01a-dashboard-layout-company.scss | 18 +- .../layouts/_pi-02-full-width-layout.scss | 25 +- .../_pi-03-vertically-centered-layout.scss | 8 +- .../layouts/_pi-04-space-between-layout.scss | 1 - .../_pi-05a-splitted-paywall-layout.scss | 42 +- .../layouts/_pi-06-edge-to-edge-layout.scss | 4 +- .../layouts/_pi-07-list-layout.scss | 25 +- .../styles/deale-saas/layouts/_pi-layout.scss | 38 +- .../styles/deale-saas/shell/_pi-aside.scss | 55 +- .../styles/deale-saas/shell/_pi-header.scss | 23 +- .../lib/styles/deale-saas/shell/_pi-main.scss | 27 +- .../lib/styles/deale-saas/shell/_pi-menu.scss | 78 ++- .../styles/deale-saas/shell/_pi-navbar.scss | 12 +- .../wrappers/_pi-header-wrapper.scss | 2 +- .../deale-saas/wrappers/_pi-wrapper.scss | 2 +- .../layouts/_pi-02-full-width-layout.scss | 17 +- ...pi-06b-edge-to-edge-home-users-layout.scss | 8 +- .../layouts/_pi-07-list-layout.scss | 24 +- .../layouts/_pi-container-layout.scss | 12 +- .../screens/_pi-00-thank-you-screen.scss | 16 +- .../deale-website/shell/_pi-footer.scss | 6 +- .../deale-website/shell/_pi-menu-theming.scss | 76 +- .../styles/deale-website/shell/_pi-menu.scss | 37 +- .../deale-website/shell/_pi-topbar.scss | 24 +- .../deale-website/wrappers/_pi-wrapper.scss | 4 +- libs/ui/src/lib/styles/definitions.ts | 14 +- .../accordion/accordion.component.html | 42 +- .../accordion/accordion.component.ts | 53 +- .../directives/accordion-content.directive.ts | 20 +- libs/ui/src/lib/ui/accordion/index.ts | 4 +- .../styles/_horizontal-accordion.scss | 3 +- .../accordion/styles/_vertical-accordion.scss | 12 +- .../accordion/styles/accordion.component.scss | 7 +- .../ui/banner/banner/banner.component.html | 4 +- .../ui/banner/banner/banner.component.scss | 12 +- .../lib/ui/banner/banner/banner.component.ts | 26 +- libs/ui/src/lib/ui/banner/index.ts | 2 - .../action-button.component.html | 9 +- .../action-button.component.scss | 12 +- .../action-button/action-button.component.ts | 30 +- .../lib/ui/button/base-button.component.ts | 11 +- libs/ui/src/lib/ui/button/button.directive.ts | 22 +- .../chevron-button.component.html | 6 +- .../chevron-button.component.ts | 21 +- .../close-button/close-button.component.ts | 24 +- .../button/hamburger/hamburger.component.ts | 27 +- .../icon-button/icon-button.component.html | 12 +- .../icon-button/icon-button.component.ts | 15 +- libs/ui/src/lib/ui/button/index.ts | 1 - .../radio-button/radio-button.component.html | 12 +- .../radio-button/radio-button.component.ts | 17 +- .../switch-button/switch-button.component.ts | 17 +- .../switch-button/switch-button.directive.ts | 22 +- .../toggle-button.component.html | 8 +- .../toggle-button/toggle-button.component.ts | 20 +- .../ui/src/lib/ui/card/base-card.component.ts | 4 +- .../ui/src/lib/ui/card/card/card.component.ts | 8 +- .../lib/ui/card/directives/card.directive.ts | 16 +- libs/ui/src/lib/ui/card/index.ts | 2 - .../src/lib/ui/carousel/carousel.directive.ts | 11 +- .../carousel/carousel/carousel.component.html | 4 +- .../carousel/carousel/carousel.component.scss | 2 +- .../carousel/carousel/carousel.component.ts | 173 +++-- libs/ui/src/lib/ui/carousel/index.ts | 2 - .../chart-legend/chart-legend.component.html | 19 +- .../chart-legend/chart-legend.component.ts | 12 +- libs/ui/src/lib/ui/chart/chart.configs.ts | 5 +- .../src/lib/ui/chart/chart/chart.component.ts | 37 +- libs/ui/src/lib/ui/chart/index.ts | 2 - .../ui/src/lib/ui/chip/base-chip.component.ts | 3 +- .../chip-action/chip-action.component.html | 2 +- .../chip/chip-action/chip-action.component.ts | 15 +- .../chip/chip-date/chip-date.component.html | 4 +- .../chip/chip-date/chip-date.component.scss | 27 +- .../ui/chip/chip-date/chip-date.component.ts | 22 +- .../chip-status/chip-status.component.html | 7 +- .../chip/chip-status/chip-status.component.ts | 30 +- .../chip/chip-time/chip-time.component.html | 9 +- .../chip/chip-time/chip-time.component.scss | 7 +- .../ui/chip/chip-time/chip-time.component.ts | 25 +- .../chip/chip-value/chip-value.component.scss | 27 +- .../chip/chip-value/chip-value.component.ts | 33 +- .../src/lib/ui/chip/chip/chip.component.html | 2 +- .../ui/src/lib/ui/chip/chip/chip.component.ts | 24 +- libs/ui/src/lib/ui/chip/index.ts | 2 - libs/ui/src/lib/ui/chip/styles/_position.scss | 6 +- libs/ui/src/lib/ui/chip/styles/_size.scss | 24 +- .../src/lib/ui/chip/tile/tile.component.html | 6 +- .../ui/src/lib/ui/chip/tile/tile.component.ts | 33 +- .../data-grid/data-grid.component.html | 27 +- .../data-grid/data-grid.component.ts | 44 +- .../ui/data-grid/directives/cell.directive.ts | 13 +- .../directives/grid-item.directive.ts | 29 +- .../ui/data-grid/entities/data-grid.model.ts | 3 +- libs/ui/src/lib/ui/data-grid/index.ts | 2 - .../base-data-table.component.ts | 16 +- .../cell-type/cell-type.component.scss | 4 +- .../cell-type/cell-type.component.ts | 67 +- .../data-table-item.component.html | 1 - .../data-table-item.component.ts | 22 +- libs/ui/src/lib/ui/data-table/index.ts | 2 - .../ui/divider/divider/divider.component.html | 7 +- .../ui/divider/divider/divider.component.ts | 33 +- libs/ui/src/lib/ui/divider/index.ts | 2 - libs/ui/src/lib/ui/error-status-code/index.ts | 2 - .../not-found/not-found.component.html | 8 +- .../not-found/not-found.component.ts | 30 +- .../form-field/base-form-field.component.ts | 14 +- .../currency-field.component.html | 8 +- .../currency-field.component.ts | 40 +- .../directives/autofocus.directive.ts | 10 +- .../directives/checkbox-grid.directive.ts | 8 +- .../form-field/directives/label.directive.ts | 20 +- .../directives/radio-grid.directive.ts | 5 +- .../email-field/email-field.component.html | 2 +- .../email-field/email-field.component.ts | 55 +- .../icon-field/icon-field.component.html | 2 +- .../icon-field/icon-field.component.ts | 53 +- .../incremental-number-field.component.html | 6 +- .../incremental-number-field.component.ts | 84 ++- .../incremental-range-field.component.html | 4 +- .../incremental-range-field.component.ts | 41 +- libs/ui/src/lib/ui/form-field/index.ts | 2 - .../number-field/number-field.component.html | 2 +- .../number-field/number-field.component.ts | 64 +- .../password-field.component.html | 2 +- .../password-field.component.ts | 57 +- .../phone-field/phone-field.component.html | 2 +- .../phone-field/phone-field.component.ts | 55 +- .../search-field/search-field.component.html | 2 +- .../search-field/search-field.component.ts | 35 +- .../slide-toggle/slide-toggle.component.html | 6 +- .../slide-toggle/slide-toggle.component.ts | 39 +- .../text-field/text-field.component.html | 4 +- .../text-field/text-field.component.ts | 53 +- .../textarea/textarea.component.html | 6 +- .../form-field/textarea/textarea.component.ts | 53 +- .../src/lib/ui/icon/icon/icon.component.html | 7 +- .../src/lib/ui/icon/icon/icon.component.scss | 14 +- .../ui/src/lib/ui/icon/icon/icon.component.ts | 23 +- libs/ui/src/lib/ui/icon/index.ts | 2 - .../ui/image/background-image.directive.ts | 33 +- .../ui/image/headline/headline.component.html | 4 +- .../ui/image/headline/headline.component.scss | 12 +- .../ui/image/headline/headline.component.ts | 40 +- libs/ui/src/lib/ui/image/index.ts | 2 - libs/ui/src/lib/ui/list-item/index.ts | 2 - .../list-item/list-item.component.html | 1 - .../list-item/list-item.component.scss | 4 +- .../list-item/list-item.component.ts | 36 +- .../src/lib/ui/modal/entities/modal.model.ts | 4 +- libs/ui/src/lib/ui/modal/index.ts | 2 - .../lib/ui/modal/modal/modal.component.html | 17 +- .../lib/ui/modal/modal/modal.component.scss | 3 +- .../src/lib/ui/modal/modal/modal.component.ts | 57 +- libs/ui/src/lib/ui/modal/utils.ts | 2 +- libs/ui/src/lib/ui/note/index.ts | 2 - .../src/lib/ui/note/note/note.component.html | 2 +- .../src/lib/ui/note/note/note.component.scss | 7 +- .../ui/src/lib/ui/note/note/note.component.ts | 40 +- libs/ui/src/lib/ui/notification/index.ts | 1 - .../snack-bar/snack-bar.component.html | 7 +- .../snack-bar/snack-bar.component.ts | 44 +- .../state/notification.actions.ts | 8 +- .../state/notification.effects.ts | 17 +- libs/ui/src/lib/ui/notification/utils.ts | 12 +- libs/ui/src/lib/ui/paginator/index.ts | 2 - .../paginator/paginator.component.html | 4 +- .../paginator/paginator.component.ts | 34 +- .../src/lib/ui/panel/base-panel.component.ts | 12 +- .../expansion-panel.component.html | 12 +- .../expansion-panel.component.ts | 64 +- libs/ui/src/lib/ui/panel/index.ts | 2 - libs/ui/src/lib/ui/panel/panel.directive.ts | 28 +- .../src/lib/ui/panel/panel/panel.component.ts | 43 +- libs/ui/src/lib/ui/progress/index.ts | 2 - .../progress-bar/progress-bar.component.ts | 19 +- .../progress-spinner.component.scss | 13 +- .../progress-spinner.component.ts | 27 +- .../lib/ui/select/base-select.component.ts | 60 +- .../lib/ui/select/entities/select.model.ts | 3 +- libs/ui/src/lib/ui/select/index.ts | 2 - .../select-carousel.component.html | 11 +- .../select-carousel.component.ts | 66 +- .../select-multiple.component.html | 41 +- .../select-multiple.component.scss | 8 +- .../select-multiple.component.ts | 124 ++-- .../lib/ui/select/select-option/_color.scss | 12 +- .../lib/ui/select/select-option/_size.scss | 25 +- .../select-option.component.html | 22 +- .../select-option/select-option.component.ts | 39 +- .../select-period.component.html | 29 +- .../select-period/select-period.component.ts | 85 ++- .../ui/select/select/select.component.html | 24 +- .../lib/ui/select/select/select.component.ts | 81 ++- .../src/lib/ui/select/styles/_appearance.scss | 7 +- .../src/lib/ui/select/styles/_menu-type.scss | 4 +- .../ui/select/styles/_picked-option-type.scss | 7 +- libs/ui/src/lib/ui/select/styles/_type.scss | 26 +- libs/ui/src/lib/ui/slide-toggle/index.ts | 2 - .../slide-toggle/slide-toggle.component.ts | 8 +- .../lib/ui/slider/base-slider.component.ts | 21 +- libs/ui/src/lib/ui/slider/index.ts | 2 - .../range-slider/range-slider.component.ts | 50 +- .../lib/ui/slider/slider/slider.component.ts | 40 +- libs/ui/src/lib/ui/spinner/index.ts | 2 - .../ui/spinner/spinner/spinner.component.ts | 18 +- libs/ui/src/lib/ui/tab/entities/tab.model.ts | 8 +- libs/ui/src/lib/ui/tab/index.ts | 2 - libs/ui/src/lib/ui/tab/tab.directive.ts | 10 +- libs/ui/src/lib/ui/tab/tab/tab.component.ts | 74 +- .../lib/ui/text/base-text-viewer.component.ts | 15 +- .../text/directives/text-color.directive.ts | 2 +- .../text-group-indicator.directive.ts | 8 +- .../text/directives/text-sizes.directive.ts | 29 +- .../text/directives/text-styles.directive.ts | 10 +- .../text/directives/text-weights.directive.ts | 10 +- libs/ui/src/lib/ui/text/index.ts | 2 - .../text-area-expansion.component.html | 13 +- .../text-area-expansion.component.ts | 16 +- .../text-viewer-link.component.html | 2 +- .../text-viewer-link.component.scss | 8 +- .../text-viewer-link.component.ts | 40 +- .../text-viewer/text-viewer.component.html | 8 +- .../text/text-viewer/text-viewer.component.ts | 17 +- libs/ui/src/lib/ui/tooltip/index.ts | 3 +- .../src/lib/ui/tooltip/tooltip.directive.ts | 52 +- .../lib/ui/wrapper/action/action.wrapper.ts | 21 +- libs/ui/src/lib/ui/wrapper/base.wrapper.ts | 8 +- .../directives/flex-wrapper.directive.ts | 2 +- .../directives/grid-wrapper.directive.ts | 14 +- .../directives/position-wrapper.directive.ts | 11 +- .../src/lib/ui/wrapper/form/form.wrapper.ts | 15 +- .../lib/ui/wrapper/header/header.wrapper.html | 6 +- .../lib/ui/wrapper/header/header.wrapper.ts | 35 +- libs/ui/src/lib/ui/wrapper/index.ts | 1 - .../src/lib/ui/wrapper/list/list.wrapper.ts | 13 +- .../src/lib/ui/wrapper/main/main.wrapper.ts | 24 +- libs/ui/src/lib/util/affix/affix.directive.ts | 18 +- libs/ui/src/lib/util/affix/index.ts | 2 - .../lib/util/amplitude/amplitude.service.ts | 2 +- libs/ui/src/lib/util/amplitude/events.ts | 20 +- .../util/color/directives/colors.directive.ts | 18 +- .../src/lib/util/color/entities/color.type.ts | 1 - libs/ui/src/lib/util/color/index.ts | 2 - libs/ui/src/lib/util/common/common.ts | 20 +- libs/ui/src/lib/util/common/sector.ts | 6 +- libs/ui/src/lib/util/common/select-options.ts | 6 +- .../src/lib/util/dato-cms/graphql.module.ts | 2 +- .../application/device-configs.facade.ts | 16 +- .../entities/device-configs.model.ts | 3 +- .../services/device-configs.service.ts | 40 +- .../state/device-configs.actions.ts | 3 +- .../state/device-configs.effects.ts | 11 +- .../state/device-configs.reducer.ts | 6 +- .../state/device-configs.selectors.ts | 15 +- .../lib/util/environments/environment.dev.ts | 11 +- .../lib/util/environments/environment.prod.ts | 16 +- .../src/lib/util/environments/environment.ts | 11 +- .../icon-registry/icon-registry.service.ts | 6 +- libs/ui/src/lib/util/infinite-scroll/index.ts | 2 +- .../application/list-configs.facade.ts | 4 +- .../state/list-configs.actions.ts | 2 +- .../state/list-configs.reducer.ts | 2 +- .../state/list-configs.selectors.ts | 10 +- .../util/loaders/aplication/loader.facade.ts | 4 +- libs/ui/src/lib/util/loaders/index.ts | 1 - .../lib/util/loaders/state/loader.reducer.ts | 7 +- .../lib/util/loaders/util-loader.module.ts | 5 +- .../src/lib/util/menu/base.menu.component.ts | 21 +- .../directives/base-menu-item.directive.ts | 5 +- .../directives/menu-children.directive.ts | 15 +- .../menu/directives/menu-entry.directive.ts | 2 +- .../util/menu/entities/menu-entry.model.ts | 3 +- libs/ui/src/lib/util/menu/index.ts | 2 - libs/ui/src/lib/util/models/chart-data.ts | 4 +- libs/ui/src/lib/util/models/pricing.ts | 3 +- libs/ui/src/lib/util/pipes/index.ts | 1 - libs/ui/src/lib/util/pipes/pipes.ts | 24 +- .../lib/util/router-store/error-handler.ts | 4 +- .../util/router-store/state/router.actions.ts | 4 +- .../util/router-store/state/router.effects.ts | 18 +- .../router-store/state/router.selectors.ts | 7 +- libs/ui/src/lib/util/scroll-to/index.ts | 2 +- .../lib/util/scroll-to/scroll-to.directive.ts | 8 +- .../lib/util/scroll-to/scroll-to.module.ts | 6 +- .../lib/util/scroll-to/scroll-to.service.ts | 1 - .../status/directives/status.directive.ts | 6 +- libs/ui/src/lib/util/status/index.ts | 2 - libs/ui/src/lib/util/translate/index.ts | 1 - .../loaders/translate-browser.loader.ts | 12 +- .../loaders/translate-server.loader.ts | 12 +- .../src/lib/util/translate/translate.data.ts | 30 +- .../lib/util/translate/translate.module.ts | 11 +- libs/ui/src/lib/util/validator/definitions.ts | 10 +- libs/ui/src/lib/util/validator/utils.ts | 115 ++- .../util/value/directives/value.directive.ts | 6 +- libs/ui/src/lib/util/value/index.ts | 2 - .../lib/util/view-title/view-title.service.ts | 10 +- libs/ui/src/test-setup.ts | 2 +- 339 files changed, 4724 insertions(+), 2236 deletions(-) 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 @@ " > -