fix: resuelve el type-checking estricto de plantillas y formatea con prettier
This commit is contained in:
@@ -13,7 +13,14 @@ export * from './lib/util/form-control';
|
|||||||
export * from './lib/util/icon-registry';
|
export * from './lib/util/icon-registry';
|
||||||
export * from './lib/util/infinite-scroll';
|
export * from './lib/util/infinite-scroll';
|
||||||
// ./lib/util/list-configs: omitido(s) por colisión con otro módulo -> featureKey, getFeatureState, initialState
|
// ./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 type { ListConfigsState, ListMode } from './lib/util/list-configs';
|
||||||
export * from './lib/util/loaders';
|
export * from './lib/util/loaders';
|
||||||
export * from './lib/util/local-storage';
|
export * from './lib/util/local-storage';
|
||||||
@@ -56,6 +63,31 @@ export * from './lib/ui/slider';
|
|||||||
export * from './lib/ui/spinner';
|
export * from './lib/ui/spinner';
|
||||||
export * from './lib/ui/tab';
|
export * from './lib/ui/tab';
|
||||||
// ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
|
// ./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/tooltip';
|
||||||
export * from './lib/ui/wrapper';
|
export * from './lib/ui/wrapper';
|
||||||
|
|||||||
@@ -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';
|
import { DURATION } from './configs';
|
||||||
|
|
||||||
export function transitionAnimation(duration: DURATION): any {
|
export function transitionAnimation(duration: DURATION): any {
|
||||||
@@ -6,11 +12,21 @@ export function transitionAnimation(duration: DURATION): any {
|
|||||||
trigger('collapse', [
|
trigger('collapse', [
|
||||||
state(
|
state(
|
||||||
'off',
|
'off',
|
||||||
style({ transform: 'translateY(0%)', opacity: '0', visibility: 'hidden', height: '0' })
|
style({
|
||||||
|
transform: 'translateY(0%)',
|
||||||
|
opacity: '0',
|
||||||
|
visibility: 'hidden',
|
||||||
|
height: '0',
|
||||||
|
}),
|
||||||
),
|
),
|
||||||
state(
|
state(
|
||||||
'on',
|
'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')]),
|
transition('on <=> off', [animate('420ms ease-in-out')]),
|
||||||
]),
|
]),
|
||||||
@@ -25,7 +41,7 @@ export const enterTransition = transition(':enter', [
|
|||||||
'240ms 200ms ease-out',
|
'240ms 200ms ease-out',
|
||||||
style({
|
style({
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -37,7 +53,7 @@ export const leaveTransition = transition(':leave', [
|
|||||||
'180ms 120ms ease-out',
|
'180ms 120ms ease-out',
|
||||||
style({
|
style({
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -46,9 +46,11 @@ $pi-border-radius-x-large: 1.375rem; // 22px
|
|||||||
// Box shadow
|
// Box shadow
|
||||||
$pi-box-shadow: rgba(#c5c5ce, 0.1) 3px 6px 6px 0px;
|
$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-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);
|
-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);
|
-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-top: 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
|
||||||
$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08);
|
$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08);
|
||||||
|
|||||||
@@ -277,7 +277,9 @@ a:not([href]):not([tabindex]) {
|
|||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
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;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,11 +2,15 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Soehne';
|
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');
|
||||||
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'),
|
format('embedded-opentype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2') format('woff2'),
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2')
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'),
|
format('woff2'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf') format('truetype'),
|
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')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.svg#soehne-leicht')
|
||||||
format('svg');
|
format('svg');
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
@@ -18,7 +22,8 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Soehne';
|
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');
|
||||||
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'),
|
format('embedded-opentype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2')
|
||||||
format('woff2'),
|
format('woff2'),
|
||||||
@@ -37,11 +42,15 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Soehne';
|
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');
|
||||||
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'),
|
format('embedded-opentype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2') format('woff2'),
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2')
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'),
|
format('woff2'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf') format('truetype'),
|
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')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.svg#soehne-buch')
|
||||||
format('svg');
|
format('svg');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -53,11 +62,13 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Soehne';
|
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');
|
||||||
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'),
|
format('embedded-opentype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2')
|
||||||
format('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')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.ttf')
|
||||||
format('truetype'),
|
format('truetype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv')
|
||||||
@@ -71,11 +82,15 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Soehne';
|
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');
|
||||||
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'),
|
format('embedded-opentype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2') format('woff2'),
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2')
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'),
|
format('woff2'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf') format('truetype'),
|
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')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.svg#soehne-kraftig')
|
||||||
format('svg');
|
format('svg');
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -87,11 +102,15 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Soehne';
|
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');
|
||||||
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'),
|
format('embedded-opentype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2') format('woff2'),
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2')
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'),
|
format('woff2'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf') format('truetype'),
|
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')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.svg#soehne-halbfett')
|
||||||
format('svg');
|
format('svg');
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@@ -103,7 +122,8 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Soehne';
|
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');
|
||||||
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'),
|
format('embedded-opentype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2')
|
||||||
format('woff2'),
|
format('woff2'),
|
||||||
|
|||||||
@@ -75,7 +75,8 @@
|
|||||||
&:not(.pi-accordion__appearance--outline) {
|
&:not(.pi-accordion__appearance--outline) {
|
||||||
// Footer
|
// Footer
|
||||||
& > .pi-accordion-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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -49,7 +49,8 @@
|
|||||||
padding-left: var(--pi-spacing-#{$large-padding});
|
padding-left: var(--pi-spacing-#{$large-padding});
|
||||||
padding-bottom: var(--pi-spacing-#{$large-padding});
|
padding-bottom: var(--pi-spacing-#{$large-padding});
|
||||||
padding-right: 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) {
|
& > *:nth-child(2) {
|
||||||
@@ -64,11 +65,13 @@
|
|||||||
& > *:last-child {
|
& > *:last-child {
|
||||||
padding-top: var(--pi-spacing-#{$small-padding});
|
padding-top: var(--pi-spacing-#{$small-padding});
|
||||||
padding-bottom: 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 {
|
&.has-equal-inner-padding {
|
||||||
@@ -77,18 +80,21 @@
|
|||||||
padding-top: var(--pi-spacing-#{$large-padding});
|
padding-top: var(--pi-spacing-#{$large-padding});
|
||||||
padding-bottom: var(--pi-spacing-#{$small-padding});
|
padding-bottom: var(--pi-spacing-#{$small-padding});
|
||||||
padding-right: 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *:last-child {
|
& > *:last-child {
|
||||||
padding-top: var(--pi-spacing-#{$large-padding});
|
padding-top: var(--pi-spacing-#{$large-padding});
|
||||||
padding-bottom: 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) {
|
&: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});
|
var(--pi-spacing-#{$small-padding});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -93,8 +93,12 @@ html {
|
|||||||
&.pi-list-item-icon__right {
|
&.pi-list-item-icon__right {
|
||||||
background-color: var(--pi-color-primary-25);
|
background-color: var(--pi-color-primary-25);
|
||||||
border-top: 1px solid var(--pi-color-primary-50);
|
border-top: 1px solid var(--pi-color-primary-50);
|
||||||
border-bottom-left-radius: calc(var(--pi-border-radius-large) - 1px);
|
border-bottom-left-radius: calc(
|
||||||
border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px);
|
var(--pi-border-radius-large) - 1px
|
||||||
|
);
|
||||||
|
border-bottom-right-radius: calc(
|
||||||
|
var(--pi-border-radius-large) - 1px
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
@mixin fixedBottomNote(
|
@mixin fixedBottomNote(
|
||||||
$left: 0,
|
$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)),
|
$width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)),
|
||||||
$min-width: auto
|
$min-width: auto
|
||||||
) {
|
) {
|
||||||
@@ -48,9 +51,11 @@ html {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
|
||||||
.pi-button__xx-small
|
.pi-hamburger
|
||||||
):not(.pi-button__x-large):not(.pi-button__toggle) {
|
):not(.pi-button__xx-small):not(.pi-button__x-large):not(
|
||||||
|
.pi-button__toggle
|
||||||
|
) {
|
||||||
height: var(--pi-spacing-xx-large);
|
height: var(--pi-spacing-xx-large);
|
||||||
padding-top: unset;
|
padding-top: unset;
|
||||||
padding-bottom: unset;
|
padding-bottom: unset;
|
||||||
@@ -78,7 +83,10 @@ html {
|
|||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include fixedBottomNote(
|
@include fixedBottomNote(
|
||||||
0,
|
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))
|
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -94,16 +102,20 @@ html {
|
|||||||
height: var(--pi-spacing-xx-large);
|
height: var(--pi-spacing-xx-large);
|
||||||
width: var(--pi-spacing-xx-large);
|
width: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__xx-small
|
.pi-button__icon--single
|
||||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
|
||||||
|
.pi-button__toggle
|
||||||
|
) {
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
padding-left: var(--pi-spacing-small);
|
padding-left: var(--pi-spacing-small);
|
||||||
padding-right: 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(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
|
||||||
.pi-button__xx-small
|
.pi-hamburger
|
||||||
):not(.pi-button__x-large):not(.pi-button__toggle) {
|
):not(.pi-button__xx-small):not(.pi-button__x-large):not(
|
||||||
|
.pi-button__toggle
|
||||||
|
) {
|
||||||
height: var(--pi-spacing-xx-large);
|
height: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,11 +10,13 @@
|
|||||||
padding-left: var(--pi-spacing-#{$padding});
|
padding-left: var(--pi-spacing-#{$padding});
|
||||||
padding-right: var(--pi-spacing-#{$padding});
|
padding-right: var(--pi-spacing-#{$padding});
|
||||||
&:first-child {
|
&: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 {
|
&: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 {
|
&:first-child {
|
||||||
padding-top: var(--pi-spacing-#{$padding});
|
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 {
|
&:last-child {
|
||||||
padding-bottom: var(--pi-spacing-#{$padding});
|
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) {
|
& > *:not(.pi-button):not(.pi-panel-content):not(.pi-chip) {
|
||||||
&:nth-child(n + 2) {
|
&:nth-child(n + 2) {
|
||||||
width: 100%;
|
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);
|
margin-top: var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -376,15 +382,17 @@ html {
|
|||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.pi-panel__expansion {
|
&.pi-panel__expansion {
|
||||||
.pi-panel-content__expandable {
|
.pi-panel-content__expandable {
|
||||||
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
|
button:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__xx-small
|
.pi-button__icon--single
|
||||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
|
||||||
|
.pi-button__toggle
|
||||||
|
) {
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-saas-panel-subtitle {
|
.pi-saas-panel-subtitle {
|
||||||
.pi-panel-subtitle-content {
|
.pi-panel-subtitle-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -415,9 +423,11 @@ html {
|
|||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.pi-panel__expansion {
|
&.pi-panel__expansion {
|
||||||
.pi-panel-content__expandable {
|
.pi-panel-content__expandable {
|
||||||
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
|
button:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__xx-small
|
.pi-button__icon--single
|
||||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
|
||||||
|
.pi-button__toggle
|
||||||
|
) {
|
||||||
min-width: 9.25rem;
|
min-width: 9.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -178,70 +178,266 @@ mark {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin textColor($color) {
|
@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});
|
color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
&:not(button):not([class*='content'])
|
&: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});
|
color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
// (50)
|
// (50)
|
||||||
&.pi-color__density--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);
|
color: var(--pi-color-#{$color}-50);
|
||||||
}
|
}
|
||||||
&:not(button):not([class*='content'])
|
&: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);
|
color: var(--pi-color-#{$color}-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// (100)
|
// (100)
|
||||||
&.pi-color__density--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);
|
color: var(--pi-color-#{$color}-100);
|
||||||
}
|
}
|
||||||
&:not(button):not([class*='content'])
|
&: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);
|
color: var(--pi-color-#{$color}-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// (200)
|
// (200)
|
||||||
&.pi-color__density--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);
|
color: var(--pi-color-#{$color}-200);
|
||||||
}
|
}
|
||||||
&:not(button):not([class*='content'])
|
&: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);
|
color: var(--pi-color-#{$color}-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// (300)
|
// (300)
|
||||||
&.pi-color__density--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);
|
color: var(--pi-color-#{$color}-300);
|
||||||
}
|
}
|
||||||
&:not(button):not([class*='content'])
|
&: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);
|
color: var(--pi-color-#{$color}-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// (400)
|
// (400)
|
||||||
&.pi-color__density--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);
|
color: var(--pi-color-#{$color}-400);
|
||||||
}
|
}
|
||||||
&:not(button):not([class*='content'])
|
&: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);
|
color: var(--pi-color-#{$color}-400);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// (900)
|
// (900)
|
||||||
&.pi-color__density--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);
|
color: var(--pi-color-#{$color}-900);
|
||||||
}
|
}
|
||||||
&:not(button):not([class*='content'])
|
&: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);
|
color: var(--pi-color-#{$color}-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -274,63 +470,266 @@ mark {
|
|||||||
|
|
||||||
// Grey
|
// Grey
|
||||||
.pi-color__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);
|
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);
|
color: var(--pi-color-grey);
|
||||||
}
|
}
|
||||||
// Grey (50)
|
// Grey (50)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-grey-75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Grey (100)
|
// Grey (100)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-grey-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Grey (200)
|
// Grey (200)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-grey-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Grey (300)
|
// Grey (300)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Grey (400)
|
// Grey (400)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Grey (900)
|
// Grey (900)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-grey-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -338,27 +737,114 @@ mark {
|
|||||||
|
|
||||||
// White
|
// White
|
||||||
.pi-color__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);
|
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);
|
color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
// White (200)
|
// White (200)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-white-rgba-06);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// White (900)
|
// White (900)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -366,27 +852,114 @@ mark {
|
|||||||
|
|
||||||
// Black
|
// Black
|
||||||
.pi-color__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);
|
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);
|
color: var(--pi-color-grey-900);
|
||||||
}
|
}
|
||||||
// Black (200)
|
// Black (200)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-grey-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Black (900)
|
// Black (900)
|
||||||
&.pi-color__density--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);
|
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);
|
color: var(--pi-color-grey-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,32 +1,34 @@
|
|||||||
@mixin privateButtonsSizes {
|
@mixin privateButtonsSizes {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
|
||||||
.pi-button__toggle
|
.pi-button__x-large
|
||||||
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single) {
|
):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) {
|
&:not(.pi-button__x-small):not(.pi-button__xx-small) {
|
||||||
height: var(--pi-spacing-xxx-large);
|
height: var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(.pi-button__trimmed):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(
|
||||||
.ch2-btn
|
.pi-button__trimmed
|
||||||
):not(.pi-button__icon--single) {
|
):not(.ch2-btn):not(.pi-button__icon--single) {
|
||||||
&.pi-button__x-small {
|
&.pi-button__x-small {
|
||||||
height: var(--pi-spacing-xx-large);
|
height: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__toggle
|
||||||
) {
|
):not(.pi-button__type--menu-item) {
|
||||||
// Sizes
|
// Sizes
|
||||||
// X small
|
// X small
|
||||||
&.pi-button {
|
&.pi-button {
|
||||||
&:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not(
|
&:not(.pi-button__icon):not(.pi-button__x-small):not(
|
||||||
.pi-button__large
|
.pi-button__small
|
||||||
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
|
):not(.pi-button__large):not(.pi-button__large):not(
|
||||||
.pi-button__trimmed
|
.pi-button__trimed
|
||||||
) {
|
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -36,7 +38,9 @@
|
|||||||
// Fill
|
// Fill
|
||||||
@mixin privateButtonFillColor($color) {
|
@mixin privateButtonFillColor($color) {
|
||||||
// Default 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});
|
background-color: var(--pi-color-#{$color});
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@@ -99,9 +103,9 @@
|
|||||||
|
|
||||||
@mixin privateButtonsColors {
|
@mixin privateButtonsColors {
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__toggle
|
||||||
) {
|
):not(.pi-button__type--menu-item) {
|
||||||
// Color
|
// Color
|
||||||
// White
|
// White
|
||||||
&.pi-color__white {
|
&.pi-color__white {
|
||||||
@@ -118,9 +122,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// White default
|
// White default
|
||||||
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
|
||||||
.pi-color__highlighted
|
.pi-color__warn
|
||||||
):not(.pi-color__white) {
|
):not(.pi-color__highlighted):not(.pi-color__white) {
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
@@ -154,7 +158,9 @@
|
|||||||
&.pi-color__primary,
|
&.pi-color__primary,
|
||||||
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||||
.pi-color__white
|
.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);
|
@include privateButtonGhostColor(primary);
|
||||||
}
|
}
|
||||||
// Ghost & Accent
|
// Ghost & Accent
|
||||||
|
|||||||
@@ -1,5 +1,9 @@
|
|||||||
@mixin publicGhostButtonsColors(
|
@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: primary
|
||||||
) {
|
) {
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
@@ -29,7 +33,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin publicFillButtonsGradients($color) {
|
@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-size: 100%;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
@@ -66,42 +72,44 @@
|
|||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
@mixin publicButtonsSizes {
|
@mixin publicButtonsSizes {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
|
||||||
.pi-button__toggle
|
.pi-button__x-large
|
||||||
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single):not(
|
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__icon--single
|
||||||
) {
|
):not(.pi-button__type--menu-item) {
|
||||||
height: 2.875rem;
|
height: 2.875rem;
|
||||||
&.pi-button__icon--single {
|
&.pi-button__icon--single {
|
||||||
width: var(--pi-spacing-xxxx-large);
|
width: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.pi-button__toggle):not(.pi-button__x-large):not(.pi-button__trimmed):not(
|
&:not(.pi-button__toggle):not(.pi-button__x-large):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__trimmed
|
||||||
) {
|
):not(.pi-button__type--menu-item) {
|
||||||
height: 2.875rem;
|
height: 2.875rem;
|
||||||
&.pi-button__icon--single {
|
&.pi-button__icon--single {
|
||||||
width: var(--pi-spacing-xxxx-large);
|
width: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__toggle
|
||||||
) {
|
):not(.pi-button__type--menu-item) {
|
||||||
// Sizes
|
// Sizes
|
||||||
// X small
|
// X small
|
||||||
&.pi-button {
|
&.pi-button {
|
||||||
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
|
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
|
||||||
.pi-button__large
|
.pi-button__small
|
||||||
):not(.pi-button__trimed):not(.pi-button__xx-small):not(.pi-button__trimmed) {
|
):not(.pi-button__large):not(.pi-button__trimed):not(
|
||||||
|
.pi-button__xx-small
|
||||||
|
):not(.pi-button__trimmed) {
|
||||||
min-height: 2.875rem;
|
min-height: 2.875rem;
|
||||||
}
|
}
|
||||||
&:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not(
|
&:not(.pi-button__icon):not(.pi-button__x-small):not(
|
||||||
.pi-button__large
|
.pi-button__small
|
||||||
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
|
):not(.pi-button__large):not(.pi-button__large):not(
|
||||||
.pi-button__trimmed
|
.pi-button__trimed
|
||||||
) {
|
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -111,7 +119,9 @@
|
|||||||
// Shine hover effect
|
// Shine hover effect
|
||||||
@mixin publicButtonsShineHoverEffect {
|
@mixin publicButtonsShineHoverEffect {
|
||||||
// Hover shine effect
|
// 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;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
&::after {
|
&::after {
|
||||||
@@ -149,9 +159,12 @@
|
|||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
box-shadow: 0px 0px 0px white;
|
box-shadow: 0px 0px 0px white;
|
||||||
-webkit-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
|
||||||
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
|
rgba(255, 255, 255, 0.25);
|
||||||
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
|
// Mode Dark
|
||||||
@@ -166,9 +179,12 @@
|
|||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
box-shadow: 0px 0px 0px white;
|
box-shadow: 0px 0px 0px white;
|
||||||
-webkit-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
|
||||||
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
|
rgba(255, 255, 255, 0.125);
|
||||||
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 {
|
&:focus {
|
||||||
@@ -193,9 +209,9 @@
|
|||||||
@include publicButtonsShineHoverEffect;
|
@include publicButtonsShineHoverEffect;
|
||||||
}
|
}
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__toggle
|
||||||
) {
|
):not(.pi-button__type--menu-item) {
|
||||||
font: {
|
font: {
|
||||||
weight: 600;
|
weight: 600;
|
||||||
}
|
}
|
||||||
@@ -217,9 +233,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// White default
|
// White default
|
||||||
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
|
||||||
.pi-color__highlighted
|
.pi-color__warn
|
||||||
) {
|
):not(.pi-color__highlighted) {
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
@@ -263,9 +279,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// White default
|
// White default
|
||||||
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
|
||||||
.pi-color__highlighted
|
.pi-color__warn
|
||||||
) {
|
):not(.pi-color__highlighted) {
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
color: var(--pi-color-black);
|
color: var(--pi-color-black);
|
||||||
}
|
}
|
||||||
@@ -274,17 +290,20 @@
|
|||||||
|
|
||||||
// Warn
|
// Warn
|
||||||
&.pi-color__warn {
|
&.pi-color__warn {
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
&:not(.pi-button__appearance--ghost):not(
|
||||||
.pi-color__white
|
.pi-button__appearance--outline
|
||||||
) {
|
):not(.pi-color__white) {
|
||||||
@include publicButtonsBackgroundColors(var(--pi-color-warn-200), var(--pi-color-warn-900));
|
@include publicButtonsBackgroundColors(
|
||||||
|
var(--pi-color-warn-200),
|
||||||
|
var(--pi-color-warn-900)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
// Mode
|
// Mode
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-color__mode--light) {
|
&:not(.pi-color__mode--light) {
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
&:not(.pi-button__appearance--ghost):not(
|
||||||
.pi-color__white
|
.pi-button__appearance--outline
|
||||||
) {
|
):not(.pi-color__white) {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
300deg,
|
300deg,
|
||||||
hsl(0deg 74% 71%) 0%,
|
hsl(0deg 74% 71%) 0%,
|
||||||
@@ -302,9 +321,9 @@
|
|||||||
}
|
}
|
||||||
// Light
|
// Light
|
||||||
&.pi-color__mode--light {
|
&.pi-color__mode--light {
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
&:not(.pi-button__appearance--ghost):not(
|
||||||
.pi-color__white
|
.pi-button__appearance--outline
|
||||||
) {
|
):not(.pi-color__white) {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
300deg,
|
300deg,
|
||||||
hsl(350deg 100% 93%) 0%,
|
hsl(350deg 100% 93%) 0%,
|
||||||
@@ -330,9 +349,9 @@
|
|||||||
|
|
||||||
// Success
|
// Success
|
||||||
&.pi-color__success {
|
&.pi-color__success {
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
&:not(.pi-button__appearance--ghost):not(
|
||||||
.pi-color__white
|
.pi-button__appearance--outline
|
||||||
) {
|
):not(.pi-color__white) {
|
||||||
@include publicButtonsBackgroundColors(
|
@include publicButtonsBackgroundColors(
|
||||||
var(--pi-color-success-200),
|
var(--pi-color-success-200),
|
||||||
var(--pi-color-success-900)
|
var(--pi-color-success-900)
|
||||||
@@ -341,9 +360,9 @@
|
|||||||
// Mode
|
// Mode
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-color__mode--light) {
|
&:not(.pi-color__mode--light) {
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
&:not(.pi-button__appearance--ghost):not(
|
||||||
.pi-color__white
|
.pi-button__appearance--outline
|
||||||
) {
|
):not(.pi-color__white) {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
300deg,
|
300deg,
|
||||||
hsl(155deg 48% 79%) 0%,
|
hsl(155deg 48% 79%) 0%,
|
||||||
@@ -361,9 +380,9 @@
|
|||||||
}
|
}
|
||||||
// Light
|
// Light
|
||||||
&.pi-color__mode--light {
|
&.pi-color__mode--light {
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
&:not(.pi-button__appearance--ghost):not(
|
||||||
.pi-color__white
|
.pi-button__appearance--outline
|
||||||
) {
|
):not(.pi-color__white) {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
300deg,
|
300deg,
|
||||||
hsl(155deg 62% 91%) 0%,
|
hsl(155deg 62% 91%) 0%,
|
||||||
@@ -402,13 +421,17 @@
|
|||||||
&.pi-color__primary,
|
&.pi-color__primary,
|
||||||
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||||
.pi-color__white
|
.pi-color__white
|
||||||
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey):not(
|
):not(.pi-color__black):not(.pi-color__highlighted):not(
|
||||||
.pi-color__success
|
.pi-color__grey
|
||||||
) {
|
):not(.pi-color__success) {
|
||||||
@include publicGhostButtonsColors;
|
@include publicGhostButtonsColors;
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
primary-200
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -416,12 +439,20 @@
|
|||||||
// Ghost & Accent
|
// Ghost & Accent
|
||||||
&.pi-color__accent {
|
&.pi-color__accent {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
accent
|
||||||
);
|
);
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
accent-200
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -429,12 +460,20 @@
|
|||||||
// Ghost & Warn
|
// Ghost & Warn
|
||||||
&.pi-color__warn {
|
&.pi-color__warn {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
warn
|
||||||
);
|
);
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
warn-200
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -444,7 +483,11 @@
|
|||||||
@include publicGhostButtonsColors;
|
@include publicGhostButtonsColors;
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
white
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -452,12 +495,20 @@
|
|||||||
// Ghost & Black
|
// Ghost & Black
|
||||||
&.pi-color__black {
|
&.pi-color__black {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
grey
|
||||||
);
|
);
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
grey-200
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -465,7 +516,11 @@
|
|||||||
// Ghost & Highlighted
|
// Ghost & Highlighted
|
||||||
&.pi-color__highlighted {
|
&.pi-color__highlighted {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
highlighted
|
||||||
);
|
);
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@@ -482,12 +537,20 @@
|
|||||||
// Ghost & Grey
|
// Ghost & Grey
|
||||||
&.pi-color__grey {
|
&.pi-color__grey {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
grey-400
|
||||||
);
|
);
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
grey-50
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -495,12 +558,20 @@
|
|||||||
// Ghost & Success
|
// Ghost & Success
|
||||||
&.pi-color__success {
|
&.pi-color__success {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
success
|
||||||
);
|
);
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@include publicGhostButtonsColors(
|
@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
|
success-200
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -627,8 +698,12 @@
|
|||||||
@mixin publicFixedButtonSideSpacing(
|
@mixin publicFixedButtonSideSpacing(
|
||||||
$top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
|
$top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
|
||||||
$side-spacing: var(--pi-spacing-medium),
|
$side-spacing: var(--pi-spacing-medium),
|
||||||
$bottom-left-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
|
$bottom-left-spacing: calc(
|
||||||
$bottom-right-spacing: calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
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 {
|
||||||
&.pi-shell__deale-website,
|
&.pi-shell__deale-website,
|
||||||
|
|||||||
@@ -13,9 +13,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__toggle
|
||||||
) {
|
):not(.pi-button__type--menu-item) {
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
|
&: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-top: var(--pi-spacing-xx-small);
|
||||||
padding-bottom: 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) {
|
&:not(.pi-button__x-small) {
|
||||||
border-radius: var(--pi-border-radius-medium);
|
border-radius: var(--pi-border-radius-medium);
|
||||||
-webkit-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(
|
&:not(.pi-button__icon--single):not(.pi-button__xx-small):not(
|
||||||
.pi-button__toggle
|
.pi-button__trimmed
|
||||||
):not(.ch2-btn) {
|
):not(.pi-button__toggle):not(.ch2-btn) {
|
||||||
&:not(.pi-button__x-small) {
|
&:not(.pi-button__x-small) {
|
||||||
min-width: 5.5rem;
|
min-width: 5.5rem;
|
||||||
padding-left: var(--pi-spacing-x-large);
|
padding-left: var(--pi-spacing-x-large);
|
||||||
@@ -62,9 +64,9 @@
|
|||||||
|
|
||||||
@mixin buttonsSizes {
|
@mixin buttonsSizes {
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__toggle
|
||||||
) {
|
):not(.pi-button__type--menu-item) {
|
||||||
&.pi-button__x-small {
|
&.pi-button__x-small {
|
||||||
font: {
|
font: {
|
||||||
size: 0.8125rem;
|
size: 0.8125rem;
|
||||||
|
|||||||
@@ -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 {
|
.pi-cell {
|
||||||
display: flex;
|
display: flex;
|
||||||
// Cell type default
|
// Cell type default
|
||||||
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(.pi-cell__type--checkbox):not(
|
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(
|
||||||
.pi-cell__type--date
|
.pi-cell__type--checkbox
|
||||||
):not(.pi-cell__type--description) {
|
):not(.pi-cell__type--date):not(.pi-cell__type--description) {
|
||||||
width: $default-width;
|
width: $default-width;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,7 +21,10 @@
|
|||||||
&.pi-card {
|
&.pi-card {
|
||||||
display: grid;
|
display: grid;
|
||||||
.pi-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);
|
margin-top: var(--pi-spacing-xx-small);
|
||||||
|
|
||||||
& > .pi-text-viewer,
|
& > .pi-text-viewer,
|
||||||
|
|||||||
@@ -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)
|
// MODE List (Table)
|
||||||
|
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
@@ -24,7 +27,10 @@
|
|||||||
|
|
||||||
// Cell
|
// Cell
|
||||||
.pi-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);
|
margin-top: var(--pi-spacing-xx-small);
|
||||||
// Vertival align
|
// Vertival align
|
||||||
&.pi-cell__vertical-align--center {
|
&.pi-cell__vertical-align--center {
|
||||||
|
|||||||
@@ -46,7 +46,9 @@
|
|||||||
.mat-mdc-form-field-flex {
|
.mat-mdc-form-field-flex {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
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 {
|
.mat-mdc-form-field-infix {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,7 +32,8 @@
|
|||||||
padding: var(--pi-spacing-small) 0;
|
padding: var(--pi-spacing-small) 0;
|
||||||
textarea {
|
textarea {
|
||||||
&.mat-mdc-input-element {
|
&.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -56,7 +56,9 @@
|
|||||||
// Fill
|
// Fill
|
||||||
&.mat-form-field-appearance-fill {
|
&.mat-form-field-appearance-fill {
|
||||||
.mat-mdc-form-field-underline {
|
.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 {
|
input {
|
||||||
@@ -122,7 +124,9 @@ html {
|
|||||||
&.mat-form-field-appearance-fill {
|
&.mat-form-field-appearance-fill {
|
||||||
.mat-mdc-form-field-underline {
|
.mat-mdc-form-field-underline {
|
||||||
transform: translateY(
|
transform: translateY(
|
||||||
calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))
|
calc(
|
||||||
|
var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -32,8 +32,10 @@
|
|||||||
&:active {
|
&:active {
|
||||||
transform: translate(0, -0.125rem);
|
transform: translate(0, -0.125rem);
|
||||||
box-shadow: 0px 0px 0px white;
|
box-shadow: 0px 0px 0px white;
|
||||||
-webkit-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
|
||||||
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
|
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);
|
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});
|
color: var(--pi-color-#{$text-color});
|
||||||
background-color: var(--pi-color-#{$theming-color});
|
background-color: var(--pi-color-#{$theming-color});
|
||||||
border-color: var(--pi-color-#{$theming-color});
|
border-color: var(--pi-color-#{$theming-color});
|
||||||
@@ -169,7 +175,11 @@
|
|||||||
fieldset {
|
fieldset {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
@include billingCycleContentColor(primary-900, primary, primary-100);
|
@include billingCycleContentColor(
|
||||||
|
primary-900,
|
||||||
|
primary,
|
||||||
|
primary-100
|
||||||
|
);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
&:not(.is-active) {
|
&: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 {
|
||||||
&.pi-layout__09-pricing {
|
&.pi-layout__09-pricing {
|
||||||
& > *:nth-child(4) {
|
& > *:nth-child(4) {
|
||||||
@@ -253,10 +266,14 @@
|
|||||||
.pi-card-content__center {
|
.pi-card-content__center {
|
||||||
& > article {
|
& > article {
|
||||||
&:nth-child(n + 2) {
|
&: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 {
|
& > .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 {
|
fieldset {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
@include billingCycleContentColor(highlighted-900, highlighted, highlighted-100);
|
@include billingCycleContentColor(
|
||||||
|
highlighted-900,
|
||||||
|
highlighted,
|
||||||
|
highlighted-100
|
||||||
|
);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
&:not(.is-active) {
|
&:not(.is-active) {
|
||||||
@include billingCycleContentColor(highlighted, highlighted, highlighted-50);
|
@include billingCycleContentColor(
|
||||||
|
highlighted,
|
||||||
|
highlighted,
|
||||||
|
highlighted-50
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -285,7 +310,11 @@
|
|||||||
&.pi-color__mode--light {
|
&.pi-color__mode--light {
|
||||||
@include checkIconBackgroundColor(var(--pi-color-highlighted-50));
|
@include checkIconBackgroundColor(var(--pi-color-highlighted-50));
|
||||||
@include cardInternalBorders(var(--pi-color-highlighted-100));
|
@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 {
|
||||||
&.pi-layout__09-pricing {
|
&.pi-layout__09-pricing {
|
||||||
max-width: $container-width;
|
max-width: $container-width;
|
||||||
@@ -720,9 +751,11 @@ html {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
&:not(.mdc-switch):not(.pi-button__toggle) {
|
&:not(.mdc-switch):not(.pi-button__toggle) {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__x-large
|
.pi-button__xx-small
|
||||||
):not(.pi-button__toggle):not(.pi-button__trimmed) {
|
):not(.pi-button__x-large):not(.pi-button__toggle):not(
|
||||||
|
.pi-button__trimmed
|
||||||
|
) {
|
||||||
height: var(--pi-spacing-xxxx-large);
|
height: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
&.pi-shell__deale-website {
|
&.pi-shell__deale-website {
|
||||||
.pi-container-layout {
|
.pi-container-layout {
|
||||||
@@ -51,7 +54,10 @@ html {
|
|||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
// Desktop S & M
|
// Desktop S & M
|
||||||
&:not(.is-desktop__large) {
|
&: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
|
// Desktop L
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
|
|||||||
@@ -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 {
|
&.ch2-btn {
|
||||||
min-height: var(--pi-spacing-xxx-large) !important;
|
min-height: var(--pi-spacing-xxx-large) !important;
|
||||||
&:not(.ch2-btn-primary) {
|
&:not(.ch2-btn-primary) {
|
||||||
@@ -238,7 +240,9 @@
|
|||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
button {
|
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;
|
min-width: unset;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -52,38 +52,76 @@
|
|||||||
}
|
}
|
||||||
.mdc-checkbox {
|
.mdc-checkbox {
|
||||||
padding: calc(
|
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(
|
margin: calc(
|
||||||
(
|
(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
var(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
--mdc-checkbox-state-layer-size,
|
||||||
) / 2
|
var(--pi-spacing-x-large)
|
||||||
|
) - var(
|
||||||
|
--mdc-checkbox-state-layer-size,
|
||||||
|
var(--pi-spacing-x-large)
|
||||||
|
)
|
||||||
|
) /
|
||||||
|
2
|
||||||
);
|
);
|
||||||
.mdc-checkbox__background {
|
.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(
|
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 {
|
.mdc-checkbox__native-control {
|
||||||
top: calc(
|
top: calc(
|
||||||
(
|
(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
var(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
--mdc-checkbox-state-layer-size,
|
||||||
) / 2
|
var(--pi-spacing-x-large)
|
||||||
|
) - var(
|
||||||
|
--mdc-checkbox-state-layer-size,
|
||||||
|
var(--pi-spacing-x-large)
|
||||||
|
)
|
||||||
|
) /
|
||||||
|
2
|
||||||
);
|
);
|
||||||
right: calc(
|
right: calc(
|
||||||
(
|
(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
var(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
--mdc-checkbox-state-layer-size,
|
||||||
) / 2
|
var(--pi-spacing-x-large)
|
||||||
|
) - var(
|
||||||
|
--mdc-checkbox-state-layer-size,
|
||||||
|
var(--pi-spacing-x-large)
|
||||||
|
)
|
||||||
|
) /
|
||||||
|
2
|
||||||
);
|
);
|
||||||
left: calc(
|
left: calc(
|
||||||
(
|
(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
var(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
--mdc-checkbox-state-layer-size,
|
||||||
) / 2
|
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));
|
width: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large));
|
||||||
height: 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 {
|
&:hover {
|
||||||
.mdc-checkbox__native-control {
|
.mdc-checkbox__native-control {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
|
&:not(:checked):not(:indeterminate):not(
|
||||||
|
[data-indeterminate='true']
|
||||||
|
) {
|
||||||
& ~ .mdc-checkbox__background {
|
& ~ .mdc-checkbox__background {
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
.mat-mdc-chip {
|
.mat-mdc-chip {
|
||||||
&.mat-mdc-standard-chip {
|
&.mat-mdc-standard-chip {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small)
|
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small)
|
||||||
var(--pi-spacing-medium);
|
var(--pi-spacing-xx-small) var(--pi-spacing-medium);
|
||||||
gap: var(--pi-spacing-xxxx-small);
|
gap: var(--pi-spacing-xxxx-small);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
@@ -31,9 +31,9 @@
|
|||||||
button {
|
button {
|
||||||
&.pi-button {
|
&.pi-button {
|
||||||
&.pi-button__primary {
|
&.pi-button__primary {
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
&:not(.pi-button__appearance--ghost):not(
|
||||||
.pi-button__white
|
.pi-button__appearance--outline
|
||||||
) {
|
):not(.pi-button__white) {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,8 +19,13 @@
|
|||||||
}
|
}
|
||||||
.mdc-linear-progress__bar-inner {
|
.mdc-linear-progress__bar-inner {
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-image: linear-gradient(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1;
|
border-image: linear-gradient(
|
||||||
border-top-width: var(--mdc-linear-progress-track-height, .375rem);
|
45deg,
|
||||||
|
var(--pi-color-primary),
|
||||||
|
var(--pi-color-highlighted)
|
||||||
|
)
|
||||||
|
1;
|
||||||
|
border-top-width: var(--mdc-linear-progress-track-height, 0.375rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -126,8 +126,9 @@ html {
|
|||||||
&:not(.pi-slider__range) {
|
&:not(.pi-slider__range) {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
width: calc(
|
width: calc(
|
||||||
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
|
100vw - var(--pi-spacing-xxxx-large) - var(
|
||||||
var(--pi-spacing-xx-large)
|
--pi-spacing-xx-large
|
||||||
|
) - var(--pi-spacing-xx-large)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -137,9 +138,11 @@ html {
|
|||||||
.pi-slider {
|
.pi-slider {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
width: calc(
|
width: calc(
|
||||||
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
|
100vw - var(--pi-spacing-xxxx-large) - var(
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) -
|
--pi-spacing-xx-large
|
||||||
var(--pi-spacing-medium)
|
) - var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(
|
||||||
|
--pi-spacing-medium
|
||||||
|
) - var(--pi-spacing-medium)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
@media screen and (max-width: 77.5rem) {
|
@media screen and (max-width: 77.5rem) {
|
||||||
.tf-v1-popup {
|
.tf-v1-popup {
|
||||||
.tf-v1-close {
|
.tf-v1-close {
|
||||||
transform: translateX(2rem);
|
transform: translateX(2rem);
|
||||||
transform: translateY(-2rem);
|
transform: translateY(-2rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,14 +27,21 @@
|
|||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
&.pi-wrapper__action--position-fixed-mobile {
|
&.pi-wrapper__action--position-fixed-mobile {
|
||||||
left: var(--pi-spacing-#{$side-spacing});
|
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(
|
@mixin fixedActionWrapperMainBottom(
|
||||||
$position: fixed,
|
$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 {
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
@@ -112,8 +119,9 @@ html {
|
|||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
&.pi-wrapper__action--position-fixed-mobile {
|
&.pi-wrapper__action--position-fixed-mobile {
|
||||||
bottom: calc(
|
bottom: calc(
|
||||||
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + var(--pi-height-footer) +
|
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) +
|
||||||
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
|
var(--pi-height-footer) + var(--pi-spacing-x-large) +
|
||||||
|
env(safe-area-inset-bottom)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -130,7 +138,8 @@ html {
|
|||||||
@include fixedActionWrapperMainBottom(
|
@include fixedActionWrapperMainBottom(
|
||||||
unset,
|
unset,
|
||||||
calc(
|
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-layout {
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger).pi-button:not(.pi-button__icon):not(
|
&:not(.pi-close-button):not(.pi-hamburger).pi-button:not(
|
||||||
.pi-button__x-small
|
.pi-button__icon
|
||||||
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not(
|
):not(.pi-button__x-small):not(.pi-button__small):not(
|
||||||
.pi-button__xx-small
|
.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(
|
&:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__xx-small
|
.pi-button__icon--single
|
||||||
) {
|
):not(.pi-button__xx-small) {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
|
||||||
padding-left: var(--pi-spacing-small);
|
padding-left: var(--pi-spacing-small);
|
||||||
padding-right: var(--pi-spacing-small);
|
padding-right: var(--pi-spacing-small);
|
||||||
@@ -169,7 +178,9 @@ html {
|
|||||||
// Only fixed in small devices
|
// Only fixed in small devices
|
||||||
&.pi-wrapper__action--position-fixed-mobile {
|
&.pi-wrapper__action--position-fixed-mobile {
|
||||||
left: 0;
|
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%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -182,7 +193,8 @@ html {
|
|||||||
// Only fixed in small devices
|
// Only fixed in small devices
|
||||||
&.pi-wrapper__action--position-fixed-mobile {
|
&.pi-wrapper__action--position-fixed-mobile {
|
||||||
bottom: calc(
|
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 {
|
&.is-tablet__large {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
calc(
|
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(
|
calc(
|
||||||
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
|
100% - var(--pi-width-navbar-collapsed) - var(
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
|
--pi-spacing-x-large
|
||||||
|
) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -225,7 +239,10 @@ html {
|
|||||||
& > div {
|
& > div {
|
||||||
// Has Not Sticky Note
|
// Has Not Sticky Note
|
||||||
&:not(.has-bottom-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
|
// Sticky Note
|
||||||
&.has-bottom-sticky-note {
|
&.has-bottom-sticky-note {
|
||||||
@@ -246,7 +263,10 @@ html {
|
|||||||
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
|
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-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 {
|
&.aside-is-closed {
|
||||||
@@ -256,8 +276,9 @@ html {
|
|||||||
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
|
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
|
||||||
),
|
),
|
||||||
calc(
|
calc(
|
||||||
90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
|
90% - var(--pi-width-navbar-collapsed) - var(
|
||||||
var(--pi-spacing-xxx-small)
|
--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-width-navbar-expanded) + var(--pi-spacing-x-large) +
|
||||||
var(--pi-spacing-x-large) + 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
|
// Aside is closed
|
||||||
@@ -282,8 +306,10 @@ html {
|
|||||||
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
|
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
|
||||||
),
|
),
|
||||||
calc(
|
calc(
|
||||||
90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
|
90% - var(--pi-width-navbar-expanded) - var(
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem
|
--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-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-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
|
// Aside is closed
|
||||||
@@ -324,7 +353,10 @@ html {
|
|||||||
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
|
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
|
||||||
var(--pi-spacing-x-large) + 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
|
// Aside is closed
|
||||||
|
|||||||
@@ -7,7 +7,10 @@
|
|||||||
& > section {
|
& > section {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
height: calc(
|
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 {
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -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 {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
// NOT Is fullscreen
|
// NOT Is fullscreen
|
||||||
@@ -54,7 +56,9 @@
|
|||||||
}
|
}
|
||||||
// Type document
|
// Type document
|
||||||
&.pi-wrapper__main--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 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
// Shell level
|
// 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 = {
|
export const ShellClass = {
|
||||||
// Deale Landings (Public)
|
// Deale Landings (Public)
|
||||||
@@ -29,7 +30,7 @@ export const height = (height: Height): string => `pi-layout__${height}`;
|
|||||||
export const heights = (
|
export const heights = (
|
||||||
mobileHeight: Height,
|
mobileHeight: Height,
|
||||||
tabletHeight: Height,
|
tabletHeight: Height,
|
||||||
desktopHeight: Height
|
desktopHeight: Height,
|
||||||
): string =>
|
): string =>
|
||||||
`pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`;
|
`pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`;
|
||||||
|
|
||||||
@@ -121,7 +122,8 @@ export const LayoutTypeClass = {
|
|||||||
// Splitted
|
// Splitted
|
||||||
Splitted: 'pi-layout pi-layout__05-splitted',
|
Splitted: 'pi-layout pi-layout__05-splitted',
|
||||||
// SplittedPaywall
|
// 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
|
// Edge to Edge
|
||||||
EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge',
|
EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge',
|
||||||
// List Left
|
// List Left
|
||||||
@@ -141,7 +143,8 @@ export const WebsiteScreenTypeClass = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Wrappers
|
// Wrappers
|
||||||
export const wrapperType = (wrapperClass: string) => `pi-wrapper pi-wrapper__${wrapperClass}`;
|
export const wrapperType = (wrapperClass: string) =>
|
||||||
|
`pi-wrapper pi-wrapper__${wrapperClass}`;
|
||||||
|
|
||||||
export const WrapperTypeClass = {
|
export const WrapperTypeClass = {
|
||||||
Action: wrapperType('action'),
|
Action: wrapperType('action'),
|
||||||
@@ -153,7 +156,8 @@ export const WrapperTypeClass = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
export const componentFamily = (componentClass: string) => `pi-component pi-${componentClass}`;
|
export const componentFamily = (componentClass: string) =>
|
||||||
|
`pi-component pi-${componentClass}`;
|
||||||
|
|
||||||
export const ComponentFamilyClass = {
|
export const ComponentFamilyClass = {
|
||||||
Button: componentFamily('button'),
|
Button: componentFamily('button'),
|
||||||
|
|||||||
@@ -26,7 +26,9 @@
|
|||||||
|
|
||||||
@mixin authenticationLayoutSpacings($spacing, $gap) {
|
@mixin authenticationLayoutSpacings($spacing, $gap) {
|
||||||
.pi-layout__00-authentication {
|
.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 {
|
||||||
.pi-panel-content__top,
|
.pi-panel-content__top,
|
||||||
.pi-panel-content__bottom {
|
.pi-panel-content__bottom {
|
||||||
@@ -88,8 +90,14 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > .pi-panel {
|
& > .pi-panel {
|
||||||
background: linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box,
|
background:
|
||||||
linear-gradient(to right, var(--pi-color-primary-50), var(--pi-color-primary-25)) border-box;
|
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);
|
background-color: rgba(255, 255, 255, 0.66);
|
||||||
animation: gradient 0.5s linear infinite;
|
animation: gradient 0.5s linear infinite;
|
||||||
animation-direction: alternate-reverse;
|
animation-direction: alternate-reverse;
|
||||||
@@ -164,7 +172,11 @@ html {
|
|||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&:not(.pi-layout__00-authentication--auth) {
|
&: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 {
|
&.pi-layout__00-authentication--auth {
|
||||||
@include authenticationLayoutSizes(
|
@include authenticationLayoutSizes(
|
||||||
@@ -272,24 +284,33 @@ html {
|
|||||||
.pi-panel-content__top,
|
.pi-panel-content__top,
|
||||||
.pi-panel-content__bottom {
|
.pi-panel-content__bottom {
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__toggle
|
.mdc-switch
|
||||||
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
|
):not(.pi-button__toggle):not(
|
||||||
|
.pi-button__type--menu-item
|
||||||
|
):not(.pi-button__icon--single):not(
|
||||||
.pi-button__xx-small
|
.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;
|
min-width: 9.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__toggle
|
.mdc-switch
|
||||||
):not(.pi-button__type--menu-item).pi-button:not(.pi-button__icon):not(
|
):not(.pi-button__toggle):not(
|
||||||
|
.pi-button__type--menu-item
|
||||||
|
).pi-button:not(.pi-button__icon):not(
|
||||||
.pi-button__x-small
|
.pi-button__x-small
|
||||||
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__large):not(
|
):not(.pi-button__small):not(.pi-button__large):not(
|
||||||
.pi-button__trimed
|
.pi-button__large
|
||||||
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
|
):not(.pi-button__trimed):not(.pi-button__xx-small):not(
|
||||||
|
.pi-button__trimmed
|
||||||
|
) {
|
||||||
min-width: 11.5rem;
|
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 {
|
&.is-desktop__small {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&:not(.pi-layout__00-authentication--auth) {
|
&: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 {
|
&.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 {
|
&.is-desktop__large {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&:not(.pi-layout__00-authentication--auth) {
|
&: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 {
|
&.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
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,11 +10,15 @@ html {
|
|||||||
.pi-panel-content__top,
|
.pi-panel-content__top,
|
||||||
.pi-panel-content__bottom {
|
.pi-panel-content__bottom {
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__toggle
|
.mdc-switch
|
||||||
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
|
):not(.pi-button__toggle):not(
|
||||||
|
.pi-button__type--menu-item
|
||||||
|
):not(.pi-button__icon--single):not(
|
||||||
.pi-button__xx-small
|
.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;
|
min-width: 13.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
&.pi-layout__00-authentication--user-profile {
|
&.pi-layout__00-authentication--user-profile {
|
||||||
.pi-select {
|
.pi-select {
|
||||||
|
|||||||
@@ -25,11 +25,17 @@
|
|||||||
|
|
||||||
html {
|
html {
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxx-large), x-small);
|
@include authenticationDefaultSpaceLayoutSpacings(
|
||||||
|
var(--pi-spacing-xxx-large),
|
||||||
|
x-small
|
||||||
|
);
|
||||||
}
|
}
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxxx-large), small);
|
@include authenticationDefaultSpaceLayoutSpacings(
|
||||||
|
var(--pi-spacing-xxxx-large),
|
||||||
|
small
|
||||||
|
);
|
||||||
}
|
}
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);
|
@include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);
|
||||||
|
|||||||
@@ -9,11 +9,15 @@ html {
|
|||||||
.pi-panel-content__top,
|
.pi-panel-content__top,
|
||||||
.pi-panel-content__bottom {
|
.pi-panel-content__bottom {
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-button__toggle
|
.mdc-switch
|
||||||
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
|
):not(.pi-button__toggle):not(
|
||||||
|
.pi-button__type--menu-item
|
||||||
|
):not(.pi-button__icon--single):not(
|
||||||
.pi-button__xx-small
|
.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;
|
min-width: 13.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -165,9 +165,9 @@ html {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: calc(100% - 4.6563rem);
|
height: calc(100% - 4.6563rem);
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(
|
||||||
.pi-hamburger
|
.pi-close-button
|
||||||
):not(.pi-button__xx-small) {
|
):not(.pi-hamburger):not(.pi-button__xx-small) {
|
||||||
height: 2.4rem;
|
height: 2.4rem;
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
padding-left: var(--pi-spacing-medium);
|
padding-left: var(--pi-spacing-medium);
|
||||||
|
|||||||
@@ -38,8 +38,16 @@ html {
|
|||||||
// X Large device
|
// X Large device
|
||||||
@media screen and (min-width: 140rem) {
|
@media screen and (min-width: 140rem) {
|
||||||
@include dashboardLayoutWidth(
|
@include dashboardLayoutWidth(
|
||||||
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
|
calc(
|
||||||
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
|
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
|
unset
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,7 +33,10 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: calc(
|
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 {
|
.pi-note {
|
||||||
width: $width;
|
width: $width;
|
||||||
@@ -79,7 +82,9 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
|
|||||||
|
|
||||||
& > *:nth-child(3) {
|
& > *: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 {
|
.pi-panel-content {
|
||||||
// Center
|
// Center
|
||||||
@@ -125,7 +130,9 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
|
|||||||
.pi-chip__large {
|
.pi-chip__large {
|
||||||
&:not(.pi-chip__single-icon) {
|
&:not(.pi-chip__single-icon) {
|
||||||
height: calc(
|
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%;
|
max-width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -238,7 +245,10 @@ $pi-seller-dashboard-overviews-height: 7.5rem; // 120px
|
|||||||
// Only scroll for desktop M & L
|
// Only scroll for desktop M & L
|
||||||
@media screen and (min-width: 90rem) {
|
@media screen and (min-width: 90rem) {
|
||||||
max-height: calc(
|
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));
|
max-width: calc(100% - var(--pi-spacing-xxx-small));
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
@@ -1,8 +1,13 @@
|
|||||||
@mixin fullWidthLayoutWidthLargeDevice(
|
@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-closed: var(--pi-width-container-s),
|
||||||
$max-width-open:
|
$max-width-open: calc(
|
||||||
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
|
100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(
|
||||||
|
--pi-spacing-x-large
|
||||||
|
)
|
||||||
|
)
|
||||||
) {
|
) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
@@ -90,7 +95,8 @@ html {
|
|||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.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
|
// Desktop M
|
||||||
&.is-desktop__medium {
|
&.is-desktop__medium {
|
||||||
@include fullWidthLayoutWidthLargeDevice(
|
@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),
|
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
|
// Desktop L
|
||||||
|
|||||||
@@ -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-container-layout {
|
||||||
& > .pi-layout__06-edge-to-edge {
|
& > .pi-layout__06-edge-to-edge {
|
||||||
& > .pi-wrapper__header {
|
& > .pi-wrapper__header {
|
||||||
@@ -96,7 +98,9 @@ html {
|
|||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
@include layoutVerticallyCenteredSpacings(var(--pi-public-height-header-desktop));
|
@include layoutVerticallyCenteredSpacings(
|
||||||
|
var(--pi-public-height-header-desktop)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,4 +5,3 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -78,8 +78,10 @@ html {
|
|||||||
// Right
|
// Right
|
||||||
&.pi-main-wrapper-content__right {
|
&.pi-main-wrapper-content__right {
|
||||||
height: calc(
|
height: calc(
|
||||||
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large) -
|
100vh - var(--pi-spacing-x-large) - var(
|
||||||
var(--pi-height-footer) - 8rem
|
--pi-spacing-x-large
|
||||||
|
) - var(--pi-height-footer) -
|
||||||
|
8rem
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// Left
|
// Left
|
||||||
@@ -105,9 +107,9 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pi-button {
|
.pi-button {
|
||||||
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
|
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
|
||||||
.pi-button__large
|
.pi-button__small
|
||||||
) {
|
):not(.pi-button__large) {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -130,16 +132,18 @@ html {
|
|||||||
}
|
}
|
||||||
&.pi-main-wrapper-content__right {
|
&.pi-main-wrapper-content__right {
|
||||||
min-height: calc(
|
min-height: calc(
|
||||||
100vh - var(--pi-spacing-xx-large) - var(--pi-spacing-xx-large) -
|
100vh - var(--pi-spacing-xx-large) - var(
|
||||||
var(--pi-height-footer) - 20rem
|
--pi-spacing-xx-large
|
||||||
|
) - var(--pi-height-footer) -
|
||||||
|
20rem
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-button {
|
.pi-button {
|
||||||
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
|
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
|
||||||
.pi-button__large
|
.pi-button__small
|
||||||
) {
|
):not(.pi-button__large) {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
|
||||||
min-width: 11rem;
|
min-width: 11rem;
|
||||||
}
|
}
|
||||||
@@ -346,7 +350,11 @@ html {
|
|||||||
padding: var(--pi-spacing-xxx-large);
|
padding: var(--pi-spacing-xxx-large);
|
||||||
gap: var(--pi-spacing-xx-large);
|
gap: var(--pi-spacing-xx-large);
|
||||||
.pi-main-wrapper-content {
|
.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
|
// Left
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
@@ -372,7 +380,11 @@ html {
|
|||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
// Left
|
// Left
|
||||||
&.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 {
|
.mat-mdc-radio-group {
|
||||||
max-width: 66.66%;
|
max-width: 66.66%;
|
||||||
}
|
}
|
||||||
@@ -395,7 +407,11 @@ html {
|
|||||||
gap: var(--pi-spacing-xxxx-large);
|
gap: var(--pi-spacing-xxxx-large);
|
||||||
|
|
||||||
.pi-main-wrapper-content {
|
.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
|
// Left
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
|
|||||||
@@ -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 {
|
.pi-container-layout {
|
||||||
padding-bottom: var(--pi-spacing-xxxx-large);
|
padding-bottom: var(--pi-spacing-xxxx-large);
|
||||||
& > .pi-layout__06-edge-to-edge {
|
& > .pi-layout__06-edge-to-edge {
|
||||||
|
|||||||
@@ -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 {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
@@ -115,8 +117,8 @@ html {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
right: var(--pi-spacing-x-large);
|
right: var(--pi-spacing-x-large);
|
||||||
bottom: calc(
|
bottom: 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-small)
|
var(--pi-spacing-x-large) + var(--pi-spacing-x-small)
|
||||||
);
|
);
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
@@ -176,8 +178,9 @@ html {
|
|||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include listLayoutHeight(
|
@include listLayoutHeight(
|
||||||
calc(
|
calc(
|
||||||
100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) -
|
100vh - var(--pi-height-header-tablet) - var(
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
|
--pi-spacing-x-large
|
||||||
|
) - var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
@include wrappersWidth(
|
@include wrappersWidth(
|
||||||
@@ -193,8 +196,9 @@ html {
|
|||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include listLayoutHeight(
|
@include listLayoutHeight(
|
||||||
calc(
|
calc(
|
||||||
100vh - var(--pi-height-header-desktop) - var(--pi-spacing-x-large) -
|
100vh - var(--pi-height-header-desktop) - var(
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-medium)
|
--pi-spacing-x-large
|
||||||
|
) - var(--pi-spacing-x-large) - var(--pi-spacing-medium)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
// Desktop S
|
// Desktop S
|
||||||
@@ -209,7 +213,12 @@ html {
|
|||||||
}
|
}
|
||||||
// Desktop M
|
// Desktop M
|
||||||
&.is-desktop__medium {
|
&.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)));
|
@include paginatorWidth(calc(100% - var(--pi-spacing-x-large)));
|
||||||
}
|
}
|
||||||
// Desktop L
|
// Desktop L
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
@mixin layoutHeight(
|
@mixin layoutHeight(
|
||||||
$height:
|
$height: calc(
|
||||||
calc(
|
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(
|
||||||
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) -
|
--pi-spacing-x-large
|
||||||
var(--pi-spacing-x-large)
|
) - var(--pi-spacing-x-large)
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
@@ -32,8 +32,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Default scroll
|
// 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-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
@@ -82,7 +83,9 @@ html {
|
|||||||
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
|
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
|
||||||
.pi-layout__05-splitted
|
.pi-layout__05-splitted
|
||||||
):not(.pi-layout__08-form) {
|
):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 {
|
&.pi-layout__main {
|
||||||
padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer));
|
padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer));
|
||||||
@@ -99,7 +102,10 @@ html {
|
|||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
.has-bottom-sticky-note {
|
.has-bottom-sticky-note {
|
||||||
@include layoutHeight(
|
@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 {
|
||||||
&.pi-layout__main,
|
&.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(
|
@include layoutWidth(
|
||||||
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
|
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
|
||||||
var(--pi-height-header-tablet) auto 0
|
var(--pi-height-header-tablet) auto 0
|
||||||
@@ -126,7 +134,9 @@ html {
|
|||||||
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
|
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
|
||||||
.pi-layout__05-splitted
|
.pi-layout__05-splitted
|
||||||
):not(.pi-layout__08-form) {
|
):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 {
|
&.pi-layout__main {
|
||||||
padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer));
|
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);
|
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -195,7 +207,9 @@ html {
|
|||||||
}
|
}
|
||||||
@include layoutHeight(
|
@include layoutHeight(
|
||||||
calc(
|
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);
|
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
|
||||||
|
|||||||
@@ -9,9 +9,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__icon--single
|
.pi-button__toggle
|
||||||
):not(.pi-button__xx-small):not(.pi-button__trimmed):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;
|
min-width: unset;
|
||||||
padding-left: unset;
|
padding-left: unset;
|
||||||
padding-right: unset;
|
padding-right: unset;
|
||||||
@@ -19,9 +21,11 @@
|
|||||||
}
|
}
|
||||||
.pi-button__w100 {
|
.pi-button__w100 {
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__icon--single
|
.pi-button__toggle
|
||||||
):not(.pi-button__xx-small):not(.pi-button__trimmed):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%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -81,7 +85,9 @@
|
|||||||
// Aside is closed
|
// Aside is closed
|
||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
.pi-saas-aside {
|
.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
|
// Aside is closable
|
||||||
@@ -151,7 +157,9 @@
|
|||||||
}
|
}
|
||||||
& > *:nth-child(3) {
|
& > *:nth-child(3) {
|
||||||
flex-shrink: 0;
|
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;
|
margin: 0 auto;
|
||||||
.pi-icon-button {
|
.pi-icon-button {
|
||||||
margin-bottom: var(--pi-spacing-x-large);
|
margin-bottom: var(--pi-spacing-x-large);
|
||||||
@@ -217,7 +225,9 @@ html {
|
|||||||
&:not(.is-fullscreen) {
|
&:not(.is-fullscreen) {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
top: 0;
|
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%;
|
width: 100%;
|
||||||
& > .pi-close-button {
|
& > .pi-close-button {
|
||||||
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
|
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
|
||||||
@@ -225,8 +235,11 @@ html {
|
|||||||
|
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
height: calc(
|
height: calc(
|
||||||
100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
|
100% - env(safe-area-inset-top) - env(
|
||||||
var(--pi-height-header-aside) - var(--pi-height-footer-aside)
|
safe-area-inset-bottom
|
||||||
|
) - var(--pi-height-header-aside) - var(
|
||||||
|
--pi-height-footer-aside
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -260,7 +273,9 @@ html {
|
|||||||
|
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(3) {
|
& > *: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);
|
margin: 0 auto var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
@@ -292,7 +307,9 @@ html {
|
|||||||
&:not(.is-fullscreen) {
|
&:not(.is-fullscreen) {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
top: var(--pi-spacing-x-large);
|
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);
|
width: var(--pi-width-aside);
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
box-shadow: var(--pi-box-shadow-panel-double);
|
box-shadow: var(--pi-box-shadow-panel-double);
|
||||||
@@ -302,14 +319,18 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > .pi-close-button {
|
& > .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
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
transform: translateX(
|
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);
|
padding: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
& > *:nth-child(3) {
|
& > *: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;
|
margin: 0 auto;
|
||||||
padding: var(--pi-spacing-x-large) 0 0;
|
padding: var(--pi-spacing-x-large) 0 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -154,18 +154,24 @@ html {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
button {
|
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);
|
min-width: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
|
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
|
||||||
padding: var(--pi-spacing-xxxx-small) unset;
|
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);
|
background-color: var(--pi-color-accent-75);
|
||||||
transition: all 0.16s ease-in;
|
transition: all 0.16s ease-in;
|
||||||
border: unset;
|
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);
|
border-radius: var(--pi-border-radius-medium);
|
||||||
-webkit-border-radius: var(--pi-border-radius-medium);
|
-webkit-border-radius: var(--pi-border-radius-medium);
|
||||||
-moz-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 {
|
&.pi-saas-header-content__right {
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
|
&: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 {
|
&.is-tablet__small {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
left: var(--pi-spacing-x-large);
|
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
|
// Tablet L
|
||||||
@@ -336,7 +345,9 @@ html {
|
|||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
.pi-saas-header {
|
.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
|
// Aside is closed
|
||||||
|
|||||||
@@ -49,7 +49,9 @@ html {
|
|||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
& > section {
|
& > 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
|
||||||
&:not(.is-fullscreen) {
|
&:not(.is-fullscreen) {
|
||||||
@@ -59,8 +61,9 @@ html {
|
|||||||
var(--pi-spacing-x-large)
|
var(--pi-spacing-x-large)
|
||||||
);
|
);
|
||||||
width: calc(
|
width: calc(
|
||||||
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
|
100% - var(--pi-width-navbar-collapsed) - var(
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
|
--pi-spacing-x-large
|
||||||
|
) - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -100,7 +103,9 @@ html {
|
|||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
& > .pi-headline {
|
& > .pi-headline {
|
||||||
transform: var(--pi-animation);
|
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) {
|
&:not(.is-fullscreen) {
|
||||||
// Layout container
|
// Layout container
|
||||||
& > section {
|
& > 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);
|
transition: var(--pi-animation);
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
@@ -130,8 +137,9 @@ html {
|
|||||||
);
|
);
|
||||||
|
|
||||||
width: calc(
|
width: calc(
|
||||||
100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
|
100% - var(--pi-width-navbar-expanded) - var(
|
||||||
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
--pi-spacing-x-large
|
||||||
|
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -143,8 +151,9 @@ html {
|
|||||||
var(--pi-spacing-x-large)
|
var(--pi-spacing-x-large)
|
||||||
);
|
);
|
||||||
width: calc(
|
width: calc(
|
||||||
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
|
100% - var(--pi-width-navbar-collapsed) - var(
|
||||||
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
--pi-spacing-x-large
|
||||||
|
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,7 +23,9 @@
|
|||||||
.pi-menu-entry {
|
.pi-menu-entry {
|
||||||
&.pi-menu-entry__context--parent-menu {
|
&.pi-menu-entry__context--parent-menu {
|
||||||
height: var(--pi-size-menu-item-expanded);
|
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);
|
margin-left: var(--pi-spacing-large);
|
||||||
padding: 0 var(--pi-spacing-large);
|
padding: 0 var(--pi-spacing-large);
|
||||||
border-radius: var(--pi-border-radius-medium);
|
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-saas-navbar {
|
||||||
.pi-menu {
|
.pi-menu {
|
||||||
.pi-menu-entry {
|
.pi-menu-entry {
|
||||||
@@ -96,7 +102,9 @@
|
|||||||
&.is-selected {
|
&.is-selected {
|
||||||
.pi-menu-entry {
|
.pi-menu-entry {
|
||||||
&:not(.is-disabled) {
|
&: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);
|
background-color: var(--pi-color-primary-25);
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
@@ -276,8 +284,12 @@
|
|||||||
&.pi-menu-entry__context--children-menu {
|
&.pi-menu-entry__context--children-menu {
|
||||||
padding-bottom: var(--pi-spacing-xxx-small);
|
padding-bottom: var(--pi-spacing-xxx-small);
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
margin-left: calc(var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small));
|
margin-left: calc(
|
||||||
margin-right: calc(var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small));
|
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) {
|
&:nth-of-type(1) {
|
||||||
border-color: var(--pi-color-grey-100);
|
border-color: var(--pi-color-grey-100);
|
||||||
@@ -333,7 +345,8 @@
|
|||||||
&.pi-menu__children {
|
&.pi-menu__children {
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: calc(
|
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;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
@@ -441,8 +454,15 @@ html {
|
|||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
@include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed));
|
@include parentMenuEntryAppearance(
|
||||||
@include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2);
|
center,
|
||||||
|
var(--pi-size-menu-item-collapsed)
|
||||||
|
);
|
||||||
|
@include parentMenuItemCollapsed(
|
||||||
|
var(--pi-size-menu-item-collapsed),
|
||||||
|
large,
|
||||||
|
1.2
|
||||||
|
);
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
// Tablet L
|
// Tablet L
|
||||||
.pi-menu {
|
.pi-menu {
|
||||||
@@ -459,9 +479,12 @@ html {
|
|||||||
.pi-menu__children {
|
.pi-menu__children {
|
||||||
@include childrenMenuPosition(
|
@include childrenMenuPosition(
|
||||||
calc(
|
calc(
|
||||||
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
|
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-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 {
|
&.pi-menu__parent {
|
||||||
& > nav {
|
& > nav {
|
||||||
width: calc(
|
width: calc(
|
||||||
var(--pi-width-navbar-expanded) - var(--pi-spacing-xxxx-large) -
|
var(--pi-width-navbar-expanded) - var(
|
||||||
var(--pi-spacing-xxxx-small)
|
--pi-spacing-xxxx-large
|
||||||
|
) - var(--pi-spacing-xxxx-small)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
.pi-menu-event-item {
|
.pi-menu-event-item {
|
||||||
@@ -563,7 +587,10 @@ html {
|
|||||||
}
|
}
|
||||||
// Expanded
|
// Expanded
|
||||||
&.navbar-is-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
|
// Navbar
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
.pi-menu {
|
.pi-menu {
|
||||||
@@ -574,7 +601,10 @@ html {
|
|||||||
&.has-children {
|
&.has-children {
|
||||||
.pi-menu__children {
|
.pi-menu__children {
|
||||||
@include childrenMenuPosition(
|
@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
|
// Collapsed
|
||||||
&.navbar-is-collapsed {
|
&.navbar-is-collapsed {
|
||||||
@include parentMenuEntryAppearance(center, var(--pi-size-menu-item-collapsed));
|
@include parentMenuEntryAppearance(
|
||||||
@include parentMenuItemCollapsed(var(--pi-size-menu-item-collapsed), large, 1.2);
|
center,
|
||||||
|
var(--pi-size-menu-item-collapsed)
|
||||||
|
);
|
||||||
|
@include parentMenuItemCollapsed(
|
||||||
|
var(--pi-size-menu-item-collapsed),
|
||||||
|
large,
|
||||||
|
1.2
|
||||||
|
);
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
.pi-menu {
|
.pi-menu {
|
||||||
& > nav {
|
& > nav {
|
||||||
@@ -597,9 +634,10 @@ html {
|
|||||||
.pi-menu__children {
|
.pi-menu__children {
|
||||||
@include childrenMenuPosition(
|
@include childrenMenuPosition(
|
||||||
calc(
|
calc(
|
||||||
var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
|
var(--pi-width-navbar-collapsed) +
|
||||||
var(--pi-spacing-xx-large) + var(--pi-spacing-large) +
|
var(--pi-spacing-xx-large) +
|
||||||
var(--pi-spacing-x-large)
|
var(--pi-spacing-xx-large) +
|
||||||
|
var(--pi-spacing-large) + var(--pi-spacing-x-large)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -87,7 +87,9 @@ html {
|
|||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
left: var(--pi-spacing-medium);
|
left: var(--pi-spacing-medium);
|
||||||
bottom: 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 {
|
.pi-saas-navbar {
|
||||||
left: var(--pi-spacing-x-large);
|
left: var(--pi-spacing-x-large);
|
||||||
bottom: 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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
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 {
|
.pi-chip {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,10 @@
|
|||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
&:not(.pi-layout__02a-full-width--auto) {
|
&:not(.pi-layout__02a-full-width--auto) {
|
||||||
& > *:nth-child(1) {
|
& > *: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;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
& > *:nth-child(n + 1):is(h1, h2, h3, h4, h5, p, i, figcaption, small) {
|
& > *:nth-child(n + 1):is(h1, h2, h3, h4, h5, p, i, figcaption, small) {
|
||||||
@@ -13,7 +16,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@mixin layoutBasicPages(
|
@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)
|
$padding-top-2: var(--pi-spacing-xxx-large)
|
||||||
) {
|
) {
|
||||||
.pi-shell__deale-website {
|
.pi-shell__deale-website {
|
||||||
@@ -44,7 +49,9 @@ html {
|
|||||||
}
|
}
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
@include layoutBasicPages(
|
@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)
|
var(--pi-spacing-xxxx-large)
|
||||||
);
|
);
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
@@ -64,7 +71,9 @@ html {
|
|||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include layoutBasicPages(
|
@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)
|
var(--pi-spacing-xxxx-large)
|
||||||
);
|
);
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
|
|||||||
@@ -42,7 +42,9 @@ html {
|
|||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
// Desktop S & M
|
// Desktop S & M
|
||||||
&:not(.is-desktop__large) {
|
&:not(.is-desktop__large) {
|
||||||
@include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container));
|
@include edgeToEdgeLayoutCarouselBehavior(
|
||||||
|
var(--pi-public-width-container)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
// Desktop M
|
// Desktop M
|
||||||
&.is-desktop__medium {
|
&.is-desktop__medium {
|
||||||
@@ -50,7 +52,9 @@ html {
|
|||||||
}
|
}
|
||||||
// Desktop L
|
// Desktop L
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
@include edgeToEdgeLayoutCarouselBehavior(var(--pi-public-width-container-l));
|
@include edgeToEdgeLayoutCarouselBehavior(
|
||||||
|
var(--pi-public-width-container-l)
|
||||||
|
);
|
||||||
@include websiteHomeUserSpacings(66.66%);
|
@include websiteHomeUserSpacings(66.66%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -58,12 +58,16 @@ html {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > section {
|
& > 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 {
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
max-height: calc(
|
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
|
7.35rem
|
||||||
);
|
);
|
||||||
.pi-data-grid__mode--grid {
|
.pi-data-grid__mode--grid {
|
||||||
@@ -89,12 +93,16 @@ html {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > section {
|
& > 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 {
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
max-height: calc(
|
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
|
7.35rem
|
||||||
);
|
);
|
||||||
& > section {
|
& > section {
|
||||||
@@ -146,12 +154,16 @@ html {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > section {
|
& > 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 {
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
max-height: calc(
|
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
|
7.35rem
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
@mixin containerSpacings(
|
@mixin containerSpacings(
|
||||||
$padding-top: calc(var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)),
|
$padding-top: calc(
|
||||||
$default-vertical-padding: calc(var(--pi-spacing-xxx-large) + var(--pi-spacing-xxx-large)),
|
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)
|
$default-vertical-margin: var(--pi-spacing-xx-large)
|
||||||
) {
|
) {
|
||||||
.pi-container-layout {
|
.pi-container-layout {
|
||||||
@@ -42,8 +46,8 @@ html {
|
|||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
@include containerSpacings(
|
@include containerSpacings(
|
||||||
calc(
|
calc(
|
||||||
var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large) +
|
var(--pi-public-height-header-desktop) +
|
||||||
var(--pi-spacing-x-large)
|
var(--pi-spacing-xxxx-large) + var(--pi-spacing-x-large)
|
||||||
),
|
),
|
||||||
var(--pi-spacing-xxxx-large),
|
var(--pi-spacing-xxxx-large),
|
||||||
var(--pi-spacing-xx-large)
|
var(--pi-spacing-xx-large)
|
||||||
|
|||||||
@@ -4,7 +4,9 @@
|
|||||||
& > header {
|
& > header {
|
||||||
display: block;
|
display: block;
|
||||||
width: -webkit-fill-available;
|
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(
|
@mixin thankYouScreenMain(
|
||||||
$cols: 4,
|
$cols: 4,
|
||||||
$rows: 6,
|
$rows: 6,
|
||||||
$areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .' '. . item2 item2'
|
$areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .'
|
||||||
'. . item2 item2',
|
'. . item2 item2' '. . item2 item2',
|
||||||
$min-height: 50
|
$min-height: 50
|
||||||
) {
|
) {
|
||||||
.pi-website-screen {
|
.pi-website-screen {
|
||||||
@@ -72,8 +74,9 @@ html {
|
|||||||
@include thankYouScreenMain(
|
@include thankYouScreenMain(
|
||||||
6,
|
6,
|
||||||
6,
|
6,
|
||||||
'. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .' '. item1 item1 . item2 item2'
|
'. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .'
|
||||||
'. item1 item1 . item2 item2' '. . . . . .',
|
'. item1 item1 . item2 item2' '. item1 item1 . item2 item2'
|
||||||
|
'. . . . . .',
|
||||||
50
|
50
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -91,7 +94,8 @@ html {
|
|||||||
12,
|
12,
|
||||||
6,
|
6,
|
||||||
'. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .'
|
'. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .'
|
||||||
'. . item1 item1 item1 . . . . . . .' '. . item1 item1 item1 . . item2 item2 item2 . .'
|
'. . item1 item1 item1 . . . . . . .'
|
||||||
|
'. . item1 item1 item1 . . item2 item2 item2 . .'
|
||||||
'. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .',
|
'. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .',
|
||||||
50
|
50
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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 {
|
.pi-website-footer-content__top-left {
|
||||||
flex-direction: $flex-direction;
|
flex-direction: $flex-direction;
|
||||||
width: $width;
|
width: $width;
|
||||||
|
|||||||
@@ -110,10 +110,18 @@
|
|||||||
rgba($color: white, $alpha: 1)
|
rgba($color: white, $alpha: 1)
|
||||||
)
|
)
|
||||||
padding-box,
|
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
|
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
|
// Investor
|
||||||
@@ -126,10 +134,18 @@
|
|||||||
rgba($color: white, $alpha: 1)
|
rgba($color: white, $alpha: 1)
|
||||||
)
|
)
|
||||||
padding-box,
|
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
|
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
|
// Advisor
|
||||||
@@ -202,12 +218,23 @@
|
|||||||
@include parentMenuItemColorLargeDevice(
|
@include parentMenuItemColorLargeDevice(
|
||||||
var(--pi-color-highlighted),
|
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,
|
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
|
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 {
|
.pi-button__action {
|
||||||
box-shadow: 0 0 0 0 rgba($color: #0d2a6b, $alpha: 0.66);
|
box-shadow: 0 0 0 0 rgba($color: #0d2a6b, $alpha: 0.66);
|
||||||
& > span {
|
& > 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 {
|
& > span {
|
||||||
background-color: var(--pi-color-highlighted);
|
background-color: var(--pi-color-highlighted);
|
||||||
}
|
}
|
||||||
@@ -301,7 +332,11 @@
|
|||||||
)
|
)
|
||||||
border-box
|
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
|
// Investor
|
||||||
@@ -321,7 +356,11 @@
|
|||||||
)
|
)
|
||||||
border-box
|
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
|
// Advisor
|
||||||
@@ -394,12 +433,23 @@
|
|||||||
@include parentMenuItemColorLargeDevice(
|
@include parentMenuItemColorLargeDevice(
|
||||||
var(--pi-color-highlighted),
|
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,
|
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
|
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)
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -358,7 +358,8 @@ html {
|
|||||||
// Child menu
|
// Child menu
|
||||||
& > div {
|
& > div {
|
||||||
padding: var(--pi-spacing-medium);
|
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
|
// Child Menu items
|
||||||
& > div {
|
& > div {
|
||||||
& > span {
|
& > span {
|
||||||
@@ -376,7 +377,8 @@ html {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large)
|
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large)
|
||||||
var(--pi-spacing-medium);
|
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
|
// Aside Menu items
|
||||||
& > div {
|
& > div {
|
||||||
& > span {
|
& > span {
|
||||||
@@ -398,18 +400,33 @@ html {
|
|||||||
& > .pi-menu-event-item {
|
& > .pi-menu-event-item {
|
||||||
// Company
|
// Company
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
@include largeDeviceChildMenu(-18.75rem, var(--pi-color-primary-25));
|
@include largeDeviceChildMenu(
|
||||||
@include largeDeviceChildMenuItemColor(var(--pi-color-primary-25));
|
-18.75rem,
|
||||||
|
var(--pi-color-primary-25)
|
||||||
|
);
|
||||||
|
@include largeDeviceChildMenuItemColor(
|
||||||
|
var(--pi-color-primary-25)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
// Investor
|
// Investor
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
@include largeDeviceChildMenu(-14.125rem, var(--pi-color-accent-25));
|
@include largeDeviceChildMenu(
|
||||||
@include largeDeviceChildMenuItemColor(var(--pi-color-accent-25));
|
-14.125rem,
|
||||||
|
var(--pi-color-accent-25)
|
||||||
|
);
|
||||||
|
@include largeDeviceChildMenuItemColor(
|
||||||
|
var(--pi-color-accent-25)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
// Advisor
|
// Advisor
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
@include largeDeviceChildMenu(-14.625rem, var(--pi-color-highlighted-25));
|
@include largeDeviceChildMenu(
|
||||||
@include largeDeviceChildMenuItemColor(var(--pi-color-highlighted-25));
|
-14.625rem,
|
||||||
|
var(--pi-color-highlighted-25)
|
||||||
|
);
|
||||||
|
@include largeDeviceChildMenuItemColor(
|
||||||
|
var(--pi-color-highlighted-25)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -448,7 +465,9 @@ html {
|
|||||||
// Advisor Pricing
|
// Advisor Pricing
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
color: var(--pi-color-highlighted);
|
color: var(--pi-color-highlighted);
|
||||||
background-color: var(--pi-color-highlighted-25);
|
background-color: var(
|
||||||
|
--pi-color-highlighted-25
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -108,8 +108,12 @@
|
|||||||
gap: var(--pi-spacing-xxxx-small);
|
gap: var(--pi-spacing-xxxx-small);
|
||||||
}
|
}
|
||||||
.pi-website-topbar-content {
|
.pi-website-topbar-content {
|
||||||
padding-left: calc(var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small));
|
padding-left: calc(
|
||||||
padding-right: calc(var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small));
|
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)
|
// Left (=== top)
|
||||||
&.pi-website-topbar-content__left {
|
&.pi-website-topbar-content__left {
|
||||||
padding-top: var(--pi-spacing-large);
|
padding-top: var(--pi-spacing-large);
|
||||||
@@ -210,7 +214,10 @@ html {
|
|||||||
// Is Closed
|
// Is Closed
|
||||||
&:not(.is-menu-open) {
|
&:not(.is-menu-open) {
|
||||||
@include logoSize(7.5rem);
|
@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
|
// Is Open
|
||||||
@@ -227,7 +234,10 @@ html {
|
|||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.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);
|
@include logoSize(8.4375rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -248,9 +258,9 @@ html {
|
|||||||
|
|
||||||
// Override right content buttons
|
// Override right content buttons
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__toggle
|
||||||
).pi-color__white {
|
):not(.pi-button__type--menu-item).pi-color__white {
|
||||||
border-color: var(--pi-color-primary-100);
|
border-color: var(--pi-color-primary-100);
|
||||||
background-color: rgba(255, 255, 255, 0.7);
|
background-color: rgba(255, 255, 255, 0.7);
|
||||||
background-image: unset;
|
background-image: unset;
|
||||||
|
|||||||
@@ -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-shell__deale-website {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Max width
|
// Max width
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
// Types
|
// 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 =
|
export type grid =
|
||||||
| 'quarter'
|
| 'quarter'
|
||||||
| 'third'
|
| 'third'
|
||||||
@@ -27,9 +33,11 @@ export type borderType = 'top' | 'bottom' | 'middle';
|
|||||||
export type borderRadius = 'small' | 'medium' | 'large';
|
export type borderRadius = 'small' | 'medium' | 'large';
|
||||||
|
|
||||||
export type display = 'inline' | 'flex' | 'grid';
|
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';
|
export type itemsWidth = 'quarter' | 'third' | 'half' | 'full';
|
||||||
// Fonts
|
// Fonts
|
||||||
export type fontSize =
|
export type fontSize =
|
||||||
|
|||||||
@@ -42,10 +42,16 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<ng-container
|
<ng-container
|
||||||
[ngTemplateOutlet]="item?.customHeader?.templateRef || defaultHeader"
|
[ngTemplateOutlet]="item?.customHeader()?.templateRef || defaultHeader"
|
||||||
[ngTemplateOutletContext]="{ $implicit: item, index: i, isExpanded: isItemExpanded(i) }"
|
[ngTemplateOutletContext]="{
|
||||||
|
$implicit: item,
|
||||||
|
index: i,
|
||||||
|
isExpanded: isItemExpanded(i),
|
||||||
|
}"
|
||||||
></ng-container>
|
></ng-container>
|
||||||
<aside class="pi-accordion-item-header-content pi-accordion-item-header-content__right">
|
<aside
|
||||||
|
class="pi-accordion-item-header-content pi-accordion-item-header-content__right"
|
||||||
|
>
|
||||||
<pi-chip-status
|
<pi-chip-status
|
||||||
*ngIf="item.status()"
|
*ngIf="item.status()"
|
||||||
[status]="item.status()"
|
[status]="item.status()"
|
||||||
@@ -82,14 +88,22 @@
|
|||||||
class="pi-accordion-item-content pi-accordion-item-content__summary"
|
class="pi-accordion-item-content pi-accordion-item-content__summary"
|
||||||
>
|
>
|
||||||
<ng-container
|
<ng-container
|
||||||
[ngTemplateOutlet]="item?.summaryContent?.templateRef"
|
[ngTemplateOutlet]="item?.summaryContent()?.templateRef"
|
||||||
[ngTemplateOutletContext]="{ $implicit: item, index: i, isExpanded: isItemExpanded(i) }"
|
[ngTemplateOutletContext]="{
|
||||||
|
$implicit: item,
|
||||||
|
index: i,
|
||||||
|
isExpanded: isItemExpanded(i),
|
||||||
|
}"
|
||||||
></ng-container>
|
></ng-container>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- MAIN -->
|
<!-- MAIN -->
|
||||||
<main class="pi-accordion-item-content pi-accordion-item-content__expandable">
|
<main
|
||||||
<ng-container *ngTemplateOutlet="item?.content?.templateRef"></ng-container>
|
class="pi-accordion-item-content pi-accordion-item-content__expandable"
|
||||||
|
>
|
||||||
|
<ng-container
|
||||||
|
*ngTemplateOutlet="item?.content()?.templateRef"
|
||||||
|
></ng-container>
|
||||||
</main>
|
</main>
|
||||||
</section>
|
</section>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
@@ -121,8 +135,14 @@
|
|||||||
(click)="toggleState(item, i)"
|
(click)="toggleState(item, i)"
|
||||||
>
|
>
|
||||||
<ng-container
|
<ng-container
|
||||||
[ngTemplateOutlet]="item?.customHeader?.templateRef || defaultHeader"
|
[ngTemplateOutlet]="
|
||||||
[ngTemplateOutletContext]="{ $implicit: item, index: i, isExpanded: isItemExpanded(i) }"
|
item?.customHeader()?.templateRef || defaultHeader
|
||||||
|
"
|
||||||
|
[ngTemplateOutletContext]="{
|
||||||
|
$implicit: item,
|
||||||
|
index: i,
|
||||||
|
isExpanded: isItemExpanded(i),
|
||||||
|
}"
|
||||||
></ng-container>
|
></ng-container>
|
||||||
<aside *ngIf="hasChevron()">
|
<aside *ngIf="hasChevron()">
|
||||||
<pi-chip-status
|
<pi-chip-status
|
||||||
@@ -150,7 +170,9 @@
|
|||||||
'pi-accordion-item-content pi-accordion-item-content__expandable'
|
'pi-accordion-item-content pi-accordion-item-content__expandable'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<ng-container *ngTemplateOutlet="item?.content?.templateRef"></ng-container>
|
<ng-container
|
||||||
|
*ngTemplateOutlet="item?.content()?.templateRef"
|
||||||
|
></ng-container>
|
||||||
</main>
|
</main>
|
||||||
</section>
|
</section>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
HostBinding,
|
HostBinding,
|
||||||
input,
|
input,
|
||||||
model,
|
model,
|
||||||
contentChildren
|
contentChildren,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { padding, styleType, textColor } from '../../../styles';
|
import { padding, styleType, textColor } from '../../../styles';
|
||||||
import { PiAccordionItemDirective } from '../directives/accordion-content.directive';
|
import { PiAccordionItemDirective } from '../directives/accordion-content.directive';
|
||||||
@@ -17,21 +17,21 @@ import { PiIconComponent } from '../../icon/icon/icon.component';
|
|||||||
import { TranslatePipe } from '@ngx-translate/core';
|
import { TranslatePipe } from '@ngx-translate/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-accordion',
|
selector: 'pi-accordion',
|
||||||
templateUrl: './accordion.component.html',
|
templateUrl: './accordion.component.html',
|
||||||
styleUrls: ['../styles/accordion.component.scss'],
|
styleUrls: ['../styles/accordion.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [
|
imports: [
|
||||||
NgIf,
|
NgIf,
|
||||||
NgFor,
|
NgFor,
|
||||||
PiDynamicColorDirective,
|
PiDynamicColorDirective,
|
||||||
PiTextViewerComponent,
|
PiTextViewerComponent,
|
||||||
NgTemplateOutlet,
|
NgTemplateOutlet,
|
||||||
PiChipStatusComponent,
|
PiChipStatusComponent,
|
||||||
PiIconButtonComponent,
|
PiIconButtonComponent,
|
||||||
PiIconComponent,
|
PiIconComponent,
|
||||||
TranslatePipe,
|
TranslatePipe,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class PiAccordionComponent {
|
export class PiAccordionComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
@@ -43,7 +43,13 @@ export class PiAccordionComponent {
|
|||||||
const directionClass =
|
const directionClass =
|
||||||
direction !== 'default' && `pi-accordion__direction--${direction}`;
|
direction !== 'default' && `pi-accordion__direction--${direction}`;
|
||||||
const paddingClass = `pi-accordion__padding--${this.padding()}`;
|
const paddingClass = `pi-accordion__padding--${this.padding()}`;
|
||||||
return ['pi-accordion', colorClass, appearanceClass, directionClass, paddingClass].join(' ');
|
return [
|
||||||
|
'pi-accordion',
|
||||||
|
colorClass,
|
||||||
|
appearanceClass,
|
||||||
|
directionClass,
|
||||||
|
paddingClass,
|
||||||
|
].join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -71,13 +77,20 @@ export class PiAccordionComponent {
|
|||||||
toggleState = (item: PiAccordionItemDirective, index: number) => {
|
toggleState = (item: PiAccordionItemDirective, index: number) => {
|
||||||
if (this.direction() === 'horizontal' && this.isItemExpanded(index)) return;
|
if (this.direction() === 'horizontal' && this.isItemExpanded(index)) return;
|
||||||
if (item.status() === 'disabled') return;
|
if (item.status() === 'disabled') return;
|
||||||
this.expandedItemIndex.set(this.expandedItemIndex() === index ? null : index);
|
this.expandedItemIndex.set(
|
||||||
|
this.expandedItemIndex() === index ? null : index,
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
isItemExpanded = (index: number) => this.expandedItemIndex() === index;
|
isItemExpanded = (index: number) => this.expandedItemIndex() === index;
|
||||||
|
|
||||||
setAccordionItemClasses(item: PiAccordionItemDirective, index: number): string {
|
setAccordionItemClasses(
|
||||||
const expandedClass = this.isItemExpanded(index) ? 'is-expanded' : 'is-collapsed';
|
item: PiAccordionItemDirective,
|
||||||
|
index: number,
|
||||||
|
): string {
|
||||||
|
const expandedClass = this.isItemExpanded(index)
|
||||||
|
? 'is-expanded'
|
||||||
|
: 'is-collapsed';
|
||||||
const status = item.status();
|
const status = item.status();
|
||||||
const statusClass = status && 'has-status' + ' ' + `is-${status}`;
|
const statusClass = status && 'has-status' + ' ' + `is-${status}`;
|
||||||
const isConfidentialClass = item.isConfidential() ? 'is-confidential' : '';
|
const isConfidentialClass = item.isConfidential() ? 'is-confidential' : '';
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
HostBinding,
|
HostBinding,
|
||||||
TemplateRef,
|
TemplateRef,
|
||||||
input,
|
input,
|
||||||
contentChild
|
contentChild,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { status } from '../../../util/status';
|
import { status } from '../../../util/status';
|
||||||
|
|
||||||
@@ -13,7 +13,7 @@ import { status } from '../../../util/status';
|
|||||||
* If it is needed it must be used as a Header for the whole accordion.
|
* If it is needed it must be used as a Header for the whole accordion.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@Directive({ selector: 'pi-accordion-header', })
|
@Directive({ selector: 'pi-accordion-header' })
|
||||||
export class PiAccordionHeaderDirective {
|
export class PiAccordionHeaderDirective {
|
||||||
@HostBinding('class') className = 'pi-accordion-header';
|
@HostBinding('class') className = 'pi-accordion-header';
|
||||||
}
|
}
|
||||||
@@ -23,32 +23,32 @@ export class PiAccordionHeaderDirective {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Accordion Item Header Content
|
// Accordion Item Header Content
|
||||||
@Directive({ selector: '[pi-accordion-item-header-content]', })
|
@Directive({ selector: '[pi-accordion-item-header-content]' })
|
||||||
export class PiAccordionItemHeaderDirective {
|
export class PiAccordionItemHeaderDirective {
|
||||||
constructor(public templateRef: TemplateRef<Element>) {}
|
constructor(public templateRef: TemplateRef<any>) {}
|
||||||
}
|
}
|
||||||
// Accordion Item Summary Content
|
// Accordion Item Summary Content
|
||||||
@Directive({ selector: '[pi-accordion-item-summary-content]', })
|
@Directive({ selector: '[pi-accordion-item-summary-content]' })
|
||||||
export class PiAccordionSummaryContentDirective {
|
export class PiAccordionSummaryContentDirective {
|
||||||
constructor(public templateRef: TemplateRef<Element>) {}
|
constructor(public templateRef: TemplateRef<any>) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Accordion Item Expandable Content
|
// Accordion Item Expandable Content
|
||||||
@Directive({ selector: '[pi-accordion-item-expandable-content]', })
|
@Directive({ selector: '[pi-accordion-item-expandable-content]' })
|
||||||
export class PiAccordionItemContentDirective {
|
export class PiAccordionItemContentDirective {
|
||||||
constructor(public templateRef: TemplateRef<Element>) {}
|
constructor(public templateRef: TemplateRef<any>) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The accordion footer is a separated content of the accordion items group.
|
* The accordion footer is a separated content of the accordion items group.
|
||||||
* If it is needed it must be used as a Footer for the whole accordion.
|
* If it is needed it must be used as a Footer for the whole accordion.
|
||||||
*/
|
*/
|
||||||
@Directive({ selector: 'pi-accordion-footer', })
|
@Directive({ selector: 'pi-accordion-footer' })
|
||||||
export class PiAccordionFooterDirective {
|
export class PiAccordionFooterDirective {
|
||||||
@HostBinding('class') className = 'pi-accordion-footer';
|
@HostBinding('class') className = 'pi-accordion-footer';
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: 'pi-accordion-item', })
|
@Directive({ selector: 'pi-accordion-item' })
|
||||||
export class PiAccordionItemDirective {
|
export class PiAccordionItemDirective {
|
||||||
readonly title = input('');
|
readonly title = input('');
|
||||||
readonly subtitle = input('');
|
readonly subtitle = input('');
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
export * from './accordion/accordion.component';
|
export * from './accordion/accordion.component';
|
||||||
|
|
||||||
export * from './directives/accordion-content.directive';
|
export * from './directives/accordion-content.directive';
|
||||||
@@ -19,7 +19,8 @@
|
|||||||
& > section {
|
& > section {
|
||||||
& > header {
|
& > header {
|
||||||
gap: var(--pi-spacing-large);
|
gap: var(--pi-spacing-large);
|
||||||
padding: var(--pi-spacing-x-small) var(--pi-spacing-small) var(--pi-spacing-x-small);
|
padding: var(--pi-spacing-x-small) var(--pi-spacing-small)
|
||||||
|
var(--pi-spacing-x-small);
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
&.is-expanded {
|
&.is-expanded {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
|
|||||||
@@ -6,7 +6,8 @@
|
|||||||
transform: var(--pi-animation);
|
transform: var(--pi-animation);
|
||||||
}
|
}
|
||||||
.pi-accordion-item-content__header + .pi-accordion-item-content__summary {
|
.pi-accordion-item-content__header + .pi-accordion-item-content__summary {
|
||||||
padding: var(--pi-spacing-#{$small-spacing}) var(--pi-spacing-#{$large-spacing})
|
padding: var(--pi-spacing-#{$small-spacing})
|
||||||
|
var(--pi-spacing-#{$large-spacing})
|
||||||
var(--pi-spacing-#{$large-spacing});
|
var(--pi-spacing-#{$large-spacing});
|
||||||
}
|
}
|
||||||
// Expanded [header + summary + main]
|
// Expanded [header + summary + main]
|
||||||
@@ -15,7 +16,8 @@
|
|||||||
+ .pi-accordion-item-content__expandable,
|
+ .pi-accordion-item-content__expandable,
|
||||||
// Expanded [header + main]
|
// Expanded [header + main]
|
||||||
.pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable {
|
.pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable {
|
||||||
padding: 0 var(--pi-spacing-#{$large-spacing}) var(--pi-spacing-#{$large-spacing});
|
padding: 0 var(--pi-spacing-#{$large-spacing})
|
||||||
|
var(--pi-spacing-#{$large-spacing});
|
||||||
}
|
}
|
||||||
// Collapsed [header + summary + main]
|
// Collapsed [header + summary + main]
|
||||||
.pi-accordion-item-content__header:not(.is-expanded)
|
.pi-accordion-item-content__header:not(.is-expanded)
|
||||||
@@ -201,7 +203,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-accordion-item-content__header.is-expanded + .pi-accordion-item-content__expandable,
|
.pi-accordion-item-content__header.is-expanded
|
||||||
|
+ .pi-accordion-item-content__expandable,
|
||||||
.pi-accordion-item-content__header.is-expanded
|
.pi-accordion-item-content__header.is-expanded
|
||||||
+ .pi-accordion-item-content__summary
|
+ .pi-accordion-item-content__summary
|
||||||
+ .pi-accordion-item-content__expandable {
|
+ .pi-accordion-item-content__expandable {
|
||||||
@@ -221,7 +224,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-accordion-item-content__header.is-collapsed + .pi-accordion-item-content__expandable,
|
.pi-accordion-item-content__header.is-collapsed
|
||||||
|
+ .pi-accordion-item-content__expandable,
|
||||||
.pi-accordion-item-content__header.is-collapsed
|
.pi-accordion-item-content__header.is-collapsed
|
||||||
+ .pi-accordion-item-content__summary
|
+ .pi-accordion-item-content__summary
|
||||||
+ .pi-accordion-item-content__expandable {
|
+ .pi-accordion-item-content__expandable {
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
|
|
||||||
// Appearance Default
|
// Appearance Default
|
||||||
@mixin accordionAppearanceDefault {
|
@mixin accordionAppearanceDefault {
|
||||||
&:not(.pi-accordion__appearance--outline):not(.pi-accordion__appearance--fill) {
|
&:not(.pi-accordion__appearance--outline):not(
|
||||||
|
.pi-accordion__appearance--fill
|
||||||
|
) {
|
||||||
// Not horizontal
|
// Not horizontal
|
||||||
&:not(.pi-accordion__direction--horizontal) {
|
&:not(.pi-accordion__direction--horizontal) {
|
||||||
& > section {
|
& > section {
|
||||||
@@ -12,7 +14,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > section {
|
& > section {
|
||||||
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<main
|
<main
|
||||||
(click)="execute.emit()"
|
(click)="execute.emit($event)"
|
||||||
pi-background-image
|
pi-background-image
|
||||||
[isResponsive]="isImgResponsive()"
|
[isResponsive]="isImgResponsive()"
|
||||||
[image]="pathImg()"
|
[image]="pathImg()"
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
<!-- Action -->
|
<!-- Action -->
|
||||||
<pi-icon-button
|
<pi-icon-button
|
||||||
*ngIf="buttonText()"
|
*ngIf="buttonText()"
|
||||||
(execute)="execute.emit()"
|
(execute)="execute.emit($event)"
|
||||||
icon="chevron-forward"
|
icon="chevron-forward"
|
||||||
iconColor="white"
|
iconColor="white"
|
||||||
iconSize="small"
|
iconSize="small"
|
||||||
|
|||||||
@@ -23,7 +23,11 @@
|
|||||||
|
|
||||||
// Type
|
// Type
|
||||||
&.pi-banner__mode--dark {
|
&.pi-banner__mode--dark {
|
||||||
background: linear-gradient(60deg, var(--pi-color-highlighted), var(--pi-color-primary));
|
background: linear-gradient(
|
||||||
|
60deg,
|
||||||
|
var(--pi-color-highlighted),
|
||||||
|
var(--pi-color-primary)
|
||||||
|
);
|
||||||
& > main {
|
& > main {
|
||||||
& > section {
|
& > section {
|
||||||
h3 {
|
h3 {
|
||||||
@@ -36,7 +40,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-banner__mode--light {
|
&.pi-banner__mode--light {
|
||||||
background: linear-gradient(60deg, var(--pi-color-white), var(--pi-color-primary-100));
|
background: linear-gradient(
|
||||||
|
60deg,
|
||||||
|
var(--pi-color-white),
|
||||||
|
var(--pi-color-primary-100)
|
||||||
|
);
|
||||||
& > main {
|
& > main {
|
||||||
& > section {
|
& > section {
|
||||||
h3 {
|
h3 {
|
||||||
|
|||||||
@@ -1,4 +1,10 @@
|
|||||||
import { Component, HostBinding, input, output, ChangeDetectionStrategy } from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
HostBinding,
|
||||||
|
input,
|
||||||
|
output,
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
} from '@angular/core';
|
||||||
import { PiBackgroundImageDirective } from '../../image/background-image.directive';
|
import { PiBackgroundImageDirective } from '../../image/background-image.directive';
|
||||||
import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
|
import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
|
||||||
import { NgIf } from '@angular/common';
|
import { NgIf } from '@angular/common';
|
||||||
@@ -6,15 +12,15 @@ import { PiIconButtonComponent } from '../../button/icon-button/icon-button.comp
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
selector: 'pi-banner',
|
selector: 'pi-banner',
|
||||||
templateUrl: './banner.component.html',
|
templateUrl: './banner.component.html',
|
||||||
styleUrls: ['./banner.component.scss'],
|
styleUrls: ['./banner.component.scss'],
|
||||||
imports: [
|
imports: [
|
||||||
PiBackgroundImageDirective,
|
PiBackgroundImageDirective,
|
||||||
PiTextWeightBoldDirective,
|
PiTextWeightBoldDirective,
|
||||||
NgIf,
|
NgIf,
|
||||||
PiIconButtonComponent,
|
PiIconButtonComponent,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class PiBannerComponent {
|
export class PiBannerComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
|
|||||||
@@ -1,3 +1 @@
|
|||||||
|
|
||||||
|
|
||||||
export * from './banner/banner.component';
|
export * from './banner/banner.component';
|
||||||
|
|||||||
@@ -11,12 +11,17 @@
|
|||||||
modeClass,
|
modeClass,
|
||||||
hasPaddingClass,
|
hasPaddingClass,
|
||||||
buttonTypeClass,
|
buttonTypeClass,
|
||||||
appearanceClass
|
appearanceClass,
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<span *ngIf="text()">{{ text() }}</span>
|
<span *ngIf="text()">{{ text() }}</span>
|
||||||
|
|
||||||
<svg *ngIf="hasIcon()" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
|
*ngIf="hasIcon()"
|
||||||
|
viewBox="0 0 6 9"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
<g>
|
<g>
|
||||||
<path
|
<path
|
||||||
d="M1 1C4.5 4 5 4.38484 5 4.5C5 4.61516 4.5 5 1 8"
|
d="M1 1C4.5 4 5 4.38484 5 4.5C5 4.61516 4.5 5 1 8"
|
||||||
|
|||||||
@@ -74,7 +74,9 @@
|
|||||||
transition: all 100ms ease-in-out;
|
transition: all 100ms ease-in-out;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
|
transition:
|
||||||
|
transform 100ms ease-in-out,
|
||||||
|
opacity 100ms ease-in-out;
|
||||||
& > g {
|
& > g {
|
||||||
// Head
|
// Head
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
@@ -85,7 +87,9 @@
|
|||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
|
transition:
|
||||||
|
transform 100ms ease-in-out,
|
||||||
|
opacity 100ms ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -96,7 +100,9 @@
|
|||||||
transition: all 100ms ease-in-out;
|
transition: all 100ms ease-in-out;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
|
transition:
|
||||||
|
transform 100ms ease-in-out,
|
||||||
|
opacity 100ms ease-in-out;
|
||||||
& > g {
|
& > g {
|
||||||
// Head
|
// Head
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
|
|||||||
@@ -1,20 +1,28 @@
|
|||||||
import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
|
import {
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Component,
|
||||||
|
HostBinding,
|
||||||
|
input,
|
||||||
|
} from '@angular/core';
|
||||||
import { buttonSize, mode } from '../../../styles';
|
import { buttonSize, mode } from '../../../styles';
|
||||||
import { PiBaseButtonComponent } from '../base-button.component';
|
import { PiBaseButtonComponent } from '../base-button.component';
|
||||||
import { NgIf } from '@angular/common';
|
import { NgIf } from '@angular/common';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-action-button',
|
selector: 'pi-action-button',
|
||||||
templateUrl: './action-button.component.html',
|
templateUrl: './action-button.component.html',
|
||||||
styleUrls: ['./action-button.component.scss'],
|
styleUrls: ['./action-button.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [NgIf],
|
imports: [NgIf],
|
||||||
})
|
})
|
||||||
export class PiActionButtonComponent extends PiBaseButtonComponent {
|
export class PiActionButtonComponent extends PiBaseButtonComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return ['pi-action-button', this.sizeClass, this.directionClass, this.fontWeightClass].join(
|
return [
|
||||||
' '
|
'pi-action-button',
|
||||||
);
|
this.sizeClass,
|
||||||
|
this.directionClass,
|
||||||
|
this.fontWeightClass,
|
||||||
|
].join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
readonly previous = input(false);
|
readonly previous = input(false);
|
||||||
@@ -62,7 +70,9 @@ export class PiActionButtonComponent extends PiBaseButtonComponent {
|
|||||||
|
|
||||||
override get appearanceClass(): string | null {
|
override get appearanceClass(): string | null {
|
||||||
const appearance = this.appearance();
|
const appearance = this.appearance();
|
||||||
return appearance !== 'fill' ? `pi-button__appearance--${appearance}` : null;
|
return appearance !== 'fill'
|
||||||
|
? `pi-button__appearance--${appearance}`
|
||||||
|
: null;
|
||||||
}
|
}
|
||||||
|
|
||||||
get buttonTypeClass(): string | null {
|
get buttonTypeClass(): string | null {
|
||||||
|
|||||||
@@ -1,6 +1,11 @@
|
|||||||
// Angular
|
// Angular
|
||||||
import { Directive, OnInit, input, output } from '@angular/core';
|
import { Directive, OnInit, input, output } from '@angular/core';
|
||||||
import { buttonSize, styleType, buttonStyle, flexDirection } from '../../styles';
|
import {
|
||||||
|
buttonSize,
|
||||||
|
styleType,
|
||||||
|
buttonStyle,
|
||||||
|
flexDirection,
|
||||||
|
} from '../../styles';
|
||||||
|
|
||||||
// Style definitions
|
// Style definitions
|
||||||
@Directive()
|
@Directive()
|
||||||
@@ -9,8 +14,8 @@ export abstract class PiBaseButtonComponent implements OnInit {
|
|||||||
readonly color = input<styleType>('primary');
|
readonly color = input<styleType>('primary');
|
||||||
readonly appearance = input<buttonStyle>('fill');
|
readonly appearance = input<buttonStyle>('fill');
|
||||||
readonly disabled = input(false);
|
readonly disabled = input(false);
|
||||||
readonly allowPropagation = input.required<boolean>();
|
readonly allowPropagation = input<boolean>();
|
||||||
readonly flexDirection = input.required<flexDirection>();
|
readonly flexDirection = input<flexDirection>();
|
||||||
|
|
||||||
readonly execute = output<MouseEvent>();
|
readonly execute = output<MouseEvent>();
|
||||||
|
|
||||||
|
|||||||
@@ -2,23 +2,25 @@ import { Directive, HostBinding, input } from '@angular/core';
|
|||||||
import { buttonSize } from '../../styles';
|
import { buttonSize } from '../../styles';
|
||||||
|
|
||||||
// Style
|
// Style
|
||||||
@Directive({ selector: '[pi-ghost]', })
|
@Directive({ selector: '[pi-ghost]' })
|
||||||
export class PiGhostButtonDirective {
|
export class PiGhostButtonDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
const hasPaddingClass = this.hasPadding() ? '' : 'pi-button__trimmed';
|
const hasPaddingClass = this.hasPadding() ? '' : 'pi-button__trimmed';
|
||||||
return ['pi-button', 'pi-button__appearance--ghost', hasPaddingClass].join(' ');
|
return ['pi-button', 'pi-button__appearance--ghost', hasPaddingClass].join(
|
||||||
|
' ',
|
||||||
|
);
|
||||||
}
|
}
|
||||||
readonly hasPadding = input(true);
|
readonly hasPadding = input(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: '[pi-outline]', })
|
@Directive({ selector: '[pi-outline]' })
|
||||||
export class PiOutlineButtonDirective {
|
export class PiOutlineButtonDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return 'pi-button pi-button__appearance--outline';
|
return 'pi-button pi-button__appearance--outline';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: '[pi-button-size]', })
|
@Directive({ selector: '[pi-button-size]' })
|
||||||
export class PiButtonSizeDirective {
|
export class PiButtonSizeDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return this.sizeClass;
|
return this.sizeClass;
|
||||||
@@ -33,7 +35,7 @@ export class PiButtonSizeDirective {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Size
|
// Size
|
||||||
@Directive({ selector: '[xx-small]', })
|
@Directive({ selector: '[xx-small]' })
|
||||||
export class PiXXSmallButtonDirective {
|
export class PiXXSmallButtonDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return 'pi-button pi-button__xx-small';
|
return 'pi-button pi-button__xx-small';
|
||||||
@@ -41,35 +43,35 @@ export class PiXXSmallButtonDirective {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Size
|
// Size
|
||||||
@Directive({ selector: '[x-small]', })
|
@Directive({ selector: '[x-small]' })
|
||||||
export class PiXSmallButtonDirective {
|
export class PiXSmallButtonDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return 'pi-button pi-button__x-small';
|
return 'pi-button pi-button__x-small';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: '[small]', })
|
@Directive({ selector: '[small]' })
|
||||||
export class PiSmallButtonDirective {
|
export class PiSmallButtonDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return 'pi-button pi-button__small';
|
return 'pi-button pi-button__small';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: '[medium]', })
|
@Directive({ selector: '[medium]' })
|
||||||
export class PiMediumButtonDirective {
|
export class PiMediumButtonDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return 'pi-button pi-button__medium';
|
return 'pi-button pi-button__medium';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: '[large]', })
|
@Directive({ selector: '[large]' })
|
||||||
export class PiLargeButtonDirective {
|
export class PiLargeButtonDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return 'pi-button pi-button__large';
|
return 'pi-button pi-button__large';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: '[w100]', })
|
@Directive({ selector: '[w100]' })
|
||||||
export class PiW100ButtonDirective {
|
export class PiW100ButtonDirective {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return 'pi-button pi-button__w100';
|
return 'pi-button pi-button__w100';
|
||||||
|
|||||||
@@ -1 +1,5 @@
|
|||||||
<mat-icon [svgIcon]="'chevron-forward'" (click)="toggle.emit()" color="black"></mat-icon>
|
<mat-icon
|
||||||
|
[svgIcon]="'chevron-forward'"
|
||||||
|
(click)="toggle.emit()"
|
||||||
|
color="black"
|
||||||
|
></mat-icon>
|
||||||
|
|||||||
@@ -3,24 +3,27 @@ import {
|
|||||||
Component,
|
Component,
|
||||||
HostBinding,
|
HostBinding,
|
||||||
Input,
|
Input,
|
||||||
output
|
output,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { ComponentFamilyClass } from '../../../styles';
|
import { ComponentFamilyClass } from '../../../styles';
|
||||||
import { PiBaseButtonComponent } from '../base-button.component';
|
import { PiBaseButtonComponent } from '../base-button.component';
|
||||||
import { MatIcon } from '@angular/material/icon';
|
import { MatIcon } from '@angular/material/icon';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-chevron-button',
|
selector: 'pi-chevron-button',
|
||||||
templateUrl: './chevron-button.component.html',
|
templateUrl: './chevron-button.component.html',
|
||||||
styleUrls: ['./chevron-button.component.scss'],
|
styleUrls: ['./chevron-button.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [MatIcon],
|
imports: [MatIcon],
|
||||||
})
|
})
|
||||||
export class PiChevronButtonComponent extends PiBaseButtonComponent {
|
export class PiChevronButtonComponent extends PiBaseButtonComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return ['pi-chevron-button', ComponentFamilyClass.Button, this.colorClass, this.sizeClass].join(
|
return [
|
||||||
' '
|
'pi-chevron-button',
|
||||||
);
|
ComponentFamilyClass.Button,
|
||||||
|
this.colorClass,
|
||||||
|
this.sizeClass,
|
||||||
|
].join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
readonly toggle = output<void>();
|
readonly toggle = output<void>();
|
||||||
|
|||||||
@@ -3,25 +3,29 @@ import {
|
|||||||
Component,
|
Component,
|
||||||
HostBinding,
|
HostBinding,
|
||||||
input,
|
input,
|
||||||
output
|
output,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { ComponentFamilyClass } from '../../../styles';
|
import { ComponentFamilyClass } from '../../../styles';
|
||||||
import { PiBaseButtonComponent } from '../base-button.component';
|
import { PiBaseButtonComponent } from '../base-button.component';
|
||||||
import { TranslatePipe } from '@ngx-translate/core';
|
import { TranslatePipe } from '@ngx-translate/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-close-button',
|
selector: 'pi-close-button',
|
||||||
templateUrl: './close-button.component.html',
|
templateUrl: './close-button.component.html',
|
||||||
styleUrls: ['./close-button.component.scss'],
|
styleUrls: ['./close-button.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [TranslatePipe],
|
imports: [TranslatePipe],
|
||||||
})
|
})
|
||||||
export class PiCloseButtonComponent extends PiBaseButtonComponent {
|
export class PiCloseButtonComponent extends PiBaseButtonComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
const hasLabelClass = this.hasLabel() === false ? 'pi-close-button__single' : '';
|
const hasLabelClass =
|
||||||
return ['pi-close-button', ComponentFamilyClass.Button, this.sizeClass, hasLabelClass].join(
|
this.hasLabel() === false ? 'pi-close-button__single' : '';
|
||||||
' '
|
return [
|
||||||
);
|
'pi-close-button',
|
||||||
|
ComponentFamilyClass.Button,
|
||||||
|
this.sizeClass,
|
||||||
|
hasLabelClass,
|
||||||
|
].join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
readonly hasLabel = input(true);
|
readonly hasLabel = input(true);
|
||||||
|
|||||||
@@ -1,18 +1,25 @@
|
|||||||
import { ChangeDetectionStrategy, Component, HostBinding, output } from '@angular/core';
|
import {
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Component,
|
||||||
|
HostBinding,
|
||||||
|
output,
|
||||||
|
} from '@angular/core';
|
||||||
import { ComponentFamilyClass } from '../../../styles';
|
import { ComponentFamilyClass } from '../../../styles';
|
||||||
import { PiBaseButtonComponent } from '../base-button.component';
|
import { PiBaseButtonComponent } from '../base-button.component';
|
||||||
import { TranslatePipe } from '@ngx-translate/core';
|
import { TranslatePipe } from '@ngx-translate/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-hamburger',
|
selector: 'pi-hamburger',
|
||||||
templateUrl: './hamburger.component.html',
|
templateUrl: './hamburger.component.html',
|
||||||
styleUrls: ['./hamburger.component.scss'],
|
styleUrls: ['./hamburger.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [TranslatePipe],
|
imports: [TranslatePipe],
|
||||||
})
|
})
|
||||||
export class PiHamburgerComponent extends PiBaseButtonComponent {
|
export class PiHamburgerComponent extends PiBaseButtonComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
return ['pi-hamburger', ComponentFamilyClass.Button, this.colorClass].join(' ');
|
return ['pi-hamburger', ComponentFamilyClass.Button, this.colorClass].join(
|
||||||
}
|
' ',
|
||||||
readonly toggle = output<void>();
|
);
|
||||||
|
}
|
||||||
|
readonly toggle = output<void>();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
textClass,
|
textClass,
|
||||||
widthClass,
|
widthClass,
|
||||||
hasPaddingClass,
|
hasPaddingClass,
|
||||||
modeClass
|
modeClass,
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<span *ngIf="text()">{{ text() }}</span>
|
<span *ngIf="text()">{{ text() }}</span>
|
||||||
@@ -44,11 +44,15 @@
|
|||||||
textClass,
|
textClass,
|
||||||
widthClass,
|
widthClass,
|
||||||
hasPaddingClass,
|
hasPaddingClass,
|
||||||
modeClass
|
modeClass,
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<mat-icon *ngIf="previous()" [svgIcon]="icon()" alt="icon"></mat-icon>
|
<mat-icon *ngIf="previous()" [svgIcon]="icon()!" alt="icon"></mat-icon>
|
||||||
<span *ngIf="text()">{{ text() }}</span>
|
<span *ngIf="text()">{{ text() }}</span>
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
<mat-icon *ngIf="!previous()" [svgIcon]="icon()" alt="icon"></mat-icon></button
|
<mat-icon
|
||||||
|
*ngIf="!previous()"
|
||||||
|
[svgIcon]="icon()!"
|
||||||
|
alt="icon"
|
||||||
|
></mat-icon></button
|
||||||
></ng-template>
|
></ng-template>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
ElementRef,
|
ElementRef,
|
||||||
HostBinding,
|
HostBinding,
|
||||||
input,
|
input,
|
||||||
viewChild
|
viewChild,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { buttonSize, mode } from '../../../styles';
|
import { buttonSize, mode } from '../../../styles';
|
||||||
import { PiBaseButtonComponent } from '../base-button.component';
|
import { PiBaseButtonComponent } from '../base-button.component';
|
||||||
@@ -12,15 +12,16 @@ import { NgIf } from '@angular/common';
|
|||||||
import { MatIcon } from '@angular/material/icon';
|
import { MatIcon } from '@angular/material/icon';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-icon-button',
|
selector: 'pi-icon-button',
|
||||||
templateUrl: './icon-button.component.html',
|
templateUrl: './icon-button.component.html',
|
||||||
styleUrls: ['./icon-button.component.scss'],
|
styleUrls: ['./icon-button.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [NgIf, MatIcon],
|
imports: [NgIf, MatIcon],
|
||||||
})
|
})
|
||||||
export class PiIconButtonComponent extends PiBaseButtonComponent {
|
export class PiIconButtonComponent extends PiBaseButtonComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
const customIconClass = this.iconType() === 'custom' && 'pi-icon-button__custom-icon';
|
const customIconClass =
|
||||||
|
this.iconType() === 'custom' && 'pi-icon-button__custom-icon';
|
||||||
const isResponsiveClass = this.isResponsive() ? 'is-responsive' : '';
|
const isResponsiveClass = this.isResponsive() ? 'is-responsive' : '';
|
||||||
return [
|
return [
|
||||||
'pi-icon-button',
|
'pi-icon-button',
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ export * from './toggle-button/toggle-button.component';
|
|||||||
|
|
||||||
// Export button's module
|
// Export button's module
|
||||||
|
|
||||||
|
|
||||||
// Export button's directive
|
// Export button's directive
|
||||||
export * from './button.directive';
|
export * from './button.directive';
|
||||||
export * from './switch-button/switch-button.directive';
|
export * from './switch-button/switch-button.directive';
|
||||||
|
|||||||
@@ -1,5 +1,13 @@
|
|||||||
<span *ngIf="icon() !== 'check'; else checkIconTemplate" (click)="execute.emit()"></span>
|
<span
|
||||||
|
*ngIf="icon() !== 'check'; else checkIconTemplate"
|
||||||
|
(click)="execute.emit($event)"
|
||||||
|
></span>
|
||||||
|
|
||||||
<ng-template #checkIconTemplate
|
<ng-template #checkIconTemplate
|
||||||
><mat-icon size="size" svgIcon="check" color="color" (click)="execute.emit()"></mat-icon
|
><mat-icon
|
||||||
|
size="size"
|
||||||
|
svgIcon="check"
|
||||||
|
color="color"
|
||||||
|
(click)="execute.emit($event)"
|
||||||
|
></mat-icon
|
||||||
></ng-template>
|
></ng-template>
|
||||||
|
|||||||
@@ -1,14 +1,19 @@
|
|||||||
import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
|
import {
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Component,
|
||||||
|
HostBinding,
|
||||||
|
input,
|
||||||
|
} from '@angular/core';
|
||||||
import { PiBaseButtonComponent } from '../base-button.component';
|
import { PiBaseButtonComponent } from '../base-button.component';
|
||||||
import { NgIf } from '@angular/common';
|
import { NgIf } from '@angular/common';
|
||||||
import { MatIcon } from '@angular/material/icon';
|
import { MatIcon } from '@angular/material/icon';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-radio-button',
|
selector: 'pi-radio-button',
|
||||||
templateUrl: './radio-button.component.html',
|
templateUrl: './radio-button.component.html',
|
||||||
styleUrls: ['./radio-button.component.scss'],
|
styleUrls: ['./radio-button.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [NgIf, MatIcon],
|
imports: [NgIf, MatIcon],
|
||||||
})
|
})
|
||||||
export class PiRadioButtonComponent extends PiBaseButtonComponent {
|
export class PiRadioButtonComponent extends PiBaseButtonComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
HostBinding,
|
HostBinding,
|
||||||
input,
|
input,
|
||||||
model,
|
model,
|
||||||
output
|
output,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { ComponentFamilyClass } from '../../../styles';
|
import { ComponentFamilyClass } from '../../../styles';
|
||||||
import { PiBaseButtonComponent } from '../base-button.component';
|
import { PiBaseButtonComponent } from '../base-button.component';
|
||||||
@@ -12,11 +12,11 @@ import { NgTemplateOutlet } from '@angular/common';
|
|||||||
import { MatIcon } from '@angular/material/icon';
|
import { MatIcon } from '@angular/material/icon';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-switch-button',
|
selector: 'pi-switch-button',
|
||||||
templateUrl: './switch-button.component.html',
|
templateUrl: './switch-button.component.html',
|
||||||
styleUrls: ['./switch-button.component.scss'],
|
styleUrls: ['./switch-button.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [NgTemplateOutlet, MatIcon],
|
imports: [NgTemplateOutlet, MatIcon],
|
||||||
})
|
})
|
||||||
export class PiSwitchButtonComponent extends PiBaseButtonComponent {
|
export class PiSwitchButtonComponent extends PiBaseButtonComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
@@ -34,10 +34,7 @@ export class PiSwitchButtonComponent extends PiBaseButtonComponent {
|
|||||||
readonly toggledTo = output<'on' | 'off'>();
|
readonly toggledTo = output<'on' | 'off'>();
|
||||||
|
|
||||||
readonly contentType = input<'icon' | 'text'>('icon');
|
readonly contentType = input<'icon' | 'text'>('icon');
|
||||||
readonly content = input.required<[
|
readonly content = input.required<[string, string]>();
|
||||||
string,
|
|
||||||
string
|
|
||||||
]>();
|
|
||||||
|
|
||||||
toggleSelected(): void {
|
toggleSelected(): void {
|
||||||
if (this.isActive()) {
|
if (this.isActive()) {
|
||||||
|
|||||||
@@ -1,23 +1,21 @@
|
|||||||
import { Directive, HostBinding } from '@angular/core';
|
import { Directive, HostBinding } from '@angular/core';
|
||||||
|
|
||||||
@Directive({ selector: 'pi-prefix-left', })
|
@Directive({ selector: 'pi-prefix-left' })
|
||||||
export class PiSwitchButtonPrefixLeftDirective {
|
export class PiSwitchButtonPrefixLeftDirective {
|
||||||
@HostBinding('class') className = 'pi-switch-button__prefix--left';
|
@HostBinding('class') className = 'pi-switch-button__prefix--left';
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: 'pi-suffix-left', })
|
@Directive({ selector: 'pi-suffix-left' })
|
||||||
export class PiSwitchButtonSuffixLeftDirective {
|
export class PiSwitchButtonSuffixLeftDirective {
|
||||||
@HostBinding('class') className = 'pi-switch-button__suffix--left';
|
@HostBinding('class') className = 'pi-switch-button__suffix--left';
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: 'pi-prefix-right', })
|
@Directive({ selector: 'pi-prefix-right' })
|
||||||
export class PiSwitchButtonPrefixRightDirective {
|
export class PiSwitchButtonPrefixRightDirective {
|
||||||
@HostBinding('class') className = 'pi-switch-button__prefix--right';
|
@HostBinding('class') className = 'pi-switch-button__prefix--right';
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: 'pi-suffix-right', })
|
|
||||||
export class PiSwitchButtonSuffixRightDirective {
|
|
||||||
@HostBinding('class') className = 'pi-switch-button__suffix--right';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
@Directive({ selector: 'pi-suffix-right' })
|
||||||
|
export class PiSwitchButtonSuffixRightDirective {
|
||||||
|
@HostBinding('class') className = 'pi-switch-button__suffix--right';
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,5 +1,9 @@
|
|||||||
<button (click)="onClickHandler($event)" [disabled]="isDisabled()" class="pi-button__toggle">
|
<button
|
||||||
<mat-icon *ngIf="icon()" [svgIcon]="icon()" [color]="color()"></mat-icon>
|
(click)="onClickHandler($event)"
|
||||||
|
[disabled]="isDisabled()"
|
||||||
|
class="pi-button__toggle"
|
||||||
|
>
|
||||||
|
<mat-icon *ngIf="icon()" [svgIcon]="icon()!" [color]="color()"></mat-icon>
|
||||||
<span>{{ text() }}</span>
|
<span>{{ text() }}</span>
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -1,22 +1,28 @@
|
|||||||
import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
|
import {
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Component,
|
||||||
|
HostBinding,
|
||||||
|
input,
|
||||||
|
} from '@angular/core';
|
||||||
import { buttonSize } from '../../../styles';
|
import { buttonSize } from '../../../styles';
|
||||||
import { PiBaseButtonComponent } from '../base-button.component';
|
import { PiBaseButtonComponent } from '../base-button.component';
|
||||||
import { NgIf } from '@angular/common';
|
import { NgIf } from '@angular/common';
|
||||||
import { MatIcon } from '@angular/material/icon';
|
import { MatIcon } from '@angular/material/icon';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-toggle-button',
|
selector: 'pi-toggle-button',
|
||||||
templateUrl: './toggle-button.component.html',
|
templateUrl: './toggle-button.component.html',
|
||||||
styleUrls: ['./toggle-button.component.scss'],
|
styleUrls: ['./toggle-button.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [NgIf, MatIcon],
|
imports: [NgIf, MatIcon],
|
||||||
})
|
})
|
||||||
export class PiToggleButtonComponent extends PiBaseButtonComponent {
|
export class PiToggleButtonComponent extends PiBaseButtonComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
const isActiveClass = this.isActive() && 'is-active';
|
const isActiveClass = this.isActive() && 'is-active';
|
||||||
const isDisabledClass = this.isDisabled() ? 'is-disabled' : '';
|
const isDisabledClass = this.isDisabled() ? 'is-disabled' : '';
|
||||||
const iconType = this.iconType();
|
const iconType = this.iconType();
|
||||||
const iconTypeClass = iconType !== 'default' && `pi-toggle-button__icon--${iconType}`;
|
const iconTypeClass =
|
||||||
|
iconType !== 'default' && `pi-toggle-button__icon--${iconType}`;
|
||||||
return [
|
return [
|
||||||
'pi-toggle-button',
|
'pi-toggle-button',
|
||||||
this.sizeClass,
|
this.sizeClass,
|
||||||
|
|||||||
@@ -9,7 +9,9 @@ export abstract class PiBaseCardComponent implements OnInit {
|
|||||||
readonly hasShadow = input(true);
|
readonly hasShadow = input(true);
|
||||||
readonly isClickable = input(false);
|
readonly isClickable = input(false);
|
||||||
readonly isStroked = input(false);
|
readonly isStroked = input(false);
|
||||||
readonly color = input<'primary' | 'accent' | 'highlighted' | 'grey' | 'white'>('white');
|
readonly color = input<
|
||||||
|
'primary' | 'accent' | 'highlighted' | 'grey' | 'white'
|
||||||
|
>('white');
|
||||||
readonly mode = input<mode>('light');
|
readonly mode = input<mode>('light');
|
||||||
readonly alignment = input.required<alignment>();
|
readonly alignment = input.required<alignment>();
|
||||||
readonly gap = input.required<gap>();
|
readonly gap = input.required<gap>();
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ import { NgIf } from '@angular/common';
|
|||||||
import { PiIconComponent } from '../../icon/icon/icon.component';
|
import { PiIconComponent } from '../../icon/icon/icon.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-card',
|
selector: 'pi-card',
|
||||||
templateUrl: './card.component.html',
|
templateUrl: './card.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [NgIf, PiIconComponent],
|
imports: [NgIf, PiIconComponent],
|
||||||
})
|
})
|
||||||
export class PiCardComponent extends PiBaseCardComponent {
|
export class PiCardComponent extends PiBaseCardComponent {
|
||||||
@HostBinding('class') get classes(): string {
|
@HostBinding('class') get classes(): string {
|
||||||
|
|||||||
@@ -1,29 +1,29 @@
|
|||||||
import { Directive, HostBinding, Input } from '@angular/core';
|
import { Directive, HostBinding, Input } from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: 'pi-card-top-content',
|
selector: 'pi-card-top-content',
|
||||||
host: {
|
host: {
|
||||||
class: 'pi-card-content pi-card-content__top',
|
class: 'pi-card-content pi-card-content__top',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export class PiCardTopContentDirective {}
|
export class PiCardTopContentDirective {}
|
||||||
|
|
||||||
@Directive({ selector: 'pi-card-center-content', })
|
@Directive({ selector: 'pi-card-center-content' })
|
||||||
export class PiCardCenterContentDirective {
|
export class PiCardCenterContentDirective {
|
||||||
@HostBinding('class') className = 'pi-card-content pi-card-content__center';
|
@HostBinding('class') className = 'pi-card-content pi-card-content__center';
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: 'pi-card-bottom-content', })
|
@Directive({ selector: 'pi-card-bottom-content' })
|
||||||
export class PiCardBottomContentDirective {
|
export class PiCardBottomContentDirective {
|
||||||
@HostBinding('class') className = 'pi-card-content pi-card-content__bottom';
|
@HostBinding('class') className = 'pi-card-content pi-card-content__bottom';
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: 'pi-card-left-content', })
|
@Directive({ selector: 'pi-card-left-content' })
|
||||||
export class PiCardLeftContentDirective {
|
export class PiCardLeftContentDirective {
|
||||||
@HostBinding('class') className = 'pi-card-content pi-card-content__left';
|
@HostBinding('class') className = 'pi-card-content pi-card-content__left';
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({ selector: 'pi-card-right-content', })
|
@Directive({ selector: 'pi-card-right-content' })
|
||||||
export class PiCardRightContentDirective {
|
export class PiCardRightContentDirective {
|
||||||
@HostBinding('class') className = 'pi-card-content pi-card-content__right';
|
@HostBinding('class') className = 'pi-card-content pi-card-content__right';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
export * from './card/card.component';
|
export * from './card/card.component';
|
||||||
|
|
||||||
export * from './directives/card.directive';
|
export * from './directives/card.directive';
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
|
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[pi-carousel-item]',
|
selector: '[pi-carousel-item]',
|
||||||
host: { class: 'pi-carousel pi-carousel__item' },
|
host: { class: 'pi-carousel pi-carousel__item' },
|
||||||
})
|
})
|
||||||
export class PiCarouselItemDirective {
|
export class PiCarouselItemDirective {
|
||||||
constructor(public templateRef: TemplateRef<Element>, public viewContainerRef: ViewContainerRef) {}
|
constructor(
|
||||||
|
public templateRef: TemplateRef<any>,
|
||||||
|
public viewContainerRef: ViewContainerRef,
|
||||||
|
) {}
|
||||||
}
|
}
|
||||||
@@ -7,7 +7,9 @@
|
|||||||
appearance="ghost"
|
appearance="ghost"
|
||||||
></pi-icon-button>
|
></pi-icon-button>
|
||||||
<section [class]="hasOverflow ? 'has-overflow' : ''" #carouselContentWrapper>
|
<section [class]="hasOverflow ? 'has-overflow' : ''" #carouselContentWrapper>
|
||||||
<ng-container *ngFor="let item of carouselItems(); index as i; trackBy: trackByFn">
|
<ng-container
|
||||||
|
*ngFor="let item of carouselItems(); index as i; trackBy: trackByFn"
|
||||||
|
>
|
||||||
<section [class]="getItemClass(i)" (click)="selectItem(i)">
|
<section [class]="getItemClass(i)" (click)="selectItem(i)">
|
||||||
<ng-container *ngTemplateOutlet="item.templateRef"> </ng-container>
|
<ng-container *ngTemplateOutlet="item.templateRef"> </ng-container>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import {
|
|||||||
input,
|
input,
|
||||||
output,
|
output,
|
||||||
viewChild,
|
viewChild,
|
||||||
contentChildren
|
contentChildren,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
|
|
||||||
// Shared
|
// Shared
|
||||||
@@ -27,16 +27,11 @@ import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
|
|||||||
import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
|
import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pi-carousel',
|
selector: 'pi-carousel',
|
||||||
templateUrl: './carousel.component.html',
|
templateUrl: './carousel.component.html',
|
||||||
styleUrls: ['./carousel.component.scss'],
|
styleUrls: ['./carousel.component.scss'],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
imports: [
|
imports: [NgIf, PiIconButtonComponent, NgFor, NgTemplateOutlet],
|
||||||
NgIf,
|
|
||||||
PiIconButtonComponent,
|
|
||||||
NgFor,
|
|
||||||
NgTemplateOutlet,
|
|
||||||
],
|
|
||||||
})
|
})
|
||||||
export class PiCarouselComponent
|
export class PiCarouselComponent
|
||||||
implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy
|
implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy
|
||||||
@@ -51,7 +46,8 @@ export class PiCarouselComponent
|
|||||||
const typeClass = `pi-carousel__${this.type()}`;
|
const typeClass = `pi-carousel__${this.type()}`;
|
||||||
const isDraggableClass = this.isDraggable() ? 'is-draggable' : '';
|
const isDraggableClass = this.isDraggable() ? 'is-draggable' : '';
|
||||||
const justifyValue = this.justify();
|
const justifyValue = this.justify();
|
||||||
const justifyClass = justifyValue && `pi-carousel__justify-content--${justifyValue}`;
|
const justifyClass =
|
||||||
|
justifyValue && `pi-carousel__justify-content--${justifyValue}`;
|
||||||
return [
|
return [
|
||||||
ComponentFamilyClass.Carousel,
|
ComponentFamilyClass.Carousel,
|
||||||
itemsNumberClass,
|
itemsNumberClass,
|
||||||
@@ -69,9 +65,9 @@ export class PiCarouselComponent
|
|||||||
readonly direction = input<'horizontal' | 'vertical'>('horizontal');
|
readonly direction = input<'horizontal' | 'vertical'>('horizontal');
|
||||||
|
|
||||||
readonly color = input<theming>('primary');
|
readonly color = input<theming>('primary');
|
||||||
readonly justify = input.required<justify>();
|
readonly justify = input<justify>();
|
||||||
|
|
||||||
readonly device = input.required<Device>();
|
readonly device = input<Device>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If true, the carousel will not show the next and previous buttons.
|
* If true, the carousel will not show the next and previous buttons.
|
||||||
@@ -83,7 +79,6 @@ export class PiCarouselComponent
|
|||||||
*/
|
*/
|
||||||
readonly hidePaginator = input(false);
|
readonly hidePaginator = input(false);
|
||||||
|
|
||||||
|
|
||||||
// BEHAVIOUR
|
// BEHAVIOUR
|
||||||
/**
|
/**
|
||||||
* If a number of items per device (itemsDesktop, itemsTablet, itemsMobile) is provided,
|
* If a number of items per device (itemsDesktop, itemsTablet, itemsMobile) is provided,
|
||||||
@@ -108,7 +103,7 @@ export class PiCarouselComponent
|
|||||||
* we can provide the width in pixels and this will override the number of items per device.
|
* we can provide the width in pixels and this will override the number of items per device.
|
||||||
* The carousel will display per page the number of items that fit in the total width.
|
* The carousel will display per page the number of items that fit in the total width.
|
||||||
*/
|
*/
|
||||||
readonly itemWidth = input.required<number>();
|
readonly itemWidth = input<number>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If true, the user will be able to drag the carousel to move across items.
|
* If true, the user will be able to drag the carousel to move across items.
|
||||||
@@ -131,12 +126,17 @@ export class PiCarouselComponent
|
|||||||
/**
|
/**
|
||||||
* carouselItems corresponds to the items that will be displayed in the carousel.
|
* carouselItems corresponds to the items that will be displayed in the carousel.
|
||||||
*/
|
*/
|
||||||
readonly carouselItems = contentChildren(PiCarouselItemDirective, { descendants: true });
|
readonly carouselItems = contentChildren(PiCarouselItemDirective, {
|
||||||
|
descendants: true,
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* carouselContentWrapper corresponds to the section that contains the carousel items and excludes the control buttons
|
* carouselContentWrapper corresponds to the section that contains the carousel items and excludes the control buttons
|
||||||
*/
|
*/
|
||||||
readonly carouselContentWrapper = viewChild.required('carouselContentWrapper', { read: ElementRef });
|
readonly carouselContentWrapper = viewChild.required(
|
||||||
|
'carouselContentWrapper',
|
||||||
|
{ read: ElementRef },
|
||||||
|
);
|
||||||
|
|
||||||
carouselItemsNativeElements: HTMLElement[] = [];
|
carouselItemsNativeElements: HTMLElement[] = [];
|
||||||
|
|
||||||
@@ -172,7 +172,7 @@ export class PiCarouselComponent
|
|||||||
private cdr: ChangeDetectorRef,
|
private cdr: ChangeDetectorRef,
|
||||||
private el: ElementRef,
|
private el: ElementRef,
|
||||||
private renderer: Renderer2,
|
private renderer: Renderer2,
|
||||||
private deviceConfig: DeviceConfigsFacade
|
private deviceConfig: DeviceConfigsFacade,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -186,7 +186,9 @@ export class PiCarouselComponent
|
|||||||
* Icon displayed in the next control button.
|
* Icon displayed in the next control button.
|
||||||
*/
|
*/
|
||||||
get nextIcon(): string {
|
get nextIcon(): string {
|
||||||
return this.direction() === 'horizontal' ? 'chevron-forward' : 'chevron-down';
|
return this.direction() === 'horizontal'
|
||||||
|
? 'chevron-forward'
|
||||||
|
: 'chevron-down';
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -207,7 +209,7 @@ export class PiCarouselComponent
|
|||||||
return this.carouselItemsNativeElements.reduce(
|
return this.carouselItemsNativeElements.reduce(
|
||||||
(value, currentValue) =>
|
(value, currentValue) =>
|
||||||
value > currentValue.offsetHeight ? value : currentValue.offsetHeight,
|
value > currentValue.offsetHeight ? value : currentValue.offsetHeight,
|
||||||
0
|
0,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -225,7 +227,9 @@ export class PiCarouselComponent
|
|||||||
}
|
}
|
||||||
|
|
||||||
get canSwipePrev(): boolean {
|
get canSwipePrev(): boolean {
|
||||||
return this.movePerPage() ? this.currentItem - this.itemsPerPage >= 0 : this.currentItem > 0;
|
return this.movePerPage()
|
||||||
|
? this.currentItem - this.itemsPerPage >= 0
|
||||||
|
: this.currentItem > 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -305,20 +309,27 @@ export class PiCarouselComponent
|
|||||||
setItemsPerPage(): void {
|
setItemsPerPage(): void {
|
||||||
const itemWidth = this.itemWidth();
|
const itemWidth = this.itemWidth();
|
||||||
if (!!itemWidth) {
|
if (!!itemWidth) {
|
||||||
this.itemsPerPage = Math.floor(this.carouselContentElement.clientWidth / itemWidth) || 1;
|
this.itemsPerPage =
|
||||||
|
Math.floor(this.carouselContentElement.clientWidth / itemWidth) || 1;
|
||||||
} else {
|
} else {
|
||||||
const itemsDesktop = this.itemsDesktop();
|
const itemsDesktop = this.itemsDesktop();
|
||||||
const itemsTablet = this.itemsTablet();
|
const itemsTablet = this.itemsTablet();
|
||||||
const itemsMobile = this.itemsMobile();
|
const itemsMobile = this.itemsMobile();
|
||||||
switch (this.device()) {
|
switch (this.device()) {
|
||||||
case 'DESKTOP':
|
case 'DESKTOP':
|
||||||
this.itemsPerPage = itemsDesktop ? itemsDesktop : this.carouselItems().length;
|
this.itemsPerPage = itemsDesktop
|
||||||
|
? itemsDesktop
|
||||||
|
: this.carouselItems().length;
|
||||||
break;
|
break;
|
||||||
case 'TABLET':
|
case 'TABLET':
|
||||||
this.itemsPerPage = itemsTablet ? itemsTablet : this.carouselItems().length;
|
this.itemsPerPage = itemsTablet
|
||||||
|
? itemsTablet
|
||||||
|
: this.carouselItems().length;
|
||||||
break;
|
break;
|
||||||
case 'MOBILE':
|
case 'MOBILE':
|
||||||
this.itemsPerPage = itemsMobile ? itemsMobile : this.carouselItems().length;
|
this.itemsPerPage = itemsMobile
|
||||||
|
? itemsMobile
|
||||||
|
: this.carouselItems().length;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -375,7 +386,7 @@ export class PiCarouselComponent
|
|||||||
'mousedown',
|
'mousedown',
|
||||||
(event) => {
|
(event) => {
|
||||||
this.dragStart(event);
|
this.dragStart(event);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
this.mousemoveListener = this.renderer.listen(
|
this.mousemoveListener = this.renderer.listen(
|
||||||
@@ -383,21 +394,25 @@ export class PiCarouselComponent
|
|||||||
'mousemove',
|
'mousemove',
|
||||||
(event) => {
|
(event) => {
|
||||||
if (this.isMouseDown) this.dragAction(event);
|
if (this.isMouseDown) this.dragAction(event);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
this.mouseupListener = this.renderer.listen(document.documentElement, 'mouseup', () => {
|
this.mouseupListener = this.renderer.listen(
|
||||||
if (this.isDragging) {
|
document.documentElement,
|
||||||
this.dragEnd();
|
'mouseup',
|
||||||
}
|
() => {
|
||||||
});
|
if (this.isDragging) {
|
||||||
|
this.dragEnd();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
this.touchstartListener = this.renderer.listen(
|
this.touchstartListener = this.renderer.listen(
|
||||||
this.carouselContentWrapper().nativeElement,
|
this.carouselContentWrapper().nativeElement,
|
||||||
'touchstart',
|
'touchstart',
|
||||||
(event) => {
|
(event) => {
|
||||||
this.dragStart(event);
|
this.dragStart(event);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
this.touchmoveListener = this.renderer.listen(
|
this.touchmoveListener = this.renderer.listen(
|
||||||
@@ -405,12 +420,16 @@ export class PiCarouselComponent
|
|||||||
'touchmove',
|
'touchmove',
|
||||||
(event) => {
|
(event) => {
|
||||||
if (this.isMouseDown) this.dragAction(event);
|
if (this.isMouseDown) this.dragAction(event);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
this.touchendListener = this.renderer.listen(document.documentElement, 'touchend', () => {
|
this.touchendListener = this.renderer.listen(
|
||||||
if (this.isDragging) this.dragEnd();
|
document.documentElement,
|
||||||
});
|
'touchend',
|
||||||
|
() => {
|
||||||
|
if (this.isDragging) this.dragEnd();
|
||||||
|
},
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private dragStart(event: MouseEvent | TouchEvent): void {
|
private dragStart(event: MouseEvent | TouchEvent): void {
|
||||||
@@ -433,22 +452,31 @@ export class PiCarouselComponent
|
|||||||
/**
|
/**
|
||||||
* Sets a minimum dragging width based on either 80% of the item width if provided
|
* Sets a minimum dragging width based on either 80% of the item width if provided
|
||||||
* Otherwise 80% of the width of one item in terms of the number of items displayed per page
|
* Otherwise 80% of the width of one item in terms of the number of items displayed per page
|
||||||
*/
|
*/
|
||||||
const itemWidth = this.itemWidth();
|
const itemWidth = this.itemWidth();
|
||||||
const minDraggingWidth = itemWidth ? 0.8 * itemWidth : 0.8 * (100 / this.itemsPerPage);
|
const minDraggingWidth = itemWidth
|
||||||
|
? 0.8 * itemWidth
|
||||||
|
: 0.8 * (100 / this.itemsPerPage);
|
||||||
|
|
||||||
this.isDragging = true;
|
this.isDragging = true;
|
||||||
|
|
||||||
if (event instanceof TouchEvent) this.dragFinalPosition = event.touches[0].clientX;
|
if (event instanceof TouchEvent)
|
||||||
|
this.dragFinalPosition = event.touches[0].clientX;
|
||||||
if (event instanceof MouseEvent) this.dragFinalPosition = event.clientX;
|
if (event instanceof MouseEvent) this.dragFinalPosition = event.clientX;
|
||||||
|
|
||||||
if (this.dragInitPosition - this.dragFinalPosition > minDraggingWidth && this.canSwipeNext) {
|
if (
|
||||||
|
this.dragInitPosition - this.dragFinalPosition > minDraggingWidth &&
|
||||||
|
this.canSwipeNext
|
||||||
|
) {
|
||||||
this.currentItem++;
|
this.currentItem++;
|
||||||
this.carouselTranslation(this.currentItem);
|
this.carouselTranslation(this.currentItem);
|
||||||
this.dragInitPosition = this.dragFinalPosition;
|
this.dragInitPosition = this.dragFinalPosition;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.dragInitPosition - this.dragFinalPosition < -minDraggingWidth && this.canSwipePrev) {
|
if (
|
||||||
|
this.dragInitPosition - this.dragFinalPosition < -minDraggingWidth &&
|
||||||
|
this.canSwipePrev
|
||||||
|
) {
|
||||||
this.currentItem--;
|
this.currentItem--;
|
||||||
this.carouselTranslation(this.currentItem);
|
this.carouselTranslation(this.currentItem);
|
||||||
this.dragInitPosition = this.dragFinalPosition;
|
this.dragInitPosition = this.dragFinalPosition;
|
||||||
@@ -463,31 +491,41 @@ export class PiCarouselComponent
|
|||||||
|
|
||||||
private getCarouselItemsNativeElements(): void {
|
private getCarouselItemsNativeElements(): void {
|
||||||
this.carouselItemsNativeElements = Array.from(
|
this.carouselItemsNativeElements = Array.from(
|
||||||
this.el.nativeElement.querySelectorAll('.pi-carousel__item')
|
this.el.nativeElement.querySelectorAll('.pi-carousel__item'),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private carouselTranslation(currentItem: number): void {
|
private carouselTranslation(currentItem: number): void {
|
||||||
const type = this.type();
|
const type = this.type();
|
||||||
if (type === 'linear' && currentItem <= this.carouselItems().length - this.itemsPerPage) {
|
if (
|
||||||
this.carouselItemsTranslation(currentItem, `-${currentItem * 100}%`, this.direction());
|
type === 'linear' &&
|
||||||
|
currentItem <= this.carouselItems().length - this.itemsPerPage
|
||||||
|
) {
|
||||||
|
this.carouselItemsTranslation(
|
||||||
|
currentItem,
|
||||||
|
`-${currentItem * 100}%`,
|
||||||
|
this.direction(),
|
||||||
|
);
|
||||||
} else if (type === 'symmetric') {
|
} else if (type === 'symmetric') {
|
||||||
if (currentItem < this.numberOfSideItems) {
|
if (currentItem < this.numberOfSideItems) {
|
||||||
// If we are at the beginning of the carousel
|
// If we are at the beginning of the carousel
|
||||||
this.carouselItemsTranslation(currentItem, '0', this.direction());
|
this.carouselItemsTranslation(currentItem, '0', this.direction());
|
||||||
} else if (this.carouselItems().length - currentItem > this.numberOfSideItems) {
|
} else if (
|
||||||
|
this.carouselItems().length - currentItem >
|
||||||
|
this.numberOfSideItems
|
||||||
|
) {
|
||||||
// If we are at the end of the carousel
|
// If we are at the end of the carousel
|
||||||
this.carouselItemsTranslation(
|
this.carouselItemsTranslation(
|
||||||
currentItem,
|
currentItem,
|
||||||
`-${(currentItem - this.numberOfSideItems) * 100}%`,
|
`-${(currentItem - this.numberOfSideItems) * 100}%`,
|
||||||
this.direction()
|
this.direction(),
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
// If we are at the end of the carousel
|
// If we are at the end of the carousel
|
||||||
this.carouselItemsTranslation(
|
this.carouselItemsTranslation(
|
||||||
currentItem,
|
currentItem,
|
||||||
`-${(this.carouselItems().length - this.itemsPerPage) * 100}%`,
|
`-${(this.carouselItems().length - this.itemsPerPage) * 100}%`,
|
||||||
this.direction()
|
this.direction(),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -499,11 +537,18 @@ export class PiCarouselComponent
|
|||||||
: this.setVerticalCarouselStyle();
|
: this.setVerticalCarouselStyle();
|
||||||
}
|
}
|
||||||
|
|
||||||
private carouselItemsTranslation(currentItem: number, translation: string, axis: string) {
|
private carouselItemsTranslation(
|
||||||
|
currentItem: number,
|
||||||
|
translation: string,
|
||||||
|
axis: string,
|
||||||
|
) {
|
||||||
this.carouselItemsNativeElements.forEach((item, index) => {
|
this.carouselItemsNativeElements.forEach((item, index) => {
|
||||||
const scale: number = index === currentItem && this.type() === 'symmetric' ? 1.15 : 1;
|
const scale: number =
|
||||||
|
index === currentItem && this.type() === 'symmetric' ? 1.15 : 1;
|
||||||
const transform: string =
|
const transform: string =
|
||||||
axis === 'horizontal' ? `translateX(${translation})` : `translateY(${translation})`;
|
axis === 'horizontal'
|
||||||
|
? `translateX(${translation})`
|
||||||
|
: `translateY(${translation})`;
|
||||||
this.renderer.setStyle(item, 'transform', `${transform} scale(${scale})`);
|
this.renderer.setStyle(item, 'transform', `${transform} scale(${scale})`);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -516,8 +561,16 @@ export class PiCarouselComponent
|
|||||||
this.renderer.setStyle(item, 'max-width', `${itemWidth}px`);
|
this.renderer.setStyle(item, 'max-width', `${itemWidth}px`);
|
||||||
this.renderer.setStyle(item, 'width', 'unset');
|
this.renderer.setStyle(item, 'width', 'unset');
|
||||||
} else {
|
} else {
|
||||||
this.renderer.setStyle(item, 'min-width', `${100 / this.itemsPerPage}%`);
|
this.renderer.setStyle(
|
||||||
this.renderer.setStyle(item, 'max-width', `${100 / this.itemsPerPage}%`);
|
item,
|
||||||
|
'min-width',
|
||||||
|
`${100 / this.itemsPerPage}%`,
|
||||||
|
);
|
||||||
|
this.renderer.setStyle(
|
||||||
|
item,
|
||||||
|
'max-width',
|
||||||
|
`${100 / this.itemsPerPage}%`,
|
||||||
|
);
|
||||||
this.renderer.setStyle(item, 'width', `${100 / this.itemsPerPage}%`);
|
this.renderer.setStyle(item, 'width', `${100 / this.itemsPerPage}%`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -527,10 +580,14 @@ export class PiCarouselComponent
|
|||||||
this.renderer.setStyle(
|
this.renderer.setStyle(
|
||||||
this.carouselContentElement,
|
this.carouselContentElement,
|
||||||
'min-height',
|
'min-height',
|
||||||
`${this.itemsPerPage * this.tallestElementHeightPx}px`
|
`${this.itemsPerPage * this.tallestElementHeightPx}px`,
|
||||||
);
|
);
|
||||||
this.carouselItemsNativeElements.forEach((item) => {
|
this.carouselItemsNativeElements.forEach((item) => {
|
||||||
this.renderer.setStyle(item, 'min-height', `${this.tallestElementHeightPx}px`);
|
this.renderer.setStyle(
|
||||||
|
item,
|
||||||
|
'min-height',
|
||||||
|
`${this.tallestElementHeightPx}px`,
|
||||||
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
export * from './carousel/carousel.component';
|
export * from './carousel/carousel.component';
|
||||||
|
|
||||||
export * from './carousel.directive';
|
export * from './carousel.directive';
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user