fix: elimina los ultimos errores de estrictez y normaliza a LF
This commit is contained in:
@@ -1,46 +1,46 @@
|
|||||||
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 {
|
||||||
return [
|
return [
|
||||||
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')]),
|
||||||
]),
|
]),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const enterTransition = transition(':enter', [
|
export const enterTransition = transition(':enter', [
|
||||||
style({
|
style({
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
}),
|
}),
|
||||||
animate(
|
animate(
|
||||||
'240ms 200ms ease-out',
|
'240ms 200ms ease-out',
|
||||||
style({
|
style({
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export const leaveTransition = transition(':leave', [
|
export const leaveTransition = transition(':leave', [
|
||||||
style({
|
style({
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
}),
|
}),
|
||||||
animate(
|
animate(
|
||||||
'180ms 120ms ease-out',
|
'180ms 120ms ease-out',
|
||||||
style({
|
style({
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export const fadeIn = trigger('fadeIn', [enterTransition]);
|
export const fadeIn = trigger('fadeIn', [enterTransition]);
|
||||||
|
|
||||||
export const fadeOut = trigger('fadeOut', [leaveTransition]);
|
export const fadeOut = trigger('fadeOut', [leaveTransition]);
|
||||||
|
|||||||
@@ -1,342 +1,342 @@
|
|||||||
// Primary
|
// Primary
|
||||||
$pi-color-theme-primary: (
|
$pi-color-theme-primary: (
|
||||||
50: #f0f4ff,
|
50: #f0f4ff,
|
||||||
100: #d7e2fb,
|
100: #d7e2fb,
|
||||||
200: #c3d5ff,
|
200: #c3d5ff,
|
||||||
300: #a1bbf5,
|
300: #a1bbf5,
|
||||||
400: #8cacf2,
|
400: #8cacf2,
|
||||||
500: #799ef0,
|
500: #799ef0,
|
||||||
600: #7196ee,
|
600: #7196ee,
|
||||||
700: #668cec,
|
700: #668cec,
|
||||||
800: #5c82e9,
|
800: #5c82e9,
|
||||||
900: #5772d4,
|
900: #5772d4,
|
||||||
A100: #ffffff,
|
A100: #ffffff,
|
||||||
A200: #ffffff,
|
A200: #ffffff,
|
||||||
A400: #d6e0ff,
|
A400: #d6e0ff,
|
||||||
A700: #bdccff,
|
A700: #bdccff,
|
||||||
contrast: (
|
contrast: (
|
||||||
50: #000000,
|
50: #000000,
|
||||||
100: #000000,
|
100: #000000,
|
||||||
200: #000000,
|
200: #000000,
|
||||||
300: #000000,
|
300: #000000,
|
||||||
400: #000000,
|
400: #000000,
|
||||||
500: #000000,
|
500: #000000,
|
||||||
600: #000000,
|
600: #000000,
|
||||||
700: #000000,
|
700: #000000,
|
||||||
800: #000000,
|
800: #000000,
|
||||||
900: #000000,
|
900: #000000,
|
||||||
A100: #000000,
|
A100: #000000,
|
||||||
A200: #000000,
|
A200: #000000,
|
||||||
A400: #000000,
|
A400: #000000,
|
||||||
A700: #000000,
|
A700: #000000,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Accent
|
// Accent
|
||||||
$pi-color-theme-accent: (
|
$pi-color-theme-accent: (
|
||||||
50: #fdf5e5,
|
50: #fdf5e5,
|
||||||
100: #fce0ad,
|
100: #fce0ad,
|
||||||
200: #f6d393,
|
200: #f6d393,
|
||||||
300: #f6bc63,
|
300: #f6bc63,
|
||||||
400: #f0b54a,
|
400: #f0b54a,
|
||||||
500: #eda82a,
|
500: #eda82a,
|
||||||
600: #eba025,
|
600: #eba025,
|
||||||
700: #d78f0f,
|
700: #d78f0f,
|
||||||
800: #e58d19,
|
800: #e58d19,
|
||||||
900: #e07d0f,
|
900: #e07d0f,
|
||||||
A100: #ffffff,
|
A100: #ffffff,
|
||||||
A200: #ffecda,
|
A200: #ffecda,
|
||||||
A400: #ffd2a7,
|
A400: #ffd2a7,
|
||||||
A700: #ffc48d,
|
A700: #ffc48d,
|
||||||
contrast: (
|
contrast: (
|
||||||
50: #000000,
|
50: #000000,
|
||||||
100: #000000,
|
100: #000000,
|
||||||
200: #000000,
|
200: #000000,
|
||||||
300: #000000,
|
300: #000000,
|
||||||
400: #000000,
|
400: #000000,
|
||||||
500: #000000,
|
500: #000000,
|
||||||
600: #000000,
|
600: #000000,
|
||||||
700: #000000,
|
700: #000000,
|
||||||
800: #000000,
|
800: #000000,
|
||||||
900: #000000,
|
900: #000000,
|
||||||
A100: #000000,
|
A100: #000000,
|
||||||
A200: #000000,
|
A200: #000000,
|
||||||
A400: #000000,
|
A400: #000000,
|
||||||
A700: #000000,
|
A700: #000000,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Warn
|
// Warn
|
||||||
$pi-color-theme-warn: (
|
$pi-color-theme-warn: (
|
||||||
50: #fbe1e1,
|
50: #fbe1e1,
|
||||||
100: #f4b3b3,
|
100: #f4b3b3,
|
||||||
200: #ef8c8c,
|
200: #ef8c8c,
|
||||||
300: #e54e4e,
|
300: #e54e4e,
|
||||||
400: #e02828,
|
400: #e02828,
|
||||||
500: #da0202,
|
500: #da0202,
|
||||||
600: #d60202,
|
600: #d60202,
|
||||||
700: #d00101,
|
700: #d00101,
|
||||||
800: #cb0101,
|
800: #cb0101,
|
||||||
900: #ba1a1a,
|
900: #ba1a1a,
|
||||||
A100: #ffebeb,
|
A100: #ffebeb,
|
||||||
A200: #ffb8b8,
|
A200: #ffb8b8,
|
||||||
A400: #ff8585,
|
A400: #ff8585,
|
||||||
A700: #ff6b6b,
|
A700: #ff6b6b,
|
||||||
contrast: (
|
contrast: (
|
||||||
50: #000000,
|
50: #000000,
|
||||||
100: #000000,
|
100: #000000,
|
||||||
200: #000000,
|
200: #000000,
|
||||||
300: #ffffff,
|
300: #ffffff,
|
||||||
400: #ffffff,
|
400: #ffffff,
|
||||||
500: #ffffff,
|
500: #ffffff,
|
||||||
600: #ffffff,
|
600: #ffffff,
|
||||||
700: #ffffff,
|
700: #ffffff,
|
||||||
800: #ffffff,
|
800: #ffffff,
|
||||||
900: #ffffff,
|
900: #ffffff,
|
||||||
A100: #000000,
|
A100: #000000,
|
||||||
A200: #000000,
|
A200: #000000,
|
||||||
A400: #000000,
|
A400: #000000,
|
||||||
A700: #000000,
|
A700: #000000,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
// Highlighted
|
// Highlighted
|
||||||
$pi-color-theme-highlighted: (
|
$pi-color-theme-highlighted: (
|
||||||
50: #e2e5ed,
|
50: #e2e5ed,
|
||||||
100: #b6bfd3,
|
100: #b6bfd3,
|
||||||
200: #8695b5,
|
200: #8695b5,
|
||||||
300: #566a97,
|
300: #566a97,
|
||||||
400: #314a81,
|
400: #314a81,
|
||||||
500: #0d2a6b,
|
500: #0d2a6b,
|
||||||
600: #0b2563,
|
600: #0b2563,
|
||||||
700: #091f58,
|
700: #091f58,
|
||||||
800: #07194e,
|
800: #07194e,
|
||||||
900: #030f3c,
|
900: #030f3c,
|
||||||
A100: #7285ff,
|
A100: #7285ff,
|
||||||
A200: #3f59ff,
|
A200: #3f59ff,
|
||||||
A400: #0c2dff,
|
A400: #0c2dff,
|
||||||
A700: #0021f1,
|
A700: #0021f1,
|
||||||
contrast: (
|
contrast: (
|
||||||
50: #000000,
|
50: #000000,
|
||||||
100: #000000,
|
100: #000000,
|
||||||
200: #000000,
|
200: #000000,
|
||||||
300: #ffffff,
|
300: #ffffff,
|
||||||
400: #ffffff,
|
400: #ffffff,
|
||||||
500: #ffffff,
|
500: #ffffff,
|
||||||
600: #ffffff,
|
600: #ffffff,
|
||||||
700: #ffffff,
|
700: #ffffff,
|
||||||
800: #ffffff,
|
800: #ffffff,
|
||||||
900: #ffffff,
|
900: #ffffff,
|
||||||
A100: #000000,
|
A100: #000000,
|
||||||
A200: #ffffff,
|
A200: #ffffff,
|
||||||
A400: #ffffff,
|
A400: #ffffff,
|
||||||
A700: #ffffff,
|
A700: #ffffff,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
$md-mcgpalette0: (
|
$md-mcgpalette0: (
|
||||||
50: #e1e8f5,
|
50: #e1e8f5,
|
||||||
100: #b5c6e6,
|
100: #b5c6e6,
|
||||||
200: #83a1d5,
|
200: #83a1d5,
|
||||||
300: #517bc4,
|
300: #517bc4,
|
||||||
400: #2c5eb7,
|
400: #2c5eb7,
|
||||||
500: #0d2a6b,
|
500: #0d2a6b,
|
||||||
600: #0b2563,
|
600: #0b2563,
|
||||||
700: #091f58,
|
700: #091f58,
|
||||||
800: #07194e,
|
800: #07194e,
|
||||||
900: #030f3c,
|
900: #030f3c,
|
||||||
A100: #7285ff,
|
A100: #7285ff,
|
||||||
A200: #3f59ff,
|
A200: #3f59ff,
|
||||||
A400: #0c2dff,
|
A400: #0c2dff,
|
||||||
A700: #0021f1,
|
A700: #0021f1,
|
||||||
contrast: (
|
contrast: (
|
||||||
50: #000000,
|
50: #000000,
|
||||||
100: #000000,
|
100: #000000,
|
||||||
200: #000000,
|
200: #000000,
|
||||||
300: #ffffff,
|
300: #ffffff,
|
||||||
400: #ffffff,
|
400: #ffffff,
|
||||||
500: #ffffff,
|
500: #ffffff,
|
||||||
600: #ffffff,
|
600: #ffffff,
|
||||||
700: #ffffff,
|
700: #ffffff,
|
||||||
800: #ffffff,
|
800: #ffffff,
|
||||||
900: #ffffff,
|
900: #ffffff,
|
||||||
A100: #000000,
|
A100: #000000,
|
||||||
A200: #ffffff,
|
A200: #ffffff,
|
||||||
A400: #ffffff,
|
A400: #ffffff,
|
||||||
A700: #ffffff,
|
A700: #ffffff,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-color-primary-10: rgba(253, 253, 255, 1); // #fdfdff
|
$pi-color-primary-10: rgba(253, 253, 255, 1); // #fdfdff
|
||||||
$pi-color-primary-25: rgba(250, 251, 255, 1); // #fafbff
|
$pi-color-primary-25: rgba(250, 251, 255, 1); // #fafbff
|
||||||
$pi-color-primary-50: rgba(240, 244, 255, 1); // #f0f4ff
|
$pi-color-primary-50: rgba(240, 244, 255, 1); // #f0f4ff
|
||||||
$pi-color-primary-75: rgba(234, 239, 255, 1); // #eaefff
|
$pi-color-primary-75: rgba(234, 239, 255, 1); // #eaefff
|
||||||
$pi-color-primary-100: rgba(215, 226, 251, 1); // #d7e2fb
|
$pi-color-primary-100: rgba(215, 226, 251, 1); // #d7e2fb
|
||||||
$pi-color-primary-200-rgba: rgba(196, 213, 255, 0.15); //#c4d5ff
|
$pi-color-primary-200-rgba: rgba(196, 213, 255, 0.15); //#c4d5ff
|
||||||
$pi-color-primary-200: rgba(195, 213, 255, 1); //#c3d5ff
|
$pi-color-primary-200: rgba(195, 213, 255, 1); //#c3d5ff
|
||||||
$pi-color-primary-300: rgba(163, 192, 255, 1); //#A3C0FF
|
$pi-color-primary-300: rgba(163, 192, 255, 1); //#A3C0FF
|
||||||
$pi-color-primary-400: rgba(140, 172, 242, 1); //#8CACF2
|
$pi-color-primary-400: rgba(140, 172, 242, 1); //#8CACF2
|
||||||
$pi-color-primary: rgba(121, 158, 240, 1); // #799ef0
|
$pi-color-primary: rgba(121, 158, 240, 1); // #799ef0
|
||||||
$pi-color-primary-900: rgba(87, 114, 212, 1); // #5772D4
|
$pi-color-primary-900: rgba(87, 114, 212, 1); // #5772D4
|
||||||
// Accent
|
// Accent
|
||||||
$pi-color-accent-10: rgba(255, 253, 249, 1); // #fffdf9
|
$pi-color-accent-10: rgba(255, 253, 249, 1); // #fffdf9
|
||||||
$pi-color-accent-25: rgba(255, 250, 237, 1); // #fffaed
|
$pi-color-accent-25: rgba(255, 250, 237, 1); // #fffaed
|
||||||
$pi-color-accent-50: rgba(253, 245, 229, 1); // #fdf5e5
|
$pi-color-accent-50: rgba(253, 245, 229, 1); // #fdf5e5
|
||||||
$pi-color-accent-75: rgba(250, 229, 191, 1); // #fae5bf
|
$pi-color-accent-75: rgba(250, 229, 191, 1); // #fae5bf
|
||||||
$pi-color-accent-100: rgba(252, 224, 173, 1); // #fce0ad
|
$pi-color-accent-100: rgba(252, 224, 173, 1); // #fce0ad
|
||||||
$pi-color-accent-200-rgba: rgba(252, 224, 173, 0.15); // #FCE0AD
|
$pi-color-accent-200-rgba: rgba(252, 224, 173, 0.15); // #FCE0AD
|
||||||
$pi-color-accent-200: rgba(246, 212, 149, 1); // #f6d495
|
$pi-color-accent-200: rgba(246, 212, 149, 1); // #f6d495
|
||||||
$pi-color-accent-300: rgba(242, 194, 106, 1); // #f2c26a
|
$pi-color-accent-300: rgba(242, 194, 106, 1); // #f2c26a
|
||||||
$pi-color-accent-400: rgba(246, 188, 99, 1); // #f6bc63
|
$pi-color-accent-400: rgba(246, 188, 99, 1); // #f6bc63
|
||||||
$pi-color-accent: rgba(237, 168, 42, 1); // #eda82a
|
$pi-color-accent: rgba(237, 168, 42, 1); // #eda82a
|
||||||
$pi-color-accent-900: rgba(215, 143, 15, 1); // #d78f0f
|
$pi-color-accent-900: rgba(215, 143, 15, 1); // #d78f0f
|
||||||
// Highlighted
|
// Highlighted
|
||||||
$pi-color-highlighted-10: rgba(249, 251, 255, 1); // #f9fbff
|
$pi-color-highlighted-10: rgba(249, 251, 255, 1); // #f9fbff
|
||||||
$pi-color-highlighted-25: rgba(242, 245, 255, 1); // #f2f5ff
|
$pi-color-highlighted-25: rgba(242, 245, 255, 1); // #f2f5ff
|
||||||
$pi-color-highlighted-50: rgba(233, 238, 255, 1); // #E9EEFF
|
$pi-color-highlighted-50: rgba(233, 238, 255, 1); // #E9EEFF
|
||||||
$pi-color-highlighted-75: rgba(218, 226, 255, 1); // #dae2ff
|
$pi-color-highlighted-75: rgba(218, 226, 255, 1); // #dae2ff
|
||||||
$pi-color-highlighted-100: rgba(188, 205, 250, 1); // #bccdfa
|
$pi-color-highlighted-100: rgba(188, 205, 250, 1); // #bccdfa
|
||||||
$pi-color-highlighted-200: rgba(100, 130, 215, 1); // #6482d7
|
$pi-color-highlighted-200: rgba(100, 130, 215, 1); // #6482d7
|
||||||
$pi-color-highlighted-200-rgba: rgba(168, 193, 255, 0.15); // #A8C1FF
|
$pi-color-highlighted-200-rgba: rgba(168, 193, 255, 0.15); // #A8C1FF
|
||||||
$pi-color-highlighted-300: rgba(67, 106, 193, 1); // #436ac1
|
$pi-color-highlighted-300: rgba(67, 106, 193, 1); // #436ac1
|
||||||
$pi-color-highlighted-400: rgba(29, 63, 138, 1); // #1d3f8a
|
$pi-color-highlighted-400: rgba(29, 63, 138, 1); // #1d3f8a
|
||||||
$pi-color-highlighted: rgba(13, 42, 107, 1); // #0d2a6b
|
$pi-color-highlighted: rgba(13, 42, 107, 1); // #0d2a6b
|
||||||
$pi-color-highlighted-900: rgba(3, 15, 60, 1); // #030f3c
|
$pi-color-highlighted-900: rgba(3, 15, 60, 1); // #030f3c
|
||||||
// Warn
|
// Warn
|
||||||
$pi-color-warn-10: rgba(255, 249, 250, 1); // #fff9fa
|
$pi-color-warn-10: rgba(255, 249, 250, 1); // #fff9fa
|
||||||
$pi-color-warn-25: rgba(255, 237, 240, 1); // #ffedf0
|
$pi-color-warn-25: rgba(255, 237, 240, 1); // #ffedf0
|
||||||
$pi-color-warn-50: rgba(252, 235, 235, 1); // #fcebeb
|
$pi-color-warn-50: rgba(252, 235, 235, 1); // #fcebeb
|
||||||
$pi-color-warn-75: rgba(255, 231, 234, 1); // #ffe7ea
|
$pi-color-warn-75: rgba(255, 231, 234, 1); // #ffe7ea
|
||||||
$pi-color-warn-100: rgba(247, 205, 205, 1); // #f7cdcd
|
$pi-color-warn-100: rgba(247, 205, 205, 1); // #f7cdcd
|
||||||
$pi-color-warn-200: rgba(242, 172, 172, 1); // #f2acac
|
$pi-color-warn-200: rgba(242, 172, 172, 1); // #f2acac
|
||||||
$pi-color-warn-200-rgba: rgba(237, 129, 129, 0.149); // #ED8181 #ed818126
|
$pi-color-warn-200-rgba: rgba(237, 129, 129, 0.149); // #ED8181 #ed818126
|
||||||
$pi-color-warn-300: rgba(236, 139, 139, 1); // #ec8b8b
|
$pi-color-warn-300: rgba(236, 139, 139, 1); // #ec8b8b
|
||||||
$pi-color-warn-400: rgba(232, 114, 114, 1); // #e87272
|
$pi-color-warn-400: rgba(232, 114, 114, 1); // #e87272
|
||||||
$pi-color-warn: rgba(228, 89, 89, 1); // #e45959
|
$pi-color-warn: rgba(228, 89, 89, 1); // #e45959
|
||||||
$pi-color-warn-900: rgba(193, 55, 55, 1); // #c13737
|
$pi-color-warn-900: rgba(193, 55, 55, 1); // #c13737
|
||||||
// Success
|
// Success
|
||||||
$pi-color-success-10: rgba(247, 252, 249, 1); // #f7fcf9
|
$pi-color-success-10: rgba(247, 252, 249, 1); // #f7fcf9
|
||||||
$pi-color-success-25: rgba(230, 246, 237, 1); // #e6f6ed
|
$pi-color-success-25: rgba(230, 246, 237, 1); // #e6f6ed
|
||||||
$pi-color-success-50: rgba(222, 245, 232, 1); // #DEF5E8
|
$pi-color-success-50: rgba(222, 245, 232, 1); // #DEF5E8
|
||||||
$pi-color-success-75: rgba(199, 235, 220, 1); // #c7ebdc
|
$pi-color-success-75: rgba(199, 235, 220, 1); // #c7ebdc
|
||||||
$pi-color-success-100: rgba(187, 232, 213, 1); // #bbe8d5
|
$pi-color-success-100: rgba(187, 232, 213, 1); // #bbe8d5
|
||||||
$pi-color-success-200: rgba(131, 219, 182, 1); // #83dbb6
|
$pi-color-success-200: rgba(131, 219, 182, 1); // #83dbb6
|
||||||
$pi-color-success-300: rgba(96, 201, 157, 1); // #60c99d
|
$pi-color-success-300: rgba(96, 201, 157, 1); // #60c99d
|
||||||
$pi-color-success-400: rgba(62, 190, 136, 1); // #3ebe88
|
$pi-color-success-400: rgba(62, 190, 136, 1); // #3ebe88
|
||||||
$pi-color-success: rgba(28, 178, 115, 1); // #1cb273
|
$pi-color-success: rgba(28, 178, 115, 1); // #1cb273
|
||||||
$pi-color-success-900: rgba(0, 151, 88, 1); // #009758
|
$pi-color-success-900: rgba(0, 151, 88, 1); // #009758
|
||||||
// Grey
|
// Grey
|
||||||
$pi-color-grey-10: rgba(252, 252, 253, 1); // #fcfcfd
|
$pi-color-grey-10: rgba(252, 252, 253, 1); // #fcfcfd
|
||||||
$pi-color-grey-25: rgba(250, 250, 251, 1); // #fafafb
|
$pi-color-grey-25: rgba(250, 250, 251, 1); // #fafafb
|
||||||
$pi-color-grey-50: rgba(243, 244, 244, 1); // #f3f4f4
|
$pi-color-grey-50: rgba(243, 244, 244, 1); // #f3f4f4
|
||||||
$pi-color-grey-75: rgba(240, 241, 243, 1); // #f0f1f3
|
$pi-color-grey-75: rgba(240, 241, 243, 1); // #f0f1f3
|
||||||
$pi-color-grey-100: rgba(233, 235, 241, 1); // #e9ebf1
|
$pi-color-grey-100: rgba(233, 235, 241, 1); // #e9ebf1
|
||||||
$pi-color-grey-200: rgba(209, 211, 218, 1); // #d1d3da
|
$pi-color-grey-200: rgba(209, 211, 218, 1); // #d1d3da
|
||||||
$pi-color-grey-300: rgba(178, 178, 184, 1); // #b2b2b8
|
$pi-color-grey-300: rgba(178, 178, 184, 1); // #b2b2b8
|
||||||
$pi-color-grey-400: rgba(137, 136, 143, 1); // #89888f
|
$pi-color-grey-400: rgba(137, 136, 143, 1); // #89888f
|
||||||
$pi-color-grey: rgba(106, 106, 112, 1); // #6a6a70
|
$pi-color-grey: rgba(106, 106, 112, 1); // #6a6a70
|
||||||
$pi-color-grey-900: rgba(61, 61, 61, 1); // #3d3d3d
|
$pi-color-grey-900: rgba(61, 61, 61, 1); // #3d3d3d
|
||||||
// White
|
// White
|
||||||
$pi-color-white: rgba(255, 255, 255, 1); // #FFFFFF
|
$pi-color-white: rgba(255, 255, 255, 1); // #FFFFFF
|
||||||
$pi-color-white-900: rgba(244, 244, 244, 1); // #f4f4f4
|
$pi-color-white-900: rgba(244, 244, 244, 1); // #f4f4f4
|
||||||
$pi-color-white-rgba-03: rgba(255, 255, 255, 0.33); // #ffffff rgba
|
$pi-color-white-rgba-03: rgba(255, 255, 255, 0.33); // #ffffff rgba
|
||||||
$pi-color-white-rgba-05: rgba(255, 255, 255, 0.5); // #ffffff rgba
|
$pi-color-white-rgba-05: rgba(255, 255, 255, 0.5); // #ffffff rgba
|
||||||
$pi-color-white-rgba-06: rgba(255, 255, 255, 0.66); // #ffffff rgba
|
$pi-color-white-rgba-06: rgba(255, 255, 255, 0.66); // #ffffff rgba
|
||||||
$pi-color-white-rgba-09: rgba(255, 255, 255, 0.88); // #ffffff rgba
|
$pi-color-white-rgba-09: rgba(255, 255, 255, 0.88); // #ffffff rgba
|
||||||
// Black
|
// Black
|
||||||
$pi-color-black-200: rgba(50, 55, 72, 1); // #323748
|
$pi-color-black-200: rgba(50, 55, 72, 1); // #323748
|
||||||
$pi-color-black: rgba(26, 26, 26, 1); // #1A1A1A
|
$pi-color-black: rgba(26, 26, 26, 1); // #1A1A1A
|
||||||
// Background
|
// Background
|
||||||
$pi-color-background-300: rgba(174, 174, 182, 1); // #F4F4F4
|
$pi-color-background-300: rgba(174, 174, 182, 1); // #F4F4F4
|
||||||
$pi-color-background-400: rgba(252, 252, 252, 1); // ##FCFCFC
|
$pi-color-background-400: rgba(252, 252, 252, 1); // ##FCFCFC
|
||||||
$pi-color-background-500: rgba(247, 247, 247, 1); //#f7f7f7
|
$pi-color-background-500: rgba(247, 247, 247, 1); //#f7f7f7
|
||||||
|
|
||||||
// Root variables
|
// Root variables
|
||||||
:root {
|
:root {
|
||||||
// Brand colors
|
// Brand colors
|
||||||
// Primary
|
// Primary
|
||||||
--pi-color-primary-10: #{$pi-color-primary-10};
|
--pi-color-primary-10: #{$pi-color-primary-10};
|
||||||
--pi-color-primary-25: #{$pi-color-primary-25};
|
--pi-color-primary-25: #{$pi-color-primary-25};
|
||||||
--pi-color-primary-50: #{$pi-color-primary-50};
|
--pi-color-primary-50: #{$pi-color-primary-50};
|
||||||
--pi-color-primary-75: #{$pi-color-primary-75};
|
--pi-color-primary-75: #{$pi-color-primary-75};
|
||||||
--pi-color-primary-100: #{$pi-color-primary-100};
|
--pi-color-primary-100: #{$pi-color-primary-100};
|
||||||
--pi-color-primary-200: #{$pi-color-primary-200};
|
--pi-color-primary-200: #{$pi-color-primary-200};
|
||||||
--pi-color-primary-200-rgba: #{$pi-color-primary-200-rgba};
|
--pi-color-primary-200-rgba: #{$pi-color-primary-200-rgba};
|
||||||
--pi-color-primary-300: #{$pi-color-primary-300};
|
--pi-color-primary-300: #{$pi-color-primary-300};
|
||||||
--pi-color-primary-400: #{$pi-color-primary-400};
|
--pi-color-primary-400: #{$pi-color-primary-400};
|
||||||
--pi-color-primary: #{$pi-color-primary};
|
--pi-color-primary: #{$pi-color-primary};
|
||||||
--pi-color-primary-900: #{$pi-color-primary-900};
|
--pi-color-primary-900: #{$pi-color-primary-900};
|
||||||
// Accent
|
// Accent
|
||||||
--pi-color-accent-10: #{$pi-color-accent-10};
|
--pi-color-accent-10: #{$pi-color-accent-10};
|
||||||
--pi-color-accent-25: #{$pi-color-accent-25};
|
--pi-color-accent-25: #{$pi-color-accent-25};
|
||||||
--pi-color-accent-50: #{$pi-color-accent-50};
|
--pi-color-accent-50: #{$pi-color-accent-50};
|
||||||
--pi-color-accent-75: #{$pi-color-accent-75};
|
--pi-color-accent-75: #{$pi-color-accent-75};
|
||||||
--pi-color-accent-100: #{$pi-color-accent-100};
|
--pi-color-accent-100: #{$pi-color-accent-100};
|
||||||
--pi-color-accent-200: #{$pi-color-accent-200};
|
--pi-color-accent-200: #{$pi-color-accent-200};
|
||||||
--pi-color-accent-200-rgba: #{$pi-color-accent-200-rgba};
|
--pi-color-accent-200-rgba: #{$pi-color-accent-200-rgba};
|
||||||
--pi-color-accent-300: #{$pi-color-accent-300};
|
--pi-color-accent-300: #{$pi-color-accent-300};
|
||||||
--pi-color-accent-400: #{$pi-color-accent-400};
|
--pi-color-accent-400: #{$pi-color-accent-400};
|
||||||
--pi-color-accent: #{$pi-color-accent};
|
--pi-color-accent: #{$pi-color-accent};
|
||||||
--pi-color-accent-900: #{$pi-color-accent-900};
|
--pi-color-accent-900: #{$pi-color-accent-900};
|
||||||
// Warn
|
// Warn
|
||||||
--pi-color-highlighted-10: #{$pi-color-highlighted-10};
|
--pi-color-highlighted-10: #{$pi-color-highlighted-10};
|
||||||
--pi-color-highlighted-25: #{$pi-color-highlighted-25};
|
--pi-color-highlighted-25: #{$pi-color-highlighted-25};
|
||||||
--pi-color-highlighted-50: #{$pi-color-highlighted-50};
|
--pi-color-highlighted-50: #{$pi-color-highlighted-50};
|
||||||
--pi-color-highlighted-75: #{$pi-color-highlighted-75};
|
--pi-color-highlighted-75: #{$pi-color-highlighted-75};
|
||||||
--pi-color-highlighted-100: #{$pi-color-highlighted-100};
|
--pi-color-highlighted-100: #{$pi-color-highlighted-100};
|
||||||
--pi-color-highlighted-200: #{$pi-color-highlighted-200};
|
--pi-color-highlighted-200: #{$pi-color-highlighted-200};
|
||||||
--pi-color-highlighted-200-rgba: #{$pi-color-highlighted-200-rgba};
|
--pi-color-highlighted-200-rgba: #{$pi-color-highlighted-200-rgba};
|
||||||
--pi-color-highlighted-300: #{$pi-color-highlighted-300};
|
--pi-color-highlighted-300: #{$pi-color-highlighted-300};
|
||||||
--pi-color-highlighted-400: #{$pi-color-highlighted-400};
|
--pi-color-highlighted-400: #{$pi-color-highlighted-400};
|
||||||
--pi-color-highlighted: #{$pi-color-highlighted};
|
--pi-color-highlighted: #{$pi-color-highlighted};
|
||||||
--pi-color-highlighted-900: #{$pi-color-highlighted-900};
|
--pi-color-highlighted-900: #{$pi-color-highlighted-900};
|
||||||
// Warn
|
// Warn
|
||||||
--pi-color-warn-10: #{$pi-color-warn-10};
|
--pi-color-warn-10: #{$pi-color-warn-10};
|
||||||
--pi-color-warn-25: #{$pi-color-warn-25};
|
--pi-color-warn-25: #{$pi-color-warn-25};
|
||||||
--pi-color-warn-50: #{$pi-color-warn-50};
|
--pi-color-warn-50: #{$pi-color-warn-50};
|
||||||
--pi-color-warn-75: #{$pi-color-warn-75};
|
--pi-color-warn-75: #{$pi-color-warn-75};
|
||||||
--pi-color-warn-100: #{$pi-color-warn-100};
|
--pi-color-warn-100: #{$pi-color-warn-100};
|
||||||
--pi-color-warn-200: #{$pi-color-warn-200};
|
--pi-color-warn-200: #{$pi-color-warn-200};
|
||||||
--pi-color-warn-200-rgba: #{$pi-color-warn-200-rgba};
|
--pi-color-warn-200-rgba: #{$pi-color-warn-200-rgba};
|
||||||
--pi-color-warn-300: #{$pi-color-warn-300};
|
--pi-color-warn-300: #{$pi-color-warn-300};
|
||||||
--pi-color-warn-400: #{$pi-color-warn-400};
|
--pi-color-warn-400: #{$pi-color-warn-400};
|
||||||
--pi-color-warn: #{$pi-color-warn};
|
--pi-color-warn: #{$pi-color-warn};
|
||||||
--pi-color-warn-900: #{$pi-color-warn-900};
|
--pi-color-warn-900: #{$pi-color-warn-900};
|
||||||
// Success
|
// Success
|
||||||
--pi-color-success-10: #{$pi-color-success-10};
|
--pi-color-success-10: #{$pi-color-success-10};
|
||||||
--pi-color-success-25: #{$pi-color-success-25};
|
--pi-color-success-25: #{$pi-color-success-25};
|
||||||
--pi-color-success-50: #{$pi-color-success-50};
|
--pi-color-success-50: #{$pi-color-success-50};
|
||||||
--pi-color-success-75: #{$pi-color-success-75};
|
--pi-color-success-75: #{$pi-color-success-75};
|
||||||
--pi-color-success-100: #{$pi-color-success-100};
|
--pi-color-success-100: #{$pi-color-success-100};
|
||||||
--pi-color-success-200: #{$pi-color-success-200};
|
--pi-color-success-200: #{$pi-color-success-200};
|
||||||
--pi-color-success-300: #{$pi-color-success-300};
|
--pi-color-success-300: #{$pi-color-success-300};
|
||||||
--pi-color-success-400: #{$pi-color-success-400};
|
--pi-color-success-400: #{$pi-color-success-400};
|
||||||
--pi-color-success: #{$pi-color-success};
|
--pi-color-success: #{$pi-color-success};
|
||||||
--pi-color-success-900: #{$pi-color-success-900};
|
--pi-color-success-900: #{$pi-color-success-900};
|
||||||
// White
|
// White
|
||||||
--pi-color-white: #{$pi-color-white};
|
--pi-color-white: #{$pi-color-white};
|
||||||
--pi-color-white-900: #{$pi-color-white-900};
|
--pi-color-white-900: #{$pi-color-white-900};
|
||||||
--pi-color-white-rgba-03: #{$pi-color-white-rgba-03};
|
--pi-color-white-rgba-03: #{$pi-color-white-rgba-03};
|
||||||
--pi-color-white-rgba-05: #{$pi-color-white-rgba-05};
|
--pi-color-white-rgba-05: #{$pi-color-white-rgba-05};
|
||||||
--pi-color-white-rgba-06: #{$pi-color-white-rgba-06};
|
--pi-color-white-rgba-06: #{$pi-color-white-rgba-06};
|
||||||
--pi-color-white-rgba-09: #{$pi-color-white-rgba-09};
|
--pi-color-white-rgba-09: #{$pi-color-white-rgba-09};
|
||||||
// Grey
|
// Grey
|
||||||
--pi-color-grey-10: #{$pi-color-grey-10};
|
--pi-color-grey-10: #{$pi-color-grey-10};
|
||||||
--pi-color-grey-25: #{$pi-color-grey-25};
|
--pi-color-grey-25: #{$pi-color-grey-25};
|
||||||
--pi-color-grey-50: #{$pi-color-grey-50};
|
--pi-color-grey-50: #{$pi-color-grey-50};
|
||||||
--pi-color-grey-75: #{$pi-color-grey-75};
|
--pi-color-grey-75: #{$pi-color-grey-75};
|
||||||
--pi-color-grey-100: #{$pi-color-grey-100};
|
--pi-color-grey-100: #{$pi-color-grey-100};
|
||||||
--pi-color-grey-200: #{$pi-color-grey-200};
|
--pi-color-grey-200: #{$pi-color-grey-200};
|
||||||
--pi-color-grey-200: #{$pi-color-grey-200};
|
--pi-color-grey-200: #{$pi-color-grey-200};
|
||||||
--pi-color-grey-300: #{$pi-color-grey-300};
|
--pi-color-grey-300: #{$pi-color-grey-300};
|
||||||
--pi-color-grey-400: #{$pi-color-grey-400};
|
--pi-color-grey-400: #{$pi-color-grey-400};
|
||||||
--pi-color-grey: #{$pi-color-grey};
|
--pi-color-grey: #{$pi-color-grey};
|
||||||
--pi-color-grey-900: #{$pi-color-grey-900};
|
--pi-color-grey-900: #{$pi-color-grey-900};
|
||||||
// Black
|
// Black
|
||||||
--pi-color-black-200: #{$pi-color-black-200};
|
--pi-color-black-200: #{$pi-color-black-200};
|
||||||
--pi-color-black: #{$pi-color-black};
|
--pi-color-black: #{$pi-color-black};
|
||||||
// Background
|
// Background
|
||||||
--pi-color-white: #{$pi-color-white};
|
--pi-color-white: #{$pi-color-white};
|
||||||
--pi-color-background-300: #{$pi-color-background-300};
|
--pi-color-background-300: #{$pi-color-background-300};
|
||||||
--pi-color-background-400: #{$pi-color-background-400};
|
--pi-color-background-400: #{$pi-color-background-400};
|
||||||
--pi-color-background-400: #{$pi-color-background-400};
|
--pi-color-background-400: #{$pi-color-background-400};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
// Font sizes variables
|
// Font sizes variables
|
||||||
$pi-font-size-xxx-large: 2.875rem; // 46px
|
$pi-font-size-xxx-large: 2.875rem; // 46px
|
||||||
$pi-font-size-xx-large: 2.375rem; // 38px
|
$pi-font-size-xx-large: 2.375rem; // 38px
|
||||||
$pi-font-size-x-large: 1.6875rem; // 27px
|
$pi-font-size-x-large: 1.6875rem; // 27px
|
||||||
$pi-font-size-large: 1.375rem; // 22px
|
$pi-font-size-large: 1.375rem; // 22px
|
||||||
$pi-font-size-medium: 1.125rem; // 18px
|
$pi-font-size-medium: 1.125rem; // 18px
|
||||||
$pi-font-size-small: 0.9375rem; // 15px
|
$pi-font-size-small: 0.9375rem; // 15px
|
||||||
$pi-font-size-x-small: 0.75rem; // 12px
|
$pi-font-size-x-small: 0.75rem; // 12px
|
||||||
$pi-font-size-xx-small: 0.625rem; // 10px
|
$pi-font-size-xx-small: 0.625rem; // 10px
|
||||||
$pi-font-size-xxx-small: 0.5rem; // 8px
|
$pi-font-size-xxx-small: 0.5rem; // 8px
|
||||||
|
|
||||||
// Root variables
|
// Root variables
|
||||||
:root {
|
:root {
|
||||||
// Font sizes
|
// Font sizes
|
||||||
--pi-font-size-xxx-large: #{$pi-font-size-xxx-large}; // 46px
|
--pi-font-size-xxx-large: #{$pi-font-size-xxx-large}; // 46px
|
||||||
--pi-font-size-xx-large: #{$pi-font-size-xx-large}; // 38px
|
--pi-font-size-xx-large: #{$pi-font-size-xx-large}; // 38px
|
||||||
--pi-font-size-x-large: #{$pi-font-size-x-large}; // 27x
|
--pi-font-size-x-large: #{$pi-font-size-x-large}; // 27x
|
||||||
--pi-font-size-large: #{$pi-font-size-large}; // 22px
|
--pi-font-size-large: #{$pi-font-size-large}; // 22px
|
||||||
--pi-font-size-medium: #{$pi-font-size-medium}; // 18px
|
--pi-font-size-medium: #{$pi-font-size-medium}; // 18px
|
||||||
--pi-font-size-small: #{$pi-font-size-small}; // 15px
|
--pi-font-size-small: #{$pi-font-size-small}; // 15px
|
||||||
--pi-font-size-x-small: #{$pi-font-size-x-small}; // 12px
|
--pi-font-size-x-small: #{$pi-font-size-x-small}; // 12px
|
||||||
--pi-font-size-xx-small: #{$pi-font-size-xx-small}; // 10px
|
--pi-font-size-xx-small: #{$pi-font-size-xx-small}; // 10px
|
||||||
--pi-font-size-xxx-small: #{$pi-font-size-xxx-small}; // 8px
|
--pi-font-size-xxx-small: #{$pi-font-size-xxx-small}; // 8px
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,120 +1,120 @@
|
|||||||
// Spacings
|
// Spacings
|
||||||
$pi-spacing-xxxx-large: 3rem; // 48px
|
$pi-spacing-xxxx-large: 3rem; // 48px
|
||||||
$pi-spacing-xxx-large: 2.5rem; // 40px
|
$pi-spacing-xxx-large: 2.5rem; // 40px
|
||||||
$pi-spacing-xx-large: 2rem; // 32px
|
$pi-spacing-xx-large: 2rem; // 32px
|
||||||
$pi-spacing-x-large: 1.5rem; // 24px
|
$pi-spacing-x-large: 1.5rem; // 24px
|
||||||
$pi-spacing-large: 1.25rem; // 20px
|
$pi-spacing-large: 1.25rem; // 20px
|
||||||
$pi-spacing-medium: 1rem; // 16px
|
$pi-spacing-medium: 1rem; // 16px
|
||||||
$pi-spacing-small: 0.75rem; // 12px
|
$pi-spacing-small: 0.75rem; // 12px
|
||||||
$pi-spacing-x-small: 0.625rem; // 10px
|
$pi-spacing-x-small: 0.625rem; // 10px
|
||||||
$pi-spacing-xx-small: 0.5rem; // 8px
|
$pi-spacing-xx-small: 0.5rem; // 8px
|
||||||
$pi-spacing-xxx-small: 0.25rem; // 4px
|
$pi-spacing-xxx-small: 0.25rem; // 4px
|
||||||
$pi-spacing-xxxx-small: 0.125rem; // 2px
|
$pi-spacing-xxxx-small: 0.125rem; // 2px
|
||||||
$pi-spacing-xxxxx-small: 0.0625rem; // 1px
|
$pi-spacing-xxxxx-small: 0.0625rem; // 1px
|
||||||
// Global sizes
|
// Global sizes
|
||||||
$pi-height-layout-header: 4rem; // 64px
|
$pi-height-layout-header: 4rem; // 64px
|
||||||
$pi-height-header: 5rem; // 80px
|
$pi-height-header: 5rem; // 80px
|
||||||
$pi-height-header-tablet: 5.25rem; // 84px
|
$pi-height-header-tablet: 5.25rem; // 84px
|
||||||
$pi-height-header-mobile: 5rem; // 80px
|
$pi-height-header-mobile: 5rem; // 80px
|
||||||
$pi-height-footer: 4.75rem; // 76px
|
$pi-height-footer: 4.75rem; // 76px
|
||||||
$pi-height-action-bar: 8rem; // 128px
|
$pi-height-action-bar: 8rem; // 128px
|
||||||
$pi-height-header-aside: 4.75rem; // 76px
|
$pi-height-header-aside: 4.75rem; // 76px
|
||||||
$pi-height-footer-aside: 6.75rem; // 108px
|
$pi-height-footer-aside: 6.75rem; // 108px
|
||||||
$pi-height-button-large: 3rem; // 48px
|
$pi-height-button-large: 3rem; // 48px
|
||||||
$pi-size-menu-item-expanded: 3.75rem; // 60px
|
$pi-size-menu-item-expanded: 3.75rem; // 60px
|
||||||
$pi-size-menu-item-collapsed: 4.75rem; // 76px
|
$pi-size-menu-item-collapsed: 4.75rem; // 76px
|
||||||
$pi-width-container-l: 75%;
|
$pi-width-container-l: 75%;
|
||||||
$pi-width-container: 62rem; // 992px
|
$pi-width-container: 62rem; // 992px
|
||||||
$pi-width-container-s: 57.5rem; // 920px
|
$pi-width-container-s: 57.5rem; // 920px
|
||||||
$pi-width-navbar-collapsed: 7.4375rem; // 119px
|
$pi-width-navbar-collapsed: 7.4375rem; // 119px
|
||||||
$pi-width-navbar-expanded: 16rem; // 256px
|
$pi-width-navbar-expanded: 16rem; // 256px
|
||||||
$pi-width-children-menu-expanded: 17rem; // 272px
|
$pi-width-children-menu-expanded: 17rem; // 272px
|
||||||
$pi-width-aside: 22.125rem; // 354px;
|
$pi-width-aside: 22.125rem; // 354px;
|
||||||
// Cards
|
// Cards
|
||||||
$pi-height-card: 22rem; // 352px
|
$pi-height-card: 22rem; // 352px
|
||||||
$pi-height-card-s: 19.375rem; // 310px
|
$pi-height-card-s: 19.375rem; // 310px
|
||||||
$pi-width-card-xs: 17.125rem; // 274px
|
$pi-width-card-xs: 17.125rem; // 274px
|
||||||
$pi-width-card-s: 18.25rem; // 292px
|
$pi-width-card-s: 18.25rem; // 292px
|
||||||
$pi-width-card: 21.5rem; // 344px
|
$pi-width-card: 21.5rem; // 344px
|
||||||
// Radius
|
// Radius
|
||||||
$pi-border-radius-xx-small: 0.125rem; // 2px
|
$pi-border-radius-xx-small: 0.125rem; // 2px
|
||||||
$pi-border-radius-x-small: 0.3125rem; // 5px
|
$pi-border-radius-x-small: 0.3125rem; // 5px
|
||||||
$pi-border-radius-small: 0.625rem; // 10px
|
$pi-border-radius-small: 0.625rem; // 10px
|
||||||
$pi-border-radius-medium: 1rem; // 16px
|
$pi-border-radius-medium: 1rem; // 16px
|
||||||
$pi-border-radius-large: 1.375rem; // 22px
|
$pi-border-radius-large: 1.375rem; // 22px
|
||||||
$pi-border-radius-x-large: 1.375rem; // 22px
|
$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);
|
||||||
$pi-box-shadow-panel-disabled: 7px 7px 12px 0px rgba(#c5c5ce, 0.04);
|
$pi-box-shadow-panel-disabled: 7px 7px 12px 0px rgba(#c5c5ce, 0.04);
|
||||||
$pi-box-shadow-inset: 0 0 42px -5px rgba(#c3d5ff, 0.2) inset;
|
$pi-box-shadow-inset: 0 0 42px -5px rgba(#c3d5ff, 0.2) inset;
|
||||||
// Animation
|
// Animation
|
||||||
$pi-animation: all 0.25s ease-out;
|
$pi-animation: all 0.25s ease-out;
|
||||||
$pi-animation-fast: all 0.16s ease-out;
|
$pi-animation-fast: all 0.16s ease-out;
|
||||||
$pi-animation-slow: all 0.4s ease-out;
|
$pi-animation-slow: all 0.4s ease-out;
|
||||||
|
|
||||||
// Root variables
|
// Root variables
|
||||||
:root {
|
:root {
|
||||||
// Spacings
|
// Spacings
|
||||||
--pi-spacing-xxxx-large: #{$pi-spacing-xxxx-large}; // 3rem; // 48px
|
--pi-spacing-xxxx-large: #{$pi-spacing-xxxx-large}; // 3rem; // 48px
|
||||||
--pi-spacing-xxx-large: #{$pi-spacing-xxx-large}; // 2.5rem; // 40px
|
--pi-spacing-xxx-large: #{$pi-spacing-xxx-large}; // 2.5rem; // 40px
|
||||||
--pi-spacing-xx-large: #{$pi-spacing-xx-large}; // 2rem; // 32px
|
--pi-spacing-xx-large: #{$pi-spacing-xx-large}; // 2rem; // 32px
|
||||||
--pi-spacing-x-large: #{$pi-spacing-x-large}; // 1.5rem; // 24px
|
--pi-spacing-x-large: #{$pi-spacing-x-large}; // 1.5rem; // 24px
|
||||||
--pi-spacing-large: #{$pi-spacing-large}; // 1.25rem; // 20px
|
--pi-spacing-large: #{$pi-spacing-large}; // 1.25rem; // 20px
|
||||||
--pi-spacing-medium: #{$pi-spacing-medium}; // 1rem; // 16px
|
--pi-spacing-medium: #{$pi-spacing-medium}; // 1rem; // 16px
|
||||||
--pi-spacing-small: #{$pi-spacing-small}; // 0.75rem; // 12px
|
--pi-spacing-small: #{$pi-spacing-small}; // 0.75rem; // 12px
|
||||||
--pi-spacing-x-small: #{$pi-spacing-x-small}; // 0.625rem; // 10px
|
--pi-spacing-x-small: #{$pi-spacing-x-small}; // 0.625rem; // 10px
|
||||||
--pi-spacing-xx-small: #{$pi-spacing-xx-small}; // 0.5rem; // 8px
|
--pi-spacing-xx-small: #{$pi-spacing-xx-small}; // 0.5rem; // 8px
|
||||||
--pi-spacing-xxx-small: #{$pi-spacing-xxx-small}; // 0.25rem; // 4px
|
--pi-spacing-xxx-small: #{$pi-spacing-xxx-small}; // 0.25rem; // 4px
|
||||||
--pi-spacing-xxxx-small: #{$pi-spacing-xxxx-small}; // 0.125rem; // 2px
|
--pi-spacing-xxxx-small: #{$pi-spacing-xxxx-small}; // 0.125rem; // 2px
|
||||||
--pi-spacing-xxxxx-small: #{$pi-spacing-xxxxx-small}; // 0.0625rem // 1px
|
--pi-spacing-xxxxx-small: #{$pi-spacing-xxxxx-small}; // 0.0625rem // 1px
|
||||||
// Global Sizes
|
// Global Sizes
|
||||||
--pi-height-layout-header: #{$pi-height-layout-header}; // 4rem; // 64px
|
--pi-height-layout-header: #{$pi-height-layout-header}; // 4rem; // 64px
|
||||||
--pi-height-header: #{$pi-height-header}; // 5rem; // 80px
|
--pi-height-header: #{$pi-height-header}; // 5rem; // 80px
|
||||||
--pi-height-header-tablet: #{$pi-height-header-tablet}; // 3.75rem;// 60px
|
--pi-height-header-tablet: #{$pi-height-header-tablet}; // 3.75rem;// 60px
|
||||||
--pi-height-header-mobile: #{$pi-height-header-mobile}; // 3.5rem;// 56px
|
--pi-height-header-mobile: #{$pi-height-header-mobile}; // 3.5rem;// 56px
|
||||||
--pi-height-footer: #{$pi-height-footer}; // 4.75rem; // 76px
|
--pi-height-footer: #{$pi-height-footer}; // 4.75rem; // 76px
|
||||||
--pi-height-header-aside: #{$pi-height-header-aside}; // 4.75rem; // 76px
|
--pi-height-header-aside: #{$pi-height-header-aside}; // 4.75rem; // 76px
|
||||||
--pi-height-footer-aside: #{$pi-height-footer-aside}; // 6.75rem; // 108px
|
--pi-height-footer-aside: #{$pi-height-footer-aside}; // 6.75rem; // 108px
|
||||||
--pi-height-button-large: #{$pi-height-button-large}; // 3rem // 48px
|
--pi-height-button-large: #{$pi-height-button-large}; // 3rem // 48px
|
||||||
--pi-size-menu-item-expanded: #{$pi-size-menu-item-expanded}; // 3.75rem; // 60px
|
--pi-size-menu-item-expanded: #{$pi-size-menu-item-expanded}; // 3.75rem; // 60px
|
||||||
--pi-size-menu-item-collapsed: #{$pi-size-menu-item-collapsed}; // 4.75rem; // 76px
|
--pi-size-menu-item-collapsed: #{$pi-size-menu-item-collapsed}; // 4.75rem; // 76px
|
||||||
--pi-width-container-l: #{$pi-width-container-l}; // 71.25rem; // 1140px
|
--pi-width-container-l: #{$pi-width-container-l}; // 71.25rem; // 1140px
|
||||||
--pi-width-container: #{$pi-width-container}; // 62rem; // 992px
|
--pi-width-container: #{$pi-width-container}; // 62rem; // 992px
|
||||||
--pi-width-container-s: #{$pi-width-container-s}; // 57.5rem; // 920px
|
--pi-width-container-s: #{$pi-width-container-s}; // 57.5rem; // 920px
|
||||||
--pi-width-navbar-collapsed: #{$pi-width-navbar-collapsed}; // 7.4375rem; // 119px
|
--pi-width-navbar-collapsed: #{$pi-width-navbar-collapsed}; // 7.4375rem; // 119px
|
||||||
--pi-width-navbar-expanded: #{$pi-width-navbar-expanded}; // 16rem; // 256px
|
--pi-width-navbar-expanded: #{$pi-width-navbar-expanded}; // 16rem; // 256px
|
||||||
--pi-width-children-menu-expanded: #{$pi-width-children-menu-expanded}; // 21.25rem // 340px
|
--pi-width-children-menu-expanded: #{$pi-width-children-menu-expanded}; // 21.25rem // 340px
|
||||||
--pi-width-aside: #{$pi-width-aside}; // 22.125rem; // 354px;
|
--pi-width-aside: #{$pi-width-aside}; // 22.125rem; // 354px;
|
||||||
// Cards
|
// Cards
|
||||||
--pi-height-card: #{$pi-height-card}; // 22rem; // 352px
|
--pi-height-card: #{$pi-height-card}; // 22rem; // 352px
|
||||||
--pi-height-card-s: #{$pi-height-card-s}; // 19.375rem // 310px
|
--pi-height-card-s: #{$pi-height-card-s}; // 19.375rem // 310px
|
||||||
--pi-width-card-xs: #{$pi-width-card-s}; // 17.125rem // 274px
|
--pi-width-card-xs: #{$pi-width-card-s}; // 17.125rem // 274px
|
||||||
--pi-width-card-s: #{$pi-width-card-xs}; // 18.25rem // 2274px
|
--pi-width-card-s: #{$pi-width-card-xs}; // 18.25rem // 2274px
|
||||||
--pi-width-card: #{$pi-width-card}; // 21.5rem // 344px
|
--pi-width-card: #{$pi-width-card}; // 21.5rem // 344px
|
||||||
// Radius
|
// Radius
|
||||||
--pi-border-radius-xx-small: #{$pi-border-radius-xx-small}; // 2px; // 0.125rem
|
--pi-border-radius-xx-small: #{$pi-border-radius-xx-small}; // 2px; // 0.125rem
|
||||||
--pi-border-radius-x-small: #{$pi-border-radius-x-small}; // 6px; // .375rem;
|
--pi-border-radius-x-small: #{$pi-border-radius-x-small}; // 6px; // .375rem;
|
||||||
--pi-border-radius-small: #{$pi-border-radius-small}; // 10px; // 3.125rem
|
--pi-border-radius-small: #{$pi-border-radius-small}; // 10px; // 3.125rem
|
||||||
--pi-border-radius-medium: #{$pi-border-radius-medium}; // 0.875rem; // 14px
|
--pi-border-radius-medium: #{$pi-border-radius-medium}; // 0.875rem; // 14px
|
||||||
--pi-border-radius-large: #{$pi-border-radius-large}; // 1.25rem; // 20px
|
--pi-border-radius-large: #{$pi-border-radius-large}; // 1.25rem; // 20px
|
||||||
// Box shadow
|
// Box shadow
|
||||||
--pi-box-shadow: #{$pi-box-shadow}; // rgba(#030f3c, 0.03) 3px 6px 6px 0px;
|
--pi-box-shadow: #{$pi-box-shadow}; // rgba(#030f3c, 0.03) 3px 6px 6px 0px;
|
||||||
--pi-box-shadow-hover: #{$pi-box-shadow-hover}; //rgba(#030f3c, 0.06) 2px 2px 4px 0px;
|
--pi-box-shadow-hover: #{$pi-box-shadow-hover}; //rgba(#030f3c, 0.06) 2px 2px 4px 0px;
|
||||||
--pi-box-shadow-double: #{$pi-box-shadow-double}; // rgba(197, 197, 206, 0.1) 3px 6px 6px 0px, -1px 4px 16px 2px rgba(197, 197, 206, 0.05);
|
--pi-box-shadow-double: #{$pi-box-shadow-double}; // rgba(197, 197, 206, 0.1) 3px 6px 6px 0px, -1px 4px 16px 2px rgba(197, 197, 206, 0.05);
|
||||||
--pi-box-shadow-panel-double: #{$pi-box-shadow-panel-double}; // 10px 10px 16px 0px rgba(#030f3c, 0.02),
|
--pi-box-shadow-panel-double: #{$pi-box-shadow-panel-double}; // 10px 10px 16px 0px rgba(#030f3c, 0.02),
|
||||||
// -10px 10px 16px 0px rgba(#030f3c, 0.02);
|
// -10px 10px 16px 0px rgba(#030f3c, 0.02);
|
||||||
--pi-box-shadow-panel: #{$pi-box-shadow-panel}; // 10px 10px 16px 0px rgba(#030f3c, 0.08);
|
--pi-box-shadow-panel: #{$pi-box-shadow-panel}; // 10px 10px 16px 0px rgba(#030f3c, 0.08);
|
||||||
--pi-box-shadow-top: #{$pi-box-shadow-top}; // 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
|
--pi-box-shadow-top: #{$pi-box-shadow-top}; // 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
|
||||||
--pi-box-shadow-inset: #{$pi-box-shadow-inset}; // 0 0 42px -5px rgba(#c3d5ff, 0.14) inset;
|
--pi-box-shadow-inset: #{$pi-box-shadow-inset}; // 0 0 42px -5px rgba(#c3d5ff, 0.14) inset;
|
||||||
// Animation
|
// Animation
|
||||||
--pi-animation: #{$pi-animation}; // all 0.25s ease;
|
--pi-animation: #{$pi-animation}; // all 0.25s ease;
|
||||||
--pi-animation-fast: #{$pi-animation-fast}; // all 0.16s ease;
|
--pi-animation-fast: #{$pi-animation-fast}; // all 0.16s ease;
|
||||||
--pi-animation-slow: #{$pi-animation-slow}; // all 0.4s ease;
|
--pi-animation-slow: #{$pi-animation-slow}; // all 0.4s ease;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,240 +1,240 @@
|
|||||||
// Gradients
|
// Gradients
|
||||||
// Primary
|
// Primary
|
||||||
// Primary light
|
// Primary light
|
||||||
$pi-gradient-primary-light: linear-gradient(
|
$pi-gradient-primary-light: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-primary-75) 0.75%,
|
var(--pi-color-primary-75) 0.75%,
|
||||||
var(--pi-color-primary-25) 99.2%
|
var(--pi-color-primary-25) 99.2%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-primary-light-rgba: linear-gradient(
|
$pi-gradient-primary-light-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(215, 226, 251, 0.33) 0%,
|
rgba(215, 226, 251, 0.33) 0%,
|
||||||
rgba(240, 244, 255, 0.125) 100%
|
rgba(240, 244, 255, 0.125) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-primary-light-rgba-hover: linear-gradient(
|
$pi-gradient-primary-light-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(215, 226, 251, 0.66) 0%,
|
rgba(215, 226, 251, 0.66) 0%,
|
||||||
rgba(240, 244, 255, 0.33) 100%
|
rgba(240, 244, 255, 0.33) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
// Primary dark
|
// Primary dark
|
||||||
$pi-gradient-primary-dark: linear-gradient(
|
$pi-gradient-primary-dark: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-primary-900) 0.75%,
|
var(--pi-color-primary-900) 0.75%,
|
||||||
var(--pi-color-primary-400) 99.2%
|
var(--pi-color-primary-400) 99.2%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-primary-dark-rgba: linear-gradient(
|
$pi-gradient-primary-dark-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(121, 158, 240, 0.32) 0%,
|
rgba(121, 158, 240, 0.32) 0%,
|
||||||
rgba(0, 0, 0, 0.125) 100%
|
rgba(0, 0, 0, 0.125) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-primary-dark-rgba-hover: linear-gradient(
|
$pi-gradient-primary-dark-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(121, 158, 240, 0.42) 0%,
|
rgba(121, 158, 240, 0.42) 0%,
|
||||||
rgba(0, 0, 0, 0.25) 100%
|
rgba(0, 0, 0, 0.25) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-primary-dark-disabled: linear-gradient(
|
$pi-gradient-primary-dark-disabled: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-primary-900) 0.75%,
|
var(--pi-color-primary-900) 0.75%,
|
||||||
var(--pi-color-primary-400) 99.2%
|
var(--pi-color-primary-400) 99.2%
|
||||||
);
|
);
|
||||||
|
|
||||||
// Accent
|
// Accent
|
||||||
// Accent light
|
// Accent light
|
||||||
$pi-gradient-accent-light: linear-gradient(
|
$pi-gradient-accent-light: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-accent-75) 0.75%,
|
var(--pi-color-accent-75) 0.75%,
|
||||||
var(--pi-color-accent-25) 99.2%
|
var(--pi-color-accent-25) 99.2%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-accent-light-rgba: linear-gradient(
|
$pi-gradient-accent-light-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(253, 235, 202, 0.61) 0%,
|
rgba(253, 235, 202, 0.61) 0%,
|
||||||
rgba(253, 245, 229, 0.125) 100%
|
rgba(253, 245, 229, 0.125) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-accent-light-rgba-hover: linear-gradient(
|
$pi-gradient-accent-light-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(253, 235, 202, 0.81) 0%,
|
rgba(253, 235, 202, 0.81) 0%,
|
||||||
rgba(253, 245, 229, 0.25) 100%
|
rgba(253, 245, 229, 0.25) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
// Accent dark
|
// Accent dark
|
||||||
$pi-gradient-accent-dark: linear-gradient(
|
$pi-gradient-accent-dark: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-accent-900) 0.75%,
|
var(--pi-color-accent-900) 0.75%,
|
||||||
var(--pi-color-accent-400) 99.2%
|
var(--pi-color-accent-400) 99.2%
|
||||||
);
|
);
|
||||||
$pi-gradient-accent-dark-rgba: linear-gradient(
|
$pi-gradient-accent-dark-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(253, 235, 202, 0.61) 0%,
|
rgba(253, 235, 202, 0.61) 0%,
|
||||||
rgba(0, 0, 0, 0.125) 100%
|
rgba(0, 0, 0, 0.125) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-accent-dark-rgba-hover: linear-gradient(
|
$pi-gradient-accent-dark-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(253, 235, 202, 0.81) 0%,
|
rgba(253, 235, 202, 0.81) 0%,
|
||||||
rgba(0, 0, 0, 0.25) 100%
|
rgba(0, 0, 0, 0.25) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
// Highlighted
|
// Highlighted
|
||||||
// Highlighted light
|
// Highlighted light
|
||||||
$pi-gradient-highlighted-light: linear-gradient(
|
$pi-gradient-highlighted-light: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-highlighted-75) 0.75%,
|
var(--pi-color-highlighted-75) 0.75%,
|
||||||
var(--pi-color-highlighted-25) 99.2%
|
var(--pi-color-highlighted-25) 99.2%
|
||||||
);
|
);
|
||||||
$pi-gradient-highlighted-light-rgba: linear-gradient(
|
$pi-gradient-highlighted-light-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(100, 130, 215, 0.24) 0%,
|
rgba(100, 130, 215, 0.24) 0%,
|
||||||
rgba(255, 255, 255, 0.125) 100%
|
rgba(255, 255, 255, 0.125) 100%
|
||||||
);
|
);
|
||||||
$pi-gradient-highlighted-light-rgba-hover: linear-gradient(
|
$pi-gradient-highlighted-light-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(100, 130, 215, 0.44) 0%,
|
rgba(100, 130, 215, 0.44) 0%,
|
||||||
rgba(255, 255, 255, 0.25) 100%
|
rgba(255, 255, 255, 0.25) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
// Highlighted dark
|
// Highlighted dark
|
||||||
$pi-gradient-highlighted-dark: linear-gradient(
|
$pi-gradient-highlighted-dark: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-highlighted-900) 0.89%,
|
var(--pi-color-highlighted-900) 0.89%,
|
||||||
var(--pi-color-highlighted) 99.2%
|
var(--pi-color-highlighted) 99.2%
|
||||||
);
|
);
|
||||||
$pi-gradient-highlighted-dark-rgba: linear-gradient(
|
$pi-gradient-highlighted-dark-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(100, 130, 215, 0.24) 0%,
|
rgba(100, 130, 215, 0.24) 0%,
|
||||||
rgba(0, 0, 0, 0.125) 100%
|
rgba(0, 0, 0, 0.125) 100%
|
||||||
);
|
);
|
||||||
$pi-gradient-highlighted-dark-rgba-hover: linear-gradient(
|
$pi-gradient-highlighted-dark-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(100, 130, 215, 0.44) 0%,
|
rgba(100, 130, 215, 0.44) 0%,
|
||||||
rgba(0, 0, 0, 0.25) 100%
|
rgba(0, 0, 0, 0.25) 100%
|
||||||
);
|
);
|
||||||
// Grey
|
// Grey
|
||||||
// Grey light
|
// Grey light
|
||||||
$pi-gradient-grey-light: linear-gradient(
|
$pi-gradient-grey-light: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-grey-75) 0.75%,
|
var(--pi-color-grey-75) 0.75%,
|
||||||
var(--pi-color-grey-25) 99.2%
|
var(--pi-color-grey-25) 99.2%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-grey-light-rgba: linear-gradient(
|
$pi-gradient-grey-light-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(233, 235, 241, 0.25) 0%,
|
rgba(233, 235, 241, 0.25) 0%,
|
||||||
rgba(243, 244, 244, 0.125) 100%
|
rgba(243, 244, 244, 0.125) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-grey-light-rgba-hover: linear-gradient(
|
$pi-gradient-grey-light-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(233, 235, 241, 0.5) 0%,
|
rgba(233, 235, 241, 0.5) 0%,
|
||||||
rgba(243, 244, 244, 0.25) 100%
|
rgba(243, 244, 244, 0.25) 100%
|
||||||
);
|
);
|
||||||
// Grey dark
|
// Grey dark
|
||||||
$pi-gradient-grey-dark: linear-gradient(
|
$pi-gradient-grey-dark: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-grey-900) 0.89%,
|
var(--pi-color-grey-900) 0.89%,
|
||||||
var(--pi-color-grey) 99.2%
|
var(--pi-color-grey) 99.2%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-grey-dark-rgba: linear-gradient(
|
$pi-gradient-grey-dark-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(61, 61, 61, 0.61) 0%,
|
rgba(61, 61, 61, 0.61) 0%,
|
||||||
rgba(0, 0, 0, 0.125) 100%
|
rgba(0, 0, 0, 0.125) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-grey-dark-rgba-hover: linear-gradient(
|
$pi-gradient-grey-dark-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(61, 61, 61, 0.81) 0%,
|
rgba(61, 61, 61, 0.81) 0%,
|
||||||
rgba(0, 0, 0, 0.25) 100%
|
rgba(0, 0, 0, 0.25) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
// White
|
// White
|
||||||
$pi-gradient-white: linear-gradient(
|
$pi-gradient-white: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
var(--pi-color-white-900) 0.89%,
|
var(--pi-color-white-900) 0.89%,
|
||||||
var(--pi-color-white) 99.2%
|
var(--pi-color-white) 99.2%
|
||||||
);
|
);
|
||||||
$pi-gradient-white-rgba-disabled: linear-gradient(
|
$pi-gradient-white-rgba-disabled: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(255, 255, 255, 0.25) 0%,
|
rgba(255, 255, 255, 0.25) 0%,
|
||||||
rgba(255, 255, 255, 0.33) 100%
|
rgba(255, 255, 255, 0.33) 100%
|
||||||
);
|
);
|
||||||
$pi-gradient-white-rgba: linear-gradient(
|
$pi-gradient-white-rgba: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(255, 255, 255, 0.33) 0%,
|
rgba(255, 255, 255, 0.33) 0%,
|
||||||
rgba(255, 255, 255, 0.44) 100%
|
rgba(255, 255, 255, 0.44) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
$pi-gradient-white-rgba-hover: linear-gradient(
|
$pi-gradient-white-rgba-hover: linear-gradient(
|
||||||
131deg,
|
131deg,
|
||||||
rgba(255, 255, 255, 0.5) 0%,
|
rgba(255, 255, 255, 0.5) 0%,
|
||||||
rgba(255, 255, 255, 0.7) 100%
|
rgba(255, 255, 255, 0.7) 100%
|
||||||
);
|
);
|
||||||
// Disabled
|
// Disabled
|
||||||
// Light
|
// Light
|
||||||
$pi-gradient-light-disabled: linear-gradient(
|
$pi-gradient-light-disabled: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
rgba(192, 192, 192, 1) 0.75%,
|
rgba(192, 192, 192, 1) 0.75%,
|
||||||
rgba(242, 242, 242, 1) 99.2%
|
rgba(242, 242, 242, 1) 99.2%
|
||||||
);
|
);
|
||||||
// Dark
|
// Dark
|
||||||
$pi-gradient-dark-disabled: linear-gradient(
|
$pi-gradient-dark-disabled: linear-gradient(
|
||||||
36.98deg,
|
36.98deg,
|
||||||
rgba(138, 138, 138, 1) 0.89%,
|
rgba(138, 138, 138, 1) 0.89%,
|
||||||
rgba(182, 182, 182, 1) 99.2%
|
rgba(182, 182, 182, 1) 99.2%
|
||||||
);
|
);
|
||||||
:root {
|
:root {
|
||||||
// Gradient
|
// Gradient
|
||||||
// Primary
|
// Primary
|
||||||
// Primary & Light
|
// Primary & Light
|
||||||
--pi-gradient-primary-light: #{$pi-gradient-primary-light};
|
--pi-gradient-primary-light: #{$pi-gradient-primary-light};
|
||||||
|
|
||||||
--pi-gradient-primary-light-rgba: #{$pi-gradient-primary-light-rgba};
|
--pi-gradient-primary-light-rgba: #{$pi-gradient-primary-light-rgba};
|
||||||
--pi-gradient-primary-light-rgba-hover: #{$pi-gradient-primary-light-rgba-hover};
|
--pi-gradient-primary-light-rgba-hover: #{$pi-gradient-primary-light-rgba-hover};
|
||||||
// Primary & Dark
|
// Primary & Dark
|
||||||
--pi-gradient-primary-dark: #{$pi-gradient-primary-dark};
|
--pi-gradient-primary-dark: #{$pi-gradient-primary-dark};
|
||||||
|
|
||||||
--pi-gradient-primary-dark-rgba: #{$pi-gradient-primary-dark-rgba};
|
--pi-gradient-primary-dark-rgba: #{$pi-gradient-primary-dark-rgba};
|
||||||
--pi-gradient-primary-dark-rgba-hover: #{$pi-gradient-primary-dark-rgba-hover};
|
--pi-gradient-primary-dark-rgba-hover: #{$pi-gradient-primary-dark-rgba-hover};
|
||||||
// Accent
|
// Accent
|
||||||
// Accent & Light
|
// Accent & Light
|
||||||
--pi-gradient-accent-light: #{$pi-gradient-accent-light};
|
--pi-gradient-accent-light: #{$pi-gradient-accent-light};
|
||||||
--pi-gradient-accent-light-rgba: #{$pi-gradient-accent-light-rgba};
|
--pi-gradient-accent-light-rgba: #{$pi-gradient-accent-light-rgba};
|
||||||
--pi-gradient-accent-light-rgba-hover: #{$pi-gradient-accent-light-rgba-hover};
|
--pi-gradient-accent-light-rgba-hover: #{$pi-gradient-accent-light-rgba-hover};
|
||||||
// Accent & Dark
|
// Accent & Dark
|
||||||
--pi-gradient-accent-dark: #{$pi-gradient-accent-dark};
|
--pi-gradient-accent-dark: #{$pi-gradient-accent-dark};
|
||||||
--pi-gradient-accent-dark-rgba: #{$pi-gradient-accent-dark-rgba};
|
--pi-gradient-accent-dark-rgba: #{$pi-gradient-accent-dark-rgba};
|
||||||
--pi-gradient-accent-dark-rgba-hover: #{$pi-gradient-accent-dark-rgba-hover};
|
--pi-gradient-accent-dark-rgba-hover: #{$pi-gradient-accent-dark-rgba-hover};
|
||||||
// Highlighted
|
// Highlighted
|
||||||
// Highlighted & Light
|
// Highlighted & Light
|
||||||
--pi-gradient-highlighted-light: #{$pi-gradient-highlighted-light};
|
--pi-gradient-highlighted-light: #{$pi-gradient-highlighted-light};
|
||||||
--pi-gradient-highlighted-light-rgba: #{$pi-gradient-highlighted-light-rgba};
|
--pi-gradient-highlighted-light-rgba: #{$pi-gradient-highlighted-light-rgba};
|
||||||
--pi-gradient-highlighted-light-rgba-hover: #{$pi-gradient-highlighted-light-rgba-hover};
|
--pi-gradient-highlighted-light-rgba-hover: #{$pi-gradient-highlighted-light-rgba-hover};
|
||||||
// Highlighted & Dark
|
// Highlighted & Dark
|
||||||
--pi-gradient-highlighted-dark: #{$pi-gradient-highlighted-dark};
|
--pi-gradient-highlighted-dark: #{$pi-gradient-highlighted-dark};
|
||||||
--pi-gradient-highlighted-dark-rgba: #{$pi-gradient-highlighted-dark-rgba};
|
--pi-gradient-highlighted-dark-rgba: #{$pi-gradient-highlighted-dark-rgba};
|
||||||
--pi-gradient-highlighted-dark-rgba-hover: #{$pi-gradient-highlighted-dark-rgba-hover};
|
--pi-gradient-highlighted-dark-rgba-hover: #{$pi-gradient-highlighted-dark-rgba-hover};
|
||||||
// Grey
|
// Grey
|
||||||
// Grey & Light
|
// Grey & Light
|
||||||
--pi-gradient-grey-light: #{$pi-gradient-grey-light};
|
--pi-gradient-grey-light: #{$pi-gradient-grey-light};
|
||||||
--pi-gradient-grey-light-rgba: #{$pi-gradient-grey-light-rgba};
|
--pi-gradient-grey-light-rgba: #{$pi-gradient-grey-light-rgba};
|
||||||
--pi-gradient-grey-light-rgba-hover: #{$pi-gradient-grey-light-rgba-hover};
|
--pi-gradient-grey-light-rgba-hover: #{$pi-gradient-grey-light-rgba-hover};
|
||||||
// Grey & Dark
|
// Grey & Dark
|
||||||
--pi-gradient-grey-dark: #{$pi-gradient-grey-dark};
|
--pi-gradient-grey-dark: #{$pi-gradient-grey-dark};
|
||||||
--pi-gradient-grey-dark-rgba: #{$pi-gradient-grey-dark-rgba};
|
--pi-gradient-grey-dark-rgba: #{$pi-gradient-grey-dark-rgba};
|
||||||
--pi-gradient-grey-dark-rgba-hover: #{$pi-gradient-grey-dark-rgba-hover};
|
--pi-gradient-grey-dark-rgba-hover: #{$pi-gradient-grey-dark-rgba-hover};
|
||||||
// White
|
// White
|
||||||
--pi-gradient-white: #{$pi-gradient-white};
|
--pi-gradient-white: #{$pi-gradient-white};
|
||||||
--pi-gradient-white-rgba: #{$pi-gradient-white-rgba};
|
--pi-gradient-white-rgba: #{$pi-gradient-white-rgba};
|
||||||
--pi-gradient-white-rgba-hover: #{$pi-gradient-white-rgba-hover};
|
--pi-gradient-white-rgba-hover: #{$pi-gradient-white-rgba-hover};
|
||||||
--pi-gradient-white-rgba-disabled: #{$pi-gradient-white-rgba-disabled};
|
--pi-gradient-white-rgba-disabled: #{$pi-gradient-white-rgba-disabled};
|
||||||
// Disabled
|
// Disabled
|
||||||
--pi-gradient-light-disabled: #{$pi-gradient-light-disabled};
|
--pi-gradient-light-disabled: #{$pi-gradient-light-disabled};
|
||||||
--pi-gradient-dark-disabled: #{$pi-gradient-dark-disabled};
|
--pi-gradient-dark-disabled: #{$pi-gradient-dark-disabled};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
// Font sizes variables
|
// Font sizes variables
|
||||||
$pi-public-font-size-xxx-large: 4.25rem; // 68px
|
$pi-public-font-size-xxx-large: 4.25rem; // 68px
|
||||||
$pi-public-font-size-xx-large: 3.875rem; // 62px
|
$pi-public-font-size-xx-large: 3.875rem; // 62px
|
||||||
|
|
||||||
// Global sizes
|
// Global sizes
|
||||||
$pi-public-height-header-desktop: 4.5rem; // 72px
|
$pi-public-height-header-desktop: 4.5rem; // 72px
|
||||||
$pi-public-height-header-mobile: 4.25rem; // 68px
|
$pi-public-height-header-mobile: 4.25rem; // 68px
|
||||||
$pi-public-width-container: 72rem; // 1152px
|
$pi-public-width-container: 72rem; // 1152px
|
||||||
$pi-public-width-container-l: 90rem; // 1440px
|
$pi-public-width-container-l: 90rem; // 1440px
|
||||||
|
|
||||||
// Root variables
|
// Root variables
|
||||||
:root {
|
:root {
|
||||||
// Font sizes
|
// Font sizes
|
||||||
--pi-public-font-size-xxx-large: #{$pi-public-font-size-xxx-large}; // 4.5rem; // 72px
|
--pi-public-font-size-xxx-large: #{$pi-public-font-size-xxx-large}; // 4.5rem; // 72px
|
||||||
--pi-public-font-size-xx-large: #{$pi-public-font-size-xx-large}; // 3.875rem; // 62px
|
--pi-public-font-size-xx-large: #{$pi-public-font-size-xx-large}; // 3.875rem; // 62px
|
||||||
|
|
||||||
// Global sizes
|
// Global sizes
|
||||||
--pi-public-height-header-desktop: #{$pi-public-height-header-desktop}; // 5.25rem; // 84px
|
--pi-public-height-header-desktop: #{$pi-public-height-header-desktop}; // 5.25rem; // 84px
|
||||||
--pi-public-height-header-mobile: #{$pi-public-height-header-mobile}; // 4.125rem; // 66px
|
--pi-public-height-header-mobile: #{$pi-public-height-header-mobile}; // 4.125rem; // 66px
|
||||||
--pi-public-width-container: #{$pi-public-width-container}; // 72rem; // 1152px
|
--pi-public-width-container: #{$pi-public-width-container}; // 72rem; // 1152px
|
||||||
--pi-public-width-container-l: #{$pi-public-width-container-l}; // 90rem; // 1440px
|
--pi-public-width-container-l: #{$pi-public-width-container-l}; // 90rem; // 1440px
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
@forward 'pi-color-variables';
|
@forward 'pi-color-variables';
|
||||||
@forward 'pi-font-sizes-variables';
|
@forward 'pi-font-sizes-variables';
|
||||||
@forward 'pi-gradient-variables';
|
@forward 'pi-gradient-variables';
|
||||||
@forward 'pi-public-variables';
|
@forward 'pi-public-variables';
|
||||||
@forward 'pi-global-variables';
|
@forward 'pi-global-variables';
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,119 +1,119 @@
|
|||||||
// Light - 300
|
// Light - 300
|
||||||
@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') format('woff2'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'),
|
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.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;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Light italic - 300
|
// Light italic - 300
|
||||||
@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'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff')
|
||||||
format('woff'),
|
format('woff'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.ttf')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.ttf')
|
||||||
format('truetype'),
|
format('truetype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.svg#soehne-leicht-kursiv')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.svg#soehne-leicht-kursiv')
|
||||||
format('svg');
|
format('svg');
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Regular - 400
|
// Regular - 400
|
||||||
@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') format('woff2'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'),
|
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.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;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Regular italic - 400
|
// Regular italic - 400
|
||||||
@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')
|
||||||
format('svg');
|
format('svg');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Medium - 600
|
// Medium - 600
|
||||||
@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') format('woff2'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'),
|
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.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;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bold - 700
|
// Bold - 700
|
||||||
@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') format('woff2'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'),
|
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.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;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Black - 800
|
// Black - 800
|
||||||
@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'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff')
|
||||||
format('woff'),
|
format('woff'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.ttf')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.ttf')
|
||||||
format('truetype'),
|
format('truetype'),
|
||||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.svg#soehne-dreiviertelfett')
|
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.svg#soehne-dreiviertelfett')
|
||||||
format('svg');
|
format('svg');
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
@forward 'pi-reset';
|
@forward 'pi-reset';
|
||||||
@forward 'pi-tipography';
|
@forward 'pi-tipography';
|
||||||
|
|||||||
@@ -1,116 +1,116 @@
|
|||||||
@mixin accordionHeaderDescription($white-space: wrap) {
|
@mixin accordionHeaderDescription($white-space: wrap) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
.pi-accordion {
|
.pi-accordion {
|
||||||
& > .pi-accordion-item {
|
& > .pi-accordion-item {
|
||||||
& > .pi-accordion-item-content {
|
& > .pi-accordion-item-content {
|
||||||
&.pi-accordion-item-content__header {
|
&.pi-accordion-item-content__header {
|
||||||
& > .pi-text-viewer {
|
& > .pi-text-viewer {
|
||||||
& > article {
|
& > article {
|
||||||
& > span {
|
& > span {
|
||||||
white-space: $white-space;
|
white-space: $white-space;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-accordion {
|
.pi-accordion {
|
||||||
& > .pi-accordion-item {
|
& > .pi-accordion-item {
|
||||||
& > .pi-accordion-item-content {
|
& > .pi-accordion-item-content {
|
||||||
&.pi-accordion-item-content__header {
|
&.pi-accordion-item-content__header {
|
||||||
& > .pi-text-viewer {
|
& > .pi-text-viewer {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
& > article {
|
& > article {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
& > span {
|
& > span {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-accordion {
|
.pi-accordion {
|
||||||
.pi-note-content__label {
|
.pi-note-content__label {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Horizontal
|
// Horizontal
|
||||||
&.pi-accordion__direction--horizontal {
|
&.pi-accordion__direction--horizontal {
|
||||||
& > * {
|
& > * {
|
||||||
& > .pi-accordion-item-content {
|
& > .pi-accordion-item-content {
|
||||||
&.pi-accordion-item-content__header {
|
&.pi-accordion-item-content__header {
|
||||||
&.is-expanded {
|
&.is-expanded {
|
||||||
.pi-list-item-content {
|
.pi-list-item-content {
|
||||||
&.pi-list-item-content__left {
|
&.pi-list-item-content__left {
|
||||||
font: {
|
font: {
|
||||||
weight: 600;
|
weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.is-disabled) {
|
&:not(.is-disabled) {
|
||||||
&:hover {
|
&:hover {
|
||||||
* {
|
* {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Type
|
// Type
|
||||||
// Default
|
// Default
|
||||||
&: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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include accordionHeaderDescription;
|
@include accordionHeaderDescription;
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
.pi-accordion {
|
.pi-accordion {
|
||||||
// Default (Vertical)
|
// Default (Vertical)
|
||||||
&:not(.pi-accordion__direction--horizontal) {
|
&:not(.pi-accordion__direction--horizontal) {
|
||||||
// Accordion item
|
// Accordion item
|
||||||
& > .pi-accordion-item {
|
& > .pi-accordion-item {
|
||||||
& > .pi-accordion-item-content__header {
|
& > .pi-accordion-item-content__header {
|
||||||
&.has-status {
|
&.has-status {
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
& > aside {
|
& > aside {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
& > span {
|
& > span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
@include accordionHeaderDescription(nowrap);
|
@include accordionHeaderDescription(nowrap);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,105 +1,105 @@
|
|||||||
@mixin dividerIconSize($size) {
|
@mixin dividerIconSize($size) {
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
height: var(--pi-spacing-#{$size}) !important;
|
height: var(--pi-spacing-#{$size}) !important;
|
||||||
width: var(--pi-spacing-#{$size}) !important;
|
width: var(--pi-spacing-#{$size}) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin dividerIconColor($icon-color) {
|
@mixin dividerIconColor($icon-color) {
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
&:not(.pi-icon__appearance--fill) {
|
&:not(.pi-icon__appearance--fill) {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
color: var(--pi-color-#{$icon-color});
|
color: var(--pi-color-#{$icon-color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-icon__appearance--fill {
|
&.pi-icon__appearance--fill {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
color: var(--pi-color-#{$icon-color});
|
color: var(--pi-color-#{$icon-color});
|
||||||
}
|
}
|
||||||
&.is-stroked {
|
&.is-stroked {
|
||||||
border-color: var(--pi-color-#{$icon-color});
|
border-color: var(--pi-color-#{$icon-color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-divider {
|
.pi-divider {
|
||||||
// Icon Color
|
// Icon Color
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
@include dividerIconColor(primary);
|
@include dividerIconColor(primary);
|
||||||
}
|
}
|
||||||
&.pi-color__accent {
|
&.pi-color__accent {
|
||||||
@include dividerIconColor(accent);
|
@include dividerIconColor(accent);
|
||||||
}
|
}
|
||||||
&.pi-color__warn {
|
&.pi-color__warn {
|
||||||
@include dividerIconColor(warn);
|
@include dividerIconColor(warn);
|
||||||
}
|
}
|
||||||
&.pi-color__success {
|
&.pi-color__success {
|
||||||
@include dividerIconColor(success);
|
@include dividerIconColor(success);
|
||||||
}
|
}
|
||||||
&.pi-color__white {
|
&.pi-color__white {
|
||||||
@include dividerIconColor(white);
|
@include dividerIconColor(white);
|
||||||
}
|
}
|
||||||
&.pi-color__black {
|
&.pi-color__black {
|
||||||
@include dividerIconColor(black);
|
@include dividerIconColor(black);
|
||||||
}
|
}
|
||||||
&.pi-color__grey {
|
&.pi-color__grey {
|
||||||
@include dividerIconColor(grey-100);
|
@include dividerIconColor(grey-100);
|
||||||
}
|
}
|
||||||
&.pi-color__highlighted {
|
&.pi-color__highlighted {
|
||||||
@include dividerIconColor(highlighted);
|
@include dividerIconColor(highlighted);
|
||||||
}
|
}
|
||||||
&.pi-color__black-primary {
|
&.pi-color__black-primary {
|
||||||
@include dividerIconColor(primary);
|
@include dividerIconColor(primary);
|
||||||
}
|
}
|
||||||
&.pi-color__primary-black {
|
&.pi-color__primary-black {
|
||||||
@include dividerIconColor(black);
|
@include dividerIconColor(black);
|
||||||
}
|
}
|
||||||
&.pi-color__black-accent {
|
&.pi-color__black-accent {
|
||||||
@include dividerIconColor(accent);
|
@include dividerIconColor(accent);
|
||||||
}
|
}
|
||||||
&.pi-color__accent-black {
|
&.pi-color__accent-black {
|
||||||
@include dividerIconColor(black);
|
@include dividerIconColor(black);
|
||||||
}
|
}
|
||||||
&.pi-color__dark-black {
|
&.pi-color__dark-black {
|
||||||
@include dividerIconColor(black);
|
@include dividerIconColor(black);
|
||||||
}
|
}
|
||||||
&.pi-color__black-dark {
|
&.pi-color__black-dark {
|
||||||
@include dividerIconColor(grey-400);
|
@include dividerIconColor(grey-400);
|
||||||
}
|
}
|
||||||
&.pi-color__grey-black {
|
&.pi-color__grey-black {
|
||||||
@include dividerIconColor(black);
|
@include dividerIconColor(black);
|
||||||
}
|
}
|
||||||
&.pi-color__black-grey {
|
&.pi-color__black-grey {
|
||||||
@include dividerIconColor(grey-200);
|
@include dividerIconColor(grey-200);
|
||||||
}
|
}
|
||||||
&.pi-color__highlighted-grey {
|
&.pi-color__highlighted-grey {
|
||||||
@include dividerIconColor(grey-200);
|
@include dividerIconColor(grey-200);
|
||||||
}
|
}
|
||||||
&.pi-color__grey-highlighted {
|
&.pi-color__grey-highlighted {
|
||||||
@include dividerIconColor(highlighted);
|
@include dividerIconColor(highlighted);
|
||||||
}
|
}
|
||||||
// Icon size
|
// Icon size
|
||||||
// X small
|
// X small
|
||||||
&.pi-divider__icon-size--x-small {
|
&.pi-divider__icon-size--x-small {
|
||||||
@include dividerIconSize(large);
|
@include dividerIconSize(large);
|
||||||
}
|
}
|
||||||
// small
|
// small
|
||||||
&.pi-divider__icon-size--small {
|
&.pi-divider__icon-size--small {
|
||||||
@include dividerIconSize(x-large);
|
@include dividerIconSize(x-large);
|
||||||
}
|
}
|
||||||
// medium
|
// medium
|
||||||
&.pi-divider__icon-size--medium {
|
&.pi-divider__icon-size--medium {
|
||||||
@include dividerIconSize(xx-large);
|
@include dividerIconSize(xx-large);
|
||||||
}
|
}
|
||||||
// large
|
// large
|
||||||
&.pi-divider__icon-size--large {
|
&.pi-divider__icon-size--large {
|
||||||
@include dividerIconSize(xxx-large);
|
@include dividerIconSize(xxx-large);
|
||||||
}
|
}
|
||||||
// X large
|
// X large
|
||||||
&.pi-divider__icon-size--x-large {
|
&.pi-divider__icon-size--x-large {
|
||||||
@include dividerIconSize(xxxx-large);
|
@include dividerIconSize(xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,71 +1,71 @@
|
|||||||
// Column
|
// Column
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
&.pi-headline__flex--column {
|
&.pi-headline__flex--column {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
&.pi-headline__align--center {
|
&.pi-headline__align--center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
aside {
|
aside {
|
||||||
button {
|
button {
|
||||||
margin: 1.75rem auto 0;
|
margin: 1.75rem auto 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-headline-content {
|
.pi-headline-content {
|
||||||
& > *:is(h1, h2, h3, h4, h5, p, span, strong, i) {
|
& > *:is(h1, h2, h3, h4, h5, p, span, strong, i) {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
figure {
|
figure {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Headline Content Directives
|
// Headline Content Directives
|
||||||
.pi-headline-content {
|
.pi-headline-content {
|
||||||
h1 {
|
h1 {
|
||||||
font: {
|
font: {
|
||||||
weight: unset;
|
weight: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-headline-content__description {
|
&.pi-headline-content__description {
|
||||||
display: block;
|
display: block;
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
margin-top: var(--pi-spacing-large);
|
margin-top: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-headline-content + .pi-headline-content {
|
.pi-headline-content + .pi-headline-content {
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-background-image__animation--infinite {
|
.pi-background-image__animation--infinite {
|
||||||
animation: opacityAnimation 2.5s infinite;
|
animation: opacityAnimation 2.5s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
.pi-background-image__animation--infinite {
|
.pi-background-image__animation--infinite {
|
||||||
min-height: 20rem;
|
min-height: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes opacityAnimation {
|
@keyframes opacityAnimation {
|
||||||
0% {
|
0% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
25% {
|
25% {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,177 +1,177 @@
|
|||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
// Content
|
// Content
|
||||||
.pi-list-item-content {
|
.pi-list-item-content {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
margin-top: var(--pi-spacing-xxx-small);
|
margin-top: var(--pi-spacing-xxx-small);
|
||||||
&:not(.pi-chip) {
|
&:not(.pi-chip) {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > .pi-slider {
|
& > .pi-slider {
|
||||||
&.pi-slider__flex-direction--column-reverse {
|
&.pi-slider__flex-direction--column-reverse {
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Is Disabled
|
// Is Disabled
|
||||||
&.is-disabled {
|
&.is-disabled {
|
||||||
.pi-list-item-content {
|
.pi-list-item-content {
|
||||||
&:not(.pi-list-item-icon__right) {
|
&:not(.pi-list-item-icon__right) {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Border
|
// Border
|
||||||
&.pi-list-item__border--middle {
|
&.pi-list-item__border--middle {
|
||||||
.pi-list-item-content__left {
|
.pi-list-item-content__left {
|
||||||
padding-right: var(--pi-spacing-medium);
|
padding-right: var(--pi-spacing-medium);
|
||||||
border-right: 1px solid var(--pi-color-primary-50);
|
border-right: 1px solid var(--pi-color-primary-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
.pi-list-item-icon {
|
.pi-list-item-icon {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
&.pi-list-item-icon__left {
|
&.pi-list-item-icon__left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
&.pi-list-item-icon__right {
|
&.pi-list-item-icon__right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
// Is Responsive
|
// Is Responsive
|
||||||
&.is-responsive {
|
&.is-responsive {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
// Content
|
// Content
|
||||||
.pi-list-item-content {
|
.pi-list-item-content {
|
||||||
&.pi-wrapper__flex {
|
&.pi-wrapper__flex {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Icon
|
// Icon
|
||||||
.pi-list-item-icon {
|
.pi-list-item-icon {
|
||||||
&.pi-list-item-icon__right {
|
&.pi-list-item-icon__right {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 3.375rem;
|
min-height: 3.375rem;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
text-align: unset;
|
text-align: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
// Is Responsive
|
// Is Responsive
|
||||||
&.is-responsive {
|
&.is-responsive {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// Type Action
|
// Type Action
|
||||||
&.is-stroked {
|
&.is-stroked {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: var(--pi-color-grey-75);
|
border-color: var(--pi-color-grey-75);
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
padding: unset;
|
padding: unset;
|
||||||
// Content
|
// Content
|
||||||
.pi-list-item-content {
|
.pi-list-item-content {
|
||||||
padding: var(--pi-spacing-large);
|
padding: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
// Icon
|
// Icon
|
||||||
.pi-list-item-icon {
|
.pi-list-item-icon {
|
||||||
&.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(var(--pi-border-radius-large) - 1px);
|
||||||
border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px);
|
border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
// Responsive
|
// Responsive
|
||||||
&.is-responsive {
|
&.is-responsive {
|
||||||
// Icon
|
// Icon
|
||||||
.pi-list-item-icon {
|
.pi-list-item-icon {
|
||||||
&.pi-list-item-icon__right {
|
&.pi-list-item-icon__right {
|
||||||
& > :not(.pi-icon-button) {
|
& > :not(.pi-icon-button) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 3.4375rem;
|
height: 3.4375rem;
|
||||||
width: 3.4375rem;
|
width: 3.4375rem;
|
||||||
margin-left: var(--pi-spacing-xxxx-large);
|
margin-left: var(--pi-spacing-xxxx-large);
|
||||||
border: 1px solid var(--pi-color-primary-50);
|
border: 1px solid var(--pi-color-primary-50);
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--pi-color-primary-25);
|
background-color: var(--pi-color-primary-25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Max width
|
// Max width
|
||||||
// Half
|
// Half
|
||||||
&.pi-list-item__max-width--half {
|
&.pi-list-item__max-width--half {
|
||||||
.pi-list-item-content {
|
.pi-list-item-content {
|
||||||
&.pi-list-item-content__left {
|
&.pi-list-item-content__left {
|
||||||
max-width: calc(50% - var(--pi-spacing-xxx-large));
|
max-width: calc(50% - var(--pi-spacing-xxx-large));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Third
|
// Third
|
||||||
&.pi-list-item__max-width--third {
|
&.pi-list-item__max-width--third {
|
||||||
.pi-list-item-content {
|
.pi-list-item-content {
|
||||||
&.pi-list-item-content__left {
|
&.pi-list-item-content__left {
|
||||||
max-width: calc(33.3% - var(--pi-spacing-xxx-large));
|
max-width: calc(33.3% - var(--pi-spacing-xxx-large));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-panel__expansion {
|
.pi-panel__expansion {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-text-viewer {
|
.pi-text-viewer {
|
||||||
article {
|
article {
|
||||||
label,
|
label,
|
||||||
span {
|
span {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,116 +1,116 @@
|
|||||||
@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
|
||||||
) {
|
) {
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
&.pi-shell__deale-saas {
|
&.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
&.has-bottom-sticky-note {
|
&.has-bottom-sticky-note {
|
||||||
& > section {
|
& > section {
|
||||||
& > main {
|
& > main {
|
||||||
& > footer {
|
& > footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: $left;
|
left: $left;
|
||||||
bottom: $bottom;
|
bottom: $bottom;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.pi-note {
|
.pi-note {
|
||||||
&.is-sticky {
|
&.is-sticky {
|
||||||
&.pi-note__position--bottom {
|
&.pi-note__position--bottom {
|
||||||
width: $width;
|
width: $width;
|
||||||
min-width: $min-width;
|
min-width: $min-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include fixedBottomNote;
|
@include fixedBottomNote;
|
||||||
.pi-note-content__action {
|
.pi-note-content__action {
|
||||||
button {
|
button {
|
||||||
&.pi-button__icon--single {
|
&.pi-button__icon--single {
|
||||||
height: 1.75rem;
|
height: 1.75rem;
|
||||||
width: 1.75rem;
|
width: 1.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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-hamburger):not(
|
||||||
.pi-button__xx-small
|
.pi-button__xx-small
|
||||||
):not(.pi-button__x-large):not(.pi-button__toggle) {
|
):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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Note in panel
|
// Note in panel
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.pi-panel__expansion--type-form {
|
&.pi-panel__expansion--type-form {
|
||||||
.pi-note {
|
.pi-note {
|
||||||
&.pi-note__status--error {
|
&.pi-note__status--error {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
height: var(--pi-spacing-xx-large);
|
height: var(--pi-spacing-xx-large);
|
||||||
width: 3.2rem;
|
width: 3.2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
&.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))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto);
|
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
.pi-note-content__action {
|
.pi-note-content__action {
|
||||||
button {
|
button {
|
||||||
&.pi-button__icon--single {
|
&.pi-button__icon--single {
|
||||||
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__icon--single):not(
|
||||||
.pi-button__xx-small
|
.pi-button__xx-small
|
||||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
):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-hamburger):not(
|
||||||
.pi-button__xx-small
|
.pi-button__xx-small
|
||||||
):not(.pi-button__x-large):not(.pi-button__toggle) {
|
):not(.pi-button__x-large):not(.pi-button__toggle) {
|
||||||
height: var(--pi-spacing-xx-large);
|
height: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto, 25%);
|
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto, 25%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,465 +1,465 @@
|
|||||||
@mixin panelInnerPadding($padding: unset) {
|
@mixin panelInnerPadding($padding: unset) {
|
||||||
&.pi-panel__inner-padding {
|
&.pi-panel__inner-padding {
|
||||||
padding: unset;
|
padding: unset;
|
||||||
|
|
||||||
&.pi-panel__flex-direction--row {
|
&.pi-panel__flex-direction--row {
|
||||||
& > section {
|
& > section {
|
||||||
& > * {
|
& > * {
|
||||||
padding-top: var(--pi-spacing-#{$padding});
|
padding-top: var(--pi-spacing-#{$padding});
|
||||||
padding-bottom: var(--pi-spacing-#{$padding});
|
padding-bottom: var(--pi-spacing-#{$padding});
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-panel__flex-direction--column {
|
&.pi-panel__flex-direction--column {
|
||||||
& > section {
|
& > section {
|
||||||
& > * {
|
& > * {
|
||||||
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 {
|
||||||
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin panelContentInnerPadding($padding) {
|
@mixin panelContentInnerPadding($padding) {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
padding: var(--pi-spacing-#{$padding});
|
padding: var(--pi-spacing-#{$padding});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin panelContentColor($color) {
|
@mixin panelContentColor($color) {
|
||||||
// Mode light
|
// Mode light
|
||||||
&.pi-color__mode--light {
|
&.pi-color__mode--light {
|
||||||
// Light Opaque
|
// Light Opaque
|
||||||
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
|
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
|
||||||
// Solid light color
|
// Solid light color
|
||||||
background-color: var(--pi-color-#{$color}-25);
|
background-color: var(--pi-color-#{$color}-25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mode dark
|
// Mode dark
|
||||||
&.pi-color__mode--dark {
|
&.pi-color__mode--dark {
|
||||||
// Dark Opaque
|
// Dark Opaque
|
||||||
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
|
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
|
||||||
background-color: var(--pi-color-#{$color});
|
background-color: var(--pi-color-#{$color});
|
||||||
// Solid Dark Color & Is Stroked
|
// Solid Dark Color & Is Stroked
|
||||||
&.is-stroked {
|
&.is-stroked {
|
||||||
border-color: var(--pi-color-#{$color}-900);
|
border-color: var(--pi-color-#{$color}-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Density
|
// Density
|
||||||
// 10
|
// 10
|
||||||
&.pi-color__density--10 {
|
&.pi-color__density--10 {
|
||||||
// Solid light color 10
|
// Solid light color 10
|
||||||
background-color: var(--pi-color-#{$color}-10);
|
background-color: var(--pi-color-#{$color}-10);
|
||||||
}
|
}
|
||||||
// 50
|
// 50
|
||||||
&.pi-color__density--50 {
|
&.pi-color__density--50 {
|
||||||
// Solid light color 50
|
// Solid light color 50
|
||||||
background-color: var(--pi-color-#{$color}-50);
|
background-color: var(--pi-color-#{$color}-50);
|
||||||
}
|
}
|
||||||
// 75
|
// 75
|
||||||
&.pi-color__density--75 {
|
&.pi-color__density--75 {
|
||||||
// Solid light color 75
|
// Solid light color 75
|
||||||
background-color: var(--pi-color-#{$color}-75);
|
background-color: var(--pi-color-#{$color}-75);
|
||||||
}
|
}
|
||||||
// 100
|
// 100
|
||||||
&.pi-color__density--100 {
|
&.pi-color__density--100 {
|
||||||
// Solid light color 100
|
// Solid light color 100
|
||||||
background-color: var(--pi-color-#{$color}-100);
|
background-color: var(--pi-color-#{$color}-100);
|
||||||
}
|
}
|
||||||
// 200
|
// 200
|
||||||
&.pi-color__density--200 {
|
&.pi-color__density--200 {
|
||||||
// Solid light color 200
|
// Solid light color 200
|
||||||
background-color: var(--pi-color-#{$color}-200);
|
background-color: var(--pi-color-#{$color}-200);
|
||||||
}
|
}
|
||||||
// 300
|
// 300
|
||||||
&.pi-color__density--300 {
|
&.pi-color__density--300 {
|
||||||
// Solid light color 300
|
// Solid light color 300
|
||||||
background-color: var(--pi-color-#{$color}-300);
|
background-color: var(--pi-color-#{$color}-300);
|
||||||
}
|
}
|
||||||
// 400
|
// 400
|
||||||
&.pi-color__density--400 {
|
&.pi-color__density--400 {
|
||||||
// Solid light color 400
|
// Solid light color 400
|
||||||
background-color: var(--pi-color-#{$color}-400);
|
background-color: var(--pi-color-#{$color}-400);
|
||||||
}
|
}
|
||||||
// 900
|
// 900
|
||||||
&.pi-color__density--900 {
|
&.pi-color__density--900 {
|
||||||
// Solid light color 900
|
// Solid light color 900
|
||||||
background-color: var(--pi-color-#{$color}-900);
|
background-color: var(--pi-color-#{$color}-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Panel
|
// Panel
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
& > section {
|
& > section {
|
||||||
& > *: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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-panel-content__left,
|
.pi-panel-content__left,
|
||||||
.pi-panel-content__right {
|
.pi-panel-content__right {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-disabled {
|
&.is-disabled {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
opacity: 0.33;
|
opacity: 0.33;
|
||||||
.pi-icon__animation--clickable {
|
.pi-icon__animation--clickable {
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: unset;
|
cursor: unset;
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
transform: unset;
|
transform: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Glass
|
// Glass
|
||||||
&[class*='pi-color__opacity'] {
|
&[class*='pi-color__opacity'] {
|
||||||
-webkit-backdrop-filter: blur(0.75rem);
|
-webkit-backdrop-filter: blur(0.75rem);
|
||||||
backdrop-filter: blur(0.75rem);
|
backdrop-filter: blur(0.75rem);
|
||||||
}
|
}
|
||||||
// Expansion
|
// Expansion
|
||||||
&.pi-panel__expansion {
|
&.pi-panel__expansion {
|
||||||
.pi-panel-content {
|
.pi-panel-content {
|
||||||
&.pi-panel-content__top {
|
&.pi-panel-content__top {
|
||||||
margin-top: -0.2rem;
|
margin-top: -0.2rem;
|
||||||
}
|
}
|
||||||
// Center
|
// Center
|
||||||
&.pi-panel-content__center,
|
&.pi-panel-content__center,
|
||||||
&.pi-panel-content__expandable {
|
&.pi-panel-content__expandable {
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
.pi-note + .pi-note {
|
.pi-note + .pi-note {
|
||||||
margin-top: var(--pi-spacing-medium);
|
margin-top: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// NOT Expansion
|
// NOT Expansion
|
||||||
&:not(.pi-panel__expansion) {
|
&:not(.pi-panel__expansion) {
|
||||||
// Panel flex direction column
|
// Panel flex direction column
|
||||||
&.pi-panel__flex-direction--column {
|
&.pi-panel__flex-direction--column {
|
||||||
& > section {
|
& > section {
|
||||||
& > header {
|
& > header {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Panel space between
|
// Panel space between
|
||||||
&.pi-panel__justify--space-between {
|
&.pi-panel__justify--space-between {
|
||||||
& > section {
|
& > section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.pi-panel-content {
|
.pi-panel-content {
|
||||||
// Center
|
// Center
|
||||||
&.pi-panel-content__center {
|
&.pi-panel-content__center {
|
||||||
display: flex;
|
display: flex;
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Inner padding
|
// Inner padding
|
||||||
// XS
|
// XS
|
||||||
&.pi-panel__inner-padding--xxs {
|
&.pi-panel__inner-padding--xxs {
|
||||||
@include panelInnerPadding(xx-small);
|
@include panelInnerPadding(xx-small);
|
||||||
}
|
}
|
||||||
// XS
|
// XS
|
||||||
&.pi-panel__inner-padding--xs {
|
&.pi-panel__inner-padding--xs {
|
||||||
@include panelInnerPadding(x-small);
|
@include panelInnerPadding(x-small);
|
||||||
}
|
}
|
||||||
// S
|
// S
|
||||||
&.pi-panel__inner-padding--s {
|
&.pi-panel__inner-padding--s {
|
||||||
@include panelInnerPadding(small);
|
@include panelInnerPadding(small);
|
||||||
}
|
}
|
||||||
// M
|
// M
|
||||||
&.pi-panel__inner-padding--m {
|
&.pi-panel__inner-padding--m {
|
||||||
@include panelInnerPadding(medium);
|
@include panelInnerPadding(medium);
|
||||||
}
|
}
|
||||||
// L
|
// L
|
||||||
&.pi-panel__inner-padding--l {
|
&.pi-panel__inner-padding--l {
|
||||||
@include panelInnerPadding(large);
|
@include panelInnerPadding(large);
|
||||||
}
|
}
|
||||||
// XL
|
// XL
|
||||||
&.pi-panel__inner-padding--xl {
|
&.pi-panel__inner-padding--xl {
|
||||||
@include panelInnerPadding(x-large);
|
@include panelInnerPadding(x-large);
|
||||||
}
|
}
|
||||||
// XXL
|
// XXL
|
||||||
&.pi-panel__inner-padding--xxl {
|
&.pi-panel__inner-padding--xxl {
|
||||||
@include panelInnerPadding(xx-large);
|
@include panelInnerPadding(xx-large);
|
||||||
}
|
}
|
||||||
// XXXL
|
// XXXL
|
||||||
&.pi-panel__inner-padding--xxxl {
|
&.pi-panel__inner-padding--xxxl {
|
||||||
@include panelInnerPadding(xxx-large);
|
@include panelInnerPadding(xxx-large);
|
||||||
}
|
}
|
||||||
// XXXXL
|
// XXXXL
|
||||||
&.pi-panel__inner-padding--xxxxl {
|
&.pi-panel__inner-padding--xxxxl {
|
||||||
@include panelInnerPadding(xxxx-large);
|
@include panelInnerPadding(xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Content
|
// Content
|
||||||
.pi-panel-content {
|
.pi-panel-content {
|
||||||
display: block;
|
display: block;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
|
|
||||||
& > .pi-wrapper {
|
& > .pi-wrapper {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Top
|
// Top
|
||||||
&.pi-panel-content__top {
|
&.pi-panel-content__top {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
.pi-list-item-icon__left {
|
.pi-list-item-icon__left {
|
||||||
.pi-chip {
|
.pi-chip {
|
||||||
&:not(.pi-chip__single-icon) {
|
&:not(.pi-chip__single-icon) {
|
||||||
width: var(--pi-spacing-xxxx-large);
|
width: var(--pi-spacing-xxxx-large);
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
padding: unset;
|
padding: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Content Color
|
// Content Color
|
||||||
// Primary
|
// Primary
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
@include panelContentColor(primary);
|
@include panelContentColor(primary);
|
||||||
}
|
}
|
||||||
// Accent
|
// Accent
|
||||||
&.pi-color__accent {
|
&.pi-color__accent {
|
||||||
@include panelContentColor(accent);
|
@include panelContentColor(accent);
|
||||||
}
|
}
|
||||||
// Highlighted
|
// Highlighted
|
||||||
&.pi-color__highlighted {
|
&.pi-color__highlighted {
|
||||||
@include panelContentColor(highlighted);
|
@include panelContentColor(highlighted);
|
||||||
}
|
}
|
||||||
// Grey
|
// Grey
|
||||||
&.pi-color__grey {
|
&.pi-color__grey {
|
||||||
@include panelContentColor(grey);
|
@include panelContentColor(grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Content Padding
|
// Content Padding
|
||||||
&.pi-panel-content__inner-padding--xxxs {
|
&.pi-panel-content__inner-padding--xxxs {
|
||||||
@include panelContentInnerPadding(xxx-small);
|
@include panelContentInnerPadding(xxx-small);
|
||||||
}
|
}
|
||||||
&.pi-panel-content__inner-padding--xxs {
|
&.pi-panel-content__inner-padding--xxs {
|
||||||
@include panelContentInnerPadding(xx-small);
|
@include panelContentInnerPadding(xx-small);
|
||||||
}
|
}
|
||||||
&.pi-panel-content__inner-padding--xs {
|
&.pi-panel-content__inner-padding--xs {
|
||||||
@include panelContentInnerPadding(x-small);
|
@include panelContentInnerPadding(x-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-panel-content__inner-padding--s {
|
&.pi-panel-content__inner-padding--s {
|
||||||
@include panelContentInnerPadding(small);
|
@include panelContentInnerPadding(small);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-panel-content__inner-padding--m {
|
&.pi-panel-content__inner-padding--m {
|
||||||
@include panelContentInnerPadding(medium);
|
@include panelContentInnerPadding(medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-panel-content__inner-padding--l {
|
&.pi-panel-content__inner-padding--l {
|
||||||
@include panelContentInnerPadding(large);
|
@include panelContentInnerPadding(large);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-panel-content__inner-padding--xl {
|
&.pi-panel-content__inner-padding--xl {
|
||||||
@include panelContentInnerPadding(x-large);
|
@include panelContentInnerPadding(x-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-panel-content__inner-padding--xxl {
|
&.pi-panel-content__inner-padding--xxl {
|
||||||
@include panelContentInnerPadding(xx-large);
|
@include panelContentInnerPadding(xx-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-panel-content__inner-padding--xxxl {
|
&.pi-panel-content__inner-padding--xxxl {
|
||||||
@include panelContentInnerPadding(xxxl-large);
|
@include panelContentInnerPadding(xxxl-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-panel-content__inner-padding--xxxxl {
|
&.pi-panel-content__inner-padding--xxxxl {
|
||||||
@include panelContentInnerPadding(xxxx-large);
|
@include panelContentInnerPadding(xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout__05-splitted {
|
.pi-layout__05-splitted {
|
||||||
// Not paywall
|
// Not paywall
|
||||||
&:not(.pi-05a-splitted-paywall-layout) {
|
&:not(.pi-05a-splitted-paywall-layout) {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.pi-panel__is-clickable {
|
&.pi-panel__is-clickable {
|
||||||
&.is-active,
|
&.is-active,
|
||||||
&:hover {
|
&:hover {
|
||||||
outline: 1px solid var(--pi-color-primary);
|
outline: 1px solid var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Padding
|
// Padding
|
||||||
&.has-padding {
|
&.has-padding {
|
||||||
padding: var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Grid
|
// Grid
|
||||||
// Half
|
// Half
|
||||||
&.pi-panel__grid--half {
|
&.pi-panel__grid--half {
|
||||||
.pi-panel-content {
|
.pi-panel-content {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Quarter
|
// Quarter
|
||||||
&.pi-panel__grid--quarter {
|
&.pi-panel__grid--quarter {
|
||||||
.pi-panel-content__left {
|
.pi-panel-content__left {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
.pi-panel-content__right {
|
.pi-panel-content__right {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Quarter reverse
|
// Quarter reverse
|
||||||
&.pi-panel__grid--quarter-reverse {
|
&.pi-panel__grid--quarter-reverse {
|
||||||
.pi-panel-content__left {
|
.pi-panel-content__left {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
.pi-panel-content__right {
|
.pi-panel-content__right {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout__main {
|
.pi-layout__main {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
&:not(.is-disabled) {
|
&:not(.is-disabled) {
|
||||||
box-shadow: var(--pi-box-shadow-panel);
|
box-shadow: var(--pi-box-shadow-panel);
|
||||||
}
|
}
|
||||||
&.is-disabled {
|
&.is-disabled {
|
||||||
box-shadow: var(--pi-box-shadow-panel-disabled);
|
box-shadow: var(--pi-box-shadow-panel-disabled);
|
||||||
}
|
}
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
// Panel
|
// Panel
|
||||||
.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__icon--single):not(
|
||||||
.pi-button__xx-small
|
.pi-button__xx-small
|
||||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
):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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
// Panel
|
// Panel
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.pi-panel__expansion {
|
&.pi-panel__expansion {
|
||||||
.pi-panel-content__center,
|
.pi-panel-content__center,
|
||||||
.pi-panel-content__expandable {
|
.pi-panel-content__expandable {
|
||||||
margin-top: var(--pi-spacing-medium);
|
margin-top: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
.pi-panel-content__top {
|
.pi-panel-content__top {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Panel
|
// Panel
|
||||||
.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__icon--single):not(
|
||||||
.pi-button__xx-small
|
.pi-button__xx-small
|
||||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
||||||
min-width: 9.25rem;
|
min-width: 9.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
// Panel
|
// Panel
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.pi-panel__expansion {
|
&.pi-panel__expansion {
|
||||||
.pi-panel-content__center,
|
.pi-panel-content__center,
|
||||||
.pi-panel-content__expandable {
|
.pi-panel-content__expandable {
|
||||||
margin-top: var(--pi-spacing-xx-large);
|
margin-top: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
// Data grid in expansion panels
|
// Data grid in expansion panels
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
&.pi-data-grid__data-direction--column {
|
&.pi-data-grid__data-direction--column {
|
||||||
padding-left: var(--pi-spacing-xx-small);
|
padding-left: var(--pi-spacing-xx-small);
|
||||||
padding-right: var(--pi-spacing-xx-small);
|
padding-right: var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-panel-content {
|
.pi-panel-content {
|
||||||
// Top
|
// Top
|
||||||
&.pi-panel-content__top {
|
&.pi-panel-content__top {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
.pi-list-item-icon__left {
|
.pi-list-item-icon__left {
|
||||||
padding-right: var(--pi-spacing-medium);
|
padding-right: var(--pi-spacing-medium);
|
||||||
border-right: 1px solid var(--pi-color-primary-50);
|
border-right: 1px solid var(--pi-color-primary-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Expandable
|
// Expandable
|
||||||
&.pi-panel-content__expandable {
|
&.pi-panel-content__expandable {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
&.pi-list-item__indent {
|
&.pi-list-item__indent {
|
||||||
padding-left: calc(5rem + 1px);
|
padding-left: calc(5rem + 1px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
.pi-spinner {
|
.pi-spinner {
|
||||||
// Type
|
// Type
|
||||||
// Loader
|
// Loader
|
||||||
&.pi-spinner__loader {
|
&.pi-spinner__loader {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--pi-spacing-large);
|
gap: var(--pi-spacing-large);
|
||||||
margin-top: unset !important;
|
margin-top: unset !important;
|
||||||
|
|
||||||
&.pi-spinner__loader--fullscreen {
|
&.pi-spinner__loader--fullscreen {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--pi-color-primary-200-rgba);
|
background-color: var(--pi-color-primary-200-rgba);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,35 +1,35 @@
|
|||||||
// Text group
|
// Text group
|
||||||
// colors
|
// colors
|
||||||
$color1: #799ef0;
|
$color1: #799ef0;
|
||||||
$color2: #99b3ec;
|
$color2: #99b3ec;
|
||||||
$color3: #afc1ea;
|
$color3: #afc1ea;
|
||||||
$color4: #b9c8e9;
|
$color4: #b9c8e9;
|
||||||
$color5: #dbdfe7;
|
$color5: #dbdfe7;
|
||||||
$colors: $color1, $color2, $color3, $color4, $color5;
|
$colors: $color1, $color2, $color3, $color4, $color5;
|
||||||
.pi-text-group {
|
.pi-text-group {
|
||||||
&.pi-text-group__value-indicator {
|
&.pi-text-group__value-indicator {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@for $i from 1 through length($colors) {
|
@for $i from 1 through length($colors) {
|
||||||
.pi-text-viewer {
|
.pi-text-viewer {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
&:nth-child(#{length($colors)}n + #{$i}) {
|
&:nth-child(#{length($colors)}n + #{$i}) {
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
margin-bottom: var(--pi-spacing-xxxx-small);
|
margin-bottom: var(--pi-spacing-xxxx-small);
|
||||||
width: var(--pi-spacing-small);
|
width: var(--pi-spacing-small);
|
||||||
height: var(--pi-spacing-small);
|
height: var(--pi-spacing-small);
|
||||||
background-color: nth($colors, $i);
|
background-color: nth($colors, $i);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-text-viewer + .pi-text-viewer {
|
.pi-text-viewer + .pi-text-viewer {
|
||||||
margin-top: var(--pi-spacing-small);
|
margin-top: var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,15 +1,15 @@
|
|||||||
@forward 'pi-accordion';
|
@forward 'pi-accordion';
|
||||||
@forward 'pi-card';
|
@forward 'pi-card';
|
||||||
@forward 'pi-divider';
|
@forward 'pi-divider';
|
||||||
@forward 'pi-headline';
|
@forward 'pi-headline';
|
||||||
@forward 'pi-list-item';
|
@forward 'pi-list-item';
|
||||||
@forward 'pi-note';
|
@forward 'pi-note';
|
||||||
@forward 'pi-panel';
|
@forward 'pi-panel';
|
||||||
@forward 'pi-spinner';
|
@forward 'pi-spinner';
|
||||||
@forward 'pi-tab';
|
@forward 'pi-tab';
|
||||||
@forward 'pi-text-viewer';
|
@forward 'pi-text-viewer';
|
||||||
@forward 'pi-text';
|
@forward 'pi-text';
|
||||||
|
|
||||||
@use 'pi-button';
|
@use 'pi-button';
|
||||||
@use 'pi-data-grid';
|
@use 'pi-data-grid';
|
||||||
@use 'pi-field';
|
@use 'pi-field';
|
||||||
|
|||||||
@@ -1,284 +1,284 @@
|
|||||||
@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__x-large):not(
|
||||||
.pi-button__toggle
|
.pi-button__toggle
|
||||||
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single) {
|
):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(.pi-button__trimmed):not(
|
||||||
.ch2-btn
|
.ch2-btn
|
||||||
):not(.pi-button__icon--single) {
|
):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__toggle):not(
|
||||||
.pi-button__type--menu-item
|
.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__small):not(
|
||||||
.pi-button__large
|
.pi-button__large
|
||||||
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
|
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
|
||||||
.pi-button__trimmed
|
.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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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 {
|
||||||
background-color: var(--pi-color-#{$color}-200);
|
background-color: var(--pi-color-#{$color}-200);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
background-color: var(--pi-color-#{$color}-900);
|
background-color: var(--pi-color-#{$color}-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Default color & White
|
// Default color & White
|
||||||
&.pi-button__white {
|
&.pi-button__white {
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
background-color: var(--pi-color-#{$color});
|
background-color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ghost
|
// Ghost
|
||||||
@mixin privateButtonGhostColor($color) {
|
@mixin privateButtonGhostColor($color) {
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-#{$color}-900);
|
color: var(--pi-color-#{$color}-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: var(--pi-color-#{$color}-200);
|
color: var(--pi-color-#{$color}-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outline
|
// Outline
|
||||||
@mixin privateButtonOutlineColor($color) {
|
@mixin privateButtonOutlineColor($color) {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: all 0.16s ease-in;
|
transition: all 0.16s ease-in;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
border-color: var(--pi-color-#{$color});
|
border-color: var(--pi-color-#{$color});
|
||||||
background-color: var(--pi-color-#{$color});
|
background-color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: var(--pi-color-#{$color}-200);
|
color: var(--pi-color-#{$color}-200);
|
||||||
}
|
}
|
||||||
// Is Active
|
// Is Active
|
||||||
&.is-active {
|
&.is-active {
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
border-color: var(--pi-color-#{$color});
|
border-color: var(--pi-color-#{$color});
|
||||||
background-color: var(--pi-color-#{$color});
|
background-color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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__toggle):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__type--menu-item
|
||||||
) {
|
) {
|
||||||
// Color
|
// Color
|
||||||
// White
|
// White
|
||||||
&.pi-color__white {
|
&.pi-color__white {
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: rgba($color: white, $alpha: 0.6);
|
background-color: rgba($color: white, $alpha: 0.6);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 2px solid var(--pi-color-white);
|
border: 2px solid var(--pi-color-white);
|
||||||
&:enabled {
|
&:enabled {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 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__warn):not(
|
||||||
.pi-color__highlighted
|
.pi-color__highlighted
|
||||||
):not(.pi-color__white) {
|
):not(.pi-color__white) {
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fill
|
// Fill
|
||||||
// Primary
|
// Primary
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
@include privateButtonFillColor(primary);
|
@include privateButtonFillColor(primary);
|
||||||
}
|
}
|
||||||
// Accent
|
// Accent
|
||||||
&.pi-color__accent {
|
&.pi-color__accent {
|
||||||
@include privateButtonFillColor(accent);
|
@include privateButtonFillColor(accent);
|
||||||
}
|
}
|
||||||
// Warn
|
// Warn
|
||||||
&.pi-color__warn {
|
&.pi-color__warn {
|
||||||
@include privateButtonFillColor(warn);
|
@include privateButtonFillColor(warn);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Highlighted
|
// Highlighted
|
||||||
&.pi-color__highlighted {
|
&.pi-color__highlighted {
|
||||||
@include privateButtonFillColor(highlighted);
|
@include privateButtonFillColor(highlighted);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ghost
|
// Ghost
|
||||||
&.pi-button__appearance--ghost {
|
&.pi-button__appearance--ghost {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
// Ghost & Primary
|
// Ghost & Primary
|
||||||
&.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
|
||||||
&.pi-color__accent {
|
&.pi-color__accent {
|
||||||
@include privateButtonGhostColor(accent);
|
@include privateButtonGhostColor(accent);
|
||||||
}
|
}
|
||||||
// Ghost & Warn
|
// Ghost & Warn
|
||||||
&.pi-color__warn {
|
&.pi-color__warn {
|
||||||
@include privateButtonGhostColor(warn);
|
@include privateButtonGhostColor(warn);
|
||||||
}
|
}
|
||||||
// Ghost & Highlighted
|
// Ghost & Highlighted
|
||||||
&.pi-color__highlighted {
|
&.pi-color__highlighted {
|
||||||
@include privateButtonGhostColor(Highlighted);
|
@include privateButtonGhostColor(Highlighted);
|
||||||
}
|
}
|
||||||
// Ghost & White
|
// Ghost & White
|
||||||
&.pi-color__white {
|
&.pi-color__white {
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
&:hover {
|
&:hover {
|
||||||
border: unset;
|
border: unset;
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: rgba($color: white, $alpha: 0.6);
|
color: rgba($color: white, $alpha: 0.6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Ghost & Black
|
// Ghost & Black
|
||||||
&.pi-color__black {
|
&.pi-color__black {
|
||||||
color: var(--pi-color-grey-900);
|
color: var(--pi-color-grey-900);
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-grey-900);
|
color: var(--pi-color-grey-900);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: rgba($color: #3d3d3d, $alpha: 0.6);
|
color: rgba($color: #3d3d3d, $alpha: 0.6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Ghost & Grey
|
// Ghost & Grey
|
||||||
&.pi-color__grey {
|
&.pi-color__grey {
|
||||||
color: var(--pi-color-grey-300);
|
color: var(--pi-color-grey-300);
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-grey-400);
|
color: var(--pi-color-grey-400);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: var(--pi-color-grey-100);
|
color: var(--pi-color-grey-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outline
|
// Outline
|
||||||
&.pi-button__appearance--outline {
|
&.pi-button__appearance--outline {
|
||||||
// Outline & Primary
|
// Outline & Primary
|
||||||
&.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__highlighted):not(.pi-color__black) {
|
):not(.pi-color__highlighted):not(.pi-color__black) {
|
||||||
@include privateButtonOutlineColor(primary);
|
@include privateButtonOutlineColor(primary);
|
||||||
}
|
}
|
||||||
// Outline & Accent
|
// Outline & Accent
|
||||||
&.pi-color__accent {
|
&.pi-color__accent {
|
||||||
@include privateButtonOutlineColor(accent);
|
@include privateButtonOutlineColor(accent);
|
||||||
}
|
}
|
||||||
// Outline & Warn
|
// Outline & Warn
|
||||||
&.pi-color__warn {
|
&.pi-color__warn {
|
||||||
@include privateButtonOutlineColor(warn);
|
@include privateButtonOutlineColor(warn);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outline & Highlighted
|
// Outline & Highlighted
|
||||||
&.pi-color__highlighted {
|
&.pi-color__highlighted {
|
||||||
@include privateButtonOutlineColor(highlighted);
|
@include privateButtonOutlineColor(highlighted);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-color__black {
|
&.pi-color__black {
|
||||||
@include privateButtonOutlineColor(grey);
|
@include privateButtonOutlineColor(grey);
|
||||||
}
|
}
|
||||||
// Outline & White
|
// Outline & White
|
||||||
&.pi-color__white {
|
&.pi-color__white {
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
border-color: var(--pi-color-white);
|
border-color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: rgba($color: #ffffff, $alpha: 0.6);
|
color: rgba($color: #ffffff, $alpha: 0.6);
|
||||||
}
|
}
|
||||||
// Is Active
|
// Is Active
|
||||||
&.is-active {
|
&.is-active {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
border-color: var(--pi-color-white);
|
border-color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
&.pi-shell__deale-saas {
|
&.pi-shell__deale-saas {
|
||||||
.is-private {
|
.is-private {
|
||||||
button {
|
button {
|
||||||
// Colors
|
// Colors
|
||||||
@include privateButtonsColors;
|
@include privateButtonsColors;
|
||||||
// Sizes
|
// Sizes
|
||||||
@include privateButtonsSizes;
|
@include privateButtonsSizes;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
button {
|
button {
|
||||||
// Colors
|
// Colors
|
||||||
@include privateButtonsColors;
|
@include privateButtonsColors;
|
||||||
// Sizes
|
// Sizes
|
||||||
@include privateButtonsSizes;
|
@include privateButtonsSizes;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,204 +1,204 @@
|
|||||||
@mixin defaultButtonsProperties {
|
@mixin defaultButtonsProperties {
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
font: {
|
font: {
|
||||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
&:not(:disabled):not(.pi-button__toggle) {
|
&:not(:disabled):not(.pi-button__toggle) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-active {
|
&.is-active {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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__toggle):not(
|
||||||
.pi-button__type--menu-item
|
.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(
|
||||||
.pi-button__x-large
|
.pi-button__x-large
|
||||||
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
|
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
|
||||||
.pi-button__icon--single
|
.pi-button__icon--single
|
||||||
):not(.pi-button__x-small) {
|
):not(.pi-button__x-small) {
|
||||||
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);
|
||||||
-moz-border-radius: var(--pi-border-radius-medium);
|
-moz-border-radius: var(--pi-border-radius-medium);
|
||||||
}
|
}
|
||||||
&.pi-button__x-small {
|
&.pi-button__x-small {
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
-webkit-border-radius: 0.75rem;
|
-webkit-border-radius: 0.75rem;
|
||||||
-moz-border-radius: 0.75rem;
|
-moz-border-radius: 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&: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__trimmed):not(
|
||||||
.pi-button__toggle
|
.pi-button__toggle
|
||||||
):not(.ch2-btn) {
|
):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);
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
&.pi-button__x-small {
|
&.pi-button__x-small {
|
||||||
min-width: 4.5rem;
|
min-width: 4.5rem;
|
||||||
padding-left: var(--pi-spacing-xx-small);
|
padding-left: var(--pi-spacing-xx-small);
|
||||||
padding-right: var(--pi-spacing-xx-small);
|
padding-right: var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.pi-button__appearance--outline) {
|
&:not(.pi-button__appearance--outline) {
|
||||||
transition: all 0.25s ease-in-out;
|
transition: all 0.25s ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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__toggle):not(
|
||||||
.pi-button__type--menu-item
|
.pi-button__type--menu-item
|
||||||
) {
|
) {
|
||||||
&.pi-button__x-small {
|
&.pi-button__x-small {
|
||||||
font: {
|
font: {
|
||||||
size: 0.8125rem;
|
size: 0.8125rem;
|
||||||
}
|
}
|
||||||
&:not(.pi-button__trimmed) {
|
&:not(.pi-button__trimmed) {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-button__trimmed {
|
&.pi-button__trimmed {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
&.pi-button__xx-small {
|
&.pi-button__xx-small {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--pi-spacing-x-small);
|
gap: var(--pi-spacing-x-small);
|
||||||
height: 1.375rem;
|
height: 1.375rem;
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
width: -moz-fit-content;
|
width: -moz-fit-content;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
min-width: 4.5rem;
|
min-width: 4.5rem;
|
||||||
max-width: 12.5rem;
|
max-width: 12.5rem;
|
||||||
padding: 0 var(--pi-spacing-small);
|
padding: 0 var(--pi-spacing-small);
|
||||||
-webkit-border-radius: var(--pi-border-radius-small);
|
-webkit-border-radius: var(--pi-border-radius-small);
|
||||||
-moz-border-radius: var(--pi-border-radius-small);
|
-moz-border-radius: var(--pi-border-radius-small);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font: {
|
font: {
|
||||||
size: 0.75rem;
|
size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
font: {
|
font: {
|
||||||
size: 0.8125rem;
|
size: 0.8125rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-button__trimed {
|
&.pi-button__trimed {
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
padding: var(--pi-spacing-xxxx-small) 0;
|
padding: var(--pi-spacing-xxxx-small) 0;
|
||||||
}
|
}
|
||||||
&:not(.pi-button__trimmed):not(.pi-button__icon--single) {
|
&:not(.pi-button__trimmed):not(.pi-button__icon--single) {
|
||||||
// Small
|
// Small
|
||||||
&.pi-button__small {
|
&.pi-button__small {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
// Medium
|
// Medium
|
||||||
&.pi-button__medium {
|
&.pi-button__medium {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
// Large
|
// Large
|
||||||
&.pi-button__large {
|
&.pi-button__large {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
min-width: 10.6875rem;
|
min-width: 10.6875rem;
|
||||||
}
|
}
|
||||||
// Tablet L & Desktop
|
// Tablet L & Desktop
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
min-width: 11.25rem;
|
min-width: 11.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// W 100
|
// W 100
|
||||||
&.pi-button__w100 {
|
&.pi-button__w100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
html,
|
html,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
button {
|
button {
|
||||||
// Default properties
|
// Default properties
|
||||||
@include defaultButtonsProperties;
|
@include defaultButtonsProperties;
|
||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
@include buttonsSizes;
|
@include buttonsSizes;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-filter-button,
|
.pi-filter-button,
|
||||||
.pi-expand-button {
|
.pi-expand-button {
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
@media screen and (min-width: 40rem) {
|
@media screen and (min-width: 40rem) {
|
||||||
&.is-open {
|
&.is-open {
|
||||||
.pi-big-icon,
|
.pi-big-icon,
|
||||||
figure {
|
figure {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close button in modals
|
// Close button in modals
|
||||||
.pi-modal {
|
.pi-modal {
|
||||||
.pi-close-button {
|
.pi-close-button {
|
||||||
&::after,
|
&::after,
|
||||||
&::before {
|
&::before {
|
||||||
width: var(--pi-spacing-x-large);
|
width: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
&.pi-wrapper__flex-direction--column {
|
&.pi-wrapper__flex-direction--column {
|
||||||
.pi-button {
|
.pi-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.cdk-overlay-container,
|
.cdk-overlay-container,
|
||||||
html {
|
html {
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-icon-button {
|
.pi-icon-button {
|
||||||
&.is-responsive {
|
&.is-responsive {
|
||||||
& > button {
|
& > button {
|
||||||
// Text
|
// Text
|
||||||
&.has-text {
|
&.has-text {
|
||||||
padding: unset;
|
padding: unset;
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
width: var(--pi-spacing-xxx-large);
|
width: var(--pi-spacing-xxx-large);
|
||||||
& > span {
|
& > span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
@forward 'pi-button-private';
|
@forward 'pi-button-private';
|
||||||
@forward 'pi-button-public';
|
@forward 'pi-button-public';
|
||||||
@forward 'pi-button';
|
@forward 'pi-button';
|
||||||
|
|||||||
@@ -1,75 +1,75 @@
|
|||||||
/**
|
/**
|
||||||
* APPEARANCE:
|
* APPEARANCE:
|
||||||
*
|
*
|
||||||
* 1. Fill:
|
* 1. Fill:
|
||||||
*
|
*
|
||||||
* Similar look and feel to the Form Fields Fill Appearance.
|
* Similar look and feel to the Form Fields Fill Appearance.
|
||||||
* Data Grid with inner stroke between each grid item.
|
* Data Grid with inner stroke between each grid item.
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridAppearanceFill() {
|
@mixin dataGridAppearanceFill() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 2. Outline:
|
* 2. Outline:
|
||||||
*
|
*
|
||||||
* A Data Grid with outer border and a inner stroke between each grid item appart from the last one.
|
* A Data Grid with outer border and a inner stroke between each grid item appart from the last one.
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
|
|
||||||
@mixin dataGridAppearanceOutline() {
|
@mixin dataGridAppearanceOutline() {
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
|
|
||||||
&.pi-data-grid__appearance--outline {
|
&.pi-data-grid__appearance--outline {
|
||||||
// Inner Stroke between grid items
|
// Inner Stroke between grid items
|
||||||
// Data Direction:
|
// Data Direction:
|
||||||
// Row
|
// Row
|
||||||
&.pi-data-grid__data-direction--row {
|
&.pi-data-grid__data-direction--row {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
&:not(:last-of-type) {
|
&:not(:last-of-type) {
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
border-color: var(--pi-color-grey-50);
|
border-color: var(--pi-color-grey-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Column
|
// Column
|
||||||
&.pi-data-grid__data-direction--column {
|
&.pi-data-grid__data-direction--column {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
&:not(.pi-cell__type--sum) {
|
&:not(.pi-cell__type--sum) {
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
border-color: var(--pi-color-grey-50);
|
border-color: var(--pi-color-grey-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outline Appearance in mode === Grid
|
// Outline Appearance in mode === Grid
|
||||||
// Card Type: List
|
// Card Type: List
|
||||||
&.pi-data-grid__card-type--list {
|
&.pi-data-grid__card-type--list {
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
&:not(.pi-cell__type--sum) {
|
&:not(.pi-cell__type--sum) {
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
border-color: var(--pi-color-grey-50);
|
border-color: var(--pi-color-grey-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 3. Ghost:
|
* 3. Ghost:
|
||||||
*
|
*
|
||||||
* A Data Grid without outer and inner strokes between the grid items.
|
* A Data Grid without outer and inner strokes between the grid items.
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridAppearanceGhost() {
|
@mixin dataGridAppearanceGhost() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Data grid
|
// Data grid
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
@include dataGridAppearanceOutline;
|
@include dataGridAppearanceOutline;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,261 +1,261 @@
|
|||||||
@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--checkbox):not(
|
||||||
.pi-cell__type--date
|
.pi-cell__type--date
|
||||||
):not(.pi-cell__type--description) {
|
):not(.pi-cell__type--description) {
|
||||||
width: $default-width;
|
width: $default-width;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
&.pi-cell__type--action,
|
&.pi-cell__type--action,
|
||||||
&.pi-cell__type--date {
|
&.pi-cell__type--date {
|
||||||
width: $action-width;
|
width: $action-width;
|
||||||
}
|
}
|
||||||
&.pi-cell__type--checkbox,
|
&.pi-cell__type--checkbox,
|
||||||
&.pi-cell__type--icon {
|
&.pi-cell__type--icon {
|
||||||
width: $icon-width;
|
width: $icon-width;
|
||||||
}
|
}
|
||||||
&.pi-cell__type--description {
|
&.pi-cell__type--description {
|
||||||
width: $description-width;
|
width: $description-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin dataGridHasBoxShadow() {
|
@mixin dataGridHasBoxShadow() {
|
||||||
// MODE List (Table)
|
// MODE List (Table)
|
||||||
.is-mode-list {
|
.is-mode-list {
|
||||||
// Data grid
|
// Data grid
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
&.has-box-shadow {
|
&.has-box-shadow {
|
||||||
box-shadow: var(--pi-box-shadow-panel);
|
box-shadow: var(--pi-box-shadow-panel);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// MODE List (Table)
|
// MODE List (Table)
|
||||||
.is-mode-list {
|
.is-mode-list {
|
||||||
// Data grid
|
// Data grid
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
|
|
||||||
// Grid item (*Row with data direction === column | *Column with data direction === row)
|
// Grid item (*Row with data direction === column | *Column with data direction === row)
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
& > .pi-grid-item__content {
|
& > .pi-grid-item__content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--pi-spacing-x-small);
|
gap: var(--pi-spacing-x-small);
|
||||||
min-height: 3.25rem;
|
min-height: 3.25rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
& > aside {
|
& > aside {
|
||||||
min-height: 3.25rem;
|
min-height: 3.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Data direction column (1 grid item = 1 column)
|
// Data direction column (1 grid item = 1 column)
|
||||||
&.pi-data-grid__data-direction--row {
|
&.pi-data-grid__data-direction--row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
min-height: var(--pi-spacing-xxxx-large);
|
min-height: var(--pi-spacing-xxxx-large);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
// Appearacne Outline
|
// Appearacne Outline
|
||||||
|
|
||||||
&:not(.pi-data-grid__appearance--ghost) {
|
&:not(.pi-data-grid__appearance--ghost) {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
padding-left: var(--pi-spacing-x-large);
|
padding-left: var(--pi-spacing-x-large);
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Cell
|
// Cell
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
|
|
||||||
&.pi-cell__type--action,
|
&.pi-cell__type--action,
|
||||||
&.pi-cell__type--icon {
|
&.pi-cell__type--icon {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
.pi-text-viewer {
|
.pi-text-viewer {
|
||||||
article {
|
article {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 3 Columns
|
// 3 Columns
|
||||||
&.pi-data-grid__columns--3 {
|
&.pi-data-grid__columns--3 {
|
||||||
@include cellWidth(35%, 30%, 25%, 45%);
|
@include cellWidth(35%, 30%, 25%, 45%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 4 Columns
|
// 4 Columns
|
||||||
&.pi-data-grid__columns--4 {
|
&.pi-data-grid__columns--4 {
|
||||||
@include cellWidth(40%, 35%, 30%, 50%);
|
@include cellWidth(40%, 35%, 30%, 50%);
|
||||||
}
|
}
|
||||||
// 5 Columns
|
// 5 Columns
|
||||||
&.pi-data-grid__columns--5 {
|
&.pi-data-grid__columns--5 {
|
||||||
@include cellWidth(20%, 15%, 10%, 30%);
|
@include cellWidth(20%, 15%, 10%, 30%);
|
||||||
}
|
}
|
||||||
// 6 Columns
|
// 6 Columns
|
||||||
&.pi-data-grid__columns--6 {
|
&.pi-data-grid__columns--6 {
|
||||||
@include cellWidth(18.66%, 13%, 10%, 28%);
|
@include cellWidth(18.66%, 13%, 10%, 28%);
|
||||||
}
|
}
|
||||||
// 7 Columns
|
// 7 Columns
|
||||||
&.pi-data-grid__columns--7 {
|
&.pi-data-grid__columns--7 {
|
||||||
@include cellWidth(20.28%, 6.5%, 10%, 33%);
|
@include cellWidth(20.28%, 6.5%, 10%, 33%);
|
||||||
}
|
}
|
||||||
// 8 Columns
|
// 8 Columns
|
||||||
&.pi-data-grid__columns--8 {
|
&.pi-data-grid__columns--8 {
|
||||||
@include cellWidth(12.5%, 12.5%, 10%, 22%);
|
@include cellWidth(12.5%, 12.5%, 10%, 22%);
|
||||||
}
|
}
|
||||||
// 9 Columns
|
// 9 Columns
|
||||||
&.pi-data-grid__columns--9 {
|
&.pi-data-grid__columns--9 {
|
||||||
@include cellWidth(11.11%, 11.11%, 10%, 18%);
|
@include cellWidth(11.11%, 11.11%, 10%, 18%);
|
||||||
}
|
}
|
||||||
// 10 Columns
|
// 10 Columns
|
||||||
&.pi-data-grid__columns--10 {
|
&.pi-data-grid__columns--10 {
|
||||||
@include cellWidth(10%, 10%, 10%, 15%);
|
@include cellWidth(10%, 10%, 10%, 15%);
|
||||||
}
|
}
|
||||||
// 11 Columns
|
// 11 Columns
|
||||||
&.pi-data-grid__columns--11 {
|
&.pi-data-grid__columns--11 {
|
||||||
@include cellWidth(9%, 9%, 9%, 12%);
|
@include cellWidth(9%, 9%, 9%, 12%);
|
||||||
}
|
}
|
||||||
// 12 Columns
|
// 12 Columns
|
||||||
&.pi-data-grid__columns--12 {
|
&.pi-data-grid__columns--12 {
|
||||||
@include cellWidth(8.33%, 8.33%, 8.33%, 11%);
|
@include cellWidth(8.33%, 8.33%, 8.33%, 11%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// MODE Grid (Card) (*infinite scroll)
|
// MODE Grid (Card) (*infinite scroll)
|
||||||
.is-mode-grid {
|
.is-mode-grid {
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.is-mode-grid {
|
.is-mode-grid {
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
&.pi-data-grid__data-direction--column {
|
&.pi-data-grid__data-direction--column {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
&.pi-text-viewer,
|
&.pi-text-viewer,
|
||||||
& > .pi-text-viewer {
|
& > .pi-text-viewer {
|
||||||
&.pi-text-viewer__font-size--s {
|
&.pi-text-viewer__font-size--s {
|
||||||
label {
|
label {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small Device
|
// Small Device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
// MODE List (Table)
|
// MODE List (Table)
|
||||||
|
|
||||||
.is-mode-list {
|
.is-mode-list {
|
||||||
// Data grid
|
// Data grid
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
// Data direction column (1 grid item = 1 column)
|
// Data direction column (1 grid item = 1 column)
|
||||||
|
|
||||||
&.pi-data-grid__data-direction--column {
|
&.pi-data-grid__data-direction--column {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
&.pi-grid-item__context--keys {
|
&.pi-grid-item__context--keys {
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
min-width: 20rem;
|
min-width: 20rem;
|
||||||
&.pi-text-viewer {
|
&.pi-text-viewer {
|
||||||
&.pi-text-viewer__align--center {
|
&.pi-text-viewer__align--center {
|
||||||
article {
|
article {
|
||||||
margin-top: var(--pi-spacing-medium);
|
margin-top: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.is-active) {
|
&:not(.is-active) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
&:not(.is-active) {
|
&:not(.is-active) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.is-mode-grid {
|
.is-mode-grid {
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
&.pi-data-grid__data-direction--column {
|
&.pi-data-grid__data-direction--column {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
&:not(.is-active) {
|
&:not(.is-active) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large Device
|
// Large Device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
// MODE List (Table)
|
// MODE List (Table)
|
||||||
.is-mode-list {
|
.is-mode-list {
|
||||||
// Data grid
|
// Data grid
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
// Data direction column (1 grid item = 1 column)
|
// Data direction column (1 grid item = 1 column)
|
||||||
&.pi-data-grid__data-direction--column {
|
&.pi-data-grid__data-direction--column {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
.pi-text-viewer {
|
.pi-text-viewer {
|
||||||
&.pi-text-viewer__justify--flex-end {
|
&.pi-text-viewer__justify--flex-end {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.pi-cell__type--sum) + .pi-cell__type--sum {
|
&:not(.pi-cell__type--sum) + .pi-cell__type--sum {
|
||||||
&:not(:last-of-type) {
|
&:not(:last-of-type) {
|
||||||
margin-bottom: var(--pi-spacing-medium);
|
margin-bottom: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 4 rows
|
// 4 rows
|
||||||
&.pi-data-grid__rows--4 {
|
&.pi-data-grid__rows--4 {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,154 +1,154 @@
|
|||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* Card Type
|
* Card Type
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* Card Type: LIST
|
* Card Type: LIST
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridCardTypeList {
|
@mixin dataGridCardTypeList {
|
||||||
&.pi-data-grid__card-type--list {
|
&.pi-data-grid__card-type--list {
|
||||||
// Data Grid Columns:
|
// Data Grid Columns:
|
||||||
// 7
|
// 7
|
||||||
@include dataGridCardTypeList7;
|
@include dataGridCardTypeList7;
|
||||||
// 11
|
// 11
|
||||||
@include dataGridCardTypeList11;
|
@include dataGridCardTypeList11;
|
||||||
|
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
&.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,
|
||||||
&.pi-text-viewer {
|
&.pi-text-viewer {
|
||||||
article {
|
article {
|
||||||
transform: translateY(var(--pi-spacing-xx-small));
|
transform: translateY(var(--pi-spacing-xx-small));
|
||||||
}
|
}
|
||||||
label {
|
label {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* Card Type: LIST
|
* Card Type: LIST
|
||||||
*
|
*
|
||||||
* Columns: 7
|
* Columns: 7
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridCardTypeList7() {
|
@mixin dataGridCardTypeList7() {
|
||||||
&.pi-data-grid__columns--7 {
|
&.pi-data-grid__columns--7 {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
&.pi-card {
|
&.pi-card {
|
||||||
@for $i from 1 through 14 {
|
@for $i from 1 through 14 {
|
||||||
& > *:nth-child(#{$i}) {
|
& > *:nth-child(#{$i}) {
|
||||||
grid-area: item#{$i};
|
grid-area: item#{$i};
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 8 through 14 {
|
@for $i from 8 through 14 {
|
||||||
& > *:nth-child(#{$i}) {
|
& > *:nth-child(#{$i}) {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
grid-template-rows: repeat(7, 1fr);
|
grid-template-rows: repeat(7, 1fr);
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
'item1 item8'
|
'item1 item8'
|
||||||
'item2 item9'
|
'item2 item9'
|
||||||
'item3 item10'
|
'item3 item10'
|
||||||
'item4 item11'
|
'item4 item11'
|
||||||
'item5 item12'
|
'item5 item12'
|
||||||
'item6 item13'
|
'item6 item13'
|
||||||
'item7 item14';
|
'item7 item14';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* Card Type: LIST
|
* Card Type: LIST
|
||||||
*
|
*
|
||||||
* Columns: 11
|
* Columns: 11
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridCardTypeList11() {
|
@mixin dataGridCardTypeList11() {
|
||||||
&.pi-data-grid__columns--11 {
|
&.pi-data-grid__columns--11 {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
&.pi-card {
|
&.pi-card {
|
||||||
@for $i from 1 through 22 {
|
@for $i from 1 through 22 {
|
||||||
& > *:nth-child(#{$i}) {
|
& > *:nth-child(#{$i}) {
|
||||||
grid-area: item#{$i};
|
grid-area: item#{$i};
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 12 through 22 {
|
@for $i from 12 through 22 {
|
||||||
& > *:nth-child(#{$i}) {
|
& > *:nth-child(#{$i}) {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
grid-template-rows: repeat(11, 1fr);
|
grid-template-rows: repeat(11, 1fr);
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
'item1 item12'
|
'item1 item12'
|
||||||
'item2 item13'
|
'item2 item13'
|
||||||
'item3 item14'
|
'item3 item14'
|
||||||
'item4 item15'
|
'item4 item15'
|
||||||
'item5 item16'
|
'item5 item16'
|
||||||
'item6 item17'
|
'item6 item17'
|
||||||
'item7 item18'
|
'item7 item18'
|
||||||
'item8 item19'
|
'item8 item19'
|
||||||
'item9 item20'
|
'item9 item20'
|
||||||
'item10 item21'
|
'item10 item21'
|
||||||
'item11 item22';
|
'item11 item22';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* Card Type: HORIZONTAL
|
* Card Type: HORIZONTAL
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridCardTypeHorizontal() {
|
@mixin dataGridCardTypeHorizontal() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* Card Type: SQUARED
|
* Card Type: SQUARED
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridCardTypeSquared() {
|
@mixin dataGridCardTypeSquared() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* Card Type: VERTICAL
|
* Card Type: VERTICAL
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridCardTypeVertical() {
|
@mixin dataGridCardTypeVertical() {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
@include dataGridCardTypeList;
|
@include dataGridCardTypeList;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,152 +1,152 @@
|
|||||||
/**
|
/**
|
||||||
* DATA DIRECTION:
|
* DATA DIRECTION:
|
||||||
*
|
*
|
||||||
* Data Grid Mode: LIST.
|
* Data Grid Mode: LIST.
|
||||||
* This will be the case when the data grid's mode is set to List which means that the data Grid emulates a Data Table.
|
* This will be the case when the data grid's mode is set to List which means that the data Grid emulates a Data Table.
|
||||||
*
|
*
|
||||||
* 1. Column:
|
* 1. Column:
|
||||||
*
|
*
|
||||||
* Any grid item is a column. The data projection will be horizontal.
|
* Any grid item is a column. The data projection will be horizontal.
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
|
|
||||||
@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 {
|
||||||
// Data direction:
|
// Data direction:
|
||||||
// Column (1 grid item = 1 column)
|
// Column (1 grid item = 1 column)
|
||||||
&.pi-data-grid__data-direction--column {
|
&.pi-data-grid__data-direction--column {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
// 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 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
// Override the Vertical Align Center visualize cells (text viewers)
|
// Override the Vertical Align Center visualize cells (text viewers)
|
||||||
// with the editable ones (text fields) in form data grids
|
// with the editable ones (text fields) in form data grids
|
||||||
&.pi-text-viewer,
|
&.pi-text-viewer,
|
||||||
& > .pi-text-viewer {
|
& > .pi-text-viewer {
|
||||||
& > * {
|
& > * {
|
||||||
transform: translateY(var(--pi-spacing-x-small));
|
transform: translateY(var(--pi-spacing-x-small));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Content Type:
|
// Content Type:
|
||||||
// Keys (HEADINGS)
|
// Keys (HEADINGS)
|
||||||
&.pi-grid-item__context--keys {
|
&.pi-grid-item__context--keys {
|
||||||
min-width: $key-cell-width;
|
min-width: $key-cell-width;
|
||||||
|
|
||||||
// Cell in Keys context
|
// Cell in Keys context
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
margin-left: var(--pi-spacing-medium);
|
margin-left: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Values
|
// Values
|
||||||
&:not(.pi-grid-item__context--keys) {
|
&:not(.pi-grid-item__context--keys) {
|
||||||
min-width: $value-cell-width;
|
min-width: $value-cell-width;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Justify Content:
|
// Justify Content:
|
||||||
// Space Between
|
// Space Between
|
||||||
&.pi-data-grid__justify-content--space-between {
|
&.pi-data-grid__justify-content--space-between {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
// Flex Start
|
// Flex Start
|
||||||
&.pi-data-grid__justify-content--flex-start {
|
&.pi-data-grid__justify-content--flex-start {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 2. Row:
|
* 2. Row:
|
||||||
*
|
*
|
||||||
* Any grid item is a row. The data projection will be vertical.
|
* Any grid item is a row. The data projection will be vertical.
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridDataDirectionRow() {
|
@mixin dataGridDataDirectionRow() {
|
||||||
// MODE List (Table)
|
// MODE List (Table)
|
||||||
.is-mode-list {
|
.is-mode-list {
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
// Data direction row (1 grid item = 1 row)
|
// Data direction row (1 grid item = 1 row)
|
||||||
&.pi-data-grid__data-direction--column {
|
&.pi-data-grid__data-direction--column {
|
||||||
// Scrollable area
|
// Scrollable area
|
||||||
.pi-data-grid__content {
|
.pi-data-grid__content {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
// Generic Scroll
|
// Generic Scroll
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 0.1875rem;
|
width: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--pi-color-grey-25);
|
background-color: var(--pi-color-grey-25);
|
||||||
border-radius: var(--pi-border-radius-x-small);
|
border-radius: var(--pi-border-radius-x-small);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
background-color: var(--pi-color-grey-50);
|
background-color: var(--pi-color-grey-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include dataGridDataDirectionColumn;
|
@include dataGridDataDirectionColumn;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
// Desktop S
|
// Desktop S
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
@include dataGridDataDirectionColumn(13.5rem, 8rem);
|
@include dataGridDataDirectionColumn(13.5rem, 8rem);
|
||||||
}
|
}
|
||||||
// Desktop M
|
// Desktop M
|
||||||
&.is-desktop__medium {
|
&.is-desktop__medium {
|
||||||
@include dataGridDataDirectionColumn(15rem, 9.125rem);
|
@include dataGridDataDirectionColumn(15rem, 9.125rem);
|
||||||
}
|
}
|
||||||
// Desktop L
|
// Desktop L
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
@include dataGridDataDirectionColumn(18rem, 8.5rem);
|
@include dataGridDataDirectionColumn(18rem, 8.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,23 +1,23 @@
|
|||||||
/**
|
/**
|
||||||
* MODE:
|
* MODE:
|
||||||
* The following properties defines when the Data Grid Component emulates a Data Table or a Cards Lidst,
|
* The following properties defines when the Data Grid Component emulates a Data Table or a Cards Lidst,
|
||||||
* depending on Mode binded by the List Configs.
|
* depending on Mode binded by the List Configs.
|
||||||
* Note that in small devices, the Mode will be always set as Grid.
|
* Note that in small devices, the Mode will be always set as Grid.
|
||||||
*
|
*
|
||||||
* 1. Grid:
|
* 1. Grid:
|
||||||
*
|
*
|
||||||
* A cards list in a grid.
|
* A cards list in a grid.
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridModeGrid() {
|
@mixin dataGridModeGrid() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 2. List:
|
* 2. List:
|
||||||
*
|
*
|
||||||
* A cards list in a grid.
|
* A cards list in a grid.
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
@mixin dataGridModeList() {
|
@mixin dataGridModeList() {
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
@forward 'appearance';
|
@forward 'appearance';
|
||||||
@forward 'card-type';
|
@forward 'card-type';
|
||||||
@forward 'base-data-grid';
|
@forward 'base-data-grid';
|
||||||
@forward 'data-direction';
|
@forward 'data-direction';
|
||||||
@forward 'mode';
|
@forward 'mode';
|
||||||
|
|||||||
@@ -1,285 +1,285 @@
|
|||||||
@mixin incrementalCellField(
|
@mixin incrementalCellField(
|
||||||
$max-width: calc(100% - var(--pi-spacing-x-large)),
|
$max-width: calc(100% - var(--pi-spacing-x-large)),
|
||||||
$margin-left: var(--pi-spacing-x-large)
|
$margin-left: var(--pi-spacing-x-large)
|
||||||
) {
|
) {
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
// Incremental field
|
// Incremental field
|
||||||
&.pi-form-field__incremental {
|
&.pi-form-field__incremental {
|
||||||
&:not(.pi-form-field__incremental--range) {
|
&:not(.pi-form-field__incremental--range) {
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
// Fill
|
// Fill
|
||||||
&.mat-form-field-appearance-fill {
|
&.mat-form-field-appearance-fill {
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
max-width: $max-width;
|
max-width: $max-width;
|
||||||
margin-left: $margin-left;
|
margin-left: $margin-left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
// Incremental field
|
// Incremental field
|
||||||
&.pi-form-field__incremental {
|
&.pi-form-field__incremental {
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
&.mat-focused {
|
&.mat-focused {
|
||||||
.mat-mdc-form-field-placeholder {
|
.mat-mdc-form-field-placeholder {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
.mat-mdc-form-field-underline {
|
.mat-mdc-form-field-underline {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.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;
|
||||||
}
|
}
|
||||||
.mat-mdc-form-field-suffix {
|
.mat-mdc-form-field-suffix {
|
||||||
padding-right: var(--pi-spacing-medium);
|
padding-right: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
.pi-affix {
|
.pi-affix {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
|
|
||||||
&.pi-affix__suffix {
|
&.pi-affix__suffix {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
text-align: right !important;
|
text-align: right !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Add & Substract icons
|
// Add & Substract icons
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
&:not(.pi-icon__appearance--fill),
|
&:not(.pi-icon__appearance--fill),
|
||||||
&.pi-icon__small {
|
&.pi-icon__small {
|
||||||
border: 1px solid var(--pi-color-primary);
|
border: 1px solid var(--pi-color-primary);
|
||||||
border-radius: var(--pi-border-radius-x-small);
|
border-radius: var(--pi-border-radius-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// NOT Has error
|
// NOT Has error
|
||||||
&:not(.has-error) {
|
&:not(.has-error) {
|
||||||
&:not(.mat-focused) {
|
&:not(.mat-focused) {
|
||||||
.mdc-text-field {
|
.mdc-text-field {
|
||||||
.mdc-text-field__input {
|
.mdc-text-field__input {
|
||||||
color: var(--pi-color-black);
|
color: var(--pi-color-black);
|
||||||
}
|
}
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
.mdc-text-field__input {
|
.mdc-text-field__input {
|
||||||
color: var(--pi-color-black);
|
color: var(--pi-color-black);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mat-focused {
|
&.mat-focused {
|
||||||
.mdc-text-field {
|
.mdc-text-field {
|
||||||
.mdc-text-field__input {
|
.mdc-text-field__input {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
.mdc-text-field__input {
|
.mdc-text-field__input {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// has error
|
// has error
|
||||||
&.has-error {
|
&.has-error {
|
||||||
.mdc-text-field {
|
.mdc-text-field {
|
||||||
.mdc-text-field__input {
|
.mdc-text-field__input {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
.mdc-text-field__input {
|
.mdc-text-field__input {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled
|
// Disabled
|
||||||
&.is-disabled {
|
&.is-disabled {
|
||||||
color: var(--pi-color-grey-200);
|
color: var(--pi-color-grey-200);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Incremental range
|
// Incremental range
|
||||||
&.pi-form-field__incremental--range {
|
&.pi-form-field__incremental--range {
|
||||||
& > form {
|
& > form {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-label {
|
.pi-label {
|
||||||
span {
|
span {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-form-field__incremental {
|
.pi-form-field__incremental {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-form-field-flex {
|
.mat-mdc-form-field-flex {
|
||||||
width: 99%;
|
width: 99%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-dynamic-menu,
|
.pi-dynamic-menu,
|
||||||
.pi-card {
|
.pi-card {
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
.mat-mdc-form-field-input-control {
|
.mat-mdc-form-field-input-control {
|
||||||
height: 3.45rem;
|
height: 3.45rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Cells with incrementals inputs: suffix light weight
|
// Cells with incrementals inputs: suffix light weight
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
.mat-mdc-form-field-icon-suffix {
|
.mat-mdc-form-field-icon-suffix {
|
||||||
.pi-affix__suffix {
|
.pi-affix__suffix {
|
||||||
& > span {
|
& > span {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
// Incremental field
|
// Incremental field
|
||||||
&.pi-form-field__incremental {
|
&.pi-form-field__incremental {
|
||||||
// Add & Substract icons
|
// Add & Substract icons
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
&:not(.pi-icon__appearance--fill),
|
&:not(.pi-icon__appearance--fill),
|
||||||
&.pi-icon__small {
|
&.pi-icon__small {
|
||||||
height: var(--pi-spacing-large);
|
height: var(--pi-spacing-large);
|
||||||
width: var(--pi-spacing-large);
|
width: var(--pi-spacing-large);
|
||||||
border-radius: 42%;
|
border-radius: 42%;
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
height: var(--pi-spacing-medium);
|
height: var(--pi-spacing-medium);
|
||||||
width: var(--pi-spacing-medium);
|
width: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Incremental range
|
// Incremental range
|
||||||
&.pi-form-field__incremental--range {
|
&.pi-form-field__incremental--range {
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
.mat-mdc-form-field-input-control {
|
.mat-mdc-form-field-input-control {
|
||||||
width: calc(50vw - 9rem);
|
width: calc(50vw - 9rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include incrementalCellField;
|
@include incrementalCellField;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
// Incremental field
|
// Incremental field
|
||||||
&.pi-form-field__incremental {
|
&.pi-form-field__incremental {
|
||||||
// Add & Substract icons
|
// Add & Substract icons
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
&:not(.pi-icon__appearance--fill),
|
&:not(.pi-icon__appearance--fill),
|
||||||
&.pi-icon__small {
|
&.pi-icon__small {
|
||||||
height: var(--pi-spacing-medium);
|
height: var(--pi-spacing-medium);
|
||||||
width: var(--pi-spacing-medium);
|
width: var(--pi-spacing-medium);
|
||||||
border-radius: 42%;
|
border-radius: 42%;
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
height: var(--pi-spacing-small);
|
height: var(--pi-spacing-small);
|
||||||
width: var(--pi-spacing-small);
|
width: var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include incrementalCellField(
|
@include incrementalCellField(
|
||||||
calc(100% - var(--pi-spacing-xx-large) - 25%),
|
calc(100% - var(--pi-spacing-xx-large) - 25%),
|
||||||
calc(var(--pi-spacing-xx-large) + 25%)
|
calc(var(--pi-spacing-xx-large) + 25%)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include incrementalCellField(
|
@include incrementalCellField(
|
||||||
calc(100% - var(--pi-spacing-xx-large) - 12.5%),
|
calc(100% - var(--pi-spacing-xx-large) - 12.5%),
|
||||||
calc(var(--pi-spacing-xx-large) + 12.5%)
|
calc(var(--pi-spacing-xx-large) + 12.5%)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
// Desktop S
|
// Desktop S
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
@include incrementalCellField(
|
@include incrementalCellField(
|
||||||
calc(100% - var(--pi-spacing-xx-large)),
|
calc(100% - var(--pi-spacing-xx-large)),
|
||||||
calc(var(--pi-spacing-xx-large))
|
calc(var(--pi-spacing-xx-large))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// Desktop M
|
// Desktop M
|
||||||
&.is-desktop__medium {
|
&.is-desktop__medium {
|
||||||
@include incrementalCellField(
|
@include incrementalCellField(
|
||||||
calc(100% - var(--pi-spacing-xx-large) - 33.33%),
|
calc(100% - var(--pi-spacing-xx-large) - 33.33%),
|
||||||
calc(var(--pi-spacing-xx-large) + 33.33%)
|
calc(var(--pi-spacing-xx-large) + 33.33%)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// Desktop L
|
// Desktop L
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
@include incrementalCellField(
|
@include incrementalCellField(
|
||||||
calc(100% - var(--pi-spacing-xx-large) - 40%),
|
calc(100% - var(--pi-spacing-xx-large) - 40%),
|
||||||
calc(var(--pi-spacing-xx-large) + 40%)
|
calc(var(--pi-spacing-xx-large) + 40%)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
// Password
|
// Password
|
||||||
&.pi-form-field__password {
|
&.pi-form-field__password {
|
||||||
button {
|
button {
|
||||||
&.pi-button__icon {
|
&.pi-button__icon {
|
||||||
color: var(--pi-color-grey-200);
|
color: var(--pi-color-grey-200);
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-grey-200);
|
color: var(--pi-color-grey-200);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,82 +1,82 @@
|
|||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
// Textarea
|
// Textarea
|
||||||
&.pi-form-field__textarea {
|
&.pi-form-field__textarea {
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
min-height: 7rem;
|
min-height: 7rem;
|
||||||
&.mdc-text-field--outlined {
|
&.mdc-text-field--outlined {
|
||||||
.mdc-text-field__input {
|
.mdc-text-field__input {
|
||||||
padding: var(--pi-spacing-xx-small) 0;
|
padding: var(--pi-spacing-xx-small) 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
height: unset;
|
height: unset;
|
||||||
textarea {
|
textarea {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
font: {
|
font: {
|
||||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||||
size: var(--pi-font-size-small);
|
size: var(--pi-font-size-small);
|
||||||
weight: 300;
|
weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Outline
|
// Outline
|
||||||
&.mat-mdc-form-field-appearance-outline {
|
&.mat-mdc-form-field-appearance-outline {
|
||||||
[class*='mat-form-field-outline-'] {
|
[class*='mat-form-field-outline-'] {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// fill
|
// fill
|
||||||
&.mat-form-field-appearance-fill {
|
&.mat-form-field-appearance-fill {
|
||||||
textarea {
|
textarea {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
// max-width: calc(100% - var(--pi-spacing-medium));
|
// max-width: calc(100% - var(--pi-spacing-medium));
|
||||||
margin-top: var(--pi-spacing-x-small);
|
margin-top: var(--pi-spacing-x-small);
|
||||||
background-color: var(--pi-color-background-400);
|
background-color: var(--pi-color-background-400);
|
||||||
transition: var(--pi-animation-fast);
|
transition: var(--pi-animation-fast);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mat-form-field-disabled {
|
&.mat-form-field-disabled {
|
||||||
textarea {
|
textarea {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& + span {
|
& + span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.mat-form-field-disabled) {
|
&:not(.mat-form-field-disabled) {
|
||||||
textarea {
|
textarea {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
padding: var(--pi-spacing-x-small);
|
padding: var(--pi-spacing-x-small);
|
||||||
background-color: var(--pi-color-background-400);
|
background-color: var(--pi-color-background-400);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& + span {
|
& + span {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: var(--pi-spacing-xx-small);
|
margin-top: var(--pi-spacing-xx-small);
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,181 +1,181 @@
|
|||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
&:not(.pi-form-field__incremental) {
|
&:not(.pi-form-field__incremental) {
|
||||||
// Icon colors
|
// Icon colors
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
&:not(.mat-form-field-invalid) {
|
&:not(.mat-form-field-invalid) {
|
||||||
&.mat-focused {
|
&.mat-focused {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.mat-form-field-invalid):not(.mat-focused) {
|
&:not(.mat-form-field-invalid):not(.mat-focused) {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
color: var(--pi-color-grey-300);
|
color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.mat-form-field-invalid {
|
&.mat-form-field-invalid {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-form-field-input-control {
|
.mat-mdc-form-field-input-control {
|
||||||
font: {
|
font: {
|
||||||
family: 'Soehne', Helvetica, Arial, sans-serif !important;
|
family: 'Soehne', Helvetica, Arial, sans-serif !important;
|
||||||
weight: 300;
|
weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-text-field {
|
.mdc-text-field {
|
||||||
.mdc-floating-label {
|
.mdc-floating-label {
|
||||||
font: {
|
font: {
|
||||||
family: 'Soehne', Helvetica, Arial, sans-serif !important;
|
family: 'Soehne', Helvetica, Arial, sans-serif !important;
|
||||||
weight: 300;
|
weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-text-field--disabled {
|
.mdc-text-field--disabled {
|
||||||
.mdc-floating-label {
|
.mdc-floating-label {
|
||||||
color: var(--pi-color-grey-300);
|
color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
// Cell Fields
|
// Cell Fields
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
// 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 {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
height: var(--pi-spacing-xxx-large);
|
height: var(--pi-spacing-xxx-large);
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
text-align: right !important;
|
text-align: right !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-form-field-icon-prefix,
|
.mat-mdc-form-field-icon-prefix,
|
||||||
.mat-mdc-form-field-icon-suffix {
|
.mat-mdc-form-field-icon-suffix {
|
||||||
transform: translateY(var(--pi-spacing-xx-small));
|
transform: translateY(var(--pi-spacing-xx-small));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.pi-form-field__incremental) {
|
&:not(.pi-form-field__incremental) {
|
||||||
input {
|
input {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
transform: translateY(var(--pi-spacing-medium));
|
transform: translateY(var(--pi-spacing-medium));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-form-field__incremental {
|
&.pi-form-field__incremental {
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
// Fill
|
// Fill
|
||||||
&.mat-form-field-appearance-fill {
|
&.mat-form-field-appearance-fill {
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
transform: translateY(var(--pi-spacing-xx-small));
|
transform: translateY(var(--pi-spacing-xx-small));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-text-viewer__font-weight--600 {
|
.pi-text-viewer__font-weight--600 {
|
||||||
height: calc(var(--pi-spacing-xxxx-large) - 0.0625rem);
|
height: calc(var(--pi-spacing-xxxx-large) - 0.0625rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cdk-overlay-container,
|
.cdk-overlay-container,
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
// Cell Fields
|
// Cell Fields
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
.mat-mdc-form-field-flex {
|
.mat-mdc-form-field-flex {
|
||||||
min-height: 3.25rem;
|
min-height: 3.25rem;
|
||||||
}
|
}
|
||||||
// Fill
|
// Fill
|
||||||
&.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))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
height: var(--pi-spacing-xxx-large);
|
height: var(--pi-spacing-xxx-large);
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
text-align: right !important;
|
text-align: right !important;
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
// Cell Fields
|
// Cell Fields
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
.pi-cell {
|
.pi-cell {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
// Fill
|
// Fill
|
||||||
&.mat-form-field-appearance-fill {
|
&.mat-form-field-appearance-fill {
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
margin-left: var(--pi-spacing-xx-large);
|
margin-left: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.pi-form-field__incremental) {
|
&:not(.pi-form-field__incremental) {
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
// Fill
|
// Fill
|
||||||
&.mat-form-field-appearance-fill {
|
&.mat-form-field-appearance-fill {
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
max-width: calc(100% - var(--pi-spacing-xx-large));
|
max-width: calc(100% - var(--pi-spacing-xx-large));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-text-viewer__font-weight--600 {
|
.pi-text-viewer__font-weight--600 {
|
||||||
padding-left: var(--pi-spacing-x-large);
|
padding-left: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
@forward 'pi-field-incremental';
|
@forward 'pi-field-incremental';
|
||||||
@forward 'pi-field-password';
|
@forward 'pi-field-password';
|
||||||
@forward 'pi-field-textarea';
|
@forward 'pi-field-textarea';
|
||||||
@forward 'pi-field';
|
@forward 'pi-field';
|
||||||
|
|||||||
@@ -1,32 +1,32 @@
|
|||||||
@use 'abstracts' as *;
|
@use 'abstracts' as *;
|
||||||
@use 'base' as *;
|
@use 'base' as *;
|
||||||
@use 'components' as *;
|
@use 'components' as *;
|
||||||
@use 'layouts' as *;
|
@use 'layouts' as *;
|
||||||
@use 'vendors' as *;
|
@use 'vendors' as *;
|
||||||
@use 'wrappers' as *;
|
@use 'wrappers' as *;
|
||||||
|
|
||||||
@use '@angular/material' as mat;
|
@use '@angular/material' as mat;
|
||||||
@include mat.checkbox-density(0);
|
@include mat.checkbox-density(0);
|
||||||
|
|
||||||
// TODO: Change import file after checking with Daniel
|
// TODO: Change import file after checking with Daniel
|
||||||
@import '@typeform/embed/build/css/widget.css';
|
@import '@typeform/embed/build/css/widget.css';
|
||||||
@import '@typeform/embed/build/css/popup.css';
|
@import '@typeform/embed/build/css/popup.css';
|
||||||
|
|
||||||
@include mat.core();
|
@include mat.core();
|
||||||
|
|
||||||
// Palette
|
// Palette
|
||||||
$pi-palette-accent: mat.define-palette($pi-color-theme-accent);
|
$pi-palette-accent: mat.define-palette($pi-color-theme-accent);
|
||||||
$pi-palette-primary: mat.define-palette($pi-color-theme-primary);
|
$pi-palette-primary: mat.define-palette($pi-color-theme-primary);
|
||||||
$pi-palette-warn: mat.define-palette($pi-color-theme-warn);
|
$pi-palette-warn: mat.define-palette($pi-color-theme-warn);
|
||||||
// Theme
|
// Theme
|
||||||
$pi-theme: mat.define-light-theme(
|
$pi-theme: mat.define-light-theme(
|
||||||
(
|
(
|
||||||
color: (
|
color: (
|
||||||
accent: $pi-palette-accent,
|
accent: $pi-palette-accent,
|
||||||
primary: $pi-palette-primary,
|
primary: $pi-palette-primary,
|
||||||
warn: $pi-palette-warn,
|
warn: $pi-palette-warn,
|
||||||
),
|
),
|
||||||
density: 0,
|
density: 0,
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
@include mat.all-component-themes($pi-theme);
|
@include mat.all-component-themes($pi-theme);
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,64 +1,64 @@
|
|||||||
@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 {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) {
|
&:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
width: $width;
|
width: $width;
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-layout__06-edge-to-edge {
|
&.pi-layout__06-edge-to-edge {
|
||||||
max-width: -webkit-fill-available;
|
max-width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
&.pi-layout__09-pricing + .pi-layout,
|
&.pi-layout__09-pricing + .pi-layout,
|
||||||
&.pi-layout + .pi-layout__09-pricing {
|
&.pi-layout + .pi-layout__09-pricing {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
max-width: $no-padding-width;
|
max-width: $no-padding-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-container-layout {
|
.pi-container-layout {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include containerWidth;
|
@include containerWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include containerWidth(calc(100% - 3rem), 100%);
|
@include containerWidth(calc(100% - 3rem), 100%);
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include containerWidth(calc(100% - var(--pi-spacing-xxxx-large)), 100%);
|
@include containerWidth(calc(100% - var(--pi-spacing-xxxx-large)), 100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
&.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 {
|
||||||
@include containerWidth(
|
@include containerWidth(
|
||||||
var(--pi-public-width-container-l),
|
var(--pi-public-width-container-l),
|
||||||
var(--pi-public-width-container-l)
|
var(--pi-public-width-container-l)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,65 +1,65 @@
|
|||||||
@mixin layoutHeights(
|
@mixin layoutHeights(
|
||||||
$small-height: 33.33vh,
|
$small-height: 33.33vh,
|
||||||
$medium-height: 40vh,
|
$medium-height: 40vh,
|
||||||
$large-height: 75vh,
|
$large-height: 75vh,
|
||||||
$full-height: 100vh
|
$full-height: 100vh
|
||||||
) {
|
) {
|
||||||
.pi-container-layout {
|
.pi-container-layout {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
// 33.33vh
|
// 33.33vh
|
||||||
&.pi-layout__small {
|
&.pi-layout__small {
|
||||||
min-height: $small-height;
|
min-height: $small-height;
|
||||||
}
|
}
|
||||||
// 33.33vh
|
// 33.33vh
|
||||||
&.pi-layout__medium {
|
&.pi-layout__medium {
|
||||||
min-height: $medium-height;
|
min-height: $medium-height;
|
||||||
}
|
}
|
||||||
// 75vh
|
// 75vh
|
||||||
&.pi-layout__large {
|
&.pi-layout__large {
|
||||||
min-height: $large-height;
|
min-height: $large-height;
|
||||||
}
|
}
|
||||||
// 100vh
|
// 100vh
|
||||||
&.pi-layout__full {
|
&.pi-layout__full {
|
||||||
min-height: $full-height;
|
min-height: $full-height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-container-layout {
|
.pi-container-layout {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
display: block;
|
display: block;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
& > .pi-background-image {
|
& > .pi-background-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *:nth-child(-2n + 2) {
|
& > *:nth-child(-2n + 2) {
|
||||||
margin-top: var(--pi-spacing-xx-large);
|
margin-top: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
margin-top: var(--pi-spacing-large);
|
margin-top: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-layout__no-padding {
|
&.pi-layout__no-padding {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include layoutHeights;
|
@include layoutHeights;
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
@include layoutHeights(30vh, 40vh, 66.66vh, 100vh);
|
@include layoutHeights(30vh, 40vh, 66.66vh, 100vh);
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include layoutHeights(33.33vh, 50vh, 62vh, 100vh);
|
@include layoutHeights(33.33vh, 50vh, 62vh, 100vh);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
@forward 'pi-09-pricing-layout';
|
@forward 'pi-09-pricing-layout';
|
||||||
@forward 'pi-container-layout';
|
@forward 'pi-container-layout';
|
||||||
@forward 'pi-layout';
|
@forward 'pi-layout';
|
||||||
|
|||||||
@@ -1,271 +1,271 @@
|
|||||||
.ch2 {
|
.ch2 {
|
||||||
.ch2-settings-scan {
|
.ch2-settings-scan {
|
||||||
.ch2-settings-tabs {
|
.ch2-settings-tabs {
|
||||||
height: 3.3125rem;
|
height: 3.3125rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ch2-theme-bar {
|
.ch2-theme-bar {
|
||||||
.ch2-dialog {
|
.ch2-dialog {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding: var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Override wrong primary
|
// Override wrong primary
|
||||||
.ch2-style-light,
|
.ch2-style-light,
|
||||||
.ch2-style-dark {
|
.ch2-style-dark {
|
||||||
.ch2-btn-primary {
|
.ch2-btn-primary {
|
||||||
all: unset;
|
all: unset;
|
||||||
min-width: 4.125rem;
|
min-width: 4.125rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: unset;
|
background: unset;
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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) {
|
||||||
padding: var(--pi-spacing-xxxx-small) 0;
|
padding: var(--pi-spacing-xxxx-small) 0;
|
||||||
}
|
}
|
||||||
&.ch2-btn-primary {
|
&.ch2-btn-primary {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ch2-btn {
|
.ch2-btn {
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: var(--pi-spacing-xxxx-small) 0;
|
padding: var(--pi-spacing-xxxx-small) 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
letter-spacing: unset;
|
letter-spacing: unset;
|
||||||
text-transform: unset;
|
text-transform: unset;
|
||||||
min-height: unset !important;
|
min-height: unset !important;
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
}
|
}
|
||||||
&.ch2-btn-secondary {
|
&.ch2-btn-secondary {
|
||||||
&.ch2-allow-all-btn {
|
&.ch2-allow-all-btn {
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--pi-color-primary-900);
|
background-color: var(--pi-color-primary-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.ch2-deny-all-btn {
|
&.ch2-deny-all-btn {
|
||||||
background-color: var(--pi-color-warn);
|
background-color: var(--pi-color-warn);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--pi-color-warn-900);
|
background-color: var(--pi-color-warn-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-btn + .ch2-btn {
|
.ch2-btn + .ch2-btn {
|
||||||
margin-left: var(--pi-spacing-x-small);
|
margin-left: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ch2-btn-primary {
|
.ch2-btn-primary {
|
||||||
&.ch2-deny-all-btn {
|
&.ch2-deny-all-btn {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-warn-900);
|
color: var(--pi-color-warn-900);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.ch2-allow-all-btn {
|
&.ch2-allow-all-btn {
|
||||||
width: 9rem;
|
width: 9rem;
|
||||||
color: var(--pi-color-white);
|
color: var(--pi-color-white);
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
background-color: var(--pi-color-primary-900);
|
background-color: var(--pi-color-primary-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-style-light {
|
.ch2-style-light {
|
||||||
.ch2-btn-secondary {
|
.ch2-btn-secondary {
|
||||||
&:hover {
|
&:hover {
|
||||||
background: unset;
|
background: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-btn-text {
|
.ch2-btn-text {
|
||||||
color: var(--pi-color-black);
|
color: var(--pi-color-black);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
&:hover {
|
&:hover {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
color: var(--pi-color-black);
|
color: var(--pi-color-black);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: rgba($color: #3d3d3d, $alpha: 0.6);
|
color: rgba($color: #3d3d3d, $alpha: 0.6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-icon {
|
.ch2-icon {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 2.5rem;
|
bottom: 2.5rem;
|
||||||
left: 2.5rem;
|
left: 2.5rem;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
.ch2-btn {
|
.ch2-btn {
|
||||||
.ch2-open-settings-btn {
|
.ch2-open-settings-btn {
|
||||||
.ch2-btn-text {
|
.ch2-btn-text {
|
||||||
color: var(--pi-color-warn-900);
|
color: var(--pi-color-warn-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-theme-bar {
|
.ch2-theme-bar {
|
||||||
.ch2-dialog-actions {
|
.ch2-dialog-actions {
|
||||||
@media screen and (min-width: 30rem) {
|
@media screen and (min-width: 30rem) {
|
||||||
gap: var(--pi-spacing-small);
|
gap: var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-right: unset;
|
margin-right: unset;
|
||||||
}
|
}
|
||||||
&.ch2-btn-text-xxs {
|
&.ch2-btn-text-xxs {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-small);
|
size: var(--pi-font-size-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-dialog-actions-vertical {
|
.ch2-dialog-actions-vertical {
|
||||||
div {
|
div {
|
||||||
gap: var(--pi-spacing-small);
|
gap: var(--pi-spacing-small);
|
||||||
&:last-child {
|
&:last-child {
|
||||||
button {
|
button {
|
||||||
margin-bottom: unset !important;
|
margin-bottom: unset !important;
|
||||||
margin-left: unset;
|
margin-left: unset;
|
||||||
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-settings-content {
|
.ch2-settings-content {
|
||||||
.ch2-settings-tab-container {
|
.ch2-settings-tab-container {
|
||||||
& > button {
|
& > button {
|
||||||
margin-right: unset;
|
margin-right: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-theme-bar {
|
.ch2-theme-bar {
|
||||||
.ch2-dialog {
|
.ch2-dialog {
|
||||||
p {
|
p {
|
||||||
strong {
|
strong {
|
||||||
color: var(--pi-color-grey);
|
color: var(--pi-color-grey);
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-small);
|
size: var(--pi-font-size-small);
|
||||||
weight: 700;
|
weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-style-light {
|
.ch2-style-light {
|
||||||
&.ch2-icon {
|
&.ch2-icon {
|
||||||
a {
|
a {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
svg {
|
svg {
|
||||||
border: 0.125rem solid var(--pi-color-primary);
|
border: 0.125rem solid var(--pi-color-primary);
|
||||||
fill: var(--pi-color-primary);
|
fill: var(--pi-color-primary);
|
||||||
background: var(--pi-color-white);
|
background: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-btn-text {
|
.ch2-btn-text {
|
||||||
color: var(--pi-color-grey);
|
color: var(--pi-color-grey);
|
||||||
}
|
}
|
||||||
.ch2-dialog-description {
|
.ch2-dialog-description {
|
||||||
margin-top: var(--pi-spacing-xxx-small);
|
margin-top: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
.ch2-dialog-content {
|
.ch2-dialog-content {
|
||||||
p {
|
p {
|
||||||
color: var(--pi-color-grey);
|
color: var(--pi-color-grey);
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-icon {
|
.ch2-icon {
|
||||||
bottom: 0.375rem;
|
bottom: 0.375rem;
|
||||||
left: 0.375rem;
|
left: 0.375rem;
|
||||||
a {
|
a {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-small);
|
size: var(--pi-font-size-small);
|
||||||
weight: unset;
|
weight: unset;
|
||||||
}
|
}
|
||||||
text-transform: unset;
|
text-transform: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
@media screen and (max-width: 700px) {
|
||||||
.ch2-theme-bar {
|
.ch2-theme-bar {
|
||||||
.ch2-dialog-content {
|
.ch2-dialog-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.ch2-dialog-actions {
|
.ch2-dialog-actions {
|
||||||
button {
|
button {
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-dialog-actions {
|
.ch2-dialog-actions {
|
||||||
button {
|
button {
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ch2-dialog-actions-vertical {
|
.ch2-dialog-actions-vertical {
|
||||||
display: flex;
|
display: flex;
|
||||||
@media (max-width: 30rem) {
|
@media (max-width: 30rem) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
& > div {
|
& > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: var(--pi-spacing-large);
|
margin-top: var(--pi-spacing-large);
|
||||||
|
|
||||||
&: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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
.ch2-theme-bar {
|
.ch2-theme-bar {
|
||||||
.ch2-dialog-actions {
|
.ch2-dialog-actions {
|
||||||
margin-top: var(--pi-spacing-xxx-small);
|
margin-top: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 700px) {
|
@media screen and (min-width: 700px) {
|
||||||
.ch2-theme-bar {
|
.ch2-theme-bar {
|
||||||
.ch2-dialog-actions-vertical {
|
.ch2-dialog-actions-vertical {
|
||||||
& > div {
|
& > div {
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,177 +1,177 @@
|
|||||||
@mixin checkboxColor($color) {
|
@mixin checkboxColor($color) {
|
||||||
.mat-mdc-checkbox {
|
.mat-mdc-checkbox {
|
||||||
.mdc-checkbox__native-control {
|
.mdc-checkbox__native-control {
|
||||||
// Colors by state
|
// Colors by state
|
||||||
&: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-#{$color}) !important;
|
border-color: var(--pi-color-#{$color}) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-select-option {
|
.pi-select-option {
|
||||||
@include checkboxColor(primary-200);
|
@include checkboxColor(primary-200);
|
||||||
}
|
}
|
||||||
@include checkboxColor(grey-100);
|
@include checkboxColor(grey-100);
|
||||||
|
|
||||||
// Checkbox
|
// Checkbox
|
||||||
.mdc-checkbox__background {
|
.mdc-checkbox__background {
|
||||||
border-radius: var(--pi-border-radius-x-small);
|
border-radius: var(--pi-border-radius-x-small);
|
||||||
}
|
}
|
||||||
.mdc-checkbox__background {
|
.mdc-checkbox__background {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-checkbox {
|
.mat-mdc-checkbox {
|
||||||
&.mat-accent {
|
&.mat-accent {
|
||||||
--mdc-checkbox-selected-checkmark-color: #3d3d3d;
|
--mdc-checkbox-selected-checkmark-color: #3d3d3d;
|
||||||
--mdc-checkbox-selected-focus-icon-color: #799ef0;
|
--mdc-checkbox-selected-focus-icon-color: #799ef0;
|
||||||
--mdc-checkbox-selected-hover-icon-color: #799ef0;
|
--mdc-checkbox-selected-hover-icon-color: #799ef0;
|
||||||
--mdc-checkbox-selected-icon-color: #799ef0;
|
--mdc-checkbox-selected-icon-color: #799ef0;
|
||||||
--mdc-checkbox-selected-pressed-icon-color: #799ef0;
|
--mdc-checkbox-selected-pressed-icon-color: #799ef0;
|
||||||
--mdc-checkbox-unselected-focus-icon-color: #3d3d3d;
|
--mdc-checkbox-unselected-focus-icon-color: #3d3d3d;
|
||||||
--mdc-checkbox-unselected-hover-icon-color: #3d3d3d;
|
--mdc-checkbox-unselected-hover-icon-color: #3d3d3d;
|
||||||
--mdc-checkbox-disabled-selected-icon-color: rgba(196, 213, 255, 0.15);
|
--mdc-checkbox-disabled-selected-icon-color: rgba(196, 213, 255, 0.15);
|
||||||
--mdc-checkbox-disabled-unselected-icon-color: rgba(196, 213, 255, 0.15);
|
--mdc-checkbox-disabled-unselected-icon-color: rgba(196, 213, 255, 0.15);
|
||||||
--mdc-checkbox-unselected-icon-color: rgba(196, 213, 255, 0);
|
--mdc-checkbox-unselected-icon-color: rgba(196, 213, 255, 0);
|
||||||
--mdc-checkbox-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15);
|
--mdc-checkbox-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15);
|
||||||
--mdc-checkbox-selected-checkmark-color: rgba(227, 246, 249, 1);
|
--mdc-checkbox-selected-checkmark-color: rgba(227, 246, 249, 1);
|
||||||
}
|
}
|
||||||
.mdc-checkbox__ripple {
|
.mdc-checkbox__ripple {
|
||||||
background: var(--pi-color-primary-200-rgba);
|
background: var(--pi-color-primary-200-rgba);
|
||||||
}
|
}
|
||||||
.mdc-form-field {
|
.mdc-form-field {
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
color: var(--pi-color-black);
|
color: var(--pi-color-black);
|
||||||
}
|
}
|
||||||
.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(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
||||||
) / 2
|
) / 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(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
||||||
) / 2
|
) / 2
|
||||||
);
|
);
|
||||||
right: calc(
|
right: calc(
|
||||||
(
|
(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
||||||
) / 2
|
) / 2
|
||||||
);
|
);
|
||||||
left: calc(
|
left: calc(
|
||||||
(
|
(
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
||||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
||||||
) / 2
|
) / 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));
|
||||||
|
|
||||||
// Colors by state
|
// Colors by state
|
||||||
&: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: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:checked {
|
&:checked {
|
||||||
& ~ .mdc-checkbox__background {
|
& ~ .mdc-checkbox__background {
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& ~ .mdc-checkbox__background {
|
& ~ .mdc-checkbox__background {
|
||||||
.mdc-checkbox__checkmark {
|
.mdc-checkbox__checkmark {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
transform: scale(0.7);
|
transform: scale(0.7);
|
||||||
.mdc-checkbox__checkmark-path {
|
.mdc-checkbox__checkmark-path {
|
||||||
stroke-width: 0.3125rem;
|
stroke-width: 0.3125rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&: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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:checked {
|
&:checked {
|
||||||
& ~ .mdc-checkbox__background {
|
& ~ .mdc-checkbox__background {
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Checked
|
// Checked
|
||||||
&.mat-mdc-checkbox-checked {
|
&.mat-mdc-checkbox-checked {
|
||||||
.mdc-checkbox {
|
.mdc-checkbox {
|
||||||
background-color: var(--pi-color-primary-50);
|
background-color: var(--pi-color-primary-50);
|
||||||
border-radius: 0.4375rem;
|
border-radius: 0.4375rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pseudo checkbox
|
// Pseudo checkbox
|
||||||
.mat-pseudo-checkbox {
|
.mat-pseudo-checkbox {
|
||||||
border-radius: var(--pi-border-radius-x-small);
|
border-radius: var(--pi-border-radius-x-small);
|
||||||
}
|
}
|
||||||
.mat-pseudo-checkbox-full {
|
.mat-pseudo-checkbox-full {
|
||||||
border: 0.0625rem solid;
|
border: 0.0625rem solid;
|
||||||
}
|
}
|
||||||
.mat-pseudo-checkbox-full {
|
.mat-pseudo-checkbox-full {
|
||||||
&.mat-pseudo-checkbox-checked {
|
&.mat-pseudo-checkbox-checked {
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
top: -2px;
|
top: -2px;
|
||||||
height: 0.2188rem;
|
height: 0.2188rem;
|
||||||
width: 0.4rem;
|
width: 0.4rem;
|
||||||
}
|
}
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.25rem;
|
top: -0.25rem;
|
||||||
left: -0.25rem;
|
left: -0.25rem;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
height: var(--pi-spacing-x-large);
|
height: var(--pi-spacing-x-large);
|
||||||
width: var(--pi-spacing-x-large);
|
width: var(--pi-spacing-x-large);
|
||||||
padding: var(--pi-spacing-xxx-small);
|
padding: var(--pi-spacing-xxx-small);
|
||||||
border-radius: 0.4375rem;
|
border-radius: 0.4375rem;
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
background-color: var(--pi-color-primary-50);
|
background-color: var(--pi-color-primary-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-checkbox-ripple,
|
.mat-mdc-checkbox-ripple,
|
||||||
.mdc-checkbox__ripple {
|
.mdc-checkbox__ripple {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,49 +1,49 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
.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-xx-small)
|
||||||
var(--pi-spacing-medium);
|
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;
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
.pi-button__icon {
|
.pi-button__icon {
|
||||||
max-height: 0.3125rem;
|
max-height: 0.3125rem;
|
||||||
figure {
|
figure {
|
||||||
width: var(--pi-spacing-small);
|
width: var(--pi-spacing-small);
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&::after {
|
&::after {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.pi-button__icon {
|
.pi-button__icon {
|
||||||
figure {
|
figure {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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__appearance--outline):not(
|
||||||
.pi-button__white
|
.pi-button__white
|
||||||
) {
|
) {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-chip-ripple {
|
.mat-mdc-chip-ripple {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-medium);
|
size: var(--pi-font-size-medium);
|
||||||
weight: 300;
|
weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,292 +1,292 @@
|
|||||||
@mixin mainContentHeight {
|
@mixin mainContentHeight {
|
||||||
.pi-modal__main-content {
|
.pi-modal__main-content {
|
||||||
display: block;
|
display: block;
|
||||||
& > *:first-child {
|
& > *:first-child {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
// Custom
|
// Custom
|
||||||
&.pi-modal__main-content--custom-template {
|
&.pi-modal__main-content--custom-template {
|
||||||
& > *:first-child {
|
& > *:first-child {
|
||||||
min-height: 60vh;
|
min-height: 60vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Dialog
|
// Dialog
|
||||||
&.pi-modal__main-content--dialog-template {
|
&.pi-modal__main-content--dialog-template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin modalScrollBar {
|
@mixin modalScrollBar {
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: var(--pi-spacing-xxxx-small);
|
width: var(--pi-spacing-xxxx-small);
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: rgba($color: #aeaeb6, $alpha: 0.3);
|
background-color: rgba($color: #aeaeb6, $alpha: 0.3);
|
||||||
border-radius: var(--pi-border-radius-small);
|
border-radius: var(--pi-border-radius-small);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: darken($color: #aeaeb6, $amount: 0.5);
|
background-color: darken($color: #aeaeb6, $amount: 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.cdk-overlay-container,
|
.cdk-overlay-container,
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
.mdc-dialog__container {
|
.mdc-dialog__container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: var(--pi-border-radius-medium);
|
border-radius: var(--pi-border-radius-medium);
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
.mdc-dialog__surface {
|
.mdc-dialog__surface {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-modal__panel {
|
.pi-modal__panel {
|
||||||
.pi-modal {
|
.pi-modal {
|
||||||
&:not(.pi-modal__custom) {
|
&:not(.pi-modal__custom) {
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
figure {
|
figure {
|
||||||
max-width: 10rem;
|
max-width: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-modal__dialog {
|
&.pi-modal__dialog {
|
||||||
.pi-panel__grey {
|
.pi-panel__grey {
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-modal__main-content {
|
.pi-modal__main-content {
|
||||||
// Main DIALOG content
|
// Main DIALOG content
|
||||||
&.pi-modal__main-content--dialog-template {
|
&.pi-modal__main-content--dialog-template {
|
||||||
& > .pi-modal__custom-template {
|
& > .pi-modal__custom-template {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@include modalScrollBar;
|
@include modalScrollBar;
|
||||||
}
|
}
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
height: var(--pi-height-footer);
|
height: var(--pi-height-footer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Main CUSTOM content
|
// Main CUSTOM content
|
||||||
&.pi-modal__main-content--custom-template {
|
&.pi-modal__main-content--custom-template {
|
||||||
& > .pi-modal__custom-template {
|
& > .pi-modal__custom-template {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
@include modalScrollBar;
|
@include modalScrollBar;
|
||||||
|
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
padding-left: var(--pi-spacing-x-large);
|
padding-left: var(--pi-spacing-x-large);
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
height: 5.5rem;
|
height: 5.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-checkbox-layout {
|
.mat-mdc-checkbox-layout {
|
||||||
white-space: unset;
|
white-space: unset;
|
||||||
}
|
}
|
||||||
// Full
|
// Full
|
||||||
&.pi-modal__panel--full {
|
&.pi-modal__panel--full {
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
.mat-mdc-dialog-container {
|
.mat-mdc-dialog-container {
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Backdrop
|
// Backdrop
|
||||||
.pi-backdrop {
|
.pi-backdrop {
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-modal {
|
.pi-modal {
|
||||||
& > .pi-headline {
|
& > .pi-headline {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
@include mainContentHeight;
|
@include mainContentHeight;
|
||||||
}
|
}
|
||||||
// Panel
|
// Panel
|
||||||
.pi-modal__panel {
|
.pi-modal__panel {
|
||||||
// Small | Medium
|
// Small | Medium
|
||||||
&.pi-modal__panel--small,
|
&.pi-modal__panel--small,
|
||||||
&.pi-modal__panel--medium {
|
&.pi-modal__panel--medium {
|
||||||
width: 83vw;
|
width: 83vw;
|
||||||
|
|
||||||
.pi-modal__main-content {
|
.pi-modal__main-content {
|
||||||
// Main CUSTOM content
|
// Main CUSTOM content
|
||||||
&.pi-modal__main-content--custom-template {
|
&.pi-modal__main-content--custom-template {
|
||||||
& > .pi-modal__custom-template {
|
& > .pi-modal__custom-template {
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
max-height: calc(85vh - var(--pi-height-footer) - 5rem);
|
max-height: calc(85vh - var(--pi-height-footer) - 5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Action wrapper
|
// Action wrapper
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__action {
|
&.pi-wrapper__action {
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
box-shadow: 0 -6px 34px -17px rgba(191, 191, 191, 0.4);
|
box-shadow: 0 -6px 34px -17px rgba(191, 191, 191, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-modal__main-content {
|
.pi-modal__main-content {
|
||||||
&.pi-modal__main-content--custom-template {
|
&.pi-modal__main-content--custom-template {
|
||||||
video {
|
video {
|
||||||
max-width: 85%;
|
max-width: 85%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
.pi-modal__panel {
|
.pi-modal__panel {
|
||||||
@include mainContentHeight;
|
@include mainContentHeight;
|
||||||
// Small
|
// Small
|
||||||
&.pi-modal__panel--small {
|
&.pi-modal__panel--small {
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Medium
|
// Medium
|
||||||
&.pi-modal__panel--medium {
|
&.pi-modal__panel--medium {
|
||||||
width: 70vw;
|
width: 70vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
.pi-modal__main-content {
|
.pi-modal__main-content {
|
||||||
&.pi-modal__main-content--custom-template {
|
&.pi-modal__main-content--custom-template {
|
||||||
video {
|
video {
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
.pi-modal {
|
.pi-modal {
|
||||||
// Type Custom
|
// Type Custom
|
||||||
&.pi-modal__custom {
|
&.pi-modal__custom {
|
||||||
// Is Closable
|
// Is Closable
|
||||||
&.pi-modal__is-closable {
|
&.pi-modal__is-closable {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Is Not Closable
|
// Is Not Closable
|
||||||
&:not(.pi-modal__is-closable) {
|
&:not(.pi-modal__is-closable) {
|
||||||
.pi-modal__custom--inner {
|
.pi-modal__custom--inner {
|
||||||
main {
|
main {
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Type Dialog
|
// Type Dialog
|
||||||
&.pi-modal__dialog {
|
&.pi-modal__dialog {
|
||||||
// Is Closable
|
// Is Closable
|
||||||
&.pi-modal__is-closable {
|
&.pi-modal__is-closable {
|
||||||
}
|
}
|
||||||
// Is Not Closable
|
// Is Not Closable
|
||||||
&:not(.pi-modal__is-closable) {
|
&:not(.pi-modal__is-closable) {
|
||||||
& > main {
|
& > main {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-modal__main-content {
|
.pi-modal__main-content {
|
||||||
&.pi-modal__main-content--custom-template {
|
&.pi-modal__main-content--custom-template {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
video {
|
video {
|
||||||
max-width: 66.66%;
|
max-width: 66.66%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-modal {
|
.pi-modal {
|
||||||
// Type Dialog
|
// Type Dialog
|
||||||
&.pi-modal__dialog {
|
&.pi-modal__dialog {
|
||||||
& > main {
|
& > main {
|
||||||
& > .pi-headline + section {
|
& > .pi-headline + section {
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include mainContentHeight;
|
@include mainContentHeight;
|
||||||
}
|
}
|
||||||
.pi-modal__panel {
|
.pi-modal__panel {
|
||||||
// Small
|
// Small
|
||||||
&.pi-modal__panel--small {
|
&.pi-modal__panel--small {
|
||||||
width: 28vw;
|
width: 28vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Medium
|
// Medium
|
||||||
&.pi-modal__panel--medium {
|
&.pi-modal__panel--medium {
|
||||||
width: 37vw;
|
width: 37vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
.mat-mdc-expansion-panel {
|
.mat-mdc-expansion-panel {
|
||||||
&:not([class*='mat-elevation-z']) {
|
&:not([class*='mat-elevation-z']) {
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-expansion-panel-header {
|
.mat-mdc-expansion-panel-header {
|
||||||
border-bottom: 1px solid var(--pi-color-background-400);
|
border-bottom: 1px solid var(--pi-color-background-400);
|
||||||
}
|
}
|
||||||
.mat-mdc-expansion-panel-body {
|
.mat-mdc-expansion-panel-body {
|
||||||
padding: var(--pi-spacing-xx-large);
|
padding: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,428 +1,428 @@
|
|||||||
// Appearance outline
|
// Appearance outline
|
||||||
@mixin matFormFieldOutline() {
|
@mixin matFormFieldOutline() {
|
||||||
// Appearance Outline
|
// Appearance Outline
|
||||||
.mat-form-field-appearance-outline {
|
.mat-form-field-appearance-outline {
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
transform: translateX(-0.75rem);
|
transform: translateX(-0.75rem);
|
||||||
}
|
}
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
}
|
}
|
||||||
// Focused
|
// Focused
|
||||||
&.mat-focused {
|
&.mat-focused {
|
||||||
[class*='mdc-notched-outline__'] {
|
[class*='mdc-notched-outline__'] {
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
width: var(--pi-spacing-small);
|
width: var(--pi-spacing-small);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// NOT Invalid
|
// NOT Invalid
|
||||||
&:not(.mat-form-field-invalid) {
|
&:not(.mat-form-field-invalid) {
|
||||||
&:not(.mat-focused) {
|
&:not(.mat-focused) {
|
||||||
.mat-mdc-form-field-icon-suffix,
|
.mat-mdc-form-field-icon-suffix,
|
||||||
.mat-mdc-form-field-icon-prefix {
|
.mat-mdc-form-field-icon-prefix {
|
||||||
color: var(--pi-color-grey-300);
|
color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-notched-outline {
|
.mdc-notched-outline {
|
||||||
.mdc-floating-label {
|
.mdc-floating-label {
|
||||||
height: var(--pi-spacing-xxxx-large);
|
height: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-text-field {
|
.mdc-text-field {
|
||||||
&:not(.mat-form-field-no-animations) {
|
&:not(.mat-form-field-no-animations) {
|
||||||
.mdc-floating-label {
|
.mdc-floating-label {
|
||||||
transform: translate(0, -3rem) scale(1);
|
transform: translate(0, -3rem) scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field-flex {
|
.mat-mdc-form-field-flex {
|
||||||
padding: 0 var(--pi-spacing-small);
|
padding: 0 var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-notched-outline__leading {
|
.mdc-notched-outline__leading {
|
||||||
border-radius: 0.875rem 0 0 0.875rem;
|
border-radius: 0.875rem 0 0 0.875rem;
|
||||||
}
|
}
|
||||||
.mdc-notched-outline__trailing {
|
.mdc-notched-outline__trailing {
|
||||||
border-radius: 0 0.875rem 0.875rem 0;
|
border-radius: 0 0.875rem 0.875rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field-label {
|
.mat-mdc-form-field-label {
|
||||||
margin-left: var(--pi-spacing-xxxx-small);
|
margin-left: var(--pi-spacing-xxxx-small);
|
||||||
margin-right: var(--pi-spacing-xxxx-small);
|
margin-right: var(--pi-spacing-xxxx-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field-prefix,
|
.mat-mdc-form-field-prefix,
|
||||||
.mat-mdc-form-field-suffix {
|
.mat-mdc-form-field-suffix {
|
||||||
top: unset;
|
top: unset;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.pi-icon__small {
|
.pi-icon__small {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
height: var(--pi-spacing-x-large);
|
height: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
flex: auto;
|
flex: auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 11.25rem;
|
width: 11.25rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: var(--pi-spacing-xxxx-large);
|
height: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
height: calc(var(--pi-spacing-xxxx-large) - 0.125rem);
|
height: calc(var(--pi-spacing-xxxx-large) - 0.125rem);
|
||||||
margin-top: 0.0625rem;
|
margin-top: 0.0625rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mdc-text-field--disabled {
|
&.mdc-text-field--disabled {
|
||||||
.mat-mdc-input-element,
|
.mat-mdc-input-element,
|
||||||
.mdc-notched-outline,
|
.mdc-notched-outline,
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
color: var(--pi-color-grey-300);
|
color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Invalid
|
// Invalid
|
||||||
&.mat-form-field-invalid {
|
&.mat-form-field-invalid {
|
||||||
.mat-mdc-form-field-subscript-wrapper {
|
.mat-mdc-form-field-subscript-wrapper {
|
||||||
height: var(--pi-spacing-x-large);
|
height: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// NOT Invalid
|
// NOT Invalid
|
||||||
&:not(.mat-form-field-invalid) {
|
&:not(.mat-form-field-invalid) {
|
||||||
.mat-mdc-form-field-subscript-wrapper {
|
.mat-mdc-form-field-subscript-wrapper {
|
||||||
height: var(--pi-spacing-x-small);
|
height: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outline & default
|
// Outline & default
|
||||||
&:not(.mat-focused):not(.mat-form-field-invalid) {
|
&:not(.mat-focused):not(.mat-form-field-invalid) {
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
[class*='mdc-notched-outline__'] {
|
[class*='mdc-notched-outline__'] {
|
||||||
border-color: var(--pi-color-grey-200);
|
border-color: var(--pi-color-grey-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
[class*='mdc-notched-outline__'] {
|
[class*='mdc-notched-outline__'] {
|
||||||
border-color: var(--pi-color-grey-300);
|
border-color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Outline & Invalid
|
// Outline & Invalid
|
||||||
&.mat-focused {
|
&.mat-focused {
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
[class*='mdc-notched-outline__'] {
|
[class*='mdc-notched-outline__'] {
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Outline & Invalid
|
// Outline & Invalid
|
||||||
&.mat-form-field-invalid {
|
&.mat-form-field-invalid {
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
[class*='mdc-notched-outline__'] {
|
[class*='mdc-notched-outline__'] {
|
||||||
border-color: var(--pi-color-warn);
|
border-color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Appearance fill
|
// Appearance fill
|
||||||
@mixin matFormFieldFill() {
|
@mixin matFormFieldFill() {
|
||||||
.mat-form-field-appearance-fill {
|
.mat-form-field-appearance-fill {
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
height: unset;
|
height: unset;
|
||||||
flex: unset;
|
flex: unset;
|
||||||
&:not(.mdc-text-field--outlined) {
|
&:not(.mdc-text-field--outlined) {
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
padding-top: unset;
|
padding-top: unset;
|
||||||
padding-bottom: unset;
|
padding-bottom: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// NOT Invalid
|
// NOT Invalid
|
||||||
&:not(.mat-form-field-invalid) {
|
&:not(.mat-form-field-invalid) {
|
||||||
&:not(.mat-focused) {
|
&:not(.mat-focused) {
|
||||||
.mat-mdc-form-field-icon-suffix,
|
.mat-mdc-form-field-icon-suffix,
|
||||||
.mat-mdc-form-field-icon-prefix {
|
.mat-mdc-form-field-icon-prefix {
|
||||||
color: var(--pi-color-grey-900);
|
color: var(--pi-color-grey-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-text-field {
|
.mdc-text-field {
|
||||||
padding: unset;
|
padding: unset;
|
||||||
}
|
}
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.mdc-text-field--filled {
|
.mdc-text-field--filled {
|
||||||
.mdc-line-ripple {
|
.mdc-line-ripple {
|
||||||
&::after {
|
&::after {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mdc-text-field--disabled {
|
&.mdc-text-field--disabled {
|
||||||
.mdc-line-ripple {
|
.mdc-line-ripple {
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom-color: transparent;
|
border-bottom-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-floating-label--float-above {
|
.mdc-floating-label--float-above {
|
||||||
transform: translateY(-100%) scale(1);
|
transform: translateY(-100%) scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-text-field--filled {
|
.mdc-text-field--filled {
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mdc-text-field--disable {
|
&.mdc-text-field--disable {
|
||||||
.mdc-line-ripple {
|
.mdc-line-ripple {
|
||||||
background-image: unset;
|
background-image: unset;
|
||||||
background-size: unset;
|
background-size: unset;
|
||||||
background-repeat: unset;
|
background-repeat: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-floating-label {
|
.mat-mdc-floating-label {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field-subscript-wrapper {
|
.mat-mdc-form-field-subscript-wrapper {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// State colors
|
// State colors
|
||||||
@mixin matFormFieldStateColors {
|
@mixin matFormFieldStateColors {
|
||||||
.mdc-text-field {
|
.mdc-text-field {
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
.mdc-text-field__input {
|
.mdc-text-field__input {
|
||||||
color: var(--pi-color-black);
|
color: var(--pi-color-black);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
|
&:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
|
||||||
.mdc-floating-label {
|
.mdc-floating-label {
|
||||||
color: var(--pi-color-grey-300);
|
color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.mdc-text-field--invalid {
|
&.mdc-text-field--invalid {
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
.mdc-floating-label {
|
.mdc-floating-label {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Invalid
|
// Invalid
|
||||||
&.mat-form-field-invalid {
|
&.mat-form-field-invalid {
|
||||||
.mat-mdc-form-field-icon-suffix,
|
.mat-mdc-form-field-icon-suffix,
|
||||||
.mat-mdc-form-field-icon-prefix,
|
.mat-mdc-form-field-icon-prefix,
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
// Focused
|
// Focused
|
||||||
&.mat-focused {
|
&.mat-focused {
|
||||||
.mat-mdc-form-field-icon-suffix,
|
.mat-mdc-form-field-icon-suffix,
|
||||||
.mat-mdc-form-field-icon-prefix,
|
.mat-mdc-form-field-icon-prefix,
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// NOT Invalid
|
// NOT Invalid
|
||||||
&:not(.mat-form-field-invalid) {
|
&:not(.mat-form-field-invalid) {
|
||||||
// Focused
|
// Focused
|
||||||
&.mat-focused {
|
&.mat-focused {
|
||||||
.mat-mdc-form-field-icon-suffix,
|
.mat-mdc-form-field-icon-suffix,
|
||||||
.mat-mdc-form-field-icon-prefix,
|
.mat-mdc-form-field-icon-prefix,
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field-error {
|
.mat-mdc-form-field-error {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
// NOT Has Error
|
// NOT Has Error
|
||||||
&:not(.has-error) {
|
&:not(.has-error) {
|
||||||
// Type Fill
|
// Type Fill
|
||||||
.mat-form-field-appearance-fill {
|
.mat-form-field-appearance-fill {
|
||||||
.mdc-text-field--filled {
|
.mdc-text-field--filled {
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
.mdc-line-ripple {
|
.mdc-line-ripple {
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom-color: var(--pi-color-grey-100);
|
border-bottom-color: var(--pi-color-grey-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.mdc-line-ripple {
|
.mdc-line-ripple {
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom-color: var(--pi-color-grey-200);
|
border-bottom-color: var(--pi-color-grey-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Has Error
|
// Has Error
|
||||||
&.has-error {
|
&.has-error {
|
||||||
// Type Fill
|
// Type Fill
|
||||||
.mat-form-field-appearance-fill {
|
.mat-form-field-appearance-fill {
|
||||||
.mdc-text-field--filled {
|
.mdc-text-field--filled {
|
||||||
&:not(.mdc-text-field--disabled) {
|
&:not(.mdc-text-field--disabled) {
|
||||||
.mdc-line-ripple {
|
.mdc-line-ripple {
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom-color: var(--pi-color-warn-200);
|
border-bottom-color: var(--pi-color-warn-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.mdc-line-ripple {
|
.mdc-line-ripple {
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom-color: var(--pi-color-warn);
|
border-bottom-color: var(--pi-color-warn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Placeholder
|
// Placeholder
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
.mat-mdc-input-element {
|
.mat-mdc-input-element {
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: var(--pi-color-grey-300);
|
color: var(--pi-color-grey-300);
|
||||||
-webkit-text-fill-color: var(--pi-color-grey-300);
|
-webkit-text-fill-color: var(--pi-color-grey-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.pi-field {
|
.pi-field {
|
||||||
// Common
|
// Common
|
||||||
.mat-mdc-form-field {
|
.mat-mdc-form-field {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: 1.65;
|
line-height: 1.65;
|
||||||
font: {
|
font: {
|
||||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*='mdc-notched-outline__'] {
|
[class*='mdc-notched-outline__'] {
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
z-index: -99;
|
z-index: -99;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field-focus-overlay {
|
.mat-mdc-form-field-focus-overlay {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Outlined
|
// Outlined
|
||||||
.mdc-text-field--outlined {
|
.mdc-text-field--outlined {
|
||||||
.mdc-notched-outline {
|
.mdc-notched-outline {
|
||||||
z-index: -99;
|
z-index: -99;
|
||||||
}
|
}
|
||||||
.mdc-notched-outline--upgraded {
|
.mdc-notched-outline--upgraded {
|
||||||
.mdc-floating-label--float-above {
|
.mdc-floating-label--float-above {
|
||||||
font : {
|
font : {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-notched-outline--notched {
|
.mdc-notched-outline--notched {
|
||||||
margin-left: unset;
|
margin-left: unset;
|
||||||
-webkit-clip-path: unset;
|
-webkit-clip-path: unset;
|
||||||
clip-path: unset;
|
clip-path: unset;
|
||||||
.mdc-notched-outline__notch {
|
.mdc-notched-outline__notch {
|
||||||
border-top: 1px solid;
|
border-top: 1px solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-form-field-subscript-wrapper {
|
.mat-mdc-form-field-subscript-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-text-field-wrapper {
|
.mat-mdc-text-field-wrapper {
|
||||||
&.mdc-text-field--outlined {
|
&.mdc-text-field--outlined {
|
||||||
.mat-mdc-form-field-infix {
|
.mat-mdc-form-field-infix {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Appearance
|
// Appearance
|
||||||
// Outline
|
// Outline
|
||||||
@include matFormFieldOutline;
|
@include matFormFieldOutline;
|
||||||
|
|
||||||
// Fill
|
// Fill
|
||||||
@include matFormFieldFill;
|
@include matFormFieldFill;
|
||||||
|
|
||||||
// State colors
|
// State colors
|
||||||
@include matFormFieldStateColors;
|
@include matFormFieldStateColors;
|
||||||
|
|
||||||
// Affix
|
// Affix
|
||||||
.mat-mdc-form-field-prefix,
|
.mat-mdc-form-field-prefix,
|
||||||
.mat-mdc-form-field-suffix {
|
.mat-mdc-form-field-suffix {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Error
|
// Error
|
||||||
.mat-mdc-form-field-error {
|
.mat-mdc-form-field-error {
|
||||||
font : {
|
font : {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hint & Error
|
// Hint & Error
|
||||||
.mat-mdc-form-field-hint-wrapper,
|
.mat-mdc-form-field-hint-wrapper,
|
||||||
.mat-mdc-form-field-error-wrapper {
|
.mat-mdc-form-field-error-wrapper {
|
||||||
padding: 0 var(--pi-spacing-xx-small);
|
padding: 0 var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
// Exclude incremental
|
// Exclude incremental
|
||||||
&:not(.pi-form-field__incremental) {
|
&:not(.pi-form-field__incremental) {
|
||||||
// Type Fill
|
// Type Fill
|
||||||
.mat-form-field-appearance-fill {
|
.mat-form-field-appearance-fill {
|
||||||
input {
|
input {
|
||||||
&.mat-mdc-input-element {
|
&.mat-mdc-input-element {
|
||||||
all: unset;
|
all: unset;
|
||||||
height: unset;
|
height: unset;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
margin-top: 1.875rem;
|
margin-top: 1.875rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
104
libs/ui/src/lib/styles/common/vendors/_mat-menu.scss
vendored
104
libs/ui/src/lib/styles/common/vendors/_mat-menu.scss
vendored
@@ -1,52 +1,52 @@
|
|||||||
.pi-shell,
|
.pi-shell,
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.mat-mdc-menu-panel {
|
.mat-mdc-menu-panel {
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
background-color: rgba($color: white, $alpha: 0.96);
|
background-color: rgba($color: white, $alpha: 0.96);
|
||||||
box-shadow: var(--pi-box-shadow-panel);
|
box-shadow: var(--pi-box-shadow-panel);
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
}
|
}
|
||||||
.mat-mdc-menu-item {
|
.mat-mdc-menu-item {
|
||||||
line-height: 3.4375rem;
|
line-height: 3.4375rem;
|
||||||
height: 3.4375rem;
|
height: 3.4375rem;
|
||||||
padding: 0 var(--pi-spacing-x-large);
|
padding: 0 var(--pi-spacing-x-large);
|
||||||
color: var(--pi-color-highlighted);
|
color: var(--pi-color-highlighted);
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
font: {
|
font: {
|
||||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||||
size: var(--pi-font-size-small);
|
size: var(--pi-font-size-small);
|
||||||
}
|
}
|
||||||
&:hover:not([disabled]),
|
&:hover:not([disabled]),
|
||||||
&.cdk-program-focused,
|
&.cdk-program-focused,
|
||||||
&.cdk-keyboard-focused,
|
&.cdk-keyboard-focused,
|
||||||
.mat-mdc-menu-item-highlighted {
|
.mat-mdc-menu-item-highlighted {
|
||||||
&:not([disabled]) {
|
&:not([disabled]) {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
background: var(--pi-color-primary-50);
|
background: var(--pi-color-primary-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-menu-panel {
|
.mat-mdc-menu-panel {
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
}
|
}
|
||||||
.mat-mdc-menu-content {
|
.mat-mdc-menu-content {
|
||||||
&:not(:empty) {
|
&:not(:empty) {
|
||||||
padding-top: unset;
|
padding-top: unset;
|
||||||
padding-bottom: unset;
|
padding-bottom: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.mat-mdc-menu-item {
|
.mat-mdc-menu-item {
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
.mat-mdc-menu-item {
|
.mat-mdc-menu-item {
|
||||||
width: 12rem;
|
width: 12rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +1,26 @@
|
|||||||
.pi-shell {
|
.pi-shell {
|
||||||
// Common
|
// Common
|
||||||
.mat-mdc-progress-bar {
|
.mat-mdc-progress-bar {
|
||||||
height: 0.1875rem;
|
height: 0.1875rem;
|
||||||
border-radius: 0.0938rem;
|
border-radius: 0.0938rem;
|
||||||
// Type
|
// Type
|
||||||
// Fill
|
// Fill
|
||||||
&.mat-mdc-progress-bar-fill {
|
&.mat-mdc-progress-bar-fill {
|
||||||
&::after {
|
&::after {
|
||||||
background: var(--pi-color-primary);
|
background: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Progress bar in dynamic menu
|
// Progress bar in dynamic menu
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
.mat-mdc-progress-bar {
|
.mat-mdc-progress-bar {
|
||||||
height: 0.375rem;
|
height: 0.375rem;
|
||||||
border-radius: 0.125rem;
|
border-radius: 0.125rem;
|
||||||
}
|
}
|
||||||
.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(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1;
|
||||||
border-top-width: var(--mdc-linear-progress-track-height, .375rem);
|
border-top-width: var(--mdc-linear-progress-track-height, .375rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.pi-shell {
|
.pi-shell {
|
||||||
.mat-mdc-progress-spinner {
|
.mat-mdc-progress-spinner {
|
||||||
--mdc-circular-progress-active-indicator-color: #799ef0;
|
--mdc-circular-progress-active-indicator-color: #799ef0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,239 +1,239 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
& > * {
|
& > * {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--pi-spacing-xxx-small);
|
gap: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
.mat-mdc-radio-button {
|
.mat-mdc-radio-button {
|
||||||
font: {
|
font: {
|
||||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-radio__outer-circle {
|
.mdc-radio__outer-circle {
|
||||||
border-width: 0.0625rem;
|
border-width: 0.0625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-radio-button {
|
.mat-mdc-radio-button {
|
||||||
&.mat-mdc-radio-checked {
|
&.mat-mdc-radio-checked {
|
||||||
.mat-ripple-element {
|
.mat-ripple-element {
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-radio {
|
.mdc-radio {
|
||||||
// Default
|
// Default
|
||||||
.mdc-radio__native-control {
|
.mdc-radio__native-control {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
&:not(:checked) {
|
&:not(:checked) {
|
||||||
& + .mdc-radio__background {
|
& + .mdc-radio__background {
|
||||||
.mdc-radio__outer-circle {
|
.mdc-radio__outer-circle {
|
||||||
border-color: var(--pi-color-grey-100);
|
border-color: var(--pi-color-grey-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:checked {
|
&:checked {
|
||||||
& + .mdc-radio__background {
|
& + .mdc-radio__background {
|
||||||
.mdc-radio__outer-circle,
|
.mdc-radio__outer-circle,
|
||||||
.mdc-radio__inner-circle {
|
.mdc-radio__inner-circle {
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Hover
|
// Hover
|
||||||
&:hover {
|
&:hover {
|
||||||
.mdc-radio__native-control {
|
.mdc-radio__native-control {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
&:checked {
|
&:checked {
|
||||||
& + .mdc-radio__background {
|
& + .mdc-radio__background {
|
||||||
.mdc-radio__outer-circle {
|
.mdc-radio__outer-circle {
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(:checked) {
|
&:not(:checked) {
|
||||||
& + .mdc-radio__background {
|
& + .mdc-radio__background {
|
||||||
.mdc-radio__outer-circle {
|
.mdc-radio__outer-circle {
|
||||||
border-color: var(--pi-color-grey-200);
|
border-color: var(--pi-color-grey-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Not disabled
|
// Not disabled
|
||||||
&:not(:disabled) {
|
&:not(:disabled) {
|
||||||
&:active {
|
&:active {
|
||||||
.mdc-radio__native-control {
|
.mdc-radio__native-control {
|
||||||
&:enabled {
|
&:enabled {
|
||||||
&:checked {
|
&:checked {
|
||||||
& + .mdc-radio__background {
|
& + .mdc-radio__background {
|
||||||
.mdc-radio__outer-circle,
|
.mdc-radio__outer-circle,
|
||||||
.mdc-radio__inner-circle {
|
.mdc-radio__inner-circle {
|
||||||
border-color: var(--pi-color-primary-900);
|
border-color: var(--pi-color-primary-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.mat-accent {
|
&.mat-accent {
|
||||||
--mdc-radio-disabled-selected-icon-color: #3d3d3d;
|
--mdc-radio-disabled-selected-icon-color: #3d3d3d;
|
||||||
--mdc-radio-disabled-unselected-icon-color: #3d3d3d;
|
--mdc-radio-disabled-unselected-icon-color: #3d3d3d;
|
||||||
--mdc-radio-unselected-focus-icon-color: #799ef0;
|
--mdc-radio-unselected-focus-icon-color: #799ef0;
|
||||||
--mdc-radio-unselected-hover-icon-color: #799ef0;
|
--mdc-radio-unselected-hover-icon-color: #799ef0;
|
||||||
--mdc-radio-unselected-icon-color: rgba(196, 213, 255, 0.15);
|
--mdc-radio-unselected-icon-color: rgba(196, 213, 255, 0.15);
|
||||||
--mdc-radio-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15);
|
--mdc-radio-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15);
|
||||||
--mdc-radio-selected-focus-icon-color: #799ef0;
|
--mdc-radio-selected-focus-icon-color: #799ef0;
|
||||||
--mdc-radio-selected-hover-icon-color: #799ef0;
|
--mdc-radio-selected-hover-icon-color: #799ef0;
|
||||||
--mdc-radio-selected-icon-color: #799ef0;
|
--mdc-radio-selected-icon-color: #799ef0;
|
||||||
--mdc-radio-selected-pressed-icon-color: #799ef0;
|
--mdc-radio-selected-pressed-icon-color: #799ef0;
|
||||||
--mat-mdc-radio-ripple-color: #3d3d3d;
|
--mat-mdc-radio-ripple-color: #3d3d3d;
|
||||||
--mat-mdc-radio-checked-ripple-color: #799ef0;
|
--mat-mdc-radio-checked-ripple-color: #799ef0;
|
||||||
}
|
}
|
||||||
&.mat-mdc-accent {
|
&.mat-mdc-accent {
|
||||||
&.mat-mdc-radio-checked {
|
&.mat-mdc-radio-checked {
|
||||||
.mdc-radio__outer-circle {
|
.mdc-radio__outer-circle {
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.mat-mdc-radio-checked {
|
&.mat-mdc-radio-checked {
|
||||||
.mdc-form-field {
|
.mdc-form-field {
|
||||||
font: {
|
font: {
|
||||||
weight: 700;
|
weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper__form {
|
.pi-wrapper__form {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
.mat-mdc-radio-button {
|
.mat-mdc-radio-button {
|
||||||
label {
|
label {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mat Radio Group in Flex Direction Column Wrapper
|
// Mat Radio Group in Flex Direction Column Wrapper
|
||||||
.pi-wrapper__flex-direction--column {
|
.pi-wrapper__flex-direction--column {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper__grid--two {
|
.pi-wrapper__grid--two {
|
||||||
.mat-mdc-radio-label {
|
.mat-mdc-radio-label {
|
||||||
min-width: 9rem;
|
min-width: 9rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-radio-label-content {
|
.mat-mdc-radio-label-content {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--pi-spacing-small);
|
gap: var(--pi-spacing-small);
|
||||||
& > * {
|
& > * {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper__form {
|
.pi-wrapper__form {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
margin: var(--pi-spacing-xx-large) auto;
|
margin: var(--pi-spacing-xx-large) auto;
|
||||||
gap: var(--pi-spacing-xx-large);
|
gap: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
[class*='pi-panel__width--'] {
|
[class*='pi-panel__width--'] {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
&.pi-wrapper__grid--two {
|
&.pi-wrapper__grid--two {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
grid-gap: var(--pi-spacing-x-large);
|
grid-gap: var(--pi-spacing-x-large);
|
||||||
|
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
&:not(.mat-mdc-radio-label) {
|
&:not(.mat-mdc-radio-label) {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: var(--pi-spacing-xxx-small);
|
margin-top: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet L & Desktop S & M
|
// Tablet L & Desktop S & M
|
||||||
@media screen and (min-width: 62rem) and (max-width: 120rem) {
|
@media screen and (min-width: 62rem) and (max-width: 120rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
gap: var(--pi-spacing-large);
|
gap: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
// Common
|
// Common
|
||||||
// Desktop S
|
// Desktop S
|
||||||
@media screen and (max-width: 90rem) {
|
@media screen and (max-width: 90rem) {
|
||||||
}
|
}
|
||||||
// Desktop M
|
// Desktop M
|
||||||
@media screen and (min-width: 90rem) and (max-width: 120rem) {
|
@media screen and (min-width: 90rem) and (max-width: 120rem) {
|
||||||
}
|
}
|
||||||
// Desktop L
|
// Desktop L
|
||||||
@media screen and (min-width: 120rem) {
|
@media screen and (min-width: 120rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,149 +1,149 @@
|
|||||||
@mixin sliderChevron($bottom: 1.975rem) {
|
@mixin sliderChevron($bottom: 1.975rem) {
|
||||||
.pi-slider {
|
.pi-slider {
|
||||||
// Flex direction
|
// Flex direction
|
||||||
&.pi-slider__flex-direction--column-reverse {
|
&.pi-slider__flex-direction--column-reverse {
|
||||||
.mdc-slider {
|
.mdc-slider {
|
||||||
.mdc-slider__value-indicator-container {
|
.mdc-slider__value-indicator-container {
|
||||||
bottom: -1.875rem;
|
bottom: -1.875rem;
|
||||||
.mdc-slider__value-indicator {
|
.mdc-slider__value-indicator {
|
||||||
&::before {
|
&::before {
|
||||||
bottom: $bottom;
|
bottom: $bottom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-slider {
|
.pi-slider {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: -webkit-fill-availabe;
|
width: -webkit-fill-availabe;
|
||||||
|
|
||||||
.mdc-slider__thumb {
|
.mdc-slider__thumb {
|
||||||
.mdc-slider__value-indicator-container {
|
.mdc-slider__value-indicator-container {
|
||||||
border-radius: 50% 50% 0;
|
border-radius: 50% 50% 0;
|
||||||
.mdc-slider__value-indicator {
|
.mdc-slider__value-indicator {
|
||||||
border-radius: var(--pi-border-radius-small);
|
border-radius: var(--pi-border-radius-small);
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
&::before {
|
&::before {
|
||||||
border-top-color: var(--pi-color-primary);
|
border-top-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
.mdc-slider__value-indicator-text {
|
.mdc-slider__value-indicator-text {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Type
|
// Type
|
||||||
// Default
|
// Default
|
||||||
&:not(.pi-slider__range) {
|
&:not(.pi-slider__range) {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
margin-left: var(--pi-spacing-medium);
|
margin-left: var(--pi-spacing-medium);
|
||||||
margin-right: var(--pi-spacing-medium);
|
margin-right: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Range
|
// Range
|
||||||
&.pi-slider__range {
|
&.pi-slider__range {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
margin-left: var(--pi-spacing-xx-large);
|
margin-left: var(--pi-spacing-xx-large);
|
||||||
margin-right: var(--pi-spacing-xx-large);
|
margin-right: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Flex direction
|
// Flex direction
|
||||||
&.pi-slider__flex-direction--column-reverse {
|
&.pi-slider__flex-direction--column-reverse {
|
||||||
.mdc-slider {
|
.mdc-slider {
|
||||||
.mdc-slider__value-indicator-container {
|
.mdc-slider__value-indicator-container {
|
||||||
.mdc-slider__value-indicator {
|
.mdc-slider__value-indicator {
|
||||||
&::before {
|
&::before {
|
||||||
border-top: unset;
|
border-top: unset;
|
||||||
border-bottom: 0.375rem solid var(--pi-color-primary);
|
border-bottom: 0.375rem solid var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Disabled
|
// Disabled
|
||||||
&.is-disabled {
|
&.is-disabled {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
&.mdc-slider--disabled {
|
&.mdc-slider--disabled {
|
||||||
.mdc-slider__track--active_fill {
|
.mdc-slider__track--active_fill {
|
||||||
border-color: var(--pi-color-primary-200);
|
border-color: var(--pi-color-primary-200);
|
||||||
}
|
}
|
||||||
.mdc-slider__thumb-knob {
|
.mdc-slider__thumb-knob {
|
||||||
background-color: var(--pi-color-primary-200);
|
background-color: var(--pi-color-primary-200);
|
||||||
border-color: var(--pi-color-primary-200);
|
border-color: var(--pi-color-primary-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-slider__input {
|
.mdc-slider__input {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-slider {
|
.mdc-slider {
|
||||||
.mdc-slider__value-indicator-container {
|
.mdc-slider__value-indicator-container {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-card {
|
.pi-card {
|
||||||
.pi-slider {
|
.pi-slider {
|
||||||
// Range
|
// Range
|
||||||
&.pi-slider__range {
|
&.pi-slider__range {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Slider in dynamic menu
|
// Slider in dynamic menu
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
.pi-slider {
|
.pi-slider {
|
||||||
.mat-mdc-slider {
|
.mat-mdc-slider {
|
||||||
margin-top: var(--pi-spacing-xx-large);
|
margin-top: var(--pi-spacing-xx-large);
|
||||||
margin-left: var(--pi-spacing-x-large);
|
margin-left: var(--pi-spacing-x-large);
|
||||||
margin-right: var(--pi-spacing-xx-large);
|
margin-right: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include sliderChevron;
|
@include sliderChevron;
|
||||||
.pi-slider {
|
.pi-slider {
|
||||||
// Default
|
// Default
|
||||||
&: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(--pi-spacing-xx-large) -
|
||||||
var(--pi-spacing-xx-large)
|
var(--pi-spacing-xx-large)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
&.is-stroked {
|
&.is-stroked {
|
||||||
.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(--pi-spacing-xx-large) -
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) -
|
var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) -
|
||||||
var(--pi-spacing-medium)
|
var(--pi-spacing-medium)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,101 +1,101 @@
|
|||||||
@mixin snackbarWidth($width: 80vw) {
|
@mixin snackbarWidth($width: 80vw) {
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.mat-mdc-snack-bar-container {
|
.mat-mdc-snack-bar-container {
|
||||||
&.pi-snackbar {
|
&.pi-snackbar {
|
||||||
width: $width;
|
width: $width;
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
.pi-snackbar {
|
.pi-snackbar {
|
||||||
width: $width;
|
width: $width;
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.mat-mdc-snack-bar-container {
|
.mat-mdc-snack-bar-container {
|
||||||
background: unset;
|
background: unset;
|
||||||
margin: var(--pi-spacing-x-large);
|
margin: var(--pi-spacing-x-large);
|
||||||
&.pi-snackbar {
|
&.pi-snackbar {
|
||||||
padding: var(--pi-spacing-large) var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-large) var(--pi-spacing-x-large);
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
&.pi-snackbar__info {
|
&.pi-snackbar__info {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
background-color: var(--pi-color-primary-25);
|
background-color: var(--pi-color-primary-25);
|
||||||
border-color: var(--pi-color-primary-50);
|
border-color: var(--pi-color-primary-50);
|
||||||
}
|
}
|
||||||
&.pi-snackbar__error {
|
&.pi-snackbar__error {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
background-color: var(--pi-color-warn-25);
|
background-color: var(--pi-color-warn-25);
|
||||||
border-color: var(--pi-color-warn-50);
|
border-color: var(--pi-color-warn-50);
|
||||||
}
|
}
|
||||||
&.pi-snackbar__success {
|
&.pi-snackbar__success {
|
||||||
color: var(--pi-color-success);
|
color: var(--pi-color-success);
|
||||||
background-color: var(--pi-color-success-25);
|
background-color: var(--pi-color-success-25);
|
||||||
border-color: var(--pi-color-success-50);
|
border-color: var(--pi-color-success-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mdc-snackbar__surface {
|
.mdc-snackbar__surface {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
}
|
}
|
||||||
.mdc-snackbar__label {
|
.mdc-snackbar__label {
|
||||||
padding-left: unset;
|
padding-left: unset;
|
||||||
padding-right: unset;
|
padding-right: unset;
|
||||||
padding-top: unset;
|
padding-top: unset;
|
||||||
padding-bottom: unset;
|
padding-bottom: unset;
|
||||||
span {
|
span {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 130%;
|
line-height: 130%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
.pi-snackbar {
|
.pi-snackbar {
|
||||||
padding: var(--pi-spacing-medium) var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-medium) var(--pi-spacing-x-large);
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mobile
|
// Mobile
|
||||||
@media screen and (max-width: 40rem) {
|
@media screen and (max-width: 40rem) {
|
||||||
@include snackbarWidth;
|
@include snackbarWidth;
|
||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.mat-mdc-snack-bar-handset {
|
.mat-mdc-snack-bar-handset {
|
||||||
.mat-mdc-snack-bar-container {
|
.mat-mdc-snack-bar-container {
|
||||||
&.pi-snackbar {
|
&.pi-snackbar {
|
||||||
margin: var(--pi-spacing-x-small) auto;
|
margin: var(--pi-spacing-x-small) auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
||||||
@include snackbarWidth(66.66vw);
|
@include snackbarWidth(66.66vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
// Desktop S
|
// Desktop S
|
||||||
@media screen and (min-width: 77.5rem) and (max-width: 90rem) {
|
@media screen and (min-width: 77.5rem) and (max-width: 90rem) {
|
||||||
@include snackbarWidth(33.33vw);
|
@include snackbarWidth(33.33vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop M
|
// Desktop M
|
||||||
@media screen and (min-width: 90rem) and (max-width: 120rem) {
|
@media screen and (min-width: 90rem) and (max-width: 120rem) {
|
||||||
@include snackbarWidth(33.33vw);
|
@include snackbarWidth(33.33vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop L
|
// Desktop L
|
||||||
@media screen and (min-width: 120rem) {
|
@media screen and (min-width: 120rem) {
|
||||||
@include snackbarWidth(25vw);
|
@include snackbarWidth(25vw);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,81 +1,81 @@
|
|||||||
.cdk-overlay-container {
|
.cdk-overlay-container {
|
||||||
.mat-mdc-tooltip {
|
.mat-mdc-tooltip {
|
||||||
margin: var(--pi-spacing-xxx-small);
|
margin: var(--pi-spacing-xxx-small);
|
||||||
padding: var(--pi-spacing-xx-small) var(--pi-spacing-small);
|
padding: var(--pi-spacing-xx-small) var(--pi-spacing-small);
|
||||||
box-shadow: var(--pi-box-shadow-panel-double);
|
box-shadow: var(--pi-box-shadow-panel-double);
|
||||||
border-radius: var(--pi-border-radius-medium);
|
border-radius: var(--pi-border-radius-medium);
|
||||||
.mdc-tooltip__surface {
|
.mdc-tooltip__surface {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-tooltip {
|
.pi-tooltip {
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(50% - 0.5625rem);
|
left: calc(50% - 0.5625rem);
|
||||||
top: -0.5rem;
|
top: -0.5rem;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-left: 0.5625rem solid transparent;
|
border-left: 0.5625rem solid transparent;
|
||||||
border-right: 0.5625rem solid transparent;
|
border-right: 0.5625rem solid transparent;
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
font: {
|
font: {
|
||||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
weight: 300;
|
weight: 300;
|
||||||
}
|
}
|
||||||
// Color
|
// Color
|
||||||
&.pi-tooltip__white {
|
&.pi-tooltip__white {
|
||||||
background-color: var(--pi-color-background-400);
|
background-color: var(--pi-color-background-400);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-top: 0.5rem solid var(--pi-color-background-400);
|
border-top: 0.5rem solid var(--pi-color-background-400);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-tooltip__surface {
|
.mdc-tooltip__surface {
|
||||||
color: var(--pi-color-highlighted);
|
color: var(--pi-color-highlighted);
|
||||||
background-color: var(--pi-color-background-400);
|
background-color: var(--pi-color-background-400);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-tooltip__grey {
|
&.pi-tooltip__grey {
|
||||||
background-color: var(--pi-color-grey-200);
|
background-color: var(--pi-color-grey-200);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-top: 0.5rem solid var(--pi-color-grey-200);
|
border-top: 0.5rem solid var(--pi-color-grey-200);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-tooltip__surface {
|
.mdc-tooltip__surface {
|
||||||
color: var(--pi-color-background-400);
|
color: var(--pi-color-background-400);
|
||||||
background-color: var(--pi-color-grey-200);
|
background-color: var(--pi-color-grey-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-tooltip__dark {
|
&.pi-tooltip__dark {
|
||||||
background-color: var(--pi-color-grey);
|
background-color: var(--pi-color-grey);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-top: 0.5rem solid var(--pi-color-grey);
|
border-top: 0.5rem solid var(--pi-color-grey);
|
||||||
}
|
}
|
||||||
.mdc-tooltip__surface {
|
.mdc-tooltip__surface {
|
||||||
color: var(--pi-color-background-400);
|
color: var(--pi-color-background-400);
|
||||||
background-color: var(--pi-color-grey);
|
background-color: var(--pi-color-grey);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Type
|
// Type
|
||||||
&.pi-tooltip__type--error {
|
&.pi-tooltip__type--error {
|
||||||
background-color: var(--pi-color-background-400);
|
background-color: var(--pi-color-background-400);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-top: 0.5rem solid var(--pi-color-background-400);
|
border-top: 0.5rem solid var(--pi-color-background-400);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-tooltip__surface {
|
.mdc-tooltip__surface {
|
||||||
color: var(--pi-color-warn);
|
color: var(--pi-color-warn);
|
||||||
background-color: var(--pi-color-background-400);
|
background-color: var(--pi-color-background-400);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,56 +1,56 @@
|
|||||||
.pi-shell__deale-saas,
|
.pi-shell__deale-saas,
|
||||||
.pi-shell__deale-website {
|
.pi-shell__deale-website {
|
||||||
.ngx-slider {
|
.ngx-slider {
|
||||||
& > .ngx-slider-pointer {
|
& > .ngx-slider-pointer {
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
width: 13px;
|
width: 13px;
|
||||||
height: 13px;
|
height: 13px;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .ngx-slider-span {
|
& > .ngx-slider-span {
|
||||||
& > .ngx-slider-selection {
|
& > .ngx-slider-selection {
|
||||||
background: var(--pi-color-primary);
|
background: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
&.ngx-slider-bubble {
|
&.ngx-slider-bubble {
|
||||||
&.ngx-slider-model-high,
|
&.ngx-slider-model-high,
|
||||||
&.ngx-slider-model-value {
|
&.ngx-slider-model-value {
|
||||||
background: var(--pi-color-primary);
|
background: var(--pi-color-primary);
|
||||||
border-radius: var(--pi-border-radius-x-small);
|
border-radius: var(--pi-border-radius-x-small);
|
||||||
padding: var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small);
|
padding: var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small);
|
||||||
bottom: 14px;
|
bottom: 14px;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
& > .ngx-slider-span {
|
& > .ngx-slider-span {
|
||||||
& > .ngx-slider-selection {
|
& > .ngx-slider-selection {
|
||||||
background: #d8e0f3;
|
background: #d8e0f3;
|
||||||
}
|
}
|
||||||
&.ngx-slider-pointer {
|
&.ngx-slider-pointer {
|
||||||
background: #d8e0f3;
|
background: #d8e0f3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.animate {
|
&.animate {
|
||||||
.ngx-slider-bubble {
|
.ngx-slider-bubble {
|
||||||
&.ngx-slider-limit {
|
&.ngx-slider-limit {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .ngx-slider.animate .ngx-slider-bubble.ngx-slider-limit {
|
// .ngx-slider.animate .ngx-slider-bubble.ngx-slider-limit {
|
||||||
// display: none;
|
// display: none;
|
||||||
// }
|
// }
|
||||||
.ngx-slider .ngx-slider-selection {
|
.ngx-slider .ngx-slider-selection {
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
30
libs/ui/src/lib/styles/common/vendors/index.scss
vendored
30
libs/ui/src/lib/styles/common/vendors/index.scss
vendored
@@ -1,15 +1,15 @@
|
|||||||
@forward 'ch2-button';
|
@forward 'ch2-button';
|
||||||
@forward 'mat-checkbox';
|
@forward 'mat-checkbox';
|
||||||
@forward 'mat-chip';
|
@forward 'mat-chip';
|
||||||
@forward 'mat-dialog';
|
@forward 'mat-dialog';
|
||||||
@forward 'mat-expansion-panel';
|
@forward 'mat-expansion-panel';
|
||||||
@forward 'mat-form-field';
|
@forward 'mat-form-field';
|
||||||
@forward 'mat-menu';
|
@forward 'mat-menu';
|
||||||
@forward 'mat-progress-bar';
|
@forward 'mat-progress-bar';
|
||||||
@forward 'mat-progress-spinner';
|
@forward 'mat-progress-spinner';
|
||||||
@forward 'mat-radio-button';
|
@forward 'mat-radio-button';
|
||||||
@forward 'mat-slider';
|
@forward 'mat-slider';
|
||||||
@forward 'mat-snackbar';
|
@forward 'mat-snackbar';
|
||||||
@forward 'mat-tooltip';
|
@forward 'mat-tooltip';
|
||||||
@forward 'ngx-slider';
|
@forward 'ngx-slider';
|
||||||
@forward 'typeform';
|
@forward 'typeform';
|
||||||
|
|||||||
@@ -1,396 +1,396 @@
|
|||||||
@mixin fixedActionWrapperMain(
|
@mixin fixedActionWrapperMain(
|
||||||
$left: var(--pi-spacing-medium),
|
$left: 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))
|
||||||
) {
|
) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__action {
|
&.pi-wrapper__action {
|
||||||
&.pi-wrapper__action--position-fixed {
|
&.pi-wrapper__action--position-fixed {
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
left: $left;
|
left: $left;
|
||||||
width: $width;
|
width: $width;
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
& > button {
|
& > button {
|
||||||
&:not(.pi-button__appearance--ghost) {
|
&:not(.pi-button__appearance--ghost) {
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin fixedMobileActionWrapperHorizontalBehavior($side-spacing: medium) {
|
@mixin fixedMobileActionWrapperHorizontalBehavior($side-spacing: medium) {
|
||||||
.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 {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__action {
|
&.pi-wrapper__action {
|
||||||
&.pi-wrapper__action--position-fixed {
|
&.pi-wrapper__action--position-fixed {
|
||||||
position: $position;
|
position: $position;
|
||||||
bottom: $bottom;
|
bottom: $bottom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin fixedActionWrapperFullscreen(
|
@mixin fixedActionWrapperFullscreen(
|
||||||
$bottom: env(safe-area-inset-bottom),
|
$bottom: env(safe-area-inset-bottom),
|
||||||
$padding: var(--pi-spacing-x-large)
|
$padding: var(--pi-spacing-x-large)
|
||||||
) {
|
) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&:not(.pi-layout__main) {
|
&:not(.pi-layout__main) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__action {
|
&.pi-wrapper__action {
|
||||||
&.pi-wrapper__action--position-fixed {
|
&.pi-wrapper__action--position-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: $bottom;
|
bottom: $bottom;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: $padding;
|
padding: $padding;
|
||||||
background-color: rgba($color: white, $alpha: 0.96);
|
background-color: rgba($color: white, $alpha: 0.96);
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Action wrapper in dealbox
|
// Action wrapper in dealbox
|
||||||
.pi-layout__06-edge-to-edge {
|
.pi-layout__06-edge-to-edge {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__action {
|
&.pi-wrapper__action {
|
||||||
&.pi-wrapper__action--position-fixed {
|
&.pi-wrapper__action--position-fixed {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Action Wrapper
|
// Action Wrapper
|
||||||
&.pi-wrapper__action {
|
&.pi-wrapper__action {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__justify--center {
|
&.pi-wrapper__justify--center {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include fixedMobileActionWrapperHorizontalBehavior;
|
@include fixedMobileActionWrapperHorizontalBehavior;
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
@include fixedActionWrapperFullscreen;
|
@include fixedActionWrapperFullscreen;
|
||||||
// Small Device
|
// Small Device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
// Navbar layouts
|
// Navbar layouts
|
||||||
&.pi-layout__02-full-width,
|
&.pi-layout__02-full-width,
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
// Action wrapper // Only fixed in small devices
|
// Action wrapper // Only fixed in small devices
|
||||||
.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-height-footer) +
|
||||||
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
|
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Fixed Action Wrapper Main Bottom
|
// Fixed Action Wrapper Main Bottom
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
& > div {
|
& > div {
|
||||||
// Has Not Sticky Note
|
// Has Not Sticky Note
|
||||||
&:not(.has-bottom-sticky-note) {
|
&:not(.has-bottom-sticky-note) {
|
||||||
@include fixedActionWrapperMainBottom;
|
@include fixedActionWrapperMainBottom;
|
||||||
}
|
}
|
||||||
// Sticky Note
|
// Sticky Note
|
||||||
&.has-bottom-sticky-note {
|
&.has-bottom-sticky-note {
|
||||||
@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)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.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__icon):not(
|
||||||
.pi-button__x-small
|
.pi-button__x-small
|
||||||
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not(
|
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not(
|
||||||
.pi-button__xx-small
|
.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__icon--single):not(
|
||||||
.pi-button__xx-small
|
.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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Fixed mobile
|
// Fixed mobile
|
||||||
&.pi-wrapper__action--position-fixed-mobile {
|
&.pi-wrapper__action--position-fixed-mobile {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
button {
|
button {
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Full screen layouts
|
// Full screen layouts
|
||||||
&:not(.pi-layout__07-list):not(.pi-layout__02-full-width) {
|
&:not(.pi-layout__07-list):not(.pi-layout__02-full-width) {
|
||||||
// Action wrapper
|
// Action wrapper
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
// 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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Navbar layouts
|
// Navbar layouts
|
||||||
&.pi-layout__02-full-width,
|
&.pi-layout__02-full-width,
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
// Action wrapper
|
// Action wrapper
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
// 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)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include fixedMobileActionWrapperHorizontalBehavior(x-large);
|
@include fixedMobileActionWrapperHorizontalBehavior(x-large);
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
var(--pi-spacing-x-large),
|
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))
|
||||||
);
|
);
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
&.pi-wrapper__action--position-fixed-mobile {
|
&.pi-wrapper__action--position-fixed-mobile {
|
||||||
left: var(--pi-spacing-x-large);
|
left: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.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(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
|
var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
// Fixed Action Wrapper Main Bottom
|
// Fixed Action Wrapper Main Bottom
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
& > 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 {
|
||||||
@include fixedActionWrapperMainBottom(unset, unset);
|
@include fixedActionWrapperMainBottom(unset, unset);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
// Navbar collapsed
|
// Navbar collapsed
|
||||||
.navbar-is-collapsed {
|
.navbar-is-collapsed {
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
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-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 {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
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-x-large)
|
||||||
),
|
),
|
||||||
calc(
|
calc(
|
||||||
90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
|
90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-xxx-small)
|
var(--pi-spacing-xxx-small)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Navbar expanded
|
// Navbar expanded
|
||||||
.navbar-is-expanded {
|
.navbar-is-expanded {
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
calc(
|
calc(
|
||||||
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
|
||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
calc(
|
calc(
|
||||||
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(
|
calc(
|
||||||
90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
|
90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem
|
var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include fixedActionWrapperFullscreen(0, var(--pi-spacing-xx-large));
|
@include fixedActionWrapperFullscreen(0, var(--pi-spacing-xx-large));
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-desktop__medium {
|
&.is-desktop__medium {
|
||||||
// Navbar collapsed
|
// Navbar collapsed
|
||||||
.navbar-is-collapsed {
|
.navbar-is-collapsed {
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
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-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
|
||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
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-x-large)
|
||||||
),
|
),
|
||||||
var(--pi-width-container)
|
var(--pi-width-container)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Navbar expanded
|
// Navbar expanded
|
||||||
.navbar-is-expanded {
|
.navbar-is-expanded {
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
calc(
|
calc(
|
||||||
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
|
||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
calc(
|
calc(
|
||||||
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)
|
||||||
),
|
),
|
||||||
var(--pi-width-container)
|
var(--pi-width-container)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include fixedActionWrapperFullscreen(
|
@include fixedActionWrapperFullscreen(
|
||||||
0,
|
0,
|
||||||
var(--pi-spacing-xx-large) var(--pi-spacing-xxx-large)
|
var(--pi-spacing-xx-large) var(--pi-spacing-xxx-large)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
// Desktop L
|
// Desktop L
|
||||||
@media screen and (max-width: 140rem) {
|
@media screen and (max-width: 140rem) {
|
||||||
// Navbar collapsed
|
// Navbar collapsed
|
||||||
.navbar-is-collapsed {
|
.navbar-is-collapsed {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
calc(var(--pi-width-navbar-collapsed) - 4.65rem),
|
calc(var(--pi-width-navbar-collapsed) - 4.65rem),
|
||||||
var(--pi-width-container-l)
|
var(--pi-width-container-l)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// Navbar expanded
|
// Navbar expanded
|
||||||
.navbar-is-expanded {
|
.navbar-is-expanded {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
calc(var(--pi-width-navbar-expanded) - 12rem),
|
calc(var(--pi-width-navbar-expanded) - 12rem),
|
||||||
var(--pi-width-container-l)
|
var(--pi-width-container-l)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop XL
|
// Desktop XL
|
||||||
@media screen and (min-width: 140rem) {
|
@media screen and (min-width: 140rem) {
|
||||||
// Navbar collapsed
|
// Navbar collapsed
|
||||||
.navbar-is-collapsed {
|
.navbar-is-collapsed {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
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-x-large)
|
||||||
),
|
),
|
||||||
calc(66.66% - var(--pi-width-navbar-collapsed) - 1.6rem)
|
calc(66.66% - var(--pi-width-navbar-collapsed) - 1.6rem)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// Navbar expanded
|
// Navbar expanded
|
||||||
.navbar-is-expanded {
|
.navbar-is-expanded {
|
||||||
@include fixedActionWrapperMain(
|
@include fixedActionWrapperMain(
|
||||||
calc(
|
calc(
|
||||||
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(66.66% - var(--pi-width-navbar-expanded) + 1.2rem)
|
calc(66.66% - var(--pi-width-navbar-expanded) + 1.2rem)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include fixedActionWrapperFullscreen(
|
@include fixedActionWrapperFullscreen(
|
||||||
0,
|
0,
|
||||||
var(--pi-spacing-xx-large) var(--pi-spacing-xxxx-large)
|
var(--pi-spacing-xx-large) var(--pi-spacing-xxxx-large)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,128 +1,128 @@
|
|||||||
@mixin formWrapperSpacings($spacing: large) {
|
@mixin formWrapperSpacings($spacing: large) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__form {
|
&.pi-wrapper__form {
|
||||||
// Vertically behavior
|
// Vertically behavior
|
||||||
& > form {
|
& > form {
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
&:not(.pi-text-viewer-link) {
|
&:not(.pi-text-viewer-link) {
|
||||||
margin-top: var(--pi-spacing-#{$spacing});
|
margin-top: var(--pi-spacing-#{$spacing});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__form {
|
&.pi-wrapper__form {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: var(--pi-spacing-xxxx-small);
|
margin-top: var(--pi-spacing-xxxx-small);
|
||||||
|
|
||||||
& > form {
|
& > form {
|
||||||
& > .pi-field {
|
& > .pi-field {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
& > fieldset {
|
& > fieldset {
|
||||||
& > div {
|
& > div {
|
||||||
&.pi-wrapper__flex {
|
&.pi-wrapper__flex {
|
||||||
& > .pi-form-field__text {
|
& > .pi-form-field__text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
h4 {
|
h4 {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
margin-bottom: var(--pi-spacing-x-large);
|
margin-bottom: var(--pi-spacing-x-large);
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-small);
|
size: var(--pi-font-size-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-wrapper__grid--two {
|
&.pi-wrapper__grid--two {
|
||||||
& > form {
|
& > form {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: var(--pi-spacing-x-large);
|
grid-gap: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper__grid {
|
.pi-wrapper__grid {
|
||||||
fieldset + fieldset {
|
fieldset + fieldset {
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-list-item + .pi-list-item {
|
.pi-list-item + .pi-list-item {
|
||||||
margin-top: var(--pi-spacing-xxx-small);
|
margin-top: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin fillFormFieldMinWidth($min-width: calc(100vw - 10rem)) {
|
@mixin fillFormFieldMinWidth($min-width: calc(100vw - 10rem)) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__form {
|
&.pi-wrapper__form {
|
||||||
& > form {
|
& > form {
|
||||||
& > .pi-field {
|
& > .pi-field {
|
||||||
.mat-mdc-form-field-flex {
|
.mat-mdc-form-field-flex {
|
||||||
min-width: $min-width;
|
min-width: $min-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include fillFormFieldMinWidth;
|
@include fillFormFieldMinWidth;
|
||||||
@include formWrapperSpacings;
|
@include formWrapperSpacings;
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__form {
|
&.pi-wrapper__form {
|
||||||
// Horizontally behavior
|
// Horizontally behavior
|
||||||
&.pi-wrapper__grid--half {
|
&.pi-wrapper__grid--half {
|
||||||
& > form {
|
& > form {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
grid-template-rows: 1fr 1fr;
|
grid-template-rows: 1fr 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
@include formWrapperSpacings(x-large);
|
@include formWrapperSpacings(x-large);
|
||||||
|
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper_form {
|
&.pi-wrapper_form {
|
||||||
// Horizontally behavior
|
// Horizontally behavior
|
||||||
&.pi-wrapper__grid--half {
|
&.pi-wrapper__grid--half {
|
||||||
& > form {
|
& > form {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
grid-gap: var(--pi-spacing-x-large);
|
grid-gap: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include fillFormFieldMinWidth(calc(100vw - 11rem));
|
@include fillFormFieldMinWidth(calc(100vw - 11rem));
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include fillFormFieldMinWidth(16rem);
|
@include fillFormFieldMinWidth(16rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include fillFormFieldMinWidth(18.5rem);
|
@include fillFormFieldMinWidth(18.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,288 +1,288 @@
|
|||||||
@mixin headerWrapperHeight($height: 2.75rem) {
|
@mixin headerWrapperHeight($height: 2.75rem) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__header {
|
&.pi-wrapper__header {
|
||||||
&:not(.pi-wrapper__full-grid) {
|
&:not(.pi-wrapper__full-grid) {
|
||||||
& > header,
|
& > header,
|
||||||
& > .pi-header-wrapper-content__right {
|
& > .pi-header-wrapper-content__right {
|
||||||
height: $height;
|
height: $height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Header Wrapper
|
// Header Wrapper
|
||||||
&.pi-wrapper__header {
|
&.pi-wrapper__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
& > header {
|
& > header {
|
||||||
& > .pi-text-viewer {
|
& > .pi-text-viewer {
|
||||||
&:nth-of-type(1) {
|
&:nth-of-type(1) {
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
& > * {
|
& > * {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
& > * {
|
& > * {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
transform: translateX(-0.25rem);
|
transform: translateX(-0.25rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > span {
|
& > span {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-medium);
|
size: var(--pi-font-size-medium);
|
||||||
weight: 300;
|
weight: 300;
|
||||||
style: italic;
|
style: italic;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > a {
|
& > a {
|
||||||
color: var(--pi-color-grey);
|
color: var(--pi-color-grey);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: var(--pi-spacing-xx-small);
|
column-gap: var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Justify
|
// Justify
|
||||||
&.pi-wrapper__justify--center {
|
&.pi-wrapper__justify--center {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
// Align items
|
// Align items
|
||||||
// End
|
// End
|
||||||
&.pi-wrapper__align-items--flex-end {
|
&.pi-wrapper__align-items--flex-end {
|
||||||
& > header {
|
& > header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Center
|
// Center
|
||||||
&.pi-wrapper__align-items--center {
|
&.pi-wrapper__align-items--center {
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Flex direction
|
// Flex direction
|
||||||
&.pi-wrapper__flex-direction--column {
|
&.pi-wrapper__flex-direction--column {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--pi-spacing-xxx-small);
|
gap: var(--pi-spacing-xxx-small);
|
||||||
&.pi-header-wrapper-content__left {
|
&.pi-header-wrapper-content__left {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Full grid
|
// Full grid
|
||||||
&.pi-wrapper__full-grid {
|
&.pi-wrapper__full-grid {
|
||||||
& > header {
|
& > header {
|
||||||
margin-top: var(--pi-spacing-x-small);
|
margin-top: var(--pi-spacing-x-small);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-form-field__search,
|
.pi-form-field__search,
|
||||||
.pi-button__toggle {
|
.pi-button__toggle {
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
&.pi-shell__deale-saas {
|
&.pi-shell__deale-saas {
|
||||||
@include headerWrapperHeight;
|
@include headerWrapperHeight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-layout__main {
|
.pi-layout__main {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__header {
|
&.pi-wrapper__header {
|
||||||
// Flex direction
|
// Flex direction
|
||||||
&.pi-wrapper__flex-direction--column {
|
&.pi-wrapper__flex-direction--column {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
&.pi-header-wrapper-content__right {
|
&.pi-header-wrapper-content__right {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
&.pi-header-wrapper-content__center {
|
&.pi-header-wrapper-content__center {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-header-wrapper-content__right {
|
&.pi-header-wrapper-content__right {
|
||||||
& > aside {
|
& > aside {
|
||||||
.pi-form-field__search {
|
.pi-form-field__search {
|
||||||
// Is expanded
|
// Is expanded
|
||||||
&.is-expanded {
|
&.is-expanded {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: var(--pi-spacing-medium);
|
left: var(--pi-spacing-medium);
|
||||||
width: calc(100% - var(--pi-spacing-xx-large));
|
width: calc(100% - var(--pi-spacing-xx-large));
|
||||||
margin-top: -1.5rem;
|
margin-top: -1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-toggle-button {
|
.pi-toggle-button {
|
||||||
span {
|
span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
&.pi-shell__deale-saas {
|
&.pi-shell__deale-saas {
|
||||||
@include headerWrapperHeight(var(--pi-height-layout-header));
|
@include headerWrapperHeight(var(--pi-height-layout-header));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
.pi-layout__main {
|
.pi-layout__main {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__header {
|
&.pi-wrapper__header {
|
||||||
// Flex direction
|
// Flex direction
|
||||||
&.pi-wrapper__flex-direction--column {
|
&.pi-wrapper__flex-direction--column {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
&.pi-header-wrapper-content__center {
|
&.pi-header-wrapper-content__center {
|
||||||
width: 66.66%;
|
width: 66.66%;
|
||||||
}
|
}
|
||||||
&.pi-header-wrapper-content__right {
|
&.pi-header-wrapper-content__right {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
&:not(.pi-header-wrapper-content__center) {
|
&:not(.pi-header-wrapper-content__center) {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
&.pi-shell__deale-saas {
|
&.pi-shell__deale-saas {
|
||||||
@include headerWrapperHeight(var(--pi-height-layout-header));
|
@include headerWrapperHeight(var(--pi-height-layout-header));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__header {
|
&.pi-wrapper__header {
|
||||||
// 1/4 - 3/4
|
// 1/4 - 3/4
|
||||||
&.pi-wrapper__grid--quarter {
|
&.pi-wrapper__grid--quarter {
|
||||||
& > header {
|
& > header {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
.pi-header-wrapper-content__right {
|
.pi-header-wrapper-content__right {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1/3 - 2/3
|
// 1/3 - 2/3
|
||||||
&.pi-wrapper__grid--third {
|
&.pi-wrapper__grid--third {
|
||||||
& > header {
|
& > header {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
.pi-header-wrapper-content__right {
|
.pi-header-wrapper-content__right {
|
||||||
width: 66.66%;
|
width: 66.66%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1/2 - 1/2
|
// 1/2 - 1/2
|
||||||
&.pi-wrapper__grid--half {
|
&.pi-wrapper__grid--half {
|
||||||
& > header {
|
& > header {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
.pi-header-wrapper-content__right {
|
.pi-header-wrapper-content__right {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 2/5 - 3/5
|
// 2/5 - 3/5
|
||||||
&.pi-wrapper__grid--fifth {
|
&.pi-wrapper__grid--fifth {
|
||||||
& > header {
|
& > header {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
.pi-header-wrapper-content__right {
|
.pi-header-wrapper-content__right {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reverse
|
// Reverse
|
||||||
&.pi-wrapper__grid--reverse-quarter {
|
&.pi-wrapper__grid--reverse-quarter {
|
||||||
& > header {
|
& > header {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
.pi-header-wrapper-content__right {
|
.pi-header-wrapper-content__right {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1/3 - 2/3
|
// 1/3 - 2/3
|
||||||
&.pi-wrapper__grid--reverse-third {
|
&.pi-wrapper__grid--reverse-third {
|
||||||
& > header {
|
& > header {
|
||||||
width: 66.66%;
|
width: 66.66%;
|
||||||
}
|
}
|
||||||
.pi-header-wrapper-content__right {
|
.pi-header-wrapper-content__right {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 3/5 - 2/5
|
// 3/5 - 2/5
|
||||||
&.pi-wrapper__grid--reverse-fifth {
|
&.pi-wrapper__grid--reverse-fifth {
|
||||||
& > header {
|
& > header {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
.pi-header-wrapper-content__right {
|
.pi-header-wrapper-content__right {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,154 +1,154 @@
|
|||||||
@mixin listWrapperHeight($device: mobile, $extra-height: 5.2) {
|
@mixin listWrapperHeight($device: mobile, $extra-height: 5.2) {
|
||||||
.pi-layout__07-list {
|
.pi-layout__07-list {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
// Has Scroll
|
// Has Scroll
|
||||||
&.pi-wrapper__list--has-scroll {
|
&.pi-wrapper__list--has-scroll {
|
||||||
& > 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin listWrapperWidth($width: calc(100% - var(--pi-spacing-xxx-small))) {
|
@mixin listWrapperWidth($width: calc(100% - var(--pi-spacing-xxx-small))) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// List Wrapper
|
// List Wrapper
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
& > section {
|
& > section {
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin listWrapperNoResultsTemplate($min-height, $padding) {
|
@mixin listWrapperNoResultsTemplate($min-height, $padding) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// List Wrapper
|
// List Wrapper
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
& > section {
|
& > section {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__flex-direction--column {
|
&.pi-wrapper__flex-direction--column {
|
||||||
&.pi-wrapper__justify--center {
|
&.pi-wrapper__justify--center {
|
||||||
min-height: $min-height;
|
min-height: $min-height;
|
||||||
padding-top: $padding;
|
padding-top: $padding;
|
||||||
padding-bottom: $padding;
|
padding-bottom: $padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Common
|
// Common
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// List Wrapper
|
// List Wrapper
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
header {
|
header {
|
||||||
&.pi-wrapper__justify--space-between {
|
&.pi-wrapper__justify--space-between {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Has Scroll
|
// Has Scroll
|
||||||
&.pi-wrapper__list--has-scroll {
|
&.pi-wrapper__list--has-scroll {
|
||||||
& > section {
|
& > section {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
.pi-data-grid__mode--grid {
|
.pi-data-grid__mode--grid {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mode Grid
|
// Mode Grid
|
||||||
.is-mode-grid {
|
.is-mode-grid {
|
||||||
@include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large));
|
@include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large));
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
& > section {
|
& > section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--pi-spacing-xxx-small);
|
gap: var(--pi-spacing-xxx-small);
|
||||||
.pi-data-grid__mode--grid {
|
.pi-data-grid__mode--grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
padding-bottom: var(--pi-spacing-medium);
|
padding-bottom: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-mode-list {
|
.is-mode-list {
|
||||||
@include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large));
|
@include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large));
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include listWrapperHeight;
|
@include listWrapperHeight;
|
||||||
@include listWrapperWidth;
|
@include listWrapperWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include listWrapperHeight(tablet, 5.7);
|
@include listWrapperHeight(tablet, 5.7);
|
||||||
@include listWrapperWidth;
|
@include listWrapperWidth;
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include listWrapperHeight(tablet, 3);
|
@include listWrapperHeight(tablet, 3);
|
||||||
@include listWrapperWidth(100%);
|
@include listWrapperWidth(100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
// Mode List
|
// Mode List
|
||||||
|
|
||||||
.is-mode-list {
|
.is-mode-list {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
box-shadow: var(--pi-box-shadow-panel);
|
box-shadow: var(--pi-box-shadow-panel);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include listWrapperWidth(100%);
|
@include listWrapperWidth(100%);
|
||||||
.pi-layout__07-list {
|
.pi-layout__07-list {
|
||||||
@include listWrapperHeight(desktop, 7.8);
|
@include listWrapperHeight(desktop, 7.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,164 +1,164 @@
|
|||||||
@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
|
||||||
&:not(.is-fullscreen) {
|
&:not(.is-fullscreen) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
// Main layouts
|
// Main layouts
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
// Center
|
// Center
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__main {
|
&.pi-wrapper__main {
|
||||||
// Center
|
// Center
|
||||||
&.is-centered {
|
&.is-centered {
|
||||||
height: $height;
|
height: $height;
|
||||||
& > section {
|
& > section {
|
||||||
height: $height;
|
height: $height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Is fullscreen
|
// Is fullscreen
|
||||||
&.is-fullscreen {
|
&.is-fullscreen {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__main {
|
&.pi-wrapper__main {
|
||||||
// Center
|
// Center
|
||||||
&.is-centered {
|
&.is-centered {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
& > section {
|
& > section {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__main {
|
&.pi-wrapper__main {
|
||||||
// Main wrapper
|
// Main wrapper
|
||||||
& > section {
|
& > section {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
// Flex direction
|
// Flex direction
|
||||||
&.pi-wrapper__flex-direction--column {
|
&.pi-wrapper__flex-direction--column {
|
||||||
& > section {
|
& > section {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Justify content
|
// Justify content
|
||||||
&.pi-wrapper__justify--center {
|
&.pi-wrapper__justify--center {
|
||||||
& > section {
|
& > section {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Align items
|
// Align items
|
||||||
// Center
|
// Center
|
||||||
&.pi-wrapper__align-items--center {
|
&.pi-wrapper__align-items--center {
|
||||||
& > section {
|
& > section {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Flex end
|
// Flex end
|
||||||
&.pi-wrapper__align-items--flex-end {
|
&.pi-wrapper__align-items--flex-end {
|
||||||
& > section {
|
& > section {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Gap
|
// Gap
|
||||||
// 0.75rem - 12px
|
// 0.75rem - 12px
|
||||||
&.pi-wrapper__gap--s {
|
&.pi-wrapper__gap--s {
|
||||||
& > section {
|
& > section {
|
||||||
gap: var(--pi-spacing-small);
|
gap: var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1rem - 16px
|
// 1rem - 16px
|
||||||
&.pi-wrapper__gap--m {
|
&.pi-wrapper__gap--m {
|
||||||
& > section {
|
& > section {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1.25rem - 20px
|
// 1.25rem - 20px
|
||||||
&.pi-wrapper__gap--l {
|
&.pi-wrapper__gap--l {
|
||||||
& > section {
|
& > section {
|
||||||
gap: var(--pi-spacing-large);
|
gap: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1.5rem - 24px
|
// 1.5rem - 24px
|
||||||
&.pi-wrapper__gap--xl {
|
&.pi-wrapper__gap--xl {
|
||||||
& > section {
|
& > section {
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 2rem - 32px
|
// 2rem - 32px
|
||||||
&.pi-wrapper__gap--xxl {
|
&.pi-wrapper__gap--xxl {
|
||||||
& > section {
|
& > section {
|
||||||
gap: var(--pi-spacing-xx-large);
|
gap: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 2.5rem - 40px
|
// 2.5rem - 40px
|
||||||
&.pi-wrapper__gap--xxxl {
|
&.pi-wrapper__gap--xxxl {
|
||||||
gap: var(--pi-spacing-xxx-large);
|
gap: var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
display: block;
|
display: block;
|
||||||
& > * + * {
|
& > * + * {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
&.is-sticky {
|
&.is-sticky {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
padding-top: var(--pi-spacing-small);
|
padding-top: var(--pi-spacing-small);
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__main {
|
&.pi-wrapper__main {
|
||||||
& > section {
|
& > section {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
@include mainWrapperCentered;
|
@include mainWrapperCentered;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet L & Desktop
|
// Tablet L & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
@include mainWrapperCentered(calc(100% - var(--pi-height-header)));
|
@include mainWrapperCentered(calc(100% - var(--pi-height-header)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,297 +1,297 @@
|
|||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Align items
|
// Align items
|
||||||
&.pi-wrapper__align-items--center {
|
&.pi-wrapper__align-items--center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__align-items--flex-end {
|
&.pi-wrapper__align-items--flex-end {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__align-items--stretch {
|
&.pi-wrapper__align-items--stretch {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
// Flex direction
|
// Flex direction
|
||||||
&.pi-wrapper__flex-direction--column {
|
&.pi-wrapper__flex-direction--column {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__flex-direction--column-reverse {
|
&.pi-wrapper__flex-direction--column-reverse {
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__flex-direction--row-reverse {
|
&.pi-wrapper__flex-direction--row-reverse {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__full-width-auto {
|
&.pi-wrapper__full-width-auto {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__fit-content {
|
&.pi-wrapper__fit-content {
|
||||||
max-width: fit-content;
|
max-width: fit-content;
|
||||||
}
|
}
|
||||||
// Justify
|
// Justify
|
||||||
&.pi-wrapper__justify--center {
|
&.pi-wrapper__justify--center {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__justify--flex-end {
|
&.pi-wrapper__justify--flex-end {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__justify--space-between {
|
&.pi-wrapper__justify--space-between {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
&.pi-wrapper__justify--space-evenly {
|
&.pi-wrapper__justify--space-evenly {
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
}
|
}
|
||||||
// Gap
|
// Gap
|
||||||
&.pi-wrapper__gap--xxxs {
|
&.pi-wrapper__gap--xxxs {
|
||||||
gap: var(--pi-spacing-xxx-small);
|
gap: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
// 0.5rem - 8px
|
// 0.5rem - 8px
|
||||||
&.pi-wrapper__gap--xxs {
|
&.pi-wrapper__gap--xxs {
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
// 0.625rem - 10px
|
// 0.625rem - 10px
|
||||||
&.pi-wrapper__gap--xs {
|
&.pi-wrapper__gap--xs {
|
||||||
gap: var(--pi-spacing-x-small);
|
gap: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
// 0.75rem - 12px
|
// 0.75rem - 12px
|
||||||
&.pi-wrapper__gap--s {
|
&.pi-wrapper__gap--s {
|
||||||
gap: var(--pi-spacing-small);
|
gap: var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
// 1rem - 16px
|
// 1rem - 16px
|
||||||
&.pi-wrapper__gap--m {
|
&.pi-wrapper__gap--m {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
// 1.25rem - 20px
|
// 1.25rem - 20px
|
||||||
&.pi-wrapper__gap--l {
|
&.pi-wrapper__gap--l {
|
||||||
gap: var(--pi-spacing-large);
|
gap: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
// 1.5rem - 24px
|
// 1.5rem - 24px
|
||||||
&.pi-wrapper__gap--xl {
|
&.pi-wrapper__gap--xl {
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
// 2rem - 32px
|
// 2rem - 32px
|
||||||
&.pi-wrapper__gap--xxl {
|
&.pi-wrapper__gap--xxl {
|
||||||
gap: var(--pi-spacing-xx-large);
|
gap: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
// 2.5rem - 40px
|
// 2.5rem - 40px
|
||||||
&.pi-wrapper__gap--xxxl {
|
&.pi-wrapper__gap--xxxl {
|
||||||
gap: var(--pi-spacing-xxx-large);
|
gap: var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
// 3.375rem - 54px
|
// 3.375rem - 54px
|
||||||
&.pi-wrapper__gap--xxxxl {
|
&.pi-wrapper__gap--xxxxl {
|
||||||
gap: var(--pi-spacing-xxxx-large);
|
gap: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Flex directive
|
// Flex directive
|
||||||
&.pi-wrapper__flex {
|
&.pi-wrapper__flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// Wrap
|
// Wrap
|
||||||
&.pi-wrapper__flex-direction--wrap {
|
&.pi-wrapper__flex-direction--wrap {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
// Flex horizontally
|
// Flex horizontally
|
||||||
// Space between
|
// Space between
|
||||||
&.pi-wrapper__justify--space-between {
|
&.pi-wrapper__justify--space-between {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
// Space evenly
|
// Space evenly
|
||||||
&.pi-wrapper__justify--space-around {
|
&.pi-wrapper__justify--space-around {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
// Center
|
// Center
|
||||||
&.pi-wrapper__justify--center {
|
&.pi-wrapper__justify--center {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
// Alignment
|
// Alignment
|
||||||
// Flex start
|
// Flex start
|
||||||
&.pi-wrapper__align-items--flex-start {
|
&.pi-wrapper__align-items--flex-start {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
// Items width
|
// Items width
|
||||||
// 25%
|
// 25%
|
||||||
&.pi-wrapper__items-width--quarter {
|
&.pi-wrapper__items-width--quarter {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
|
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
@media screen and (min-width: 77.5rem) {
|
@media screen and (min-width: 77.5rem) {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 33.33%
|
// 33.33%
|
||||||
&.pi-wrapper__items-width--third {
|
&.pi-wrapper__items-width--third {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
|
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
@media screen and (min-width: 77.5rem) {
|
@media screen and (min-width: 77.5rem) {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 50%
|
// 50%
|
||||||
&.pi-wrapper__items-width--half {
|
&.pi-wrapper__items-width--half {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
// Tablet L & Desktop
|
// Tablet L & Desktop
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 100%
|
// 100%
|
||||||
&.pi-wrapper__items-width--full {
|
&.pi-wrapper__items-width--full {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Padding
|
// Padding
|
||||||
&.pi-wrapper__padding--xs {
|
&.pi-wrapper__padding--xs {
|
||||||
padding: var(--pi-spacing-x-small);
|
padding: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Border
|
// Border
|
||||||
// Top
|
// Top
|
||||||
&.pi-wrapper__border--top {
|
&.pi-wrapper__border--top {
|
||||||
border-top: 1px solid var(--pi-color-grey-25);
|
border-top: 1px solid var(--pi-color-grey-25);
|
||||||
}
|
}
|
||||||
// Bottom
|
// Bottom
|
||||||
&.pi-wrapper__border--bottom {
|
&.pi-wrapper__border--bottom {
|
||||||
border-bottom: 1px solid var(--pi-color-grey-25);
|
border-bottom: 1px solid var(--pi-color-grey-25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Responsive
|
// Responsive
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Padding
|
// Padding
|
||||||
&.pi-wrapper__has-padding {
|
&.pi-wrapper__has-padding {
|
||||||
padding-left: var(--pi-spacing-x-large);
|
padding-left: var(--pi-spacing-x-large);
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Grid
|
// Grid
|
||||||
&.pi-wrapper__grid {
|
&.pi-wrapper__grid {
|
||||||
// Grid half
|
// Grid half
|
||||||
&.pi-wrapper__grid--half {
|
&.pi-wrapper__grid--half {
|
||||||
grid-template-columns: unset;
|
grid-template-columns: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Padding
|
// Padding
|
||||||
&.pi-wrapper__has-padding {
|
&.pi-wrapper__has-padding {
|
||||||
padding-left: var(--pi-spacing-xxx-large);
|
padding-left: var(--pi-spacing-xxx-large);
|
||||||
padding-right: var(--pi-spacing-xxx-large);
|
padding-right: var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Grid
|
// Grid
|
||||||
// 1/4 - 3/4
|
// 1/4 - 3/4
|
||||||
&.pi-wrapper__grid--quarter {
|
&.pi-wrapper__grid--quarter {
|
||||||
.pi-main-wrapper-content__left {
|
.pi-main-wrapper-content__left {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content__right {
|
.pi-main-wrapper-content__right {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1/3 - 2/3
|
// 1/3 - 2/3
|
||||||
&.pi-wrapper__grid--third {
|
&.pi-wrapper__grid--third {
|
||||||
.pi-main-wrapper-content__left {
|
.pi-main-wrapper-content__left {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content__right {
|
.pi-main-wrapper-content__right {
|
||||||
width: 66.66%;
|
width: 66.66%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1/2 - 1/2
|
// 1/2 - 1/2
|
||||||
&.pi-wrapper__grid--half {
|
&.pi-wrapper__grid--half {
|
||||||
.pi-main-wrapper-content__left {
|
.pi-main-wrapper-content__left {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content__right {
|
.pi-main-wrapper-content__right {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 2/5 - 3/5
|
// 2/5 - 3/5
|
||||||
&.pi-wrapper__grid--fifth {
|
&.pi-wrapper__grid--fifth {
|
||||||
.pi-main-wrapper-content__left {
|
.pi-main-wrapper-content__left {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content__right {
|
.pi-main-wrapper-content__right {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reverse
|
// Reverse
|
||||||
&.pi-wrapper__grid--reverse-quarter {
|
&.pi-wrapper__grid--reverse-quarter {
|
||||||
.pi-main-wrapper-content__left {
|
.pi-main-wrapper-content__left {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content__right {
|
.pi-main-wrapper-content__right {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1/3 - 2/3
|
// 1/3 - 2/3
|
||||||
&.pi-wrapper__grid--reverse-third {
|
&.pi-wrapper__grid--reverse-third {
|
||||||
.pi-main-wrapper-content__left {
|
.pi-main-wrapper-content__left {
|
||||||
width: 66.66%;
|
width: 66.66%;
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content__right {
|
.pi-main-wrapper-content__right {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 3/5 - 2/5
|
// 3/5 - 2/5
|
||||||
&.pi-wrapper__grid--reverse-fifth {
|
&.pi-wrapper__grid--reverse-fifth {
|
||||||
.pi-main-wrapper-content__left {
|
.pi-main-wrapper-content__left {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content__right {
|
.pi-main-wrapper-content__right {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-wrapper__has-padding {
|
&.pi-wrapper__has-padding {
|
||||||
padding-left: var(--pi-spacing-xxxx-large);
|
padding-left: var(--pi-spacing-xxxx-large);
|
||||||
padding-right: var(--pi-spacing-xxxx-large);
|
padding-right: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
@forward 'pi-action-wrapper';
|
@forward 'pi-action-wrapper';
|
||||||
@forward 'pi-form-wrapper';
|
@forward 'pi-form-wrapper';
|
||||||
@forward 'pi-grid-wrapper';
|
@forward 'pi-grid-wrapper';
|
||||||
@forward 'pi-header-wrapper';
|
@forward 'pi-header-wrapper';
|
||||||
@forward 'pi-list-wrapper';
|
@forward 'pi-list-wrapper';
|
||||||
@forward 'pi-main-wrapper';
|
@forward 'pi-main-wrapper';
|
||||||
@forward 'pi-wrapper';
|
@forward 'pi-wrapper';
|
||||||
|
|||||||
@@ -1,181 +1,181 @@
|
|||||||
// 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)
|
||||||
DealeLandings: shellTheming('deale-landings'),
|
DealeLandings: shellTheming('deale-landings'),
|
||||||
// Deale SaaS (Private)
|
// Deale SaaS (Private)
|
||||||
DealeSaaS: shellTheming('deale-saas'),
|
DealeSaaS: shellTheming('deale-saas'),
|
||||||
// Deale Website (Public)
|
// Deale Website (Public)
|
||||||
DealeWebsite: shellTheming('deale-website'),
|
DealeWebsite: shellTheming('deale-website'),
|
||||||
};
|
};
|
||||||
|
|
||||||
// View component level
|
// View component level
|
||||||
// Container Layout ~ Landings
|
// Container Layout ~ Landings
|
||||||
export const ContainerLayout = 'pi-container-layout';
|
export const ContainerLayout = 'pi-container-layout';
|
||||||
|
|
||||||
// Layouts
|
// Layouts
|
||||||
// Heights
|
// Heights
|
||||||
export const enum Height {
|
export const enum Height {
|
||||||
Small = 'small', // Mobile: 50, Tablet: 50, Desktop: 25
|
Small = 'small', // Mobile: 50, Tablet: 50, Desktop: 25
|
||||||
Medium = 'medium', // Mobile: 100, Tablet: 75, Desktop: 50
|
Medium = 'medium', // Mobile: 100, Tablet: 75, Desktop: 50
|
||||||
Large = 'large', // Mobile: 150, Tablet: 100, Desktop: 75
|
Large = 'large', // Mobile: 150, Tablet: 100, Desktop: 75
|
||||||
Full = 'full', // Mobile: 200, Tablet: 150, Desktop: 100
|
Full = 'full', // Mobile: 200, Tablet: 150, Desktop: 100
|
||||||
}
|
}
|
||||||
|
|
||||||
export const height = (height: Height): string => `pi-layout__${height}`;
|
export const height = (height: Height): string => `pi-layout__${height}`;
|
||||||
|
|
||||||
// Responsive
|
// Responsive
|
||||||
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`;
|
||||||
|
|
||||||
// Not Responsive
|
// Not Responsive
|
||||||
export const LayoutHeight = {
|
export const LayoutHeight = {
|
||||||
Small: height(Height.Small), // 25
|
Small: height(Height.Small), // 25
|
||||||
Medium: height(Height.Medium), // 50
|
Medium: height(Height.Medium), // 50
|
||||||
Large: height(Height.Large), // 75
|
Large: height(Height.Large), // 75
|
||||||
Full: height(Height.Full), // 100
|
Full: height(Height.Full), // 100
|
||||||
};
|
};
|
||||||
|
|
||||||
// HostBinding layout class with or without background image ~ Landings
|
// HostBinding layout class with or without background image ~ Landings
|
||||||
export const layoutBackground = (imageName: string) =>
|
export const layoutBackground = (imageName: string) =>
|
||||||
`url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${imageName})`;
|
`url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${imageName})`;
|
||||||
|
|
||||||
export const backgroundWaveClass = (waveRef: string) =>
|
export const backgroundWaveClass = (waveRef: string) =>
|
||||||
`pi-background-wave pi-background-wave__${waveRef}`;
|
`pi-background-wave pi-background-wave__${waveRef}`;
|
||||||
|
|
||||||
// Not Responsive
|
// Not Responsive
|
||||||
export const LayoutWave = {
|
export const LayoutWave = {
|
||||||
// Grey
|
// Grey
|
||||||
Grey1: backgroundWaveClass('01-grey'),
|
Grey1: backgroundWaveClass('01-grey'),
|
||||||
Grey1RGBA: backgroundWaveClass('01-grey-rgba'),
|
Grey1RGBA: backgroundWaveClass('01-grey-rgba'),
|
||||||
Grey2: backgroundWaveClass('02-grey'),
|
Grey2: backgroundWaveClass('02-grey'),
|
||||||
Grey2RGBA: backgroundWaveClass('02-grey-rgba'),
|
Grey2RGBA: backgroundWaveClass('02-grey-rgba'),
|
||||||
// Highlighted
|
// Highlighted
|
||||||
Highlighted1: backgroundWaveClass('01-highlighted'),
|
Highlighted1: backgroundWaveClass('01-highlighted'),
|
||||||
Highlighted1RGBA: backgroundWaveClass('01-highlighted-rgba'),
|
Highlighted1RGBA: backgroundWaveClass('01-highlighted-rgba'),
|
||||||
Highlighted2: backgroundWaveClass('02-highlighted'),
|
Highlighted2: backgroundWaveClass('02-highlighted'),
|
||||||
Highlighted2RGBA: backgroundWaveClass('02-highlighted-rgba'),
|
Highlighted2RGBA: backgroundWaveClass('02-highlighted-rgba'),
|
||||||
// Primary
|
// Primary
|
||||||
Primary1: backgroundWaveClass('01-primary'),
|
Primary1: backgroundWaveClass('01-primary'),
|
||||||
Primary1RGBA: backgroundWaveClass('01-primary-rgba'),
|
Primary1RGBA: backgroundWaveClass('01-primary-rgba'),
|
||||||
Primary2: backgroundWaveClass('02-primary'),
|
Primary2: backgroundWaveClass('02-primary'),
|
||||||
Primary2RGBA: backgroundWaveClass('02-primary-rgba'),
|
Primary2RGBA: backgroundWaveClass('02-primary-rgba'),
|
||||||
// PrimaryWhite
|
// PrimaryWhite
|
||||||
PrimaryWhite1: backgroundWaveClass('01-primary-white'),
|
PrimaryWhite1: backgroundWaveClass('01-primary-white'),
|
||||||
PrimaryWhite1RGBA: backgroundWaveClass('01-primary-white-rgba'),
|
PrimaryWhite1RGBA: backgroundWaveClass('01-primary-white-rgba'),
|
||||||
PrimaryWhite2: backgroundWaveClass('02-primary-white'),
|
PrimaryWhite2: backgroundWaveClass('02-primary-white'),
|
||||||
PrimaryWhite2RGBA: backgroundWaveClass('02-primary-white-rgba'),
|
PrimaryWhite2RGBA: backgroundWaveClass('02-primary-white-rgba'),
|
||||||
// Primary50
|
// Primary50
|
||||||
PrimaryPrimary501: backgroundWaveClass('01-primary-primary-50'),
|
PrimaryPrimary501: backgroundWaveClass('01-primary-primary-50'),
|
||||||
Primary501: backgroundWaveClass('01-primary-50'),
|
Primary501: backgroundWaveClass('01-primary-50'),
|
||||||
PrimaryPrimary501RGBA: backgroundWaveClass('01-primary-primary-50-rgba'),
|
PrimaryPrimary501RGBA: backgroundWaveClass('01-primary-primary-50-rgba'),
|
||||||
PrimaryPrimary502: backgroundWaveClass('02-primary-primary-50'),
|
PrimaryPrimary502: backgroundWaveClass('02-primary-primary-50'),
|
||||||
Primary502: backgroundWaveClass('02-primary-50'),
|
Primary502: backgroundWaveClass('02-primary-50'),
|
||||||
PrimaryPrimary502RGBA: backgroundWaveClass('02-primary-primary-50-rgba'),
|
PrimaryPrimary502RGBA: backgroundWaveClass('02-primary-primary-50-rgba'),
|
||||||
// White
|
// White
|
||||||
White1: backgroundWaveClass('01-white'),
|
White1: backgroundWaveClass('01-white'),
|
||||||
White1RGBA: backgroundWaveClass('01-white-rgba'),
|
White1RGBA: backgroundWaveClass('01-white-rgba'),
|
||||||
White2: backgroundWaveClass('02-white'),
|
White2: backgroundWaveClass('02-white'),
|
||||||
White2RGBA: backgroundWaveClass('02-white-rgba'),
|
White2RGBA: backgroundWaveClass('02-white-rgba'),
|
||||||
};
|
};
|
||||||
|
|
||||||
// Layouts ~ SaaS & Landings
|
// Layouts ~ SaaS & Landings
|
||||||
export const LayoutNoPadding = 'pi-layout__no-padding';
|
export const LayoutNoPadding = 'pi-layout__no-padding';
|
||||||
|
|
||||||
export const LayoutCollapsable = 'pi-layout__collapsable';
|
export const LayoutCollapsable = 'pi-layout__collapsable';
|
||||||
|
|
||||||
export const userType = (userType: string) => `is-${userType}`;
|
export const userType = (userType: string) => `is-${userType}`;
|
||||||
|
|
||||||
// User type class
|
// User type class
|
||||||
export const UserTypeClass = {
|
export const UserTypeClass = {
|
||||||
// Company
|
// Company
|
||||||
Company: userType('company'),
|
Company: userType('company'),
|
||||||
// Investor
|
// Investor
|
||||||
Investor: userType('investor'),
|
Investor: userType('investor'),
|
||||||
// Advisor
|
// Advisor
|
||||||
Advisor: userType('advisor'),
|
Advisor: userType('advisor'),
|
||||||
};
|
};
|
||||||
|
|
||||||
// Layouts (Add to any view)
|
// Layouts (Add to any view)
|
||||||
export const LayoutTypeClass = {
|
export const LayoutTypeClass = {
|
||||||
// Specifics
|
// Specifics
|
||||||
Authentication: 'pi-layout pi-layout__00-authentication',
|
Authentication: 'pi-layout pi-layout__00-authentication',
|
||||||
Dashboard: 'pi-layout pi-layout__01-dashboard',
|
Dashboard: 'pi-layout pi-layout__01-dashboard',
|
||||||
// TODO: Delete old dashboard layout when ready other users
|
// TODO: Delete old dashboard layout when ready other users
|
||||||
DashboardOld: 'pi-layout pi-layout__main pi-layout__01-dashboard-old',
|
DashboardOld: 'pi-layout pi-layout__main pi-layout__01-dashboard-old',
|
||||||
// Main Horizontally
|
// Main Horizontally
|
||||||
// Full Width
|
// Full Width
|
||||||
FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
|
FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
|
||||||
// Full Width Centered
|
// Full Width Centered
|
||||||
FullWidthAuto:
|
FullWidthAuto:
|
||||||
'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto',
|
'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto',
|
||||||
// Main Vertically Centered
|
// Main Vertically Centered
|
||||||
VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
|
VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
|
||||||
// Main Space Between
|
// Main Space Between
|
||||||
SpaceBetween: 'pi-layout pi-layout__04-space-between',
|
SpaceBetween: 'pi-layout pi-layout__04-space-between',
|
||||||
// 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
|
||||||
List: 'pi-layout pi-layout__07-list',
|
List: 'pi-layout pi-layout__07-list',
|
||||||
// Infinite Scroll
|
// Infinite Scroll
|
||||||
ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
|
ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
|
||||||
// List Left
|
// List Left
|
||||||
PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated',
|
PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated',
|
||||||
// Form Layout
|
// Form Layout
|
||||||
Form: 'pi-layout pi-layout__08-form',
|
Form: 'pi-layout pi-layout__08-form',
|
||||||
// Pricing Layout
|
// Pricing Layout
|
||||||
Pricing: 'pi-layout pi-layout__09-pricing',
|
Pricing: 'pi-layout pi-layout__09-pricing',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const WebsiteScreenTypeClass = {
|
export const WebsiteScreenTypeClass = {
|
||||||
ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you',
|
ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you',
|
||||||
};
|
};
|
||||||
|
|
||||||
// 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'),
|
||||||
Form: wrapperType('form'),
|
Form: wrapperType('form'),
|
||||||
Header: wrapperType('header'),
|
Header: wrapperType('header'),
|
||||||
List: wrapperType('list'),
|
List: wrapperType('list'),
|
||||||
Main: wrapperType('main'),
|
Main: wrapperType('main'),
|
||||||
Steps: wrapperType('steps'),
|
Steps: wrapperType('steps'),
|
||||||
};
|
};
|
||||||
|
|
||||||
// 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'),
|
||||||
Card: componentFamily('card'),
|
Card: componentFamily('card'),
|
||||||
Carousel: componentFamily('carousel'),
|
Carousel: componentFamily('carousel'),
|
||||||
DomainComponent: componentFamily('domain-component'),
|
DomainComponent: componentFamily('domain-component'),
|
||||||
Chip: componentFamily('chip'),
|
Chip: componentFamily('chip'),
|
||||||
DynamicMenu: componentFamily('dynamic-menu'),
|
DynamicMenu: componentFamily('dynamic-menu'),
|
||||||
FileUpload: componentFamily('file-upload'),
|
FileUpload: componentFamily('file-upload'),
|
||||||
Field: componentFamily('field'),
|
Field: componentFamily('field'),
|
||||||
Icon: componentFamily('icon'),
|
Icon: componentFamily('icon'),
|
||||||
Image: componentFamily('image'),
|
Image: componentFamily('image'),
|
||||||
List: componentFamily('list'),
|
List: componentFamily('list'),
|
||||||
CustomModal: componentFamily('modal pi-modal__custom-template'),
|
CustomModal: componentFamily('modal pi-modal__custom-template'),
|
||||||
Panel: componentFamily('panel'),
|
Panel: componentFamily('panel'),
|
||||||
Table: componentFamily('table'),
|
Table: componentFamily('table'),
|
||||||
Text: componentFamily('text'),
|
Text: componentFamily('text'),
|
||||||
};
|
};
|
||||||
|
|
||||||
// Transition durations
|
// Transition durations
|
||||||
export const enum DURATION {
|
export const enum DURATION {
|
||||||
Slow = 300,
|
Slow = 300,
|
||||||
Medium = 200,
|
Medium = 200,
|
||||||
Fast = 100,
|
Fast = 100,
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
@use 'layouts' as *;
|
@use 'layouts' as *;
|
||||||
@use 'theming' as *;
|
@use 'theming' as *;
|
||||||
@use 'shell' as *;
|
@use 'shell' as *;
|
||||||
@use 'wrappers' as *;
|
@use 'wrappers' as *;
|
||||||
|
|||||||
@@ -1,330 +1,330 @@
|
|||||||
@use 'pi-00a-authentication-layout-auth';
|
@use 'pi-00a-authentication-layout-auth';
|
||||||
@use 'pi-00b-authentication-layout-recover-password';
|
@use 'pi-00b-authentication-layout-recover-password';
|
||||||
@use 'pi-00c-authentication-layout-user-profile';
|
@use 'pi-00c-authentication-layout-user-profile';
|
||||||
@use 'pi-00d-authentication-layout-default-space';
|
@use 'pi-00d-authentication-layout-default-space';
|
||||||
@use 'pi-00e-authentication-layout-impersonation';
|
@use 'pi-00e-authentication-layout-impersonation';
|
||||||
|
|
||||||
@mixin authenticationLayoutSizes(
|
@mixin authenticationLayoutSizes(
|
||||||
$width: calc(100% - var(--pi-spacing-xx-large)),
|
$width: calc(100% - var(--pi-spacing-xx-large)),
|
||||||
$max-width: calc(100% - var(--pi-spacing-xx-large)),
|
$max-width: calc(100% - var(--pi-spacing-xx-large)),
|
||||||
$height: 90vh
|
$height: 90vh
|
||||||
) {
|
) {
|
||||||
& > .pi-component {
|
& > .pi-component {
|
||||||
width: $width;
|
width: $width;
|
||||||
max-width: $max-width;
|
max-width: $max-width;
|
||||||
& > .pi-panel {
|
& > .pi-panel {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
& > section {
|
& > section {
|
||||||
height: $height;
|
height: $height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin authenticationLayoutsButtonSize() {
|
@mixin authenticationLayoutsButtonSize() {
|
||||||
}
|
}
|
||||||
|
|
||||||
@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 {
|
||||||
gap: var(--pi-spacing-#{$gap});
|
gap: var(--pi-spacing-#{$gap});
|
||||||
}
|
}
|
||||||
&.pi-panel__inner-padding--xxxxl {
|
&.pi-panel__inner-padding--xxxxl {
|
||||||
&.pi-panel__inner-padding {
|
&.pi-panel__inner-padding {
|
||||||
&.pi-panel__flex-direction--column {
|
&.pi-panel__flex-direction--column {
|
||||||
& > section {
|
& > section {
|
||||||
& > * {
|
& > * {
|
||||||
padding-left: $spacing;
|
padding-left: $spacing;
|
||||||
padding-right: $spacing;
|
padding-right: $spacing;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin authenticationLayoutMobileSmall {
|
@mixin authenticationLayoutMobileSmall {
|
||||||
// Mobile S
|
// Mobile S
|
||||||
@media screen and (max-height: 41.6875rem) {
|
@media screen and (max-height: 41.6875rem) {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
.pi-wrapper__gap--l {
|
.pi-wrapper__gap--l {
|
||||||
gap: var(--pi-spacing-small);
|
gap: var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.pi-panel__inner-padding--xxxl {
|
&.pi-panel__inner-padding--xxxl {
|
||||||
&.pi-panel__inner-padding {
|
&.pi-panel__inner-padding {
|
||||||
&.pi-panel__flex-direction--column {
|
&.pi-panel__flex-direction--column {
|
||||||
& > section {
|
& > section {
|
||||||
& > * {
|
& > * {
|
||||||
padding-top: var(--pi-spacing-x-large);
|
padding-top: var(--pi-spacing-x-large);
|
||||||
padding-bottom: var(--pi-spacing-x-large);
|
padding-bottom: var(--pi-spacing-x-large);
|
||||||
padding-left: var(--pi-spacing-x-large);
|
padding-left: var(--pi-spacing-x-large);
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
& > .pi-component {
|
& > .pi-component {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
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(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;
|
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;
|
||||||
background-size: 150% 300%;
|
background-size: 150% 300%;
|
||||||
border: 0.0625rem solid transparent;
|
border: 0.0625rem solid transparent;
|
||||||
box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125);
|
box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125);
|
||||||
.pi-panel-content__right {
|
.pi-panel-content__right {
|
||||||
& > * {
|
& > * {
|
||||||
max-width: 21.25rem;
|
max-width: 21.25rem;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
.pi-text-viewer {
|
.pi-text-viewer {
|
||||||
article {
|
article {
|
||||||
label,
|
label,
|
||||||
span {
|
span {
|
||||||
line-height: 105%;
|
line-height: 105%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-wrapper__form + .pi-wrapper__action {
|
.pi-wrapper__form + .pi-wrapper__action {
|
||||||
margin-top: var(--pi-spacing-xxxx-large);
|
margin-top: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
.pi-text-centered {
|
.pi-text-centered {
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.pi-layout__00-authentication--auth) {
|
&:not(.pi-layout__00-authentication--auth) {
|
||||||
// Panel in other authentication layouts
|
// Panel in other authentication layouts
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
.pi-panel-content__bottom {
|
.pi-panel-content__bottom {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-panel-content__top,
|
.pi-panel-content__top,
|
||||||
.pi-panel-content__bottom {
|
.pi-panel-content__bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--pi-spacing-x-small);
|
gap: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small);
|
@include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small);
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
@include authenticationLayoutSizes;
|
@include authenticationLayoutSizes;
|
||||||
// Mobile S
|
// Mobile S
|
||||||
@include authenticationLayoutMobileSmall;
|
@include authenticationLayoutMobileSmall;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&:not(.pi-layout__00-authentication--auth) {
|
&:not(.pi-layout__00-authentication--auth) {
|
||||||
@include authenticationLayoutSizes(80%, 80%, 80vh);
|
@include authenticationLayoutSizes(80%, 80%, 80vh);
|
||||||
}
|
}
|
||||||
&.pi-layout__00-authentication--auth {
|
&.pi-layout__00-authentication--auth {
|
||||||
@include authenticationLayoutSizes(80%, 80%, 85vh);
|
@include authenticationLayoutSizes(80%, 80%, 85vh);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.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(
|
||||||
calc(100% - 4rem),
|
calc(100% - 4rem),
|
||||||
calc(100% - 4rem),
|
calc(100% - 4rem),
|
||||||
calc(100vh - 4rem)
|
calc(100vh - 4rem)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Mobile
|
// Tablet & Mobile
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
& > .pi-component {
|
& > .pi-component {
|
||||||
// Panel in authentication layout
|
// Panel in authentication layout
|
||||||
& > .pi-panel {
|
& > .pi-panel {
|
||||||
.pi-panel-content__bottom {
|
.pi-panel-content__bottom {
|
||||||
// Action wrapper in panel bottom content
|
// Action wrapper in panel bottom content
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__action {
|
&.pi-wrapper__action {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
// Hide 'Press enter' text viewer on mobile and tablet
|
// Hide 'Press enter' text viewer on mobile and tablet
|
||||||
& > *:last-child {
|
& > *:last-child {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Not Auth Layout
|
// Not Auth Layout
|
||||||
&:not(.pi-layout__00-authentication--auth) {
|
&:not(.pi-layout__00-authentication--auth) {
|
||||||
// Panel in other authentication layouts
|
// Panel in other authentication layouts
|
||||||
& > .pi-component {
|
& > .pi-component {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
& > section {
|
& > section {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.pi-panel-content__center {
|
.pi-panel-content__center {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
// Generic Scroll
|
// Generic Scroll
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: var(--pi-spacing-xxx-small);
|
width: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--pi-color-primary-50);
|
background-color: var(--pi-color-primary-50);
|
||||||
border-radius: var(--pi-border-radius-small);
|
border-radius: var(--pi-border-radius-small);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
background-color: var(--pi-color-primary-100);
|
background-color: var(--pi-color-primary-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&:not(.pi-layout__00-authentication--auth) {
|
&:not(.pi-layout__00-authentication--auth) {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
position: relative;
|
position: relative;
|
||||||
// Add logo to bottom right corner of panel
|
// Add logo to bottom right corner of panel
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 4.375rem;
|
width: 4.375rem;
|
||||||
right: var(--pi-spacing-xxx-large);
|
right: var(--pi-spacing-xxx-large);
|
||||||
bottom: var(--pi-spacing-xxx-large);
|
bottom: var(--pi-spacing-xxx-large);
|
||||||
background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg');
|
background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: bottom right;
|
background-position: bottom right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
.is-public {
|
.is-public {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&:not(.pi-layout__00-authentication--auth):not(
|
&:not(.pi-layout__00-authentication--auth):not(
|
||||||
.pi-layout__00-authentication--recover-password
|
.pi-layout__00-authentication--recover-password
|
||||||
):not(.pi-layout__00-authentication--impersonation) {
|
):not(.pi-layout__00-authentication--impersonation) {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
& > section {
|
& > section {
|
||||||
.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(.mdc-switch):not(
|
||||||
.pi-button__toggle
|
.pi-button__toggle
|
||||||
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
|
):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(.mdc-switch):not(
|
||||||
.pi-button__toggle
|
.pi-button__toggle
|
||||||
):not(.pi-button__type--menu-item).pi-button:not(.pi-button__icon):not(
|
):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__large):not(
|
||||||
.pi-button__trimed
|
.pi-button__trimed
|
||||||
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
|
):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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include authenticationLayoutSpacings(4rem, x-large);
|
@include authenticationLayoutSpacings(4rem, x-large);
|
||||||
// Desktop S
|
// Desktop S
|
||||||
&.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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop M & L
|
// Desktop M & L
|
||||||
&.is-desktop__medium,
|
&.is-desktop__medium,
|
||||||
&.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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,83 +1,83 @@
|
|||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small Device
|
// Small Device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__00-authentication {
|
&.pi-layout__00-authentication {
|
||||||
&.pi-layout__00-authentication--auth {
|
&.pi-layout__00-authentication--auth {
|
||||||
// Panel in authentication layout
|
// Panel in authentication layout
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
.pi-panel-content__left {
|
.pi-panel-content__left {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.pi-panel-content__right {
|
.pi-panel-content__right {
|
||||||
padding-top: var(--pi-spacing-xxx-large);
|
padding-top: var(--pi-spacing-xxx-large);
|
||||||
@media screen and (max-height: 41.6875rem) {
|
@media screen and (max-height: 41.6875rem) {
|
||||||
transform: scale(0.95);
|
transform: scale(0.95);
|
||||||
&.pi-wrapper {
|
&.pi-wrapper {
|
||||||
&.pi-wrapper__gap--xl {
|
&.pi-wrapper__gap--xl {
|
||||||
gap: unset;
|
gap: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Headline in authentication layout
|
// Headline in authentication layout
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
&.pi-headline__type--logo {
|
&.pi-headline__type--logo {
|
||||||
& > figure {
|
& > figure {
|
||||||
max-width: 5.75rem;
|
max-width: 5.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Panel in Root auth form
|
// Panel in Root auth form
|
||||||
&.pi-layout__00-authentication--root-org {
|
&.pi-layout__00-authentication--root-org {
|
||||||
// Panel in authentication layout
|
// Panel in authentication layout
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
.pi-panel-content__center {
|
.pi-panel-content__center {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: var(--pi-spacing-medium);
|
margin-top: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large Device
|
// Large Device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__00-authentication {
|
&.pi-layout__00-authentication {
|
||||||
&.pi-layout__00-authentication--auth {
|
&.pi-layout__00-authentication--auth {
|
||||||
// Panel in authentication layout
|
// Panel in authentication layout
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
.pi-panel-content__left {
|
.pi-panel-content__left {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: repeat(2, 1fr);
|
grid-template-rows: repeat(2, 1fr);
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
align-self: end;
|
align-self: end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Headline in authentication layout
|
// Headline in authentication layout
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
&.pi-headline__type--logo {
|
&.pi-headline__type--logo {
|
||||||
& > figure {
|
& > figure {
|
||||||
max-width: 4.6875rem;
|
max-width: 4.6875rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,28 +1,28 @@
|
|||||||
html {
|
html {
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&.pi-layout__00-authentication--recover-password {
|
&.pi-layout__00-authentication--recover-password {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
& > section {
|
& > section {
|
||||||
.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(.mdc-switch):not(
|
||||||
.pi-button__toggle
|
.pi-button__toggle
|
||||||
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
|
):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,109 +1,109 @@
|
|||||||
@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 {
|
||||||
.pi-select-options-menu {
|
.pi-select-options-menu {
|
||||||
padding: unset;
|
padding: unset;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
&.pi-select__menu-type--custom-grid {
|
&.pi-select__menu-type--custom-grid {
|
||||||
.pi-select-options-menu {
|
.pi-select-options-menu {
|
||||||
& > div {
|
& > div {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(#{$columnsNum}, 1fr);
|
grid-template-columns: repeat(#{$columnsNum}, 1fr);
|
||||||
grid-gap: var(--pi-spacing-large);
|
grid-gap: var(--pi-spacing-large);
|
||||||
.pi-card {
|
.pi-card {
|
||||||
min-height: $card-height;
|
min-height: $card-height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Grid wrapper 3 cols in Authentiocation User Type layout
|
// Grid wrapper 3 cols in Authentiocation User Type layout
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__grid {
|
&.pi-wrapper__grid {
|
||||||
&.pi-wrapper__grid--columns-3 {
|
&.pi-wrapper__grid--columns-3 {
|
||||||
&.is-responsive {
|
&.is-responsive {
|
||||||
grid-template-columns: repeat(#{$columnsNum}, 1fr);
|
grid-template-columns: repeat(#{$columnsNum}, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin authenticationLayoutMobile {
|
@mixin authenticationLayoutMobile {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&.pi-layout__00-authentication--user-profile {
|
&.pi-layout__00-authentication--user-profile {
|
||||||
.pi-select-option__large {
|
.pi-select-option__large {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
.pi-card {
|
.pi-card {
|
||||||
.pi-card-content__bottom {
|
.pi-card-content__bottom {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-panel__gap--xxxl {
|
.pi-panel__gap--xxxl {
|
||||||
& > section {
|
& > section {
|
||||||
gap: var(--pi-spacing-x-small);
|
gap: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&.pi-layout__00-authentication--user-profile {
|
&.pi-layout__00-authentication--user-profile {
|
||||||
.pi-card {
|
.pi-card {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
.pi-card-content__bottom {
|
.pi-card-content__bottom {
|
||||||
& > span {
|
& > span {
|
||||||
font: {
|
font: {
|
||||||
weight: 400;
|
weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include authenticationLayoutSelectMenuTypeCustom;
|
@include authenticationLayoutSelectMenuTypeCustom;
|
||||||
@include authenticationLayoutMobile;
|
@include authenticationLayoutMobile;
|
||||||
}
|
}
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&.pi-layout__00-authentication--user-profile {
|
&.pi-layout__00-authentication--user-profile {
|
||||||
.pi-panel-content__center {
|
.pi-panel-content__center {
|
||||||
padding-top: var(--pi-spacing-medium);
|
padding-top: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet Small
|
// Tablet Small
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include authenticationLayoutSelectMenuTypeCustom;
|
@include authenticationLayoutSelectMenuTypeCustom;
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include authenticationLayoutSelectMenuTypeCustom(3, 9rem);
|
@include authenticationLayoutSelectMenuTypeCustom(3, 9rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
@include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem);
|
@include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem);
|
||||||
}
|
}
|
||||||
&:not(.is-desktop__small) {
|
&:not(.is-desktop__small) {
|
||||||
@include authenticationLayoutSelectMenuTypeCustom(3);
|
@include authenticationLayoutSelectMenuTypeCustom(3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,41 +1,41 @@
|
|||||||
@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) {
|
@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&.pi-layout__00-authentication--default-space {
|
&.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 {
|
||||||
gap: var(--pi-spacing-#{$gap});
|
gap: var(--pi-spacing-#{$gap});
|
||||||
}
|
}
|
||||||
&.pi-panel__inner-padding--xxxxl {
|
&.pi-panel__inner-padding--xxxxl {
|
||||||
&.pi-panel__inner-padding {
|
&.pi-panel__inner-padding {
|
||||||
&.pi-panel__flex-direction--column {
|
&.pi-panel__flex-direction--column {
|
||||||
& > section {
|
& > section {
|
||||||
& > * {
|
& > * {
|
||||||
padding-left: $spacing;
|
padding-left: $spacing;
|
||||||
padding-right: $spacing;
|
padding-right: $spacing;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include authenticationDefaultSpaceLayoutSpacings(11rem, x-large);
|
@include authenticationDefaultSpaceLayoutSpacings(11rem, x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,28 +1,28 @@
|
|||||||
html {
|
html {
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
.is-public {
|
.is-public {
|
||||||
.pi-layout__00-authentication {
|
.pi-layout__00-authentication {
|
||||||
&.pi-layout__00-authentication--impersonation {
|
&.pi-layout__00-authentication--impersonation {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
& > section {
|
& > section {
|
||||||
.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(.mdc-switch):not(
|
||||||
.pi-button__toggle
|
.pi-button__toggle
|
||||||
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
|
):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,239 +1,239 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
.pi-panel__primary {
|
.pi-panel__primary {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
&.is-company {
|
&.is-company {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__main {
|
&.pi-wrapper__main {
|
||||||
& > section {
|
& > section {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
& > section {
|
& > section {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
&.is-investor {
|
&.is-investor {
|
||||||
& > div {
|
& > div {
|
||||||
& > div {
|
& > div {
|
||||||
& > * {
|
& > * {
|
||||||
display: block;
|
display: block;
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
& > section {
|
& > section {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// Press component
|
// Press component
|
||||||
& > div {
|
& > div {
|
||||||
a {
|
a {
|
||||||
& > .pi-headline {
|
& > .pi-headline {
|
||||||
& > figure {
|
& > figure {
|
||||||
width: unset;
|
width: unset;
|
||||||
img {
|
img {
|
||||||
height: 1.75rem;
|
height: 1.75rem;
|
||||||
width: 1.75rem;
|
width: 1.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.is-company {
|
.is-company {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
&.is-investor {
|
&.is-investor {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
& > section {
|
& > section {
|
||||||
// Deal manager component
|
// Deal manager component
|
||||||
& > .pi-headline {
|
& > .pi-headline {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.is-company {
|
.is-company {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.is-investor {
|
.is-investor {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
}
|
}
|
||||||
.is-company {
|
.is-company {
|
||||||
}
|
}
|
||||||
.is-investor {
|
.is-investor {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
}
|
}
|
||||||
.is-company {
|
.is-company {
|
||||||
}
|
}
|
||||||
.is-investor {
|
.is-investor {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Large device
|
// Large device
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.is-mode-list {
|
.is-mode-list {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard-old {
|
&.pi-layout__01-dashboard-old {
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
&.pi-data-grid__data-direction--row {
|
&.pi-data-grid__data-direction--row {
|
||||||
height: calc(100% - 2.6563rem);
|
height: calc(100% - 2.6563rem);
|
||||||
.pi-data-grid__content {
|
.pi-data-grid__content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
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-close-button):not(
|
||||||
.pi-hamburger
|
.pi-hamburger
|
||||||
):not(.pi-button__xx-small) {
|
):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);
|
||||||
padding-right: var(--pi-spacing-medium);
|
padding-right: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-chip-label {
|
.pi-chip-label {
|
||||||
max-width: 15ch;
|
max-width: 15ch;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
}
|
}
|
||||||
.is-company {
|
.is-company {
|
||||||
}
|
}
|
||||||
.is-investor {
|
.is-investor {
|
||||||
}
|
}
|
||||||
// Desktop S
|
// Desktop S
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
.pi-layout__01-dashboard-old {
|
.pi-layout__01-dashboard-old {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
}
|
}
|
||||||
.is-company {
|
.is-company {
|
||||||
}
|
}
|
||||||
.is-investor {
|
.is-investor {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop M
|
// Desktop M
|
||||||
&.is-desktop__medium {
|
&.is-desktop__medium {
|
||||||
.pi-layout__01-dashboard-old {
|
.pi-layout__01-dashboard-old {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
}
|
}
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
}
|
}
|
||||||
.is-company {
|
.is-company {
|
||||||
}
|
}
|
||||||
.is-investor {
|
.is-investor {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop L
|
// Desktop L
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
.pi-layout__01-dashboard-old {
|
.pi-layout__01-dashboard-old {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
}
|
}
|
||||||
.is-company {
|
.is-company {
|
||||||
}
|
}
|
||||||
.is-investor {
|
.is-investor {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,47 +1,47 @@
|
|||||||
@mixin dashboardLayoutWidth(
|
@mixin dashboardLayoutWidth(
|
||||||
$width: calc(100% - var(--pi-spacing-x-large)),
|
$width: calc(100% - var(--pi-spacing-x-large)),
|
||||||
$max-width: calc(100% - var(--pi-spacing-x-large)),
|
$max-width: calc(100% - var(--pi-spacing-x-large)),
|
||||||
$margin: var(--pi-height-header-mobile) auto 0
|
$margin: var(--pi-height-header-mobile) auto 0
|
||||||
) {
|
) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
width: $width;
|
width: $width;
|
||||||
max-width: $max-width;
|
max-width: $max-width;
|
||||||
margin: $margin;
|
margin: $margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Maobile & Tablet
|
// Maobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small devices
|
// Small devices
|
||||||
@include dashboardLayoutWidth;
|
@include dashboardLayoutWidth;
|
||||||
}
|
}
|
||||||
// Large device
|
// Large device
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Tablet L & Desktop S, M & L > 2400px
|
// Tablet L & Desktop S, M & L > 2400px
|
||||||
@media screen and (min-width: 62rem) and (max-width: 140rem) {
|
@media screen and (min-width: 62rem) and (max-width: 140rem) {
|
||||||
@include dashboardLayoutWidth(
|
@include dashboardLayoutWidth(
|
||||||
calc(100% - var(--pi-spacing-x-large)),
|
calc(100% - var(--pi-spacing-x-large)),
|
||||||
calc(100% - var(--pi-spacing-x-large)),
|
calc(100% - var(--pi-spacing-x-large)),
|
||||||
unset
|
unset
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// 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(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
|
||||||
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
|
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
|
||||||
unset
|
unset
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,323 +1,323 @@
|
|||||||
$pi-seller-dashboard-overviews-height: 7.5rem; // 120px
|
$pi-seller-dashboard-overviews-height: 7.5rem; // 120px
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
// Company Dashboard Spacings
|
// Company Dashboard Spacings
|
||||||
--pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px
|
--pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin companyDashboardGridMobileAndTablet {
|
@mixin companyDashboardGridMobileAndTablet {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
&.is-company {
|
&.is-company {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
display: block;
|
display: block;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) {
|
@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
&.is-company {
|
&.is-company {
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
&.is-empty {
|
&.is-empty {
|
||||||
& > .pi-panel {
|
& > .pi-panel {
|
||||||
.pi-panel-content__center {
|
.pi-panel-content__center {
|
||||||
display: flex;
|
display: flex;
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin companyDashboardGridDesktopSmall {
|
@mixin companyDashboardGridDesktopSmall {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
&.is-company {
|
&.is-company {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
'item1 item1'
|
'item1 item1'
|
||||||
'item2 item3'
|
'item2 item3'
|
||||||
'item4 item5';
|
'item4 item5';
|
||||||
& > *:nth-child(2),
|
& > *:nth-child(2),
|
||||||
& > *:nth-child(3) {
|
& > *:nth-child(3) {
|
||||||
& > * {
|
& > * {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin companyDashboardGridDesktop {
|
@mixin companyDashboardGridDesktop {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
&.is-company {
|
&.is-company {
|
||||||
grid-template-columns: repeat(6, 1fr);
|
grid-template-columns: repeat(6, 1fr);
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
'item1 item1 item1 item1 item3 item3'
|
'item1 item1 item1 item1 item3 item3'
|
||||||
'item2 item2 item2 item2 item3 item3'
|
'item2 item2 item2 item2 item3 item3'
|
||||||
'item4 item4 item5 item5 item3 item3';
|
'item4 item4 item5 item5 item3 item3';
|
||||||
|
|
||||||
& > *: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
|
||||||
&.pi-panel-content__center {
|
&.pi-panel-content__center {
|
||||||
padding: unset;
|
padding: unset;
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
padding-left: var(--pi-spacing-x-large);
|
padding-left: var(--pi-spacing-x-large);
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
& > article {
|
& > article {
|
||||||
padding-left: var(--pi-spacing-x-small);
|
padding-left: var(--pi-spacing-x-small);
|
||||||
padding-right: var(--pi-spacing-x-small);
|
padding-right: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Accordion horizontal in Insights panel
|
// Accordion horizontal in Insights panel
|
||||||
@mixin companyDashboardHorizontalAccordionDesktop {
|
@mixin companyDashboardHorizontalAccordionDesktop {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
&.is-company {
|
&.is-company {
|
||||||
.pi-accordion {
|
.pi-accordion {
|
||||||
&.pi-accordion__direction--horizontal {
|
&.pi-accordion__direction--horizontal {
|
||||||
& > section {
|
& > section {
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
header {
|
header {
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: unset;
|
gap: unset;
|
||||||
.pi-list-item-icon {
|
.pi-list-item-icon {
|
||||||
&.pi-list-item-icon__left {
|
&.pi-list-item-icon__left {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// Insights chip
|
// Insights chip
|
||||||
.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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-list-item-content {
|
.pi-list-item-content {
|
||||||
&.pi-list-item-content__left {
|
&.pi-list-item-content__left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-small);
|
size: var(--pi-font-size-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
&.is-company {
|
&.is-company {
|
||||||
@for $i from 1 through 5 {
|
@for $i from 1 through 5 {
|
||||||
& > *:nth-child(#{$i}) {
|
& > *:nth-child(#{$i}) {
|
||||||
grid-area: item#{$i};
|
grid-area: item#{$i};
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
grid-gap: var(--pi-spacing-medium);
|
grid-gap: var(--pi-spacing-medium);
|
||||||
// Overviews
|
// Overviews
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
.pi-card {
|
.pi-card {
|
||||||
min-height: var(--pi-seller-dashboard-overviews-height);
|
min-height: var(--pi-seller-dashboard-overviews-height);
|
||||||
|
|
||||||
.pi-card-content {
|
.pi-card-content {
|
||||||
&.pi-card-content__top {
|
&.pi-card-content__top {
|
||||||
padding-left: var(--pi-spacing-large);
|
padding-left: var(--pi-spacing-large);
|
||||||
padding-top: var(--pi-spacing-medium);
|
padding-top: var(--pi-spacing-medium);
|
||||||
padding-right: var(--pi-spacing-large);
|
padding-right: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
&.pi-card-content__bottom {
|
&.pi-card-content__bottom {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: var(--pi-spacing-xxxx-large);
|
min-height: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--pi-color-primary-100);
|
border-color: var(--pi-color-primary-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// TO·DO List
|
// TO·DO List
|
||||||
& > *:nth-child(3) {
|
& > *:nth-child(3) {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
.pi-panel-content {
|
.pi-panel-content {
|
||||||
& > .pi-divider {
|
& > .pi-divider {
|
||||||
padding-top: var(--pi-spacing-xxx-small);
|
padding-top: var(--pi-spacing-xxx-small);
|
||||||
& + * {
|
& + * {
|
||||||
padding-top: var(--pi-spacing-medium);
|
padding-top: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .pi-text-viewer {
|
& > .pi-text-viewer {
|
||||||
padding-left: var(--pi-spacing-x-small);
|
padding-left: var(--pi-spacing-x-small);
|
||||||
padding-right: var(--pi-spacing-x-small);
|
padding-right: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Top
|
// Top
|
||||||
&.pi-panel-content__top {
|
&.pi-panel-content__top {
|
||||||
padding-left: var(--pi-spacing-xx-large);
|
padding-left: var(--pi-spacing-xx-large);
|
||||||
padding-right: var(--pi-spacing-xx-large);
|
padding-right: var(--pi-spacing-xx-large);
|
||||||
& > span {
|
& > span {
|
||||||
line-height: 105%;
|
line-height: 105%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.is-empty) {
|
&:not(.is-empty) {
|
||||||
& > *:nth-child(3) {
|
& > *:nth-child(3) {
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
.pi-panel-content {
|
.pi-panel-content {
|
||||||
// Center
|
// Center
|
||||||
&.pi-panel-content__center {
|
&.pi-panel-content__center {
|
||||||
padding: unset;
|
padding: unset;
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
.pi-icon__appearance--fill {
|
.pi-icon__appearance--fill {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
background-color: var(--pi-color-primary-50);
|
background-color: var(--pi-color-primary-50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
padding-left: var(--pi-spacing-x-large);
|
padding-left: var(--pi-spacing-x-large);
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
& > article {
|
& > article {
|
||||||
padding-left: var(--pi-spacing-x-small);
|
padding-left: var(--pi-spacing-x-small);
|
||||||
padding-right: var(--pi-spacing-x-small);
|
padding-right: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-wrapper__flex-direction--column {
|
.pi-wrapper__flex-direction--column {
|
||||||
// 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;
|
||||||
// Generic Scroll
|
// Generic Scroll
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: var(--pi-spacing-xxxx-small);
|
width: var(--pi-spacing-xxxx-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--pi-color-primary-100);
|
background-color: var(--pi-color-primary-100);
|
||||||
border-radius: var(--pi-border-radius-small);
|
border-radius: var(--pi-border-radius-small);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
background-color: var(--pi-color-primary-200);
|
background-color: var(--pi-color-primary-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Deal manager CTA
|
// Deal manager CTA
|
||||||
& > *:nth-child(5) {
|
& > *:nth-child(5) {
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
height: var(--pi-spacing-xxx-large);
|
height: var(--pi-spacing-xxx-large);
|
||||||
width: var(--pi-spacing-xxx-large);
|
width: var(--pi-spacing-xxx-large);
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
height: var(--pi-spacing-xx-small);
|
height: var(--pi-spacing-xx-small);
|
||||||
width: var(--pi-spacing-xx-small);
|
width: var(--pi-spacing-xx-small);
|
||||||
margin-top: -4rem;
|
margin-top: -4rem;
|
||||||
margin-left: 2.25rem;
|
margin-left: 2.25rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--pi-color-success);
|
background-color: var(--pi-color-success);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-list-item-icon {
|
.pi-list-item-icon {
|
||||||
&.pi-list-item-icon__right {
|
&.pi-list-item-icon__right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--pi-spacing-xxx-small);
|
gap: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
@include companyDashboardGridMobileAndTablet;
|
@include companyDashboardGridMobileAndTablet;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
// Desktop S
|
// Desktop S
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
@include companyDashboardGridDesktopSmall;
|
@include companyDashboardGridDesktopSmall;
|
||||||
@include companyDashboardInsightsPanelEmptyState;
|
@include companyDashboardInsightsPanelEmptyState;
|
||||||
}
|
}
|
||||||
// Desktop S & M
|
// Desktop S & M
|
||||||
&:not(.is-desktop__large) {
|
&:not(.is-desktop__large) {
|
||||||
@include companyDashboardHorizontalAccordionDesktop;
|
@include companyDashboardHorizontalAccordionDesktop;
|
||||||
}
|
}
|
||||||
// Desktop M & L
|
// Desktop M & L
|
||||||
&:not(.is-desktop__small) {
|
&:not(.is-desktop__small) {
|
||||||
@include companyDashboardGridDesktop;
|
@include companyDashboardGridDesktop;
|
||||||
@include companyDashboardInsightsPanelEmptyState(50%);
|
@include companyDashboardInsightsPanelEmptyState(50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,139 +1,139 @@
|
|||||||
@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(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))
|
||||||
) {
|
) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
// Layout full width
|
// Layout full width
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
&.pi-layout__collapsable {
|
&.pi-layout__collapsable {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
max-width: $max-width-open;
|
max-width: $max-width-open;
|
||||||
}
|
}
|
||||||
&:not(.pi-layout__collapsable) {
|
&:not(.pi-layout__collapsable) {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
max-width: $max-width-closed;
|
max-width: $max-width-closed;
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
width: $width;
|
width: $width;
|
||||||
max-width: $max-width-closed;
|
max-width: $max-width-closed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is closed
|
// Aside is closed
|
||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
// Layout full width
|
// Layout full width
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
width: $width;
|
width: $width;
|
||||||
max-width: $max-width-closed;
|
max-width: $max-width-closed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@mixin fullWidthLayoutGridWrapper3Columns($columns: 1) {
|
@mixin fullWidthLayoutGridWrapper3Columns($columns: 1) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__grid {
|
&.pi-wrapper__grid {
|
||||||
// 3
|
// 3
|
||||||
&.pi-wrapper__grid--columns-3 {
|
&.pi-wrapper__grid--columns-3 {
|
||||||
grid-template-columns: repeat(#{$columns}, 1fr);
|
grid-template-columns: repeat(#{$columns}, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include fullWidthLayoutGridWrapper3Columns;
|
@include fullWidthLayoutGridWrapper3Columns;
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
max-width: calc(100% - var(--pi-spacing-x-large));
|
max-width: calc(100% - var(--pi-spacing-x-large));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include fullWidthLayoutGridWrapper3Columns;
|
@include fullWidthLayoutGridWrapper3Columns;
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
@include fullWidthLayoutGridWrapper3Columns(2);
|
@include fullWidthLayoutGridWrapper3Columns(2);
|
||||||
}
|
}
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop S
|
// Desktop S
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
@include fullWidthLayoutWidthLargeDevice;
|
@include fullWidthLayoutWidthLargeDevice;
|
||||||
@include fullWidthLayoutGridWrapper3Columns(2);
|
@include fullWidthLayoutGridWrapper3Columns(2);
|
||||||
}
|
}
|
||||||
&:not(.is-desktop__small) {
|
&:not(.is-desktop__small) {
|
||||||
@include fullWidthLayoutGridWrapper3Columns(3);
|
@include fullWidthLayoutGridWrapper3Columns(3);
|
||||||
}
|
}
|
||||||
// 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
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
// Desktop L
|
// Desktop L
|
||||||
@media screen and (max-width: 140rem) {
|
@media screen and (max-width: 140rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
width: var(--pi-width-container-l);
|
width: var(--pi-width-container-l);
|
||||||
max-width: var(--pi-width-container-l);
|
max-width: var(--pi-width-container-l);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop XL
|
// Desktop XL
|
||||||
@media screen and (min-width: 140rem) {
|
@media screen and (min-width: 140rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
width: 66.66%;
|
width: 66.66%;
|
||||||
max-width: 66.66%;
|
max-width: 66.66%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,20 +1,20 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
&.pi-layout__02-full-width--auto {
|
&.pi-layout__02-full-width--auto {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__02-full-width {
|
&.pi-layout__02-full-width {
|
||||||
&.pi-layout__02-full-width--auto {
|
&.pi-layout__02-full-width--auto {
|
||||||
padding: var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,102 +1,102 @@
|
|||||||
@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 {
|
||||||
.pi-header-wrapper-content__center {
|
.pi-header-wrapper-content__center {
|
||||||
padding-top: $padding-top;
|
padding-top: $padding-top;
|
||||||
min-width: 75%;
|
min-width: 75%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__03-vertically-centered {
|
&.pi-layout__03-vertically-centered {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
padding: var(--pi-spacing-xxxx-large);
|
padding: var(--pi-spacing-xxxx-large);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
&:not(.pi-layout__small):not(.pi-layout__medium):not(.pi-layout__large) {
|
&:not(.pi-layout__small):not(.pi-layout__medium):not(.pi-layout__large) {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Main wrapper align center and justify center in VerticallyCentered layout
|
// Main wrapper align center and justify center in VerticallyCentered layout
|
||||||
.pi-wrapper__main {
|
.pi-wrapper__main {
|
||||||
&.pi-wrapper__align-items--center {
|
&.pi-wrapper__align-items--center {
|
||||||
&.pi-wrapper__justify--center {
|
&.pi-wrapper__justify--center {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-shell {
|
.pi-shell {
|
||||||
.is-fullscreen {
|
.is-fullscreen {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__03-vertically-centered {
|
&.pi-layout__03-vertically-centered {
|
||||||
// Main wrapper align center and justify center in VerticallyCentered layout
|
// Main wrapper align center and justify center in VerticallyCentered layout
|
||||||
& > .pi-wrapper__main {
|
& > .pi-wrapper__main {
|
||||||
&.pi-wrapper__align-items--center {
|
&.pi-wrapper__align-items--center {
|
||||||
&.pi-wrapper__justify--center {
|
&.pi-wrapper__justify--center {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
& > section {
|
& > section {
|
||||||
gap: var(--pi-spacing-xxxx-large);
|
gap: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
gap: var(--pi-spacing-xxxx-large);
|
gap: var(--pi-spacing-xxxx-large);
|
||||||
.pi-headline-content {
|
.pi-headline-content {
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
padding-left: var(--pi-spacing-xx-large);
|
padding-left: var(--pi-spacing-xx-large);
|
||||||
padding-right: var(--pi-spacing-xx-large);
|
padding-right: var(--pi-spacing-xx-large);
|
||||||
margin-top: var(--pi-spacing-x-small);
|
margin-top: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > figure {
|
& > figure {
|
||||||
width: 7.1875rem;
|
width: 7.1875rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-close-button {
|
.pi-close-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@media screen and (max-width: 40rem) {
|
@media screen and (max-width: 40rem) {
|
||||||
top: var(--pi-spacing-large);
|
top: var(--pi-spacing-large);
|
||||||
right: var(--pi-spacing-large);
|
right: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
||||||
top: var(--pi-spacing-xx-large);
|
top: var(--pi-spacing-xx-large);
|
||||||
right: var(--pi-spacing-xx-large);
|
right: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 77.5rem) {
|
@media screen and (min-width: 77.5rem) {
|
||||||
top: var(--pi-spacing-xxxx-large);
|
top: var(--pi-spacing-xxxx-large);
|
||||||
right: var(--pi-spacing-xxxx-large);
|
right: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
@include layoutVerticallyCenteredSpacings;
|
@include layoutVerticallyCenteredSpacings;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__04-space-between {
|
&.pi-layout__04-space-between {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,71 +1,71 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.pi-panel__is-clickable {
|
&.pi-panel__is-clickable {
|
||||||
// Is active
|
// Is active
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background-color: var(--pi-color-primary-50);
|
background-color: var(--pi-color-primary-50);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
&.is-active,
|
&.is-active,
|
||||||
&:hover {
|
&:hover {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline-offset: -1px;
|
outline-offset: -1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.pi-05a-splitted-paywall-layout) {
|
&:not(.pi-05a-splitted-paywall-layout) {
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon) {
|
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon) {
|
||||||
min-width: 10rem;
|
min-width: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
.pi-main-wrapper-content__right {
|
.pi-main-wrapper-content__right {
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
&.pi-wrapper {
|
&.pi-wrapper {
|
||||||
&.pi-wrapper__flex {
|
&.pi-wrapper__flex {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 90rem) {
|
@media screen and (min-width: 90rem) {
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
&:not(.pi-05a-splitted-paywall-layout) {
|
&:not(.pi-05a-splitted-paywall-layout) {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,413 +1,413 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position-x: right;
|
background-position-x: right;
|
||||||
|
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
// Left
|
// Left
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
header {
|
header {
|
||||||
h1 + * {
|
h1 + * {
|
||||||
margin-top: var(--pi-spacing-x-small);
|
margin-top: var(--pi-spacing-x-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.pi-main-wrapper-content__right {
|
&.pi-main-wrapper-content__right {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
* + .mat-mdc-radio-group {
|
* + .mat-mdc-radio-group {
|
||||||
padding-top: var(--pi-spacing-x-large);
|
padding-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
label {
|
label {
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-radio-label-content {
|
.mat-mdc-radio-label-content {
|
||||||
padding-left: var(--pi-spacing-medium);
|
padding-left: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 30rem;
|
max-width: 30rem;
|
||||||
&.is-active {
|
&.is-active {
|
||||||
border: 1px solid var(--pi-color-primary-100);
|
border: 1px solid var(--pi-color-primary-100);
|
||||||
background-color: var(--pi-color-primary-50);
|
background-color: var(--pi-color-primary-50);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: var(--pi-box-shadow-hover);
|
box-shadow: var(--pi-box-shadow-hover);
|
||||||
&:not(.is-active) {
|
&:not(.is-active) {
|
||||||
border: 1px solid var(--pi-color-primary-200);
|
border: 1px solid var(--pi-color-primary-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Padding
|
// Padding
|
||||||
&.has-padding {
|
&.has-padding {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--pi-spacing-large);
|
padding: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
|
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
|
||||||
@media screen and (max-height: 46.25rem) {
|
@media screen and (max-height: 46.25rem) {
|
||||||
min-height: calc(198vh + var(--pi-height-footer));
|
min-height: calc(198vh + var(--pi-height-footer));
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
// 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(--pi-spacing-x-large) -
|
||||||
var(--pi-height-footer) - 8rem
|
var(--pi-height-footer) - 8rem
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// Left
|
// Left
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
// Header
|
// Header
|
||||||
& > header {
|
& > header {
|
||||||
transform: scale(0.92);
|
transform: scale(0.92);
|
||||||
.pi-color__black-primary {
|
.pi-color__black-primary {
|
||||||
& > article {
|
& > article {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--pi-spacing-xxx-small);
|
gap: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Radio panels
|
// Radio panels
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
gap: var(--pi-spacing-small);
|
gap: var(--pi-spacing-small);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transform: scale(0.92);
|
transform: scale(0.92);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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__small):not(
|
||||||
.pi-button__large
|
.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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
|
padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
|
||||||
.pi-wrapper__main {
|
.pi-wrapper__main {
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
& > header {
|
& > header {
|
||||||
max-width: 66.66%;
|
max-width: 66.66%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.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(--pi-spacing-xx-large) -
|
||||||
var(--pi-height-footer) - 20rem
|
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__small):not(
|
||||||
.pi-button__large
|
.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
.pi-wrapper__main {
|
.pi-wrapper__main {
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
& > * + *:not(:last-child) {
|
& > * + *:not(:last-child) {
|
||||||
width: 66.66%;
|
width: 66.66%;
|
||||||
margin: var(--pi-spacing-x-large) auto;
|
margin: var(--pi-spacing-x-large) auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
.pi-wrapper__main {
|
.pi-wrapper__main {
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
& > * + *:not(:last-child) {
|
& > * + *:not(:last-child) {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
margin: var(--pi-spacing-x-large) auto;
|
margin: var(--pi-spacing-x-large) auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
// Main
|
// Main
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__main {
|
&.pi-wrapper__main {
|
||||||
& > section {
|
& > section {
|
||||||
padding-bottom: var(--pi-height-header);
|
padding-bottom: var(--pi-height-header);
|
||||||
}
|
}
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// Left
|
// Left
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
& > header {
|
& > header {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
h3 {
|
h3 {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
form {
|
form {
|
||||||
& > h4 {
|
& > h4 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Action wrapper
|
// Action wrapper
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
height: var(--pi-height-footer);
|
height: var(--pi-height-footer);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
background-color: var(--pi-color-white-rgba-06);
|
background-color: var(--pi-color-white-rgba-06);
|
||||||
box-shadow: var(--pi-box--shadow-top);
|
box-shadow: var(--pi-box--shadow-top);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.pi-main-wrapper-content__right {
|
&.pi-main-wrapper-content__right {
|
||||||
gap: var(--pi-spacing-xxxx-large);
|
gap: var(--pi-spacing-xxxx-large);
|
||||||
padding-top: 6rem;
|
padding-top: 6rem;
|
||||||
background-image: unset;
|
background-image: unset;
|
||||||
|
|
||||||
& > form {
|
& > form {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-mdc-radio-group {
|
.mat-mdc-radio-group {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.mat-mdc-radio-label-content {
|
.mat-mdc-radio-label-content {
|
||||||
h3 {
|
h3 {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-xx-large);
|
size: var(--pi-font-size-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mobile and Tablet S
|
// Mobile and Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
// Header
|
// Header
|
||||||
& > header {
|
& > header {
|
||||||
h1 {
|
h1 {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-x-large);
|
size: var(--pi-font-size-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Action wrapper
|
// Action wrapper
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
.mat-mdc-radio-group > * {
|
.mat-mdc-radio-group > * {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} // Tablet & Desktop
|
} // Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Tablet L and Desktop
|
// Tablet L and Desktop
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
// Header
|
// Header
|
||||||
& > header {
|
& > header {
|
||||||
h1 {
|
h1 {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-xx-large);
|
size: var(--pi-font-size-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mdc-radio-label-content {
|
.mat-mdc-radio-label-content {
|
||||||
h3 {
|
h3 {
|
||||||
font: {
|
font: {
|
||||||
size: 2.375rem;
|
size: 2.375rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
.pi-wrapper__main {
|
.pi-wrapper__main {
|
||||||
.pi-main-wrapper-content {
|
.pi-main-wrapper-content {
|
||||||
// Left
|
// Left
|
||||||
&.pi-main-wrapper-content__left {
|
&.pi-main-wrapper-content__left {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
&.has-padding {
|
&.has-padding {
|
||||||
max-width: 32rem;
|
max-width: 32rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
&.pi-wrapper__action {
|
&.pi-wrapper__action {
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.pi-main-wrapper-content__right {
|
&.pi-main-wrapper-content__right {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
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 {
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Right
|
// Right
|
||||||
&.pi-main-wrapper-content__right {
|
&.pi-main-wrapper-content__right {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-desktop__medium {
|
&.is-desktop__medium {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
padding: var(--pi-spacing-xxx-large);
|
padding: var(--pi-spacing-xxx-large);
|
||||||
gap: var(--pi-spacing-xxx-large);
|
gap: var(--pi-spacing-xxx-large);
|
||||||
.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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.pi-main-wrapper-content__right {
|
&.pi-main-wrapper-content__right {
|
||||||
gap: var(--pi-spacing-x-large);
|
gap: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
&.pi-05a-splitted-paywall-layout {
|
&.pi-05a-splitted-paywall-layout {
|
||||||
padding: var(--pi-spacing-xxxx-large);
|
padding: var(--pi-spacing-xxxx-large);
|
||||||
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 {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,52 +1,52 @@
|
|||||||
@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 {
|
||||||
& > .pi-wrapper__header {
|
& > .pi-wrapper__header {
|
||||||
.pi-header-wrapper-content__center {
|
.pi-header-wrapper-content__center {
|
||||||
padding-top: $padding-top;
|
padding-top: $padding-top;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__06-edge-to-edge {
|
&.pi-layout__06-edge-to-edge {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
&:not(.pi-wrapper__list) {
|
&:not(.pi-wrapper__list) {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__06-edge-to-edge {
|
&.pi-layout__06-edge-to-edge {
|
||||||
padding: var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__06-edge-to-edge {
|
&.pi-layout__06-edge-to-edge {
|
||||||
padding: var(--pi-spacing-xxx-large);
|
padding: var(--pi-spacing-xxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__06-edge-to-edge {
|
&.pi-layout__06-edge-to-edge {
|
||||||
padding: var(--pi-spacing-xxxx-large);
|
padding: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,221 +1,221 @@
|
|||||||
@mixin wrappersWidth(
|
@mixin wrappersWidth(
|
||||||
$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)),
|
||||||
$justify-content: center,
|
$justify-content: center,
|
||||||
$margin: 0 auto,
|
$margin: 0 auto,
|
||||||
$side-spacing: x-large
|
$side-spacing: x-large
|
||||||
) {
|
) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Wrapper
|
// Wrapper
|
||||||
&:not(.pi-wrapper__list):not(.pi-wrapper__flex) {
|
&:not(.pi-wrapper__list):not(.pi-wrapper__flex) {
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
// List Wrapper
|
// List Wrapper
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
justify-content: $justify-content;
|
justify-content: $justify-content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
// Mode Grid
|
// Mode Grid
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// List Wrapper
|
// List Wrapper
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
margin-top: var(--pi-spacing-xx-large);
|
margin-top: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// List Layout and edge to edge
|
// List Layout and edge to edge
|
||||||
&.pi-layout__05-edge-to-edge {
|
&.pi-layout__05-edge-to-edge {
|
||||||
// Mode Grid
|
// Mode Grid
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// List Wrapper
|
// List Wrapper
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
.pi-data-grid {
|
.pi-data-grid {
|
||||||
.pi-grid-item {
|
.pi-grid-item {
|
||||||
// < Desktop L
|
// < Desktop L
|
||||||
@media screen and (max-width: 120rem) {
|
@media screen and (max-width: 120rem) {
|
||||||
max-width: calc(100% - var(--pi-spacing-x-large));
|
max-width: calc(100% - var(--pi-spacing-x-large));
|
||||||
}
|
}
|
||||||
// >= Desktop L
|
// >= Desktop L
|
||||||
@media screen and (min-width: 120rem) {
|
@media screen and (min-width: 120rem) {
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) {
|
@mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
height: $height;
|
height: $height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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 {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
.pi-paginator {
|
.pi-paginator {
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
// Grid mode (Infinite scroll)
|
// Grid mode (Infinite scroll)
|
||||||
&.is-mode-grid {
|
&.is-mode-grid {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include wrappersWidth;
|
@include wrappersWidth;
|
||||||
@include listLayoutHeight;
|
@include listLayoutHeight;
|
||||||
@include paginatorWidth;
|
@include paginatorWidth;
|
||||||
}
|
}
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
.pi-icon-button {
|
.pi-icon-button {
|
||||||
&.is-sticky {
|
&.is-sticky {
|
||||||
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-large) +
|
||||||
var(--pi-spacing-x-small)
|
var(--pi-spacing-x-small)
|
||||||
);
|
);
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
.pi-wrapper__header {
|
.pi-wrapper__header {
|
||||||
.pi-switch-button {
|
.pi-switch-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// List mode
|
// List mode
|
||||||
&.is-mode-list {
|
&.is-mode-list {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
.pi-wrapper__header {
|
.pi-wrapper__header {
|
||||||
padding-top: var(--pi-height-header-tablet);
|
padding-top: var(--pi-height-header-tablet);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Grid mode
|
// Grid mode
|
||||||
&.is-mode-grid {
|
&.is-mode-grid {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
// Wrapper
|
// Wrapper
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Header wrapper
|
// Header wrapper
|
||||||
&.pi-wrapper__header {
|
&.pi-wrapper__header {
|
||||||
min-height: var(--pi-height-layout-header);
|
min-height: var(--pi-height-layout-header);
|
||||||
margin: var(--pi-height-header-mobile) auto 0;
|
margin: var(--pi-height-header-mobile) auto 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include listLayoutHeight(calc(100vh - var(--pi-height-header-tablet)));
|
@include listLayoutHeight(calc(100vh - var(--pi-height-header-tablet)));
|
||||||
@include wrappersWidth;
|
@include wrappersWidth;
|
||||||
@include paginatorWidth;
|
@include paginatorWidth;
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.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(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
|
var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
@include wrappersWidth(
|
@include wrappersWidth(
|
||||||
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
|
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
|
||||||
left,
|
left,
|
||||||
unset,
|
unset,
|
||||||
unset
|
unset
|
||||||
);
|
);
|
||||||
@include paginatorWidth(calc(100%));
|
@include paginatorWidth(calc(100%));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.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(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-medium)
|
var(--pi-spacing-x-large) - var(--pi-spacing-medium)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
// Desktop S
|
// Desktop S
|
||||||
&.is-desktop__small {
|
&.is-desktop__small {
|
||||||
@include wrappersWidth(
|
@include wrappersWidth(
|
||||||
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
|
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
|
||||||
left,
|
left,
|
||||||
unset,
|
unset,
|
||||||
unset
|
unset
|
||||||
);
|
);
|
||||||
@include paginatorWidth(calc(100%));
|
@include paginatorWidth(calc(100%));
|
||||||
}
|
}
|
||||||
// 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
|
||||||
&.is-desktop__large {
|
&.is-desktop__large {
|
||||||
@include wrappersWidth(var(--pi-width-container-l), left, unset, unset);
|
@include wrappersWidth(var(--pi-width-container-l), left, unset, unset);
|
||||||
@include paginatorWidth(calc(var(--pi-width-container-l)));
|
@include paginatorWidth(calc(var(--pi-width-container-l)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
&.pi-layout__07a-list--auto {
|
&.pi-layout__07a-list--auto {
|
||||||
// Mode Grid
|
// Mode Grid
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
margin: 0 auto var(--pi-spacing-x-large);
|
margin: 0 auto var(--pi-spacing-x-large);
|
||||||
// List Wrapper
|
// List Wrapper
|
||||||
&.pi-wrapper__list {
|
&.pi-wrapper__list {
|
||||||
& > section {
|
& > section {
|
||||||
& > div {
|
& > div {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__05-splitted {
|
&.pi-layout__05-splitted {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__08-form {
|
&.pi-layout__08-form {
|
||||||
padding-top: var(--pi-spacing-medium);
|
padding-top: var(--pi-spacing-medium);
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
display: block;
|
display: block;
|
||||||
width: var(--pi-spacing-xxx-small);
|
width: var(--pi-spacing-xxx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-layout__08-form {
|
&.pi-layout__08-form {
|
||||||
.pi-filter-range {
|
.pi-filter-range {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
.pi-container-layout {
|
.pi-container-layout {
|
||||||
padding-bottom: var(--pi-spacing-xxxx-large);
|
padding-bottom: var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,203 +1,203 @@
|
|||||||
@mixin layoutHeight(
|
@mixin layoutHeight(
|
||||||
$height:
|
$height:
|
||||||
calc(
|
calc(
|
||||||
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) -
|
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-x-large)
|
var(--pi-spacing-x-large)
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__main,
|
&.pi-layout__main,
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
height: $height;
|
height: $height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin layoutWidth(
|
@mixin layoutWidth(
|
||||||
$max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
|
$max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
|
||||||
$margin: var(--pi-height-header-mobile) auto 0
|
$margin: var(--pi-height-header-mobile) auto 0
|
||||||
) {
|
) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
// Default scroll
|
// Default scroll
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
max-width: $max-width;
|
max-width: $max-width;
|
||||||
margin: $margin;
|
margin: $margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) {
|
&:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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;
|
||||||
}
|
}
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
margin-top: var(--pi-spacing-xx-large);
|
margin-top: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
& > *:nth-child(n + 2) {
|
& > *:nth-child(n + 2) {
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
& > .pi-component {
|
& > .pi-component {
|
||||||
display: block;
|
display: block;
|
||||||
& > .pi-panel {
|
& > .pi-panel {
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-layout__no-padding {
|
&.pi-layout__no-padding {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include layoutHeight;
|
@include layoutHeight;
|
||||||
@include layoutWidth;
|
@include layoutWidth;
|
||||||
.has-bottom-sticky-note {
|
.has-bottom-sticky-note {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__01-dashboard,
|
&.pi-layout__01-dashboard,
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
padding-bottom: 11.5rem;
|
padding-bottom: 11.5rem;
|
||||||
}
|
}
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
& > .pi-wrapper__list {
|
& > .pi-wrapper__list {
|
||||||
& > section {
|
& > section {
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
// Default scroll
|
// Default scroll
|
||||||
&: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));
|
||||||
& > *:nth-child(-n + 3) {
|
& > *:nth-child(-n + 3) {
|
||||||
margin-top: var(--pi-spacing-medium);
|
margin-top: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.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,
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
}
|
}
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
& > .pi-wrapper__list {
|
& > .pi-wrapper__list {
|
||||||
& > section {
|
& > section {
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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
|
||||||
);
|
);
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
// Default scroll
|
// Default scroll
|
||||||
&: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));
|
||||||
& > *:nth-child(-n + 3) {
|
& > *:nth-child(-n + 3) {
|
||||||
margin-top: var(--pi-spacing-x-large);
|
margin-top: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
.has-bottom-sticky-note {
|
.has-bottom-sticky-note {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__main,
|
&.pi-layout__main,
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
}
|
}
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
& > .pi-wrapper__list {
|
& > .pi-wrapper__list {
|
||||||
& > section {
|
& > section {
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__main {
|
&.pi-layout__main {
|
||||||
& > *:nth-child(-n + 3) {
|
& > *:nth-child(-n + 3) {
|
||||||
margin-top: var(--pi-spacing-xx-large);
|
margin-top: var(--pi-spacing-xx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.has-bottom-sticky-note {
|
.has-bottom-sticky-note {
|
||||||
.pi-layout {
|
.pi-layout {
|
||||||
&.pi-layout__main,
|
&.pi-layout__main,
|
||||||
&.pi-layout__01-dashboard {
|
&.pi-layout__01-dashboard {
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
}
|
}
|
||||||
&.pi-layout__07-list {
|
&.pi-layout__07-list {
|
||||||
& > .pi-wrapper__list {
|
& > .pi-wrapper__list {
|
||||||
& > section {
|
& > section {
|
||||||
padding-bottom: 5rem;
|
padding-bottom: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
@forward 'pi-00-authentication-layout';
|
@forward 'pi-00-authentication-layout';
|
||||||
@forward 'pi-01-dashboard-layout';
|
@forward 'pi-01-dashboard-layout';
|
||||||
@forward 'pi-01a-dashboard-layout-company';
|
@forward 'pi-01a-dashboard-layout-company';
|
||||||
@forward 'pi-01b-dashboard-layout-investor';
|
@forward 'pi-01b-dashboard-layout-investor';
|
||||||
@forward 'pi-01c-dashboard-layout-advisor';
|
@forward 'pi-01c-dashboard-layout-advisor';
|
||||||
@forward 'pi-01-dashboard-layout-old';
|
@forward 'pi-01-dashboard-layout-old';
|
||||||
@forward 'pi-02-full-width-layout';
|
@forward 'pi-02-full-width-layout';
|
||||||
@forward 'pi-02a-full-width-auto-layout';
|
@forward 'pi-02a-full-width-auto-layout';
|
||||||
@forward 'pi-03-vertically-centered-layout';
|
@forward 'pi-03-vertically-centered-layout';
|
||||||
@forward 'pi-04-space-between-layout';
|
@forward 'pi-04-space-between-layout';
|
||||||
@forward 'pi-05-splitted-layout';
|
@forward 'pi-05-splitted-layout';
|
||||||
@forward 'pi-05a-splitted-paywall-layout';
|
@forward 'pi-05a-splitted-paywall-layout';
|
||||||
@forward 'pi-06-edge-to-edge-layout';
|
@forward 'pi-06-edge-to-edge-layout';
|
||||||
@forward 'pi-07-list-layout';
|
@forward 'pi-07-list-layout';
|
||||||
@forward 'pi-07a-list-auto-layout';
|
@forward 'pi-07a-list-auto-layout';
|
||||||
@forward 'pi-08-form-layout';
|
@forward 'pi-08-form-layout';
|
||||||
@forward 'pi-container-layout';
|
@forward 'pi-container-layout';
|
||||||
@forward 'pi-layout';
|
@forward 'pi-layout';
|
||||||
|
|||||||
@@ -1,361 +1,361 @@
|
|||||||
@mixin asideActionWrapper() {
|
@mixin asideActionWrapper() {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 50%;
|
min-width: 50%;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
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__toggle):not(
|
||||||
.pi-button__icon--single
|
.pi-button__icon--single
|
||||||
):not(.pi-button__xx-small):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: unset;
|
padding-left: unset;
|
||||||
padding-right: unset;
|
padding-right: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.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__toggle):not(
|
||||||
.pi-button__icon--single
|
.pi-button__icon--single
|
||||||
):not(.pi-button__xx-small):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-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
display: block;
|
display: block;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0
|
padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0
|
||||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
|
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
& > .pi-close-button {
|
& > .pi-close-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: -1rem;
|
margin-top: -1rem;
|
||||||
}
|
}
|
||||||
& > .pi-icon {
|
& > .pi-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: var(--pi-spacing-xxx-large);
|
height: var(--pi-spacing-xxx-large);
|
||||||
width: var(--pi-spacing-xxx-large);
|
width: var(--pi-spacing-xxx-large);
|
||||||
margin-left: var(--pi-spacing-x-small);
|
margin-left: var(--pi-spacing-x-small);
|
||||||
margin-top: -0.475rem;
|
margin-top: -0.475rem;
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
}
|
}
|
||||||
&.pi-saas-aside__white {
|
&.pi-saas-aside__white {
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
border: 1px solid var(--pi-color-white-900);
|
border: 1px solid var(--pi-color-white-900);
|
||||||
.pi-buyer-companies-list-filters {
|
.pi-buyer-companies-list-filters {
|
||||||
.pi-accordion + .pi-wrapper {
|
.pi-accordion + .pi-wrapper {
|
||||||
padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
|
padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-accordion-item-content__header {
|
.pi-accordion-item-content__header {
|
||||||
& > .pi-text-viewer {
|
& > .pi-text-viewer {
|
||||||
&.pi-text-viewer__font-size--m-xs {
|
&.pi-text-viewer__font-size--m-xs {
|
||||||
label {
|
label {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-small);
|
size: var(--pi-font-size-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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
|
||||||
&.aside-is-closable {
|
&.aside-is-closable {
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0;
|
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0;
|
||||||
|
|
||||||
.pi-wrapper__action {
|
.pi-wrapper__action {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@include asideActionWrapper;
|
@include asideActionWrapper;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *:nth-child(3) {
|
& > *:nth-child(3) {
|
||||||
@include asideActionWrapper;
|
@include asideActionWrapper;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dynamic menu
|
// Dynamic menu
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
||||||
.pi-panel {
|
.pi-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top));
|
height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top));
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
&.pi-wrapper__flex {
|
&.pi-wrapper__flex {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// Generic Scroll
|
// Generic Scroll
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 0.1875rem;
|
width: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
border-radius: var(--pi-border-radius-small);
|
border-radius: var(--pi-border-radius-small);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .pi-list-item {
|
& > .pi-list-item {
|
||||||
border-radius: var(--pi-border-radius-medium);
|
border-radius: var(--pi-border-radius-medium);
|
||||||
padding: var(--pi-spacing-medium);
|
padding: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > *: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);
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-saas-admin-user-profile {
|
&.pi-saas-admin-user-profile {
|
||||||
.pi-icon__x-large {
|
.pi-icon__x-large {
|
||||||
&.is-stroked {
|
&.is-stroked {
|
||||||
&.pi-icon__appearance--fill {
|
&.pi-icon__appearance--fill {
|
||||||
height: 7rem;
|
height: 7rem;
|
||||||
width: 7rem;
|
width: 7rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Aside is NOT closable
|
// Aside is NOT closable
|
||||||
&:not(.aside-is-closable) {
|
&:not(.aside-is-closable) {
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
|
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
|
||||||
calc(var(--pi-spacing-x-large) + var(--pi-spacing-large));
|
calc(var(--pi-spacing-x-large) + var(--pi-spacing-large));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
& > .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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
transform: translateX(var(--pi-spacing-x-large));
|
transform: translateX(var(--pi-spacing-x-large));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small device
|
// Small device
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
// Not fullscreen
|
// Not fullscreen
|
||||||
&: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));
|
||||||
}
|
}
|
||||||
|
|
||||||
& > *: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(safe-area-inset-bottom) -
|
||||||
var(--pi-height-header-aside) - var(--pi-height-footer-aside)
|
var(--pi-height-header-aside) - var(--pi-height-footer-aside)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > section,
|
& > section,
|
||||||
& > .pi-saas-navbar {
|
& > .pi-saas-navbar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
transform: translateX(calc(-100vw));
|
transform: translateX(calc(-100vw));
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is closed
|
// Aside is closed
|
||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
overflow: unset;
|
overflow: unset;
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
}
|
}
|
||||||
& > section,
|
& > section,
|
||||||
& > .pi-saas-navbar {
|
& > .pi-saas-navbar {
|
||||||
transform: translateX(calc(0));
|
transform: translateX(calc(0));
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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) {
|
||||||
padding: 0 var(--pi-spacing-x-large);
|
padding: 0 var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is closable
|
// Aside is closable
|
||||||
&.aside-is-closable {
|
&.aside-is-closable {
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
|
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
|
||||||
var(--pi-spacing-xxxx-large);
|
var(--pi-spacing-xxxx-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
// Not fullscreen
|
// Not fullscreen
|
||||||
&: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);
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .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))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is closed
|
// Aside is closed
|
||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition-duration: 0.6s;
|
transition-duration: 0.6s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Back link is hidden
|
// Back link is hidden
|
||||||
&.backlink-is-hidden {
|
&.backlink-is-hidden {
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large);
|
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
& > .pi-icon {
|
& > .pi-icon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is closable
|
// Aside is closable
|
||||||
&.aside-is-closable {
|
&.aside-is-closable {
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
|
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
|
||||||
var(--pi-spacing-x-large);
|
var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,369 +1,369 @@
|
|||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
// Private
|
// Private
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
|
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Left
|
// Left
|
||||||
&.pi-saas-header-content__left {
|
&.pi-saas-header-content__left {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: var(--pi-spacing-xxxx-small);
|
gap: var(--pi-spacing-xxxx-small);
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& > *:nth-child(n + 1) {
|
& > *:nth-child(n + 1) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-icon-button {
|
.pi-icon-button {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
// Common
|
// Common
|
||||||
&:not(.is-stroked) {
|
&:not(.is-stroked) {
|
||||||
&:hover {
|
&:hover {
|
||||||
img,
|
img,
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
transform: scale(1.15);
|
transform: scale(1.15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(:hover):not(.is-active) {
|
&:not(:hover):not(.is-active) {
|
||||||
img,
|
img,
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Type stroke
|
// Type stroke
|
||||||
&.is-stroked {
|
&.is-stroked {
|
||||||
&:hover {
|
&:hover {
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
&:not(:hover):not(.is-active) {
|
&:not(:hover):not(.is-active) {
|
||||||
transition-duration: 0.15s;
|
transition-duration: 0.15s;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Active
|
// Active
|
||||||
&.is-active {
|
&.is-active {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background-color: var(--pi-color-primary-50);
|
background-color: var(--pi-color-primary-50);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
left: var(--pi-spacing-medium);
|
left: 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));
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Left
|
// Left
|
||||||
&.pi-saas-header-content__left {
|
&.pi-saas-header-content__left {
|
||||||
h2 {
|
h2 {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Small Devices
|
// Small Devices
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Left
|
// Left
|
||||||
&.pi-saas-header-content__left {
|
&.pi-saas-header-content__left {
|
||||||
& > span {
|
& > span {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
& > h1 {
|
& > h1 {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-medium);
|
size: var(--pi-font-size-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Mobile
|
// Mobile
|
||||||
@media screen and (max-width: 40rem) {
|
@media screen and (max-width: 40rem) {
|
||||||
height: var(--pi-height-header-mobile);
|
height: var(--pi-height-header-mobile);
|
||||||
|
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
button {
|
button {
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
||||||
.pi-button__toggle
|
.pi-button__toggle
|
||||||
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
|
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
|
||||||
.pi-button__trimmed
|
.pi-button__trimmed
|
||||||
):not(.pi-button__toggle) {
|
):not(.pi-button__toggle) {
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
padding-left: var(--pi-spacing-medium);
|
padding-left: var(--pi-spacing-medium);
|
||||||
padding-right: var(--pi-spacing-medium);
|
padding-right: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet S
|
// Tablet S
|
||||||
@media screen and (min-width: 40rem) {
|
@media screen and (min-width: 40rem) {
|
||||||
height: var(--pi-height-header-tablet);
|
height: var(--pi-height-header-tablet);
|
||||||
// Right
|
// Right
|
||||||
&.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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Left
|
// Left
|
||||||
&.pi-saas-header-content__left {
|
&.pi-saas-header-content__left {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
& > span {
|
& > span {
|
||||||
& > h1 {
|
& > h1 {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-medium);
|
size: var(--pi-font-size-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.pi-avatar {
|
.pi-avatar {
|
||||||
padding: var(--pi-spacing-xxx-small);
|
padding: var(--pi-spacing-xxx-small);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-active {
|
&.is-active {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
.pi-avatar {
|
.pi-avatar {
|
||||||
picture {
|
picture {
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.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
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Left
|
// Left
|
||||||
&.pi-saas-header-content__left {
|
&.pi-saas-header-content__left {
|
||||||
height: var(--pi-height-header-tablet);
|
height: var(--pi-height-header-tablet);
|
||||||
padding-top: var(--pi-spacing-large);
|
padding-top: var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
height: var(--pi-height-header-tablet);
|
height: var(--pi-height-header-tablet);
|
||||||
padding-top: var(--pi-spacing-xx-small);
|
padding-top: var(--pi-spacing-xx-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet L & Desktop
|
// Tablet L & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
gap: var(--pi-spacing-medium);
|
gap: var(--pi-spacing-medium);
|
||||||
|
|
||||||
.pi-icon-button,
|
.pi-icon-button,
|
||||||
.pi-icon:nth-of-type(1) {
|
.pi-icon:nth-of-type(1) {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
&:not(.is-active) {
|
&:not(.is-active) {
|
||||||
&::after {
|
&::after {
|
||||||
content: '|';
|
content: '|';
|
||||||
color: var(--pi-color-primary-200);
|
color: var(--pi-color-primary-200);
|
||||||
margin-left: var(--pi-spacing-medium);
|
margin-left: var(--pi-spacing-medium);
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-small);
|
size: var(--pi-font-size-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Large Devices
|
// Large Devices
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Left
|
// Left
|
||||||
&.pi-saas-header-content__left {
|
&.pi-saas-header-content__left {
|
||||||
& span {
|
& span {
|
||||||
& > h1 {
|
& > h1 {
|
||||||
font: {
|
font: {
|
||||||
size: var(--pi-font-size-large);
|
size: var(--pi-font-size-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.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 {
|
||||||
&.pi-button__appearance--ghost {
|
&.pi-button__appearance--ghost {
|
||||||
padding: var(--pi-spacing-xxxx-small) 0;
|
padding: var(--pi-spacing-xxxx-small) 0;
|
||||||
}
|
}
|
||||||
&:not(.pi-button__appearance--ghost) {
|
&:not(.pi-button__appearance--ghost) {
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large);
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Left
|
// Left
|
||||||
&.pi-saas-header-content__left {
|
&.pi-saas-header-content__left {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
width: 55%;
|
width: 55%;
|
||||||
.pi-avatar {
|
.pi-avatar {
|
||||||
padding: 0.375rem;
|
padding: 0.375rem;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-active {
|
&.is-active {
|
||||||
transform: scale(1.075);
|
transform: scale(1.075);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 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
|
||||||
&.aside-is-closed {
|
&.aside-is-closed {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-saas-header {
|
.pi-saas-header {
|
||||||
.pi-saas-header-content {
|
.pi-saas-header-content {
|
||||||
// Left
|
// Left
|
||||||
&.pi-saas-header-content__left {
|
&.pi-saas-header-content__left {
|
||||||
height: var(--pi-height-header);
|
height: var(--pi-height-header);
|
||||||
padding-top: var(--pi-spacing-small);
|
padding-top: var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
// Right
|
// Right
|
||||||
&.pi-saas-header-content__right {
|
&.pi-saas-header-content__right {
|
||||||
height: var(--pi-height-header);
|
height: var(--pi-height-header);
|
||||||
padding-top: var(--pi-spacing-medium);
|
padding-top: var(--pi-spacing-medium);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,155 +1,155 @@
|
|||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
// NOT Is fullscreen
|
// NOT Is fullscreen
|
||||||
&:not(.is-fullscreen) {
|
&:not(.is-fullscreen) {
|
||||||
& > section {
|
& > section {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Is fullscreen
|
// Is fullscreen
|
||||||
&.is-fullscreen {
|
&.is-fullscreen {
|
||||||
& > section {
|
& > section {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pi-saas-header,
|
.pi-saas-header,
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
// Tablet L
|
// Tablet L
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
& > section {
|
& > section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
// Footer logo
|
// Footer logo
|
||||||
& > .pi-headline {
|
& > .pi-headline {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet L
|
// Tablet L
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.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) {
|
||||||
& > section {
|
& > section {
|
||||||
left: calc(
|
left: 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)
|
||||||
);
|
);
|
||||||
width: calc(
|
width: calc(
|
||||||
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
|
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
|
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Tablet L & Desktop
|
// Tablet L & Desktop
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
// Not is fullscreen
|
// Not is fullscreen
|
||||||
&:not(.is-fullscreen) {
|
&:not(.is-fullscreen) {
|
||||||
// Layout container
|
// Layout container
|
||||||
& > section {
|
& > section {
|
||||||
top: var(--pi-spacing-x-large);
|
top: var(--pi-spacing-x-large);
|
||||||
& > *:nth-child(1) {
|
& > *:nth-child(1) {
|
||||||
padding-right: var(--pi-spacing-x-large);
|
padding-right: var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Aside is open
|
// Aside is open
|
||||||
&.aside-is-open {
|
&.aside-is-open {
|
||||||
& > .pi-headline {
|
& > .pi-headline {
|
||||||
transform: var(--pi-animation);
|
transform: var(--pi-animation);
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside is closed
|
// Aside is closed
|
||||||
&.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)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
// Not is fullscreen
|
// Not is fullscreen
|
||||||
&: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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Navbar is expanded
|
// Navbar is expanded
|
||||||
&.navbar-is-expanded {
|
&.navbar-is-expanded {
|
||||||
& > section {
|
& > section {
|
||||||
left: calc(
|
left: calc(
|
||||||
var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
|
var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
|
||||||
var(--pi-spacing-x-large)
|
var(--pi-spacing-x-large)
|
||||||
);
|
);
|
||||||
|
|
||||||
width: calc(
|
width: calc(
|
||||||
100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
|
100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Navbar is collapsed
|
// Navbar is collapsed
|
||||||
&.navbar-is-collapsed {
|
&.navbar-is-collapsed {
|
||||||
& > section {
|
& > section {
|
||||||
left: calc(
|
left: calc(
|
||||||
var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
|
var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
|
||||||
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(--pi-spacing-x-large) -
|
||||||
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,280 +1,280 @@
|
|||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
border: 1px solid var(--pi-color-white-900);
|
border: 1px solid var(--pi-color-white-900);
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
.pi-saas-navbar-content {
|
.pi-saas-navbar-content {
|
||||||
&.pi-saas-navbar-content__top {
|
&.pi-saas-navbar-content__top {
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
width: calc(100% - var(--pi-spacing-x-large));
|
width: calc(100% - var(--pi-spacing-x-large));
|
||||||
padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large);
|
padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large);
|
||||||
}
|
}
|
||||||
.pi-chevron-button {
|
.pi-chevron-button {
|
||||||
width: var(--pi-spacing-x-large);
|
width: var(--pi-spacing-x-large);
|
||||||
margin-bottom: 1.125rem;
|
margin-bottom: 1.125rem;
|
||||||
padding: 0.1375rem;
|
padding: 0.1375rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-chevron-button {
|
.pi-chevron-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: var(--pi-spacing-small);
|
left: var(--pi-spacing-small);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin multispaceNavbarGridLargeDevice {
|
@mixin multispaceNavbarGridLargeDevice {
|
||||||
.pi-saas-navbar-content {
|
.pi-saas-navbar-content {
|
||||||
&.pi-saas-navbar-content__center {
|
&.pi-saas-navbar-content__center {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--pi-spacing-xxx-small);
|
gap: var(--pi-spacing-xxx-small);
|
||||||
|
|
||||||
.pi-divider {
|
.pi-divider {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
max-width: calc(100% - var(--pi-spacing-xxxx-large));
|
max-width: calc(100% - var(--pi-spacing-xxxx-large));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin multispaceNavbarGridSmallDevice {
|
@mixin multispaceNavbarGridSmallDevice {
|
||||||
// Advisor Profile Multispace
|
// Advisor Profile Multispace
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
.pi-saas-navbar-content {
|
.pi-saas-navbar-content {
|
||||||
&.pi-saas-navbar-content__center {
|
&.pi-saas-navbar-content__center {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.pi-menu {
|
.pi-menu {
|
||||||
&.pi-menu__parent {
|
&.pi-menu__parent {
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
& > nav {
|
& > nav {
|
||||||
padding-left: unset;
|
padding-left: unset;
|
||||||
.pi-menu-event-item {
|
.pi-menu-event-item {
|
||||||
&.has-children {
|
&.has-children {
|
||||||
border-left: 1px solid var(--pi-color-grey-75);
|
border-left: 1px solid var(--pi-color-grey-75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
& > nav {
|
& > nav {
|
||||||
padding-right: unset;
|
padding-right: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile & Tablet
|
// Mobile & Tablet
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
@include multispaceNavbarGridSmallDevice;
|
@include multispaceNavbarGridSmallDevice;
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.is-desktop) {
|
&:not(.is-desktop) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
// Mobile & Tablet S
|
// Mobile & Tablet S
|
||||||
@media screen and (max-width: 62rem) {
|
@media screen and (max-width: 62rem) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: var(--pi-height-footer);
|
height: var(--pi-height-footer);
|
||||||
box-shadow: var(--pi-box-shadow-panel);
|
box-shadow: var(--pi-box-shadow-panel);
|
||||||
.pi-saas-navbar-content {
|
.pi-saas-navbar-content {
|
||||||
&.pi-saas-navbar-content__top,
|
&.pi-saas-navbar-content__top,
|
||||||
&.pi-saas-navbar-content__bottom {
|
&.pi-saas-navbar-content__bottom {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet
|
// Tablet
|
||||||
&.is-tablet {
|
&.is-tablet {
|
||||||
// Tablet S
|
// Tablet S
|
||||||
&.is-tablet__small {
|
&.is-tablet__small {
|
||||||
@include multispaceNavbarGridSmallDevice;
|
@include multispaceNavbarGridSmallDevice;
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tablet L
|
// Tablet L
|
||||||
&.is-tablet__large {
|
&.is-tablet__large {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
width: var(--pi-width-navbar-collapsed);
|
width: var(--pi-width-navbar-collapsed);
|
||||||
box-shadow: var(--pi-box-shadow-panel);
|
box-shadow: var(--pi-box-shadow-panel);
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
height: 5.25rem;
|
height: 5.25rem;
|
||||||
max-width: 3.35rem;
|
max-width: 3.35rem;
|
||||||
padding: 1.6rem var(--pi-spacing-small);
|
padding: 1.6rem var(--pi-spacing-small);
|
||||||
}
|
}
|
||||||
.pi-chevron-button {
|
.pi-chevron-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.pi-saas-navbar-content {
|
.pi-saas-navbar-content {
|
||||||
&.pi-saas-navbar-content__top {
|
&.pi-saas-navbar-content__top {
|
||||||
& > .pi-chip {
|
& > .pi-chip {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
img {
|
img {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pi-saas-navbar-content__bottom {
|
&.pi-saas-navbar-content__bottom {
|
||||||
padding: var(--pi-spacing-x-large) 0;
|
padding: var(--pi-spacing-x-large) 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tablet & Desktop
|
// Tablet & Desktop
|
||||||
&:not(.is-mobile) {
|
&:not(.is-mobile) {
|
||||||
// Tablet L & Desktop
|
// Tablet L & Desktop
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
@include multispaceNavbarGridLargeDevice;
|
@include multispaceNavbarGridLargeDevice;
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
&:not(.is-fullscreen) {
|
&:not(.is-fullscreen) {
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
top: var(--pi-spacing-x-large);
|
top: var(--pi-spacing-x-large);
|
||||||
left: var(--pi-spacing-x-large);
|
left: var(--pi-spacing-x-large);
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
width: var(--pi-width-navbar-expanded);
|
width: var(--pi-width-navbar-expanded);
|
||||||
box-shadow: var(--pi-box-shadow-panel);
|
box-shadow: var(--pi-box-shadow-panel);
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
.pi-saas-navbar-content {
|
.pi-saas-navbar-content {
|
||||||
&.pi-saas-navbar-content__top {
|
&.pi-saas-navbar-content__top {
|
||||||
& > header {
|
& > header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
& > .pi-chip {
|
& > .pi-chip {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
img {
|
img {
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-saas-navbar-content__bottom {
|
&.pi-saas-navbar-content__bottom {
|
||||||
padding: var(--pi-spacing-x-large) 0;
|
padding: var(--pi-spacing-x-large) 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Expanded
|
// Expanded
|
||||||
&.navbar-is-expanded {
|
&.navbar-is-expanded {
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
width: var(--pi-width-navbar-expanded);
|
width: var(--pi-width-navbar-expanded);
|
||||||
|
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
max-width: 8rem;
|
max-width: 8rem;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
&.pi-logo {
|
&.pi-logo {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
transition-duration: 0.35s;
|
transition-duration: 0.35s;
|
||||||
transition-delay: 0.15s;
|
transition-delay: 0.15s;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
& > .pi-chip {
|
& > .pi-chip {
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-saas-navbar-content {
|
.pi-saas-navbar-content {
|
||||||
&.pi-saas-navbar-content__center {
|
&.pi-saas-navbar-content__center {
|
||||||
padding: var(--pi-spacing-x-large) 0;
|
padding: var(--pi-spacing-x-large) 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Collapsed
|
// Collapsed
|
||||||
&.navbar-is-collapsed {
|
&.navbar-is-collapsed {
|
||||||
.pi-saas-navbar {
|
.pi-saas-navbar {
|
||||||
width: var(--pi-width-navbar-collapsed);
|
width: var(--pi-width-navbar-collapsed);
|
||||||
.pi-headline {
|
.pi-headline {
|
||||||
max-width: 3.35rem;
|
max-width: 3.35rem;
|
||||||
height: 5.25rem;
|
height: 5.25rem;
|
||||||
padding: 1.25rem 0 0 var(--pi-spacing-x-large);
|
padding: 1.25rem 0 0 var(--pi-spacing-x-large);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
|
|
||||||
&.pi-logo-simple {
|
&.pi-logo-simple {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
transition-duration: 0.35s;
|
transition-duration: 0.35s;
|
||||||
transition-delay: 0.15s;
|
transition-delay: 0.15s;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-saas-navbar-content {
|
.pi-saas-navbar-content {
|
||||||
&.pi-saas-navbar-content__top {
|
&.pi-saas-navbar-content__top {
|
||||||
& > .pi-chip {
|
& > .pi-chip {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
@forward 'pi-aside';
|
@forward 'pi-aside';
|
||||||
@forward 'pi-header';
|
@forward 'pi-header';
|
||||||
@forward 'pi-main';
|
@forward 'pi-main';
|
||||||
@forward 'pi-menu';
|
@forward 'pi-menu';
|
||||||
@forward 'pi-navbar';
|
@forward 'pi-navbar';
|
||||||
|
|||||||
@@ -1,293 +1,293 @@
|
|||||||
@mixin asideColor($color) {
|
@mixin asideColor($color) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
& > div {
|
& > div {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
// Aside theme
|
// Aside theme
|
||||||
&.pi-saas-aside__theme {
|
&.pi-saas-aside__theme {
|
||||||
// Not custom
|
// Not custom
|
||||||
&:not(.is-custom) {
|
&:not(.is-custom) {
|
||||||
background-color: var(--pi-color-#{$color}-50);
|
background-color: var(--pi-color-#{$color}-50);
|
||||||
.pi-close-button {
|
.pi-close-button {
|
||||||
&:hover {
|
&:hover {
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
background-color: var(--pi-color-#{$color});
|
background-color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Dynamic menu
|
// Dynamic menu
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
&.pi-wrapper__flex {
|
&.pi-wrapper__flex {
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--pi-color-#{$color}-100);
|
background-color: var(--pi-color-#{$color}-100);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--pi-color-#{$color}-200);
|
background-color: var(--pi-color-#{$color}-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > *:nth-child(3) {
|
& > *:nth-child(3) {
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
border-top-style: solid;
|
border-top-style: solid;
|
||||||
border-top-color: var(--pi-color-#{$color}-100);
|
border-top-color: var(--pi-color-#{$color}-100);
|
||||||
}
|
}
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
&.is-clickable {
|
&.is-clickable {
|
||||||
&:hover {
|
&:hover {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&:not(.is-disabled):not(.is-active) {
|
&:not(.is-disabled):not(.is-active) {
|
||||||
background-color: var(--pi-color-#{$color}-75);
|
background-color: var(--pi-color-#{$color}-75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background-color: var(--pi-color-#{$color}-75);
|
background-color: var(--pi-color-#{$color}-75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-chip {
|
.pi-chip {
|
||||||
&:not(.pi-status) {
|
&:not(.pi-status) {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.pi-chip__appearance--outline {
|
&.pi-chip__appearance--outline {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--pi-color-#{$color});
|
border-color: var(--pi-color-#{$color});
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// User profile
|
// User profile
|
||||||
&.pi-saas-admin-user-profile {
|
&.pi-saas-admin-user-profile {
|
||||||
.pi-chip {
|
.pi-chip {
|
||||||
// Profile
|
// Profile
|
||||||
&:not(.pi-status) {
|
&:not(.pi-status) {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.pi-chip__appearance--fill {
|
&.pi-chip__appearance--fill {
|
||||||
&:not(.pi-chip__single-icon) {
|
&:not(.pi-chip__single-icon) {
|
||||||
background-color: var(--pi-color-#{$color});
|
background-color: var(--pi-color-#{$color});
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--pi-color-#{$color});
|
border-color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Subscription
|
// Subscription
|
||||||
&:not(.pi-status) {
|
&:not(.pi-status) {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.pi-chip__appearance--outline {
|
&.pi-chip__appearance--outline {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--pi-color-#{$color});
|
border-color: var(--pi-color-#{$color});
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.pi-status) {
|
&:not(.pi-status) {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.pi-chip__appearance--outline {
|
&.pi-chip__appearance--outline {
|
||||||
label {
|
label {
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
&.is-stroked {
|
&.is-stroked {
|
||||||
&.pi-icon__appearance--fill {
|
&.pi-icon__appearance--fill {
|
||||||
&.pi-icon__x-large {
|
&.pi-icon__x-large {
|
||||||
border-color: var(--pi-color-#{$color}-200);
|
border-color: var(--pi-color-#{$color}-200);
|
||||||
background-color: var(--pi-color-#{$color}-75);
|
background-color: var(--pi-color-#{$color}-75);
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
color: var(--pi-color-#{$color});
|
color: var(--pi-color-#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Custom
|
// Custom
|
||||||
&.is-custom {
|
&.is-custom {
|
||||||
background-color: var(--pi-color-primary-50);
|
background-color: var(--pi-color-primary-50);
|
||||||
.pi-close-button {
|
.pi-close-button {
|
||||||
&:hover {
|
&:hover {
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Dynamic menu
|
// Dynamic menu
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
&.pi-wrapper__flex {
|
&.pi-wrapper__flex {
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--pi-color-primary-100);
|
background-color: var(--pi-color-primary-100);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--pi-color-primary-200);
|
background-color: var(--pi-color-primary-200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > *:nth-child(3) {
|
& > *:nth-child(3) {
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
border-top-style: solid;
|
border-top-style: solid;
|
||||||
border-top-color: var(--pi-color-primary-100);
|
border-top-color: var(--pi-color-primary-100);
|
||||||
}
|
}
|
||||||
.pi-list-item {
|
.pi-list-item {
|
||||||
transition: var(--pi-animation);
|
transition: var(--pi-animation);
|
||||||
&.is-clickable {
|
&.is-clickable {
|
||||||
&:hover {
|
&:hover {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&:not(.is-disabled):not(.is-active) {
|
&:not(.is-disabled):not(.is-active) {
|
||||||
background-color: var(--pi-color-primary-100);
|
background-color: var(--pi-color-primary-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background-color: var(--pi-color-primary-100);
|
background-color: var(--pi-color-primary-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-chip {
|
.pi-chip {
|
||||||
&:not(.pi-status) {
|
&:not(.pi-status) {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.pi-chip__appearance--outline {
|
&.pi-chip__appearance--outline {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// User profile
|
// User profile
|
||||||
&.pi-saas-admin-user-profile {
|
&.pi-saas-admin-user-profile {
|
||||||
.pi-chip {
|
.pi-chip {
|
||||||
// Profile
|
// Profile
|
||||||
&:not(.pi-status) {
|
&:not(.pi-status) {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.pi-chip__appearance--fill {
|
&.pi-chip__appearance--fill {
|
||||||
&:not(.pi-chip__single-icon) {
|
&:not(.pi-chip__single-icon) {
|
||||||
background-color: var(--pi-color-primary);
|
background-color: var(--pi-color-primary);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Subscription
|
// Subscription
|
||||||
&:not(.pi-status) {
|
&:not(.pi-status) {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.pi-chip__appearance--outline {
|
&.pi-chip__appearance--outline {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--pi-color-primary);
|
border-color: var(--pi-color-primary);
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.pi-status) {
|
&:not(.pi-status) {
|
||||||
&.pi-color__primary {
|
&.pi-color__primary {
|
||||||
&.pi-chip__appearance--outline {
|
&.pi-chip__appearance--outline {
|
||||||
label {
|
label {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-icon {
|
.pi-icon {
|
||||||
&.is-stroked {
|
&.is-stroked {
|
||||||
&.pi-icon__appearance--fill {
|
&.pi-icon__appearance--fill {
|
||||||
&.pi-icon__x-large {
|
&.pi-icon__x-large {
|
||||||
border-color: var(--pi-color-primary-200);
|
border-color: var(--pi-color-primary-200);
|
||||||
background-color: var(--pi-color-primary-200-rgba);
|
background-color: var(--pi-color-primary-200-rgba);
|
||||||
.mat-icon {
|
.mat-icon {
|
||||||
color: var(--pi-color-primary);
|
color: var(--pi-color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Aside white
|
// Aside white
|
||||||
&.pi-saas-aside__white {
|
&.pi-saas-aside__white {
|
||||||
// Dynamic menu
|
// Dynamic menu
|
||||||
.pi-dynamic-menu {
|
.pi-dynamic-menu {
|
||||||
& > *:nth-child(2) {
|
& > *:nth-child(2) {
|
||||||
&.pi-wrapper__flex {
|
&.pi-wrapper__flex {
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--pi-color-grey-25);
|
background-color: var(--pi-color-grey-25);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--pi-color-grey-75);
|
background-color: var(--pi-color-grey-75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > *:nth-child(3) {
|
& > *:nth-child(3) {
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
border-top-style: solid;
|
border-top-style: solid;
|
||||||
border-top-color: var(--pi-color-white-900);
|
border-top-color: var(--pi-color-white-900);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.is-fullscreen) {
|
&:not(.is-fullscreen) {
|
||||||
// Large device
|
// Large device
|
||||||
@media screen and (min-width: 62rem) {
|
@media screen and (min-width: 62rem) {
|
||||||
.pi-saas-aside {
|
.pi-saas-aside {
|
||||||
&.pi-saas-aside__theme {
|
&.pi-saas-aside__theme {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
&:not(.is-custom) {
|
&:not(.is-custom) {
|
||||||
border-color: var(--pi-color-#{$color}-100);
|
border-color: var(--pi-color-#{$color}-100);
|
||||||
}
|
}
|
||||||
&.is-custom {
|
&.is-custom {
|
||||||
border-color: var(--pi-color-primary-100);
|
border-color: var(--pi-color-primary-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-company {
|
.is-company {
|
||||||
@include asideColor(primary);
|
@include asideColor(primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-investor {
|
.is-investor {
|
||||||
@include asideColor(accent);
|
@include asideColor(accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-advisor {
|
.is-advisor {
|
||||||
@include asideColor(highlighted);
|
@include asideColor(highlighted);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
@forward 'pi-user-type-theming';
|
@forward 'pi-user-type-theming';
|
||||||
|
|||||||
@@ -1,47 +1,47 @@
|
|||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Header Wrapper
|
// Header Wrapper
|
||||||
&.pi-wrapper__header {
|
&.pi-wrapper__header {
|
||||||
// Center
|
// Center
|
||||||
&.pi-wrapper__align-items--center {
|
&.pi-wrapper__align-items--center {
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pi-layout__07-list {
|
.pi-layout__07-list {
|
||||||
.pi-header-wrapper-content {
|
.pi-header-wrapper-content {
|
||||||
&.pi-header-wrapper-content__left {
|
&.pi-header-wrapper-content__left {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
&.pi-header-wrapper-content__right {
|
&.pi-header-wrapper-content__right {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
display: flex;
|
display: flex;
|
||||||
& > aside {
|
& > aside {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: var(--pi-spacing-xx-small);
|
gap: var(--pi-spacing-xx-small);
|
||||||
|
|
||||||
.pi-select {
|
.pi-select {
|
||||||
&.pi-select__picked-option-type--button {
|
&.pi-select__picked-option-type--button {
|
||||||
.pi-select-picked-option {
|
.pi-select-picked-option {
|
||||||
background-color: var(--pi-color-white);
|
background-color: var(--pi-color-white);
|
||||||
}
|
}
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
.pi-select-picked-option {
|
.pi-select-picked-option {
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pi-toggle-button {
|
.pi-toggle-button {
|
||||||
& > button {
|
& > button {
|
||||||
border-radius: var(--pi-border-radius-large);
|
border-radius: var(--pi-border-radius-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,42 +1,42 @@
|
|||||||
@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) {
|
@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) {
|
||||||
.pi-shell__deale-saas {
|
.pi-shell__deale-saas {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
// Max width
|
// Max width
|
||||||
&.pi-wrapper__full-width,
|
&.pi-wrapper__full-width,
|
||||||
&.pi-wrapper__full-width-centered {
|
&.pi-wrapper__full-width-centered {
|
||||||
max-width: $max-width;
|
max-width: $max-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Mobile
|
// Mobile
|
||||||
&.is-mobile {
|
&.is-mobile {
|
||||||
.pi-wrapper {
|
.pi-wrapper {
|
||||||
div {
|
div {
|
||||||
// Fixed wrapper
|
// Fixed wrapper
|
||||||
&.is-fixed {
|
&.is-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom));
|
bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom));
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
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);
|
||||||
right: 0;
|
right: 0;
|
||||||
button {
|
button {
|
||||||
min-width: 50%;
|
min-width: 50%;
|
||||||
box-shadow: var(--pi-box-shadow);
|
box-shadow: var(--pi-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Desktop
|
// Desktop
|
||||||
&.is-desktop {
|
&.is-desktop {
|
||||||
@include dealeSaaSWrapperMaxWidth;
|
@include dealeSaaSWrapperMaxWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
@forward 'pi-header-wrapper';
|
@forward 'pi-header-wrapper';
|
||||||
@forward 'pi-wrapper';
|
@forward 'pi-wrapper';
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user