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

fix: elimina los ultimos errores de estrictez y normaliza a LF

Browse Source
This commit is contained in:
Josep Piguillem
2026-07-27 23:57:22 +02:00
parent 422d85f59f
commit c15ccea103
497 changed files with 39058 additions and 39057 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

684
libs/ui/src/lib/styles/common/abstracts/_pi-color-variables.scss
View File

@@ -1,342 +1,342 @@
// Primary
$pi-color-theme-primary: (
50: #f0f4ff,
100: #d7e2fb,
200: #c3d5ff,
300: #a1bbf5,
400: #8cacf2,
500: #799ef0,
600: #7196ee,
700: #668cec,
800: #5c82e9,
900: #5772d4,
A100: #ffffff,
A200: #ffffff,
A400: #d6e0ff,
A700: #bdccff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
);
// Accent
$pi-color-theme-accent: (
50: #fdf5e5,
100: #fce0ad,
200: #f6d393,
300: #f6bc63,
400: #f0b54a,
500: #eda82a,
600: #eba025,
700: #d78f0f,
800: #e58d19,
900: #e07d0f,
A100: #ffffff,
A200: #ffecda,
A400: #ffd2a7,
A700: #ffc48d,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
);
// Warn
$pi-color-theme-warn: (
50: #fbe1e1,
100: #f4b3b3,
200: #ef8c8c,
300: #e54e4e,
400: #e02828,
500: #da0202,
600: #d60202,
700: #d00101,
800: #cb0101,
900: #ba1a1a,
A100: #ffebeb,
A200: #ffb8b8,
A400: #ff8585,
A700: #ff6b6b,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
);
// Highlighted
$pi-color-theme-highlighted: (
50: #e2e5ed,
100: #b6bfd3,
200: #8695b5,
300: #566a97,
400: #314a81,
500: #0d2a6b,
600: #0b2563,
700: #091f58,
800: #07194e,
900: #030f3c,
A100: #7285ff,
A200: #3f59ff,
A400: #0c2dff,
A700: #0021f1,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
),
);
$md-mcgpalette0: (
50: #e1e8f5,
100: #b5c6e6,
200: #83a1d5,
300: #517bc4,
400: #2c5eb7,
500: #0d2a6b,
600: #0b2563,
700: #091f58,
800: #07194e,
900: #030f3c,
A100: #7285ff,
A200: #3f59ff,
A400: #0c2dff,
A700: #0021f1,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
),
);
$pi-color-primary-10: rgba(253, 253, 255, 1); // #fdfdff
$pi-color-primary-25: rgba(250, 251, 255, 1); // #fafbff
$pi-color-primary-50: rgba(240, 244, 255, 1); // #f0f4ff
$pi-color-primary-75: rgba(234, 239, 255, 1); // #eaefff
$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(195, 213, 255, 1); //#c3d5ff
$pi-color-primary-300: rgba(163, 192, 255, 1); //#A3C0FF
$pi-color-primary-400: rgba(140, 172, 242, 1); //#8CACF2
$pi-color-primary: rgba(121, 158, 240, 1); // #799ef0
$pi-color-primary-900: rgba(87, 114, 212, 1); // #5772D4
// Accent
$pi-color-accent-10: rgba(255, 253, 249, 1); // #fffdf9
$pi-color-accent-25: rgba(255, 250, 237, 1); // #fffaed
$pi-color-accent-50: rgba(253, 245, 229, 1); // #fdf5e5
$pi-color-accent-75: rgba(250, 229, 191, 1); // #fae5bf
$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(246, 212, 149, 1); // #f6d495
$pi-color-accent-300: rgba(242, 194, 106, 1); // #f2c26a
$pi-color-accent-400: rgba(246, 188, 99, 1); // #f6bc63
$pi-color-accent: rgba(237, 168, 42, 1); // #eda82a
$pi-color-accent-900: rgba(215, 143, 15, 1); // #d78f0f
// Highlighted
$pi-color-highlighted-10: rgba(249, 251, 255, 1); // #f9fbff
$pi-color-highlighted-25: rgba(242, 245, 255, 1); // #f2f5ff
$pi-color-highlighted-50: rgba(233, 238, 255, 1); // #E9EEFF
$pi-color-highlighted-75: rgba(218, 226, 255, 1); // #dae2ff
$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: rgba(168, 193, 255, 0.15); // #A8C1FF
$pi-color-highlighted-300: rgba(67, 106, 193, 1); // #436ac1
$pi-color-highlighted-400: rgba(29, 63, 138, 1); // #1d3f8a
$pi-color-highlighted: rgba(13, 42, 107, 1); // #0d2a6b
$pi-color-highlighted-900: rgba(3, 15, 60, 1); // #030f3c
// Warn
$pi-color-warn-10: rgba(255, 249, 250, 1); // #fff9fa
$pi-color-warn-25: rgba(255, 237, 240, 1); // #ffedf0
$pi-color-warn-50: rgba(252, 235, 235, 1); // #fcebeb
$pi-color-warn-75: rgba(255, 231, 234, 1); // #ffe7ea
$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: rgba(237, 129, 129, 0.149); // #ED8181 #ed818126
$pi-color-warn-300: rgba(236, 139, 139, 1); // #ec8b8b
$pi-color-warn-400: rgba(232, 114, 114, 1); // #e87272
$pi-color-warn: rgba(228, 89, 89, 1); // #e45959
$pi-color-warn-900: rgba(193, 55, 55, 1); // #c13737
// Success
$pi-color-success-10: rgba(247, 252, 249, 1); // #f7fcf9
$pi-color-success-25: rgba(230, 246, 237, 1); // #e6f6ed
$pi-color-success-50: rgba(222, 245, 232, 1); // #DEF5E8
$pi-color-success-75: rgba(199, 235, 220, 1); // #c7ebdc
$pi-color-success-100: rgba(187, 232, 213, 1); // #bbe8d5
$pi-color-success-200: rgba(131, 219, 182, 1); // #83dbb6
$pi-color-success-300: rgba(96, 201, 157, 1); // #60c99d
$pi-color-success-400: rgba(62, 190, 136, 1); // #3ebe88
$pi-color-success: rgba(28, 178, 115, 1); // #1cb273
$pi-color-success-900: rgba(0, 151, 88, 1); // #009758
// Grey
$pi-color-grey-10: rgba(252, 252, 253, 1); // #fcfcfd
$pi-color-grey-25: rgba(250, 250, 251, 1); // #fafafb
$pi-color-grey-50: rgba(243, 244, 244, 1); // #f3f4f4
$pi-color-grey-75: rgba(240, 241, 243, 1); // #f0f1f3
$pi-color-grey-100: rgba(233, 235, 241, 1); // #e9ebf1
$pi-color-grey-200: rgba(209, 211, 218, 1); // #d1d3da
$pi-color-grey-300: rgba(178, 178, 184, 1); // #b2b2b8
$pi-color-grey-400: rgba(137, 136, 143, 1); // #89888f
$pi-color-grey: rgba(106, 106, 112, 1); // #6a6a70
$pi-color-grey-900: rgba(61, 61, 61, 1); // #3d3d3d
// White
$pi-color-white: rgba(255, 255, 255, 1); // #FFFFFF
$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-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-09: rgba(255, 255, 255, 0.88); // #ffffff rgba
// Black
$pi-color-black-200: rgba(50, 55, 72, 1); // #323748
$pi-color-black: rgba(26, 26, 26, 1); // #1A1A1A
// Background
$pi-color-background-300: rgba(174, 174, 182, 1); // #F4F4F4
$pi-color-background-400: rgba(252, 252, 252, 1); // ##FCFCFC
$pi-color-background-500: rgba(247, 247, 247, 1); //#f7f7f7
// Root variables
:root {
// Brand colors
// Primary
--pi-color-primary-10: #{$pi-color-primary-10};
--pi-color-primary-25: #{$pi-color-primary-25};
--pi-color-primary-50: #{$pi-color-primary-50};
--pi-color-primary-75: #{$pi-color-primary-75};
--pi-color-primary-100: #{$pi-color-primary-100};
--pi-color-primary-200: #{$pi-color-primary-200};
--pi-color-primary-200-rgba: #{$pi-color-primary-200-rgba};
--pi-color-primary-300: #{$pi-color-primary-300};
--pi-color-primary-400: #{$pi-color-primary-400};
--pi-color-primary: #{$pi-color-primary};
--pi-color-primary-900: #{$pi-color-primary-900};
// Accent
--pi-color-accent-10: #{$pi-color-accent-10};
--pi-color-accent-25: #{$pi-color-accent-25};
--pi-color-accent-50: #{$pi-color-accent-50};
--pi-color-accent-75: #{$pi-color-accent-75};
--pi-color-accent-100: #{$pi-color-accent-100};
--pi-color-accent-200: #{$pi-color-accent-200};
--pi-color-accent-200-rgba: #{$pi-color-accent-200-rgba};
--pi-color-accent-300: #{$pi-color-accent-300};
--pi-color-accent-400: #{$pi-color-accent-400};
--pi-color-accent: #{$pi-color-accent};
--pi-color-accent-900: #{$pi-color-accent-900};
// Warn
--pi-color-highlighted-10: #{$pi-color-highlighted-10};
--pi-color-highlighted-25: #{$pi-color-highlighted-25};
--pi-color-highlighted-50: #{$pi-color-highlighted-50};
--pi-color-highlighted-75: #{$pi-color-highlighted-75};
--pi-color-highlighted-100: #{$pi-color-highlighted-100};
--pi-color-highlighted-200: #{$pi-color-highlighted-200};
--pi-color-highlighted-200-rgba: #{$pi-color-highlighted-200-rgba};
--pi-color-highlighted-300: #{$pi-color-highlighted-300};
--pi-color-highlighted-400: #{$pi-color-highlighted-400};
--pi-color-highlighted: #{$pi-color-highlighted};
--pi-color-highlighted-900: #{$pi-color-highlighted-900};
// Warn
--pi-color-warn-10: #{$pi-color-warn-10};
--pi-color-warn-25: #{$pi-color-warn-25};
--pi-color-warn-50: #{$pi-color-warn-50};
--pi-color-warn-75: #{$pi-color-warn-75};
--pi-color-warn-100: #{$pi-color-warn-100};
--pi-color-warn-200: #{$pi-color-warn-200};
--pi-color-warn-200-rgba: #{$pi-color-warn-200-rgba};
--pi-color-warn-300: #{$pi-color-warn-300};
--pi-color-warn-400: #{$pi-color-warn-400};
--pi-color-warn: #{$pi-color-warn};
--pi-color-warn-900: #{$pi-color-warn-900};
// Success
--pi-color-success-10: #{$pi-color-success-10};
--pi-color-success-25: #{$pi-color-success-25};
--pi-color-success-50: #{$pi-color-success-50};
--pi-color-success-75: #{$pi-color-success-75};
--pi-color-success-100: #{$pi-color-success-100};
--pi-color-success-200: #{$pi-color-success-200};
--pi-color-success-300: #{$pi-color-success-300};
--pi-color-success-400: #{$pi-color-success-400};
--pi-color-success: #{$pi-color-success};
--pi-color-success-900: #{$pi-color-success-900};
// White
--pi-color-white: #{$pi-color-white};
--pi-color-white-900: #{$pi-color-white-900};
--pi-color-white-rgba-03: #{$pi-color-white-rgba-03};
--pi-color-white-rgba-05: #{$pi-color-white-rgba-05};
--pi-color-white-rgba-06: #{$pi-color-white-rgba-06};
--pi-color-white-rgba-09: #{$pi-color-white-rgba-09};
// Grey
--pi-color-grey-10: #{$pi-color-grey-10};
--pi-color-grey-25: #{$pi-color-grey-25};
--pi-color-grey-50: #{$pi-color-grey-50};
--pi-color-grey-75: #{$pi-color-grey-75};
--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-300: #{$pi-color-grey-300};
--pi-color-grey-400: #{$pi-color-grey-400};
--pi-color-grey: #{$pi-color-grey};
--pi-color-grey-900: #{$pi-color-grey-900};
// Black
--pi-color-black-200: #{$pi-color-black-200};
--pi-color-black: #{$pi-color-black};
// Background
--pi-color-white: #{$pi-color-white};
--pi-color-background-300: #{$pi-color-background-300};
--pi-color-background-400: #{$pi-color-background-400};
--pi-color-background-400: #{$pi-color-background-400};
}
// Primary
$pi-color-theme-primary: (
50: #f0f4ff,
100: #d7e2fb,
200: #c3d5ff,
300: #a1bbf5,
400: #8cacf2,
500: #799ef0,
600: #7196ee,
700: #668cec,
800: #5c82e9,
900: #5772d4,
A100: #ffffff,
A200: #ffffff,
A400: #d6e0ff,
A700: #bdccff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
);
// Accent
$pi-color-theme-accent: (
50: #fdf5e5,
100: #fce0ad,
200: #f6d393,
300: #f6bc63,
400: #f0b54a,
500: #eda82a,
600: #eba025,
700: #d78f0f,
800: #e58d19,
900: #e07d0f,
A100: #ffffff,
A200: #ffecda,
A400: #ffd2a7,
A700: #ffc48d,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
);
// Warn
$pi-color-theme-warn: (
50: #fbe1e1,
100: #f4b3b3,
200: #ef8c8c,
300: #e54e4e,
400: #e02828,
500: #da0202,
600: #d60202,
700: #d00101,
800: #cb0101,
900: #ba1a1a,
A100: #ffebeb,
A200: #ffb8b8,
A400: #ff8585,
A700: #ff6b6b,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
);
// Highlighted
$pi-color-theme-highlighted: (
50: #e2e5ed,
100: #b6bfd3,
200: #8695b5,
300: #566a97,
400: #314a81,
500: #0d2a6b,
600: #0b2563,
700: #091f58,
800: #07194e,
900: #030f3c,
A100: #7285ff,
A200: #3f59ff,
A400: #0c2dff,
A700: #0021f1,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
),
);
$md-mcgpalette0: (
50: #e1e8f5,
100: #b5c6e6,
200: #83a1d5,
300: #517bc4,
400: #2c5eb7,
500: #0d2a6b,
600: #0b2563,
700: #091f58,
800: #07194e,
900: #030f3c,
A100: #7285ff,
A200: #3f59ff,
A400: #0c2dff,
A700: #0021f1,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
),
);
$pi-color-primary-10: rgba(253, 253, 255, 1); // #fdfdff
$pi-color-primary-25: rgba(250, 251, 255, 1); // #fafbff
$pi-color-primary-50: rgba(240, 244, 255, 1); // #f0f4ff
$pi-color-primary-75: rgba(234, 239, 255, 1); // #eaefff
$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(195, 213, 255, 1); //#c3d5ff
$pi-color-primary-300: rgba(163, 192, 255, 1); //#A3C0FF
$pi-color-primary-400: rgba(140, 172, 242, 1); //#8CACF2
$pi-color-primary: rgba(121, 158, 240, 1); // #799ef0
$pi-color-primary-900: rgba(87, 114, 212, 1); // #5772D4
// Accent
$pi-color-accent-10: rgba(255, 253, 249, 1); // #fffdf9
$pi-color-accent-25: rgba(255, 250, 237, 1); // #fffaed
$pi-color-accent-50: rgba(253, 245, 229, 1); // #fdf5e5
$pi-color-accent-75: rgba(250, 229, 191, 1); // #fae5bf
$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(246, 212, 149, 1); // #f6d495
$pi-color-accent-300: rgba(242, 194, 106, 1); // #f2c26a
$pi-color-accent-400: rgba(246, 188, 99, 1); // #f6bc63
$pi-color-accent: rgba(237, 168, 42, 1); // #eda82a
$pi-color-accent-900: rgba(215, 143, 15, 1); // #d78f0f
// Highlighted
$pi-color-highlighted-10: rgba(249, 251, 255, 1); // #f9fbff
$pi-color-highlighted-25: rgba(242, 245, 255, 1); // #f2f5ff
$pi-color-highlighted-50: rgba(233, 238, 255, 1); // #E9EEFF
$pi-color-highlighted-75: rgba(218, 226, 255, 1); // #dae2ff
$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: rgba(168, 193, 255, 0.15); // #A8C1FF
$pi-color-highlighted-300: rgba(67, 106, 193, 1); // #436ac1
$pi-color-highlighted-400: rgba(29, 63, 138, 1); // #1d3f8a
$pi-color-highlighted: rgba(13, 42, 107, 1); // #0d2a6b
$pi-color-highlighted-900: rgba(3, 15, 60, 1); // #030f3c
// Warn
$pi-color-warn-10: rgba(255, 249, 250, 1); // #fff9fa
$pi-color-warn-25: rgba(255, 237, 240, 1); // #ffedf0
$pi-color-warn-50: rgba(252, 235, 235, 1); // #fcebeb
$pi-color-warn-75: rgba(255, 231, 234, 1); // #ffe7ea
$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: rgba(237, 129, 129, 0.149); // #ED8181 #ed818126
$pi-color-warn-300: rgba(236, 139, 139, 1); // #ec8b8b
$pi-color-warn-400: rgba(232, 114, 114, 1); // #e87272
$pi-color-warn: rgba(228, 89, 89, 1); // #e45959
$pi-color-warn-900: rgba(193, 55, 55, 1); // #c13737
// Success
$pi-color-success-10: rgba(247, 252, 249, 1); // #f7fcf9
$pi-color-success-25: rgba(230, 246, 237, 1); // #e6f6ed
$pi-color-success-50: rgba(222, 245, 232, 1); // #DEF5E8
$pi-color-success-75: rgba(199, 235, 220, 1); // #c7ebdc
$pi-color-success-100: rgba(187, 232, 213, 1); // #bbe8d5
$pi-color-success-200: rgba(131, 219, 182, 1); // #83dbb6
$pi-color-success-300: rgba(96, 201, 157, 1); // #60c99d
$pi-color-success-400: rgba(62, 190, 136, 1); // #3ebe88
$pi-color-success: rgba(28, 178, 115, 1); // #1cb273
$pi-color-success-900: rgba(0, 151, 88, 1); // #009758
// Grey
$pi-color-grey-10: rgba(252, 252, 253, 1); // #fcfcfd
$pi-color-grey-25: rgba(250, 250, 251, 1); // #fafafb
$pi-color-grey-50: rgba(243, 244, 244, 1); // #f3f4f4
$pi-color-grey-75: rgba(240, 241, 243, 1); // #f0f1f3
$pi-color-grey-100: rgba(233, 235, 241, 1); // #e9ebf1
$pi-color-grey-200: rgba(209, 211, 218, 1); // #d1d3da
$pi-color-grey-300: rgba(178, 178, 184, 1); // #b2b2b8
$pi-color-grey-400: rgba(137, 136, 143, 1); // #89888f
$pi-color-grey: rgba(106, 106, 112, 1); // #6a6a70
$pi-color-grey-900: rgba(61, 61, 61, 1); // #3d3d3d
// White
$pi-color-white: rgba(255, 255, 255, 1); // #FFFFFF
$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-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-09: rgba(255, 255, 255, 0.88); // #ffffff rgba
// Black
$pi-color-black-200: rgba(50, 55, 72, 1); // #323748
$pi-color-black: rgba(26, 26, 26, 1); // #1A1A1A
// Background
$pi-color-background-300: rgba(174, 174, 182, 1); // #F4F4F4
$pi-color-background-400: rgba(252, 252, 252, 1); // ##FCFCFC
$pi-color-background-500: rgba(247, 247, 247, 1); //#f7f7f7
// Root variables
:root {
// Brand colors
// Primary
--pi-color-primary-10: #{$pi-color-primary-10};
--pi-color-primary-25: #{$pi-color-primary-25};
--pi-color-primary-50: #{$pi-color-primary-50};
--pi-color-primary-75: #{$pi-color-primary-75};
--pi-color-primary-100: #{$pi-color-primary-100};
--pi-color-primary-200: #{$pi-color-primary-200};
--pi-color-primary-200-rgba: #{$pi-color-primary-200-rgba};
--pi-color-primary-300: #{$pi-color-primary-300};
--pi-color-primary-400: #{$pi-color-primary-400};
--pi-color-primary: #{$pi-color-primary};
--pi-color-primary-900: #{$pi-color-primary-900};
// Accent
--pi-color-accent-10: #{$pi-color-accent-10};
--pi-color-accent-25: #{$pi-color-accent-25};
--pi-color-accent-50: #{$pi-color-accent-50};
--pi-color-accent-75: #{$pi-color-accent-75};
--pi-color-accent-100: #{$pi-color-accent-100};
--pi-color-accent-200: #{$pi-color-accent-200};
--pi-color-accent-200-rgba: #{$pi-color-accent-200-rgba};
--pi-color-accent-300: #{$pi-color-accent-300};
--pi-color-accent-400: #{$pi-color-accent-400};
--pi-color-accent: #{$pi-color-accent};
--pi-color-accent-900: #{$pi-color-accent-900};
// Warn
--pi-color-highlighted-10: #{$pi-color-highlighted-10};
--pi-color-highlighted-25: #{$pi-color-highlighted-25};
--pi-color-highlighted-50: #{$pi-color-highlighted-50};
--pi-color-highlighted-75: #{$pi-color-highlighted-75};
--pi-color-highlighted-100: #{$pi-color-highlighted-100};
--pi-color-highlighted-200: #{$pi-color-highlighted-200};
--pi-color-highlighted-200-rgba: #{$pi-color-highlighted-200-rgba};
--pi-color-highlighted-300: #{$pi-color-highlighted-300};
--pi-color-highlighted-400: #{$pi-color-highlighted-400};
--pi-color-highlighted: #{$pi-color-highlighted};
--pi-color-highlighted-900: #{$pi-color-highlighted-900};
// Warn
--pi-color-warn-10: #{$pi-color-warn-10};
--pi-color-warn-25: #{$pi-color-warn-25};
--pi-color-warn-50: #{$pi-color-warn-50};
--pi-color-warn-75: #{$pi-color-warn-75};
--pi-color-warn-100: #{$pi-color-warn-100};
--pi-color-warn-200: #{$pi-color-warn-200};
--pi-color-warn-200-rgba: #{$pi-color-warn-200-rgba};
--pi-color-warn-300: #{$pi-color-warn-300};
--pi-color-warn-400: #{$pi-color-warn-400};
--pi-color-warn: #{$pi-color-warn};
--pi-color-warn-900: #{$pi-color-warn-900};
// Success
--pi-color-success-10: #{$pi-color-success-10};
--pi-color-success-25: #{$pi-color-success-25};
--pi-color-success-50: #{$pi-color-success-50};
--pi-color-success-75: #{$pi-color-success-75};
--pi-color-success-100: #{$pi-color-success-100};
--pi-color-success-200: #{$pi-color-success-200};
--pi-color-success-300: #{$pi-color-success-300};
--pi-color-success-400: #{$pi-color-success-400};
--pi-color-success: #{$pi-color-success};
--pi-color-success-900: #{$pi-color-success-900};
// White
--pi-color-white: #{$pi-color-white};
--pi-color-white-900: #{$pi-color-white-900};
--pi-color-white-rgba-03: #{$pi-color-white-rgba-03};
--pi-color-white-rgba-05: #{$pi-color-white-rgba-05};
--pi-color-white-rgba-06: #{$pi-color-white-rgba-06};
--pi-color-white-rgba-09: #{$pi-color-white-rgba-09};
// Grey
--pi-color-grey-10: #{$pi-color-grey-10};
--pi-color-grey-25: #{$pi-color-grey-25};
--pi-color-grey-50: #{$pi-color-grey-50};
--pi-color-grey-75: #{$pi-color-grey-75};
--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-300: #{$pi-color-grey-300};
--pi-color-grey-400: #{$pi-color-grey-400};
--pi-color-grey: #{$pi-color-grey};
--pi-color-grey-900: #{$pi-color-grey-900};
// Black
--pi-color-black-200: #{$pi-color-black-200};
--pi-color-black: #{$pi-color-black};
// Background
--pi-color-white: #{$pi-color-white};
--pi-color-background-300: #{$pi-color-background-300};
--pi-color-background-400: #{$pi-color-background-400};
--pi-color-background-400: #{$pi-color-background-400};
}

48
libs/ui/src/lib/styles/common/abstracts/_pi-font-sizes-variables.scss
View File

@@ -1,24 +1,24 @@
// Font sizes variables
$pi-font-size-xxx-large: 2.875rem; // 46px
$pi-font-size-xx-large: 2.375rem; // 38px
$pi-font-size-x-large: 1.6875rem; // 27px
$pi-font-size-large: 1.375rem; // 22px
$pi-font-size-medium: 1.125rem; // 18px
$pi-font-size-small: 0.9375rem; // 15px
$pi-font-size-x-small: 0.75rem; // 12px
$pi-font-size-xx-small: 0.625rem; // 10px
$pi-font-size-xxx-small: 0.5rem; // 8px
// Root variables
:root {
// Font sizes
--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-x-large: #{$pi-font-size-x-large}; // 27x
--pi-font-size-large: #{$pi-font-size-large}; // 22px
--pi-font-size-medium: #{$pi-font-size-medium}; // 18px
--pi-font-size-small: #{$pi-font-size-small}; // 15px
--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-xxx-small: #{$pi-font-size-xxx-small}; // 8px
}
// Font sizes variables
$pi-font-size-xxx-large: 2.875rem; // 46px
$pi-font-size-xx-large: 2.375rem; // 38px
$pi-font-size-x-large: 1.6875rem; // 27px
$pi-font-size-large: 1.375rem; // 22px
$pi-font-size-medium: 1.125rem; // 18px
$pi-font-size-small: 0.9375rem; // 15px
$pi-font-size-x-small: 0.75rem; // 12px
$pi-font-size-xx-small: 0.625rem; // 10px
$pi-font-size-xxx-small: 0.5rem; // 8px
// Root variables
:root {
// Font sizes
--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-x-large: #{$pi-font-size-x-large}; // 27x
--pi-font-size-large: #{$pi-font-size-large}; // 22px
--pi-font-size-medium: #{$pi-font-size-medium}; // 18px
--pi-font-size-small: #{$pi-font-size-small}; // 15px
--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-xxx-small: #{$pi-font-size-xxx-small}; // 8px
}

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

@@ -1,120 +1,120 @@
// Spacings
$pi-spacing-xxxx-large: 3rem; // 48px
$pi-spacing-xxx-large: 2.5rem; // 40px
$pi-spacing-xx-large: 2rem; // 32px
$pi-spacing-x-large: 1.5rem; // 24px
$pi-spacing-large: 1.25rem; // 20px
$pi-spacing-medium: 1rem; // 16px
$pi-spacing-small: 0.75rem; // 12px
$pi-spacing-x-small: 0.625rem; // 10px
$pi-spacing-xx-small: 0.5rem; // 8px
$pi-spacing-xxx-small: 0.25rem; // 4px
$pi-spacing-xxxx-small: 0.125rem; // 2px
$pi-spacing-xxxxx-small: 0.0625rem; // 1px
// Global sizes
$pi-height-layout-header: 4rem; // 64px
$pi-height-header: 5rem; // 80px
$pi-height-header-tablet: 5.25rem; // 84px
$pi-height-header-mobile: 5rem; // 80px
$pi-height-footer: 4.75rem; // 76px
$pi-height-action-bar: 8rem; // 128px
$pi-height-header-aside: 4.75rem; // 76px
$pi-height-footer-aside: 6.75rem; // 108px
$pi-height-button-large: 3rem; // 48px
$pi-size-menu-item-expanded: 3.75rem; // 60px
$pi-size-menu-item-collapsed: 4.75rem; // 76px
$pi-width-container-l: 75%;
$pi-width-container: 62rem; // 992px
$pi-width-container-s: 57.5rem; // 920px
$pi-width-navbar-collapsed: 7.4375rem; // 119px
$pi-width-navbar-expanded: 16rem; // 256px
$pi-width-children-menu-expanded: 17rem; // 272px
$pi-width-aside: 22.125rem; // 354px;
// Cards
$pi-height-card: 22rem; // 352px
$pi-height-card-s: 19.375rem; // 310px
$pi-width-card-xs: 17.125rem; // 274px
$pi-width-card-s: 18.25rem; // 292px
$pi-width-card: 21.5rem; // 344px
// Radius
$pi-border-radius-xx-small: 0.125rem; // 2px
$pi-border-radius-x-small: 0.3125rem; // 5px
$pi-border-radius-small: 0.625rem; // 10px
$pi-border-radius-medium: 1rem; // 16px
$pi-border-radius-large: 1.375rem; // 22px
$pi-border-radius-x-large: 1.375rem; // 22px
// Box shadow
$pi-box-shadow: rgba(#c5c5ce, 0.1) 3px 6px 6px 0px;
$pi-box-shadow-hover: rgba(#c3d5ff, 0.14) 2px 2px 5px 0px;
$pi-box-shadow-double: rgba(197, 197, 206, 0.1) 3px 6px 6px 0px,
-1px 4px 16px 2px rgba(197, 197, 206, 0.05);
$pi-box-shadow-panel-double: 7px 7px 12px 0px rgba(#c5c5ce, 0.12),
-7px 7px 12 0px rgba(#c5c5ce, 0.06);
$pi-box-shadow-top: 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08);
$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;
// Animation
$pi-animation: all 0.25s ease-out;
$pi-animation-fast: all 0.16s ease-out;
$pi-animation-slow: all 0.4s ease-out;
// Root variables
:root {
// Spacings
--pi-spacing-xxxx-large: #{$pi-spacing-xxxx-large}; // 3rem; // 48px
--pi-spacing-xxx-large: #{$pi-spacing-xxx-large}; // 2.5rem; // 40px
--pi-spacing-xx-large: #{$pi-spacing-xx-large}; // 2rem; // 32px
--pi-spacing-x-large: #{$pi-spacing-x-large}; // 1.5rem; // 24px
--pi-spacing-large: #{$pi-spacing-large}; // 1.25rem; // 20px
--pi-spacing-medium: #{$pi-spacing-medium}; // 1rem; // 16px
--pi-spacing-small: #{$pi-spacing-small}; // 0.75rem; // 12px
--pi-spacing-x-small: #{$pi-spacing-x-small}; // 0.625rem; // 10px
--pi-spacing-xx-small: #{$pi-spacing-xx-small}; // 0.5rem; // 8px
--pi-spacing-xxx-small: #{$pi-spacing-xxx-small}; // 0.25rem; // 4px
--pi-spacing-xxxx-small: #{$pi-spacing-xxxx-small}; // 0.125rem; // 2px
--pi-spacing-xxxxx-small: #{$pi-spacing-xxxxx-small}; // 0.0625rem // 1px
// Global Sizes
--pi-height-layout-header: #{$pi-height-layout-header}; // 4rem; // 64px
--pi-height-header: #{$pi-height-header}; // 5rem; // 80px
--pi-height-header-tablet: #{$pi-height-header-tablet}; // 3.75rem;// 60px
--pi-height-header-mobile: #{$pi-height-header-mobile}; // 3.5rem;// 56px
--pi-height-footer: #{$pi-height-footer}; // 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-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-collapsed: #{$pi-size-menu-item-collapsed}; // 4.75rem; // 76px
--pi-width-container-l: #{$pi-width-container-l}; // 71.25rem; // 1140px
--pi-width-container: #{$pi-width-container}; // 62rem; // 992px
--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-expanded: #{$pi-width-navbar-expanded}; // 16rem; // 256px
--pi-width-children-menu-expanded: #{$pi-width-children-menu-expanded}; // 21.25rem // 340px
--pi-width-aside: #{$pi-width-aside}; // 22.125rem; // 354px;
// Cards
--pi-height-card: #{$pi-height-card}; // 22rem; // 352px
--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-s: #{$pi-width-card-xs}; // 18.25rem // 2274px
--pi-width-card: #{$pi-width-card}; // 21.5rem // 344px
// Radius
--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-small: #{$pi-border-radius-small}; // 10px; // 3.125rem
--pi-border-radius-medium: #{$pi-border-radius-medium}; // 0.875rem; // 14px
--pi-border-radius-large: #{$pi-border-radius-large}; // 1.25rem; // 20px
// Box shadow
--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-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),
// -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-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;
// Animation
--pi-animation: #{$pi-animation}; // all 0.25s ease;
--pi-animation-fast: #{$pi-animation-fast}; // all 0.16s ease;
--pi-animation-slow: #{$pi-animation-slow}; // all 0.4s ease;
}
// Spacings
$pi-spacing-xxxx-large: 3rem; // 48px
$pi-spacing-xxx-large: 2.5rem; // 40px
$pi-spacing-xx-large: 2rem; // 32px
$pi-spacing-x-large: 1.5rem; // 24px
$pi-spacing-large: 1.25rem; // 20px
$pi-spacing-medium: 1rem; // 16px
$pi-spacing-small: 0.75rem; // 12px
$pi-spacing-x-small: 0.625rem; // 10px
$pi-spacing-xx-small: 0.5rem; // 8px
$pi-spacing-xxx-small: 0.25rem; // 4px
$pi-spacing-xxxx-small: 0.125rem; // 2px
$pi-spacing-xxxxx-small: 0.0625rem; // 1px
// Global sizes
$pi-height-layout-header: 4rem; // 64px
$pi-height-header: 5rem; // 80px
$pi-height-header-tablet: 5.25rem; // 84px
$pi-height-header-mobile: 5rem; // 80px
$pi-height-footer: 4.75rem; // 76px
$pi-height-action-bar: 8rem; // 128px
$pi-height-header-aside: 4.75rem; // 76px
$pi-height-footer-aside: 6.75rem; // 108px
$pi-height-button-large: 3rem; // 48px
$pi-size-menu-item-expanded: 3.75rem; // 60px
$pi-size-menu-item-collapsed: 4.75rem; // 76px
$pi-width-container-l: 75%;
$pi-width-container: 62rem; // 992px
$pi-width-container-s: 57.5rem; // 920px
$pi-width-navbar-collapsed: 7.4375rem; // 119px
$pi-width-navbar-expanded: 16rem; // 256px
$pi-width-children-menu-expanded: 17rem; // 272px
$pi-width-aside: 22.125rem; // 354px;
// Cards
$pi-height-card: 22rem; // 352px
$pi-height-card-s: 19.375rem; // 310px
$pi-width-card-xs: 17.125rem; // 274px
$pi-width-card-s: 18.25rem; // 292px
$pi-width-card: 21.5rem; // 344px
// Radius
$pi-border-radius-xx-small: 0.125rem; // 2px
$pi-border-radius-x-small: 0.3125rem; // 5px
$pi-border-radius-small: 0.625rem; // 10px
$pi-border-radius-medium: 1rem; // 16px
$pi-border-radius-large: 1.375rem; // 22px
$pi-border-radius-x-large: 1.375rem; // 22px
// Box shadow
$pi-box-shadow: rgba(#c5c5ce, 0.1) 3px 6px 6px 0px;
$pi-box-shadow-hover: rgba(#c3d5ff, 0.14) 2px 2px 5px 0px;
$pi-box-shadow-double: rgba(197, 197, 206, 0.1) 3px 6px 6px 0px,
-1px 4px 16px 2px rgba(197, 197, 206, 0.05);
$pi-box-shadow-panel-double: 7px 7px 12px 0px rgba(#c5c5ce, 0.12),
-7px 7px 12 0px rgba(#c5c5ce, 0.06);
$pi-box-shadow-top: 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08);
$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;
// Animation
$pi-animation: all 0.25s ease-out;
$pi-animation-fast: all 0.16s ease-out;
$pi-animation-slow: all 0.4s ease-out;
// Root variables
:root {
// Spacings
--pi-spacing-xxxx-large: #{$pi-spacing-xxxx-large}; // 3rem; // 48px
--pi-spacing-xxx-large: #{$pi-spacing-xxx-large}; // 2.5rem; // 40px
--pi-spacing-xx-large: #{$pi-spacing-xx-large}; // 2rem; // 32px
--pi-spacing-x-large: #{$pi-spacing-x-large}; // 1.5rem; // 24px
--pi-spacing-large: #{$pi-spacing-large}; // 1.25rem; // 20px
--pi-spacing-medium: #{$pi-spacing-medium}; // 1rem; // 16px
--pi-spacing-small: #{$pi-spacing-small}; // 0.75rem; // 12px
--pi-spacing-x-small: #{$pi-spacing-x-small}; // 0.625rem; // 10px
--pi-spacing-xx-small: #{$pi-spacing-xx-small}; // 0.5rem; // 8px
--pi-spacing-xxx-small: #{$pi-spacing-xxx-small}; // 0.25rem; // 4px
--pi-spacing-xxxx-small: #{$pi-spacing-xxxx-small}; // 0.125rem; // 2px
--pi-spacing-xxxxx-small: #{$pi-spacing-xxxxx-small}; // 0.0625rem // 1px
// Global Sizes
--pi-height-layout-header: #{$pi-height-layout-header}; // 4rem; // 64px
--pi-height-header: #{$pi-height-header}; // 5rem; // 80px
--pi-height-header-tablet: #{$pi-height-header-tablet}; // 3.75rem;// 60px
--pi-height-header-mobile: #{$pi-height-header-mobile}; // 3.5rem;// 56px
--pi-height-footer: #{$pi-height-footer}; // 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-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-collapsed: #{$pi-size-menu-item-collapsed}; // 4.75rem; // 76px
--pi-width-container-l: #{$pi-width-container-l}; // 71.25rem; // 1140px
--pi-width-container: #{$pi-width-container}; // 62rem; // 992px
--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-expanded: #{$pi-width-navbar-expanded}; // 16rem; // 256px
--pi-width-children-menu-expanded: #{$pi-width-children-menu-expanded}; // 21.25rem // 340px
--pi-width-aside: #{$pi-width-aside}; // 22.125rem; // 354px;
// Cards
--pi-height-card: #{$pi-height-card}; // 22rem; // 352px
--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-s: #{$pi-width-card-xs}; // 18.25rem // 2274px
--pi-width-card: #{$pi-width-card}; // 21.5rem // 344px
// Radius
--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-small: #{$pi-border-radius-small}; // 10px; // 3.125rem
--pi-border-radius-medium: #{$pi-border-radius-medium}; // 0.875rem; // 14px
--pi-border-radius-large: #{$pi-border-radius-large}; // 1.25rem; // 20px
// Box shadow
--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-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),
// -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-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;
// Animation
--pi-animation: #{$pi-animation}; // all 0.25s ease;
--pi-animation-fast: #{$pi-animation-fast}; // all 0.16s ease;
--pi-animation-slow: #{$pi-animation-slow}; // all 0.4s ease;
}

480
libs/ui/src/lib/styles/common/abstracts/_pi-gradient-variables.scss
View File

@@ -1,240 +1,240 @@
// Gradients
// Primary
// Primary light
$pi-gradient-primary-light: linear-gradient(
36.98deg,
var(--pi-color-primary-75) 0.75%,
var(--pi-color-primary-25) 99.2%
);
$pi-gradient-primary-light-rgba: linear-gradient(
131deg,
rgba(215, 226, 251, 0.33) 0%,
rgba(240, 244, 255, 0.125) 100%
);
$pi-gradient-primary-light-rgba-hover: linear-gradient(
131deg,
rgba(215, 226, 251, 0.66) 0%,
rgba(240, 244, 255, 0.33) 100%
);
// Primary dark
$pi-gradient-primary-dark: linear-gradient(
36.98deg,
var(--pi-color-primary-900) 0.75%,
var(--pi-color-primary-400) 99.2%
);
$pi-gradient-primary-dark-rgba: linear-gradient(
131deg,
rgba(121, 158, 240, 0.32) 0%,
rgba(0, 0, 0, 0.125) 100%
);
$pi-gradient-primary-dark-rgba-hover: linear-gradient(
131deg,
rgba(121, 158, 240, 0.42) 0%,
rgba(0, 0, 0, 0.25) 100%
);
$pi-gradient-primary-dark-disabled: linear-gradient(
36.98deg,
var(--pi-color-primary-900) 0.75%,
var(--pi-color-primary-400) 99.2%
);
// Accent
// Accent light
$pi-gradient-accent-light: linear-gradient(
36.98deg,
var(--pi-color-accent-75) 0.75%,
var(--pi-color-accent-25) 99.2%
);
$pi-gradient-accent-light-rgba: linear-gradient(
131deg,
rgba(253, 235, 202, 0.61) 0%,
rgba(253, 245, 229, 0.125) 100%
);
$pi-gradient-accent-light-rgba-hover: linear-gradient(
131deg,
rgba(253, 235, 202, 0.81) 0%,
rgba(253, 245, 229, 0.25) 100%
);
// Accent dark
$pi-gradient-accent-dark: linear-gradient(
36.98deg,
var(--pi-color-accent-900) 0.75%,
var(--pi-color-accent-400) 99.2%
);
$pi-gradient-accent-dark-rgba: linear-gradient(
131deg,
rgba(253, 235, 202, 0.61) 0%,
rgba(0, 0, 0, 0.125) 100%
);
$pi-gradient-accent-dark-rgba-hover: linear-gradient(
131deg,
rgba(253, 235, 202, 0.81) 0%,
rgba(0, 0, 0, 0.25) 100%
);
// Highlighted
// Highlighted light
$pi-gradient-highlighted-light: linear-gradient(
36.98deg,
var(--pi-color-highlighted-75) 0.75%,
var(--pi-color-highlighted-25) 99.2%
);
$pi-gradient-highlighted-light-rgba: linear-gradient(
131deg,
rgba(100, 130, 215, 0.24) 0%,
rgba(255, 255, 255, 0.125) 100%
);
$pi-gradient-highlighted-light-rgba-hover: linear-gradient(
131deg,
rgba(100, 130, 215, 0.44) 0%,
rgba(255, 255, 255, 0.25) 100%
);
// Highlighted dark
$pi-gradient-highlighted-dark: linear-gradient(
36.98deg,
var(--pi-color-highlighted-900) 0.89%,
var(--pi-color-highlighted) 99.2%
);
$pi-gradient-highlighted-dark-rgba: linear-gradient(
131deg,
rgba(100, 130, 215, 0.24) 0%,
rgba(0, 0, 0, 0.125) 100%
);
$pi-gradient-highlighted-dark-rgba-hover: linear-gradient(
131deg,
rgba(100, 130, 215, 0.44) 0%,
rgba(0, 0, 0, 0.25) 100%
);
// Grey
// Grey light
$pi-gradient-grey-light: linear-gradient(
36.98deg,
var(--pi-color-grey-75) 0.75%,
var(--pi-color-grey-25) 99.2%
);
$pi-gradient-grey-light-rgba: linear-gradient(
131deg,
rgba(233, 235, 241, 0.25) 0%,
rgba(243, 244, 244, 0.125) 100%
);
$pi-gradient-grey-light-rgba-hover: linear-gradient(
131deg,
rgba(233, 235, 241, 0.5) 0%,
rgba(243, 244, 244, 0.25) 100%
);
// Grey dark
$pi-gradient-grey-dark: linear-gradient(
36.98deg,
var(--pi-color-grey-900) 0.89%,
var(--pi-color-grey) 99.2%
);
$pi-gradient-grey-dark-rgba: linear-gradient(
131deg,
rgba(61, 61, 61, 0.61) 0%,
rgba(0, 0, 0, 0.125) 100%
);
$pi-gradient-grey-dark-rgba-hover: linear-gradient(
131deg,
rgba(61, 61, 61, 0.81) 0%,
rgba(0, 0, 0, 0.25) 100%
);
// White
$pi-gradient-white: linear-gradient(
36.98deg,
var(--pi-color-white-900) 0.89%,
var(--pi-color-white) 99.2%
);
$pi-gradient-white-rgba-disabled: linear-gradient(
131deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.33) 100%
);
$pi-gradient-white-rgba: linear-gradient(
131deg,
rgba(255, 255, 255, 0.33) 0%,
rgba(255, 255, 255, 0.44) 100%
);
$pi-gradient-white-rgba-hover: linear-gradient(
131deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.7) 100%
);
// Disabled
// Light
$pi-gradient-light-disabled: linear-gradient(
36.98deg,
rgba(192, 192, 192, 1) 0.75%,
rgba(242, 242, 242, 1) 99.2%
);
// Dark
$pi-gradient-dark-disabled: linear-gradient(
36.98deg,
rgba(138, 138, 138, 1) 0.89%,
rgba(182, 182, 182, 1) 99.2%
);
:root {
// Gradient
// Primary
// 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-hover: #{$pi-gradient-primary-light-rgba-hover};
// 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-hover: #{$pi-gradient-primary-dark-rgba-hover};
// Accent
// 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-hover: #{$pi-gradient-accent-light-rgba-hover};
// 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-hover: #{$pi-gradient-accent-dark-rgba-hover};
// Highlighted
// 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-hover: #{$pi-gradient-highlighted-light-rgba-hover};
// 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-hover: #{$pi-gradient-highlighted-dark-rgba-hover};
// Grey
// 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-hover: #{$pi-gradient-grey-light-rgba-hover};
// 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-hover: #{$pi-gradient-grey-dark-rgba-hover};
// White
--pi-gradient-white: #{$pi-gradient-white};
--pi-gradient-white-rgba: #{$pi-gradient-white-rgba};
--pi-gradient-white-rgba-hover: #{$pi-gradient-white-rgba-hover};
--pi-gradient-white-rgba-disabled: #{$pi-gradient-white-rgba-disabled};
// Disabled
--pi-gradient-light-disabled: #{$pi-gradient-light-disabled};
--pi-gradient-dark-disabled: #{$pi-gradient-dark-disabled};
}
// Gradients
// Primary
// Primary light
$pi-gradient-primary-light: linear-gradient(
36.98deg,
var(--pi-color-primary-75) 0.75%,
var(--pi-color-primary-25) 99.2%
);
$pi-gradient-primary-light-rgba: linear-gradient(
131deg,
rgba(215, 226, 251, 0.33) 0%,
rgba(240, 244, 255, 0.125) 100%
);
$pi-gradient-primary-light-rgba-hover: linear-gradient(
131deg,
rgba(215, 226, 251, 0.66) 0%,
rgba(240, 244, 255, 0.33) 100%
);
// Primary dark
$pi-gradient-primary-dark: linear-gradient(
36.98deg,
var(--pi-color-primary-900) 0.75%,
var(--pi-color-primary-400) 99.2%
);
$pi-gradient-primary-dark-rgba: linear-gradient(
131deg,
rgba(121, 158, 240, 0.32) 0%,
rgba(0, 0, 0, 0.125) 100%
);
$pi-gradient-primary-dark-rgba-hover: linear-gradient(
131deg,
rgba(121, 158, 240, 0.42) 0%,
rgba(0, 0, 0, 0.25) 100%
);
$pi-gradient-primary-dark-disabled: linear-gradient(
36.98deg,
var(--pi-color-primary-900) 0.75%,
var(--pi-color-primary-400) 99.2%
);
// Accent
// Accent light
$pi-gradient-accent-light: linear-gradient(
36.98deg,
var(--pi-color-accent-75) 0.75%,
var(--pi-color-accent-25) 99.2%
);
$pi-gradient-accent-light-rgba: linear-gradient(
131deg,
rgba(253, 235, 202, 0.61) 0%,
rgba(253, 245, 229, 0.125) 100%
);
$pi-gradient-accent-light-rgba-hover: linear-gradient(
131deg,
rgba(253, 235, 202, 0.81) 0%,
rgba(253, 245, 229, 0.25) 100%
);
// Accent dark
$pi-gradient-accent-dark: linear-gradient(
36.98deg,
var(--pi-color-accent-900) 0.75%,
var(--pi-color-accent-400) 99.2%
);
$pi-gradient-accent-dark-rgba: linear-gradient(
131deg,
rgba(253, 235, 202, 0.61) 0%,
rgba(0, 0, 0, 0.125) 100%
);
$pi-gradient-accent-dark-rgba-hover: linear-gradient(
131deg,
rgba(253, 235, 202, 0.81) 0%,
rgba(0, 0, 0, 0.25) 100%
);
// Highlighted
// Highlighted light
$pi-gradient-highlighted-light: linear-gradient(
36.98deg,
var(--pi-color-highlighted-75) 0.75%,
var(--pi-color-highlighted-25) 99.2%
);
$pi-gradient-highlighted-light-rgba: linear-gradient(
131deg,
rgba(100, 130, 215, 0.24) 0%,
rgba(255, 255, 255, 0.125) 100%
);
$pi-gradient-highlighted-light-rgba-hover: linear-gradient(
131deg,
rgba(100, 130, 215, 0.44) 0%,
rgba(255, 255, 255, 0.25) 100%
);
// Highlighted dark
$pi-gradient-highlighted-dark: linear-gradient(
36.98deg,
var(--pi-color-highlighted-900) 0.89%,
var(--pi-color-highlighted) 99.2%
);
$pi-gradient-highlighted-dark-rgba: linear-gradient(
131deg,
rgba(100, 130, 215, 0.24) 0%,
rgba(0, 0, 0, 0.125) 100%
);
$pi-gradient-highlighted-dark-rgba-hover: linear-gradient(
131deg,
rgba(100, 130, 215, 0.44) 0%,
rgba(0, 0, 0, 0.25) 100%
);
// Grey
// Grey light
$pi-gradient-grey-light: linear-gradient(
36.98deg,
var(--pi-color-grey-75) 0.75%,
var(--pi-color-grey-25) 99.2%
);
$pi-gradient-grey-light-rgba: linear-gradient(
131deg,
rgba(233, 235, 241, 0.25) 0%,
rgba(243, 244, 244, 0.125) 100%
);
$pi-gradient-grey-light-rgba-hover: linear-gradient(
131deg,
rgba(233, 235, 241, 0.5) 0%,
rgba(243, 244, 244, 0.25) 100%
);
// Grey dark
$pi-gradient-grey-dark: linear-gradient(
36.98deg,
var(--pi-color-grey-900) 0.89%,
var(--pi-color-grey) 99.2%
);
$pi-gradient-grey-dark-rgba: linear-gradient(
131deg,
rgba(61, 61, 61, 0.61) 0%,
rgba(0, 0, 0, 0.125) 100%
);
$pi-gradient-grey-dark-rgba-hover: linear-gradient(
131deg,
rgba(61, 61, 61, 0.81) 0%,
rgba(0, 0, 0, 0.25) 100%
);
// White
$pi-gradient-white: linear-gradient(
36.98deg,
var(--pi-color-white-900) 0.89%,
var(--pi-color-white) 99.2%
);
$pi-gradient-white-rgba-disabled: linear-gradient(
131deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.33) 100%
);
$pi-gradient-white-rgba: linear-gradient(
131deg,
rgba(255, 255, 255, 0.33) 0%,
rgba(255, 255, 255, 0.44) 100%
);
$pi-gradient-white-rgba-hover: linear-gradient(
131deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.7) 100%
);
// Disabled
// Light
$pi-gradient-light-disabled: linear-gradient(
36.98deg,
rgba(192, 192, 192, 1) 0.75%,
rgba(242, 242, 242, 1) 99.2%
);
// Dark
$pi-gradient-dark-disabled: linear-gradient(
36.98deg,
rgba(138, 138, 138, 1) 0.89%,
rgba(182, 182, 182, 1) 99.2%
);
:root {
// Gradient
// Primary
// 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-hover: #{$pi-gradient-primary-light-rgba-hover};
// 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-hover: #{$pi-gradient-primary-dark-rgba-hover};
// Accent
// 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-hover: #{$pi-gradient-accent-light-rgba-hover};
// 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-hover: #{$pi-gradient-accent-dark-rgba-hover};
// Highlighted
// 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-hover: #{$pi-gradient-highlighted-light-rgba-hover};
// 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-hover: #{$pi-gradient-highlighted-dark-rgba-hover};
// Grey
// 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-hover: #{$pi-gradient-grey-light-rgba-hover};
// 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-hover: #{$pi-gradient-grey-dark-rgba-hover};
// White
--pi-gradient-white: #{$pi-gradient-white};
--pi-gradient-white-rgba: #{$pi-gradient-white-rgba};
--pi-gradient-white-rgba-hover: #{$pi-gradient-white-rgba-hover};
--pi-gradient-white-rgba-disabled: #{$pi-gradient-white-rgba-disabled};
// Disabled
--pi-gradient-light-disabled: #{$pi-gradient-light-disabled};
--pi-gradient-dark-disabled: #{$pi-gradient-dark-disabled};
}

44
libs/ui/src/lib/styles/common/abstracts/_pi-public-variables.scss
View File

@@ -1,22 +1,22 @@
// Font sizes variables
$pi-public-font-size-xxx-large: 4.25rem; // 68px
$pi-public-font-size-xx-large: 3.875rem; // 62px
// Global sizes
$pi-public-height-header-desktop: 4.5rem; // 72px
$pi-public-height-header-mobile: 4.25rem; // 68px
$pi-public-width-container: 72rem; // 1152px
$pi-public-width-container-l: 90rem; // 1440px
// Root variables
:root {
// Font sizes
--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
// Global sizes
--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-width-container: #{$pi-public-width-container}; // 72rem; // 1152px
--pi-public-width-container-l: #{$pi-public-width-container-l}; // 90rem; // 1440px
}
// Font sizes variables
$pi-public-font-size-xxx-large: 4.25rem; // 68px
$pi-public-font-size-xx-large: 3.875rem; // 62px
// Global sizes
$pi-public-height-header-desktop: 4.5rem; // 72px
$pi-public-height-header-mobile: 4.25rem; // 68px
$pi-public-width-container: 72rem; // 1152px
$pi-public-width-container-l: 90rem; // 1440px
// Root variables
:root {
// Font sizes
--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
// Global sizes
--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-width-container: #{$pi-public-width-container}; // 72rem; // 1152px
--pi-public-width-container-l: #{$pi-public-width-container-l}; // 90rem; // 1440px
}

10
libs/ui/src/lib/styles/common/abstracts/index.scss
View File

@@ -1,5 +1,5 @@
@forward 'pi-color-variables';
@forward 'pi-font-sizes-variables';
@forward 'pi-gradient-variables';
@forward 'pi-public-variables';
@forward 'pi-global-variables';
@forward 'pi-color-variables';
@forward 'pi-font-sizes-variables';
@forward 'pi-gradient-variables';
@forward 'pi-public-variables';
@forward 'pi-global-variables';

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

File diff suppressed because it is too large Load Diff

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

@@ -1,119 +1,119 @@
// Light - 300
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.svg#soehne-leicht')
format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}
// Light italic - 300
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.svg#soehne-leicht-kursiv')
format('svg');
font-weight: 300;
font-style: italic;
font-display: swap;
}
// Regular - 400
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.svg#soehne-buch')
format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
// Regular italic - 400
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv')
format('svg');
font-weight: 400;
font-style: italic;
font-display: swap;
}
// Medium - 600
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.svg#soehne-kraftig')
format('svg');
font-weight: 600;
font-style: normal;
font-display: swap;
}
// Bold - 700
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.svg#soehne-halbfett')
format('svg');
font-weight: 700;
font-style: normal;
font-display: swap;
}
// Black - 800
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.svg#soehne-dreiviertelfett')
format('svg');
font-weight: 800;
font-style: normal;
font-display: swap;
}
// Light - 300
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.svg#soehne-leicht')
format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}
// Light italic - 300
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.svg#soehne-leicht-kursiv')
format('svg');
font-weight: 300;
font-style: italic;
font-display: swap;
}
// Regular - 400
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.svg#soehne-buch')
format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
// Regular italic - 400
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv')
format('svg');
font-weight: 400;
font-style: italic;
font-display: swap;
}
// Medium - 600
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.svg#soehne-kraftig')
format('svg');
font-weight: 600;
font-style: normal;
font-display: swap;
}
// Bold - 700
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2') format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf') format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.svg#soehne-halbfett')
format('svg');
font-weight: 700;
font-style: normal;
font-display: swap;
}
// Black - 800
@font-face {
font-family: 'Soehne';
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot');
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix')
format('embedded-opentype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2')
format('woff2'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff')
format('woff'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.ttf')
format('truetype'),
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.svg#soehne-dreiviertelfett')
format('svg');
font-weight: 800;
font-style: normal;
font-display: swap;
}

4
libs/ui/src/lib/styles/common/base/index.scss
View File

@@ -1,2 +1,2 @@
@forward 'pi-reset';
@forward 'pi-tipography';
@forward 'pi-reset';
@forward 'pi-tipography';

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

@@ -1,116 +1,116 @@
@mixin accordionHeaderDescription($white-space: wrap) {
.pi-layout {
&.pi-layout__02-full-width {
.pi-accordion {
& > .pi-accordion-item {
& > .pi-accordion-item-content {
&.pi-accordion-item-content__header {
& > .pi-text-viewer {
& > article {
& > span {
white-space: $white-space;
}
}
}
}
}
}
}
}
}
.pi-accordion {
& > .pi-accordion-item {
& > .pi-accordion-item-content {
&.pi-accordion-item-content__header {
& > .pi-text-viewer {
overflow: hidden;
& > article {
overflow: hidden;
& > span {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
}
}
.pi-accordion {
.pi-note-content__label {
font: {
size: var(--pi-font-size-x-small);
}
}
// Horizontal
&.pi-accordion__direction--horizontal {
& > * {
& > .pi-accordion-item-content {
&.pi-accordion-item-content__header {
&.is-expanded {
.pi-list-item-content {
&.pi-list-item-content__left {
font: {
weight: 600;
}
}
}
}
&:not(.is-disabled) {
&:hover {
* {
cursor: pointer;
}
}
}
}
}
}
}
// Type
// Default
&:not(.pi-accordion__appearance--outline) {
// Footer
& > .pi-accordion-footer {
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium);
}
}
}
html {
&.is-mobile {
@include accordionHeaderDescription;
.pi-layout {
&.pi-layout__main {
.pi-accordion {
// Default (Vertical)
&:not(.pi-accordion__direction--horizontal) {
// Accordion item
& > .pi-accordion-item {
& > .pi-accordion-item-content__header {
&.has-status {
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--pi-spacing-x-large);
& > aside {
width: 100%;
justify-content: space-between;
& > span {
display: none;
}
}
}
}
}
}
}
}
}
}
&:not(.is-mobile) {
@include accordionHeaderDescription(nowrap);
}
}
@mixin accordionHeaderDescription($white-space: wrap) {
.pi-layout {
&.pi-layout__02-full-width {
.pi-accordion {
& > .pi-accordion-item {
& > .pi-accordion-item-content {
&.pi-accordion-item-content__header {
& > .pi-text-viewer {
& > article {
& > span {
white-space: $white-space;
}
}
}
}
}
}
}
}
}
.pi-accordion {
& > .pi-accordion-item {
& > .pi-accordion-item-content {
&.pi-accordion-item-content__header {
& > .pi-text-viewer {
overflow: hidden;
& > article {
overflow: hidden;
& > span {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
}
}
.pi-accordion {
.pi-note-content__label {
font: {
size: var(--pi-font-size-x-small);
}
}
// Horizontal
&.pi-accordion__direction--horizontal {
& > * {
& > .pi-accordion-item-content {
&.pi-accordion-item-content__header {
&.is-expanded {
.pi-list-item-content {
&.pi-list-item-content__left {
font: {
weight: 600;
}
}
}
}
&:not(.is-disabled) {
&:hover {
* {
cursor: pointer;
}
}
}
}
}
}
}
// Type
// Default
&:not(.pi-accordion__appearance--outline) {
// Footer
& > .pi-accordion-footer {
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium);
}
}
}
html {
&.is-mobile {
@include accordionHeaderDescription;
.pi-layout {
&.pi-layout__main {
.pi-accordion {
// Default (Vertical)
&:not(.pi-accordion__direction--horizontal) {
// Accordion item
& > .pi-accordion-item {
& > .pi-accordion-item-content__header {
&.has-status {
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--pi-spacing-x-large);
& > aside {
width: 100%;
justify-content: space-between;
& > span {
display: none;
}
}
}
}
}
}
}
}
}
}
&:not(.is-mobile) {
@include accordionHeaderDescription(nowrap);
}
}

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

File diff suppressed because it is too large Load Diff

210
libs/ui/src/lib/styles/common/components/_pi-divider.scss
View File

@@ -1,105 +1,105 @@
@mixin dividerIconSize($size) {
.pi-icon {
.mat-icon {
height: var(--pi-spacing-#{$size}) !important;
width: var(--pi-spacing-#{$size}) !important;
}
}
}
@mixin dividerIconColor($icon-color) {
.pi-icon {
&:not(.pi-icon__appearance--fill) {
.mat-icon {
color: var(--pi-color-#{$icon-color});
}
}
&.pi-icon__appearance--fill {
.mat-icon {
color: var(--pi-color-#{$icon-color});
}
&.is-stroked {
border-color: var(--pi-color-#{$icon-color});
}
}
}
}
.pi-divider {
// Icon Color
&.pi-color__primary {
@include dividerIconColor(primary);
}
&.pi-color__accent {
@include dividerIconColor(accent);
}
&.pi-color__warn {
@include dividerIconColor(warn);
}
&.pi-color__success {
@include dividerIconColor(success);
}
&.pi-color__white {
@include dividerIconColor(white);
}
&.pi-color__black {
@include dividerIconColor(black);
}
&.pi-color__grey {
@include dividerIconColor(grey-100);
}
&.pi-color__highlighted {
@include dividerIconColor(highlighted);
}
&.pi-color__black-primary {
@include dividerIconColor(primary);
}
&.pi-color__primary-black {
@include dividerIconColor(black);
}
&.pi-color__black-accent {
@include dividerIconColor(accent);
}
&.pi-color__accent-black {
@include dividerIconColor(black);
}
&.pi-color__dark-black {
@include dividerIconColor(black);
}
&.pi-color__black-dark {
@include dividerIconColor(grey-400);
}
&.pi-color__grey-black {
@include dividerIconColor(black);
}
&.pi-color__black-grey {
@include dividerIconColor(grey-200);
}
&.pi-color__highlighted-grey {
@include dividerIconColor(grey-200);
}
&.pi-color__grey-highlighted {
@include dividerIconColor(highlighted);
}
// Icon size
// X small
&.pi-divider__icon-size--x-small {
@include dividerIconSize(large);
}
// small
&.pi-divider__icon-size--small {
@include dividerIconSize(x-large);
}
// medium
&.pi-divider__icon-size--medium {
@include dividerIconSize(xx-large);
}
// large
&.pi-divider__icon-size--large {
@include dividerIconSize(xxx-large);
}
// X large
&.pi-divider__icon-size--x-large {
@include dividerIconSize(xxxx-large);
}
}
@mixin dividerIconSize($size) {
.pi-icon {
.mat-icon {
height: var(--pi-spacing-#{$size}) !important;
width: var(--pi-spacing-#{$size}) !important;
}
}
}
@mixin dividerIconColor($icon-color) {
.pi-icon {
&:not(.pi-icon__appearance--fill) {
.mat-icon {
color: var(--pi-color-#{$icon-color});
}
}
&.pi-icon__appearance--fill {
.mat-icon {
color: var(--pi-color-#{$icon-color});
}
&.is-stroked {
border-color: var(--pi-color-#{$icon-color});
}
}
}
}
.pi-divider {
// Icon Color
&.pi-color__primary {
@include dividerIconColor(primary);
}
&.pi-color__accent {
@include dividerIconColor(accent);
}
&.pi-color__warn {
@include dividerIconColor(warn);
}
&.pi-color__success {
@include dividerIconColor(success);
}
&.pi-color__white {
@include dividerIconColor(white);
}
&.pi-color__black {
@include dividerIconColor(black);
}
&.pi-color__grey {
@include dividerIconColor(grey-100);
}
&.pi-color__highlighted {
@include dividerIconColor(highlighted);
}
&.pi-color__black-primary {
@include dividerIconColor(primary);
}
&.pi-color__primary-black {
@include dividerIconColor(black);
}
&.pi-color__black-accent {
@include dividerIconColor(accent);
}
&.pi-color__accent-black {
@include dividerIconColor(black);
}
&.pi-color__dark-black {
@include dividerIconColor(black);
}
&.pi-color__black-dark {
@include dividerIconColor(grey-400);
}
&.pi-color__grey-black {
@include dividerIconColor(black);
}
&.pi-color__black-grey {
@include dividerIconColor(grey-200);
}
&.pi-color__highlighted-grey {
@include dividerIconColor(grey-200);
}
&.pi-color__grey-highlighted {
@include dividerIconColor(highlighted);
}
// Icon size
// X small
&.pi-divider__icon-size--x-small {
@include dividerIconSize(large);
}
// small
&.pi-divider__icon-size--small {
@include dividerIconSize(x-large);
}
// medium
&.pi-divider__icon-size--medium {
@include dividerIconSize(xx-large);
}
// large
&.pi-divider__icon-size--large {
@include dividerIconSize(xxx-large);
}
// X large
&.pi-divider__icon-size--x-large {
@include dividerIconSize(xxxx-large);
}
}

142
libs/ui/src/lib/styles/common/components/_pi-headline.scss
View File

@@ -1,71 +1,71 @@
// Column
.pi-headline {
&.pi-headline__flex--column {
flex-direction: column;
&.pi-headline__align--center {
align-items: center;
text-align: center;
aside {
button {
margin: 1.75rem auto 0;
}
}
.pi-headline-content {
& > *:is(h1, h2, h3, h4, h5, p, span, strong, i) {
text-align: center;
}
}
}
}
figure {
width: 100%;
}
}
// Headline Content Directives
.pi-headline-content {
h1 {
font: {
weight: unset;
}
}
&.pi-headline-content__description {
display: block;
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-large);
}
}
}
.pi-headline-content + .pi-headline-content {
margin-top: var(--pi-spacing-x-large);
}
.pi-background-image__animation--infinite {
animation: opacityAnimation 2.5s infinite;
}
.pi-layout {
&.pi-layout__02-full-width {
.pi-background-image__animation--infinite {
min-height: 20rem;
}
}
}
@keyframes opacityAnimation {
0% {
opacity: 1;
}
25% {
opacity: 0.7;
}
50% {
opacity: 0.8;
}
75% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
// Column
.pi-headline {
&.pi-headline__flex--column {
flex-direction: column;
&.pi-headline__align--center {
align-items: center;
text-align: center;
aside {
button {
margin: 1.75rem auto 0;
}
}
.pi-headline-content {
& > *:is(h1, h2, h3, h4, h5, p, span, strong, i) {
text-align: center;
}
}
}
}
figure {
width: 100%;
}
}
// Headline Content Directives
.pi-headline-content {
h1 {
font: {
weight: unset;
}
}
&.pi-headline-content__description {
display: block;
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-large);
}
}
}
.pi-headline-content + .pi-headline-content {
margin-top: var(--pi-spacing-x-large);
}
.pi-background-image__animation--infinite {
animation: opacityAnimation 2.5s infinite;
}
.pi-layout {
&.pi-layout__02-full-width {
.pi-background-image__animation--infinite {
min-height: 20rem;
}
}
}
@keyframes opacityAnimation {
0% {
opacity: 1;
}
25% {
opacity: 0.7;
}
50% {
opacity: 0.8;
}
75% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}

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

@@ -1,177 +1,177 @@
.pi-list-item {
gap: var(--pi-spacing-medium);
// Content
.pi-list-item-content {
flex: 1 1 auto;
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-xxx-small);
&:not(.pi-chip) {
display: block;
width: 100%;
}
}
& > .pi-slider {
&.pi-slider__flex-direction--column-reverse {
margin-top: var(--pi-spacing-x-large);
}
}
}
// Is Disabled
&.is-disabled {
.pi-list-item-content {
&:not(.pi-list-item-icon__right) {
opacity: 0.5;
}
}
}
// Border
&.pi-list-item__border--middle {
.pi-list-item-content__left {
padding-right: var(--pi-spacing-medium);
border-right: 1px solid var(--pi-color-primary-50);
}
}
// Icon
.pi-list-item-icon {
flex: 0 0 auto;
&.pi-list-item-icon__left {
text-align: left;
}
&.pi-list-item-icon__right {
text-align: right;
}
}
}
html {
// Mobile
&.is-mobile {
.pi-list-item {
// Is Responsive
&.is-responsive {
flex-direction: column;
align-items: flex-start;
// Content
.pi-list-item-content {
&.pi-wrapper__flex {
flex-direction: column;
align-items: flex-start;
}
}
// Icon
.pi-list-item-icon {
&.pi-list-item-icon__right {
display: flex;
justify-content: center;
align-items: center;
min-height: 3.375rem;
width: -webkit-fill-available;
text-align: unset;
}
}
}
}
.pi-panel {
.pi-list-item {
// Is Responsive
&.is-responsive {
align-items: center;
// Type Action
&.is-stroked {
border: 1px solid;
border-color: var(--pi-color-grey-75);
border-radius: var(--pi-border-radius-large);
padding: unset;
// Content
.pi-list-item-content {
padding: var(--pi-spacing-large);
}
// Icon
.pi-list-item-icon {
&.pi-list-item-icon__right {
background-color: var(--pi-color-primary-25);
border-top: 1px solid var(--pi-color-primary-50);
border-bottom-left-radius: calc(var(--pi-border-radius-large) - 1px);
border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px);
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
}
}
// Tablet & Desktop
&:not(.is-mobile) {
.pi-panel {
.pi-list-item {
// Responsive
&.is-responsive {
// Icon
.pi-list-item-icon {
&.pi-list-item-icon__right {
& > :not(.pi-icon-button) {
display: flex;
align-items: center;
justify-content: center;
height: 3.4375rem;
width: 3.4375rem;
margin-left: var(--pi-spacing-xxxx-large);
border: 1px solid var(--pi-color-primary-50);
border-radius: var(--pi-border-radius-large);
transition: var(--pi-animation);
&:hover {
cursor: pointer;
background-color: var(--pi-color-primary-25);
}
}
}
}
}
// Max width
// Half
&.pi-list-item__max-width--half {
.pi-list-item-content {
&.pi-list-item-content__left {
max-width: calc(50% - var(--pi-spacing-xxx-large));
}
}
}
// Third
&.pi-list-item__max-width--third {
.pi-list-item-content {
&.pi-list-item-content__left {
max-width: calc(33.3% - var(--pi-spacing-xxx-large));
}
}
}
}
}
// Large device
@media screen and (min-width: 62rem) {
.pi-panel__expansion {
.pi-list-item {
gap: var(--pi-spacing-x-large);
}
}
}
}
.pi-text-viewer {
article {
label,
span {
line-height: 1;
}
}
}
}
.pi-list-item {
gap: var(--pi-spacing-medium);
// Content
.pi-list-item-content {
flex: 1 1 auto;
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-xxx-small);
&:not(.pi-chip) {
display: block;
width: 100%;
}
}
& > .pi-slider {
&.pi-slider__flex-direction--column-reverse {
margin-top: var(--pi-spacing-x-large);
}
}
}
// Is Disabled
&.is-disabled {
.pi-list-item-content {
&:not(.pi-list-item-icon__right) {
opacity: 0.5;
}
}
}
// Border
&.pi-list-item__border--middle {
.pi-list-item-content__left {
padding-right: var(--pi-spacing-medium);
border-right: 1px solid var(--pi-color-primary-50);
}
}
// Icon
.pi-list-item-icon {
flex: 0 0 auto;
&.pi-list-item-icon__left {
text-align: left;
}
&.pi-list-item-icon__right {
text-align: right;
}
}
}
html {
// Mobile
&.is-mobile {
.pi-list-item {
// Is Responsive
&.is-responsive {
flex-direction: column;
align-items: flex-start;
// Content
.pi-list-item-content {
&.pi-wrapper__flex {
flex-direction: column;
align-items: flex-start;
}
}
// Icon
.pi-list-item-icon {
&.pi-list-item-icon__right {
display: flex;
justify-content: center;
align-items: center;
min-height: 3.375rem;
width: -webkit-fill-available;
text-align: unset;
}
}
}
}
.pi-panel {
.pi-list-item {
// Is Responsive
&.is-responsive {
align-items: center;
// Type Action
&.is-stroked {
border: 1px solid;
border-color: var(--pi-color-grey-75);
border-radius: var(--pi-border-radius-large);
padding: unset;
// Content
.pi-list-item-content {
padding: var(--pi-spacing-large);
}
// Icon
.pi-list-item-icon {
&.pi-list-item-icon__right {
background-color: var(--pi-color-primary-25);
border-top: 1px solid var(--pi-color-primary-50);
border-bottom-left-radius: calc(var(--pi-border-radius-large) - 1px);
border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px);
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
}
}
// Tablet & Desktop
&:not(.is-mobile) {
.pi-panel {
.pi-list-item {
// Responsive
&.is-responsive {
// Icon
.pi-list-item-icon {
&.pi-list-item-icon__right {
& > :not(.pi-icon-button) {
display: flex;
align-items: center;
justify-content: center;
height: 3.4375rem;
width: 3.4375rem;
margin-left: var(--pi-spacing-xxxx-large);
border: 1px solid var(--pi-color-primary-50);
border-radius: var(--pi-border-radius-large);
transition: var(--pi-animation);
&:hover {
cursor: pointer;
background-color: var(--pi-color-primary-25);
}
}
}
}
}
// Max width
// Half
&.pi-list-item__max-width--half {
.pi-list-item-content {
&.pi-list-item-content__left {
max-width: calc(50% - var(--pi-spacing-xxx-large));
}
}
}
// Third
&.pi-list-item__max-width--third {
.pi-list-item-content {
&.pi-list-item-content__left {
max-width: calc(33.3% - var(--pi-spacing-xxx-large));
}
}
}
}
}
// Large device
@media screen and (min-width: 62rem) {
.pi-panel__expansion {
.pi-list-item {
gap: var(--pi-spacing-x-large);
}
}
}
}
.pi-text-viewer {
article {
label,
span {
line-height: 1;
}
}
}
}

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

@@ -1,116 +1,116 @@
@mixin fixedBottomNote(
$left: 0,
$bottom: calc(var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)),
$width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)),
$min-width: auto
) {
.pi-shell {
&.pi-shell__deale-saas {
& > div {
&.has-bottom-sticky-note {
& > section {
& > main {
& > footer {
position: fixed;
left: $left;
bottom: $bottom;
z-index: 9999;
width: 100%;
display: flex;
justify-content: center;
.pi-note {
&.is-sticky {
&.pi-note__position--bottom {
width: $width;
min-width: $min-width;
}
}
}
}
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include fixedBottomNote;
.pi-note-content__action {
button {
&.pi-button__icon--single {
height: 1.75rem;
width: 1.75rem;
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle) {
height: var(--pi-spacing-xx-large);
padding-top: unset;
padding-bottom: unset;
}
}
}
// Note in panel
.pi-panel {
&.pi-panel__expansion--type-form {
.pi-note {
&.pi-note__status--error {
justify-content: center;
}
.mat-icon {
height: var(--pi-spacing-xx-large);
width: 3.2rem;
}
}
}
}
}
// Tablet
&.is-tablet {
&.is-tablet__small {
@include fixedBottomNote(
0,
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))
);
}
&.is-tablet__large {
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto);
}
}
// Tablet & Desktop
&:not(.is-mobile) {
.pi-note-content__action {
button {
&.pi-button__icon--single {
height: var(--pi-spacing-xx-large);
width: var(--pi-spacing-xx-large);
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: unset;
padding-left: var(--pi-spacing-small);
padding-right: var(--pi-spacing-small);
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle) {
height: var(--pi-spacing-xx-large);
}
}
}
}
&.is-desktop {
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto, 25%);
}
}
@mixin fixedBottomNote(
$left: 0,
$bottom: calc(var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)),
$width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)),
$min-width: auto
) {
.pi-shell {
&.pi-shell__deale-saas {
& > div {
&.has-bottom-sticky-note {
& > section {
& > main {
& > footer {
position: fixed;
left: $left;
bottom: $bottom;
z-index: 9999;
width: 100%;
display: flex;
justify-content: center;
.pi-note {
&.is-sticky {
&.pi-note__position--bottom {
width: $width;
min-width: $min-width;
}
}
}
}
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include fixedBottomNote;
.pi-note-content__action {
button {
&.pi-button__icon--single {
height: 1.75rem;
width: 1.75rem;
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle) {
height: var(--pi-spacing-xx-large);
padding-top: unset;
padding-bottom: unset;
}
}
}
// Note in panel
.pi-panel {
&.pi-panel__expansion--type-form {
.pi-note {
&.pi-note__status--error {
justify-content: center;
}
.mat-icon {
height: var(--pi-spacing-xx-large);
width: 3.2rem;
}
}
}
}
}
// Tablet
&.is-tablet {
&.is-tablet__small {
@include fixedBottomNote(
0,
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))
);
}
&.is-tablet__large {
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto);
}
}
// Tablet & Desktop
&:not(.is-mobile) {
.pi-note-content__action {
button {
&.pi-button__icon--single {
height: var(--pi-spacing-xx-large);
width: var(--pi-spacing-xx-large);
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: unset;
padding-left: var(--pi-spacing-small);
padding-right: var(--pi-spacing-small);
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
.pi-button__xx-small
):not(.pi-button__x-large):not(.pi-button__toggle) {
height: var(--pi-spacing-xx-large);
}
}
}
}
&.is-desktop {
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto, 25%);
}
}

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

@@ -1,465 +1,465 @@
@mixin panelInnerPadding($padding: unset) {
&.pi-panel__inner-padding {
padding: unset;
&.pi-panel__flex-direction--row {
& > section {
& > * {
padding-top: var(--pi-spacing-#{$padding});
padding-bottom: var(--pi-spacing-#{$padding});
padding-left: var(--pi-spacing-#{$padding});
padding-right: var(--pi-spacing-#{$padding});
&:first-child {
border-radius: var(--pi-border-radius-large) 0 0 var(--pi-border-radius-large);
}
&:last-child {
border-radius: 0 var(--pi-border-radius-large) var(--pi-border-radius-large) 0;
}
}
}
}
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-left: var(--pi-spacing-#{$padding});
padding-right: var(--pi-spacing-#{$padding});
&:first-child {
padding-top: var(--pi-spacing-#{$padding});
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
}
&:last-child {
padding-bottom: var(--pi-spacing-#{$padding});
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
}
}
}
}
}
}
@mixin panelContentInnerPadding($padding) {
& > *:nth-child(n + 1) {
padding: var(--pi-spacing-#{$padding});
}
}
@mixin panelContentColor($color) {
// Mode light
&.pi-color__mode--light {
// Light Opaque
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
// Solid light color
background-color: var(--pi-color-#{$color}-25);
}
}
// Mode dark
&.pi-color__mode--dark {
// Dark Opaque
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
background-color: var(--pi-color-#{$color});
// Solid Dark Color & Is Stroked
&.is-stroked {
border-color: var(--pi-color-#{$color}-900);
}
}
}
// Density
// 10
&.pi-color__density--10 {
// Solid light color 10
background-color: var(--pi-color-#{$color}-10);
}
// 50
&.pi-color__density--50 {
// Solid light color 50
background-color: var(--pi-color-#{$color}-50);
}
// 75
&.pi-color__density--75 {
// Solid light color 75
background-color: var(--pi-color-#{$color}-75);
}
// 100
&.pi-color__density--100 {
// Solid light color 100
background-color: var(--pi-color-#{$color}-100);
}
// 200
&.pi-color__density--200 {
// Solid light color 200
background-color: var(--pi-color-#{$color}-200);
}
// 300
&.pi-color__density--300 {
// Solid light color 300
background-color: var(--pi-color-#{$color}-300);
}
// 400
&.pi-color__density--400 {
// Solid light color 400
background-color: var(--pi-color-#{$color}-400);
}
// 900
&.pi-color__density--900 {
// Solid light color 900
background-color: var(--pi-color-#{$color}-900);
}
}
// Panel
.pi-panel {
& > section {
& > *:not(.pi-button):not(.pi-panel-content):not(.pi-chip) {
&:nth-child(n + 2) {
width: 100%;
& > .pi-text-viewer__flex-direction--row + .pi-text-viewer__flex-direction--row {
margin-top: var(--pi-spacing-xx-small);
}
}
}
.pi-panel-content__left,
.pi-panel-content__right {
flex: 1 1 auto;
height: 100%;
}
}
&.is-disabled {
& > *:nth-child(n + 1) {
opacity: 0.33;
.pi-icon__animation--clickable {
&:hover {
cursor: unset;
.mat-icon {
transform: unset;
}
}
}
}
}
// Glass
&[class*='pi-color__opacity'] {
-webkit-backdrop-filter: blur(0.75rem);
backdrop-filter: blur(0.75rem);
}
// Expansion
&.pi-panel__expansion {
.pi-panel-content {
&.pi-panel-content__top {
margin-top: -0.2rem;
}
// Center
&.pi-panel-content__center,
&.pi-panel-content__expandable {
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-x-large);
}
.pi-note + .pi-note {
margin-top: var(--pi-spacing-medium);
}
}
}
}
// NOT Expansion
&:not(.pi-panel__expansion) {
// Panel flex direction column
&.pi-panel__flex-direction--column {
& > section {
& > header {
width: -webkit-fill-available;
}
}
// Panel space between
&.pi-panel__justify--space-between {
& > section {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pi-panel-content {
// Center
&.pi-panel-content__center {
display: flex;
& > *:nth-child(n + 1) {
margin-top: unset;
}
}
}
}
}
}
// Inner padding
// XS
&.pi-panel__inner-padding--xxs {
@include panelInnerPadding(xx-small);
}
// XS
&.pi-panel__inner-padding--xs {
@include panelInnerPadding(x-small);
}
// S
&.pi-panel__inner-padding--s {
@include panelInnerPadding(small);
}
// M
&.pi-panel__inner-padding--m {
@include panelInnerPadding(medium);
}
// L
&.pi-panel__inner-padding--l {
@include panelInnerPadding(large);
}
// XL
&.pi-panel__inner-padding--xl {
@include panelInnerPadding(x-large);
}
// XXL
&.pi-panel__inner-padding--xxl {
@include panelInnerPadding(xx-large);
}
// XXXL
&.pi-panel__inner-padding--xxxl {
@include panelInnerPadding(xxx-large);
}
// XXXXL
&.pi-panel__inner-padding--xxxxl {
@include panelInnerPadding(xxxx-large);
}
}
// Content
.pi-panel-content {
display: block;
width: -webkit-fill-available;
& > .pi-wrapper {
width: -webkit-fill-available;
}
// Top
&.pi-panel-content__top {
.pi-list-item {
.pi-list-item-icon__left {
.pi-chip {
&:not(.pi-chip__single-icon) {
width: var(--pi-spacing-xxxx-large);
min-width: unset;
max-width: unset;
padding: unset;
}
}
}
}
}
// Content Color
// Primary
&.pi-color__primary {
@include panelContentColor(primary);
}
// Accent
&.pi-color__accent {
@include panelContentColor(accent);
}
// Highlighted
&.pi-color__highlighted {
@include panelContentColor(highlighted);
}
// Grey
&.pi-color__grey {
@include panelContentColor(grey);
}
// Content Padding
&.pi-panel-content__inner-padding--xxxs {
@include panelContentInnerPadding(xxx-small);
}
&.pi-panel-content__inner-padding--xxs {
@include panelContentInnerPadding(xx-small);
}
&.pi-panel-content__inner-padding--xs {
@include panelContentInnerPadding(x-small);
}
&.pi-panel-content__inner-padding--s {
@include panelContentInnerPadding(small);
}
&.pi-panel-content__inner-padding--m {
@include panelContentInnerPadding(medium);
}
&.pi-panel-content__inner-padding--l {
@include panelContentInnerPadding(large);
}
&.pi-panel-content__inner-padding--xl {
@include panelContentInnerPadding(x-large);
}
&.pi-panel-content__inner-padding--xxl {
@include panelContentInnerPadding(xx-large);
}
&.pi-panel-content__inner-padding--xxxl {
@include panelContentInnerPadding(xxxl-large);
}
&.pi-panel-content__inner-padding--xxxxl {
@include panelContentInnerPadding(xxxx-large);
}
}
.pi-layout__05-splitted {
// Not paywall
&:not(.pi-05a-splitted-paywall-layout) {
.pi-panel {
&.pi-panel__is-clickable {
&.is-active,
&:hover {
outline: 1px solid var(--pi-color-primary);
}
}
// Padding
&.has-padding {
padding: var(--pi-spacing-x-large);
}
}
}
// Grid
// Half
&.pi-panel__grid--half {
.pi-panel-content {
width: 50%;
}
}
// Quarter
&.pi-panel__grid--quarter {
.pi-panel-content__left {
width: 25%;
}
.pi-panel-content__right {
width: 75%;
}
}
// Quarter reverse
&.pi-panel__grid--quarter-reverse {
.pi-panel-content__left {
width: 75%;
}
.pi-panel-content__right {
width: 25%;
}
}
}
.pi-layout__main {
.pi-panel {
&:not(.is-disabled) {
box-shadow: var(--pi-box-shadow-panel);
}
&.is-disabled {
box-shadow: var(--pi-box-shadow-panel-disabled);
}
.pi-panel {
box-shadow: unset;
}
}
}
html {
// Mobile
&.is-mobile {
// Panel
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__expandable {
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: 100%;
}
}
}
.pi-saas-panel-subtitle {
.pi-panel-subtitle-content {
width: 100%;
}
}
}
}
// Small device
@media screen and (max-width: 62rem) {
// Panel
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__center,
.pi-panel-content__expandable {
margin-top: var(--pi-spacing-medium);
}
.pi-panel-content__top {
.pi-list-item {
flex-direction: column;
align-items: flex-start;
gap: var(--pi-spacing-xx-small);
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Panel
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__expandable {
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: 9.25rem;
}
}
}
}
// Large device
@media screen and (min-width: 62rem) {
// Panel
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__center,
.pi-panel-content__expandable {
margin-top: var(--pi-spacing-xx-large);
}
// Data grid in expansion panels
.pi-data-grid {
&.pi-data-grid__data-direction--column {
padding-left: var(--pi-spacing-xx-small);
padding-right: var(--pi-spacing-xx-small);
}
}
}
.pi-panel-content {
// Top
&.pi-panel-content__top {
.pi-list-item {
.pi-list-item-icon__left {
padding-right: var(--pi-spacing-medium);
border-right: 1px solid var(--pi-color-primary-50);
}
}
}
// Expandable
&.pi-panel-content__expandable {
.pi-list-item {
&.pi-list-item__indent {
padding-left: calc(5rem + 1px);
}
}
}
}
}
}
}
}
@mixin panelInnerPadding($padding: unset) {
&.pi-panel__inner-padding {
padding: unset;
&.pi-panel__flex-direction--row {
& > section {
& > * {
padding-top: var(--pi-spacing-#{$padding});
padding-bottom: var(--pi-spacing-#{$padding});
padding-left: var(--pi-spacing-#{$padding});
padding-right: var(--pi-spacing-#{$padding});
&:first-child {
border-radius: var(--pi-border-radius-large) 0 0 var(--pi-border-radius-large);
}
&:last-child {
border-radius: 0 var(--pi-border-radius-large) var(--pi-border-radius-large) 0;
}
}
}
}
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-left: var(--pi-spacing-#{$padding});
padding-right: var(--pi-spacing-#{$padding});
&:first-child {
padding-top: var(--pi-spacing-#{$padding});
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
}
&:last-child {
padding-bottom: var(--pi-spacing-#{$padding});
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
}
}
}
}
}
}
@mixin panelContentInnerPadding($padding) {
& > *:nth-child(n + 1) {
padding: var(--pi-spacing-#{$padding});
}
}
@mixin panelContentColor($color) {
// Mode light
&.pi-color__mode--light {
// Light Opaque
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
// Solid light color
background-color: var(--pi-color-#{$color}-25);
}
}
// Mode dark
&.pi-color__mode--dark {
// Dark Opaque
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
background-color: var(--pi-color-#{$color});
// Solid Dark Color & Is Stroked
&.is-stroked {
border-color: var(--pi-color-#{$color}-900);
}
}
}
// Density
// 10
&.pi-color__density--10 {
// Solid light color 10
background-color: var(--pi-color-#{$color}-10);
}
// 50
&.pi-color__density--50 {
// Solid light color 50
background-color: var(--pi-color-#{$color}-50);
}
// 75
&.pi-color__density--75 {
// Solid light color 75
background-color: var(--pi-color-#{$color}-75);
}
// 100
&.pi-color__density--100 {
// Solid light color 100
background-color: var(--pi-color-#{$color}-100);
}
// 200
&.pi-color__density--200 {
// Solid light color 200
background-color: var(--pi-color-#{$color}-200);
}
// 300
&.pi-color__density--300 {
// Solid light color 300
background-color: var(--pi-color-#{$color}-300);
}
// 400
&.pi-color__density--400 {
// Solid light color 400
background-color: var(--pi-color-#{$color}-400);
}
// 900
&.pi-color__density--900 {
// Solid light color 900
background-color: var(--pi-color-#{$color}-900);
}
}
// Panel
.pi-panel {
& > section {
& > *:not(.pi-button):not(.pi-panel-content):not(.pi-chip) {
&:nth-child(n + 2) {
width: 100%;
& > .pi-text-viewer__flex-direction--row + .pi-text-viewer__flex-direction--row {
margin-top: var(--pi-spacing-xx-small);
}
}
}
.pi-panel-content__left,
.pi-panel-content__right {
flex: 1 1 auto;
height: 100%;
}
}
&.is-disabled {
& > *:nth-child(n + 1) {
opacity: 0.33;
.pi-icon__animation--clickable {
&:hover {
cursor: unset;
.mat-icon {
transform: unset;
}
}
}
}
}
// Glass
&[class*='pi-color__opacity'] {
-webkit-backdrop-filter: blur(0.75rem);
backdrop-filter: blur(0.75rem);
}
// Expansion
&.pi-panel__expansion {
.pi-panel-content {
&.pi-panel-content__top {
margin-top: -0.2rem;
}
// Center
&.pi-panel-content__center,
&.pi-panel-content__expandable {
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-x-large);
}
.pi-note + .pi-note {
margin-top: var(--pi-spacing-medium);
}
}
}
}
// NOT Expansion
&:not(.pi-panel__expansion) {
// Panel flex direction column
&.pi-panel__flex-direction--column {
& > section {
& > header {
width: -webkit-fill-available;
}
}
// Panel space between
&.pi-panel__justify--space-between {
& > section {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pi-panel-content {
// Center
&.pi-panel-content__center {
display: flex;
& > *:nth-child(n + 1) {
margin-top: unset;
}
}
}
}
}
}
// Inner padding
// XS
&.pi-panel__inner-padding--xxs {
@include panelInnerPadding(xx-small);
}
// XS
&.pi-panel__inner-padding--xs {
@include panelInnerPadding(x-small);
}
// S
&.pi-panel__inner-padding--s {
@include panelInnerPadding(small);
}
// M
&.pi-panel__inner-padding--m {
@include panelInnerPadding(medium);
}
// L
&.pi-panel__inner-padding--l {
@include panelInnerPadding(large);
}
// XL
&.pi-panel__inner-padding--xl {
@include panelInnerPadding(x-large);
}
// XXL
&.pi-panel__inner-padding--xxl {
@include panelInnerPadding(xx-large);
}
// XXXL
&.pi-panel__inner-padding--xxxl {
@include panelInnerPadding(xxx-large);
}
// XXXXL
&.pi-panel__inner-padding--xxxxl {
@include panelInnerPadding(xxxx-large);
}
}
// Content
.pi-panel-content {
display: block;
width: -webkit-fill-available;
& > .pi-wrapper {
width: -webkit-fill-available;
}
// Top
&.pi-panel-content__top {
.pi-list-item {
.pi-list-item-icon__left {
.pi-chip {
&:not(.pi-chip__single-icon) {
width: var(--pi-spacing-xxxx-large);
min-width: unset;
max-width: unset;
padding: unset;
}
}
}
}
}
// Content Color
// Primary
&.pi-color__primary {
@include panelContentColor(primary);
}
// Accent
&.pi-color__accent {
@include panelContentColor(accent);
}
// Highlighted
&.pi-color__highlighted {
@include panelContentColor(highlighted);
}
// Grey
&.pi-color__grey {
@include panelContentColor(grey);
}
// Content Padding
&.pi-panel-content__inner-padding--xxxs {
@include panelContentInnerPadding(xxx-small);
}
&.pi-panel-content__inner-padding--xxs {
@include panelContentInnerPadding(xx-small);
}
&.pi-panel-content__inner-padding--xs {
@include panelContentInnerPadding(x-small);
}
&.pi-panel-content__inner-padding--s {
@include panelContentInnerPadding(small);
}
&.pi-panel-content__inner-padding--m {
@include panelContentInnerPadding(medium);
}
&.pi-panel-content__inner-padding--l {
@include panelContentInnerPadding(large);
}
&.pi-panel-content__inner-padding--xl {
@include panelContentInnerPadding(x-large);
}
&.pi-panel-content__inner-padding--xxl {
@include panelContentInnerPadding(xx-large);
}
&.pi-panel-content__inner-padding--xxxl {
@include panelContentInnerPadding(xxxl-large);
}
&.pi-panel-content__inner-padding--xxxxl {
@include panelContentInnerPadding(xxxx-large);
}
}
.pi-layout__05-splitted {
// Not paywall
&:not(.pi-05a-splitted-paywall-layout) {
.pi-panel {
&.pi-panel__is-clickable {
&.is-active,
&:hover {
outline: 1px solid var(--pi-color-primary);
}
}
// Padding
&.has-padding {
padding: var(--pi-spacing-x-large);
}
}
}
// Grid
// Half
&.pi-panel__grid--half {
.pi-panel-content {
width: 50%;
}
}
// Quarter
&.pi-panel__grid--quarter {
.pi-panel-content__left {
width: 25%;
}
.pi-panel-content__right {
width: 75%;
}
}
// Quarter reverse
&.pi-panel__grid--quarter-reverse {
.pi-panel-content__left {
width: 75%;
}
.pi-panel-content__right {
width: 25%;
}
}
}
.pi-layout__main {
.pi-panel {
&:not(.is-disabled) {
box-shadow: var(--pi-box-shadow-panel);
}
&.is-disabled {
box-shadow: var(--pi-box-shadow-panel-disabled);
}
.pi-panel {
box-shadow: unset;
}
}
}
html {
// Mobile
&.is-mobile {
// Panel
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__expandable {
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: 100%;
}
}
}
.pi-saas-panel-subtitle {
.pi-panel-subtitle-content {
width: 100%;
}
}
}
}
// Small device
@media screen and (max-width: 62rem) {
// Panel
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__center,
.pi-panel-content__expandable {
margin-top: var(--pi-spacing-medium);
}
.pi-panel-content__top {
.pi-list-item {
flex-direction: column;
align-items: flex-start;
gap: var(--pi-spacing-xx-small);
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Panel
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__expandable {
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: 9.25rem;
}
}
}
}
// Large device
@media screen and (min-width: 62rem) {
// Panel
.pi-panel {
&.pi-panel__expansion {
.pi-panel-content__center,
.pi-panel-content__expandable {
margin-top: var(--pi-spacing-xx-large);
}
// Data grid in expansion panels
.pi-data-grid {
&.pi-data-grid__data-direction--column {
padding-left: var(--pi-spacing-xx-small);
padding-right: var(--pi-spacing-xx-small);
}
}
}
.pi-panel-content {
// Top
&.pi-panel-content__top {
.pi-list-item {
.pi-list-item-icon__left {
padding-right: var(--pi-spacing-medium);
border-right: 1px solid var(--pi-color-primary-50);
}
}
}
// Expandable
&.pi-panel-content__expandable {
.pi-list-item {
&.pi-list-item__indent {
padding-left: calc(5rem + 1px);
}
}
}
}
}
}
}
}

44
libs/ui/src/lib/styles/common/components/_pi-spinner.scss
View File

@@ -1,22 +1,22 @@
.pi-spinner {
// Type
// Loader
&.pi-spinner__loader {
display: flex !important;
justify-content: center;
align-items: center;
flex-direction: column;
gap: var(--pi-spacing-large);
margin-top: unset !important;
&.pi-spinner__loader--fullscreen {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
height: 100vh;
width: 100%;
background-color: var(--pi-color-primary-200-rgba);
}
}
}
.pi-spinner {
// Type
// Loader
&.pi-spinner__loader {
display: flex !important;
justify-content: center;
align-items: center;
flex-direction: column;
gap: var(--pi-spacing-large);
margin-top: unset !important;
&.pi-spinner__loader--fullscreen {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
height: 100vh;
width: 100%;
background-color: var(--pi-color-primary-200-rgba);
}
}
}

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

@@ -1,35 +1,35 @@
// Text group
// colors
$color1: #799ef0;
$color2: #99b3ec;
$color3: #afc1ea;
$color4: #b9c8e9;
$color5: #dbdfe7;
$colors: $color1, $color2, $color3, $color4, $color5;
.pi-text-group {
&.pi-text-group__value-indicator {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
@for $i from 1 through length($colors) {
.pi-text-viewer {
display: flex;
gap: var(--pi-spacing-xx-small);
&:nth-child(#{length($colors)}n + #{$i}) {
&::before {
content: '';
margin-bottom: var(--pi-spacing-xxxx-small);
width: var(--pi-spacing-small);
height: var(--pi-spacing-small);
background-color: nth($colors, $i);
border-radius: 50%;
}
}
}
}
.pi-text-viewer + .pi-text-viewer {
margin-top: var(--pi-spacing-small);
}
}
}
// Text group
// colors
$color1: #799ef0;
$color2: #99b3ec;
$color3: #afc1ea;
$color4: #b9c8e9;
$color5: #dbdfe7;
$colors: $color1, $color2, $color3, $color4, $color5;
.pi-text-group {
&.pi-text-group__value-indicator {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
@for $i from 1 through length($colors) {
.pi-text-viewer {
display: flex;
gap: var(--pi-spacing-xx-small);
&:nth-child(#{length($colors)}n + #{$i}) {
&::before {
content: '';
margin-bottom: var(--pi-spacing-xxxx-small);
width: var(--pi-spacing-small);
height: var(--pi-spacing-small);
background-color: nth($colors, $i);
border-radius: 50%;
}
}
}
}
.pi-text-viewer + .pi-text-viewer {
margin-top: var(--pi-spacing-small);
}
}
}

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

File diff suppressed because it is too large Load Diff

30
libs/ui/src/lib/styles/common/components/index.scss
View File

@@ -1,15 +1,15 @@
@forward 'pi-accordion';
@forward 'pi-card';
@forward 'pi-divider';
@forward 'pi-headline';
@forward 'pi-list-item';
@forward 'pi-note';
@forward 'pi-panel';
@forward 'pi-spinner';
@forward 'pi-tab';
@forward 'pi-text-viewer';
@forward 'pi-text';
@use 'pi-button';
@use 'pi-data-grid';
@use 'pi-field';
@forward 'pi-accordion';
@forward 'pi-card';
@forward 'pi-divider';
@forward 'pi-headline';
@forward 'pi-list-item';
@forward 'pi-note';
@forward 'pi-panel';
@forward 'pi-spinner';
@forward 'pi-tab';
@forward 'pi-text-viewer';
@forward 'pi-text';
@use 'pi-button';
@use 'pi-data-grid';
@use 'pi-field';

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

@@ -1,284 +1,284 @@
@mixin privateButtonsSizes {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not(
.pi-button__toggle
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single) {
&:not(.pi-button__x-small):not(.pi-button__xx-small) {
height: var(--pi-spacing-xxx-large);
}
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(.pi-button__trimmed):not(
.ch2-btn
):not(.pi-button__icon--single) {
&.pi-button__x-small {
height: var(--pi-spacing-xx-large);
}
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
// Sizes
// X small
&.pi-button {
&:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
.pi-button__trimmed
) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
}
}
}
// Fill
@mixin privateButtonFillColor($color) {
// Default color
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) {
background-color: var(--pi-color-#{$color});
color: var(--pi-color-white);
&:disabled {
background-color: var(--pi-color-#{$color}-200);
}
&:hover {
&:enabled {
background-color: var(--pi-color-#{$color}-900);
}
}
}
// Default color & White
&.pi-button__white {
color: var(--pi-color-#{$color});
&:hover {
&:enabled {
background-color: var(--pi-color-#{$color});
}
}
}
}
// Ghost
@mixin privateButtonGhostColor($color) {
color: var(--pi-color-#{$color});
&:hover {
&:enabled {
color: var(--pi-color-#{$color}-900);
}
}
&:disabled {
color: var(--pi-color-#{$color}-200);
}
}
// Outline
@mixin privateButtonOutlineColor($color) {
background-color: transparent;
box-sizing: border-box;
transition: all 0.16s ease-in;
border: 1px solid;
color: var(--pi-color-#{$color});
&:hover {
&:enabled {
color: var(--pi-color-white);
border-color: var(--pi-color-#{$color});
background-color: var(--pi-color-#{$color});
}
}
&:disabled {
color: var(--pi-color-#{$color}-200);
}
// Is Active
&.is-active {
color: var(--pi-color-white);
border-color: var(--pi-color-#{$color});
background-color: var(--pi-color-#{$color});
}
}
@mixin privateButtonsColors {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
// Color
// White
&.pi-color__white {
background-color: var(--pi-color-white);
&:disabled {
background-color: rgba($color: white, $alpha: 0.6);
}
&:hover {
color: var(--pi-color-white);
background-color: transparent;
border: 2px solid var(--pi-color-white);
&:enabled {
background-color: transparent;
}
}
// White default
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__highlighted
):not(.pi-color__white) {
&:not(:hover) {
color: var(--pi-color-primary);
}
}
}
// Fill
// Primary
&.pi-color__primary {
@include privateButtonFillColor(primary);
}
// Accent
&.pi-color__accent {
@include privateButtonFillColor(accent);
}
// Warn
&.pi-color__warn {
@include privateButtonFillColor(warn);
}
// Highlighted
&.pi-color__highlighted {
@include privateButtonFillColor(highlighted);
}
// Ghost
&.pi-button__appearance--ghost {
background-color: transparent;
text-decoration: underline;
// Ghost & Primary
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey) {
@include privateButtonGhostColor(primary);
}
// Ghost & Accent
&.pi-color__accent {
@include privateButtonGhostColor(accent);
}
// Ghost & Warn
&.pi-color__warn {
@include privateButtonGhostColor(warn);
}
// Ghost & Highlighted
&.pi-color__highlighted {
@include privateButtonGhostColor(Highlighted);
}
// Ghost & White
&.pi-color__white {
color: var(--pi-color-white);
&:hover {
border: unset;
&:enabled {
color: var(--pi-color-white);
text-decoration: underline;
}
}
&:disabled {
color: rgba($color: white, $alpha: 0.6);
}
}
// Ghost & Black
&.pi-color__black {
color: var(--pi-color-grey-900);
&:hover {
&:enabled {
color: var(--pi-color-grey-900);
text-decoration: underline;
}
}
&:disabled {
color: rgba($color: #3d3d3d, $alpha: 0.6);
}
}
// Ghost & Grey
&.pi-color__grey {
color: var(--pi-color-grey-300);
&:hover {
&:enabled {
color: var(--pi-color-grey-400);
text-decoration: underline;
}
}
&:disabled {
color: var(--pi-color-grey-100);
}
}
}
// Outline
&.pi-button__appearance--outline {
// Outline & Primary
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__highlighted):not(.pi-color__black) {
@include privateButtonOutlineColor(primary);
}
// Outline & Accent
&.pi-color__accent {
@include privateButtonOutlineColor(accent);
}
// Outline & Warn
&.pi-color__warn {
@include privateButtonOutlineColor(warn);
}
// Outline & Highlighted
&.pi-color__highlighted {
@include privateButtonOutlineColor(highlighted);
}
&.pi-color__black {
@include privateButtonOutlineColor(grey);
}
// Outline & White
&.pi-color__white {
color: var(--pi-color-white);
&:hover {
&:enabled {
color: var(--pi-color-primary);
background-color: var(--pi-color-white);
border-color: var(--pi-color-white);
}
}
&:disabled {
color: rgba($color: #ffffff, $alpha: 0.6);
}
// Is Active
&.is-active {
color: var(--pi-color-primary);
background-color: var(--pi-color-white);
border-color: var(--pi-color-white);
}
}
}
}
}
.pi-shell {
&.pi-shell__deale-saas {
.is-private {
button {
// Colors
@include privateButtonsColors;
// Sizes
@include privateButtonsSizes;
}
}
}
}
.cdk-overlay-container {
button {
// Colors
@include privateButtonsColors;
// Sizes
@include privateButtonsSizes;
}
}
@mixin privateButtonsSizes {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not(
.pi-button__toggle
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single) {
&:not(.pi-button__x-small):not(.pi-button__xx-small) {
height: var(--pi-spacing-xxx-large);
}
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(.pi-button__trimmed):not(
.ch2-btn
):not(.pi-button__icon--single) {
&.pi-button__x-small {
height: var(--pi-spacing-xx-large);
}
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
// Sizes
// X small
&.pi-button {
&:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
.pi-button__trimmed
) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
}
}
}
// Fill
@mixin privateButtonFillColor($color) {
// Default color
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) {
background-color: var(--pi-color-#{$color});
color: var(--pi-color-white);
&:disabled {
background-color: var(--pi-color-#{$color}-200);
}
&:hover {
&:enabled {
background-color: var(--pi-color-#{$color}-900);
}
}
}
// Default color & White
&.pi-button__white {
color: var(--pi-color-#{$color});
&:hover {
&:enabled {
background-color: var(--pi-color-#{$color});
}
}
}
}
// Ghost
@mixin privateButtonGhostColor($color) {
color: var(--pi-color-#{$color});
&:hover {
&:enabled {
color: var(--pi-color-#{$color}-900);
}
}
&:disabled {
color: var(--pi-color-#{$color}-200);
}
}
// Outline
@mixin privateButtonOutlineColor($color) {
background-color: transparent;
box-sizing: border-box;
transition: all 0.16s ease-in;
border: 1px solid;
color: var(--pi-color-#{$color});
&:hover {
&:enabled {
color: var(--pi-color-white);
border-color: var(--pi-color-#{$color});
background-color: var(--pi-color-#{$color});
}
}
&:disabled {
color: var(--pi-color-#{$color}-200);
}
// Is Active
&.is-active {
color: var(--pi-color-white);
border-color: var(--pi-color-#{$color});
background-color: var(--pi-color-#{$color});
}
}
@mixin privateButtonsColors {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
// Color
// White
&.pi-color__white {
background-color: var(--pi-color-white);
&:disabled {
background-color: rgba($color: white, $alpha: 0.6);
}
&:hover {
color: var(--pi-color-white);
background-color: transparent;
border: 2px solid var(--pi-color-white);
&:enabled {
background-color: transparent;
}
}
// White default
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__highlighted
):not(.pi-color__white) {
&:not(:hover) {
color: var(--pi-color-primary);
}
}
}
// Fill
// Primary
&.pi-color__primary {
@include privateButtonFillColor(primary);
}
// Accent
&.pi-color__accent {
@include privateButtonFillColor(accent);
}
// Warn
&.pi-color__warn {
@include privateButtonFillColor(warn);
}
// Highlighted
&.pi-color__highlighted {
@include privateButtonFillColor(highlighted);
}
// Ghost
&.pi-button__appearance--ghost {
background-color: transparent;
text-decoration: underline;
// Ghost & Primary
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey) {
@include privateButtonGhostColor(primary);
}
// Ghost & Accent
&.pi-color__accent {
@include privateButtonGhostColor(accent);
}
// Ghost & Warn
&.pi-color__warn {
@include privateButtonGhostColor(warn);
}
// Ghost & Highlighted
&.pi-color__highlighted {
@include privateButtonGhostColor(Highlighted);
}
// Ghost & White
&.pi-color__white {
color: var(--pi-color-white);
&:hover {
border: unset;
&:enabled {
color: var(--pi-color-white);
text-decoration: underline;
}
}
&:disabled {
color: rgba($color: white, $alpha: 0.6);
}
}
// Ghost & Black
&.pi-color__black {
color: var(--pi-color-grey-900);
&:hover {
&:enabled {
color: var(--pi-color-grey-900);
text-decoration: underline;
}
}
&:disabled {
color: rgba($color: #3d3d3d, $alpha: 0.6);
}
}
// Ghost & Grey
&.pi-color__grey {
color: var(--pi-color-grey-300);
&:hover {
&:enabled {
color: var(--pi-color-grey-400);
text-decoration: underline;
}
}
&:disabled {
color: var(--pi-color-grey-100);
}
}
}
// Outline
&.pi-button__appearance--outline {
// Outline & Primary
&.pi-color__primary,
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
.pi-color__white
):not(.pi-color__highlighted):not(.pi-color__black) {
@include privateButtonOutlineColor(primary);
}
// Outline & Accent
&.pi-color__accent {
@include privateButtonOutlineColor(accent);
}
// Outline & Warn
&.pi-color__warn {
@include privateButtonOutlineColor(warn);
}
// Outline & Highlighted
&.pi-color__highlighted {
@include privateButtonOutlineColor(highlighted);
}
&.pi-color__black {
@include privateButtonOutlineColor(grey);
}
// Outline & White
&.pi-color__white {
color: var(--pi-color-white);
&:hover {
&:enabled {
color: var(--pi-color-primary);
background-color: var(--pi-color-white);
border-color: var(--pi-color-white);
}
}
&:disabled {
color: rgba($color: #ffffff, $alpha: 0.6);
}
// Is Active
&.is-active {
color: var(--pi-color-primary);
background-color: var(--pi-color-white);
border-color: var(--pi-color-white);
}
}
}
}
}
.pi-shell {
&.pi-shell__deale-saas {
.is-private {
button {
// Colors
@include privateButtonsColors;
// Sizes
@include privateButtonsSizes;
}
}
}
}
.cdk-overlay-container {
button {
// Colors
@include privateButtonsColors;
// Sizes
@include privateButtonsSizes;
}
}

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

File diff suppressed because it is too large Load Diff

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

@@ -1,204 +1,204 @@
@mixin defaultButtonsProperties {
line-height: 100%;
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
}
&:hover {
&:not(:disabled):not(.pi-button__toggle) {
cursor: pointer;
}
}
&.is-active {
cursor: default;
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
border: none;
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
.pi-button__x-large
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
.pi-button__icon--single
):not(.pi-button__x-small) {
padding-top: var(--pi-spacing-xx-small);
padding-bottom: var(--pi-spacing-xx-small);
}
&:not(.pi-button__x-large):not(.pi-button__trimmed):not(.pi-button__toggle) {
&:not(.pi-button__x-small) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
-moz-border-radius: var(--pi-border-radius-medium);
}
&.pi-button__x-small {
border-radius: 0.75rem;
-webkit-border-radius: 0.75rem;
-moz-border-radius: 0.75rem;
}
}
&:not(.pi-button__icon--single):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
):not(.ch2-btn) {
&:not(.pi-button__x-small) {
min-width: 5.5rem;
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
&.pi-button__x-small {
min-width: 4.5rem;
padding-left: var(--pi-spacing-xx-small);
padding-right: var(--pi-spacing-xx-small);
}
}
&:not(.pi-button__appearance--outline) {
transition: all 0.25s ease-in-out;
}
}
}
@mixin buttonsSizes {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&.pi-button__x-small {
font: {
size: 0.8125rem;
}
&:not(.pi-button__trimmed) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium);
}
}
&.pi-button__trimmed {
padding: 0;
}
&.pi-button__xx-small {
display: flex;
justify-content: center;
align-items: center;
gap: var(--pi-spacing-x-small);
height: 1.375rem;
line-height: 100%;
width: -moz-fit-content;
width: fit-content;
min-width: 4.5rem;
max-width: 12.5rem;
padding: 0 var(--pi-spacing-small);
-webkit-border-radius: var(--pi-border-radius-small);
-moz-border-radius: var(--pi-border-radius-small);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: {
size: 0.75rem;
}
font: {
size: 0.8125rem;
}
}
&.pi-button__trimed {
min-width: unset;
padding: var(--pi-spacing-xxxx-small) 0;
}
&:not(.pi-button__trimmed):not(.pi-button__icon--single) {
// Small
&.pi-button__small {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
}
// Medium
&.pi-button__medium {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
// Large
&.pi-button__large {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
min-width: 10.6875rem;
}
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
min-width: 11.25rem;
}
}
}
// W 100
&.pi-button__w100 {
width: 100%;
}
}
}
html,
.cdk-overlay-container {
button {
// Default properties
@include defaultButtonsProperties;
// Sizes
@include buttonsSizes;
}
}
.pi-filter-button,
.pi-expand-button {
// Tablet & Desktop
@media screen and (min-width: 40rem) {
&.is-open {
.pi-big-icon,
figure {
transform: rotate(180deg);
}
}
}
}
// Close button in modals
.pi-modal {
.pi-close-button {
&::after,
&::before {
width: var(--pi-spacing-x-large);
}
}
}
.pi-layout {
&.pi-layout__05-splitted {
.pi-wrapper__action {
&.pi-wrapper__flex-direction--column {
.pi-button {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
}
}
}
}
.cdk-overlay-container,
html {
&.is-mobile {
.pi-icon-button {
&.is-responsive {
& > button {
// Text
&.has-text {
padding: unset;
min-width: unset;
width: var(--pi-spacing-xxx-large);
& > span {
display: none;
}
}
}
}
}
}
}
@mixin defaultButtonsProperties {
line-height: 100%;
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
}
&:hover {
&:not(:disabled):not(.pi-button__toggle) {
cursor: pointer;
}
}
&.is-active {
cursor: default;
}
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
border: none;
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
.pi-button__x-large
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
.pi-button__icon--single
):not(.pi-button__x-small) {
padding-top: var(--pi-spacing-xx-small);
padding-bottom: var(--pi-spacing-xx-small);
}
&:not(.pi-button__x-large):not(.pi-button__trimmed):not(.pi-button__toggle) {
&:not(.pi-button__x-small) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
-moz-border-radius: var(--pi-border-radius-medium);
}
&.pi-button__x-small {
border-radius: 0.75rem;
-webkit-border-radius: 0.75rem;
-moz-border-radius: 0.75rem;
}
}
&:not(.pi-button__icon--single):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
.pi-button__toggle
):not(.ch2-btn) {
&:not(.pi-button__x-small) {
min-width: 5.5rem;
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
&.pi-button__x-small {
min-width: 4.5rem;
padding-left: var(--pi-spacing-xx-small);
padding-right: var(--pi-spacing-xx-small);
}
}
&:not(.pi-button__appearance--outline) {
transition: all 0.25s ease-in-out;
}
}
}
@mixin buttonsSizes {
// Default
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__type--menu-item
) {
&.pi-button__x-small {
font: {
size: 0.8125rem;
}
&:not(.pi-button__trimmed) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium);
}
}
&.pi-button__trimmed {
padding: 0;
}
&.pi-button__xx-small {
display: flex;
justify-content: center;
align-items: center;
gap: var(--pi-spacing-x-small);
height: 1.375rem;
line-height: 100%;
width: -moz-fit-content;
width: fit-content;
min-width: 4.5rem;
max-width: 12.5rem;
padding: 0 var(--pi-spacing-small);
-webkit-border-radius: var(--pi-border-radius-small);
-moz-border-radius: var(--pi-border-radius-small);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: {
size: 0.75rem;
}
font: {
size: 0.8125rem;
}
}
&.pi-button__trimed {
min-width: unset;
padding: var(--pi-spacing-xxxx-small) 0;
}
&:not(.pi-button__trimmed):not(.pi-button__icon--single) {
// Small
&.pi-button__small {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
}
// Medium
&.pi-button__medium {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
}
// Large
&.pi-button__large {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
min-width: 10.6875rem;
}
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
min-width: 11.25rem;
}
}
}
// W 100
&.pi-button__w100 {
width: 100%;
}
}
}
html,
.cdk-overlay-container {
button {
// Default properties
@include defaultButtonsProperties;
// Sizes
@include buttonsSizes;
}
}
.pi-filter-button,
.pi-expand-button {
// Tablet & Desktop
@media screen and (min-width: 40rem) {
&.is-open {
.pi-big-icon,
figure {
transform: rotate(180deg);
}
}
}
}
// Close button in modals
.pi-modal {
.pi-close-button {
&::after,
&::before {
width: var(--pi-spacing-x-large);
}
}
}
.pi-layout {
&.pi-layout__05-splitted {
.pi-wrapper__action {
&.pi-wrapper__flex-direction--column {
.pi-button {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
}
}
}
}
.cdk-overlay-container,
html {
&.is-mobile {
.pi-icon-button {
&.is-responsive {
& > button {
// Text
&.has-text {
padding: unset;
min-width: unset;
width: var(--pi-spacing-xxx-large);
& > span {
display: none;
}
}
}
}
}
}
}

6
libs/ui/src/lib/styles/common/components/pi-button/index.scss
View File

@@ -1,3 +1,3 @@
@forward 'pi-button-private';
@forward 'pi-button-public';
@forward 'pi-button';
@forward 'pi-button-private';
@forward 'pi-button-public';
@forward 'pi-button';

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

@@ -1,75 +1,75 @@
/**
* APPEARANCE:
*
* 1. Fill:
*
* Similar look and feel to the Form Fields Fill Appearance.
* Data Grid with inner stroke between each grid item.
*
**/
@mixin dataGridAppearanceFill() {
}
/**
*
* 2. Outline:
*
* A Data Grid with outer border and a inner stroke between each grid item appart from the last one.
*
**/
@mixin dataGridAppearanceOutline() {
background-color: var(--pi-color-white);
&.pi-data-grid__appearance--outline {
// Inner Stroke between grid items
// Data Direction:
// Row
&.pi-data-grid__data-direction--row {
.pi-grid-item {
&:not(:last-of-type) {
border-bottom: 1px solid;
border-color: var(--pi-color-grey-50);
}
}
}
// Column
&.pi-data-grid__data-direction--column {
.pi-grid-item {
.pi-cell {
&:not(.pi-cell__type--sum) {
border-bottom: 1px solid;
border-color: var(--pi-color-grey-50);
}
}
}
}
// Outline Appearance in mode === Grid
// Card Type: List
&.pi-data-grid__card-type--list {
.pi-cell {
&:not(.pi-cell__type--sum) {
border-bottom: 1px solid;
border-color: var(--pi-color-grey-50);
}
}
}
}
}
/**
*
* 3. Ghost:
*
* A Data Grid without outer and inner strokes between the grid items.
*
**/
@mixin dataGridAppearanceGhost() {
}
// Data grid
.pi-data-grid {
@include dataGridAppearanceOutline;
}
/**
* APPEARANCE:
*
* 1. Fill:
*
* Similar look and feel to the Form Fields Fill Appearance.
* Data Grid with inner stroke between each grid item.
*
**/
@mixin dataGridAppearanceFill() {
}
/**
*
* 2. Outline:
*
* A Data Grid with outer border and a inner stroke between each grid item appart from the last one.
*
**/
@mixin dataGridAppearanceOutline() {
background-color: var(--pi-color-white);
&.pi-data-grid__appearance--outline {
// Inner Stroke between grid items
// Data Direction:
// Row
&.pi-data-grid__data-direction--row {
.pi-grid-item {
&:not(:last-of-type) {
border-bottom: 1px solid;
border-color: var(--pi-color-grey-50);
}
}
}
// Column
&.pi-data-grid__data-direction--column {
.pi-grid-item {
.pi-cell {
&:not(.pi-cell__type--sum) {
border-bottom: 1px solid;
border-color: var(--pi-color-grey-50);
}
}
}
}
// Outline Appearance in mode === Grid
// Card Type: List
&.pi-data-grid__card-type--list {
.pi-cell {
&:not(.pi-cell__type--sum) {
border-bottom: 1px solid;
border-color: var(--pi-color-grey-50);
}
}
}
}
}
/**
*
* 3. Ghost:
*
* A Data Grid without outer and inner strokes between the grid items.
*
**/
@mixin dataGridAppearanceGhost() {
}
// Data grid
.pi-data-grid {
@include dataGridAppearanceOutline;
}

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

@@ -1,261 +1,261 @@
@mixin cellWidth($default-width, $action-width, $icon-width, $description-width) {
.pi-cell {
display: flex;
// Cell type default
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(.pi-cell__type--checkbox):not(
.pi-cell__type--date
):not(.pi-cell__type--description) {
width: $default-width;
flex-grow: 1;
}
&.pi-cell__type--action,
&.pi-cell__type--date {
width: $action-width;
}
&.pi-cell__type--checkbox,
&.pi-cell__type--icon {
width: $icon-width;
}
&.pi-cell__type--description {
width: $description-width;
}
}
}
@mixin dataGridHasBoxShadow() {
// MODE List (Table)
.is-mode-list {
// Data grid
.pi-data-grid {
&.has-box-shadow {
box-shadow: var(--pi-box-shadow-panel);
}
}
}
}
// MODE List (Table)
.is-mode-list {
// Data grid
.pi-data-grid {
background-color: var(--pi-color-white);
// Grid item (*Row with data direction === column | *Column with data direction === row)
.pi-grid-item {
display: flex;
& > .pi-grid-item__content {
display: flex;
align-items: center;
gap: var(--pi-spacing-x-small);
min-height: 3.25rem;
width: 100%;
}
& > aside {
min-height: 3.25rem;
}
}
// Data direction column (1 grid item = 1 column)
&.pi-data-grid__data-direction--row {
display: flex;
flex-direction: column;
.pi-grid-item {
align-items: center;
gap: var(--pi-spacing-medium);
min-height: var(--pi-spacing-xxxx-large);
width: 100%;
}
// Appearacne Outline
&:not(.pi-data-grid__appearance--ghost) {
.pi-grid-item {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
}
// Cell
.pi-cell {
align-items: center;
gap: var(--pi-spacing-xx-small);
&.pi-cell__type--action,
&.pi-cell__type--icon {
justify-content: flex-end;
.pi-text-viewer {
article {
display: none;
}
}
}
}
// 3 Columns
&.pi-data-grid__columns--3 {
@include cellWidth(35%, 30%, 25%, 45%);
}
// 4 Columns
&.pi-data-grid__columns--4 {
@include cellWidth(40%, 35%, 30%, 50%);
}
// 5 Columns
&.pi-data-grid__columns--5 {
@include cellWidth(20%, 15%, 10%, 30%);
}
// 6 Columns
&.pi-data-grid__columns--6 {
@include cellWidth(18.66%, 13%, 10%, 28%);
}
// 7 Columns
&.pi-data-grid__columns--7 {
@include cellWidth(20.28%, 6.5%, 10%, 33%);
}
// 8 Columns
&.pi-data-grid__columns--8 {
@include cellWidth(12.5%, 12.5%, 10%, 22%);
}
// 9 Columns
&.pi-data-grid__columns--9 {
@include cellWidth(11.11%, 11.11%, 10%, 18%);
}
// 10 Columns
&.pi-data-grid__columns--10 {
@include cellWidth(10%, 10%, 10%, 15%);
}
// 11 Columns
&.pi-data-grid__columns--11 {
@include cellWidth(9%, 9%, 9%, 12%);
}
// 12 Columns
&.pi-data-grid__columns--12 {
@include cellWidth(8.33%, 8.33%, 8.33%, 11%);
}
}
}
}
// MODE Grid (Card) (*infinite scroll)
.is-mode-grid {
.pi-data-grid {
display: grid;
gap: var(--pi-spacing-medium);
}
}
html {
// Mobile
&.is-mobile {
.is-mode-grid {
.pi-data-grid {
&.pi-data-grid__data-direction--column {
.pi-grid-item {
flex-direction: column;
.pi-cell {
&.pi-text-viewer,
& > .pi-text-viewer {
&.pi-text-viewer__font-size--s {
label {
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small Device
@media screen and (max-width: 62rem) {
// MODE List (Table)
.is-mode-list {
// Data grid
.pi-data-grid {
// Data direction column (1 grid item = 1 column)
&.pi-data-grid__data-direction--column {
.pi-grid-item {
&.pi-grid-item__context--keys {
.pi-cell {
min-width: 20rem;
&.pi-text-viewer {
&.pi-text-viewer__align--center {
article {
margin-top: var(--pi-spacing-medium);
}
}
}
}
}
&:not(.is-active) {
display: none;
}
}
.pi-cell {
&.is-active {
display: flex;
}
&:not(.is-active) {
display: none;
}
}
}
}
}
.is-mode-grid {
.pi-data-grid {
&.pi-data-grid__data-direction--column {
.pi-grid-item {
&:not(.is-active) {
display: none;
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large Device
@media screen and (min-width: 62rem) {
// MODE List (Table)
.is-mode-list {
// Data grid
.pi-data-grid {
// Data direction column (1 grid item = 1 column)
&.pi-data-grid__data-direction--column {
.pi-grid-item {
.pi-cell {
.pi-text-viewer {
&.pi-text-viewer__justify--flex-end {
height: 100%;
}
}
&:not(.pi-cell__type--sum) + .pi-cell__type--sum {
&:not(:last-of-type) {
margin-bottom: var(--pi-spacing-medium);
}
}
}
}
// 4 rows
&.pi-data-grid__rows--4 {
.pi-grid-item {
width: 25%;
}
}
}
}
}
}
}
}
@mixin cellWidth($default-width, $action-width, $icon-width, $description-width) {
.pi-cell {
display: flex;
// Cell type default
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(.pi-cell__type--checkbox):not(
.pi-cell__type--date
):not(.pi-cell__type--description) {
width: $default-width;
flex-grow: 1;
}
&.pi-cell__type--action,
&.pi-cell__type--date {
width: $action-width;
}
&.pi-cell__type--checkbox,
&.pi-cell__type--icon {
width: $icon-width;
}
&.pi-cell__type--description {
width: $description-width;
}
}
}
@mixin dataGridHasBoxShadow() {
// MODE List (Table)
.is-mode-list {
// Data grid
.pi-data-grid {
&.has-box-shadow {
box-shadow: var(--pi-box-shadow-panel);
}
}
}
}
// MODE List (Table)
.is-mode-list {
// Data grid
.pi-data-grid {
background-color: var(--pi-color-white);
// Grid item (*Row with data direction === column | *Column with data direction === row)
.pi-grid-item {
display: flex;
& > .pi-grid-item__content {
display: flex;
align-items: center;
gap: var(--pi-spacing-x-small);
min-height: 3.25rem;
width: 100%;
}
& > aside {
min-height: 3.25rem;
}
}
// Data direction column (1 grid item = 1 column)
&.pi-data-grid__data-direction--row {
display: flex;
flex-direction: column;
.pi-grid-item {
align-items: center;
gap: var(--pi-spacing-medium);
min-height: var(--pi-spacing-xxxx-large);
width: 100%;
}
// Appearacne Outline
&:not(.pi-data-grid__appearance--ghost) {
.pi-grid-item {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
}
// Cell
.pi-cell {
align-items: center;
gap: var(--pi-spacing-xx-small);
&.pi-cell__type--action,
&.pi-cell__type--icon {
justify-content: flex-end;
.pi-text-viewer {
article {
display: none;
}
}
}
}
// 3 Columns
&.pi-data-grid__columns--3 {
@include cellWidth(35%, 30%, 25%, 45%);
}
// 4 Columns
&.pi-data-grid__columns--4 {
@include cellWidth(40%, 35%, 30%, 50%);
}
// 5 Columns
&.pi-data-grid__columns--5 {
@include cellWidth(20%, 15%, 10%, 30%);
}
// 6 Columns
&.pi-data-grid__columns--6 {
@include cellWidth(18.66%, 13%, 10%, 28%);
}
// 7 Columns
&.pi-data-grid__columns--7 {
@include cellWidth(20.28%, 6.5%, 10%, 33%);
}
// 8 Columns
&.pi-data-grid__columns--8 {
@include cellWidth(12.5%, 12.5%, 10%, 22%);
}
// 9 Columns
&.pi-data-grid__columns--9 {
@include cellWidth(11.11%, 11.11%, 10%, 18%);
}
// 10 Columns
&.pi-data-grid__columns--10 {
@include cellWidth(10%, 10%, 10%, 15%);
}
// 11 Columns
&.pi-data-grid__columns--11 {
@include cellWidth(9%, 9%, 9%, 12%);
}
// 12 Columns
&.pi-data-grid__columns--12 {
@include cellWidth(8.33%, 8.33%, 8.33%, 11%);
}
}
}
}
// MODE Grid (Card) (*infinite scroll)
.is-mode-grid {
.pi-data-grid {
display: grid;
gap: var(--pi-spacing-medium);
}
}
html {
// Mobile
&.is-mobile {
.is-mode-grid {
.pi-data-grid {
&.pi-data-grid__data-direction--column {
.pi-grid-item {
flex-direction: column;
.pi-cell {
&.pi-text-viewer,
& > .pi-text-viewer {
&.pi-text-viewer__font-size--s {
label {
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small Device
@media screen and (max-width: 62rem) {
// MODE List (Table)
.is-mode-list {
// Data grid
.pi-data-grid {
// Data direction column (1 grid item = 1 column)
&.pi-data-grid__data-direction--column {
.pi-grid-item {
&.pi-grid-item__context--keys {
.pi-cell {
min-width: 20rem;
&.pi-text-viewer {
&.pi-text-viewer__align--center {
article {
margin-top: var(--pi-spacing-medium);
}
}
}
}
}
&:not(.is-active) {
display: none;
}
}
.pi-cell {
&.is-active {
display: flex;
}
&:not(.is-active) {
display: none;
}
}
}
}
}
.is-mode-grid {
.pi-data-grid {
&.pi-data-grid__data-direction--column {
.pi-grid-item {
&:not(.is-active) {
display: none;
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large Device
@media screen and (min-width: 62rem) {
// MODE List (Table)
.is-mode-list {
// Data grid
.pi-data-grid {
// Data direction column (1 grid item = 1 column)
&.pi-data-grid__data-direction--column {
.pi-grid-item {
.pi-cell {
.pi-text-viewer {
&.pi-text-viewer__justify--flex-end {
height: 100%;
}
}
&:not(.pi-cell__type--sum) + .pi-cell__type--sum {
&:not(:last-of-type) {
margin-bottom: var(--pi-spacing-medium);
}
}
}
}
// 4 rows
&.pi-data-grid__rows--4 {
.pi-grid-item {
width: 25%;
}
}
}
}
}
}
}
}

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

@@ -1,154 +1,154 @@
/**
*
* Card Type
*
**/
/**
*
* Card Type: LIST
*
**/
@mixin dataGridCardTypeList {
&.pi-data-grid__card-type--list {
// Data Grid Columns:
// 7
@include dataGridCardTypeList7;
// 11
@include dataGridCardTypeList11;
.pi-grid-item {
&.pi-card {
display: grid;
.pi-cell {
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
margin-top: var(--pi-spacing-xx-small);
& > .pi-text-viewer,
&.pi-text-viewer {
article {
transform: translateY(var(--pi-spacing-xx-small));
}
label {
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
/**
*
* Card Type: LIST
*
* Columns: 7
*
**/
@mixin dataGridCardTypeList7() {
&.pi-data-grid__columns--7 {
.pi-grid-item {
&.pi-card {
@for $i from 1 through 14 {
& > *:nth-child(#{$i}) {
grid-area: item#{$i};
align-self: center;
}
}
.pi-cell {
width: -webkit-fill-available;
}
@for $i from 8 through 14 {
& > *:nth-child(#{$i}) {
justify-content: flex-end;
}
}
grid-template-rows: repeat(7, 1fr);
grid-template-areas:
'item1 item8'
'item2 item9'
'item3 item10'
'item4 item11'
'item5 item12'
'item6 item13'
'item7 item14';
}
}
}
}
/**
*
* Card Type: LIST
*
* Columns: 11
*
**/
@mixin dataGridCardTypeList11() {
&.pi-data-grid__columns--11 {
.pi-grid-item {
&.pi-card {
@for $i from 1 through 22 {
& > *:nth-child(#{$i}) {
grid-area: item#{$i};
align-self: center;
}
}
@for $i from 12 through 22 {
& > *:nth-child(#{$i}) {
justify-content: flex-end;
}
}
grid-template-rows: repeat(11, 1fr);
grid-template-areas:
'item1 item12'
'item2 item13'
'item3 item14'
'item4 item15'
'item5 item16'
'item6 item17'
'item7 item18'
'item8 item19'
'item9 item20'
'item10 item21'
'item11 item22';
}
}
}
}
/**
*
* Card Type: HORIZONTAL
*
**/
@mixin dataGridCardTypeHorizontal() {
}
/**
*
* Card Type: SQUARED
*
**/
@mixin dataGridCardTypeSquared() {
}
/**
*
* Card Type: VERTICAL
*
**/
@mixin dataGridCardTypeVertical() {
}
.pi-data-grid {
@include dataGridCardTypeList;
}
/**
*
* Card Type
*
**/
/**
*
* Card Type: LIST
*
**/
@mixin dataGridCardTypeList {
&.pi-data-grid__card-type--list {
// Data Grid Columns:
// 7
@include dataGridCardTypeList7;
// 11
@include dataGridCardTypeList11;
.pi-grid-item {
&.pi-card {
display: grid;
.pi-cell {
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
margin-top: var(--pi-spacing-xx-small);
& > .pi-text-viewer,
&.pi-text-viewer {
article {
transform: translateY(var(--pi-spacing-xx-small));
}
label {
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
/**
*
* Card Type: LIST
*
* Columns: 7
*
**/
@mixin dataGridCardTypeList7() {
&.pi-data-grid__columns--7 {
.pi-grid-item {
&.pi-card {
@for $i from 1 through 14 {
& > *:nth-child(#{$i}) {
grid-area: item#{$i};
align-self: center;
}
}
.pi-cell {
width: -webkit-fill-available;
}
@for $i from 8 through 14 {
& > *:nth-child(#{$i}) {
justify-content: flex-end;
}
}
grid-template-rows: repeat(7, 1fr);
grid-template-areas:
'item1 item8'
'item2 item9'
'item3 item10'
'item4 item11'
'item5 item12'
'item6 item13'
'item7 item14';
}
}
}
}
/**
*
* Card Type: LIST
*
* Columns: 11
*
**/
@mixin dataGridCardTypeList11() {
&.pi-data-grid__columns--11 {
.pi-grid-item {
&.pi-card {
@for $i from 1 through 22 {
& > *:nth-child(#{$i}) {
grid-area: item#{$i};
align-self: center;
}
}
@for $i from 12 through 22 {
& > *:nth-child(#{$i}) {
justify-content: flex-end;
}
}
grid-template-rows: repeat(11, 1fr);
grid-template-areas:
'item1 item12'
'item2 item13'
'item3 item14'
'item4 item15'
'item5 item16'
'item6 item17'
'item7 item18'
'item8 item19'
'item9 item20'
'item10 item21'
'item11 item22';
}
}
}
}
/**
*
* Card Type: HORIZONTAL
*
**/
@mixin dataGridCardTypeHorizontal() {
}
/**
*
* Card Type: SQUARED
*
**/
@mixin dataGridCardTypeSquared() {
}
/**
*
* Card Type: VERTICAL
*
**/
@mixin dataGridCardTypeVertical() {
}
.pi-data-grid {
@include dataGridCardTypeList;
}

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

@@ -1,152 +1,152 @@
/**
* DATA DIRECTION:
*
* 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.
*
* 1. Column:
*
* Any grid item is a column. The data projection will be horizontal.
*
**/
@mixin dataGridDataDirectionColumn($key-cell-width: 15rem, $value-cell-width: 6rem) {
// MODE List (Table)
.pi-data-grid {
// Data direction:
// Column (1 grid item = 1 column)
&.pi-data-grid__data-direction--column {
display: flex;
.pi-grid-item {
flex-direction: column;
// Cell
.pi-cell {
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
margin-top: var(--pi-spacing-xx-small);
// Vertival align
&.pi-cell__vertical-align--center {
display: flex;
align-items: center;
}
// Override the Vertical Align Center visualize cells (text viewers)
// with the editable ones (text fields) in form data grids
&.pi-text-viewer,
& > .pi-text-viewer {
& > * {
transform: translateY(var(--pi-spacing-x-small));
}
}
}
// Content Type:
// Keys (HEADINGS)
&.pi-grid-item__context--keys {
min-width: $key-cell-width;
// Cell in Keys context
.pi-cell {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
& > *:nth-child(1) {
margin-left: var(--pi-spacing-medium);
}
& > *:nth-child(n + 2) {
justify-content: center;
}
}
}
// Values
&:not(.pi-grid-item__context--keys) {
min-width: $value-cell-width;
width: -webkit-fill-available;
}
}
// Justify Content:
// Space Between
&.pi-data-grid__justify-content--space-between {
justify-content: space-between;
}
// Flex Start
&.pi-data-grid__justify-content--flex-start {
justify-content: flex-start;
}
}
}
}
/**
*
* 2. Row:
*
* Any grid item is a row. The data projection will be vertical.
*
**/
@mixin dataGridDataDirectionRow() {
// MODE List (Table)
.is-mode-list {
.pi-data-grid {
// Data direction row (1 grid item = 1 row)
&.pi-data-grid__data-direction--column {
// Scrollable area
.pi-data-grid__content {
margin: 0 auto;
width: -webkit-fill-available;
overflow-y: auto;
overflow-x: hidden;
// Generic Scroll
&::-webkit-scrollbar {
width: 0.1875rem;
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-grey-25);
border-radius: var(--pi-border-radius-x-small);
&:hover {
transition: var(--pi-animation);
background-color: var(--pi-color-grey-50);
}
}
}
}
}
}
}
html {
// Tablet
&.is-tablet {
// Tablet L
&.is-tablet__large {
@include dataGridDataDirectionColumn;
}
}
// Desktop
&.is-desktop {
// Desktop S
&.is-desktop__small {
@include dataGridDataDirectionColumn(13.5rem, 8rem);
}
// Desktop M
&.is-desktop__medium {
@include dataGridDataDirectionColumn(15rem, 9.125rem);
}
// Desktop L
&.is-desktop__large {
@include dataGridDataDirectionColumn(18rem, 8.5rem);
}
}
}
/**
* DATA DIRECTION:
*
* 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.
*
* 1. Column:
*
* Any grid item is a column. The data projection will be horizontal.
*
**/
@mixin dataGridDataDirectionColumn($key-cell-width: 15rem, $value-cell-width: 6rem) {
// MODE List (Table)
.pi-data-grid {
// Data direction:
// Column (1 grid item = 1 column)
&.pi-data-grid__data-direction--column {
display: flex;
.pi-grid-item {
flex-direction: column;
// Cell
.pi-cell {
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
margin-top: var(--pi-spacing-xx-small);
// Vertival align
&.pi-cell__vertical-align--center {
display: flex;
align-items: center;
}
// Override the Vertical Align Center visualize cells (text viewers)
// with the editable ones (text fields) in form data grids
&.pi-text-viewer,
& > .pi-text-viewer {
& > * {
transform: translateY(var(--pi-spacing-x-small));
}
}
}
// Content Type:
// Keys (HEADINGS)
&.pi-grid-item__context--keys {
min-width: $key-cell-width;
// Cell in Keys context
.pi-cell {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
& > *:nth-child(1) {
margin-left: var(--pi-spacing-medium);
}
& > *:nth-child(n + 2) {
justify-content: center;
}
}
}
// Values
&:not(.pi-grid-item__context--keys) {
min-width: $value-cell-width;
width: -webkit-fill-available;
}
}
// Justify Content:
// Space Between
&.pi-data-grid__justify-content--space-between {
justify-content: space-between;
}
// Flex Start
&.pi-data-grid__justify-content--flex-start {
justify-content: flex-start;
}
}
}
}
/**
*
* 2. Row:
*
* Any grid item is a row. The data projection will be vertical.
*
**/
@mixin dataGridDataDirectionRow() {
// MODE List (Table)
.is-mode-list {
.pi-data-grid {
// Data direction row (1 grid item = 1 row)
&.pi-data-grid__data-direction--column {
// Scrollable area
.pi-data-grid__content {
margin: 0 auto;
width: -webkit-fill-available;
overflow-y: auto;
overflow-x: hidden;
// Generic Scroll
&::-webkit-scrollbar {
width: 0.1875rem;
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-grey-25);
border-radius: var(--pi-border-radius-x-small);
&:hover {
transition: var(--pi-animation);
background-color: var(--pi-color-grey-50);
}
}
}
}
}
}
}
html {
// Tablet
&.is-tablet {
// Tablet L
&.is-tablet__large {
@include dataGridDataDirectionColumn;
}
}
// Desktop
&.is-desktop {
// Desktop S
&.is-desktop__small {
@include dataGridDataDirectionColumn(13.5rem, 8rem);
}
// Desktop M
&.is-desktop__medium {
@include dataGridDataDirectionColumn(15rem, 9.125rem);
}
// Desktop L
&.is-desktop__large {
@include dataGridDataDirectionColumn(18rem, 8.5rem);
}
}
}

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

@@ -1,23 +1,23 @@
/**
* MODE:
* 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.
* Note that in small devices, the Mode will be always set as Grid.
*
* 1. Grid:
*
* A cards list in a grid.
*
**/
@mixin dataGridModeGrid() {
}
/**
*
* 2. List:
*
* A cards list in a grid.
*
**/
@mixin dataGridModeList() {
}
/**
* MODE:
* 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.
* Note that in small devices, the Mode will be always set as Grid.
*
* 1. Grid:
*
* A cards list in a grid.
*
**/
@mixin dataGridModeGrid() {
}
/**
*
* 2. List:
*
* A cards list in a grid.
*
**/
@mixin dataGridModeList() {
}

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

@@ -1,5 +1,5 @@
@forward 'appearance';
@forward 'card-type';
@forward 'base-data-grid';
@forward 'data-direction';
@forward 'mode';
@forward 'appearance';
@forward 'card-type';
@forward 'base-data-grid';
@forward 'data-direction';
@forward 'mode';

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

@@ -1,285 +1,285 @@
@mixin incrementalCellField(
$max-width: calc(100% - var(--pi-spacing-x-large)),
$margin-left: var(--pi-spacing-x-large)
) {
.pi-shell,
.cdk-overlay-container {
.pi-cell {
.pi-field {
// Incremental field
&.pi-form-field__incremental {
&:not(.pi-form-field__incremental--range) {
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-text-field-wrapper {
max-width: $max-width;
margin-left: $margin-left;
}
}
}
}
}
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Incremental field
&.pi-form-field__incremental {
.mat-mdc-form-field {
width: -webkit-fill-available;
&.mat-focused {
.mat-mdc-form-field-placeholder {
color: var(--pi-color-primary);
}
}
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-underline {
display: none;
}
}
.mat-mdc-form-field-flex {
justify-content: space-between;
align-items: center;
height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small));
.mat-mdc-form-field-infix {
text-align: center;
}
.mat-mdc-form-field-suffix {
padding-right: var(--pi-spacing-medium);
}
.pi-affix {
display: flex;
align-items: center;
gap: var(--pi-spacing-xx-small);
&.pi-affix__suffix {
flex-direction: row-reverse;
}
}
}
input {
&.mat-mdc-input-element {
text-align: right !important;
}
}
// Add & Substract icons
.pi-icon {
&:not(.pi-icon__appearance--fill),
&.pi-icon__small {
border: 1px solid var(--pi-color-primary);
border-radius: var(--pi-border-radius-x-small);
}
}
}
// NOT Has error
&:not(.has-error) {
&:not(.mat-focused) {
.mdc-text-field {
.mdc-text-field__input {
color: var(--pi-color-black);
}
&:not(.mdc-text-field--disabled) {
.mdc-text-field__input {
color: var(--pi-color-black);
}
}
}
}
&.mat-focused {
.mdc-text-field {
.mdc-text-field__input {
color: var(--pi-color-primary);
}
&:not(.mdc-text-field--disabled) {
.mdc-text-field__input {
color: var(--pi-color-primary);
}
}
}
}
}
// has error
&.has-error {
.mdc-text-field {
.mdc-text-field__input {
color: var(--pi-color-warn);
}
&:not(.mdc-text-field--disabled) {
.mdc-text-field__input {
color: var(--pi-color-warn);
}
}
}
}
// Disabled
&.is-disabled {
color: var(--pi-color-grey-200);
}
// Incremental range
&.pi-form-field__incremental--range {
& > form {
display: flex;
gap: var(--pi-spacing-medium);
& > div {
width: -webkit-fill-available;
}
.pi-label {
span {
color: var(--pi-color-primary);
font: {
size: var(--pi-font-size-x-small);
}
}
}
.pi-form-field__incremental {
width: 50%;
}
}
.mat-mdc-form-field-flex {
width: 99%;
}
}
}
}
.pi-dynamic-menu,
.pi-card {
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-input-control {
height: 3.45rem;
}
}
}
// Cells with incrementals inputs: suffix light weight
.pi-cell {
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-icon-suffix {
.pi-affix__suffix {
& > span {
font-weight: 300;
}
}
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Incremental field
&.pi-form-field__incremental {
// Add & Substract icons
.pi-icon {
&:not(.pi-icon__appearance--fill),
&.pi-icon__small {
height: var(--pi-spacing-large);
width: var(--pi-spacing-large);
border-radius: 42%;
.mat-icon {
height: var(--pi-spacing-medium);
width: var(--pi-spacing-medium);
}
}
}
// Incremental range
&.pi-form-field__incremental--range {
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-input-control {
width: calc(50vw - 9rem);
}
}
}
}
}
}
@include incrementalCellField;
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Incremental field
&.pi-form-field__incremental {
// Add & Substract icons
.pi-icon {
&:not(.pi-icon__appearance--fill),
&.pi-icon__small {
height: var(--pi-spacing-medium);
width: var(--pi-spacing-medium);
border-radius: 42%;
.mat-icon {
height: var(--pi-spacing-small);
width: var(--pi-spacing-small);
}
}
}
}
}
}
}
}
&.is-tablet {
&.is-tablet__small {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large) - 25%),
calc(var(--pi-spacing-xx-large) + 25%)
);
}
&.is-tablet__large {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large) - 12.5%),
calc(var(--pi-spacing-xx-large) + 12.5%)
);
}
}
// Desktop
&.is-desktop {
// Desktop S
&.is-desktop__small {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large)),
calc(var(--pi-spacing-xx-large))
);
}
// Desktop M
&.is-desktop__medium {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large) - 33.33%),
calc(var(--pi-spacing-xx-large) + 33.33%)
);
}
// Desktop L
&.is-desktop__large {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large) - 40%),
calc(var(--pi-spacing-xx-large) + 40%)
);
}
}
}
@mixin incrementalCellField(
$max-width: calc(100% - var(--pi-spacing-x-large)),
$margin-left: var(--pi-spacing-x-large)
) {
.pi-shell,
.cdk-overlay-container {
.pi-cell {
.pi-field {
// Incremental field
&.pi-form-field__incremental {
&:not(.pi-form-field__incremental--range) {
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-text-field-wrapper {
max-width: $max-width;
margin-left: $margin-left;
}
}
}
}
}
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Incremental field
&.pi-form-field__incremental {
.mat-mdc-form-field {
width: -webkit-fill-available;
&.mat-focused {
.mat-mdc-form-field-placeholder {
color: var(--pi-color-primary);
}
}
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-underline {
display: none;
}
}
.mat-mdc-form-field-flex {
justify-content: space-between;
align-items: center;
height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small));
.mat-mdc-form-field-infix {
text-align: center;
}
.mat-mdc-form-field-suffix {
padding-right: var(--pi-spacing-medium);
}
.pi-affix {
display: flex;
align-items: center;
gap: var(--pi-spacing-xx-small);
&.pi-affix__suffix {
flex-direction: row-reverse;
}
}
}
input {
&.mat-mdc-input-element {
text-align: right !important;
}
}
// Add & Substract icons
.pi-icon {
&:not(.pi-icon__appearance--fill),
&.pi-icon__small {
border: 1px solid var(--pi-color-primary);
border-radius: var(--pi-border-radius-x-small);
}
}
}
// NOT Has error
&:not(.has-error) {
&:not(.mat-focused) {
.mdc-text-field {
.mdc-text-field__input {
color: var(--pi-color-black);
}
&:not(.mdc-text-field--disabled) {
.mdc-text-field__input {
color: var(--pi-color-black);
}
}
}
}
&.mat-focused {
.mdc-text-field {
.mdc-text-field__input {
color: var(--pi-color-primary);
}
&:not(.mdc-text-field--disabled) {
.mdc-text-field__input {
color: var(--pi-color-primary);
}
}
}
}
}
// has error
&.has-error {
.mdc-text-field {
.mdc-text-field__input {
color: var(--pi-color-warn);
}
&:not(.mdc-text-field--disabled) {
.mdc-text-field__input {
color: var(--pi-color-warn);
}
}
}
}
// Disabled
&.is-disabled {
color: var(--pi-color-grey-200);
}
// Incremental range
&.pi-form-field__incremental--range {
& > form {
display: flex;
gap: var(--pi-spacing-medium);
& > div {
width: -webkit-fill-available;
}
.pi-label {
span {
color: var(--pi-color-primary);
font: {
size: var(--pi-font-size-x-small);
}
}
}
.pi-form-field__incremental {
width: 50%;
}
}
.mat-mdc-form-field-flex {
width: 99%;
}
}
}
}
.pi-dynamic-menu,
.pi-card {
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-input-control {
height: 3.45rem;
}
}
}
// Cells with incrementals inputs: suffix light weight
.pi-cell {
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-icon-suffix {
.pi-affix__suffix {
& > span {
font-weight: 300;
}
}
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Incremental field
&.pi-form-field__incremental {
// Add & Substract icons
.pi-icon {
&:not(.pi-icon__appearance--fill),
&.pi-icon__small {
height: var(--pi-spacing-large);
width: var(--pi-spacing-large);
border-radius: 42%;
.mat-icon {
height: var(--pi-spacing-medium);
width: var(--pi-spacing-medium);
}
}
}
// Incremental range
&.pi-form-field__incremental--range {
.mat-mdc-text-field-wrapper {
.mat-mdc-form-field-input-control {
width: calc(50vw - 9rem);
}
}
}
}
}
}
@include incrementalCellField;
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Incremental field
&.pi-form-field__incremental {
// Add & Substract icons
.pi-icon {
&:not(.pi-icon__appearance--fill),
&.pi-icon__small {
height: var(--pi-spacing-medium);
width: var(--pi-spacing-medium);
border-radius: 42%;
.mat-icon {
height: var(--pi-spacing-small);
width: var(--pi-spacing-small);
}
}
}
}
}
}
}
}
&.is-tablet {
&.is-tablet__small {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large) - 25%),
calc(var(--pi-spacing-xx-large) + 25%)
);
}
&.is-tablet__large {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large) - 12.5%),
calc(var(--pi-spacing-xx-large) + 12.5%)
);
}
}
// Desktop
&.is-desktop {
// Desktop S
&.is-desktop__small {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large)),
calc(var(--pi-spacing-xx-large))
);
}
// Desktop M
&.is-desktop__medium {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large) - 33.33%),
calc(var(--pi-spacing-xx-large) + 33.33%)
);
}
// Desktop L
&.is-desktop__large {
@include incrementalCellField(
calc(100% - var(--pi-spacing-xx-large) - 40%),
calc(var(--pi-spacing-xx-large) + 40%)
);
}
}
}

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

@@ -1,19 +1,19 @@
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Password
&.pi-form-field__password {
button {
&.pi-button__icon {
color: var(--pi-color-grey-200);
&:hover {
&:enabled {
color: var(--pi-color-grey-200);
text-decoration: underline;
}
}
}
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Password
&.pi-form-field__password {
button {
&.pi-button__icon {
color: var(--pi-color-grey-200);
&:hover {
&:enabled {
color: var(--pi-color-grey-200);
text-decoration: underline;
}
}
}
}
}
}
}

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

@@ -1,82 +1,82 @@
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Textarea
&.pi-form-field__textarea {
.mat-mdc-text-field-wrapper {
min-height: 7rem;
&.mdc-text-field--outlined {
.mdc-text-field__input {
padding: var(--pi-spacing-xx-small) 0;
}
}
}
.mat-mdc-form-field {
height: unset;
textarea {
&.mat-mdc-input-element {
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
size: var(--pi-font-size-small);
weight: 300;
}
}
}
// Outline
&.mat-mdc-form-field-appearance-outline {
[class*='mat-form-field-outline-'] {
height: auto;
}
.mat-mdc-form-field-infix {
padding: var(--pi-spacing-small) 0;
textarea {
&.mat-mdc-input-element {
padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small) 0;
}
}
}
}
// fill
&.mat-form-field-appearance-fill {
textarea {
&.mat-mdc-input-element {
// max-width: calc(100% - var(--pi-spacing-medium));
margin-top: var(--pi-spacing-x-small);
background-color: var(--pi-color-background-400);
transition: var(--pi-animation-fast);
}
}
&.mat-form-field-disabled {
textarea {
&.mat-mdc-input-element {
background-color: var(--pi-color-white);
}
}
& + span {
display: none;
}
}
&:not(.mat-form-field-disabled) {
textarea {
&.mat-mdc-input-element {
padding: var(--pi-spacing-x-small);
background-color: var(--pi-color-background-400);
}
}
}
& + span {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: var(--pi-spacing-xx-small);
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Textarea
&.pi-form-field__textarea {
.mat-mdc-text-field-wrapper {
min-height: 7rem;
&.mdc-text-field--outlined {
.mdc-text-field__input {
padding: var(--pi-spacing-xx-small) 0;
}
}
}
.mat-mdc-form-field {
height: unset;
textarea {
&.mat-mdc-input-element {
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
size: var(--pi-font-size-small);
weight: 300;
}
}
}
// Outline
&.mat-mdc-form-field-appearance-outline {
[class*='mat-form-field-outline-'] {
height: auto;
}
.mat-mdc-form-field-infix {
padding: var(--pi-spacing-small) 0;
textarea {
&.mat-mdc-input-element {
padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small) 0;
}
}
}
}
// fill
&.mat-form-field-appearance-fill {
textarea {
&.mat-mdc-input-element {
// max-width: calc(100% - var(--pi-spacing-medium));
margin-top: var(--pi-spacing-x-small);
background-color: var(--pi-color-background-400);
transition: var(--pi-animation-fast);
}
}
&.mat-form-field-disabled {
textarea {
&.mat-mdc-input-element {
background-color: var(--pi-color-white);
}
}
& + span {
display: none;
}
}
&:not(.mat-form-field-disabled) {
textarea {
&.mat-mdc-input-element {
padding: var(--pi-spacing-x-small);
background-color: var(--pi-color-background-400);
}
}
}
& + span {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: var(--pi-spacing-xx-small);
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}

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

@@ -1,181 +1,181 @@
.pi-shell,
.cdk-overlay-container {
.pi-field {
&:not(.pi-form-field__incremental) {
// Icon colors
.mat-mdc-form-field {
&:not(.mat-form-field-invalid) {
&.mat-focused {
.mat-icon {
color: var(--pi-color-primary);
}
}
}
&:not(.mat-form-field-invalid):not(.mat-focused) {
.mat-icon {
color: var(--pi-color-grey-300);
}
}
&.mat-form-field-invalid {
.mat-icon {
color: var(--pi-color-warn);
}
}
}
}
.mat-mdc-form-field-input-control {
font: {
family: 'Soehne', Helvetica, Arial, sans-serif !important;
weight: 300;
}
}
.mdc-text-field {
.mdc-floating-label {
font: {
family: 'Soehne', Helvetica, Arial, sans-serif !important;
weight: 300;
}
}
}
.mdc-text-field--disabled {
.mdc-floating-label {
color: var(--pi-color-grey-300);
}
}
}
}
.pi-shell,
.cdk-overlay-container {
// Cell Fields
.pi-grid-item {
.pi-cell {
.pi-field {
width: 100%;
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-underline {
transform: translateY(calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)));
}
input {
&.mat-mdc-input-element {
height: var(--pi-spacing-xxx-large);
margin-top: unset;
text-align: right !important;
}
}
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
transform: translateY(var(--pi-spacing-xx-small));
}
}
}
&:not(.pi-form-field__incremental) {
input {
&.mat-mdc-input-element {
transform: translateY(var(--pi-spacing-medium));
}
}
}
&.pi-form-field__incremental {
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-infix {
min-height: unset;
}
input {
&.mat-mdc-input-element {
transform: translateY(var(--pi-spacing-xx-small));
}
}
}
}
}
}
.pi-text-viewer__font-weight--600 {
height: calc(var(--pi-spacing-xxxx-large) - 0.0625rem);
}
}
}
}
.cdk-overlay-container,
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-shell,
.cdk-overlay-container {
// Cell Fields
.pi-grid-item {
.pi-cell {
.pi-field {
.mat-mdc-form-field {
.mat-mdc-form-field-flex {
min-height: 3.25rem;
}
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-underline {
transform: translateY(
calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))
);
}
input {
&.mat-mdc-input-element {
height: var(--pi-spacing-xxx-large);
margin-top: unset;
text-align: right !important;
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
}
}
}
&:not(.is-mobile) {
.pi-shell,
.cdk-overlay-container {
// Cell Fields
.pi-grid-item {
.pi-cell {
.pi-field {
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-text-field-wrapper {
margin-left: var(--pi-spacing-xx-large);
}
}
}
&:not(.pi-form-field__incremental) {
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-text-field-wrapper {
max-width: calc(100% - var(--pi-spacing-xx-large));
}
}
}
}
}
.pi-text-viewer__font-weight--600 {
padding-left: var(--pi-spacing-x-large);
}
}
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-field {
&:not(.pi-form-field__incremental) {
// Icon colors
.mat-mdc-form-field {
&:not(.mat-form-field-invalid) {
&.mat-focused {
.mat-icon {
color: var(--pi-color-primary);
}
}
}
&:not(.mat-form-field-invalid):not(.mat-focused) {
.mat-icon {
color: var(--pi-color-grey-300);
}
}
&.mat-form-field-invalid {
.mat-icon {
color: var(--pi-color-warn);
}
}
}
}
.mat-mdc-form-field-input-control {
font: {
family: 'Soehne', Helvetica, Arial, sans-serif !important;
weight: 300;
}
}
.mdc-text-field {
.mdc-floating-label {
font: {
family: 'Soehne', Helvetica, Arial, sans-serif !important;
weight: 300;
}
}
}
.mdc-text-field--disabled {
.mdc-floating-label {
color: var(--pi-color-grey-300);
}
}
}
}
.pi-shell,
.cdk-overlay-container {
// Cell Fields
.pi-grid-item {
.pi-cell {
.pi-field {
width: 100%;
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-underline {
transform: translateY(calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)));
}
input {
&.mat-mdc-input-element {
height: var(--pi-spacing-xxx-large);
margin-top: unset;
text-align: right !important;
}
}
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
transform: translateY(var(--pi-spacing-xx-small));
}
}
}
&:not(.pi-form-field__incremental) {
input {
&.mat-mdc-input-element {
transform: translateY(var(--pi-spacing-medium));
}
}
}
&.pi-form-field__incremental {
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-infix {
min-height: unset;
}
input {
&.mat-mdc-input-element {
transform: translateY(var(--pi-spacing-xx-small));
}
}
}
}
}
}
.pi-text-viewer__font-weight--600 {
height: calc(var(--pi-spacing-xxxx-large) - 0.0625rem);
}
}
}
}
.cdk-overlay-container,
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-shell,
.cdk-overlay-container {
// Cell Fields
.pi-grid-item {
.pi-cell {
.pi-field {
.mat-mdc-form-field {
.mat-mdc-form-field-flex {
min-height: 3.25rem;
}
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-form-field-underline {
transform: translateY(
calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))
);
}
input {
&.mat-mdc-input-element {
height: var(--pi-spacing-xxx-large);
margin-top: unset;
text-align: right !important;
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
}
}
}
&:not(.is-mobile) {
.pi-shell,
.cdk-overlay-container {
// Cell Fields
.pi-grid-item {
.pi-cell {
.pi-field {
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-text-field-wrapper {
margin-left: var(--pi-spacing-xx-large);
}
}
}
&:not(.pi-form-field__incremental) {
.mat-mdc-form-field {
// Fill
&.mat-form-field-appearance-fill {
.mat-mdc-text-field-wrapper {
max-width: calc(100% - var(--pi-spacing-xx-large));
}
}
}
}
}
.pi-text-viewer__font-weight--600 {
padding-left: var(--pi-spacing-x-large);
}
}
}
}
}
}

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

@@ -1,4 +1,4 @@
@forward 'pi-field-incremental';
@forward 'pi-field-password';
@forward 'pi-field-textarea';
@forward 'pi-field';
@forward 'pi-field-incremental';
@forward 'pi-field-password';
@forward 'pi-field-textarea';
@forward 'pi-field';

64
libs/ui/src/lib/styles/common/index.scss
View File

@@ -1,32 +1,32 @@
@use 'abstracts' as *;
@use 'base' as *;
@use 'components' as *;
@use 'layouts' as *;
@use 'vendors' as *;
@use 'wrappers' as *;
@use '@angular/material' as mat;
@include mat.checkbox-density(0);
// TODO: Change import file after checking with Daniel
@import '@typeform/embed/build/css/widget.css';
@import '@typeform/embed/build/css/popup.css';
@include mat.core();
// Palette
$pi-palette-accent: mat.define-palette($pi-color-theme-accent);
$pi-palette-primary: mat.define-palette($pi-color-theme-primary);
$pi-palette-warn: mat.define-palette($pi-color-theme-warn);
// Theme
$pi-theme: mat.define-light-theme(
(
color: (
accent: $pi-palette-accent,
primary: $pi-palette-primary,
warn: $pi-palette-warn,
),
density: 0,
)
);
@include mat.all-component-themes($pi-theme);
@use 'abstracts' as *;
@use 'base' as *;
@use 'components' as *;
@use 'layouts' as *;
@use 'vendors' as *;
@use 'wrappers' as *;
@use '@angular/material' as mat;
@include mat.checkbox-density(0);
// TODO: Change import file after checking with Daniel
@import '@typeform/embed/build/css/widget.css';
@import '@typeform/embed/build/css/popup.css';
@include mat.core();
// Palette
$pi-palette-accent: mat.define-palette($pi-color-theme-accent);
$pi-palette-primary: mat.define-palette($pi-color-theme-primary);
$pi-palette-warn: mat.define-palette($pi-color-theme-warn);
// Theme
$pi-theme: mat.define-light-theme(
(
color: (
accent: $pi-palette-accent,
primary: $pi-palette-primary,
warn: $pi-palette-warn,
),
density: 0,
)
);
@include mat.all-component-themes($pi-theme);

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

File diff suppressed because it is too large Load Diff

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

@@ -1,64 +1,64 @@
@mixin containerWidth($width: calc(100% - var(--pi-spacing-xx-large)), $no-padding-width: 100%) {
.pi-shell {
&.pi-shell__deale-website {
.pi-container-layout {
.pi-layout {
&:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) {
& > *:nth-child(n + 1) {
width: $width;
max-width: $width;
margin: 0 auto;
}
}
&.pi-layout__06-edge-to-edge {
max-width: -webkit-fill-available;
}
&.pi-layout__09-pricing + .pi-layout,
&.pi-layout + .pi-layout__09-pricing {
& > *:nth-child(n + 1) {
max-width: $no-padding-width;
}
}
}
}
}
}
}
.pi-container-layout {
display: block;
}
html {
// Mobile
&.is-mobile {
@include containerWidth;
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include containerWidth(calc(100% - 3rem), 100%);
}
// Tablet L
&.is-tablet__large {
@include containerWidth(calc(100% - var(--pi-spacing-xxxx-large)), 100%);
}
}
// Desktop
&.is-desktop {
// Desktop S & M
&:not(.is-desktop__large) {
@include containerWidth(var(--pi-public-width-container), var(--pi-public-width-container));
}
// Desktop L
&.is-desktop__large {
@include containerWidth(
var(--pi-public-width-container-l),
var(--pi-public-width-container-l)
);
}
}
}
@mixin containerWidth($width: calc(100% - var(--pi-spacing-xx-large)), $no-padding-width: 100%) {
.pi-shell {
&.pi-shell__deale-website {
.pi-container-layout {
.pi-layout {
&:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) {
& > *:nth-child(n + 1) {
width: $width;
max-width: $width;
margin: 0 auto;
}
}
&.pi-layout__06-edge-to-edge {
max-width: -webkit-fill-available;
}
&.pi-layout__09-pricing + .pi-layout,
&.pi-layout + .pi-layout__09-pricing {
& > *:nth-child(n + 1) {
max-width: $no-padding-width;
}
}
}
}
}
}
}
.pi-container-layout {
display: block;
}
html {
// Mobile
&.is-mobile {
@include containerWidth;
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include containerWidth(calc(100% - 3rem), 100%);
}
// Tablet L
&.is-tablet__large {
@include containerWidth(calc(100% - var(--pi-spacing-xxxx-large)), 100%);
}
}
// Desktop
&.is-desktop {
// Desktop S & M
&:not(.is-desktop__large) {
@include containerWidth(var(--pi-public-width-container), var(--pi-public-width-container));
}
// Desktop L
&.is-desktop__large {
@include containerWidth(
var(--pi-public-width-container-l),
var(--pi-public-width-container-l)
);
}
}
}

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

@@ -1,65 +1,65 @@
@mixin layoutHeights(
$small-height: 33.33vh,
$medium-height: 40vh,
$large-height: 75vh,
$full-height: 100vh
) {
.pi-container-layout {
.pi-layout {
// 33.33vh
&.pi-layout__small {
min-height: $small-height;
}
// 33.33vh
&.pi-layout__medium {
min-height: $medium-height;
}
// 75vh
&.pi-layout__large {
min-height: $large-height;
}
// 100vh
&.pi-layout__full {
min-height: $full-height;
}
}
}
}
.pi-container-layout {
.pi-layout {
display: block;
background-size: cover;
& > .pi-background-image {
width: 100%;
}
& > *:nth-child(-2n + 2) {
margin-top: var(--pi-spacing-xx-large);
}
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-large);
}
&.pi-layout__no-padding {
padding: 0;
}
}
}
html {
// Mobile
&.is-mobile {
@include layoutHeights;
}
// Tablet
&.is-tablet {
@include layoutHeights(30vh, 40vh, 66.66vh, 100vh);
}
// Desktop
&.is-desktop {
@include layoutHeights(33.33vh, 50vh, 62vh, 100vh);
}
}
@mixin layoutHeights(
$small-height: 33.33vh,
$medium-height: 40vh,
$large-height: 75vh,
$full-height: 100vh
) {
.pi-container-layout {
.pi-layout {
// 33.33vh
&.pi-layout__small {
min-height: $small-height;
}
// 33.33vh
&.pi-layout__medium {
min-height: $medium-height;
}
// 75vh
&.pi-layout__large {
min-height: $large-height;
}
// 100vh
&.pi-layout__full {
min-height: $full-height;
}
}
}
}
.pi-container-layout {
.pi-layout {
display: block;
background-size: cover;
& > .pi-background-image {
width: 100%;
}
& > *:nth-child(-2n + 2) {
margin-top: var(--pi-spacing-xx-large);
}
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-large);
}
&.pi-layout__no-padding {
padding: 0;
}
}
}
html {
// Mobile
&.is-mobile {
@include layoutHeights;
}
// Tablet
&.is-tablet {
@include layoutHeights(30vh, 40vh, 66.66vh, 100vh);
}
// Desktop
&.is-desktop {
@include layoutHeights(33.33vh, 50vh, 62vh, 100vh);
}
}

6
libs/ui/src/lib/styles/common/layouts/index.scss
View File

@@ -1,3 +1,3 @@
@forward 'pi-09-pricing-layout';
@forward 'pi-container-layout';
@forward 'pi-layout';
@forward 'pi-09-pricing-layout';
@forward 'pi-container-layout';
@forward 'pi-layout';

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

@@ -1,271 +1,271 @@
.ch2 {
.ch2-settings-scan {
.ch2-settings-tabs {
height: 3.3125rem;
}
}
.ch2-theme-bar {
.ch2-dialog {
overflow-x: hidden;
padding: var(--pi-spacing-x-large);
}
}
// Override wrong primary
.ch2-style-light,
.ch2-style-dark {
.ch2-btn-primary {
all: unset;
min-width: 4.125rem;
text-align: center;
&:hover {
background: unset;
box-shadow: unset;
}
}
}
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
&.ch2-btn {
min-height: var(--pi-spacing-xxx-large) !important;
&:not(.ch2-btn-primary) {
padding: var(--pi-spacing-xxxx-small) 0;
}
&.ch2-btn-primary {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
}
}
}
.ch2-btn {
border: 0;
padding: var(--pi-spacing-xxxx-small) 0;
font-size: 15px;
letter-spacing: unset;
text-transform: unset;
min-height: unset !important;
box-shadow: unset;
&:hover {
box-shadow: unset;
}
&.ch2-btn-secondary {
&.ch2-allow-all-btn {
background-color: var(--pi-color-primary);
&:hover {
background-color: var(--pi-color-primary-900);
}
}
&.ch2-deny-all-btn {
background-color: var(--pi-color-warn);
&:hover {
background-color: var(--pi-color-warn-900);
}
}
}
}
.ch2-btn + .ch2-btn {
margin-left: var(--pi-spacing-x-small);
}
.ch2-btn-primary {
&.ch2-deny-all-btn {
color: var(--pi-color-warn);
background-color: transparent;
text-decoration: underline;
&:hover {
&:enabled {
color: var(--pi-color-warn-900);
text-decoration: underline;
}
}
}
&.ch2-allow-all-btn {
width: 9rem;
color: var(--pi-color-white);
background-color: var(--pi-color-primary);
&:hover {
&:enabled {
background-color: var(--pi-color-primary-900);
}
}
}
}
.ch2-style-light {
.ch2-btn-secondary {
&:hover {
background: unset;
}
}
}
.ch2-btn-text {
color: var(--pi-color-black);
background-color: transparent;
text-decoration: underline;
&:hover {
&:enabled {
color: var(--pi-color-black);
text-decoration: underline;
}
}
&:disabled {
color: rgba($color: #3d3d3d, $alpha: 0.6);
}
}
.ch2-icon {
display: none;
position: fixed;
bottom: 2.5rem;
left: 2.5rem;
z-index: 9999;
}
.ch2-btn {
.ch2-open-settings-btn {
.ch2-btn-text {
color: var(--pi-color-warn-900);
}
}
}
.ch2-theme-bar {
.ch2-dialog-actions {
@media screen and (min-width: 30rem) {
gap: var(--pi-spacing-small);
}
button {
&:first-child {
margin-right: unset;
}
&.ch2-btn-text-xxs {
font: {
size: var(--pi-font-size-small);
}
}
}
}
.ch2-dialog-actions-vertical {
div {
gap: var(--pi-spacing-small);
&:last-child {
button {
margin-bottom: unset !important;
margin-left: unset;
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
}
}
}
}
}
.ch2-settings-content {
.ch2-settings-tab-container {
& > button {
margin-right: unset;
}
}
}
.ch2-theme-bar {
.ch2-dialog {
p {
strong {
color: var(--pi-color-grey);
font: {
size: var(--pi-font-size-small);
weight: 700;
}
}
}
}
}
.ch2-style-light {
&.ch2-icon {
a {
color: var(--pi-color-primary);
svg {
border: 0.125rem solid var(--pi-color-primary);
fill: var(--pi-color-primary);
background: var(--pi-color-white);
}
}
}
.ch2-btn-text {
color: var(--pi-color-grey);
}
.ch2-dialog-description {
margin-top: var(--pi-spacing-xxx-small);
}
.ch2-dialog-content {
p {
color: var(--pi-color-grey);
line-height: 150%;
}
}
}
.ch2-icon {
bottom: 0.375rem;
left: 0.375rem;
a {
font: {
size: var(--pi-font-size-small);
weight: unset;
}
text-transform: unset;
}
}
@media screen and (max-width: 700px) {
.ch2-theme-bar {
.ch2-dialog-content {
text-align: center;
}
.ch2-dialog-actions {
button {
margin-top: unset;
}
}
.ch2-dialog-actions {
button {
margin-top: unset;
}
}
.ch2-dialog-actions-vertical {
display: flex;
@media (max-width: 30rem) {
flex-direction: column;
}
& > div {
display: flex;
justify-content: center;
align-items: center;
margin-top: var(--pi-spacing-large);
&:nth-child(1) {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
min-width: unset;
width: 50%;
}
}
}
}
}
}
}
@media (max-width: 700px) {
.ch2-theme-bar {
.ch2-dialog-actions {
margin-top: var(--pi-spacing-xxx-small);
}
}
}
@media screen and (min-width: 700px) {
.ch2-theme-bar {
.ch2-dialog-actions-vertical {
& > div {
&:nth-child(2) {
justify-content: flex-end;
width: -webkit-fill-available;
}
}
}
}
}
}
.ch2 {
.ch2-settings-scan {
.ch2-settings-tabs {
height: 3.3125rem;
}
}
.ch2-theme-bar {
.ch2-dialog {
overflow-x: hidden;
padding: var(--pi-spacing-x-large);
}
}
// Override wrong primary
.ch2-style-light,
.ch2-style-dark {
.ch2-btn-primary {
all: unset;
min-width: 4.125rem;
text-align: center;
&:hover {
background: unset;
box-shadow: unset;
}
}
}
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
&.ch2-btn {
min-height: var(--pi-spacing-xxx-large) !important;
&:not(.ch2-btn-primary) {
padding: var(--pi-spacing-xxxx-small) 0;
}
&.ch2-btn-primary {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
}
}
}
.ch2-btn {
border: 0;
padding: var(--pi-spacing-xxxx-small) 0;
font-size: 15px;
letter-spacing: unset;
text-transform: unset;
min-height: unset !important;
box-shadow: unset;
&:hover {
box-shadow: unset;
}
&.ch2-btn-secondary {
&.ch2-allow-all-btn {
background-color: var(--pi-color-primary);
&:hover {
background-color: var(--pi-color-primary-900);
}
}
&.ch2-deny-all-btn {
background-color: var(--pi-color-warn);
&:hover {
background-color: var(--pi-color-warn-900);
}
}
}
}
.ch2-btn + .ch2-btn {
margin-left: var(--pi-spacing-x-small);
}
.ch2-btn-primary {
&.ch2-deny-all-btn {
color: var(--pi-color-warn);
background-color: transparent;
text-decoration: underline;
&:hover {
&:enabled {
color: var(--pi-color-warn-900);
text-decoration: underline;
}
}
}
&.ch2-allow-all-btn {
width: 9rem;
color: var(--pi-color-white);
background-color: var(--pi-color-primary);
&:hover {
&:enabled {
background-color: var(--pi-color-primary-900);
}
}
}
}
.ch2-style-light {
.ch2-btn-secondary {
&:hover {
background: unset;
}
}
}
.ch2-btn-text {
color: var(--pi-color-black);
background-color: transparent;
text-decoration: underline;
&:hover {
&:enabled {
color: var(--pi-color-black);
text-decoration: underline;
}
}
&:disabled {
color: rgba($color: #3d3d3d, $alpha: 0.6);
}
}
.ch2-icon {
display: none;
position: fixed;
bottom: 2.5rem;
left: 2.5rem;
z-index: 9999;
}
.ch2-btn {
.ch2-open-settings-btn {
.ch2-btn-text {
color: var(--pi-color-warn-900);
}
}
}
.ch2-theme-bar {
.ch2-dialog-actions {
@media screen and (min-width: 30rem) {
gap: var(--pi-spacing-small);
}
button {
&:first-child {
margin-right: unset;
}
&.ch2-btn-text-xxs {
font: {
size: var(--pi-font-size-small);
}
}
}
}
.ch2-dialog-actions-vertical {
div {
gap: var(--pi-spacing-small);
&:last-child {
button {
margin-bottom: unset !important;
margin-left: unset;
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
}
}
}
}
}
.ch2-settings-content {
.ch2-settings-tab-container {
& > button {
margin-right: unset;
}
}
}
.ch2-theme-bar {
.ch2-dialog {
p {
strong {
color: var(--pi-color-grey);
font: {
size: var(--pi-font-size-small);
weight: 700;
}
}
}
}
}
.ch2-style-light {
&.ch2-icon {
a {
color: var(--pi-color-primary);
svg {
border: 0.125rem solid var(--pi-color-primary);
fill: var(--pi-color-primary);
background: var(--pi-color-white);
}
}
}
.ch2-btn-text {
color: var(--pi-color-grey);
}
.ch2-dialog-description {
margin-top: var(--pi-spacing-xxx-small);
}
.ch2-dialog-content {
p {
color: var(--pi-color-grey);
line-height: 150%;
}
}
}
.ch2-icon {
bottom: 0.375rem;
left: 0.375rem;
a {
font: {
size: var(--pi-font-size-small);
weight: unset;
}
text-transform: unset;
}
}
@media screen and (max-width: 700px) {
.ch2-theme-bar {
.ch2-dialog-content {
text-align: center;
}
.ch2-dialog-actions {
button {
margin-top: unset;
}
}
.ch2-dialog-actions {
button {
margin-top: unset;
}
}
.ch2-dialog-actions-vertical {
display: flex;
@media (max-width: 30rem) {
flex-direction: column;
}
& > div {
display: flex;
justify-content: center;
align-items: center;
margin-top: var(--pi-spacing-large);
&:nth-child(1) {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
min-width: unset;
width: 50%;
}
}
}
}
}
}
}
@media (max-width: 700px) {
.ch2-theme-bar {
.ch2-dialog-actions {
margin-top: var(--pi-spacing-xxx-small);
}
}
}
@media screen and (min-width: 700px) {
.ch2-theme-bar {
.ch2-dialog-actions-vertical {
& > div {
&:nth-child(2) {
justify-content: flex-end;
width: -webkit-fill-available;
}
}
}
}
}
}

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

@@ -1,177 +1,177 @@
@mixin checkboxColor($color) {
.mat-mdc-checkbox {
.mdc-checkbox__native-control {
// Colors by state
&:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-#{$color}) !important;
}
}
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-select-option {
@include checkboxColor(primary-200);
}
@include checkboxColor(grey-100);
// Checkbox
.mdc-checkbox__background {
border-radius: var(--pi-border-radius-x-small);
}
.mdc-checkbox__background {
border: 1px solid;
}
.mat-mdc-checkbox {
&.mat-accent {
--mdc-checkbox-selected-checkmark-color: #3d3d3d;
--mdc-checkbox-selected-focus-icon-color: #799ef0;
--mdc-checkbox-selected-hover-icon-color: #799ef0;
--mdc-checkbox-selected-icon-color: #799ef0;
--mdc-checkbox-selected-pressed-icon-color: #799ef0;
--mdc-checkbox-unselected-focus-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-unselected-icon-color: rgba(196, 213, 255, 0.15);
--mdc-checkbox-unselected-icon-color: rgba(196, 213, 255, 0);
--mdc-checkbox-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15);
--mdc-checkbox-selected-checkmark-color: rgba(227, 246, 249, 1);
}
.mdc-checkbox__ripple {
background: var(--pi-color-primary-200-rgba);
}
.mdc-form-field {
gap: var(--pi-spacing-xx-small);
color: var(--pi-color-black);
}
.mdc-checkbox {
padding: calc(
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
);
margin: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
);
.mdc-checkbox__background {
top: calc((var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2);
left: calc(
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
);
}
.mdc-checkbox__native-control {
top: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
);
right: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
);
left: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
);
width: 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
&:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
& ~ .mdc-checkbox__background {
border: 1px solid;
}
}
&:checked {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-primary);
background-color: var(--pi-color-white);
}
}
& ~ .mdc-checkbox__background {
.mdc-checkbox__checkmark {
color: var(--pi-color-primary);
transform: scale(0.7);
.mdc-checkbox__checkmark-path {
stroke-width: 0.3125rem;
}
}
}
}
}
&:hover {
.mdc-checkbox__native-control {
&:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-primary);
}
}
&:checked {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-primary);
background-color: var(--pi-color-white);
}
}
}
}
}
}
// Checked
&.mat-mdc-checkbox-checked {
.mdc-checkbox {
background-color: var(--pi-color-primary-50);
border-radius: 0.4375rem;
}
}
}
// Pseudo checkbox
.mat-pseudo-checkbox {
border-radius: var(--pi-border-radius-x-small);
}
.mat-pseudo-checkbox-full {
border: 0.0625rem solid;
}
.mat-pseudo-checkbox-full {
&.mat-pseudo-checkbox-checked {
&::after {
content: '';
top: -2px;
height: 0.2188rem;
width: 0.4rem;
}
&::before {
content: '';
position: absolute;
top: -0.25rem;
left: -0.25rem;
z-index: -1;
height: var(--pi-spacing-x-large);
width: var(--pi-spacing-x-large);
padding: var(--pi-spacing-xxx-small);
border-radius: 0.4375rem;
border-color: var(--pi-color-primary);
background-color: var(--pi-color-primary-50);
}
}
}
.mat-mdc-checkbox-ripple,
.mdc-checkbox__ripple {
display: none;
}
}
@mixin checkboxColor($color) {
.mat-mdc-checkbox {
.mdc-checkbox__native-control {
// Colors by state
&:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-#{$color}) !important;
}
}
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-select-option {
@include checkboxColor(primary-200);
}
@include checkboxColor(grey-100);
// Checkbox
.mdc-checkbox__background {
border-radius: var(--pi-border-radius-x-small);
}
.mdc-checkbox__background {
border: 1px solid;
}
.mat-mdc-checkbox {
&.mat-accent {
--mdc-checkbox-selected-checkmark-color: #3d3d3d;
--mdc-checkbox-selected-focus-icon-color: #799ef0;
--mdc-checkbox-selected-hover-icon-color: #799ef0;
--mdc-checkbox-selected-icon-color: #799ef0;
--mdc-checkbox-selected-pressed-icon-color: #799ef0;
--mdc-checkbox-unselected-focus-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-unselected-icon-color: rgba(196, 213, 255, 0.15);
--mdc-checkbox-unselected-icon-color: rgba(196, 213, 255, 0);
--mdc-checkbox-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15);
--mdc-checkbox-selected-checkmark-color: rgba(227, 246, 249, 1);
}
.mdc-checkbox__ripple {
background: var(--pi-color-primary-200-rgba);
}
.mdc-form-field {
gap: var(--pi-spacing-xx-small);
color: var(--pi-color-black);
}
.mdc-checkbox {
padding: calc(
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
);
margin: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
);
.mdc-checkbox__background {
top: calc((var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2);
left: calc(
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
);
}
.mdc-checkbox__native-control {
top: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
);
right: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
);
left: calc(
(
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
) / 2
);
width: 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
&:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
& ~ .mdc-checkbox__background {
border: 1px solid;
}
}
&:checked {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-primary);
background-color: var(--pi-color-white);
}
}
& ~ .mdc-checkbox__background {
.mdc-checkbox__checkmark {
color: var(--pi-color-primary);
transform: scale(0.7);
.mdc-checkbox__checkmark-path {
stroke-width: 0.3125rem;
}
}
}
}
}
&:hover {
.mdc-checkbox__native-control {
&:enabled {
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-primary);
}
}
&:checked {
& ~ .mdc-checkbox__background {
border-color: var(--pi-color-primary);
background-color: var(--pi-color-white);
}
}
}
}
}
}
// Checked
&.mat-mdc-checkbox-checked {
.mdc-checkbox {
background-color: var(--pi-color-primary-50);
border-radius: 0.4375rem;
}
}
}
// Pseudo checkbox
.mat-pseudo-checkbox {
border-radius: var(--pi-border-radius-x-small);
}
.mat-pseudo-checkbox-full {
border: 0.0625rem solid;
}
.mat-pseudo-checkbox-full {
&.mat-pseudo-checkbox-checked {
&::after {
content: '';
top: -2px;
height: 0.2188rem;
width: 0.4rem;
}
&::before {
content: '';
position: absolute;
top: -0.25rem;
left: -0.25rem;
z-index: -1;
height: var(--pi-spacing-x-large);
width: var(--pi-spacing-x-large);
padding: var(--pi-spacing-xxx-small);
border-radius: 0.4375rem;
border-color: var(--pi-color-primary);
background-color: var(--pi-color-primary-50);
}
}
}
.mat-mdc-checkbox-ripple,
.mdc-checkbox__ripple {
display: none;
}
}

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

@@ -1,49 +1,49 @@
.pi-layout {
.mat-mdc-chip {
&.mat-mdc-standard-chip {
color: var(--pi-color-primary);
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small)
var(--pi-spacing-medium);
gap: var(--pi-spacing-xxxx-small);
background-color: transparent;
border: 1px solid;
border-color: var(--pi-color-primary);
.pi-button__icon {
max-height: 0.3125rem;
figure {
width: var(--pi-spacing-small);
transition: all 0.2s ease-in-out;
}
}
&:hover {
cursor: pointer;
&::after {
opacity: 0;
}
.pi-button__icon {
figure {
transform: rotate(90deg);
}
}
}
}
button {
&.pi-button {
&.pi-button__primary {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-button__white
) {
background-color: transparent;
}
}
}
}
}
.mat-mdc-chip-ripple {
font: {
size: var(--pi-font-size-medium);
weight: 300;
}
}
}
.pi-layout {
.mat-mdc-chip {
&.mat-mdc-standard-chip {
color: var(--pi-color-primary);
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small)
var(--pi-spacing-medium);
gap: var(--pi-spacing-xxxx-small);
background-color: transparent;
border: 1px solid;
border-color: var(--pi-color-primary);
.pi-button__icon {
max-height: 0.3125rem;
figure {
width: var(--pi-spacing-small);
transition: all 0.2s ease-in-out;
}
}
&:hover {
cursor: pointer;
&::after {
opacity: 0;
}
.pi-button__icon {
figure {
transform: rotate(90deg);
}
}
}
}
button {
&.pi-button {
&.pi-button__primary {
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
.pi-button__white
) {
background-color: transparent;
}
}
}
}
}
.mat-mdc-chip-ripple {
font: {
size: var(--pi-font-size-medium);
weight: 300;
}
}
}

584
libs/ui/src/lib/styles/common/vendors/_mat-dialog.scss vendored
View File

@@ -1,292 +1,292 @@
@mixin mainContentHeight {
.pi-modal__main-content {
display: block;
& > *:first-child {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 0;
}
// Custom
&.pi-modal__main-content--custom-template {
& > *:first-child {
min-height: 60vh;
}
}
// Dialog
&.pi-modal__main-content--dialog-template {
}
}
}
@mixin modalScrollBar {
&::-webkit-scrollbar {
width: var(--pi-spacing-xxxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: rgba($color: #aeaeb6, $alpha: 0.3);
border-radius: var(--pi-border-radius-small);
&:hover {
background-color: darken($color: #aeaeb6, $amount: 0.5);
}
}
}
.cdk-overlay-container,
.pi-shell {
.mdc-dialog__container {
display: flex;
align-items: stretch;
justify-content: center;
padding: 0;
border-radius: var(--pi-border-radius-medium);
box-shadow: unset;
overflow: hidden;
overflow-y: auto;
.mdc-dialog__surface {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
box-shadow: unset;
}
}
}
.pi-modal__panel {
.pi-modal {
&:not(.pi-modal__custom) {
.pi-headline {
figure {
max-width: 10rem;
}
}
}
&.pi-modal__dialog {
.pi-panel__grey {
max-width: 75%;
margin: 0 auto;
}
}
.pi-modal__main-content {
// Main DIALOG content
&.pi-modal__main-content--dialog-template {
& > .pi-modal__custom-template {
display: flex;
flex-direction: column;
height: 100%;
& > *:nth-child(1) {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-x-large);
flex-grow: 1;
overflow-y: auto;
@include modalScrollBar;
}
& > *:nth-child(2) {
height: var(--pi-height-footer);
}
}
}
// Main CUSTOM content
&.pi-modal__main-content--custom-template {
& > .pi-modal__custom-template {
display: flex;
flex-direction: column;
height: 100%;
& > *:nth-child(1) {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-x-large);
flex-grow: 1;
overflow-y: auto;
@include modalScrollBar;
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
}
& > *:nth-child(2) {
height: 5.5rem;
}
}
}
}
}
.mat-mdc-checkbox-layout {
white-space: unset;
}
// Full
&.pi-modal__panel--full {
width: 90vw;
height: 90vh;
.mat-mdc-dialog-container {
border-radius: var(--pi-border-radius-large);
}
}
}
// Backdrop
.pi-backdrop {
background: rgba(0, 0, 0, 0.4);
}
html {
// Mobile
&.is-mobile {
.pi-modal {
& > .pi-headline {
gap: var(--pi-spacing-medium);
}
@include mainContentHeight;
}
// Panel
.pi-modal__panel {
// Small | Medium
&.pi-modal__panel--small,
&.pi-modal__panel--medium {
width: 83vw;
.pi-modal__main-content {
// Main CUSTOM content
&.pi-modal__main-content--custom-template {
& > .pi-modal__custom-template {
& > *:nth-child(1) {
max-height: calc(85vh - var(--pi-height-footer) - 5rem);
}
}
}
}
}
// Action wrapper
.pi-wrapper {
&.pi-wrapper__action {
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 -6px 34px -17px rgba(191, 191, 191, 0.4);
}
}
}
.pi-modal__main-content {
&.pi-modal__main-content--custom-template {
video {
max-width: 85%;
margin: auto;
}
}
}
}
// Tablet
&.is-tablet {
.pi-modal__panel {
@include mainContentHeight;
// Small
&.pi-modal__panel--small {
width: 50vw;
}
// Medium
&.pi-modal__panel--medium {
width: 70vw;
}
}
&.is-tablet__small {
.pi-modal__main-content {
&.pi-modal__main-content--custom-template {
video {
max-width: 75%;
margin: auto;
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
.pi-modal {
// Type Custom
&.pi-modal__custom {
// Is Closable
&.pi-modal__is-closable {
}
// Is Not Closable
&:not(.pi-modal__is-closable) {
.pi-modal__custom--inner {
main {
& > *:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
}
}
// Type Dialog
&.pi-modal__dialog {
// Is Closable
&.pi-modal__is-closable {
}
// Is Not Closable
&:not(.pi-modal__is-closable) {
& > main {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
}
// Large device
@media screen and (min-width: 62rem) {
.pi-modal__main-content {
&.pi-modal__main-content--custom-template {
height: 100%;
video {
max-width: 66.66%;
margin: auto;
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-modal {
// Type Dialog
&.pi-modal__dialog {
& > main {
& > .pi-headline + section {
margin-top: var(--pi-spacing-x-large);
}
}
}
@include mainContentHeight;
}
.pi-modal__panel {
// Small
&.pi-modal__panel--small {
width: 28vw;
}
// Medium
&.pi-modal__panel--medium {
width: 37vw;
}
}
}
}
@mixin mainContentHeight {
.pi-modal__main-content {
display: block;
& > *:first-child {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 0;
}
// Custom
&.pi-modal__main-content--custom-template {
& > *:first-child {
min-height: 60vh;
}
}
// Dialog
&.pi-modal__main-content--dialog-template {
}
}
}
@mixin modalScrollBar {
&::-webkit-scrollbar {
width: var(--pi-spacing-xxxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: rgba($color: #aeaeb6, $alpha: 0.3);
border-radius: var(--pi-border-radius-small);
&:hover {
background-color: darken($color: #aeaeb6, $amount: 0.5);
}
}
}
.cdk-overlay-container,
.pi-shell {
.mdc-dialog__container {
display: flex;
align-items: stretch;
justify-content: center;
padding: 0;
border-radius: var(--pi-border-radius-medium);
box-shadow: unset;
overflow: hidden;
overflow-y: auto;
.mdc-dialog__surface {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
box-shadow: unset;
}
}
}
.pi-modal__panel {
.pi-modal {
&:not(.pi-modal__custom) {
.pi-headline {
figure {
max-width: 10rem;
}
}
}
&.pi-modal__dialog {
.pi-panel__grey {
max-width: 75%;
margin: 0 auto;
}
}
.pi-modal__main-content {
// Main DIALOG content
&.pi-modal__main-content--dialog-template {
& > .pi-modal__custom-template {
display: flex;
flex-direction: column;
height: 100%;
& > *:nth-child(1) {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-x-large);
flex-grow: 1;
overflow-y: auto;
@include modalScrollBar;
}
& > *:nth-child(2) {
height: var(--pi-height-footer);
}
}
}
// Main CUSTOM content
&.pi-modal__main-content--custom-template {
& > .pi-modal__custom-template {
display: flex;
flex-direction: column;
height: 100%;
& > *:nth-child(1) {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-x-large);
flex-grow: 1;
overflow-y: auto;
@include modalScrollBar;
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
}
& > *:nth-child(2) {
height: 5.5rem;
}
}
}
}
}
.mat-mdc-checkbox-layout {
white-space: unset;
}
// Full
&.pi-modal__panel--full {
width: 90vw;
height: 90vh;
.mat-mdc-dialog-container {
border-radius: var(--pi-border-radius-large);
}
}
}
// Backdrop
.pi-backdrop {
background: rgba(0, 0, 0, 0.4);
}
html {
// Mobile
&.is-mobile {
.pi-modal {
& > .pi-headline {
gap: var(--pi-spacing-medium);
}
@include mainContentHeight;
}
// Panel
.pi-modal__panel {
// Small | Medium
&.pi-modal__panel--small,
&.pi-modal__panel--medium {
width: 83vw;
.pi-modal__main-content {
// Main CUSTOM content
&.pi-modal__main-content--custom-template {
& > .pi-modal__custom-template {
& > *:nth-child(1) {
max-height: calc(85vh - var(--pi-height-footer) - 5rem);
}
}
}
}
}
// Action wrapper
.pi-wrapper {
&.pi-wrapper__action {
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 -6px 34px -17px rgba(191, 191, 191, 0.4);
}
}
}
.pi-modal__main-content {
&.pi-modal__main-content--custom-template {
video {
max-width: 85%;
margin: auto;
}
}
}
}
// Tablet
&.is-tablet {
.pi-modal__panel {
@include mainContentHeight;
// Small
&.pi-modal__panel--small {
width: 50vw;
}
// Medium
&.pi-modal__panel--medium {
width: 70vw;
}
}
&.is-tablet__small {
.pi-modal__main-content {
&.pi-modal__main-content--custom-template {
video {
max-width: 75%;
margin: auto;
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
.pi-modal {
// Type Custom
&.pi-modal__custom {
// Is Closable
&.pi-modal__is-closable {
}
// Is Not Closable
&:not(.pi-modal__is-closable) {
.pi-modal__custom--inner {
main {
& > *:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
}
}
// Type Dialog
&.pi-modal__dialog {
// Is Closable
&.pi-modal__is-closable {
}
// Is Not Closable
&:not(.pi-modal__is-closable) {
& > main {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
}
// Large device
@media screen and (min-width: 62rem) {
.pi-modal__main-content {
&.pi-modal__main-content--custom-template {
height: 100%;
video {
max-width: 66.66%;
margin: auto;
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-modal {
// Type Dialog
&.pi-modal__dialog {
& > main {
& > .pi-headline + section {
margin-top: var(--pi-spacing-x-large);
}
}
}
@include mainContentHeight;
}
.pi-modal__panel {
// Small
&.pi-modal__panel--small {
width: 28vw;
}
// Medium
&.pi-modal__panel--medium {
width: 37vw;
}
}
}
}

26
libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss vendored
View File

@@ -1,13 +1,13 @@
.pi-shell__deale-saas {
.mat-mdc-expansion-panel {
&:not([class*='mat-elevation-z']) {
box-shadow: unset;
}
}
.mat-mdc-expansion-panel-header {
border-bottom: 1px solid var(--pi-color-background-400);
}
.mat-mdc-expansion-panel-body {
padding: var(--pi-spacing-xx-large);
}
}
.pi-shell__deale-saas {
.mat-mdc-expansion-panel {
&:not([class*='mat-elevation-z']) {
box-shadow: unset;
}
}
.mat-mdc-expansion-panel-header {
border-bottom: 1px solid var(--pi-color-background-400);
}
.mat-mdc-expansion-panel-body {
padding: var(--pi-spacing-xx-large);
}
}

856
libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss vendored
View File

@@ -1,428 +1,428 @@
// Appearance outline
@mixin matFormFieldOutline() {
// Appearance Outline
.mat-form-field-appearance-outline {
.mat-mdc-form-field-infix {
transform: translateX(-0.75rem);
}
.mat-mdc-form-field-infix {
min-height: unset;
}
// Focused
&.mat-focused {
[class*='mdc-notched-outline__'] {
max-width: unset;
width: var(--pi-spacing-small);
border-width: 1px;
}
}
// NOT Invalid
&:not(.mat-form-field-invalid) {
&:not(.mat-focused) {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix {
color: var(--pi-color-grey-300);
}
}
}
.mdc-notched-outline {
.mdc-floating-label {
height: var(--pi-spacing-xxxx-large);
}
}
.mdc-text-field {
&:not(.mat-form-field-no-animations) {
.mdc-floating-label {
transform: translate(0, -3rem) scale(1);
}
}
}
.mat-mdc-form-field-flex {
padding: 0 var(--pi-spacing-small);
}
.mdc-notched-outline__leading {
border-radius: 0.875rem 0 0 0.875rem;
}
.mdc-notched-outline__trailing {
border-radius: 0 0.875rem 0.875rem 0;
}
.mat-mdc-form-field-label {
margin-left: var(--pi-spacing-xxxx-small);
margin-right: var(--pi-spacing-xxxx-small);
}
.mat-mdc-form-field-prefix,
.mat-mdc-form-field-suffix {
top: unset;
height: 100%;
.pi-icon__small {
.mat-icon {
height: var(--pi-spacing-x-large);
}
}
}
.mat-mdc-form-field-infix {
flex: auto;
min-width: 0;
width: 11.25rem;
position: relative;
box-sizing: border-box;
height: var(--pi-spacing-xxxx-large);
}
input {
&.mat-mdc-input-element {
height: calc(var(--pi-spacing-xxxx-large) - 0.125rem);
margin-top: 0.0625rem;
}
}
&.mdc-text-field--disabled {
.mat-mdc-input-element,
.mdc-notched-outline,
.mat-icon {
color: var(--pi-color-grey-300);
}
}
// Invalid
&.mat-form-field-invalid {
.mat-mdc-form-field-subscript-wrapper {
height: var(--pi-spacing-x-large);
}
}
// NOT Invalid
&:not(.mat-form-field-invalid) {
.mat-mdc-form-field-subscript-wrapper {
height: var(--pi-spacing-x-small);
}
}
// Outline & default
&:not(.mat-focused):not(.mat-form-field-invalid) {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-grey-200);
}
}
&:hover {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-grey-300);
}
}
}
}
// Outline & Invalid
&.mat-focused {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-primary);
}
}
}
// Outline & Invalid
&.mat-form-field-invalid {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-warn);
}
}
}
}
}
// Appearance fill
@mixin matFormFieldFill() {
.mat-form-field-appearance-fill {
.mat-mdc-text-field-wrapper {
height: unset;
flex: unset;
&:not(.mdc-text-field--outlined) {
.mat-mdc-form-field-infix {
padding-top: unset;
padding-bottom: unset;
}
}
}
// NOT Invalid
&:not(.mat-form-field-invalid) {
&:not(.mat-focused) {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix {
color: var(--pi-color-grey-900);
}
}
}
.mdc-text-field {
padding: unset;
}
.mat-mdc-form-field-infix {
width: 100%;
}
.mdc-text-field--filled {
.mdc-line-ripple {
&::after {
border-bottom-width: 1px;
}
}
&.mdc-text-field--disabled {
.mdc-line-ripple {
&::before {
border-bottom-color: transparent;
}
}
}
.mdc-floating-label--float-above {
transform: translateY(-100%) scale(1);
}
}
.mdc-text-field--filled {
background-color: var(--pi-color-white);
&:not(.mdc-text-field--disabled) {
background-color: transparent;
}
}
&.mdc-text-field--disable {
.mdc-line-ripple {
background-image: unset;
background-size: unset;
background-repeat: unset;
}
}
.mat-mdc-floating-label {
font: {
size: var(--pi-font-size-x-small);
}
}
.mat-mdc-form-field-subscript-wrapper {
display: none;
}
}
}
// State colors
@mixin matFormFieldStateColors {
.mdc-text-field {
&:not(.mdc-text-field--disabled) {
.mdc-text-field__input {
color: var(--pi-color-black);
}
}
&:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
.mdc-floating-label {
color: var(--pi-color-grey-300);
}
}
&.mdc-text-field--invalid {
&:not(.mdc-text-field--disabled) {
.mdc-floating-label {
color: var(--pi-color-warn);
}
}
}
}
// Invalid
&.mat-form-field-invalid {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-infix {
color: var(--pi-color-warn);
}
// Focused
&.mat-focused {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-infix {
color: var(--pi-color-warn);
}
}
}
// NOT Invalid
&:not(.mat-form-field-invalid) {
// Focused
&.mat-focused {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-infix {
color: var(--pi-color-primary);
}
}
}
.mat-mdc-form-field-error {
color: var(--pi-color-warn);
}
// NOT Has Error
&:not(.has-error) {
// Type Fill
.mat-form-field-appearance-fill {
.mdc-text-field--filled {
&:not(.mdc-text-field--disabled) {
.mdc-line-ripple {
&::before {
border-bottom-color: var(--pi-color-grey-100);
}
}
&:hover {
.mdc-line-ripple {
&::before {
border-bottom-color: var(--pi-color-grey-200);
}
}
}
}
}
}
}
// Has Error
&.has-error {
// Type Fill
.mat-form-field-appearance-fill {
.mdc-text-field--filled {
&:not(.mdc-text-field--disabled) {
.mdc-line-ripple {
&::before {
border-bottom-color: var(--pi-color-warn-200);
}
}
&:hover {
.mdc-line-ripple {
&::before {
border-bottom-color: var(--pi-color-warn);
}
}
}
}
}
}
}
// Placeholder
.mat-mdc-form-field-infix {
.mat-mdc-input-element {
&::placeholder {
color: var(--pi-color-grey-300);
-webkit-text-fill-color: var(--pi-color-grey-300);
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Common
.mat-mdc-form-field {
width: 100%;
line-height: 1.65;
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
}
&:focus,
&:hover {
background: none;
}
[class*='mdc-notched-outline__'] {
background-color: var(--pi-color-white);
z-index: -99;
}
.mat-mdc-form-field-focus-overlay {
background-color: unset;
}
// Outlined
.mdc-text-field--outlined {
.mdc-notched-outline {
z-index: -99;
}
.mdc-notched-outline--upgraded {
.mdc-floating-label--float-above {
font : {
size: var(--pi-font-size-x-small);
}
}
}
}
.mdc-notched-outline--notched {
margin-left: unset;
-webkit-clip-path: unset;
clip-path: unset;
.mdc-notched-outline__notch {
border-top: 1px solid;
}
}
.mat-mdc-form-field-subscript-wrapper {
display: flex;
}
.mat-mdc-text-field-wrapper {
&.mdc-text-field--outlined {
.mat-mdc-form-field-infix {
padding-top: 0;
padding-bottom: 0;
}
}
}
}
// Appearance
// Outline
@include matFormFieldOutline;
// Fill
@include matFormFieldFill;
// State colors
@include matFormFieldStateColors;
// Affix
.mat-mdc-form-field-prefix,
.mat-mdc-form-field-suffix {
.mat-icon {
line-height: 100%;
}
}
// Error
.mat-mdc-form-field-error {
font : {
size: var(--pi-font-size-x-small);
}
}
// Hint & Error
.mat-mdc-form-field-hint-wrapper,
.mat-mdc-form-field-error-wrapper {
padding: 0 var(--pi-spacing-xx-small);
}
// Exclude incremental
&:not(.pi-form-field__incremental) {
// Type Fill
.mat-form-field-appearance-fill {
input {
&.mat-mdc-input-element {
all: unset;
height: unset;
width: -webkit-fill-available;
margin-top: 1.875rem;
}
}
}
}
}
}
// Appearance outline
@mixin matFormFieldOutline() {
// Appearance Outline
.mat-form-field-appearance-outline {
.mat-mdc-form-field-infix {
transform: translateX(-0.75rem);
}
.mat-mdc-form-field-infix {
min-height: unset;
}
// Focused
&.mat-focused {
[class*='mdc-notched-outline__'] {
max-width: unset;
width: var(--pi-spacing-small);
border-width: 1px;
}
}
// NOT Invalid
&:not(.mat-form-field-invalid) {
&:not(.mat-focused) {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix {
color: var(--pi-color-grey-300);
}
}
}
.mdc-notched-outline {
.mdc-floating-label {
height: var(--pi-spacing-xxxx-large);
}
}
.mdc-text-field {
&:not(.mat-form-field-no-animations) {
.mdc-floating-label {
transform: translate(0, -3rem) scale(1);
}
}
}
.mat-mdc-form-field-flex {
padding: 0 var(--pi-spacing-small);
}
.mdc-notched-outline__leading {
border-radius: 0.875rem 0 0 0.875rem;
}
.mdc-notched-outline__trailing {
border-radius: 0 0.875rem 0.875rem 0;
}
.mat-mdc-form-field-label {
margin-left: var(--pi-spacing-xxxx-small);
margin-right: var(--pi-spacing-xxxx-small);
}
.mat-mdc-form-field-prefix,
.mat-mdc-form-field-suffix {
top: unset;
height: 100%;
.pi-icon__small {
.mat-icon {
height: var(--pi-spacing-x-large);
}
}
}
.mat-mdc-form-field-infix {
flex: auto;
min-width: 0;
width: 11.25rem;
position: relative;
box-sizing: border-box;
height: var(--pi-spacing-xxxx-large);
}
input {
&.mat-mdc-input-element {
height: calc(var(--pi-spacing-xxxx-large) - 0.125rem);
margin-top: 0.0625rem;
}
}
&.mdc-text-field--disabled {
.mat-mdc-input-element,
.mdc-notched-outline,
.mat-icon {
color: var(--pi-color-grey-300);
}
}
// Invalid
&.mat-form-field-invalid {
.mat-mdc-form-field-subscript-wrapper {
height: var(--pi-spacing-x-large);
}
}
// NOT Invalid
&:not(.mat-form-field-invalid) {
.mat-mdc-form-field-subscript-wrapper {
height: var(--pi-spacing-x-small);
}
}
// Outline & default
&:not(.mat-focused):not(.mat-form-field-invalid) {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-grey-200);
}
}
&:hover {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-grey-300);
}
}
}
}
// Outline & Invalid
&.mat-focused {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-primary);
}
}
}
// Outline & Invalid
&.mat-form-field-invalid {
&:not(.mdc-text-field--disabled) {
[class*='mdc-notched-outline__'] {
border-color: var(--pi-color-warn);
}
}
}
}
}
// Appearance fill
@mixin matFormFieldFill() {
.mat-form-field-appearance-fill {
.mat-mdc-text-field-wrapper {
height: unset;
flex: unset;
&:not(.mdc-text-field--outlined) {
.mat-mdc-form-field-infix {
padding-top: unset;
padding-bottom: unset;
}
}
}
// NOT Invalid
&:not(.mat-form-field-invalid) {
&:not(.mat-focused) {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix {
color: var(--pi-color-grey-900);
}
}
}
.mdc-text-field {
padding: unset;
}
.mat-mdc-form-field-infix {
width: 100%;
}
.mdc-text-field--filled {
.mdc-line-ripple {
&::after {
border-bottom-width: 1px;
}
}
&.mdc-text-field--disabled {
.mdc-line-ripple {
&::before {
border-bottom-color: transparent;
}
}
}
.mdc-floating-label--float-above {
transform: translateY(-100%) scale(1);
}
}
.mdc-text-field--filled {
background-color: var(--pi-color-white);
&:not(.mdc-text-field--disabled) {
background-color: transparent;
}
}
&.mdc-text-field--disable {
.mdc-line-ripple {
background-image: unset;
background-size: unset;
background-repeat: unset;
}
}
.mat-mdc-floating-label {
font: {
size: var(--pi-font-size-x-small);
}
}
.mat-mdc-form-field-subscript-wrapper {
display: none;
}
}
}
// State colors
@mixin matFormFieldStateColors {
.mdc-text-field {
&:not(.mdc-text-field--disabled) {
.mdc-text-field__input {
color: var(--pi-color-black);
}
}
&:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
.mdc-floating-label {
color: var(--pi-color-grey-300);
}
}
&.mdc-text-field--invalid {
&:not(.mdc-text-field--disabled) {
.mdc-floating-label {
color: var(--pi-color-warn);
}
}
}
}
// Invalid
&.mat-form-field-invalid {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-infix {
color: var(--pi-color-warn);
}
// Focused
&.mat-focused {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-infix {
color: var(--pi-color-warn);
}
}
}
// NOT Invalid
&:not(.mat-form-field-invalid) {
// Focused
&.mat-focused {
.mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-infix {
color: var(--pi-color-primary);
}
}
}
.mat-mdc-form-field-error {
color: var(--pi-color-warn);
}
// NOT Has Error
&:not(.has-error) {
// Type Fill
.mat-form-field-appearance-fill {
.mdc-text-field--filled {
&:not(.mdc-text-field--disabled) {
.mdc-line-ripple {
&::before {
border-bottom-color: var(--pi-color-grey-100);
}
}
&:hover {
.mdc-line-ripple {
&::before {
border-bottom-color: var(--pi-color-grey-200);
}
}
}
}
}
}
}
// Has Error
&.has-error {
// Type Fill
.mat-form-field-appearance-fill {
.mdc-text-field--filled {
&:not(.mdc-text-field--disabled) {
.mdc-line-ripple {
&::before {
border-bottom-color: var(--pi-color-warn-200);
}
}
&:hover {
.mdc-line-ripple {
&::before {
border-bottom-color: var(--pi-color-warn);
}
}
}
}
}
}
}
// Placeholder
.mat-mdc-form-field-infix {
.mat-mdc-input-element {
&::placeholder {
color: var(--pi-color-grey-300);
-webkit-text-fill-color: var(--pi-color-grey-300);
}
}
}
}
.pi-shell,
.cdk-overlay-container {
.pi-field {
// Common
.mat-mdc-form-field {
width: 100%;
line-height: 1.65;
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
}
&:focus,
&:hover {
background: none;
}
[class*='mdc-notched-outline__'] {
background-color: var(--pi-color-white);
z-index: -99;
}
.mat-mdc-form-field-focus-overlay {
background-color: unset;
}
// Outlined
.mdc-text-field--outlined {
.mdc-notched-outline {
z-index: -99;
}
.mdc-notched-outline--upgraded {
.mdc-floating-label--float-above {
font : {
size: var(--pi-font-size-x-small);
}
}
}
}
.mdc-notched-outline--notched {
margin-left: unset;
-webkit-clip-path: unset;
clip-path: unset;
.mdc-notched-outline__notch {
border-top: 1px solid;
}
}
.mat-mdc-form-field-subscript-wrapper {
display: flex;
}
.mat-mdc-text-field-wrapper {
&.mdc-text-field--outlined {
.mat-mdc-form-field-infix {
padding-top: 0;
padding-bottom: 0;
}
}
}
}
// Appearance
// Outline
@include matFormFieldOutline;
// Fill
@include matFormFieldFill;
// State colors
@include matFormFieldStateColors;
// Affix
.mat-mdc-form-field-prefix,
.mat-mdc-form-field-suffix {
.mat-icon {
line-height: 100%;
}
}
// Error
.mat-mdc-form-field-error {
font : {
size: var(--pi-font-size-x-small);
}
}
// Hint & Error
.mat-mdc-form-field-hint-wrapper,
.mat-mdc-form-field-error-wrapper {
padding: 0 var(--pi-spacing-xx-small);
}
// Exclude incremental
&:not(.pi-form-field__incremental) {
// Type Fill
.mat-form-field-appearance-fill {
input {
&.mat-mdc-input-element {
all: unset;
height: unset;
width: -webkit-fill-available;
margin-top: 1.875rem;
}
}
}
}
}
}

104
libs/ui/src/lib/styles/common/vendors/_mat-menu.scss vendored
View File

@@ -1,52 +1,52 @@
.pi-shell,
.cdk-overlay-container {
.mat-mdc-menu-panel {
border-radius: var(--pi-border-radius-large);
background-color: rgba($color: white, $alpha: 0.96);
box-shadow: var(--pi-box-shadow-panel);
transition: var(--pi-animation);
transition-duration: 0.15s;
}
.mat-mdc-menu-item {
line-height: 3.4375rem;
height: 3.4375rem;
padding: 0 var(--pi-spacing-x-large);
color: var(--pi-color-highlighted);
transition: var(--pi-animation);
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
size: var(--pi-font-size-small);
}
&:hover:not([disabled]),
&.cdk-program-focused,
&.cdk-keyboard-focused,
.mat-mdc-menu-item-highlighted {
&:not([disabled]) {
color: var(--pi-color-primary);
background: var(--pi-color-primary-50);
}
}
}
.mat-mdc-menu-panel {
min-height: unset;
}
.mat-mdc-menu-content {
&:not(:empty) {
padding-top: unset;
padding-bottom: unset;
}
}
}
html {
&.is-mobile {
.mat-mdc-menu-item {
width: 10rem;
}
}
&:not(.is-mobile) {
.mat-mdc-menu-item {
width: 12rem;
}
}
}
.pi-shell,
.cdk-overlay-container {
.mat-mdc-menu-panel {
border-radius: var(--pi-border-radius-large);
background-color: rgba($color: white, $alpha: 0.96);
box-shadow: var(--pi-box-shadow-panel);
transition: var(--pi-animation);
transition-duration: 0.15s;
}
.mat-mdc-menu-item {
line-height: 3.4375rem;
height: 3.4375rem;
padding: 0 var(--pi-spacing-x-large);
color: var(--pi-color-highlighted);
transition: var(--pi-animation);
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
size: var(--pi-font-size-small);
}
&:hover:not([disabled]),
&.cdk-program-focused,
&.cdk-keyboard-focused,
.mat-mdc-menu-item-highlighted {
&:not([disabled]) {
color: var(--pi-color-primary);
background: var(--pi-color-primary-50);
}
}
}
.mat-mdc-menu-panel {
min-height: unset;
}
.mat-mdc-menu-content {
&:not(:empty) {
padding-top: unset;
padding-bottom: unset;
}
}
}
html {
&.is-mobile {
.mat-mdc-menu-item {
width: 10rem;
}
}
&:not(.is-mobile) {
.mat-mdc-menu-item {
width: 12rem;
}
}
}

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

@@ -1,26 +1,26 @@
.pi-shell {
// Common
.mat-mdc-progress-bar {
height: 0.1875rem;
border-radius: 0.0938rem;
// Type
// Fill
&.mat-mdc-progress-bar-fill {
&::after {
background: var(--pi-color-primary);
}
}
}
// Progress bar in dynamic menu
.pi-dynamic-menu {
.mat-mdc-progress-bar {
height: 0.375rem;
border-radius: 0.125rem;
}
.mdc-linear-progress__bar-inner {
border-style: solid;
border-image: linear-gradient(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1;
border-top-width: var(--mdc-linear-progress-track-height, .375rem);
}
}
}
.pi-shell {
// Common
.mat-mdc-progress-bar {
height: 0.1875rem;
border-radius: 0.0938rem;
// Type
// Fill
&.mat-mdc-progress-bar-fill {
&::after {
background: var(--pi-color-primary);
}
}
}
// Progress bar in dynamic menu
.pi-dynamic-menu {
.mat-mdc-progress-bar {
height: 0.375rem;
border-radius: 0.125rem;
}
.mdc-linear-progress__bar-inner {
border-style: solid;
border-image: linear-gradient(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1;
border-top-width: var(--mdc-linear-progress-track-height, .375rem);
}
}
}

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

@@ -1,5 +1,5 @@
.pi-shell {
.mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: #799ef0;
}
}
.pi-shell {
.mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: #799ef0;
}
}

478
libs/ui/src/lib/styles/common/vendors/_mat-radio-button.scss vendored
View File

@@ -1,239 +1,239 @@
.pi-layout {
.mat-mdc-radio-group {
display: flex;
gap: var(--pi-spacing-x-large);
& > * {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--pi-spacing-xxx-small);
}
.mat-mdc-radio-button {
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
}
}
}
.mdc-radio__outer-circle {
border-width: 0.0625rem;
}
.mat-mdc-radio-button {
&.mat-mdc-radio-checked {
.mat-ripple-element {
background-color: var(--pi-color-primary);
}
}
.mdc-radio {
// Default
.mdc-radio__native-control {
&:enabled {
&:not(:checked) {
& + .mdc-radio__background {
.mdc-radio__outer-circle {
border-color: var(--pi-color-grey-100);
}
}
}
&:checked {
& + .mdc-radio__background {
.mdc-radio__outer-circle,
.mdc-radio__inner-circle {
border-color: var(--pi-color-primary);
}
}
}
}
}
// Hover
&:hover {
.mdc-radio__native-control {
&:enabled {
&:checked {
& + .mdc-radio__background {
.mdc-radio__outer-circle {
border-color: var(--pi-color-primary);
}
}
}
&:not(:checked) {
& + .mdc-radio__background {
.mdc-radio__outer-circle {
border-color: var(--pi-color-grey-200);
}
}
}
}
}
}
// Not disabled
&:not(:disabled) {
&:active {
.mdc-radio__native-control {
&:enabled {
&:checked {
& + .mdc-radio__background {
.mdc-radio__outer-circle,
.mdc-radio__inner-circle {
border-color: var(--pi-color-primary-900);
}
}
}
}
}
}
}
}
&.mat-accent {
--mdc-radio-disabled-selected-icon-color: #3d3d3d;
--mdc-radio-disabled-unselected-icon-color: #3d3d3d;
--mdc-radio-unselected-focus-icon-color: #799ef0;
--mdc-radio-unselected-hover-icon-color: #799ef0;
--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-selected-focus-icon-color: #799ef0;
--mdc-radio-selected-hover-icon-color: #799ef0;
--mdc-radio-selected-icon-color: #799ef0;
--mdc-radio-selected-pressed-icon-color: #799ef0;
--mat-mdc-radio-ripple-color: #3d3d3d;
--mat-mdc-radio-checked-ripple-color: #799ef0;
}
&.mat-mdc-accent {
&.mat-mdc-radio-checked {
.mdc-radio__outer-circle {
border-color: var(--pi-color-primary);
}
}
}
&.mat-mdc-radio-checked {
.mdc-form-field {
font: {
weight: 700;
}
}
}
}
}
.pi-wrapper__form {
.mat-mdc-radio-group {
.pi-list-item {
.mat-mdc-radio-button {
label {
white-space: normal;
}
}
}
}
// Mat Radio Group in Flex Direction Column Wrapper
.pi-wrapper__flex-direction--column {
.mat-mdc-radio-group {
flex-direction: column;
}
}
}
.pi-wrapper__grid--two {
.mat-mdc-radio-label {
min-width: 9rem;
}
}
.mat-mdc-radio-label-content {
white-space: pre-wrap;
word-break: break-word;
}
html {
// Mobile
&.is-mobile {
.pi-layout {
.mat-mdc-radio-group {
flex-direction: column;
gap: var(--pi-spacing-small);
& > * {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
}
.pi-wrapper__form {
.mat-mdc-radio-group {
margin: var(--pi-spacing-xx-large) auto;
gap: var(--pi-spacing-xx-large);
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
.pi-layout {
.mat-mdc-radio-group {
gap: var(--pi-spacing-medium);
[class*='pi-panel__width--'] {
margin: auto;
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.mat-mdc-radio-group {
&.pi-wrapper__grid--two {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--pi-spacing-x-large);
& > *:nth-child(n + 1) {
& > *:nth-child(n + 1) {
max-width: 70%;
&:not(.mat-mdc-radio-label) {
display: block;
margin-top: var(--pi-spacing-xxx-small);
}
}
}
}
}
}
// Tablet L & Desktop S & M
@media screen and (min-width: 62rem) and (max-width: 120rem) {
.pi-layout {
.mat-mdc-radio-group {
gap: var(--pi-spacing-large);
}
}
}
}
// Desktop
&.is-desktop {
// Common
// Desktop S
@media screen and (max-width: 90rem) {
}
// Desktop M
@media screen and (min-width: 90rem) and (max-width: 120rem) {
}
// Desktop L
@media screen and (min-width: 120rem) {
.pi-layout {
.mat-mdc-radio-group {
gap: var(--pi-spacing-x-large);
}
}
}
}
}
.pi-layout {
.mat-mdc-radio-group {
display: flex;
gap: var(--pi-spacing-x-large);
& > * {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--pi-spacing-xxx-small);
}
.mat-mdc-radio-button {
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
}
}
}
.mdc-radio__outer-circle {
border-width: 0.0625rem;
}
.mat-mdc-radio-button {
&.mat-mdc-radio-checked {
.mat-ripple-element {
background-color: var(--pi-color-primary);
}
}
.mdc-radio {
// Default
.mdc-radio__native-control {
&:enabled {
&:not(:checked) {
& + .mdc-radio__background {
.mdc-radio__outer-circle {
border-color: var(--pi-color-grey-100);
}
}
}
&:checked {
& + .mdc-radio__background {
.mdc-radio__outer-circle,
.mdc-radio__inner-circle {
border-color: var(--pi-color-primary);
}
}
}
}
}
// Hover
&:hover {
.mdc-radio__native-control {
&:enabled {
&:checked {
& + .mdc-radio__background {
.mdc-radio__outer-circle {
border-color: var(--pi-color-primary);
}
}
}
&:not(:checked) {
& + .mdc-radio__background {
.mdc-radio__outer-circle {
border-color: var(--pi-color-grey-200);
}
}
}
}
}
}
// Not disabled
&:not(:disabled) {
&:active {
.mdc-radio__native-control {
&:enabled {
&:checked {
& + .mdc-radio__background {
.mdc-radio__outer-circle,
.mdc-radio__inner-circle {
border-color: var(--pi-color-primary-900);
}
}
}
}
}
}
}
}
&.mat-accent {
--mdc-radio-disabled-selected-icon-color: #3d3d3d;
--mdc-radio-disabled-unselected-icon-color: #3d3d3d;
--mdc-radio-unselected-focus-icon-color: #799ef0;
--mdc-radio-unselected-hover-icon-color: #799ef0;
--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-selected-focus-icon-color: #799ef0;
--mdc-radio-selected-hover-icon-color: #799ef0;
--mdc-radio-selected-icon-color: #799ef0;
--mdc-radio-selected-pressed-icon-color: #799ef0;
--mat-mdc-radio-ripple-color: #3d3d3d;
--mat-mdc-radio-checked-ripple-color: #799ef0;
}
&.mat-mdc-accent {
&.mat-mdc-radio-checked {
.mdc-radio__outer-circle {
border-color: var(--pi-color-primary);
}
}
}
&.mat-mdc-radio-checked {
.mdc-form-field {
font: {
weight: 700;
}
}
}
}
}
.pi-wrapper__form {
.mat-mdc-radio-group {
.pi-list-item {
.mat-mdc-radio-button {
label {
white-space: normal;
}
}
}
}
// Mat Radio Group in Flex Direction Column Wrapper
.pi-wrapper__flex-direction--column {
.mat-mdc-radio-group {
flex-direction: column;
}
}
}
.pi-wrapper__grid--two {
.mat-mdc-radio-label {
min-width: 9rem;
}
}
.mat-mdc-radio-label-content {
white-space: pre-wrap;
word-break: break-word;
}
html {
// Mobile
&.is-mobile {
.pi-layout {
.mat-mdc-radio-group {
flex-direction: column;
gap: var(--pi-spacing-small);
& > * {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
}
.pi-wrapper__form {
.mat-mdc-radio-group {
margin: var(--pi-spacing-xx-large) auto;
gap: var(--pi-spacing-xx-large);
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
.pi-layout {
.mat-mdc-radio-group {
gap: var(--pi-spacing-medium);
[class*='pi-panel__width--'] {
margin: auto;
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.mat-mdc-radio-group {
&.pi-wrapper__grid--two {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--pi-spacing-x-large);
& > *:nth-child(n + 1) {
& > *:nth-child(n + 1) {
max-width: 70%;
&:not(.mat-mdc-radio-label) {
display: block;
margin-top: var(--pi-spacing-xxx-small);
}
}
}
}
}
}
// Tablet L & Desktop S & M
@media screen and (min-width: 62rem) and (max-width: 120rem) {
.pi-layout {
.mat-mdc-radio-group {
gap: var(--pi-spacing-large);
}
}
}
}
// Desktop
&.is-desktop {
// Common
// Desktop S
@media screen and (max-width: 90rem) {
}
// Desktop M
@media screen and (min-width: 90rem) and (max-width: 120rem) {
}
// Desktop L
@media screen and (min-width: 120rem) {
.pi-layout {
.mat-mdc-radio-group {
gap: var(--pi-spacing-x-large);
}
}
}
}
}

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

@@ -1,149 +1,149 @@
@mixin sliderChevron($bottom: 1.975rem) {
.pi-slider {
// Flex direction
&.pi-slider__flex-direction--column-reverse {
.mdc-slider {
.mdc-slider__value-indicator-container {
bottom: -1.875rem;
.mdc-slider__value-indicator {
&::before {
bottom: $bottom;
}
}
}
}
}
}
}
.pi-slider {
.mat-mdc-slider {
display: flex;
width: -webkit-fill-availabe;
.mdc-slider__thumb {
.mdc-slider__value-indicator-container {
border-radius: 50% 50% 0;
.mdc-slider__value-indicator {
border-radius: var(--pi-border-radius-small);
transform: scale(1);
background-color: var(--pi-color-primary);
opacity: 1;
&::before {
border-top-color: var(--pi-color-primary);
}
.mdc-slider__value-indicator-text {
white-space: nowrap;
}
}
}
}
}
// Type
// Default
&:not(.pi-slider__range) {
.mat-mdc-slider {
.mat-mdc-slider {
margin-left: var(--pi-spacing-medium);
margin-right: var(--pi-spacing-medium);
}
}
}
// Range
&.pi-slider__range {
.mat-mdc-slider {
margin-left: var(--pi-spacing-xx-large);
margin-right: var(--pi-spacing-xx-large);
}
}
// Flex direction
&.pi-slider__flex-direction--column-reverse {
.mdc-slider {
.mdc-slider__value-indicator-container {
.mdc-slider__value-indicator {
&::before {
border-top: unset;
border-bottom: 0.375rem solid var(--pi-color-primary);
}
}
}
}
}
// Disabled
&.is-disabled {
.mat-mdc-slider {
&.mdc-slider--disabled {
.mdc-slider__track--active_fill {
border-color: var(--pi-color-primary-200);
}
.mdc-slider__thumb-knob {
background-color: var(--pi-color-primary-200);
border-color: var(--pi-color-primary-200);
}
}
.mdc-slider__input {
pointer-events: none;
}
}
.mdc-slider {
.mdc-slider__value-indicator-container {
display: none;
}
}
}
}
.pi-card {
.pi-slider {
// Range
&.pi-slider__range {
.mat-mdc-slider {
margin-bottom: unset;
}
}
}
}
// Slider in dynamic menu
.pi-dynamic-menu {
.pi-slider {
.mat-mdc-slider {
margin-top: var(--pi-spacing-xx-large);
margin-left: var(--pi-spacing-x-large);
margin-right: var(--pi-spacing-xx-large);
}
}
}
html {
// Mobile
&.is-mobile {
@include sliderChevron;
.pi-slider {
// Default
&:not(.pi-slider__range) {
.mat-mdc-slider {
width: calc(
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
var(--pi-spacing-xx-large)
);
}
}
}
.pi-list-item {
&.is-stroked {
.pi-slider {
.mat-mdc-slider {
width: calc(
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) -
var(--pi-spacing-medium)
);
}
}
}
}
}
}
@mixin sliderChevron($bottom: 1.975rem) {
.pi-slider {
// Flex direction
&.pi-slider__flex-direction--column-reverse {
.mdc-slider {
.mdc-slider__value-indicator-container {
bottom: -1.875rem;
.mdc-slider__value-indicator {
&::before {
bottom: $bottom;
}
}
}
}
}
}
}
.pi-slider {
.mat-mdc-slider {
display: flex;
width: -webkit-fill-availabe;
.mdc-slider__thumb {
.mdc-slider__value-indicator-container {
border-radius: 50% 50% 0;
.mdc-slider__value-indicator {
border-radius: var(--pi-border-radius-small);
transform: scale(1);
background-color: var(--pi-color-primary);
opacity: 1;
&::before {
border-top-color: var(--pi-color-primary);
}
.mdc-slider__value-indicator-text {
white-space: nowrap;
}
}
}
}
}
// Type
// Default
&:not(.pi-slider__range) {
.mat-mdc-slider {
.mat-mdc-slider {
margin-left: var(--pi-spacing-medium);
margin-right: var(--pi-spacing-medium);
}
}
}
// Range
&.pi-slider__range {
.mat-mdc-slider {
margin-left: var(--pi-spacing-xx-large);
margin-right: var(--pi-spacing-xx-large);
}
}
// Flex direction
&.pi-slider__flex-direction--column-reverse {
.mdc-slider {
.mdc-slider__value-indicator-container {
.mdc-slider__value-indicator {
&::before {
border-top: unset;
border-bottom: 0.375rem solid var(--pi-color-primary);
}
}
}
}
}
// Disabled
&.is-disabled {
.mat-mdc-slider {
&.mdc-slider--disabled {
.mdc-slider__track--active_fill {
border-color: var(--pi-color-primary-200);
}
.mdc-slider__thumb-knob {
background-color: var(--pi-color-primary-200);
border-color: var(--pi-color-primary-200);
}
}
.mdc-slider__input {
pointer-events: none;
}
}
.mdc-slider {
.mdc-slider__value-indicator-container {
display: none;
}
}
}
}
.pi-card {
.pi-slider {
// Range
&.pi-slider__range {
.mat-mdc-slider {
margin-bottom: unset;
}
}
}
}
// Slider in dynamic menu
.pi-dynamic-menu {
.pi-slider {
.mat-mdc-slider {
margin-top: var(--pi-spacing-xx-large);
margin-left: var(--pi-spacing-x-large);
margin-right: var(--pi-spacing-xx-large);
}
}
}
html {
// Mobile
&.is-mobile {
@include sliderChevron;
.pi-slider {
// Default
&:not(.pi-slider__range) {
.mat-mdc-slider {
width: calc(
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
var(--pi-spacing-xx-large)
);
}
}
}
.pi-list-item {
&.is-stroked {
.pi-slider {
.mat-mdc-slider {
width: calc(
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) -
var(--pi-spacing-medium)
);
}
}
}
}
}
}

202
libs/ui/src/lib/styles/common/vendors/_mat-snackbar.scss vendored
View File

@@ -1,101 +1,101 @@
@mixin snackbarWidth($width: 80vw) {
.cdk-overlay-container {
.mat-mdc-snack-bar-container {
&.pi-snackbar {
width: $width;
max-width: $width;
}
}
}
.pi-layout {
.pi-snackbar {
width: $width;
max-width: $width;
}
}
}
.cdk-overlay-container {
.mat-mdc-snack-bar-container {
background: unset;
margin: var(--pi-spacing-x-large);
&.pi-snackbar {
padding: var(--pi-spacing-large) var(--pi-spacing-x-large);
border-radius: var(--pi-border-radius-large);
box-shadow: var(--pi-box-shadow);
border: 1px solid;
&.pi-snackbar__info {
color: var(--pi-color-primary);
background-color: var(--pi-color-primary-25);
border-color: var(--pi-color-primary-50);
}
&.pi-snackbar__error {
color: var(--pi-color-warn);
background-color: var(--pi-color-warn-25);
border-color: var(--pi-color-warn-50);
}
&.pi-snackbar__success {
color: var(--pi-color-success);
background-color: var(--pi-color-success-25);
border-color: var(--pi-color-success-50);
}
}
.mdc-snackbar__surface {
background-color: transparent;
box-shadow: unset;
}
.mdc-snackbar__label {
padding-left: unset;
padding-right: unset;
padding-top: unset;
padding-bottom: unset;
span {
text-align: left;
line-height: 130%;
}
}
}
}
.pi-layout {
.pi-snackbar {
padding: var(--pi-spacing-medium) var(--pi-spacing-x-large);
border-radius: var(--pi-border-radius-large);
border: 1px solid;
}
}
// Mobile
@media screen and (max-width: 40rem) {
@include snackbarWidth;
.cdk-overlay-container {
.mat-mdc-snack-bar-handset {
.mat-mdc-snack-bar-container {
&.pi-snackbar {
margin: var(--pi-spacing-x-small) auto;
}
}
}
}
}
// Tablet
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
@include snackbarWidth(66.66vw);
}
// Desktop
// Desktop S
@media screen and (min-width: 77.5rem) and (max-width: 90rem) {
@include snackbarWidth(33.33vw);
}
// Desktop M
@media screen and (min-width: 90rem) and (max-width: 120rem) {
@include snackbarWidth(33.33vw);
}
// Desktop L
@media screen and (min-width: 120rem) {
@include snackbarWidth(25vw);
}
@mixin snackbarWidth($width: 80vw) {
.cdk-overlay-container {
.mat-mdc-snack-bar-container {
&.pi-snackbar {
width: $width;
max-width: $width;
}
}
}
.pi-layout {
.pi-snackbar {
width: $width;
max-width: $width;
}
}
}
.cdk-overlay-container {
.mat-mdc-snack-bar-container {
background: unset;
margin: var(--pi-spacing-x-large);
&.pi-snackbar {
padding: var(--pi-spacing-large) var(--pi-spacing-x-large);
border-radius: var(--pi-border-radius-large);
box-shadow: var(--pi-box-shadow);
border: 1px solid;
&.pi-snackbar__info {
color: var(--pi-color-primary);
background-color: var(--pi-color-primary-25);
border-color: var(--pi-color-primary-50);
}
&.pi-snackbar__error {
color: var(--pi-color-warn);
background-color: var(--pi-color-warn-25);
border-color: var(--pi-color-warn-50);
}
&.pi-snackbar__success {
color: var(--pi-color-success);
background-color: var(--pi-color-success-25);
border-color: var(--pi-color-success-50);
}
}
.mdc-snackbar__surface {
background-color: transparent;
box-shadow: unset;
}
.mdc-snackbar__label {
padding-left: unset;
padding-right: unset;
padding-top: unset;
padding-bottom: unset;
span {
text-align: left;
line-height: 130%;
}
}
}
}
.pi-layout {
.pi-snackbar {
padding: var(--pi-spacing-medium) var(--pi-spacing-x-large);
border-radius: var(--pi-border-radius-large);
border: 1px solid;
}
}
// Mobile
@media screen and (max-width: 40rem) {
@include snackbarWidth;
.cdk-overlay-container {
.mat-mdc-snack-bar-handset {
.mat-mdc-snack-bar-container {
&.pi-snackbar {
margin: var(--pi-spacing-x-small) auto;
}
}
}
}
}
// Tablet
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
@include snackbarWidth(66.66vw);
}
// Desktop
// Desktop S
@media screen and (min-width: 77.5rem) and (max-width: 90rem) {
@include snackbarWidth(33.33vw);
}
// Desktop M
@media screen and (min-width: 90rem) and (max-width: 120rem) {
@include snackbarWidth(33.33vw);
}
// Desktop L
@media screen and (min-width: 120rem) {
@include snackbarWidth(25vw);
}

162
libs/ui/src/lib/styles/common/vendors/_mat-tooltip.scss vendored
View File

@@ -1,81 +1,81 @@
.cdk-overlay-container {
.mat-mdc-tooltip {
margin: var(--pi-spacing-xxx-small);
padding: var(--pi-spacing-xx-small) var(--pi-spacing-small);
box-shadow: var(--pi-box-shadow-panel-double);
border-radius: var(--pi-border-radius-medium);
.mdc-tooltip__surface {
text-align: center;
}
}
}
.pi-tooltip {
&::after {
content: '';
position: absolute;
left: calc(50% - 0.5625rem);
top: -0.5rem;
width: 0;
height: 0;
border-left: 0.5625rem solid transparent;
border-right: 0.5625rem solid transparent;
transform: rotate(180deg);
clear: both;
}
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
size: var(--pi-font-size-x-small);
weight: 300;
}
// Color
&.pi-tooltip__white {
background-color: var(--pi-color-background-400);
&::after {
border-top: 0.5rem solid var(--pi-color-background-400);
}
.mdc-tooltip__surface {
color: var(--pi-color-highlighted);
background-color: var(--pi-color-background-400);
}
}
&.pi-tooltip__grey {
background-color: var(--pi-color-grey-200);
&::after {
border-top: 0.5rem solid var(--pi-color-grey-200);
}
.mdc-tooltip__surface {
color: var(--pi-color-background-400);
background-color: var(--pi-color-grey-200);
}
}
&.pi-tooltip__dark {
background-color: var(--pi-color-grey);
&::after {
border-top: 0.5rem solid var(--pi-color-grey);
}
.mdc-tooltip__surface {
color: var(--pi-color-background-400);
background-color: var(--pi-color-grey);
}
}
// Type
&.pi-tooltip__type--error {
background-color: var(--pi-color-background-400);
&::after {
border-top: 0.5rem solid var(--pi-color-background-400);
}
.mdc-tooltip__surface {
color: var(--pi-color-warn);
background-color: var(--pi-color-background-400);
}
}
}
.cdk-overlay-container {
.mat-mdc-tooltip {
margin: var(--pi-spacing-xxx-small);
padding: var(--pi-spacing-xx-small) var(--pi-spacing-small);
box-shadow: var(--pi-box-shadow-panel-double);
border-radius: var(--pi-border-radius-medium);
.mdc-tooltip__surface {
text-align: center;
}
}
}
.pi-tooltip {
&::after {
content: '';
position: absolute;
left: calc(50% - 0.5625rem);
top: -0.5rem;
width: 0;
height: 0;
border-left: 0.5625rem solid transparent;
border-right: 0.5625rem solid transparent;
transform: rotate(180deg);
clear: both;
}
font: {
family: 'Soehne', Helvetica, Arial, sans-serif;
size: var(--pi-font-size-x-small);
weight: 300;
}
// Color
&.pi-tooltip__white {
background-color: var(--pi-color-background-400);
&::after {
border-top: 0.5rem solid var(--pi-color-background-400);
}
.mdc-tooltip__surface {
color: var(--pi-color-highlighted);
background-color: var(--pi-color-background-400);
}
}
&.pi-tooltip__grey {
background-color: var(--pi-color-grey-200);
&::after {
border-top: 0.5rem solid var(--pi-color-grey-200);
}
.mdc-tooltip__surface {
color: var(--pi-color-background-400);
background-color: var(--pi-color-grey-200);
}
}
&.pi-tooltip__dark {
background-color: var(--pi-color-grey);
&::after {
border-top: 0.5rem solid var(--pi-color-grey);
}
.mdc-tooltip__surface {
color: var(--pi-color-background-400);
background-color: var(--pi-color-grey);
}
}
// Type
&.pi-tooltip__type--error {
background-color: var(--pi-color-background-400);
&::after {
border-top: 0.5rem solid var(--pi-color-background-400);
}
.mdc-tooltip__surface {
color: var(--pi-color-warn);
background-color: var(--pi-color-background-400);
}
}
}

112
libs/ui/src/lib/styles/common/vendors/_ngx-slider.scss vendored
View File

@@ -1,56 +1,56 @@
.pi-shell__deale-saas,
.pi-shell__deale-website {
.ngx-slider {
& > .ngx-slider-pointer {
background-color: var(--pi-color-primary);
width: 13px;
height: 13px;
top: -5px;
&::after {
display: none;
}
}
& > .ngx-slider-span {
& > .ngx-slider-selection {
background: var(--pi-color-primary);
}
&.ngx-slider-bubble {
&.ngx-slider-model-high,
&.ngx-slider-model-value {
background: var(--pi-color-primary);
border-radius: var(--pi-border-radius-x-small);
padding: var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small);
bottom: 14px;
color: white;
}
}
}
&[disabled] {
& > .ngx-slider-span {
& > .ngx-slider-selection {
background: #d8e0f3;
}
&.ngx-slider-pointer {
background: #d8e0f3;
}
}
}
&.animate {
.ngx-slider-bubble {
&.ngx-slider-limit {
visibility: hidden;
}
}
}
// .ngx-slider.animate .ngx-slider-bubble.ngx-slider-limit {
// display: none;
// }
.ngx-slider .ngx-slider-selection {
background-color: var(--pi-color-primary);
}
}
}
.pi-shell__deale-saas,
.pi-shell__deale-website {
.ngx-slider {
& > .ngx-slider-pointer {
background-color: var(--pi-color-primary);
width: 13px;
height: 13px;
top: -5px;
&::after {
display: none;
}
}
& > .ngx-slider-span {
& > .ngx-slider-selection {
background: var(--pi-color-primary);
}
&.ngx-slider-bubble {
&.ngx-slider-model-high,
&.ngx-slider-model-value {
background: var(--pi-color-primary);
border-radius: var(--pi-border-radius-x-small);
padding: var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small);
bottom: 14px;
color: white;
}
}
}
&[disabled] {
& > .ngx-slider-span {
& > .ngx-slider-selection {
background: #d8e0f3;
}
&.ngx-slider-pointer {
background: #d8e0f3;
}
}
}
&.animate {
.ngx-slider-bubble {
&.ngx-slider-limit {
visibility: hidden;
}
}
}
// .ngx-slider.animate .ngx-slider-bubble.ngx-slider-limit {
// display: none;
// }
.ngx-slider .ngx-slider-selection {
background-color: var(--pi-color-primary);
}
}
}

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

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

30
libs/ui/src/lib/styles/common/vendors/index.scss vendored
View File

@@ -1,15 +1,15 @@
@forward 'ch2-button';
@forward 'mat-checkbox';
@forward 'mat-chip';
@forward 'mat-dialog';
@forward 'mat-expansion-panel';
@forward 'mat-form-field';
@forward 'mat-menu';
@forward 'mat-progress-bar';
@forward 'mat-progress-spinner';
@forward 'mat-radio-button';
@forward 'mat-slider';
@forward 'mat-snackbar';
@forward 'mat-tooltip';
@forward 'ngx-slider';
@forward 'typeform';
@forward 'ch2-button';
@forward 'mat-checkbox';
@forward 'mat-chip';
@forward 'mat-dialog';
@forward 'mat-expansion-panel';
@forward 'mat-form-field';
@forward 'mat-menu';
@forward 'mat-progress-bar';
@forward 'mat-progress-spinner';
@forward 'mat-radio-button';
@forward 'mat-slider';
@forward 'mat-snackbar';
@forward 'mat-tooltip';
@forward 'ngx-slider';
@forward 'typeform';

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

@@ -1,396 +1,396 @@
@mixin fixedActionWrapperMain(
$left: var(--pi-spacing-medium),
$width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium))
) {
.pi-layout {
&.pi-layout__main {
.pi-wrapper {
&.pi-wrapper__action {
&.pi-wrapper__action--position-fixed {
z-index: 999;
left: $left;
width: $width;
transition: var(--pi-animation);
& > button {
&:not(.pi-button__appearance--ghost) {
box-shadow: var(--pi-box-shadow);
}
}
}
}
}
}
}
}
@mixin fixedMobileActionWrapperHorizontalBehavior($side-spacing: medium) {
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
left: var(--pi-spacing-#{$side-spacing});
width: calc(100% - var(--pi-spacing-#{$side-spacing}) - var(--pi-spacing-#{$side-spacing}));
}
}
}
@mixin fixedActionWrapperMainBottom(
$position: fixed,
$bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large))
) {
.pi-layout {
&.pi-layout__main {
.pi-wrapper {
&.pi-wrapper__action {
&.pi-wrapper__action--position-fixed {
position: $position;
bottom: $bottom;
}
}
}
}
}
}
@mixin fixedActionWrapperFullscreen(
$bottom: env(safe-area-inset-bottom),
$padding: var(--pi-spacing-x-large)
) {
.pi-layout {
&:not(.pi-layout__main) {
.pi-wrapper {
&.pi-wrapper__action {
&.pi-wrapper__action--position-fixed {
position: fixed;
z-index: 99;
left: 0;
bottom: $bottom;
width: 100%;
padding: $padding;
background-color: rgba($color: white, $alpha: 0.96);
box-shadow: var(--pi-box-shadow);
}
}
}
}
// Action wrapper in dealbox
.pi-layout__06-edge-to-edge {
.pi-wrapper {
&.pi-wrapper__action {
&.pi-wrapper__action--position-fixed {
background-color: unset;
box-shadow: unset;
}
}
}
}
}
}
.pi-wrapper {
// Action Wrapper
&.pi-wrapper__action {
display: flex;
}
&.pi-wrapper__justify--center {
justify-content: center;
}
}
html {
// Mobile
&.is-mobile {
@include fixedMobileActionWrapperHorizontalBehavior;
}
// Mobile & Tablet
&:not(.is-desktop) {
@include fixedActionWrapperFullscreen;
// Small Device
@media screen and (max-width: 62rem) {
// Navbar layouts
&.pi-layout__02-full-width,
&.pi-layout__07-list {
// Action wrapper // Only fixed in small devices
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
bottom: calc(
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + var(--pi-height-footer) +
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
);
}
}
}
// Fixed Action Wrapper Main Bottom
.pi-shell {
& > div {
// Has Not Sticky Note
&:not(.has-bottom-sticky-note) {
@include fixedActionWrapperMainBottom;
}
// Sticky Note
&.has-bottom-sticky-note {
@include fixedActionWrapperMainBottom(
unset,
calc(
var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large)
)
);
}
}
}
.pi-layout {
.pi-wrapper__action {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button:not(.pi-button__icon):not(
.pi-button__x-small
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not(
.pi-button__xx-small
),
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
padding-left: var(--pi-spacing-small);
padding-right: var(--pi-spacing-small);
}
}
// Fixed mobile
&.pi-wrapper__action--position-fixed-mobile {
position: fixed;
z-index: 99;
button {
box-shadow: var(--pi-box-shadow);
}
}
}
// Full screen layouts
&:not(.pi-layout__07-list):not(.pi-layout__02-full-width) {
// Action wrapper
.pi-wrapper__action {
// Only fixed in small devices
&.pi-wrapper__action--position-fixed-mobile {
left: 0;
bottom: calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
width: 100%;
}
}
}
// Navbar layouts
&.pi-layout__02-full-width,
&.pi-layout__07-list {
// Action wrapper
.pi-wrapper__action {
// Only fixed in small devices
&.pi-wrapper__action--position-fixed-mobile {
bottom: calc(
var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)
);
}
}
}
}
}
}
// Tablet
&.is-tablet {
&.is-tablet__small {
@include fixedMobileActionWrapperHorizontalBehavior(x-large);
@include fixedActionWrapperMain(
var(--pi-spacing-x-large),
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
);
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
left: var(--pi-spacing-x-large);
}
}
}
&.is-tablet__large {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
)
);
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
// Fixed Action Wrapper Main Bottom
.pi-shell {
& > div {
// Has Not Sticky Note
&:not(.has-bottom-sticky-note) {
@include fixedActionWrapperMainBottom(fixed, var(--pi-spacing-x-large));
}
// Sticky Note
&.has-bottom-sticky-note {
@include fixedActionWrapperMainBottom(unset, unset);
}
}
}
}
}
// Desktop
&.is-desktop {
&.is-desktop__small {
// Navbar collapsed
.navbar-is-collapsed {
&.aside-is-open {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem)
);
}
&.aside-is-closed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-xxx-small)
)
);
}
}
// Navbar expanded
.navbar-is-expanded {
// Aside is open
&.aside-is-open {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem)
);
}
// Aside is closed
&.aside-is-closed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem
)
);
}
}
@include fixedActionWrapperFullscreen(0, var(--pi-spacing-xx-large));
}
&.is-desktop__medium {
// Navbar collapsed
.navbar-is-collapsed {
// Aside is open
&.aside-is-open {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem)
);
}
// Aside is closed
&.aside-is-closed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
var(--pi-width-container)
);
}
}
// Navbar expanded
.navbar-is-expanded {
// Aside is open
&.aside-is-open {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem)
);
}
// Aside is closed
&.aside-is-closed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
var(--pi-width-container)
);
}
}
@include fixedActionWrapperFullscreen(
0,
var(--pi-spacing-xx-large) var(--pi-spacing-xxx-large)
);
}
&.is-desktop__large {
// Desktop L
@media screen and (max-width: 140rem) {
// Navbar collapsed
.navbar-is-collapsed {
@include fixedActionWrapperMain(
calc(var(--pi-width-navbar-collapsed) - 4.65rem),
var(--pi-width-container-l)
);
}
// Navbar expanded
.navbar-is-expanded {
@include fixedActionWrapperMain(
calc(var(--pi-width-navbar-expanded) - 12rem),
var(--pi-width-container-l)
);
}
}
// Desktop XL
@media screen and (min-width: 140rem) {
// Navbar collapsed
.navbar-is-collapsed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + 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)
);
}
// Navbar expanded
.navbar-is-expanded {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + 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)
);
}
}
@include fixedActionWrapperFullscreen(
0,
var(--pi-spacing-xx-large) var(--pi-spacing-xxxx-large)
);
}
}
}
@mixin fixedActionWrapperMain(
$left: var(--pi-spacing-medium),
$width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium))
) {
.pi-layout {
&.pi-layout__main {
.pi-wrapper {
&.pi-wrapper__action {
&.pi-wrapper__action--position-fixed {
z-index: 999;
left: $left;
width: $width;
transition: var(--pi-animation);
& > button {
&:not(.pi-button__appearance--ghost) {
box-shadow: var(--pi-box-shadow);
}
}
}
}
}
}
}
}
@mixin fixedMobileActionWrapperHorizontalBehavior($side-spacing: medium) {
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
left: var(--pi-spacing-#{$side-spacing});
width: calc(100% - var(--pi-spacing-#{$side-spacing}) - var(--pi-spacing-#{$side-spacing}));
}
}
}
@mixin fixedActionWrapperMainBottom(
$position: fixed,
$bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large))
) {
.pi-layout {
&.pi-layout__main {
.pi-wrapper {
&.pi-wrapper__action {
&.pi-wrapper__action--position-fixed {
position: $position;
bottom: $bottom;
}
}
}
}
}
}
@mixin fixedActionWrapperFullscreen(
$bottom: env(safe-area-inset-bottom),
$padding: var(--pi-spacing-x-large)
) {
.pi-layout {
&:not(.pi-layout__main) {
.pi-wrapper {
&.pi-wrapper__action {
&.pi-wrapper__action--position-fixed {
position: fixed;
z-index: 99;
left: 0;
bottom: $bottom;
width: 100%;
padding: $padding;
background-color: rgba($color: white, $alpha: 0.96);
box-shadow: var(--pi-box-shadow);
}
}
}
}
// Action wrapper in dealbox
.pi-layout__06-edge-to-edge {
.pi-wrapper {
&.pi-wrapper__action {
&.pi-wrapper__action--position-fixed {
background-color: unset;
box-shadow: unset;
}
}
}
}
}
}
.pi-wrapper {
// Action Wrapper
&.pi-wrapper__action {
display: flex;
}
&.pi-wrapper__justify--center {
justify-content: center;
}
}
html {
// Mobile
&.is-mobile {
@include fixedMobileActionWrapperHorizontalBehavior;
}
// Mobile & Tablet
&:not(.is-desktop) {
@include fixedActionWrapperFullscreen;
// Small Device
@media screen and (max-width: 62rem) {
// Navbar layouts
&.pi-layout__02-full-width,
&.pi-layout__07-list {
// Action wrapper // Only fixed in small devices
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
bottom: calc(
var(--pi-spacing-x-large) + var(--pi-spacing-x-large) + var(--pi-height-footer) +
var(--pi-spacing-x-large) + env(safe-area-inset-bottom)
);
}
}
}
// Fixed Action Wrapper Main Bottom
.pi-shell {
& > div {
// Has Not Sticky Note
&:not(.has-bottom-sticky-note) {
@include fixedActionWrapperMainBottom;
}
// Sticky Note
&.has-bottom-sticky-note {
@include fixedActionWrapperMainBottom(
unset,
calc(
var(--pi-height-footer) + env(safe-area-inset-bottom) - var(--pi-spacing-x-large)
)
);
}
}
}
.pi-layout {
.pi-wrapper__action {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button:not(.pi-button__icon):not(
.pi-button__x-small
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__trimed):not(
.pi-button__xx-small
),
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
.pi-button__xx-small
) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
padding-left: var(--pi-spacing-small);
padding-right: var(--pi-spacing-small);
}
}
// Fixed mobile
&.pi-wrapper__action--position-fixed-mobile {
position: fixed;
z-index: 99;
button {
box-shadow: var(--pi-box-shadow);
}
}
}
// Full screen layouts
&:not(.pi-layout__07-list):not(.pi-layout__02-full-width) {
// Action wrapper
.pi-wrapper__action {
// Only fixed in small devices
&.pi-wrapper__action--position-fixed-mobile {
left: 0;
bottom: calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
width: 100%;
}
}
}
// Navbar layouts
&.pi-layout__02-full-width,
&.pi-layout__07-list {
// Action wrapper
.pi-wrapper__action {
// Only fixed in small devices
&.pi-wrapper__action--position-fixed-mobile {
bottom: calc(
var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)
);
}
}
}
}
}
}
// Tablet
&.is-tablet {
&.is-tablet__small {
@include fixedMobileActionWrapperHorizontalBehavior(x-large);
@include fixedActionWrapperMain(
var(--pi-spacing-x-large),
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
);
.pi-wrapper__action {
&.pi-wrapper__action--position-fixed-mobile {
left: var(--pi-spacing-x-large);
}
}
}
&.is-tablet__large {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
)
);
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
// Fixed Action Wrapper Main Bottom
.pi-shell {
& > div {
// Has Not Sticky Note
&:not(.has-bottom-sticky-note) {
@include fixedActionWrapperMainBottom(fixed, var(--pi-spacing-x-large));
}
// Sticky Note
&.has-bottom-sticky-note {
@include fixedActionWrapperMainBottom(unset, unset);
}
}
}
}
}
// Desktop
&.is-desktop {
&.is-desktop__small {
// Navbar collapsed
.navbar-is-collapsed {
&.aside-is-open {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem)
);
}
&.aside-is-closed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
90% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-xxx-small)
)
);
}
}
// Navbar expanded
.navbar-is-expanded {
// Aside is open
&.aside-is-open {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem)
);
}
// Aside is closed
&.aside-is-closed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(
90% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-medium) - 0.0625rem
)
);
}
}
@include fixedActionWrapperFullscreen(0, var(--pi-spacing-xx-large));
}
&.is-desktop__medium {
// Navbar collapsed
.navbar-is-collapsed {
// Aside is open
&.aside-is-open {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-collapsed) - var(--pi-width-aside) - 7.75rem)
);
}
// Aside is closed
&.aside-is-closed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
var(--pi-width-container)
);
}
}
// Navbar expanded
.navbar-is-expanded {
// Aside is open
&.aside-is-open {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
calc(100% - var(--pi-width-navbar-expanded) - var(--pi-width-aside) - 7.75rem)
);
}
// Aside is closed
&.aside-is-closed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large) + var(--pi-spacing-x-large)
),
var(--pi-width-container)
);
}
}
@include fixedActionWrapperFullscreen(
0,
var(--pi-spacing-xx-large) var(--pi-spacing-xxx-large)
);
}
&.is-desktop__large {
// Desktop L
@media screen and (max-width: 140rem) {
// Navbar collapsed
.navbar-is-collapsed {
@include fixedActionWrapperMain(
calc(var(--pi-width-navbar-collapsed) - 4.65rem),
var(--pi-width-container-l)
);
}
// Navbar expanded
.navbar-is-expanded {
@include fixedActionWrapperMain(
calc(var(--pi-width-navbar-expanded) - 12rem),
var(--pi-width-container-l)
);
}
}
// Desktop XL
@media screen and (min-width: 140rem) {
// Navbar collapsed
.navbar-is-collapsed {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-collapsed) + 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)
);
}
// Navbar expanded
.navbar-is-expanded {
@include fixedActionWrapperMain(
calc(
var(--pi-width-navbar-expanded) + 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)
);
}
}
@include fixedActionWrapperFullscreen(
0,
var(--pi-spacing-xx-large) var(--pi-spacing-xxxx-large)
);
}
}
}

256
libs/ui/src/lib/styles/common/wrappers/_pi-form-wrapper.scss
View File

@@ -1,128 +1,128 @@
@mixin formWrapperSpacings($spacing: large) {
.pi-wrapper {
&.pi-wrapper__form {
// Vertically behavior
& > form {
& > *:nth-child(n + 2) {
&:not(.pi-text-viewer-link) {
margin-top: var(--pi-spacing-#{$spacing});
}
}
}
}
}
}
.pi-wrapper {
&.pi-wrapper__form {
display: block;
margin-top: var(--pi-spacing-xxxx-small);
& > form {
& > .pi-field {
display: block;
}
& > fieldset {
& > div {
&.pi-wrapper__flex {
& > .pi-form-field__text {
flex: 1;
}
}
}
}
}
h4 {
color: var(--pi-color-primary);
margin-bottom: var(--pi-spacing-x-large);
font: {
size: var(--pi-font-size-small);
}
}
&.pi-wrapper__grid--two {
& > form {
display: grid;
grid-gap: var(--pi-spacing-x-large);
}
}
.pi-wrapper__grid {
fieldset + fieldset {
margin-top: unset;
}
}
.pi-list-item + .pi-list-item {
margin-top: var(--pi-spacing-xxx-small);
}
}
}
@mixin fillFormFieldMinWidth($min-width: calc(100vw - 10rem)) {
.pi-wrapper {
&.pi-wrapper__form {
& > form {
& > .pi-field {
.mat-mdc-form-field-flex {
min-width: $min-width;
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include fillFormFieldMinWidth;
@include formWrapperSpacings;
.pi-wrapper {
&.pi-wrapper__form {
// Horizontally behavior
&.pi-wrapper__grid--half {
& > form {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
@include formWrapperSpacings(x-large);
// Large device
@media screen and (min-width: 62rem) {
.pi-wrapper {
&.pi-wrapper_form {
// Horizontally behavior
&.pi-wrapper__grid--half {
& > form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--pi-spacing-x-large);
}
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include fillFormFieldMinWidth(calc(100vw - 11rem));
}
// Tablet L
&.is-tablet__large {
@include fillFormFieldMinWidth(16rem);
}
}
// Desktop
&.is-desktop {
@include fillFormFieldMinWidth(18.5rem);
}
}
@mixin formWrapperSpacings($spacing: large) {
.pi-wrapper {
&.pi-wrapper__form {
// Vertically behavior
& > form {
& > *:nth-child(n + 2) {
&:not(.pi-text-viewer-link) {
margin-top: var(--pi-spacing-#{$spacing});
}
}
}
}
}
}
.pi-wrapper {
&.pi-wrapper__form {
display: block;
margin-top: var(--pi-spacing-xxxx-small);
& > form {
& > .pi-field {
display: block;
}
& > fieldset {
& > div {
&.pi-wrapper__flex {
& > .pi-form-field__text {
flex: 1;
}
}
}
}
}
h4 {
color: var(--pi-color-primary);
margin-bottom: var(--pi-spacing-x-large);
font: {
size: var(--pi-font-size-small);
}
}
&.pi-wrapper__grid--two {
& > form {
display: grid;
grid-gap: var(--pi-spacing-x-large);
}
}
.pi-wrapper__grid {
fieldset + fieldset {
margin-top: unset;
}
}
.pi-list-item + .pi-list-item {
margin-top: var(--pi-spacing-xxx-small);
}
}
}
@mixin fillFormFieldMinWidth($min-width: calc(100vw - 10rem)) {
.pi-wrapper {
&.pi-wrapper__form {
& > form {
& > .pi-field {
.mat-mdc-form-field-flex {
min-width: $min-width;
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include fillFormFieldMinWidth;
@include formWrapperSpacings;
.pi-wrapper {
&.pi-wrapper__form {
// Horizontally behavior
&.pi-wrapper__grid--half {
& > form {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
@include formWrapperSpacings(x-large);
// Large device
@media screen and (min-width: 62rem) {
.pi-wrapper {
&.pi-wrapper_form {
// Horizontally behavior
&.pi-wrapper__grid--half {
& > form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--pi-spacing-x-large);
}
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include fillFormFieldMinWidth(calc(100vw - 11rem));
}
// Tablet L
&.is-tablet__large {
@include fillFormFieldMinWidth(16rem);
}
}
// Desktop
&.is-desktop {
@include fillFormFieldMinWidth(18.5rem);
}
}

1032
libs/ui/src/lib/styles/common/wrappers/_pi-grid-wrapper.scss
View File

File diff suppressed because it is too large Load Diff

576
libs/ui/src/lib/styles/common/wrappers/_pi-header-wrapper.scss
View File

@@ -1,288 +1,288 @@
@mixin headerWrapperHeight($height: 2.75rem) {
.pi-wrapper {
&.pi-wrapper__header {
&:not(.pi-wrapper__full-grid) {
& > header,
& > .pi-header-wrapper-content__right {
height: $height;
}
}
}
}
}
.pi-wrapper {
// Header Wrapper
&.pi-wrapper__header {
display: flex;
justify-content: space-between;
& > header {
& > .pi-text-viewer {
&:nth-of-type(1) {
&:hover {
cursor: pointer;
& > * {
cursor: pointer;
& > * {
cursor: pointer;
}
}
}
.mat-icon {
transition: all 0.2s ease;
}
&:hover {
.mat-icon {
transform: translateX(-0.25rem);
}
}
}
}
& > span {
color: var(--pi-color-primary);
font: {
size: var(--pi-font-size-medium);
weight: 300;
style: italic;
}
}
& > a {
color: var(--pi-color-grey);
display: flex;
align-items: center;
column-gap: var(--pi-spacing-xx-small);
}
}
// Justify
&.pi-wrapper__justify--center {
margin: auto;
}
// Align items
// End
&.pi-wrapper__align-items--flex-end {
& > header {
display: flex;
align-items: flex-end;
}
.pi-header-wrapper-content {
display: flex;
align-items: flex-end;
height: 100%;
}
}
// Center
&.pi-wrapper__align-items--center {
.pi-header-wrapper-content {
display: flex;
height: 100%;
}
}
// Flex direction
&.pi-wrapper__flex-direction--column {
justify-content: flex-end;
.pi-header-wrapper-content {
flex-direction: column;
gap: var(--pi-spacing-xxx-small);
&.pi-header-wrapper-content__left {
align-items: flex-start;
justify-content: center;
}
}
}
// Full grid
&.pi-wrapper__full-grid {
& > header {
margin-top: var(--pi-spacing-x-small);
width: 100%;
}
}
.pi-form-field__search,
.pi-button__toggle {
&:not(:hover) {
box-shadow: var(--pi-box-shadow);
}
}
}
}
html {
&.is-mobile {
.pi-shell {
&.pi-shell__deale-saas {
@include headerWrapperHeight;
}
}
.pi-layout__main {
.pi-wrapper {
&.pi-wrapper__header {
// Flex direction
&.pi-wrapper__flex-direction--column {
flex-direction: column;
align-items: flex-start;
gap: var(--pi-spacing-medium);
.pi-header-wrapper-content {
&.pi-header-wrapper-content__right {
align-items: flex-start;
}
}
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-header-wrapper-content {
&.pi-header-wrapper-content__center {
width: 100%;
}
&.pi-header-wrapper-content__right {
& > aside {
.pi-form-field__search {
// Is expanded
&.is-expanded {
position: absolute;
left: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-xx-large));
margin-top: -1.5rem;
}
}
.pi-toggle-button {
span {
display: none;
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
.pi-shell {
&.pi-shell__deale-saas {
@include headerWrapperHeight(var(--pi-height-layout-header));
}
}
// Tablet S
&.is-tablet__small {
}
// Tablet L
&.is-tablet__large {
}
}
&:not(.is-mobile) {
.pi-layout__main {
.pi-wrapper {
&.pi-wrapper__header {
// Flex direction
&.pi-wrapper__flex-direction--column {
flex-direction: row;
justify-content: space-between;
.pi-header-wrapper-content {
&.pi-header-wrapper-content__center {
width: 66.66%;
}
&.pi-header-wrapper-content__right {
align-items: flex-end;
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-header-wrapper-content {
&:not(.pi-header-wrapper-content__center) {
width: 50%;
}
}
.pi-shell {
&.pi-shell__deale-saas {
@include headerWrapperHeight(var(--pi-height-layout-header));
}
}
.pi-wrapper {
&.pi-wrapper__header {
// 1/4 - 3/4
&.pi-wrapper__grid--quarter {
& > header {
width: 25%;
}
.pi-header-wrapper-content__right {
width: 75%;
}
}
// 1/3 - 2/3
&.pi-wrapper__grid--third {
& > header {
width: 33.33%;
}
.pi-header-wrapper-content__right {
width: 66.66%;
}
}
// 1/2 - 1/2
&.pi-wrapper__grid--half {
& > header {
width: 50%;
}
.pi-header-wrapper-content__right {
width: 50%;
}
}
// 2/5 - 3/5
&.pi-wrapper__grid--fifth {
& > header {
width: 40%;
}
.pi-header-wrapper-content__right {
width: 60%;
}
}
// Reverse
&.pi-wrapper__grid--reverse-quarter {
& > header {
width: 75%;
}
.pi-header-wrapper-content__right {
width: 25%;
}
}
// 1/3 - 2/3
&.pi-wrapper__grid--reverse-third {
& > header {
width: 66.66%;
}
.pi-header-wrapper-content__right {
width: 33.33%;
}
}
// 3/5 - 2/5
&.pi-wrapper__grid--reverse-fifth {
& > header {
width: 60%;
}
.pi-header-wrapper-content__right {
width: 40%;
}
}
}
}
}
}
@mixin headerWrapperHeight($height: 2.75rem) {
.pi-wrapper {
&.pi-wrapper__header {
&:not(.pi-wrapper__full-grid) {
& > header,
& > .pi-header-wrapper-content__right {
height: $height;
}
}
}
}
}
.pi-wrapper {
// Header Wrapper
&.pi-wrapper__header {
display: flex;
justify-content: space-between;
& > header {
& > .pi-text-viewer {
&:nth-of-type(1) {
&:hover {
cursor: pointer;
& > * {
cursor: pointer;
& > * {
cursor: pointer;
}
}
}
.mat-icon {
transition: all 0.2s ease;
}
&:hover {
.mat-icon {
transform: translateX(-0.25rem);
}
}
}
}
& > span {
color: var(--pi-color-primary);
font: {
size: var(--pi-font-size-medium);
weight: 300;
style: italic;
}
}
& > a {
color: var(--pi-color-grey);
display: flex;
align-items: center;
column-gap: var(--pi-spacing-xx-small);
}
}
// Justify
&.pi-wrapper__justify--center {
margin: auto;
}
// Align items
// End
&.pi-wrapper__align-items--flex-end {
& > header {
display: flex;
align-items: flex-end;
}
.pi-header-wrapper-content {
display: flex;
align-items: flex-end;
height: 100%;
}
}
// Center
&.pi-wrapper__align-items--center {
.pi-header-wrapper-content {
display: flex;
height: 100%;
}
}
// Flex direction
&.pi-wrapper__flex-direction--column {
justify-content: flex-end;
.pi-header-wrapper-content {
flex-direction: column;
gap: var(--pi-spacing-xxx-small);
&.pi-header-wrapper-content__left {
align-items: flex-start;
justify-content: center;
}
}
}
// Full grid
&.pi-wrapper__full-grid {
& > header {
margin-top: var(--pi-spacing-x-small);
width: 100%;
}
}
.pi-form-field__search,
.pi-button__toggle {
&:not(:hover) {
box-shadow: var(--pi-box-shadow);
}
}
}
}
html {
&.is-mobile {
.pi-shell {
&.pi-shell__deale-saas {
@include headerWrapperHeight;
}
}
.pi-layout__main {
.pi-wrapper {
&.pi-wrapper__header {
// Flex direction
&.pi-wrapper__flex-direction--column {
flex-direction: column;
align-items: flex-start;
gap: var(--pi-spacing-medium);
.pi-header-wrapper-content {
&.pi-header-wrapper-content__right {
align-items: flex-start;
}
}
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-header-wrapper-content {
&.pi-header-wrapper-content__center {
width: 100%;
}
&.pi-header-wrapper-content__right {
& > aside {
.pi-form-field__search {
// Is expanded
&.is-expanded {
position: absolute;
left: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-xx-large));
margin-top: -1.5rem;
}
}
.pi-toggle-button {
span {
display: none;
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
.pi-shell {
&.pi-shell__deale-saas {
@include headerWrapperHeight(var(--pi-height-layout-header));
}
}
// Tablet S
&.is-tablet__small {
}
// Tablet L
&.is-tablet__large {
}
}
&:not(.is-mobile) {
.pi-layout__main {
.pi-wrapper {
&.pi-wrapper__header {
// Flex direction
&.pi-wrapper__flex-direction--column {
flex-direction: row;
justify-content: space-between;
.pi-header-wrapper-content {
&.pi-header-wrapper-content__center {
width: 66.66%;
}
&.pi-header-wrapper-content__right {
align-items: flex-end;
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-header-wrapper-content {
&:not(.pi-header-wrapper-content__center) {
width: 50%;
}
}
.pi-shell {
&.pi-shell__deale-saas {
@include headerWrapperHeight(var(--pi-height-layout-header));
}
}
.pi-wrapper {
&.pi-wrapper__header {
// 1/4 - 3/4
&.pi-wrapper__grid--quarter {
& > header {
width: 25%;
}
.pi-header-wrapper-content__right {
width: 75%;
}
}
// 1/3 - 2/3
&.pi-wrapper__grid--third {
& > header {
width: 33.33%;
}
.pi-header-wrapper-content__right {
width: 66.66%;
}
}
// 1/2 - 1/2
&.pi-wrapper__grid--half {
& > header {
width: 50%;
}
.pi-header-wrapper-content__right {
width: 50%;
}
}
// 2/5 - 3/5
&.pi-wrapper__grid--fifth {
& > header {
width: 40%;
}
.pi-header-wrapper-content__right {
width: 60%;
}
}
// Reverse
&.pi-wrapper__grid--reverse-quarter {
& > header {
width: 75%;
}
.pi-header-wrapper-content__right {
width: 25%;
}
}
// 1/3 - 2/3
&.pi-wrapper__grid--reverse-third {
& > header {
width: 66.66%;
}
.pi-header-wrapper-content__right {
width: 33.33%;
}
}
// 3/5 - 2/5
&.pi-wrapper__grid--reverse-fifth {
& > header {
width: 60%;
}
.pi-header-wrapper-content__right {
width: 40%;
}
}
}
}
}
}

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

@@ -1,154 +1,154 @@
@mixin listWrapperHeight($device: mobile, $extra-height: 5.2) {
.pi-layout__07-list {
.pi-wrapper {
&.pi-wrapper__list {
// Has Scroll
&.pi-wrapper__list--has-scroll {
& > section {
overflow-y: scroll;
height: calc(
100vh - var(--pi-height-header-#{$device}) - var(--pi-height-layout-header) - #{$extra-height}rem
);
&::-webkit-scrollbar {
display: none;
}
}
}
}
}
}
}
@mixin listWrapperWidth($width: calc(100% - var(--pi-spacing-xxx-small))) {
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
& > section {
max-width: $width;
}
}
}
}
@mixin listWrapperNoResultsTemplate($min-height, $padding) {
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
& > section {
.pi-wrapper {
&.pi-wrapper__flex-direction--column {
&.pi-wrapper__justify--center {
min-height: $min-height;
padding-top: $padding;
padding-bottom: $padding;
}
}
}
}
}
}
}
// Common
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
header {
&.pi-wrapper__justify--space-between {
& > *:nth-child(n + 1) {
width: -webkit-fill-available;
}
}
}
// Has Scroll
&.pi-wrapper__list--has-scroll {
& > section {
border: 1px solid transparent;
overflow-y: auto;
overflow-x: hidden;
.pi-data-grid__mode--grid {
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
display: none;
}
}
}
}
}
}
// Mode Grid
.is-mode-grid {
@include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large));
.pi-wrapper {
&.pi-wrapper__list {
& > section {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-xxx-small);
.pi-data-grid__mode--grid {
display: flex;
flex-wrap: wrap;
flex-grow: 0;
flex-shrink: 0;
gap: var(--pi-spacing-x-large);
padding-bottom: var(--pi-spacing-medium);
}
}
}
}
}
.is-mode-list {
@include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large));
}
html {
// Mobile
&.is-mobile {
@include listWrapperHeight;
@include listWrapperWidth;
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include listWrapperHeight(tablet, 5.7);
@include listWrapperWidth;
}
// Tablet L
&.is-tablet__large {
@include listWrapperHeight(tablet, 3);
@include listWrapperWidth(100%);
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
// Mode List
.is-mode-list {
.pi-wrapper {
&.pi-wrapper__list {
border-radius: var(--pi-border-radius-large);
background-color: var(--pi-color-white);
box-shadow: var(--pi-box-shadow-panel);
}
}
}
}
}
// Desktop
&.is-desktop {
@include listWrapperWidth(100%);
.pi-layout__07-list {
@include listWrapperHeight(desktop, 7.8);
}
}
}
@mixin listWrapperHeight($device: mobile, $extra-height: 5.2) {
.pi-layout__07-list {
.pi-wrapper {
&.pi-wrapper__list {
// Has Scroll
&.pi-wrapper__list--has-scroll {
& > section {
overflow-y: scroll;
height: calc(
100vh - var(--pi-height-header-#{$device}) - var(--pi-height-layout-header) - #{$extra-height}rem
);
&::-webkit-scrollbar {
display: none;
}
}
}
}
}
}
}
@mixin listWrapperWidth($width: calc(100% - var(--pi-spacing-xxx-small))) {
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
& > section {
max-width: $width;
}
}
}
}
@mixin listWrapperNoResultsTemplate($min-height, $padding) {
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
& > section {
.pi-wrapper {
&.pi-wrapper__flex-direction--column {
&.pi-wrapper__justify--center {
min-height: $min-height;
padding-top: $padding;
padding-bottom: $padding;
}
}
}
}
}
}
}
// Common
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
header {
&.pi-wrapper__justify--space-between {
& > *:nth-child(n + 1) {
width: -webkit-fill-available;
}
}
}
// Has Scroll
&.pi-wrapper__list--has-scroll {
& > section {
border: 1px solid transparent;
overflow-y: auto;
overflow-x: hidden;
.pi-data-grid__mode--grid {
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
display: none;
}
}
}
}
}
}
// Mode Grid
.is-mode-grid {
@include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large));
.pi-wrapper {
&.pi-wrapper__list {
& > section {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-xxx-small);
.pi-data-grid__mode--grid {
display: flex;
flex-wrap: wrap;
flex-grow: 0;
flex-shrink: 0;
gap: var(--pi-spacing-x-large);
padding-bottom: var(--pi-spacing-medium);
}
}
}
}
}
.is-mode-list {
@include listWrapperNoResultsTemplate(57vh, var(--pi-spacing-x-large));
}
html {
// Mobile
&.is-mobile {
@include listWrapperHeight;
@include listWrapperWidth;
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include listWrapperHeight(tablet, 5.7);
@include listWrapperWidth;
}
// Tablet L
&.is-tablet__large {
@include listWrapperHeight(tablet, 3);
@include listWrapperWidth(100%);
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
// Mode List
.is-mode-list {
.pi-wrapper {
&.pi-wrapper__list {
border-radius: var(--pi-border-radius-large);
background-color: var(--pi-color-white);
box-shadow: var(--pi-box-shadow-panel);
}
}
}
}
}
// Desktop
&.is-desktop {
@include listWrapperWidth(100%);
.pi-layout__07-list {
@include listWrapperHeight(desktop, 7.8);
}
}
}

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

@@ -1,164 +1,164 @@
@mixin mainWrapperCentered($height: calc(100% - var(--pi-height-header-mobile))) {
.pi-shell__deale-saas {
& > div {
// NOT Is fullscreen
&:not(.is-fullscreen) {
.pi-layout {
// Main layouts
&.pi-layout__main {
// Center
.pi-wrapper {
&.pi-wrapper__main {
// Center
&.is-centered {
height: $height;
& > section {
height: $height;
}
}
}
}
}
}
}
// Is fullscreen
&.is-fullscreen {
.pi-wrapper {
&.pi-wrapper__main {
// Center
&.is-centered {
height: 100%;
& > section {
height: 100%;
}
}
}
}
}
}
}
}
.pi-wrapper {
&.pi-wrapper__main {
// Main wrapper
& > section {
display: flex;
width: 100%;
}
// Flex direction
&.pi-wrapper__flex-direction--column {
& > section {
flex-direction: column;
}
}
// Type document
&.pi-wrapper__main--type-document {
padding-bottom: calc(var(--pi-height-action-bar) + var(--pi-spacing-x-large));
h1 {
text-align: center;
}
}
// Justify content
&.pi-wrapper__justify--center {
& > section {
justify-content: center;
}
}
// Align items
// Center
&.pi-wrapper__align-items--center {
& > section {
align-items: center;
}
}
// Flex end
&.pi-wrapper__align-items--flex-end {
& > section {
align-items: flex-end;
}
}
// Gap
// 0.75rem - 12px
&.pi-wrapper__gap--s {
& > section {
gap: var(--pi-spacing-small);
}
}
// 1rem - 16px
&.pi-wrapper__gap--m {
& > section {
gap: var(--pi-spacing-medium);
}
}
// 1.25rem - 20px
&.pi-wrapper__gap--l {
& > section {
gap: var(--pi-spacing-large);
}
}
// 1.5rem - 24px
&.pi-wrapper__gap--xl {
& > section {
gap: var(--pi-spacing-x-large);
}
}
// 2rem - 32px
&.pi-wrapper__gap--xxl {
& > section {
gap: var(--pi-spacing-xx-large);
}
}
// 2.5rem - 40px
&.pi-wrapper__gap--xxxl {
gap: var(--pi-spacing-xxx-large);
}
}
}
.pi-main-wrapper-content {
flex: 1 1 auto;
display: block;
& > * + * {
display: block;
margin-top: var(--pi-spacing-x-large);
}
.pi-list-item {
display: flex;
}
&.is-sticky {
height: fit-content;
position: sticky;
top: 0;
z-index: 9;
padding-top: var(--pi-spacing-small);
background-color: var(--pi-color-white);
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
.pi-wrapper {
&.pi-wrapper__main {
& > section {
flex-direction: column;
}
}
}
}
// Mobile & Tablet S
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
@include mainWrapperCentered;
}
}
// Tablet L & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
@include mainWrapperCentered(calc(100% - var(--pi-height-header)));
}
}
}
@mixin mainWrapperCentered($height: calc(100% - var(--pi-height-header-mobile))) {
.pi-shell__deale-saas {
& > div {
// NOT Is fullscreen
&:not(.is-fullscreen) {
.pi-layout {
// Main layouts
&.pi-layout__main {
// Center
.pi-wrapper {
&.pi-wrapper__main {
// Center
&.is-centered {
height: $height;
& > section {
height: $height;
}
}
}
}
}
}
}
// Is fullscreen
&.is-fullscreen {
.pi-wrapper {
&.pi-wrapper__main {
// Center
&.is-centered {
height: 100%;
& > section {
height: 100%;
}
}
}
}
}
}
}
}
.pi-wrapper {
&.pi-wrapper__main {
// Main wrapper
& > section {
display: flex;
width: 100%;
}
// Flex direction
&.pi-wrapper__flex-direction--column {
& > section {
flex-direction: column;
}
}
// Type document
&.pi-wrapper__main--type-document {
padding-bottom: calc(var(--pi-height-action-bar) + var(--pi-spacing-x-large));
h1 {
text-align: center;
}
}
// Justify content
&.pi-wrapper__justify--center {
& > section {
justify-content: center;
}
}
// Align items
// Center
&.pi-wrapper__align-items--center {
& > section {
align-items: center;
}
}
// Flex end
&.pi-wrapper__align-items--flex-end {
& > section {
align-items: flex-end;
}
}
// Gap
// 0.75rem - 12px
&.pi-wrapper__gap--s {
& > section {
gap: var(--pi-spacing-small);
}
}
// 1rem - 16px
&.pi-wrapper__gap--m {
& > section {
gap: var(--pi-spacing-medium);
}
}
// 1.25rem - 20px
&.pi-wrapper__gap--l {
& > section {
gap: var(--pi-spacing-large);
}
}
// 1.5rem - 24px
&.pi-wrapper__gap--xl {
& > section {
gap: var(--pi-spacing-x-large);
}
}
// 2rem - 32px
&.pi-wrapper__gap--xxl {
& > section {
gap: var(--pi-spacing-xx-large);
}
}
// 2.5rem - 40px
&.pi-wrapper__gap--xxxl {
gap: var(--pi-spacing-xxx-large);
}
}
}
.pi-main-wrapper-content {
flex: 1 1 auto;
display: block;
& > * + * {
display: block;
margin-top: var(--pi-spacing-x-large);
}
.pi-list-item {
display: flex;
}
&.is-sticky {
height: fit-content;
position: sticky;
top: 0;
z-index: 9;
padding-top: var(--pi-spacing-small);
background-color: var(--pi-color-white);
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
.pi-wrapper {
&.pi-wrapper__main {
& > section {
flex-direction: column;
}
}
}
}
// Mobile & Tablet S
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
@include mainWrapperCentered;
}
}
// Tablet L & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
@include mainWrapperCentered(calc(100% - var(--pi-height-header)));
}
}
}

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

@@ -1,297 +1,297 @@
.pi-wrapper {
// Align items
&.pi-wrapper__align-items--center {
align-items: center;
}
&.pi-wrapper__align-items--flex-end {
align-items: flex-end;
}
&.pi-wrapper__align-items--stretch {
align-items: stretch;
}
// Flex direction
&.pi-wrapper__flex-direction--column {
flex-direction: column;
}
&.pi-wrapper__flex-direction--column-reverse {
flex-direction: column-reverse;
}
&.pi-wrapper__flex-direction--row-reverse {
flex-direction: row-reverse;
}
&.pi-wrapper__full-width-auto {
margin: auto;
}
&.pi-wrapper__fit-content {
max-width: fit-content;
}
// Justify
&.pi-wrapper__justify--center {
justify-content: center;
}
&.pi-wrapper__justify--flex-end {
justify-content: flex-end;
}
&.pi-wrapper__justify--space-between {
justify-content: space-between;
}
&.pi-wrapper__justify--space-evenly {
justify-content: space-evenly;
}
// Gap
&.pi-wrapper__gap--xxxs {
gap: var(--pi-spacing-xxx-small);
}
// 0.5rem - 8px
&.pi-wrapper__gap--xxs {
gap: var(--pi-spacing-xx-small);
}
// 0.625rem - 10px
&.pi-wrapper__gap--xs {
gap: var(--pi-spacing-x-small);
}
// 0.75rem - 12px
&.pi-wrapper__gap--s {
gap: var(--pi-spacing-small);
}
// 1rem - 16px
&.pi-wrapper__gap--m {
gap: var(--pi-spacing-medium);
}
// 1.25rem - 20px
&.pi-wrapper__gap--l {
gap: var(--pi-spacing-large);
}
// 1.5rem - 24px
&.pi-wrapper__gap--xl {
gap: var(--pi-spacing-x-large);
}
// 2rem - 32px
&.pi-wrapper__gap--xxl {
gap: var(--pi-spacing-xx-large);
}
// 2.5rem - 40px
&.pi-wrapper__gap--xxxl {
gap: var(--pi-spacing-xxx-large);
}
// 3.375rem - 54px
&.pi-wrapper__gap--xxxxl {
gap: var(--pi-spacing-xxxx-large);
}
// Flex directive
&.pi-wrapper__flex {
display: flex;
width: 100%;
// Wrap
&.pi-wrapper__flex-direction--wrap {
flex-wrap: wrap;
gap: var(--pi-spacing-xx-small);
}
// Flex horizontally
// Space between
&.pi-wrapper__justify--space-between {
justify-content: space-between;
}
// Space evenly
&.pi-wrapper__justify--space-around {
justify-content: space-around;
}
// Center
&.pi-wrapper__justify--center {
justify-content: center;
}
// Alignment
// Flex start
&.pi-wrapper__align-items--flex-start {
align-items: flex-start;
}
// Items width
// 25%
&.pi-wrapper__items-width--quarter {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
flex-direction: column;
}
& > *:nth-child(n + 1) {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
width: 100%;
}
// Tablet L
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
width: 33.33%;
}
// Desktop
@media screen and (min-width: 77.5rem) {
width: 25%;
}
}
}
// 33.33%
&.pi-wrapper__items-width--third {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
flex-direction: column;
}
& > *:nth-child(n + 1) {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
width: 100%;
}
// Tablet L
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
width: 50%;
}
// Desktop
@media screen and (min-width: 77.5rem) {
width: 33.33%;
}
}
}
// 50%
&.pi-wrapper__items-width--half {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
flex-direction: column;
}
& > *:nth-child(n + 1) {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
width: 100%;
}
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
width: 50%;
}
}
}
// 100%
&.pi-wrapper__items-width--full {
& > *:nth-child(n + 1) {
width: 100%;
}
}
}
// Padding
&.pi-wrapper__padding--xs {
padding: var(--pi-spacing-x-small);
}
// Border
// Top
&.pi-wrapper__border--top {
border-top: 1px solid var(--pi-color-grey-25);
}
// Bottom
&.pi-wrapper__border--bottom {
border-bottom: 1px solid var(--pi-color-grey-25);
}
}
// Responsive
html {
// Mobile
&.is-mobile {
.pi-wrapper {
// Padding
&.pi-wrapper__has-padding {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
// Grid
&.pi-wrapper__grid {
// Grid half
&.pi-wrapper__grid--half {
grid-template-columns: unset;
}
}
}
}
// Tablet
&.is-tablet {
.pi-wrapper {
// Padding
&.pi-wrapper__has-padding {
padding-left: var(--pi-spacing-xxx-large);
padding-right: var(--pi-spacing-xxx-large);
}
}
}
// Desktop
&.is-desktop {
.pi-wrapper {
// Grid
// 1/4 - 3/4
&.pi-wrapper__grid--quarter {
.pi-main-wrapper-content__left {
width: 25%;
}
.pi-main-wrapper-content__right {
width: 75%;
}
}
// 1/3 - 2/3
&.pi-wrapper__grid--third {
.pi-main-wrapper-content__left {
width: 33.33%;
}
.pi-main-wrapper-content__right {
width: 66.66%;
}
}
// 1/2 - 1/2
&.pi-wrapper__grid--half {
.pi-main-wrapper-content__left {
width: 50%;
}
.pi-main-wrapper-content__right {
width: 50%;
}
}
// 2/5 - 3/5
&.pi-wrapper__grid--fifth {
.pi-main-wrapper-content__left {
width: 40%;
}
.pi-main-wrapper-content__right {
width: 60%;
}
}
// Reverse
&.pi-wrapper__grid--reverse-quarter {
.pi-main-wrapper-content__left {
width: 75%;
}
.pi-main-wrapper-content__right {
width: 25%;
}
}
// 1/3 - 2/3
&.pi-wrapper__grid--reverse-third {
.pi-main-wrapper-content__left {
width: 66.66%;
}
.pi-main-wrapper-content__right {
width: 33.33%;
}
}
// 3/5 - 2/5
&.pi-wrapper__grid--reverse-fifth {
.pi-main-wrapper-content__left {
width: 60%;
}
.pi-main-wrapper-content__right {
width: 40%;
}
}
&.pi-wrapper__has-padding {
padding-left: var(--pi-spacing-xxxx-large);
padding-right: var(--pi-spacing-xxxx-large);
}
}
}
}
.pi-wrapper {
// Align items
&.pi-wrapper__align-items--center {
align-items: center;
}
&.pi-wrapper__align-items--flex-end {
align-items: flex-end;
}
&.pi-wrapper__align-items--stretch {
align-items: stretch;
}
// Flex direction
&.pi-wrapper__flex-direction--column {
flex-direction: column;
}
&.pi-wrapper__flex-direction--column-reverse {
flex-direction: column-reverse;
}
&.pi-wrapper__flex-direction--row-reverse {
flex-direction: row-reverse;
}
&.pi-wrapper__full-width-auto {
margin: auto;
}
&.pi-wrapper__fit-content {
max-width: fit-content;
}
// Justify
&.pi-wrapper__justify--center {
justify-content: center;
}
&.pi-wrapper__justify--flex-end {
justify-content: flex-end;
}
&.pi-wrapper__justify--space-between {
justify-content: space-between;
}
&.pi-wrapper__justify--space-evenly {
justify-content: space-evenly;
}
// Gap
&.pi-wrapper__gap--xxxs {
gap: var(--pi-spacing-xxx-small);
}
// 0.5rem - 8px
&.pi-wrapper__gap--xxs {
gap: var(--pi-spacing-xx-small);
}
// 0.625rem - 10px
&.pi-wrapper__gap--xs {
gap: var(--pi-spacing-x-small);
}
// 0.75rem - 12px
&.pi-wrapper__gap--s {
gap: var(--pi-spacing-small);
}
// 1rem - 16px
&.pi-wrapper__gap--m {
gap: var(--pi-spacing-medium);
}
// 1.25rem - 20px
&.pi-wrapper__gap--l {
gap: var(--pi-spacing-large);
}
// 1.5rem - 24px
&.pi-wrapper__gap--xl {
gap: var(--pi-spacing-x-large);
}
// 2rem - 32px
&.pi-wrapper__gap--xxl {
gap: var(--pi-spacing-xx-large);
}
// 2.5rem - 40px
&.pi-wrapper__gap--xxxl {
gap: var(--pi-spacing-xxx-large);
}
// 3.375rem - 54px
&.pi-wrapper__gap--xxxxl {
gap: var(--pi-spacing-xxxx-large);
}
// Flex directive
&.pi-wrapper__flex {
display: flex;
width: 100%;
// Wrap
&.pi-wrapper__flex-direction--wrap {
flex-wrap: wrap;
gap: var(--pi-spacing-xx-small);
}
// Flex horizontally
// Space between
&.pi-wrapper__justify--space-between {
justify-content: space-between;
}
// Space evenly
&.pi-wrapper__justify--space-around {
justify-content: space-around;
}
// Center
&.pi-wrapper__justify--center {
justify-content: center;
}
// Alignment
// Flex start
&.pi-wrapper__align-items--flex-start {
align-items: flex-start;
}
// Items width
// 25%
&.pi-wrapper__items-width--quarter {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
flex-direction: column;
}
& > *:nth-child(n + 1) {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
width: 100%;
}
// Tablet L
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
width: 33.33%;
}
// Desktop
@media screen and (min-width: 77.5rem) {
width: 25%;
}
}
}
// 33.33%
&.pi-wrapper__items-width--third {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
flex-direction: column;
}
& > *:nth-child(n + 1) {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
width: 100%;
}
// Tablet L
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
width: 50%;
}
// Desktop
@media screen and (min-width: 77.5rem) {
width: 33.33%;
}
}
}
// 50%
&.pi-wrapper__items-width--half {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
flex-direction: column;
}
& > *:nth-child(n + 1) {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
width: 100%;
}
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
width: 50%;
}
}
}
// 100%
&.pi-wrapper__items-width--full {
& > *:nth-child(n + 1) {
width: 100%;
}
}
}
// Padding
&.pi-wrapper__padding--xs {
padding: var(--pi-spacing-x-small);
}
// Border
// Top
&.pi-wrapper__border--top {
border-top: 1px solid var(--pi-color-grey-25);
}
// Bottom
&.pi-wrapper__border--bottom {
border-bottom: 1px solid var(--pi-color-grey-25);
}
}
// Responsive
html {
// Mobile
&.is-mobile {
.pi-wrapper {
// Padding
&.pi-wrapper__has-padding {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
// Grid
&.pi-wrapper__grid {
// Grid half
&.pi-wrapper__grid--half {
grid-template-columns: unset;
}
}
}
}
// Tablet
&.is-tablet {
.pi-wrapper {
// Padding
&.pi-wrapper__has-padding {
padding-left: var(--pi-spacing-xxx-large);
padding-right: var(--pi-spacing-xxx-large);
}
}
}
// Desktop
&.is-desktop {
.pi-wrapper {
// Grid
// 1/4 - 3/4
&.pi-wrapper__grid--quarter {
.pi-main-wrapper-content__left {
width: 25%;
}
.pi-main-wrapper-content__right {
width: 75%;
}
}
// 1/3 - 2/3
&.pi-wrapper__grid--third {
.pi-main-wrapper-content__left {
width: 33.33%;
}
.pi-main-wrapper-content__right {
width: 66.66%;
}
}
// 1/2 - 1/2
&.pi-wrapper__grid--half {
.pi-main-wrapper-content__left {
width: 50%;
}
.pi-main-wrapper-content__right {
width: 50%;
}
}
// 2/5 - 3/5
&.pi-wrapper__grid--fifth {
.pi-main-wrapper-content__left {
width: 40%;
}
.pi-main-wrapper-content__right {
width: 60%;
}
}
// Reverse
&.pi-wrapper__grid--reverse-quarter {
.pi-main-wrapper-content__left {
width: 75%;
}
.pi-main-wrapper-content__right {
width: 25%;
}
}
// 1/3 - 2/3
&.pi-wrapper__grid--reverse-third {
.pi-main-wrapper-content__left {
width: 66.66%;
}
.pi-main-wrapper-content__right {
width: 33.33%;
}
}
// 3/5 - 2/5
&.pi-wrapper__grid--reverse-fifth {
.pi-main-wrapper-content__left {
width: 60%;
}
.pi-main-wrapper-content__right {
width: 40%;
}
}
&.pi-wrapper__has-padding {
padding-left: var(--pi-spacing-xxxx-large);
padding-right: var(--pi-spacing-xxxx-large);
}
}
}
}

14
libs/ui/src/lib/styles/common/wrappers/index.scss
View File

@@ -1,7 +1,7 @@
@forward 'pi-action-wrapper';
@forward 'pi-form-wrapper';
@forward 'pi-grid-wrapper';
@forward 'pi-header-wrapper';
@forward 'pi-list-wrapper';
@forward 'pi-main-wrapper';
@forward 'pi-wrapper';
@forward 'pi-action-wrapper';
@forward 'pi-form-wrapper';
@forward 'pi-grid-wrapper';
@forward 'pi-header-wrapper';
@forward 'pi-list-wrapper';
@forward 'pi-main-wrapper';
@forward 'pi-wrapper';

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

@@ -1,181 +1,181 @@
// Shell level
export const shellTheming = (ShellClass: string) => `pi-shell pi-shell__${ShellClass}`;
export const ShellClass = {
// Deale Landings (Public)
DealeLandings: shellTheming('deale-landings'),
// Deale SaaS (Private)
DealeSaaS: shellTheming('deale-saas'),
// Deale Website (Public)
DealeWebsite: shellTheming('deale-website'),
};
// View component level
// Container Layout ~ Landings
export const ContainerLayout = 'pi-container-layout';
// Layouts
// Heights
export const enum Height {
Small = 'small', // Mobile: 50, Tablet: 50, Desktop: 25
Medium = 'medium', // Mobile: 100, Tablet: 75, Desktop: 50
Large = 'large', // Mobile: 150, Tablet: 100, Desktop: 75
Full = 'full', // Mobile: 200, Tablet: 150, Desktop: 100
}
export const height = (height: Height): string => `pi-layout__${height}`;
// Responsive
export const heights = (
mobileHeight: Height,
tabletHeight: Height,
desktopHeight: Height
): string =>
`pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`;
// Not Responsive
export const LayoutHeight = {
Small: height(Height.Small), // 25
Medium: height(Height.Medium), // 50
Large: height(Height.Large), // 75
Full: height(Height.Full), // 100
};
// HostBinding layout class with or without background image ~ Landings
export const layoutBackground = (imageName: string) =>
`url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${imageName})`;
export const backgroundWaveClass = (waveRef: string) =>
`pi-background-wave pi-background-wave__${waveRef}`;
// Not Responsive
export const LayoutWave = {
// Grey
Grey1: backgroundWaveClass('01-grey'),
Grey1RGBA: backgroundWaveClass('01-grey-rgba'),
Grey2: backgroundWaveClass('02-grey'),
Grey2RGBA: backgroundWaveClass('02-grey-rgba'),
// Highlighted
Highlighted1: backgroundWaveClass('01-highlighted'),
Highlighted1RGBA: backgroundWaveClass('01-highlighted-rgba'),
Highlighted2: backgroundWaveClass('02-highlighted'),
Highlighted2RGBA: backgroundWaveClass('02-highlighted-rgba'),
// Primary
Primary1: backgroundWaveClass('01-primary'),
Primary1RGBA: backgroundWaveClass('01-primary-rgba'),
Primary2: backgroundWaveClass('02-primary'),
Primary2RGBA: backgroundWaveClass('02-primary-rgba'),
// PrimaryWhite
PrimaryWhite1: backgroundWaveClass('01-primary-white'),
PrimaryWhite1RGBA: backgroundWaveClass('01-primary-white-rgba'),
PrimaryWhite2: backgroundWaveClass('02-primary-white'),
PrimaryWhite2RGBA: backgroundWaveClass('02-primary-white-rgba'),
// Primary50
PrimaryPrimary501: backgroundWaveClass('01-primary-primary-50'),
Primary501: backgroundWaveClass('01-primary-50'),
PrimaryPrimary501RGBA: backgroundWaveClass('01-primary-primary-50-rgba'),
PrimaryPrimary502: backgroundWaveClass('02-primary-primary-50'),
Primary502: backgroundWaveClass('02-primary-50'),
PrimaryPrimary502RGBA: backgroundWaveClass('02-primary-primary-50-rgba'),
// White
White1: backgroundWaveClass('01-white'),
White1RGBA: backgroundWaveClass('01-white-rgba'),
White2: backgroundWaveClass('02-white'),
White2RGBA: backgroundWaveClass('02-white-rgba'),
};
// Layouts ~ SaaS & Landings
export const LayoutNoPadding = 'pi-layout__no-padding';
export const LayoutCollapsable = 'pi-layout__collapsable';
export const userType = (userType: string) => `is-${userType}`;
// User type class
export const UserTypeClass = {
// Company
Company: userType('company'),
// Investor
Investor: userType('investor'),
// Advisor
Advisor: userType('advisor'),
};
// Layouts (Add to any view)
export const LayoutTypeClass = {
// Specifics
Authentication: 'pi-layout pi-layout__00-authentication',
Dashboard: 'pi-layout pi-layout__01-dashboard',
// TODO: Delete old dashboard layout when ready other users
DashboardOld: 'pi-layout pi-layout__main pi-layout__01-dashboard-old',
// Main Horizontally
// Full Width
FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
// Full Width Centered
FullWidthAuto:
'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto',
// Main Vertically Centered
VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
// Main Space Between
SpaceBetween: 'pi-layout pi-layout__04-space-between',
// Splitted
Splitted: 'pi-layout pi-layout__05-splitted',
// SplittedPaywall
SplittedPaywall: 'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout',
// Edge to Edge
EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge',
// List Left
List: 'pi-layout pi-layout__07-list',
// Infinite Scroll
ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
// List Left
PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated',
// Form Layout
Form: 'pi-layout pi-layout__08-form',
// Pricing Layout
Pricing: 'pi-layout pi-layout__09-pricing',
};
export const WebsiteScreenTypeClass = {
ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you',
};
// Wrappers
export const wrapperType = (wrapperClass: string) => `pi-wrapper pi-wrapper__${wrapperClass}`;
export const WrapperTypeClass = {
Action: wrapperType('action'),
Form: wrapperType('form'),
Header: wrapperType('header'),
List: wrapperType('list'),
Main: wrapperType('main'),
Steps: wrapperType('steps'),
};
// Components
export const componentFamily = (componentClass: string) => `pi-component pi-${componentClass}`;
export const ComponentFamilyClass = {
Button: componentFamily('button'),
Card: componentFamily('card'),
Carousel: componentFamily('carousel'),
DomainComponent: componentFamily('domain-component'),
Chip: componentFamily('chip'),
DynamicMenu: componentFamily('dynamic-menu'),
FileUpload: componentFamily('file-upload'),
Field: componentFamily('field'),
Icon: componentFamily('icon'),
Image: componentFamily('image'),
List: componentFamily('list'),
CustomModal: componentFamily('modal pi-modal__custom-template'),
Panel: componentFamily('panel'),
Table: componentFamily('table'),
Text: componentFamily('text'),
};
// Transition durations
export const enum DURATION {
Slow = 300,
Medium = 200,
Fast = 100,
}
// Shell level
export const shellTheming = (ShellClass: string) => `pi-shell pi-shell__${ShellClass}`;
export const ShellClass = {
// Deale Landings (Public)
DealeLandings: shellTheming('deale-landings'),
// Deale SaaS (Private)
DealeSaaS: shellTheming('deale-saas'),
// Deale Website (Public)
DealeWebsite: shellTheming('deale-website'),
};
// View component level
// Container Layout ~ Landings
export const ContainerLayout = 'pi-container-layout';
// Layouts
// Heights
export const enum Height {
Small = 'small', // Mobile: 50, Tablet: 50, Desktop: 25
Medium = 'medium', // Mobile: 100, Tablet: 75, Desktop: 50
Large = 'large', // Mobile: 150, Tablet: 100, Desktop: 75
Full = 'full', // Mobile: 200, Tablet: 150, Desktop: 100
}
export const height = (height: Height): string => `pi-layout__${height}`;
// Responsive
export const heights = (
mobileHeight: Height,
tabletHeight: Height,
desktopHeight: Height
): string =>
`pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`;
// Not Responsive
export const LayoutHeight = {
Small: height(Height.Small), // 25
Medium: height(Height.Medium), // 50
Large: height(Height.Large), // 75
Full: height(Height.Full), // 100
};
// HostBinding layout class with or without background image ~ Landings
export const layoutBackground = (imageName: string) =>
`url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${imageName})`;
export const backgroundWaveClass = (waveRef: string) =>
`pi-background-wave pi-background-wave__${waveRef}`;
// Not Responsive
export const LayoutWave = {
// Grey
Grey1: backgroundWaveClass('01-grey'),
Grey1RGBA: backgroundWaveClass('01-grey-rgba'),
Grey2: backgroundWaveClass('02-grey'),
Grey2RGBA: backgroundWaveClass('02-grey-rgba'),
// Highlighted
Highlighted1: backgroundWaveClass('01-highlighted'),
Highlighted1RGBA: backgroundWaveClass('01-highlighted-rgba'),
Highlighted2: backgroundWaveClass('02-highlighted'),
Highlighted2RGBA: backgroundWaveClass('02-highlighted-rgba'),
// Primary
Primary1: backgroundWaveClass('01-primary'),
Primary1RGBA: backgroundWaveClass('01-primary-rgba'),
Primary2: backgroundWaveClass('02-primary'),
Primary2RGBA: backgroundWaveClass('02-primary-rgba'),
// PrimaryWhite
PrimaryWhite1: backgroundWaveClass('01-primary-white'),
PrimaryWhite1RGBA: backgroundWaveClass('01-primary-white-rgba'),
PrimaryWhite2: backgroundWaveClass('02-primary-white'),
PrimaryWhite2RGBA: backgroundWaveClass('02-primary-white-rgba'),
// Primary50
PrimaryPrimary501: backgroundWaveClass('01-primary-primary-50'),
Primary501: backgroundWaveClass('01-primary-50'),
PrimaryPrimary501RGBA: backgroundWaveClass('01-primary-primary-50-rgba'),
PrimaryPrimary502: backgroundWaveClass('02-primary-primary-50'),
Primary502: backgroundWaveClass('02-primary-50'),
PrimaryPrimary502RGBA: backgroundWaveClass('02-primary-primary-50-rgba'),
// White
White1: backgroundWaveClass('01-white'),
White1RGBA: backgroundWaveClass('01-white-rgba'),
White2: backgroundWaveClass('02-white'),
White2RGBA: backgroundWaveClass('02-white-rgba'),
};
// Layouts ~ SaaS & Landings
export const LayoutNoPadding = 'pi-layout__no-padding';
export const LayoutCollapsable = 'pi-layout__collapsable';
export const userType = (userType: string) => `is-${userType}`;
// User type class
export const UserTypeClass = {
// Company
Company: userType('company'),
// Investor
Investor: userType('investor'),
// Advisor
Advisor: userType('advisor'),
};
// Layouts (Add to any view)
export const LayoutTypeClass = {
// Specifics
Authentication: 'pi-layout pi-layout__00-authentication',
Dashboard: 'pi-layout pi-layout__01-dashboard',
// TODO: Delete old dashboard layout when ready other users
DashboardOld: 'pi-layout pi-layout__main pi-layout__01-dashboard-old',
// Main Horizontally
// Full Width
FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
// Full Width Centered
FullWidthAuto:
'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto',
// Main Vertically Centered
VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
// Main Space Between
SpaceBetween: 'pi-layout pi-layout__04-space-between',
// Splitted
Splitted: 'pi-layout pi-layout__05-splitted',
// SplittedPaywall
SplittedPaywall: 'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout',
// Edge to Edge
EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge',
// List Left
List: 'pi-layout pi-layout__07-list',
// Infinite Scroll
ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
// List Left
PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated',
// Form Layout
Form: 'pi-layout pi-layout__08-form',
// Pricing Layout
Pricing: 'pi-layout pi-layout__09-pricing',
};
export const WebsiteScreenTypeClass = {
ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you',
};
// Wrappers
export const wrapperType = (wrapperClass: string) => `pi-wrapper pi-wrapper__${wrapperClass}`;
export const WrapperTypeClass = {
Action: wrapperType('action'),
Form: wrapperType('form'),
Header: wrapperType('header'),
List: wrapperType('list'),
Main: wrapperType('main'),
Steps: wrapperType('steps'),
};
// Components
export const componentFamily = (componentClass: string) => `pi-component pi-${componentClass}`;
export const ComponentFamilyClass = {
Button: componentFamily('button'),
Card: componentFamily('card'),
Carousel: componentFamily('carousel'),
DomainComponent: componentFamily('domain-component'),
Chip: componentFamily('chip'),
DynamicMenu: componentFamily('dynamic-menu'),
FileUpload: componentFamily('file-upload'),
Field: componentFamily('field'),
Icon: componentFamily('icon'),
Image: componentFamily('image'),
List: componentFamily('list'),
CustomModal: componentFamily('modal pi-modal__custom-template'),
Panel: componentFamily('panel'),
Table: componentFamily('table'),
Text: componentFamily('text'),
};
// Transition durations
export const enum DURATION {
Slow = 300,
Medium = 200,
Fast = 100,
}

8
libs/ui/src/lib/styles/deale-saas/index.scss
View File

@@ -1,4 +1,4 @@
@use 'layouts' as *;
@use 'theming' as *;
@use 'shell' as *;
@use 'wrappers' as *;
@use 'layouts' as *;
@use 'theming' as *;
@use 'shell' as *;
@use 'wrappers' as *;

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

@@ -1,330 +1,330 @@
@use 'pi-00a-authentication-layout-auth';
@use 'pi-00b-authentication-layout-recover-password';
@use 'pi-00c-authentication-layout-user-profile';
@use 'pi-00d-authentication-layout-default-space';
@use 'pi-00e-authentication-layout-impersonation';
@mixin authenticationLayoutSizes(
$width: calc(100% - var(--pi-spacing-xx-large)),
$max-width: calc(100% - var(--pi-spacing-xx-large)),
$height: 90vh
) {
& > .pi-component {
width: $width;
max-width: $max-width;
& > .pi-panel {
width: -webkit-fill-available;
& > section {
height: $height;
}
}
}
}
@mixin authenticationLayoutsButtonSize() {
}
@mixin authenticationLayoutSpacings($spacing, $gap) {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth):not(.pi-layout__00-authentication--default-space) {
.pi-panel {
.pi-panel-content__top,
.pi-panel-content__bottom {
gap: var(--pi-spacing-#{$gap});
}
&.pi-panel__inner-padding--xxxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-left: $spacing;
padding-right: $spacing;
}
}
}
}
}
}
}
}
}
@mixin authenticationLayoutMobileSmall {
// Mobile S
@media screen and (max-height: 41.6875rem) {
.pi-wrapper {
.pi-wrapper__gap--l {
gap: var(--pi-spacing-small);
}
}
.pi-panel {
&.pi-panel__inner-padding--xxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-top: var(--pi-spacing-x-large);
padding-bottom: var(--pi-spacing-x-large);
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}
.pi-layout__00-authentication {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
& > .pi-component {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
& > .pi-panel {
background: linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box,
linear-gradient(to right, var(--pi-color-primary-50), var(--pi-color-primary-25)) border-box;
background-color: rgba(255, 255, 255, 0.66);
animation: gradient 0.5s linear infinite;
animation-direction: alternate-reverse;
background-size: 150% 300%;
border: 0.0625rem solid transparent;
box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125);
.pi-panel-content__right {
& > * {
max-width: 21.25rem;
height: fit-content;
}
}
.pi-list-item {
.pi-text-viewer {
article {
label,
span {
line-height: 105%;
}
}
}
}
}
.pi-wrapper__form + .pi-wrapper__action {
margin-top: var(--pi-spacing-xxxx-large);
}
.pi-wrapper__action {
.pi-text-centered {
margin-top: var(--pi-spacing-x-large);
}
}
}
&:not(.pi-layout__00-authentication--auth) {
// Panel in other authentication layouts
.pi-panel {
.pi-panel-content__bottom {
position: sticky;
bottom: 0;
}
.pi-panel-content__top,
.pi-panel-content__bottom {
display: flex;
gap: var(--pi-spacing-x-small);
}
}
}
}
html {
// Mobile
&.is-mobile {
@include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small);
.pi-layout__00-authentication {
@include authenticationLayoutSizes;
// Mobile S
@include authenticationLayoutMobileSmall;
}
}
// Tablet
&.is-tablet {
&.is-tablet__small {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(80%, 80%, 80vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(80%, 80%, 85vh);
}
}
}
&.is-tablet__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(calc(100% - 4rem), calc(100% - 4rem), 70vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(
calc(100% - 4rem),
calc(100% - 4rem),
calc(100vh - 4rem)
);
}
}
}
}
// Tablet & Mobile
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-layout__00-authentication {
& > .pi-component {
// Panel in authentication layout
& > .pi-panel {
.pi-panel-content__bottom {
// Action wrapper in panel bottom content
.pi-wrapper {
&.pi-wrapper__action {
width: -webkit-fill-available;
// Hide 'Press enter' text viewer on mobile and tablet
& > *:last-child {
display: none;
}
}
}
}
}
}
// Not Auth Layout
&:not(.pi-layout__00-authentication--auth) {
// Panel in other authentication layouts
& > .pi-component {
.pi-panel {
& > section {
overflow: hidden;
.pi-panel-content__center {
flex-grow: 1;
overflow-y: auto;
// Generic Scroll
&::-webkit-scrollbar {
width: var(--pi-spacing-xxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-50);
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
background-color: var(--pi-color-primary-100);
}
}
}
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
.pi-panel {
position: relative;
// Add logo to bottom right corner of panel
&::after {
content: '';
position: absolute;
height: 100%;
width: 4.375rem;
right: var(--pi-spacing-xxx-large);
bottom: var(--pi-spacing-xxx-large);
background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg');
background-repeat: no-repeat;
background-position: bottom right;
}
}
}
}
}
.pi-shell {
.is-public {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth):not(
.pi-layout__00-authentication--recover-password
):not(.pi-layout__00-authentication--impersonation) {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
min-width: 9.5rem;
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item).pi-button:not(.pi-button__icon):not(
.pi-button__x-small
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__large):not(
.pi-button__trimed
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
min-width: 11.5rem;
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}
}
}
&.is-desktop {
@include authenticationLayoutSpacings(4rem, x-large);
// Desktop S
&.is-desktop__small {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(75%, var(--pi-public-width-container), 70vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(72%, var(--pi-public-width-container), 76vh);
}
}
}
// Desktop M & L
&.is-desktop__medium,
&.is-desktop__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(72%, var(--pi-public-width-container), 78vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(66.66%, var(--pi-public-width-container), 78vh);
}
}
}
}
}
@use 'pi-00a-authentication-layout-auth';
@use 'pi-00b-authentication-layout-recover-password';
@use 'pi-00c-authentication-layout-user-profile';
@use 'pi-00d-authentication-layout-default-space';
@use 'pi-00e-authentication-layout-impersonation';
@mixin authenticationLayoutSizes(
$width: calc(100% - var(--pi-spacing-xx-large)),
$max-width: calc(100% - var(--pi-spacing-xx-large)),
$height: 90vh
) {
& > .pi-component {
width: $width;
max-width: $max-width;
& > .pi-panel {
width: -webkit-fill-available;
& > section {
height: $height;
}
}
}
}
@mixin authenticationLayoutsButtonSize() {
}
@mixin authenticationLayoutSpacings($spacing, $gap) {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth):not(.pi-layout__00-authentication--default-space) {
.pi-panel {
.pi-panel-content__top,
.pi-panel-content__bottom {
gap: var(--pi-spacing-#{$gap});
}
&.pi-panel__inner-padding--xxxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-left: $spacing;
padding-right: $spacing;
}
}
}
}
}
}
}
}
}
@mixin authenticationLayoutMobileSmall {
// Mobile S
@media screen and (max-height: 41.6875rem) {
.pi-wrapper {
.pi-wrapper__gap--l {
gap: var(--pi-spacing-small);
}
}
.pi-panel {
&.pi-panel__inner-padding--xxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-top: var(--pi-spacing-x-large);
padding-bottom: var(--pi-spacing-x-large);
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}
.pi-layout__00-authentication {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
& > .pi-component {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
& > .pi-panel {
background: linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box,
linear-gradient(to right, var(--pi-color-primary-50), var(--pi-color-primary-25)) border-box;
background-color: rgba(255, 255, 255, 0.66);
animation: gradient 0.5s linear infinite;
animation-direction: alternate-reverse;
background-size: 150% 300%;
border: 0.0625rem solid transparent;
box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125);
.pi-panel-content__right {
& > * {
max-width: 21.25rem;
height: fit-content;
}
}
.pi-list-item {
.pi-text-viewer {
article {
label,
span {
line-height: 105%;
}
}
}
}
}
.pi-wrapper__form + .pi-wrapper__action {
margin-top: var(--pi-spacing-xxxx-large);
}
.pi-wrapper__action {
.pi-text-centered {
margin-top: var(--pi-spacing-x-large);
}
}
}
&:not(.pi-layout__00-authentication--auth) {
// Panel in other authentication layouts
.pi-panel {
.pi-panel-content__bottom {
position: sticky;
bottom: 0;
}
.pi-panel-content__top,
.pi-panel-content__bottom {
display: flex;
gap: var(--pi-spacing-x-small);
}
}
}
}
html {
// Mobile
&.is-mobile {
@include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small);
.pi-layout__00-authentication {
@include authenticationLayoutSizes;
// Mobile S
@include authenticationLayoutMobileSmall;
}
}
// Tablet
&.is-tablet {
&.is-tablet__small {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(80%, 80%, 80vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(80%, 80%, 85vh);
}
}
}
&.is-tablet__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(calc(100% - 4rem), calc(100% - 4rem), 70vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(
calc(100% - 4rem),
calc(100% - 4rem),
calc(100vh - 4rem)
);
}
}
}
}
// Tablet & Mobile
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-layout__00-authentication {
& > .pi-component {
// Panel in authentication layout
& > .pi-panel {
.pi-panel-content__bottom {
// Action wrapper in panel bottom content
.pi-wrapper {
&.pi-wrapper__action {
width: -webkit-fill-available;
// Hide 'Press enter' text viewer on mobile and tablet
& > *:last-child {
display: none;
}
}
}
}
}
}
// Not Auth Layout
&:not(.pi-layout__00-authentication--auth) {
// Panel in other authentication layouts
& > .pi-component {
.pi-panel {
& > section {
overflow: hidden;
.pi-panel-content__center {
flex-grow: 1;
overflow-y: auto;
// Generic Scroll
&::-webkit-scrollbar {
width: var(--pi-spacing-xxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-50);
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
background-color: var(--pi-color-primary-100);
}
}
}
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
.pi-panel {
position: relative;
// Add logo to bottom right corner of panel
&::after {
content: '';
position: absolute;
height: 100%;
width: 4.375rem;
right: var(--pi-spacing-xxx-large);
bottom: var(--pi-spacing-xxx-large);
background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg');
background-repeat: no-repeat;
background-position: bottom right;
}
}
}
}
}
.pi-shell {
.is-public {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth):not(
.pi-layout__00-authentication--recover-password
):not(.pi-layout__00-authentication--impersonation) {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
min-width: 9.5rem;
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item).pi-button:not(.pi-button__icon):not(
.pi-button__x-small
):not(.pi-button__small):not(.pi-button__large):not(.pi-button__large):not(
.pi-button__trimed
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
min-width: 11.5rem;
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}
}
}
&.is-desktop {
@include authenticationLayoutSpacings(4rem, x-large);
// Desktop S
&.is-desktop__small {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(75%, var(--pi-public-width-container), 70vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(72%, var(--pi-public-width-container), 76vh);
}
}
}
// Desktop M & L
&.is-desktop__medium,
&.is-desktop__large {
.pi-layout__00-authentication {
&:not(.pi-layout__00-authentication--auth) {
@include authenticationLayoutSizes(72%, var(--pi-public-width-container), 78vh);
}
&.pi-layout__00-authentication--auth {
@include authenticationLayoutSizes(66.66%, var(--pi-public-width-container), 78vh);
}
}
}
}
}

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

@@ -1,83 +1,83 @@
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small Device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__00-authentication {
&.pi-layout__00-authentication--auth {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__left {
display: none;
}
.pi-panel-content__right {
padding-top: var(--pi-spacing-xxx-large);
@media screen and (max-height: 41.6875rem) {
transform: scale(0.95);
&.pi-wrapper {
&.pi-wrapper__gap--xl {
gap: unset;
}
}
}
}
}
// Headline in authentication layout
.pi-headline {
&.pi-headline__type--logo {
& > figure {
max-width: 5.75rem;
}
}
}
}
// Panel in Root auth form
&.pi-layout__00-authentication--root-org {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__center {
.pi-wrapper {
&:first-child {
margin-top: var(--pi-spacing-medium);
}
}
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large Device
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__00-authentication {
&.pi-layout__00-authentication--auth {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__left {
display: grid;
grid-template-rows: repeat(2, 1fr);
& > *:nth-child(n + 1) {
align-self: end;
}
}
}
// Headline in authentication layout
.pi-headline {
&.pi-headline__type--logo {
& > figure {
max-width: 4.6875rem;
}
}
}
}
}
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
// Small Device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__00-authentication {
&.pi-layout__00-authentication--auth {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__left {
display: none;
}
.pi-panel-content__right {
padding-top: var(--pi-spacing-xxx-large);
@media screen and (max-height: 41.6875rem) {
transform: scale(0.95);
&.pi-wrapper {
&.pi-wrapper__gap--xl {
gap: unset;
}
}
}
}
}
// Headline in authentication layout
.pi-headline {
&.pi-headline__type--logo {
& > figure {
max-width: 5.75rem;
}
}
}
}
// Panel in Root auth form
&.pi-layout__00-authentication--root-org {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__center {
.pi-wrapper {
&:first-child {
margin-top: var(--pi-spacing-medium);
}
}
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large Device
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__00-authentication {
&.pi-layout__00-authentication--auth {
// Panel in authentication layout
.pi-panel {
.pi-panel-content__left {
display: grid;
grid-template-rows: repeat(2, 1fr);
& > *:nth-child(n + 1) {
align-self: end;
}
}
}
// Headline in authentication layout
.pi-headline {
&.pi-headline__type--logo {
& > figure {
max-width: 4.6875rem;
}
}
}
}
}
}
}
}
}

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

@@ -1,28 +1,28 @@
html {
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--recover-password {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
min-width: 13.5rem;
}
}
}
}
}
}
}
}
}
}
html {
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--recover-password {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
min-width: 13.5rem;
}
}
}
}
}
}
}
}
}
}

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

@@ -1,109 +1,109 @@
@mixin authenticationLayoutSelectMenuTypeCustom($columnsNum: 1, $card-height: unset) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-select {
.pi-select-options-menu {
padding: unset;
background-color: transparent;
}
&.pi-select__menu-type--custom-grid {
.pi-select-options-menu {
& > div {
display: grid;
grid-template-columns: repeat(#{$columnsNum}, 1fr);
grid-gap: var(--pi-spacing-large);
.pi-card {
min-height: $card-height;
}
}
}
}
}
// Grid wrapper 3 cols in Authentiocation User Type layout
.pi-wrapper {
&.pi-wrapper__grid {
&.pi-wrapper__grid--columns-3 {
&.is-responsive {
grid-template-columns: repeat(#{$columnsNum}, 1fr);
}
}
}
}
}
}
}
@mixin authenticationLayoutMobile {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-select-option__large {
width: -webkit-fill-available;
}
.pi-card {
.pi-card-content__bottom {
display: none;
}
}
.pi-panel__gap--xxxl {
& > section {
gap: var(--pi-spacing-x-small);
}
}
}
}
}
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-card {
&.is-active {
.pi-card-content__bottom {
& > span {
font: {
weight: 400;
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include authenticationLayoutSelectMenuTypeCustom;
@include authenticationLayoutMobile;
}
&:not(.is-desktop) {
@media screen and (max-width: 62rem) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-panel-content__center {
padding-top: var(--pi-spacing-medium);
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet Small
&.is-tablet__small {
@include authenticationLayoutSelectMenuTypeCustom;
}
// Tablet L
&.is-tablet__large {
@include authenticationLayoutSelectMenuTypeCustom(3, 9rem);
}
}
// Desktop
&.is-desktop {
&.is-desktop__small {
@include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem);
}
&:not(.is-desktop__small) {
@include authenticationLayoutSelectMenuTypeCustom(3);
}
}
}
@mixin authenticationLayoutSelectMenuTypeCustom($columnsNum: 1, $card-height: unset) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-select {
.pi-select-options-menu {
padding: unset;
background-color: transparent;
}
&.pi-select__menu-type--custom-grid {
.pi-select-options-menu {
& > div {
display: grid;
grid-template-columns: repeat(#{$columnsNum}, 1fr);
grid-gap: var(--pi-spacing-large);
.pi-card {
min-height: $card-height;
}
}
}
}
}
// Grid wrapper 3 cols in Authentiocation User Type layout
.pi-wrapper {
&.pi-wrapper__grid {
&.pi-wrapper__grid--columns-3 {
&.is-responsive {
grid-template-columns: repeat(#{$columnsNum}, 1fr);
}
}
}
}
}
}
}
@mixin authenticationLayoutMobile {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-select-option__large {
width: -webkit-fill-available;
}
.pi-card {
.pi-card-content__bottom {
display: none;
}
}
.pi-panel__gap--xxxl {
& > section {
gap: var(--pi-spacing-x-small);
}
}
}
}
}
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-card {
&.is-active {
.pi-card-content__bottom {
& > span {
font: {
weight: 400;
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include authenticationLayoutSelectMenuTypeCustom;
@include authenticationLayoutMobile;
}
&:not(.is-desktop) {
@media screen and (max-width: 62rem) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--user-profile {
.pi-panel-content__center {
padding-top: var(--pi-spacing-medium);
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet Small
&.is-tablet__small {
@include authenticationLayoutSelectMenuTypeCustom;
}
// Tablet L
&.is-tablet__large {
@include authenticationLayoutSelectMenuTypeCustom(3, 9rem);
}
}
// Desktop
&.is-desktop {
&.is-desktop__small {
@include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem);
}
&:not(.is-desktop__small) {
@include authenticationLayoutSelectMenuTypeCustom(3);
}
}
}

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

@@ -1,41 +1,41 @@
@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--default-space {
.pi-panel {
.pi-panel-content__top,
.pi-panel-content__bottom {
gap: var(--pi-spacing-#{$gap});
}
&.pi-panel__inner-padding--xxxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-left: $spacing;
padding-right: $spacing;
}
}
}
}
}
}
}
}
}
html {
&.is-mobile {
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxx-large), x-small);
}
&.is-tablet {
&.is-tablet__small {
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxxx-large), small);
}
&.is-tablet__large {
@include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);
}
}
&.is-desktop {
@include authenticationDefaultSpaceLayoutSpacings(11rem, x-large);
}
}
@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--default-space {
.pi-panel {
.pi-panel-content__top,
.pi-panel-content__bottom {
gap: var(--pi-spacing-#{$gap});
}
&.pi-panel__inner-padding--xxxxl {
&.pi-panel__inner-padding {
&.pi-panel__flex-direction--column {
& > section {
& > * {
padding-left: $spacing;
padding-right: $spacing;
}
}
}
}
}
}
}
}
}
html {
&.is-mobile {
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxx-large), x-small);
}
&.is-tablet {
&.is-tablet__small {
@include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxxx-large), small);
}
&.is-tablet__large {
@include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);
}
}
&.is-desktop {
@include authenticationDefaultSpaceLayoutSpacings(11rem, x-large);
}
}

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

@@ -1,28 +1,28 @@
html {
&:not(.is-mobile) {
.pi-shell {
.is-public {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--impersonation {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
min-width: 13.5rem;
}
}
}
}
}
}
}
}
}
}
}
html {
&:not(.is-mobile) {
.pi-shell {
.is-public {
.pi-layout__00-authentication {
&.pi-layout__00-authentication--impersonation {
.pi-panel {
& > section {
.pi-panel-content__top,
.pi-panel-content__bottom {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__type--menu-item):not(.pi-button__icon--single):not(
.pi-button__xx-small
):not(.pi-button__trimmed):not(.pi-button__toggle):not(.ch2-btn) {
min-width: 13.5rem;
}
}
}
}
}
}
}
}
}
}
}

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

@@ -1,239 +1,239 @@
.pi-layout {
&.pi-layout__01-dashboard-old {
.pi-panel__primary {
border: none;
background-color: var(--pi-color-primary);
}
}
}
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-company {
.pi-wrapper {
&.pi-wrapper__main {
& > section {
align-items: stretch;
.pi-panel {
height: 100%;
& > section {
height: 100%;
}
}
}
}
}
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-investor {
& > div {
& > div {
& > * {
display: block;
.pi-panel {
height: 100%;
}
}
}
}
.pi-panel {
& > section {
height: 100%;
// Press component
& > div {
a {
& > .pi-headline {
& > figure {
width: unset;
img {
height: 1.75rem;
width: 1.75rem;
}
}
}
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-company {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-investor {
.pi-panel {
& > section {
// Deal manager component
& > .pi-headline {
flex-direction: row;
}
}
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
}
// Tablet
&.is-tablet {
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-company {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-investor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
// Tablet S
&.is-tablet__small {
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Tablet L
&.is-tablet__large {
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
}
// Large device
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.is-mode-list {
.pi-layout {
&.pi-layout__01-dashboard-old {
.pi-data-grid {
&.pi-data-grid__data-direction--row {
height: calc(100% - 2.6563rem);
.pi-data-grid__content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 4.6563rem);
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
.pi-hamburger
):not(.pi-button__xx-small) {
height: 2.4rem;
min-height: unset;
padding-left: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-medium);
}
}
.pi-chip-label {
max-width: 15ch;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.is-advisor {
}
.is-company {
}
.is-investor {
}
// Desktop S
&.is-desktop__small {
.pi-layout__01-dashboard-old {
width: 90%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Desktop M
&.is-desktop__medium {
.pi-layout__01-dashboard-old {
width: 85%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Desktop L
&.is-desktop__large {
.pi-layout__01-dashboard-old {
width: 75%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
.pi-panel__primary {
border: none;
background-color: var(--pi-color-primary);
}
}
}
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-company {
.pi-wrapper {
&.pi-wrapper__main {
& > section {
align-items: stretch;
.pi-panel {
height: 100%;
& > section {
height: 100%;
}
}
}
}
}
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-investor {
& > div {
& > div {
& > * {
display: block;
.pi-panel {
height: 100%;
}
}
}
}
.pi-panel {
& > section {
height: 100%;
// Press component
& > div {
a {
& > .pi-headline {
& > figure {
width: unset;
img {
height: 1.75rem;
width: 1.75rem;
}
}
}
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-company {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.pi-layout {
&.pi-layout__01-dashboard-old {
&.is-investor {
.pi-panel {
& > section {
// Deal manager component
& > .pi-headline {
flex-direction: row;
}
}
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
}
// Tablet
&.is-tablet {
.is-advisor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-company {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
.is-investor {
.pi-layout {
&.pi-layout__01-dashboard-old {
}
}
}
// Tablet S
&.is-tablet__small {
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Tablet L
&.is-tablet__large {
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
}
// Large device
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.is-mode-list {
.pi-layout {
&.pi-layout__01-dashboard-old {
.pi-data-grid {
&.pi-data-grid__data-direction--row {
height: calc(100% - 2.6563rem);
.pi-data-grid__content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 4.6563rem);
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(
.pi-hamburger
):not(.pi-button__xx-small) {
height: 2.4rem;
min-height: unset;
padding-left: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-medium);
}
}
.pi-chip-label {
max-width: 15ch;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.is-advisor {
}
.is-company {
}
.is-investor {
}
// Desktop S
&.is-desktop__small {
.pi-layout__01-dashboard-old {
width: 90%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Desktop M
&.is-desktop__medium {
.pi-layout__01-dashboard-old {
width: 85%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
// Desktop L
&.is-desktop__large {
.pi-layout__01-dashboard-old {
width: 75%;
}
.is-advisor {
}
.is-company {
}
.is-investor {
}
}
}
}

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

@@ -1,47 +1,47 @@
@mixin dashboardLayoutWidth(
$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
) {
.pi-layout {
&.pi-layout__01-dashboard {
width: $width;
max-width: $max-width;
margin: $margin;
}
}
}
.pi-layout {
&.pi-layout__01-dashboard {
display: grid;
align-items: center;
}
}
html {
// Maobile & Tablet
&:not(.is-desktop) {
// Small devices
@include dashboardLayoutWidth;
}
// Large device
&:not(.is-mobile) {
// Tablet L & Desktop S, M & L > 2400px
@media screen and (min-width: 62rem) and (max-width: 140rem) {
@include dashboardLayoutWidth(
calc(100% - var(--pi-spacing-x-large)),
calc(100% - var(--pi-spacing-x-large)),
unset
);
}
// X Large device
@media screen and (min-width: 140rem) {
@include dashboardLayoutWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
unset
);
}
}
}
@mixin dashboardLayoutWidth(
$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
) {
.pi-layout {
&.pi-layout__01-dashboard {
width: $width;
max-width: $max-width;
margin: $margin;
}
}
}
.pi-layout {
&.pi-layout__01-dashboard {
display: grid;
align-items: center;
}
}
html {
// Maobile & Tablet
&:not(.is-desktop) {
// Small devices
@include dashboardLayoutWidth;
}
// Large device
&:not(.is-mobile) {
// Tablet L & Desktop S, M & L > 2400px
@media screen and (min-width: 62rem) and (max-width: 140rem) {
@include dashboardLayoutWidth(
calc(100% - var(--pi-spacing-x-large)),
calc(100% - var(--pi-spacing-x-large)),
unset
);
}
// X Large device
@media screen and (min-width: 140rem) {
@include dashboardLayoutWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
unset
);
}
}
}

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

@@ -1,323 +1,323 @@
$pi-seller-dashboard-overviews-height: 7.5rem; // 120px
:root {
// Company Dashboard Spacings
--pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px
}
@mixin companyDashboardGridMobileAndTablet {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-medium);
& > *:nth-child(n + 1) {
display: block;
width: -webkit-fill-available;
}
}
}
}
}
@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
& > *:nth-child(2) {
&.is-empty {
& > .pi-panel {
.pi-panel-content__center {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 23.65rem
);
.pi-note {
width: $width;
}
}
}
}
}
}
}
}
}
@mixin companyDashboardGridDesktopSmall {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
'item1 item1'
'item2 item3'
'item4 item5';
& > *:nth-child(2),
& > *:nth-child(3) {
& > * {
max-width: 100%;
}
}
}
}
}
}
@mixin companyDashboardGridDesktop {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
'item1 item1 item1 item1 item3 item3'
'item2 item2 item2 item2 item3 item3'
'item4 item4 item5 item5 item3 item3';
& > *:nth-child(3) {
& > * {
min-height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header));
}
.pi-panel-content {
// Center
&.pi-panel-content__center {
padding: unset;
&:nth-child(2) {
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
& > article {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
}
}
}
}
}
}
}
}
}
// Accordion horizontal in Insights panel
@mixin companyDashboardHorizontalAccordionDesktop {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
.pi-accordion {
&.pi-accordion__direction--horizontal {
& > section {
&:nth-child(1) {
header {
.pi-list-item {
flex-direction: column;
gap: unset;
.pi-list-item-icon {
&.pi-list-item-icon__left {
max-width: 100%;
width: 100%;
// Insights chip
.pi-chip__large {
&:not(.pi-chip__single-icon) {
height: calc(
var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxx-small)
);
max-width: 100%;
width: 100%;
}
}
}
}
.pi-list-item-content {
&.pi-list-item-content__left {
display: flex;
align-items: flex-end;
text-align: center;
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
}
}
}
}
}
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
@for $i from 1 through 5 {
& > *:nth-child(#{$i}) {
grid-area: item#{$i};
align-self: flex-start;
}
}
grid-gap: var(--pi-spacing-medium);
// Overviews
& > *:nth-child(1) {
.pi-card {
min-height: var(--pi-seller-dashboard-overviews-height);
.pi-card-content {
&.pi-card-content__top {
padding-left: var(--pi-spacing-large);
padding-top: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-large);
}
&.pi-card-content__bottom {
flex-direction: row;
align-items: center;
min-height: var(--pi-spacing-xxxx-large);
}
}
&:hover {
border-color: var(--pi-color-primary-100);
}
}
}
// TO·DO List
& > *:nth-child(3) {
.pi-panel {
.pi-panel-content {
& > .pi-divider {
padding-top: var(--pi-spacing-xxx-small);
& + * {
padding-top: var(--pi-spacing-medium);
}
}
& > .pi-text-viewer {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
// Top
&.pi-panel-content__top {
padding-left: var(--pi-spacing-xx-large);
padding-right: var(--pi-spacing-xx-large);
& > span {
line-height: 105%;
}
}
}
}
&:not(.is-empty) {
& > *:nth-child(3) {
.pi-panel {
.pi-panel-content {
// Center
&.pi-panel-content__center {
padding: unset;
&:nth-child(2) {
.pi-icon__appearance--fill {
&.pi-color__primary {
background-color: var(--pi-color-primary-50);
}
}
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
& > article {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
}
.pi-wrapper__flex-direction--column {
// Only scroll for desktop M & L
@media screen and (min-width: 90rem) {
max-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 24rem
);
max-width: calc(100% - var(--pi-spacing-xxx-small));
overflow-y: auto;
// Generic Scroll
&::-webkit-scrollbar {
width: var(--pi-spacing-xxxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-100);
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
background-color: var(--pi-color-primary-200);
}
}
}
}
}
}
}
}
}
}
}
// Deal manager CTA
& > *:nth-child(5) {
.pi-headline {
height: var(--pi-spacing-xxx-large);
width: var(--pi-spacing-xxx-large);
&::after {
content: '';
position: relative;
z-index: 99;
height: var(--pi-spacing-xx-small);
width: var(--pi-spacing-xx-small);
margin-top: -4rem;
margin-left: 2.25rem;
border-radius: 50%;
background-color: var(--pi-color-success);
}
}
.pi-list-item-icon {
&.pi-list-item-icon__right {
display: flex;
align-items: center;
gap: var(--pi-spacing-xxx-small);
}
}
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
@include companyDashboardGridMobileAndTablet;
}
&.is-desktop {
// Desktop S
&.is-desktop__small {
@include companyDashboardGridDesktopSmall;
@include companyDashboardInsightsPanelEmptyState;
}
// Desktop S & M
&:not(.is-desktop__large) {
@include companyDashboardHorizontalAccordionDesktop;
}
// Desktop M & L
&:not(.is-desktop__small) {
@include companyDashboardGridDesktop;
@include companyDashboardInsightsPanelEmptyState(50%);
}
}
}
$pi-seller-dashboard-overviews-height: 7.5rem; // 120px
:root {
// Company Dashboard Spacings
--pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px
}
@mixin companyDashboardGridMobileAndTablet {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
display: flex;
flex-direction: column;
gap: var(--pi-spacing-medium);
& > *:nth-child(n + 1) {
display: block;
width: -webkit-fill-available;
}
}
}
}
}
@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
& > *:nth-child(2) {
&.is-empty {
& > .pi-panel {
.pi-panel-content__center {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 23.65rem
);
.pi-note {
width: $width;
}
}
}
}
}
}
}
}
}
@mixin companyDashboardGridDesktopSmall {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
'item1 item1'
'item2 item3'
'item4 item5';
& > *:nth-child(2),
& > *:nth-child(3) {
& > * {
max-width: 100%;
}
}
}
}
}
}
@mixin companyDashboardGridDesktop {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
'item1 item1 item1 item1 item3 item3'
'item2 item2 item2 item2 item3 item3'
'item4 item4 item5 item5 item3 item3';
& > *:nth-child(3) {
& > * {
min-height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header));
}
.pi-panel-content {
// Center
&.pi-panel-content__center {
padding: unset;
&:nth-child(2) {
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
& > article {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
}
}
}
}
}
}
}
}
}
// Accordion horizontal in Insights panel
@mixin companyDashboardHorizontalAccordionDesktop {
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
.pi-accordion {
&.pi-accordion__direction--horizontal {
& > section {
&:nth-child(1) {
header {
.pi-list-item {
flex-direction: column;
gap: unset;
.pi-list-item-icon {
&.pi-list-item-icon__left {
max-width: 100%;
width: 100%;
// Insights chip
.pi-chip__large {
&:not(.pi-chip__single-icon) {
height: calc(
var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxx-small)
);
max-width: 100%;
width: 100%;
}
}
}
}
.pi-list-item-content {
&.pi-list-item-content__left {
display: flex;
align-items: flex-end;
text-align: center;
font: {
size: var(--pi-font-size-x-small);
}
}
}
}
}
}
}
}
}
}
}
}
}
.pi-layout {
&.pi-layout__01-dashboard {
&.is-company {
@for $i from 1 through 5 {
& > *:nth-child(#{$i}) {
grid-area: item#{$i};
align-self: flex-start;
}
}
grid-gap: var(--pi-spacing-medium);
// Overviews
& > *:nth-child(1) {
.pi-card {
min-height: var(--pi-seller-dashboard-overviews-height);
.pi-card-content {
&.pi-card-content__top {
padding-left: var(--pi-spacing-large);
padding-top: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-large);
}
&.pi-card-content__bottom {
flex-direction: row;
align-items: center;
min-height: var(--pi-spacing-xxxx-large);
}
}
&:hover {
border-color: var(--pi-color-primary-100);
}
}
}
// TO·DO List
& > *:nth-child(3) {
.pi-panel {
.pi-panel-content {
& > .pi-divider {
padding-top: var(--pi-spacing-xxx-small);
& + * {
padding-top: var(--pi-spacing-medium);
}
}
& > .pi-text-viewer {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
// Top
&.pi-panel-content__top {
padding-left: var(--pi-spacing-xx-large);
padding-right: var(--pi-spacing-xx-large);
& > span {
line-height: 105%;
}
}
}
}
&:not(.is-empty) {
& > *:nth-child(3) {
.pi-panel {
.pi-panel-content {
// Center
&.pi-panel-content__center {
padding: unset;
&:nth-child(2) {
.pi-icon__appearance--fill {
&.pi-color__primary {
background-color: var(--pi-color-primary-50);
}
}
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-x-large);
padding-right: var(--pi-spacing-x-large);
& > article {
padding-left: var(--pi-spacing-x-small);
padding-right: var(--pi-spacing-x-small);
}
}
.pi-wrapper__flex-direction--column {
// Only scroll for desktop M & L
@media screen and (min-width: 90rem) {
max-height: calc(
100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header) - 24rem
);
max-width: calc(100% - var(--pi-spacing-xxx-small));
overflow-y: auto;
// Generic Scroll
&::-webkit-scrollbar {
width: var(--pi-spacing-xxxx-small);
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-100);
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
background-color: var(--pi-color-primary-200);
}
}
}
}
}
}
}
}
}
}
}
// Deal manager CTA
& > *:nth-child(5) {
.pi-headline {
height: var(--pi-spacing-xxx-large);
width: var(--pi-spacing-xxx-large);
&::after {
content: '';
position: relative;
z-index: 99;
height: var(--pi-spacing-xx-small);
width: var(--pi-spacing-xx-small);
margin-top: -4rem;
margin-left: 2.25rem;
border-radius: 50%;
background-color: var(--pi-color-success);
}
}
.pi-list-item-icon {
&.pi-list-item-icon__right {
display: flex;
align-items: center;
gap: var(--pi-spacing-xxx-small);
}
}
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
@include companyDashboardGridMobileAndTablet;
}
&.is-desktop {
// Desktop S
&.is-desktop__small {
@include companyDashboardGridDesktopSmall;
@include companyDashboardInsightsPanelEmptyState;
}
// Desktop S & M
&:not(.is-desktop__large) {
@include companyDashboardHorizontalAccordionDesktop;
}
// Desktop M & L
&:not(.is-desktop__small) {
@include companyDashboardGridDesktop;
@include companyDashboardInsightsPanelEmptyState(50%);
}
}
}

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

@@ -1,139 +1,139 @@
@mixin fullWidthLayoutWidthLargeDevice(
$width: calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem),
$max-width-closed: var(--pi-width-container-s),
$max-width-open:
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
) {
.pi-shell__deale-saas {
& > div {
// Aside is open
&.aside-is-open {
// Layout full width
.pi-layout {
&.pi-layout__02-full-width {
&.pi-layout__collapsable {
transition: var(--pi-animation);
max-width: $max-width-open;
}
&:not(.pi-layout__collapsable) {
transition: var(--pi-animation);
max-width: $max-width-closed;
& > *:nth-child(n + 1) {
width: $width;
max-width: $max-width-closed;
}
}
}
}
}
// Aside is closed
&.aside-is-closed {
// Layout full width
.pi-layout {
&.pi-layout__02-full-width {
transition: var(--pi-animation);
& > *:nth-child(n + 1) {
width: $width;
max-width: $max-width-closed;
}
}
}
}
}
}
}
@mixin fullWidthLayoutGridWrapper3Columns($columns: 1) {
.pi-layout {
&.pi-layout__02-full-width {
.pi-wrapper {
&.pi-wrapper__grid {
// 3
&.pi-wrapper__grid--columns-3 {
grid-template-columns: repeat(#{$columns}, 1fr);
}
}
}
}
}
}
html {
&.is-mobile {
@include fullWidthLayoutGridWrapper3Columns;
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__02-full-width {
max-width: calc(100% - var(--pi-spacing-x-large));
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include fullWidthLayoutGridWrapper3Columns;
}
// Tablet L
&.is-tablet__large {
@include fullWidthLayoutGridWrapper3Columns(2);
}
.pi-layout {
&.pi-layout__02-full-width {
margin: auto;
}
}
}
// Desktop
&.is-desktop {
.pi-layout {
&.pi-layout__02-full-width {
padding: 0 0 calc(var(--pi-spacing-xxxx-large) + var(--pi-height-footer));
}
}
// Desktop S
&.is-desktop__small {
@include fullWidthLayoutWidthLargeDevice;
@include fullWidthLayoutGridWrapper3Columns(2);
}
&:not(.is-desktop__small) {
@include fullWidthLayoutGridWrapper3Columns(3);
}
// Desktop M
&.is-desktop__medium {
@include fullWidthLayoutWidthLargeDevice(
calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem),
var(--pi-width-container),
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
);
}
// Desktop L
&.is-desktop__large {
// Desktop L
@media screen and (max-width: 140rem) {
.pi-layout {
&.pi-layout__02-full-width {
& > *:nth-child(n + 1) {
width: var(--pi-width-container-l);
max-width: var(--pi-width-container-l);
}
}
}
}
// Desktop XL
@media screen and (min-width: 140rem) {
.pi-layout {
&.pi-layout__02-full-width {
& > *:nth-child(n + 1) {
width: 66.66%;
max-width: 66.66%;
}
}
}
}
}
}
}
@mixin fullWidthLayoutWidthLargeDevice(
$width: calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem),
$max-width-closed: var(--pi-width-container-s),
$max-width-open:
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
) {
.pi-shell__deale-saas {
& > div {
// Aside is open
&.aside-is-open {
// Layout full width
.pi-layout {
&.pi-layout__02-full-width {
&.pi-layout__collapsable {
transition: var(--pi-animation);
max-width: $max-width-open;
}
&:not(.pi-layout__collapsable) {
transition: var(--pi-animation);
max-width: $max-width-closed;
& > *:nth-child(n + 1) {
width: $width;
max-width: $max-width-closed;
}
}
}
}
}
// Aside is closed
&.aside-is-closed {
// Layout full width
.pi-layout {
&.pi-layout__02-full-width {
transition: var(--pi-animation);
& > *:nth-child(n + 1) {
width: $width;
max-width: $max-width-closed;
}
}
}
}
}
}
}
@mixin fullWidthLayoutGridWrapper3Columns($columns: 1) {
.pi-layout {
&.pi-layout__02-full-width {
.pi-wrapper {
&.pi-wrapper__grid {
// 3
&.pi-wrapper__grid--columns-3 {
grid-template-columns: repeat(#{$columns}, 1fr);
}
}
}
}
}
}
html {
&.is-mobile {
@include fullWidthLayoutGridWrapper3Columns;
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__02-full-width {
max-width: calc(100% - var(--pi-spacing-x-large));
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include fullWidthLayoutGridWrapper3Columns;
}
// Tablet L
&.is-tablet__large {
@include fullWidthLayoutGridWrapper3Columns(2);
}
.pi-layout {
&.pi-layout__02-full-width {
margin: auto;
}
}
}
// Desktop
&.is-desktop {
.pi-layout {
&.pi-layout__02-full-width {
padding: 0 0 calc(var(--pi-spacing-xxxx-large) + var(--pi-height-footer));
}
}
// Desktop S
&.is-desktop__small {
@include fullWidthLayoutWidthLargeDevice;
@include fullWidthLayoutGridWrapper3Columns(2);
}
&:not(.is-desktop__small) {
@include fullWidthLayoutGridWrapper3Columns(3);
}
// Desktop M
&.is-desktop__medium {
@include fullWidthLayoutWidthLargeDevice(
calc(100vw - var(--pi-width-aside) - var(--pi-width-navbar-collapsed) - 6.5rem),
var(--pi-width-container),
calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
);
}
// Desktop L
&.is-desktop__large {
// Desktop L
@media screen and (max-width: 140rem) {
.pi-layout {
&.pi-layout__02-full-width {
& > *:nth-child(n + 1) {
width: var(--pi-width-container-l);
max-width: var(--pi-width-container-l);
}
}
}
}
// Desktop XL
@media screen and (min-width: 140rem) {
.pi-layout {
&.pi-layout__02-full-width {
& > *:nth-child(n + 1) {
width: 66.66%;
max-width: 66.66%;
}
}
}
}
}
}
}

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

@@ -1,20 +1,20 @@
.pi-layout {
&.pi-layout__02-full-width {
&.pi-layout__02-full-width--auto {
margin: auto;
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__02-full-width {
&.pi-layout__02-full-width--auto {
padding: var(--pi-spacing-x-large);
}
}
}
}
}
.pi-layout {
&.pi-layout__02-full-width {
&.pi-layout__02-full-width--auto {
margin: auto;
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__02-full-width {
&.pi-layout__02-full-width--auto {
padding: var(--pi-spacing-x-large);
}
}
}
}
}

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

@@ -1,102 +1,102 @@
@mixin layoutVerticallyCenteredSpacings($padding-top: var(--pi-public-height-header-mobile)) {
.pi-container-layout {
& > .pi-layout__06-edge-to-edge {
& > .pi-wrapper__header {
.pi-header-wrapper-content__center {
padding-top: $padding-top;
min-width: 75%;
}
}
}
}
}
.pi-layout {
&.pi-layout__03-vertically-centered {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--pi-spacing-xxxx-large);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
&:not(.pi-layout__small):not(.pi-layout__medium):not(.pi-layout__large) {
min-height: 100vh;
}
// Main wrapper align center and justify center in VerticallyCentered layout
.pi-wrapper__main {
&.pi-wrapper__align-items--center {
&.pi-wrapper__justify--center {
display: flex;
align-items: center;
}
}
}
}
}
.pi-shell {
.is-fullscreen {
.pi-layout {
&.pi-layout__03-vertically-centered {
// Main wrapper align center and justify center in VerticallyCentered layout
& > .pi-wrapper__main {
&.pi-wrapper__align-items--center {
&.pi-wrapper__justify--center {
height: 100vh;
& > section {
gap: var(--pi-spacing-xxxx-large);
}
.pi-headline {
gap: var(--pi-spacing-xxxx-large);
.pi-headline-content {
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-xx-large);
padding-right: var(--pi-spacing-xx-large);
margin-top: var(--pi-spacing-x-small);
}
}
& > figure {
width: 7.1875rem;
}
}
.pi-close-button {
position: absolute;
@media screen and (max-width: 40rem) {
top: var(--pi-spacing-large);
right: var(--pi-spacing-large);
}
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
top: var(--pi-spacing-xx-large);
right: var(--pi-spacing-xx-large);
}
@media screen and (min-width: 77.5rem) {
top: var(--pi-spacing-xxxx-large);
right: var(--pi-spacing-xxxx-large);
}
}
}
}
}
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
@media screen and (max-width: 62rem) {
@include layoutVerticallyCenteredSpacings;
}
}
// Tablet & Desktop
&:not(.is-mobile) {
@media screen and (min-width: 62rem) {
@include layoutVerticallyCenteredSpacings(var(--pi-public-height-header-desktop));
}
}
}
@mixin layoutVerticallyCenteredSpacings($padding-top: var(--pi-public-height-header-mobile)) {
.pi-container-layout {
& > .pi-layout__06-edge-to-edge {
& > .pi-wrapper__header {
.pi-header-wrapper-content__center {
padding-top: $padding-top;
min-width: 75%;
}
}
}
}
}
.pi-layout {
&.pi-layout__03-vertically-centered {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--pi-spacing-xxxx-large);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
&:not(.pi-layout__small):not(.pi-layout__medium):not(.pi-layout__large) {
min-height: 100vh;
}
// Main wrapper align center and justify center in VerticallyCentered layout
.pi-wrapper__main {
&.pi-wrapper__align-items--center {
&.pi-wrapper__justify--center {
display: flex;
align-items: center;
}
}
}
}
}
.pi-shell {
.is-fullscreen {
.pi-layout {
&.pi-layout__03-vertically-centered {
// Main wrapper align center and justify center in VerticallyCentered layout
& > .pi-wrapper__main {
&.pi-wrapper__align-items--center {
&.pi-wrapper__justify--center {
height: 100vh;
& > section {
gap: var(--pi-spacing-xxxx-large);
}
.pi-headline {
gap: var(--pi-spacing-xxxx-large);
.pi-headline-content {
& > *:nth-child(n + 1) {
padding-left: var(--pi-spacing-xx-large);
padding-right: var(--pi-spacing-xx-large);
margin-top: var(--pi-spacing-x-small);
}
}
& > figure {
width: 7.1875rem;
}
}
.pi-close-button {
position: absolute;
@media screen and (max-width: 40rem) {
top: var(--pi-spacing-large);
right: var(--pi-spacing-large);
}
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
top: var(--pi-spacing-xx-large);
right: var(--pi-spacing-xx-large);
}
@media screen and (min-width: 77.5rem) {
top: var(--pi-spacing-xxxx-large);
right: var(--pi-spacing-xxxx-large);
}
}
}
}
}
}
}
}
}
html {
// Mobile & Tablet
&:not(.is-desktop) {
@media screen and (max-width: 62rem) {
@include layoutVerticallyCenteredSpacings;
}
}
// Tablet & Desktop
&:not(.is-mobile) {
@media screen and (min-width: 62rem) {
@include layoutVerticallyCenteredSpacings(var(--pi-public-height-header-desktop));
}
}
}

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

@@ -1,8 +1,8 @@
.pi-layout {
&.pi-layout__04-space-between {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.pi-layout {
&.pi-layout__04-space-between {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}

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

@@ -1,71 +1,71 @@
.pi-layout {
&.pi-layout__05-splitted {
display: flex;
flex-direction: column;
justify-content: space-between;
.pi-panel {
&.pi-panel__is-clickable {
// Is active
&.is-active {
background-color: var(--pi-color-primary-50);
}
&:hover {
cursor: pointer;
}
&.is-active,
&:hover {
box-sizing: border-box;
outline-offset: -1px;
}
}
}
&:not(.pi-05a-splitted-paywall-layout) {
.pi-wrapper__action {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon) {
min-width: 10rem;
}
}
}
}
}
}
// Desktop
html {
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__05-splitted {
overflow-y: scroll;
}
}
}
&.is-desktop {
.pi-layout {
&.pi-layout__05-splitted {
.pi-main-wrapper-content__right {
.mat-mdc-radio-group {
&.pi-wrapper {
&.pi-wrapper__flex {
max-width: 50%;
}
}
}
}
@media screen and (min-width: 90rem) {
overflow-y: hidden;
}
&:not(.pi-05a-splitted-paywall-layout) {
height: 100vh;
padding: 0;
.pi-main-wrapper-content {
min-height: 100vh;
}
}
}
}
}
}
.pi-layout {
&.pi-layout__05-splitted {
display: flex;
flex-direction: column;
justify-content: space-between;
.pi-panel {
&.pi-panel__is-clickable {
// Is active
&.is-active {
background-color: var(--pi-color-primary-50);
}
&:hover {
cursor: pointer;
}
&.is-active,
&:hover {
box-sizing: border-box;
outline-offset: -1px;
}
}
}
&:not(.pi-05a-splitted-paywall-layout) {
.pi-wrapper__action {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon) {
min-width: 10rem;
}
}
}
}
}
}
// Desktop
html {
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__05-splitted {
overflow-y: scroll;
}
}
}
&.is-desktop {
.pi-layout {
&.pi-layout__05-splitted {
.pi-main-wrapper-content__right {
.mat-mdc-radio-group {
&.pi-wrapper {
&.pi-wrapper__flex {
max-width: 50%;
}
}
}
}
@media screen and (min-width: 90rem) {
overflow-y: hidden;
}
&:not(.pi-05a-splitted-paywall-layout) {
height: 100vh;
padding: 0;
.pi-main-wrapper-content {
min-height: 100vh;
}
}
}
}
}
}

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

@@ -1,413 +1,413 @@
.pi-layout {
&.pi-05a-splitted-paywall-layout {
width: 100vw;
background-size: contain;
background-repeat: no-repeat;
background-position-x: right;
.pi-main-wrapper-content {
min-height: unset;
// Left
&.pi-main-wrapper-content__left {
display: flex;
flex-direction: column;
header {
h1 + * {
margin-top: var(--pi-spacing-x-small);
}
}
}
// Right
&.pi-main-wrapper-content__right {
display: flex;
flex-direction: column;
}
}
* + .mat-mdc-radio-group {
padding-top: var(--pi-spacing-x-large);
}
.mat-mdc-radio-group {
display: flex;
flex-direction: column;
label {
margin-bottom: unset;
}
}
.mat-mdc-radio-label-content {
padding-left: var(--pi-spacing-medium);
}
.pi-panel {
box-shadow: var(--pi-box-shadow);
transition: var(--pi-animation);
width: 100%;
max-width: 30rem;
&.is-active {
border: 1px solid var(--pi-color-primary-100);
background-color: var(--pi-color-primary-50);
}
&:hover {
cursor: pointer;
box-shadow: var(--pi-box-shadow-hover);
&:not(.is-active) {
border: 1px solid var(--pi-color-primary-200);
}
}
// Padding
&.has-padding {
width: 100%;
padding: var(--pi-spacing-large);
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
@media screen and (max-height: 46.25rem) {
min-height: calc(198vh + var(--pi-height-footer));
}
.pi-main-wrapper-content {
// Right
&.pi-main-wrapper-content__right {
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large) -
var(--pi-height-footer) - 8rem
);
}
// Left
&.pi-main-wrapper-content__left {
// Header
& > header {
transform: scale(0.92);
.pi-color__black-primary {
& > article {
display: flex;
gap: var(--pi-spacing-xxx-small);
}
}
}
}
}
// Radio panels
.mat-mdc-radio-group {
gap: var(--pi-spacing-small);
width: 100%;
transform: scale(0.92);
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
}
}
}
}
}
}
&.is-tablet {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
.pi-wrapper__main {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
& > header {
max-width: 66.66%;
margin: 0 auto;
}
}
&.pi-main-wrapper-content__right {
min-height: calc(
100vh - var(--pi-spacing-xx-large) - var(--pi-spacing-xx-large) -
var(--pi-height-footer) - 20rem
);
}
}
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
min-width: 11rem;
}
}
}
}
}
// Tablet S
&.is-tablet__small {
.pi-wrapper__main {
.pi-main-wrapper-content {
& > * + *:not(:last-child) {
width: 66.66%;
margin: var(--pi-spacing-x-large) auto;
}
}
}
}
// Tablet L
&.is-tablet__large {
.pi-wrapper__main {
.pi-main-wrapper-content {
& > * + *:not(:last-child) {
width: 50%;
margin: var(--pi-spacing-x-large) auto;
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
// Main
.pi-wrapper {
&.pi-wrapper__main {
& > section {
padding-bottom: var(--pi-height-header);
}
.pi-main-wrapper-content {
width: 100%;
// Left
&.pi-main-wrapper-content__left {
& > header {
justify-content: center;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
h3 {
display: block;
}
}
form {
& > h4 {
text-align: center;
}
}
// Action wrapper
.pi-wrapper__action {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
height: var(--pi-height-footer);
width: 100%;
margin-top: unset;
background-color: var(--pi-color-white-rgba-06);
box-shadow: var(--pi-box--shadow-top);
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-xxxx-large);
padding-top: 6rem;
background-image: unset;
& > form {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
}
}
}
}
}
.mat-mdc-radio-group {
align-items: center;
}
.mat-mdc-radio-label-content {
h3 {
font: {
size: var(--pi-font-size-xx-large);
}
}
}
// Mobile and Tablet S
@media screen and (max-width: 62rem) {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
// Header
& > header {
h1 {
font: {
size: var(--pi-font-size-x-large);
}
}
}
}
}
}
// Action wrapper
.pi-wrapper__action {
justify-content: space-around;
}
}
}
}
// Small device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
.mat-mdc-radio-group > * {
width: -webkit-fill-available;
}
}
}
}
}
} // Tablet & Desktop
&:not(.is-mobile) {
// Tablet L and Desktop
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
// Header
& > header {
h1 {
font: {
size: var(--pi-font-size-xx-large);
}
}
}
}
}
.mat-mdc-radio-label-content {
h3 {
font: {
size: 2.375rem;
}
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
height: 100vh;
overflow-y: hidden;
.pi-wrapper__main {
.pi-main-wrapper-content {
// Left
&.pi-main-wrapper-content__left {
justify-content: space-between;
max-width: 50%;
.pi-panel {
&.has-padding {
max-width: 32rem;
}
}
.pi-wrapper {
&.pi-wrapper__action {
gap: var(--pi-spacing-x-large);
}
}
}
// Right
&.pi-main-wrapper-content__right {
justify-content: center;
}
}
}
}
}
}
&.is-desktop__small {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxx-large);
gap: var(--pi-spacing-xx-large);
.pi-main-wrapper-content {
height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large));
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {
max-width: 70%;
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-medium);
}
}
}
}
}
}
&.is-desktop__medium {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxx-large);
gap: var(--pi-spacing-xxx-large);
.pi-main-wrapper-content {
// Left
&.pi-main-wrapper-content__left {
height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large));
.mat-mdc-radio-group {
max-width: 66.66%;
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-x-large);
}
}
}
}
}
}
}
&.is-desktop__large {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxxx-large);
gap: var(--pi-spacing-xxxx-large);
.pi-main-wrapper-content {
height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxxx-large));
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {
max-width: 50%;
}
.pi-wrapper__action {
margin-top: 5rem;
}
}
}
}
}
}
}
}
.pi-layout {
&.pi-05a-splitted-paywall-layout {
width: 100vw;
background-size: contain;
background-repeat: no-repeat;
background-position-x: right;
.pi-main-wrapper-content {
min-height: unset;
// Left
&.pi-main-wrapper-content__left {
display: flex;
flex-direction: column;
header {
h1 + * {
margin-top: var(--pi-spacing-x-small);
}
}
}
// Right
&.pi-main-wrapper-content__right {
display: flex;
flex-direction: column;
}
}
* + .mat-mdc-radio-group {
padding-top: var(--pi-spacing-x-large);
}
.mat-mdc-radio-group {
display: flex;
flex-direction: column;
label {
margin-bottom: unset;
}
}
.mat-mdc-radio-label-content {
padding-left: var(--pi-spacing-medium);
}
.pi-panel {
box-shadow: var(--pi-box-shadow);
transition: var(--pi-animation);
width: 100%;
max-width: 30rem;
&.is-active {
border: 1px solid var(--pi-color-primary-100);
background-color: var(--pi-color-primary-50);
}
&:hover {
cursor: pointer;
box-shadow: var(--pi-box-shadow-hover);
&:not(.is-active) {
border: 1px solid var(--pi-color-primary-200);
}
}
// Padding
&.has-padding {
width: 100%;
padding: var(--pi-spacing-large);
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
@media screen and (max-height: 46.25rem) {
min-height: calc(198vh + var(--pi-height-footer));
}
.pi-main-wrapper-content {
// Right
&.pi-main-wrapper-content__right {
height: calc(
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large) -
var(--pi-height-footer) - 8rem
);
}
// Left
&.pi-main-wrapper-content__left {
// Header
& > header {
transform: scale(0.92);
.pi-color__black-primary {
& > article {
display: flex;
gap: var(--pi-spacing-xxx-small);
}
}
}
}
}
// Radio panels
.mat-mdc-radio-group {
gap: var(--pi-spacing-small);
width: 100%;
transform: scale(0.92);
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
}
}
}
}
}
}
&.is-tablet {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
.pi-wrapper__main {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
& > header {
max-width: 66.66%;
margin: 0 auto;
}
}
&.pi-main-wrapper-content__right {
min-height: calc(
100vh - var(--pi-spacing-xx-large) - var(--pi-spacing-xx-large) -
var(--pi-height-footer) - 20rem
);
}
}
}
.pi-button {
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
.pi-button__large
) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
min-width: 11rem;
}
}
}
}
}
// Tablet S
&.is-tablet__small {
.pi-wrapper__main {
.pi-main-wrapper-content {
& > * + *:not(:last-child) {
width: 66.66%;
margin: var(--pi-spacing-x-large) auto;
}
}
}
}
// Tablet L
&.is-tablet__large {
.pi-wrapper__main {
.pi-main-wrapper-content {
& > * + *:not(:last-child) {
width: 50%;
margin: var(--pi-spacing-x-large) auto;
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
// Main
.pi-wrapper {
&.pi-wrapper__main {
& > section {
padding-bottom: var(--pi-height-header);
}
.pi-main-wrapper-content {
width: 100%;
// Left
&.pi-main-wrapper-content__left {
& > header {
justify-content: center;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
h3 {
display: block;
}
}
form {
& > h4 {
text-align: center;
}
}
// Action wrapper
.pi-wrapper__action {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
height: var(--pi-height-footer);
width: 100%;
margin-top: unset;
background-color: var(--pi-color-white-rgba-06);
box-shadow: var(--pi-box--shadow-top);
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-xxxx-large);
padding-top: 6rem;
background-image: unset;
& > form {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
}
}
}
}
}
.mat-mdc-radio-group {
align-items: center;
}
.mat-mdc-radio-label-content {
h3 {
font: {
size: var(--pi-font-size-xx-large);
}
}
}
// Mobile and Tablet S
@media screen and (max-width: 62rem) {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
// Header
& > header {
h1 {
font: {
size: var(--pi-font-size-x-large);
}
}
}
}
}
}
// Action wrapper
.pi-wrapper__action {
justify-content: space-around;
}
}
}
}
// Small device
@media screen and (max-width: 62rem) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
.mat-mdc-radio-group > * {
width: -webkit-fill-available;
}
}
}
}
}
} // Tablet & Desktop
&:not(.is-mobile) {
// Tablet L and Desktop
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
.pi-main-wrapper-content {
&.pi-main-wrapper-content__left {
// Header
& > header {
h1 {
font: {
size: var(--pi-font-size-xx-large);
}
}
}
}
}
.mat-mdc-radio-label-content {
h3 {
font: {
size: 2.375rem;
}
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
height: 100vh;
overflow-y: hidden;
.pi-wrapper__main {
.pi-main-wrapper-content {
// Left
&.pi-main-wrapper-content__left {
justify-content: space-between;
max-width: 50%;
.pi-panel {
&.has-padding {
max-width: 32rem;
}
}
.pi-wrapper {
&.pi-wrapper__action {
gap: var(--pi-spacing-x-large);
}
}
}
// Right
&.pi-main-wrapper-content__right {
justify-content: center;
}
}
}
}
}
}
&.is-desktop__small {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxx-large);
gap: var(--pi-spacing-xx-large);
.pi-main-wrapper-content {
height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large));
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {
max-width: 70%;
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-medium);
}
}
}
}
}
}
&.is-desktop__medium {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxx-large);
gap: var(--pi-spacing-xxx-large);
.pi-main-wrapper-content {
// Left
&.pi-main-wrapper-content__left {
height: calc(100vh - var(--pi-spacing-xxx-large) - var(--pi-spacing-xxx-large));
.mat-mdc-radio-group {
max-width: 66.66%;
}
}
// Right
&.pi-main-wrapper-content__right {
gap: var(--pi-spacing-x-large);
}
}
}
}
}
}
}
&.is-desktop__large {
.pi-layout {
&.pi-layout__05-splitted {
&.pi-05a-splitted-paywall-layout {
padding: var(--pi-spacing-xxxx-large);
gap: var(--pi-spacing-xxxx-large);
.pi-main-wrapper-content {
height: calc(100vh - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xxxx-large));
// Left
&.pi-main-wrapper-content__left {
.mat-mdc-radio-group {
max-width: 50%;
}
.pi-wrapper__action {
margin-top: 5rem;
}
}
}
}
}
}
}
}

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

@@ -1,52 +1,52 @@
@mixin saasContainerSpacings($padding-top: var(--pi-public-height-header-mobile)) {
.pi-container-layout {
padding-bottom: var(--pi-spacing-xxxx-large);
& > .pi-layout__06-edge-to-edge {
& > .pi-wrapper__header {
.pi-header-wrapper-content__center {
padding-top: $padding-top;
}
}
}
}
}
.pi-layout {
&.pi-layout__06-edge-to-edge {
width: 100%;
& > *:nth-child(n + 2) {
&:not(.pi-wrapper__list) {
display: block;
margin-top: var(--pi-spacing-x-large);
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-layout {
&.pi-layout__06-edge-to-edge {
padding: var(--pi-spacing-x-large);
}
}
}
// Tablet
&.is-tablet {
.pi-layout {
&.pi-layout__06-edge-to-edge {
padding: var(--pi-spacing-xxx-large);
}
}
}
// Desktop
&.is-desktop {
.pi-layout {
&.pi-layout__06-edge-to-edge {
padding: var(--pi-spacing-xxxx-large);
}
}
}
}
@mixin saasContainerSpacings($padding-top: var(--pi-public-height-header-mobile)) {
.pi-container-layout {
padding-bottom: var(--pi-spacing-xxxx-large);
& > .pi-layout__06-edge-to-edge {
& > .pi-wrapper__header {
.pi-header-wrapper-content__center {
padding-top: $padding-top;
}
}
}
}
}
.pi-layout {
&.pi-layout__06-edge-to-edge {
width: 100%;
& > *:nth-child(n + 2) {
&:not(.pi-wrapper__list) {
display: block;
margin-top: var(--pi-spacing-x-large);
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-layout {
&.pi-layout__06-edge-to-edge {
padding: var(--pi-spacing-x-large);
}
}
}
// Tablet
&.is-tablet {
.pi-layout {
&.pi-layout__06-edge-to-edge {
padding: var(--pi-spacing-xxx-large);
}
}
}
// Desktop
&.is-desktop {
.pi-layout {
&.pi-layout__06-edge-to-edge {
padding: var(--pi-spacing-xxxx-large);
}
}
}
}

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

@@ -1,221 +1,221 @@
@mixin wrappersWidth(
$width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
$justify-content: center,
$margin: 0 auto,
$side-spacing: x-large
) {
.pi-layout {
&.pi-layout__07-list {
.pi-wrapper {
// Wrapper
&:not(.pi-wrapper__list):not(.pi-wrapper__flex) {
max-width: $width;
width: -webkit-fill-available;
}
// List Wrapper
&.pi-wrapper__list {
.pi-data-grid {
justify-content: $justify-content;
}
}
}
}
}
.pi-layout {
&.pi-layout__07-list {
display: flex;
flex-direction: column;
justify-content: space-between;
// Mode Grid
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
max-width: $width;
margin-top: var(--pi-spacing-xx-large);
}
}
// List Layout and edge to edge
&.pi-layout__05-edge-to-edge {
// Mode Grid
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
.pi-data-grid {
.pi-grid-item {
// < Desktop L
@media screen and (max-width: 120rem) {
max-width: calc(100% - var(--pi-spacing-x-large));
}
// >= Desktop L
@media screen and (min-width: 120rem) {
max-width: $width;
}
}
}
}
}
}
}
}
}
@mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) {
.pi-shell__deale-saas {
& > div {
.pi-layout {
&.pi-layout__07-list {
height: $height;
}
}
}
}
}
@mixin paginatorWidth($width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))) {
.pi-shell__deale-saas {
& > div {
.pi-layout {
&.pi-layout__07-list {
.pi-paginator {
max-width: $width;
}
}
}
}
}
}
.pi-shell__deale-saas {
& > div {
// Grid mode (Infinite scroll)
&.is-mode-grid {
.pi-layout {
&.pi-layout__07-list {
width: 100%;
overflow-y: hidden;
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include wrappersWidth;
@include listLayoutHeight;
@include paginatorWidth;
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-shell__deale-saas {
.pi-icon-button {
&.is-sticky {
position: absolute;
right: var(--pi-spacing-x-large);
bottom: calc(
var(--pi-height-footer) + env(safe-area-inset-bottom) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-small)
);
z-index: 99;
}
}
}
// Small device
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
& > div {
.pi-layout {
&.pi-layout__07-list {
.pi-wrapper__header {
.pi-switch-button {
display: none;
}
}
}
}
// List mode
&.is-mode-list {
.pi-layout {
&.pi-layout__07-list {
.pi-wrapper__header {
padding-top: var(--pi-height-header-tablet);
}
}
}
}
}
// Grid mode
&.is-mode-grid {
.pi-layout {
&.pi-layout__07-list {
// Wrapper
.pi-wrapper {
// Header wrapper
&.pi-wrapper__header {
min-height: var(--pi-height-layout-header);
margin: var(--pi-height-header-mobile) auto 0;
}
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include listLayoutHeight(calc(100vh - var(--pi-height-header-tablet)));
@include wrappersWidth;
@include paginatorWidth;
}
// Tablet L
&.is-tablet__large {
@include listLayoutHeight(
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
)
);
@include wrappersWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
left,
unset,
unset
);
@include paginatorWidth(calc(100%));
}
}
&.is-desktop {
@include listLayoutHeight(
calc(
100vh - var(--pi-height-header-desktop) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-medium)
)
);
// Desktop S
&.is-desktop__small {
@include wrappersWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
left,
unset,
unset
);
@include paginatorWidth(calc(100%));
}
// Desktop M
&.is-desktop__medium {
@include wrappersWidth(calc(100% - var(--pi-spacing-x-large)), left, unset, unset);
@include paginatorWidth(calc(100% - var(--pi-spacing-x-large)));
}
// Desktop L
&.is-desktop__large {
@include wrappersWidth(var(--pi-width-container-l), left, unset, unset);
@include paginatorWidth(calc(var(--pi-width-container-l)));
}
}
}
@mixin wrappersWidth(
$width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
$justify-content: center,
$margin: 0 auto,
$side-spacing: x-large
) {
.pi-layout {
&.pi-layout__07-list {
.pi-wrapper {
// Wrapper
&:not(.pi-wrapper__list):not(.pi-wrapper__flex) {
max-width: $width;
width: -webkit-fill-available;
}
// List Wrapper
&.pi-wrapper__list {
.pi-data-grid {
justify-content: $justify-content;
}
}
}
}
}
.pi-layout {
&.pi-layout__07-list {
display: flex;
flex-direction: column;
justify-content: space-between;
// Mode Grid
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
max-width: $width;
margin-top: var(--pi-spacing-xx-large);
}
}
// List Layout and edge to edge
&.pi-layout__05-edge-to-edge {
// Mode Grid
.pi-wrapper {
// List Wrapper
&.pi-wrapper__list {
.pi-data-grid {
.pi-grid-item {
// < Desktop L
@media screen and (max-width: 120rem) {
max-width: calc(100% - var(--pi-spacing-x-large));
}
// >= Desktop L
@media screen and (min-width: 120rem) {
max-width: $width;
}
}
}
}
}
}
}
}
}
@mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) {
.pi-shell__deale-saas {
& > div {
.pi-layout {
&.pi-layout__07-list {
height: $height;
}
}
}
}
}
@mixin paginatorWidth($width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))) {
.pi-shell__deale-saas {
& > div {
.pi-layout {
&.pi-layout__07-list {
.pi-paginator {
max-width: $width;
}
}
}
}
}
}
.pi-shell__deale-saas {
& > div {
// Grid mode (Infinite scroll)
&.is-mode-grid {
.pi-layout {
&.pi-layout__07-list {
width: 100%;
overflow-y: hidden;
}
}
}
}
}
html {
// Mobile
&.is-mobile {
@include wrappersWidth;
@include listLayoutHeight;
@include paginatorWidth;
}
// Mobile & Tablet
&:not(.is-desktop) {
.pi-shell__deale-saas {
.pi-icon-button {
&.is-sticky {
position: absolute;
right: var(--pi-spacing-x-large);
bottom: calc(
var(--pi-height-footer) + env(safe-area-inset-bottom) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-small)
);
z-index: 99;
}
}
}
// Small device
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
& > div {
.pi-layout {
&.pi-layout__07-list {
.pi-wrapper__header {
.pi-switch-button {
display: none;
}
}
}
}
// List mode
&.is-mode-list {
.pi-layout {
&.pi-layout__07-list {
.pi-wrapper__header {
padding-top: var(--pi-height-header-tablet);
}
}
}
}
}
// Grid mode
&.is-mode-grid {
.pi-layout {
&.pi-layout__07-list {
// Wrapper
.pi-wrapper {
// Header wrapper
&.pi-wrapper__header {
min-height: var(--pi-height-layout-header);
margin: var(--pi-height-header-mobile) auto 0;
}
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include listLayoutHeight(calc(100vh - var(--pi-height-header-tablet)));
@include wrappersWidth;
@include paginatorWidth;
}
// Tablet L
&.is-tablet__large {
@include listLayoutHeight(
calc(
100vh - var(--pi-height-header-tablet) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-xx-large)
)
);
@include wrappersWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
left,
unset,
unset
);
@include paginatorWidth(calc(100%));
}
}
&.is-desktop {
@include listLayoutHeight(
calc(
100vh - var(--pi-height-header-desktop) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-medium)
)
);
// Desktop S
&.is-desktop__small {
@include wrappersWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
left,
unset,
unset
);
@include paginatorWidth(calc(100%));
}
// Desktop M
&.is-desktop__medium {
@include wrappersWidth(calc(100% - var(--pi-spacing-x-large)), left, unset, unset);
@include paginatorWidth(calc(100% - var(--pi-spacing-x-large)));
}
// Desktop L
&.is-desktop__large {
@include wrappersWidth(var(--pi-width-container-l), left, unset, unset);
@include paginatorWidth(calc(var(--pi-width-container-l)));
}
}
}

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

@@ -1,18 +1,18 @@
.pi-layout {
&.pi-layout__07-list {
&.pi-layout__07a-list--auto {
// Mode Grid
.pi-wrapper {
margin: 0 auto var(--pi-spacing-x-large);
// List Wrapper
&.pi-wrapper__list {
& > section {
& > div {
margin: auto;
}
}
}
}
}
}
}
.pi-layout {
&.pi-layout__07-list {
&.pi-layout__07a-list--auto {
// Mode Grid
.pi-wrapper {
margin: 0 auto var(--pi-spacing-x-large);
// List Wrapper
&.pi-wrapper__list {
& > section {
& > div {
margin: auto;
}
}
}
}
}
}
}

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

@@ -1,19 +1,19 @@
.pi-layout {
&.pi-layout__05-splitted {
.pi-layout {
&.pi-layout__08-form {
padding-top: var(--pi-spacing-medium);
&::-webkit-scrollbar {
display: block;
width: var(--pi-spacing-xxx-small);
}
}
}
}
&.pi-layout__08-form {
.pi-filter-range {
display: block;
width: 100%;
}
}
}
.pi-layout {
&.pi-layout__05-splitted {
.pi-layout {
&.pi-layout__08-form {
padding-top: var(--pi-spacing-medium);
&::-webkit-scrollbar {
display: block;
width: var(--pi-spacing-xxx-small);
}
}
}
}
&.pi-layout__08-form {
.pi-filter-range {
display: block;
width: 100%;
}
}
}

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

@@ -1,3 +1,3 @@
.pi-container-layout {
padding-bottom: var(--pi-spacing-xxxx-large);
}
.pi-container-layout {
padding-bottom: var(--pi-spacing-xxxx-large);
}

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

@@ -1,203 +1,203 @@
@mixin layoutHeight(
$height:
calc(
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large)
)
) {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
height: $height;
}
}
}
@mixin layoutWidth(
$max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
$margin: var(--pi-height-header-mobile) auto 0
) {
.pi-layout {
// Default scroll
&.pi-layout__main {
max-width: $max-width;
margin: $margin;
}
}
}
.pi-layout {
&:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) {
display: block;
}
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(.pi-layout__05-splitted):not(.pi-layout__08-form
) {
overflow-y: scroll;
overflow-x: hidden;
}
&.pi-layout__main {
& > *:nth-child(1) {
margin-top: var(--pi-spacing-xx-large);
}
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-x-large);
}
& > .pi-component {
display: block;
& > .pi-panel {
box-shadow: var(--pi-box-shadow);
}
}
}
&.pi-layout__no-padding {
padding: 0;
}
}
html {
// Mobile
&.is-mobile {
@include layoutHeight;
@include layoutWidth;
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__01-dashboard,
&.pi-layout__main {
padding-bottom: 11.5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
.pi-layout {
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
max-width: calc(100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium));
}
&.pi-layout__main {
padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer));
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-medium);
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
.has-bottom-sticky-note {
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) - 2rem)
);
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer)));
@include layoutWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
var(--pi-height-header-tablet) auto 0
);
.pi-layout {
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
max-width: calc(100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
}
&.pi-layout__main {
padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer));
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-x-large);
}
}
}
}
// Tablet L
&.is-tablet__large {
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - 3.25rem));
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
}
}
// Tablet & Desktop
&:not(.is-desktop) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__main {
.pi-layout {
&.pi-layout__main {
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-xx-large);
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(
calc(
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);
}
}
@mixin layoutHeight(
$height:
calc(
100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large)
)
) {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
height: $height;
}
}
}
@mixin layoutWidth(
$max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
$margin: var(--pi-height-header-mobile) auto 0
) {
.pi-layout {
// Default scroll
&.pi-layout__main {
max-width: $max-width;
margin: $margin;
}
}
}
.pi-layout {
&:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) {
display: block;
}
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(.pi-layout__05-splitted):not(.pi-layout__08-form
) {
overflow-y: scroll;
overflow-x: hidden;
}
&.pi-layout__main {
& > *:nth-child(1) {
margin-top: var(--pi-spacing-xx-large);
}
& > *:nth-child(n + 2) {
margin-top: var(--pi-spacing-x-large);
}
& > .pi-component {
display: block;
& > .pi-panel {
box-shadow: var(--pi-box-shadow);
}
}
}
&.pi-layout__no-padding {
padding: 0;
}
}
html {
// Mobile
&.is-mobile {
@include layoutHeight;
@include layoutWidth;
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__01-dashboard,
&.pi-layout__main {
padding-bottom: 11.5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
.pi-layout {
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
max-width: calc(100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium));
}
&.pi-layout__main {
padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer));
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-medium);
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
.has-bottom-sticky-note {
@include layoutHeight(
calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) - 2rem)
);
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer)));
@include layoutWidth(
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
var(--pi-height-header-tablet) auto 0
);
.pi-layout {
// Default scroll
&:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
.pi-layout__05-splitted
):not(.pi-layout__08-form) {
max-width: calc(100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
}
&.pi-layout__main {
padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer));
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-x-large);
}
}
}
}
// Tablet L
&.is-tablet__large {
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(calc(100vh - var(--pi-height-header-tablet) - 3.25rem));
@include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
}
}
// Tablet & Desktop
&:not(.is-desktop) {
// Large device
@media screen and (min-width: 62rem) {
.pi-layout {
&.pi-layout__main {
.pi-layout {
&.pi-layout__main {
& > *:nth-child(-n + 3) {
margin-top: var(--pi-spacing-xx-large);
}
}
}
}
}
}
}
// Desktop
&.is-desktop {
.has-bottom-sticky-note {
.pi-layout {
&.pi-layout__main,
&.pi-layout__01-dashboard {
padding-bottom: 5rem;
}
&.pi-layout__07-list {
& > .pi-wrapper__list {
& > section {
padding-bottom: 5rem;
}
}
}
}
}
@include layoutHeight(
calc(
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);
}
}

36
libs/ui/src/lib/styles/deale-saas/layouts/index.scss
View File

@@ -1,18 +1,18 @@
@forward 'pi-00-authentication-layout';
@forward 'pi-01-dashboard-layout';
@forward 'pi-01a-dashboard-layout-company';
@forward 'pi-01b-dashboard-layout-investor';
@forward 'pi-01c-dashboard-layout-advisor';
@forward 'pi-01-dashboard-layout-old';
@forward 'pi-02-full-width-layout';
@forward 'pi-02a-full-width-auto-layout';
@forward 'pi-03-vertically-centered-layout';
@forward 'pi-04-space-between-layout';
@forward 'pi-05-splitted-layout';
@forward 'pi-05a-splitted-paywall-layout';
@forward 'pi-06-edge-to-edge-layout';
@forward 'pi-07-list-layout';
@forward 'pi-07a-list-auto-layout';
@forward 'pi-08-form-layout';
@forward 'pi-container-layout';
@forward 'pi-layout';
@forward 'pi-00-authentication-layout';
@forward 'pi-01-dashboard-layout';
@forward 'pi-01a-dashboard-layout-company';
@forward 'pi-01b-dashboard-layout-investor';
@forward 'pi-01c-dashboard-layout-advisor';
@forward 'pi-01-dashboard-layout-old';
@forward 'pi-02-full-width-layout';
@forward 'pi-02a-full-width-auto-layout';
@forward 'pi-03-vertically-centered-layout';
@forward 'pi-04-space-between-layout';
@forward 'pi-05-splitted-layout';
@forward 'pi-05a-splitted-paywall-layout';
@forward 'pi-06-edge-to-edge-layout';
@forward 'pi-07-list-layout';
@forward 'pi-07a-list-auto-layout';
@forward 'pi-08-form-layout';
@forward 'pi-container-layout';
@forward 'pi-layout';

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

@@ -1,361 +1,361 @@
@mixin asideActionWrapper() {
gap: var(--pi-spacing-medium);
& > *:nth-child(n + 1) {
display: flex;
justify-content: center;
align-items: center;
min-width: 50%;
width: -webkit-fill-available;
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: unset;
padding-left: unset;
padding-right: unset;
}
}
.pi-button__w100 {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: 100%;
}
}
}
}
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
display: block;
position: fixed;
z-index: 99;
padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
overflow: hidden;
transition: var(--pi-animation);
& > .pi-close-button {
position: absolute;
margin-top: -1rem;
}
& > .pi-icon {
position: absolute;
height: var(--pi-spacing-xxx-large);
width: var(--pi-spacing-xxx-large);
margin-left: var(--pi-spacing-x-small);
margin-top: -0.475rem;
transition: var(--pi-animation);
}
&.pi-saas-aside__white {
background-color: var(--pi-color-white);
border: 1px solid var(--pi-color-white-900);
.pi-buyer-companies-list-filters {
.pi-accordion + .pi-wrapper {
padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
}
}
}
.pi-accordion-item-content__header {
& > .pi-text-viewer {
&.pi-text-viewer__font-size--m-xs {
label {
font: {
size: var(--pi-font-size-small);
}
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
opacity: 1;
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-aside {
transform: translateX(calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large)));
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(2) {
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0;
.pi-wrapper__action {
flex-direction: column;
@include asideActionWrapper;
}
}
& > *:nth-child(3) {
@include asideActionWrapper;
}
}
}
// Dynamic menu
.pi-dynamic-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
overflow-y: scroll;
.pi-panel {
width: 100%;
}
& > *:nth-child(1) {
flex-shrink: 0;
height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top));
.pi-headline {
max-width: 50%;
margin: auto;
}
}
& > *:nth-child(2) {
&.pi-wrapper__flex {
overflow-y: auto;
height: 100%;
// Generic Scroll
&::-webkit-scrollbar {
width: 0.1875rem;
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
}
}
}
& > .pi-list-item {
border-radius: var(--pi-border-radius-medium);
padding: var(--pi-spacing-medium);
}
}
& > *:nth-child(3) {
flex-shrink: 0;
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
margin: 0 auto;
.pi-icon-button {
margin-bottom: var(--pi-spacing-x-large);
width: -webkit-fill-available;
}
}
&.pi-saas-admin-user-profile {
.pi-icon__x-large {
&.is-stroked {
&.pi-icon__appearance--fill {
height: 7rem;
width: 7rem;
border-radius: 50%;
.mat-icon {
height: 4rem;
width: 4rem;
}
}
}
}
}
}
}
// Aside is NOT closable
&:not(.aside-is-closable) {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
calc(var(--pi-spacing-x-large) + var(--pi-spacing-large));
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
& > .pi-close-button {
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
transform: translateX(var(--pi-spacing-x-large));
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
& > div {
// Not fullscreen
&:not(.is-fullscreen) {
.pi-saas-aside {
top: 0;
height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
width: 100%;
& > .pi-close-button {
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
}
& > *:nth-child(2) {
height: calc(
100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
var(--pi-height-header-aside) - var(--pi-height-footer-aside)
);
}
}
// Aside is open
&.aside-is-open {
overflow: hidden;
.pi-saas-aside {
transform: translateX(0);
transition-duration: 0.4s;
}
& > section,
& > .pi-saas-navbar {
position: fixed;
transform: translateX(calc(-100vw));
transition-duration: 0.4s;
}
}
// Aside is closed
&.aside-is-closed {
overflow: unset;
.pi-saas-aside {
transition-duration: 0.4s;
}
& > section,
& > .pi-saas-navbar {
transform: translateX(calc(0));
transition-duration: 0.5s;
}
}
.pi-dynamic-menu {
& > *:nth-child(3) {
height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
margin: 0 auto var(--pi-spacing-xxx-large);
}
& > *:nth-child(n + 2) {
padding: 0 var(--pi-spacing-x-large);
}
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
var(--pi-spacing-xxxx-large);
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
// Not fullscreen
&:not(.is-fullscreen) {
.pi-saas-aside {
top: var(--pi-spacing-x-large);
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
width: var(--pi-width-aside);
border-radius: var(--pi-border-radius-large);
box-shadow: var(--pi-box-shadow-panel-double);
& > *:nth-child(2) {
flex-grow: 1;
height: 100%;
}
& > .pi-close-button {
margin-left: calc(var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large));
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
transform: translateX(
calc(100vw - var(--pi-width-aside) - var(--pi-spacing-x-large))
);
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-aside {
opacity: 0;
transition-duration: 0.6s;
}
}
.pi-dynamic-menu {
& > *:nth-child(2) {
padding: var(--pi-spacing-x-large);
}
& > *:nth-child(3) {
height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
margin: 0 auto;
padding: var(--pi-spacing-x-large) 0 0;
}
}
// Back link is hidden
&.backlink-is-hidden {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large);
}
}
.pi-saas-aside {
& > .pi-icon {
display: none;
}
}
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}
@mixin asideActionWrapper() {
gap: var(--pi-spacing-medium);
& > *:nth-child(n + 1) {
display: flex;
justify-content: center;
align-items: center;
min-width: 50%;
width: -webkit-fill-available;
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: unset;
padding-left: unset;
padding-right: unset;
}
}
.pi-button__w100 {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
.pi-button__icon--single
):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) {
min-width: 100%;
}
}
}
}
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
display: block;
position: fixed;
z-index: 99;
padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
overflow: hidden;
transition: var(--pi-animation);
& > .pi-close-button {
position: absolute;
margin-top: -1rem;
}
& > .pi-icon {
position: absolute;
height: var(--pi-spacing-xxx-large);
width: var(--pi-spacing-xxx-large);
margin-left: var(--pi-spacing-x-small);
margin-top: -0.475rem;
transition: var(--pi-animation);
}
&.pi-saas-aside__white {
background-color: var(--pi-color-white);
border: 1px solid var(--pi-color-white-900);
.pi-buyer-companies-list-filters {
.pi-accordion + .pi-wrapper {
padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
}
}
}
.pi-accordion-item-content__header {
& > .pi-text-viewer {
&.pi-text-viewer__font-size--m-xs {
label {
font: {
size: var(--pi-font-size-small);
}
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
opacity: 1;
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-aside {
transform: translateX(calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large)));
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(2) {
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0;
.pi-wrapper__action {
flex-direction: column;
@include asideActionWrapper;
}
}
& > *:nth-child(3) {
@include asideActionWrapper;
}
}
}
// Dynamic menu
.pi-dynamic-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
overflow-y: scroll;
.pi-panel {
width: 100%;
}
& > *:nth-child(1) {
flex-shrink: 0;
height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top));
.pi-headline {
max-width: 50%;
margin: auto;
}
}
& > *:nth-child(2) {
&.pi-wrapper__flex {
overflow-y: auto;
height: 100%;
// Generic Scroll
&::-webkit-scrollbar {
width: 0.1875rem;
}
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
border-radius: var(--pi-border-radius-small);
&:hover {
transition: var(--pi-animation);
}
}
}
& > .pi-list-item {
border-radius: var(--pi-border-radius-medium);
padding: var(--pi-spacing-medium);
}
}
& > *:nth-child(3) {
flex-shrink: 0;
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
margin: 0 auto;
.pi-icon-button {
margin-bottom: var(--pi-spacing-x-large);
width: -webkit-fill-available;
}
}
&.pi-saas-admin-user-profile {
.pi-icon__x-large {
&.is-stroked {
&.pi-icon__appearance--fill {
height: 7rem;
width: 7rem;
border-radius: 50%;
.mat-icon {
height: 4rem;
width: 4rem;
}
}
}
}
}
}
}
// Aside is NOT closable
&:not(.aside-is-closable) {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
calc(var(--pi-spacing-x-large) + var(--pi-spacing-large));
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
& > .pi-close-button {
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
transform: translateX(var(--pi-spacing-x-large));
}
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small device
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
& > div {
// Not fullscreen
&:not(.is-fullscreen) {
.pi-saas-aside {
top: 0;
height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
width: 100%;
& > .pi-close-button {
margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
}
& > *:nth-child(2) {
height: calc(
100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
var(--pi-height-header-aside) - var(--pi-height-footer-aside)
);
}
}
// Aside is open
&.aside-is-open {
overflow: hidden;
.pi-saas-aside {
transform: translateX(0);
transition-duration: 0.4s;
}
& > section,
& > .pi-saas-navbar {
position: fixed;
transform: translateX(calc(-100vw));
transition-duration: 0.4s;
}
}
// Aside is closed
&.aside-is-closed {
overflow: unset;
.pi-saas-aside {
transition-duration: 0.4s;
}
& > section,
& > .pi-saas-navbar {
transform: translateX(calc(0));
transition-duration: 0.5s;
}
}
.pi-dynamic-menu {
& > *:nth-child(3) {
height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
margin: 0 auto var(--pi-spacing-xxx-large);
}
& > *:nth-child(n + 2) {
padding: 0 var(--pi-spacing-x-large);
}
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
var(--pi-spacing-xxxx-large);
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Large device
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
// Not fullscreen
&:not(.is-fullscreen) {
.pi-saas-aside {
top: var(--pi-spacing-x-large);
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
width: var(--pi-width-aside);
border-radius: var(--pi-border-radius-large);
box-shadow: var(--pi-box-shadow-panel-double);
& > *:nth-child(2) {
flex-grow: 1;
height: 100%;
}
& > .pi-close-button {
margin-left: calc(var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large));
}
}
// Aside is open
&.aside-is-open {
.pi-saas-aside {
transform: translateX(
calc(100vw - var(--pi-width-aside) - var(--pi-spacing-x-large))
);
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-aside {
opacity: 0;
transition-duration: 0.6s;
}
}
.pi-dynamic-menu {
& > *:nth-child(2) {
padding: var(--pi-spacing-x-large);
}
& > *:nth-child(3) {
height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
margin: 0 auto;
padding: var(--pi-spacing-x-large) 0 0;
}
}
// Back link is hidden
&.backlink-is-hidden {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large);
}
}
.pi-saas-aside {
& > .pi-icon {
display: none;
}
}
}
}
// Aside is closable
&.aside-is-closable {
.pi-dynamic-menu {
& > *:nth-child(1) {
padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
var(--pi-spacing-x-large);
}
}
}
}
}
}
}
}

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

@@ -1,369 +1,369 @@
.pi-shell__deale-saas {
& > div {
.pi-saas-header {
// Private
display: flex;
border-radius: var(--pi-border-radius-large);
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--pi-spacing-xxxx-small);
}
// Right
&.pi-saas-header-content__right {
display: flex;
justify-content: flex-end;
align-items: center;
& > *:nth-child(n + 1) {
display: flex;
align-items: center;
transition: var(--pi-animation);
&:hover {
cursor: pointer;
}
}
.pi-icon-button {
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
}
.pi-icon {
// Common
&:not(.is-stroked) {
&:hover {
img,
.mat-icon {
transition-duration: 0.15s;
transform: scale(1.15);
}
}
&:not(:hover):not(.is-active) {
img,
.mat-icon {
transition-duration: 0.15s;
transform: scale(1);
}
}
}
// Type stroke
&.is-stroked {
&:hover {
transition-duration: 0.15s;
transform: scale(1.1);
}
&:not(:hover):not(.is-active) {
transition-duration: 0.15s;
transform: scale(1);
}
}
// Active
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-header-content {
// Right
&.pi-saas-header-content__right {
.pi-icon {
&.is-active {
background-color: var(--pi-color-primary-50);
border-radius: 50%;
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-saas-header {
left: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
h2 {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
// Right
&.pi-saas-header-content__right {
gap: var(--pi-spacing-medium);
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small Devices
@media screen and (max-width: 62rem) {
.pi-saas-header {
position: fixed;
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
& > span {
display: flex;
gap: var(--pi-spacing-xx-small);
& > h1 {
font: {
size: var(--pi-font-size-medium);
}
}
}
}
// Mobile
@media screen and (max-width: 40rem) {
height: var(--pi-height-header-mobile);
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle) {
min-width: unset;
padding-left: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-medium);
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
min-width: var(--pi-spacing-xx-large);
}
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
padding: var(--pi-spacing-xxxx-small) unset;
}
&:not(.pi-close-button):not(.pi-hamburger).pi-button__appearance--outline {
background-color: var(--pi-color-accent-75);
transition: all 0.16s ease-in;
border: unset;
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__x-large) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
-moz-border-radius: var(--pi-border-radius-medium);
}
}
}
}
// Tablet S
@media screen and (min-width: 40rem) {
height: var(--pi-height-header-tablet);
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
}
}
}
}
// Left
&.pi-saas-header-content__left {
width: 60%;
& > span {
& > h1 {
font: {
size: var(--pi-font-size-medium);
}
}
}
}
// Right
&.pi-saas-header-content__right {
width: 40%;
display: flex;
align-items: center;
.pi-avatar {
padding: var(--pi-spacing-xxx-small);
&:hover,
&.is-active {
transform: scale(1.05);
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
.pi-avatar {
picture {
width: 3rem;
height: 3rem;
}
}
&.is-tablet__small {
.pi-saas-header {
left: var(--pi-spacing-x-large);
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
}
}
// Tablet L
&.is-tablet__large {
.pi-saas-header {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
height: var(--pi-height-header-tablet);
padding-top: var(--pi-spacing-large);
}
// Right
&.pi-saas-header-content__right {
height: var(--pi-height-header-tablet);
padding-top: var(--pi-spacing-xx-small);
}
}
}
}
}
// Tablet L & Desktop
&:not(.is-mobile) {
.pi-saas-header {
.pi-saas-header-content {
// Right
&.pi-saas-header-content__right {
gap: var(--pi-spacing-medium);
.pi-icon-button,
.pi-icon:nth-of-type(1) {
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
&:not(.is-active) {
&::after {
content: '|';
color: var(--pi-color-primary-200);
margin-left: var(--pi-spacing-medium);
font: {
size: var(--pi-font-size-small);
}
}
}
}
}
}
}
// Large Devices
@media screen and (min-width: 62rem) {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
& span {
& > h1 {
font: {
size: var(--pi-font-size-large);
}
}
}
}
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
&.pi-button__appearance--ghost {
padding: var(--pi-spacing-xxxx-small) 0;
}
&:not(.pi-button__appearance--ghost) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large);
}
}
}
}
}
}
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
.pi-saas-header {
transition: var(--pi-animation);
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
width: 45%;
}
// Right
&.pi-saas-header-content__right {
justify-content: flex-end;
width: 55%;
.pi-avatar {
padding: 0.375rem;
&:hover,
&.is-active {
transform: scale(1.075);
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-header {
width: calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large));
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-header {
width: 100%;
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-saas-header {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
height: var(--pi-height-header);
padding-top: var(--pi-spacing-small);
}
// Right
&.pi-saas-header-content__right {
height: var(--pi-height-header);
padding-top: var(--pi-spacing-medium);
}
}
}
}
}
.pi-shell__deale-saas {
& > div {
.pi-saas-header {
// Private
display: flex;
border-radius: var(--pi-border-radius-large);
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--pi-spacing-xxxx-small);
}
// Right
&.pi-saas-header-content__right {
display: flex;
justify-content: flex-end;
align-items: center;
& > *:nth-child(n + 1) {
display: flex;
align-items: center;
transition: var(--pi-animation);
&:hover {
cursor: pointer;
}
}
.pi-icon-button {
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
}
.pi-icon {
// Common
&:not(.is-stroked) {
&:hover {
img,
.mat-icon {
transition-duration: 0.15s;
transform: scale(1.15);
}
}
&:not(:hover):not(.is-active) {
img,
.mat-icon {
transition-duration: 0.15s;
transform: scale(1);
}
}
}
// Type stroke
&.is-stroked {
&:hover {
transition-duration: 0.15s;
transform: scale(1.1);
}
&:not(:hover):not(.is-active) {
transition-duration: 0.15s;
transform: scale(1);
}
}
// Active
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-header-content {
// Right
&.pi-saas-header-content__right {
.pi-icon {
&.is-active {
background-color: var(--pi-color-primary-50);
border-radius: 50%;
}
}
}
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-saas-header {
left: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
h2 {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
// Right
&.pi-saas-header-content__right {
gap: var(--pi-spacing-medium);
}
}
}
}
// Mobile & Tablet
&:not(.is-desktop) {
// Small Devices
@media screen and (max-width: 62rem) {
.pi-saas-header {
position: fixed;
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
& > span {
display: flex;
gap: var(--pi-spacing-xx-small);
& > h1 {
font: {
size: var(--pi-font-size-medium);
}
}
}
}
// Mobile
@media screen and (max-width: 40rem) {
height: var(--pi-height-header-mobile);
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
.pi-button__toggle
):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
.pi-button__trimmed
):not(.pi-button__toggle) {
min-width: unset;
padding-left: var(--pi-spacing-medium);
padding-right: var(--pi-spacing-medium);
}
}
button {
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
min-width: var(--pi-spacing-xx-large);
}
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
padding: var(--pi-spacing-xxxx-small) unset;
}
&:not(.pi-close-button):not(.pi-hamburger).pi-button__appearance--outline {
background-color: var(--pi-color-accent-75);
transition: all 0.16s ease-in;
border: unset;
}
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__x-large) {
border-radius: var(--pi-border-radius-medium);
-webkit-border-radius: var(--pi-border-radius-medium);
-moz-border-radius: var(--pi-border-radius-medium);
}
}
}
}
// Tablet S
@media screen and (min-width: 40rem) {
height: var(--pi-height-header-tablet);
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
}
}
}
}
// Left
&.pi-saas-header-content__left {
width: 60%;
& > span {
& > h1 {
font: {
size: var(--pi-font-size-medium);
}
}
}
}
// Right
&.pi-saas-header-content__right {
width: 40%;
display: flex;
align-items: center;
.pi-avatar {
padding: var(--pi-spacing-xxx-small);
&:hover,
&.is-active {
transform: scale(1.05);
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
.pi-avatar {
picture {
width: 3rem;
height: 3rem;
}
}
&.is-tablet__small {
.pi-saas-header {
left: var(--pi-spacing-x-large);
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
}
}
// Tablet L
&.is-tablet__large {
.pi-saas-header {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
height: var(--pi-height-header-tablet);
padding-top: var(--pi-spacing-large);
}
// Right
&.pi-saas-header-content__right {
height: var(--pi-height-header-tablet);
padding-top: var(--pi-spacing-xx-small);
}
}
}
}
}
// Tablet L & Desktop
&:not(.is-mobile) {
.pi-saas-header {
.pi-saas-header-content {
// Right
&.pi-saas-header-content__right {
gap: var(--pi-spacing-medium);
.pi-icon-button,
.pi-icon:nth-of-type(1) {
&.is-active {
position: absolute;
transform: scale(0);
opacity: 0;
}
&:not(.is-active) {
&::after {
content: '|';
color: var(--pi-color-primary-200);
margin-left: var(--pi-spacing-medium);
font: {
size: var(--pi-font-size-small);
}
}
}
}
}
}
}
// Large Devices
@media screen and (min-width: 62rem) {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
& span {
& > h1 {
font: {
size: var(--pi-font-size-large);
}
}
}
}
// Right
&.pi-saas-header-content__right {
button {
&:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
&.pi-button__appearance--ghost {
padding: var(--pi-spacing-xxxx-small) 0;
}
&:not(.pi-button__appearance--ghost) {
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large);
}
}
}
}
}
}
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
.pi-saas-header {
transition: var(--pi-animation);
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
width: 45%;
}
// Right
&.pi-saas-header-content__right {
justify-content: flex-end;
width: 55%;
.pi-avatar {
padding: 0.375rem;
&:hover,
&.is-active {
transform: scale(1.075);
}
}
}
}
}
// Aside is open
&.aside-is-open {
.pi-saas-header {
width: calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large));
}
}
// Aside is closed
&.aside-is-closed {
.pi-saas-header {
width: 100%;
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-saas-header {
.pi-saas-header-content {
// Left
&.pi-saas-header-content__left {
height: var(--pi-height-header);
padding-top: var(--pi-spacing-small);
}
// Right
&.pi-saas-header-content__right {
height: var(--pi-height-header);
padding-top: var(--pi-spacing-medium);
}
}
}
}
}

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

@@ -1,155 +1,155 @@
.pi-shell__deale-saas {
& > div {
width: 100%;
// NOT Is fullscreen
&:not(.is-fullscreen) {
& > section {
position: fixed;
}
}
// Is fullscreen
&.is-fullscreen {
& > section {
left: 0;
width: 100%;
}
.pi-saas-header,
.pi-saas-navbar {
display: none;
}
}
}
}
html {
// Mobile & Tablet S
&:not(.is-desktop) {
// Tablet L
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
& > div {
& > section {
width: 100%;
padding: 0;
}
// Footer logo
& > .pi-headline {
display: none;
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet L
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
& > section {
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
}
// Not is fullscreen
&:not(.is-fullscreen) {
& > section {
left: calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
// Not is fullscreen
&:not(.is-fullscreen) {
// Layout container
& > section {
top: var(--pi-spacing-x-large);
& > *:nth-child(1) {
padding-right: var(--pi-spacing-x-large);
}
}
}
// Aside is open
&.aside-is-open {
& > .pi-headline {
transform: var(--pi-animation);
transform: translateX(0);
}
}
// Aside is closed
&.aside-is-closed {
& > .pi-headline {
transform: var(--pi-animation);
transform: translateX(calc(var(--pi-width-aside) + var(--pi-spacing-x-large)));
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-shell__deale-saas {
& > div {
// Not is fullscreen
&:not(.is-fullscreen) {
// Layout container
& > section {
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
transition: var(--pi-animation);
& > *:nth-child(1) {
padding-right: var(--pi-spacing-x-large);
}
}
// Navbar is expanded
&.navbar-is-expanded {
& > section {
left: calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}
// Navbar is collapsed
&.navbar-is-collapsed {
& > section {
left: calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}
}
}
}
}
}
.pi-shell__deale-saas {
& > div {
width: 100%;
// NOT Is fullscreen
&:not(.is-fullscreen) {
& > section {
position: fixed;
}
}
// Is fullscreen
&.is-fullscreen {
& > section {
left: 0;
width: 100%;
}
.pi-saas-header,
.pi-saas-navbar {
display: none;
}
}
}
}
html {
// Mobile & Tablet S
&:not(.is-desktop) {
// Tablet L
@media screen and (max-width: 62rem) {
.pi-shell__deale-saas {
& > div {
& > section {
width: 100%;
padding: 0;
}
// Footer logo
& > .pi-headline {
display: none;
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet L
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
& > section {
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
}
// Not is fullscreen
&:not(.is-fullscreen) {
& > section {
left: calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
);
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
.pi-shell__deale-saas {
& > div {
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
// Not is fullscreen
&:not(.is-fullscreen) {
// Layout container
& > section {
top: var(--pi-spacing-x-large);
& > *:nth-child(1) {
padding-right: var(--pi-spacing-x-large);
}
}
}
// Aside is open
&.aside-is-open {
& > .pi-headline {
transform: var(--pi-animation);
transform: translateX(0);
}
}
// Aside is closed
&.aside-is-closed {
& > .pi-headline {
transform: var(--pi-animation);
transform: translateX(calc(var(--pi-width-aside) + var(--pi-spacing-x-large)));
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-shell__deale-saas {
& > div {
// Not is fullscreen
&:not(.is-fullscreen) {
// Layout container
& > section {
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
transition: var(--pi-animation);
& > *:nth-child(1) {
padding-right: var(--pi-spacing-x-large);
}
}
// Navbar is expanded
&.navbar-is-expanded {
& > section {
left: calc(
var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-expanded) - var(--pi-spacing-x-large) -
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}
// Navbar is collapsed
&.navbar-is-collapsed {
& > section {
left: calc(
var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
var(--pi-spacing-x-large)
);
width: calc(
100% - var(--pi-width-navbar-collapsed) - var(--pi-spacing-x-large) -
var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
);
}
}
}
}
}
}
}

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

File diff suppressed because it is too large Load Diff

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

@@ -1,280 +1,280 @@
.pi-saas-navbar {
position: fixed;
z-index: 99;
background-color: var(--pi-color-white);
border: 1px solid var(--pi-color-white-900);
border-radius: var(--pi-border-radius-large);
.pi-headline {
margin: auto;
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
.pi-headline {
width: calc(100% - var(--pi-spacing-x-large));
padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large);
}
.pi-chevron-button {
width: var(--pi-spacing-x-large);
margin-bottom: 1.125rem;
padding: 0.1375rem;
}
}
}
.pi-chevron-button {
position: relative;
left: var(--pi-spacing-small);
border-radius: 50%;
box-shadow: var(--pi-box-shadow);
}
}
@mixin multispaceNavbarGridLargeDevice {
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pi-spacing-xxx-small);
.pi-divider {
width: -webkit-fill-available;
max-width: calc(100% - var(--pi-spacing-xxxx-large));
}
}
}
}
@mixin multispaceNavbarGridSmallDevice {
// Advisor Profile Multispace
.is-advisor {
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
display: flex;
flex-direction: row-reverse;
align-items: center;
.pi-menu {
&.pi-menu__parent {
&:first-of-type {
width: 20%;
& > nav {
padding-left: unset;
.pi-menu-event-item {
&.has-children {
border-left: 1px solid var(--pi-color-grey-75);
}
}
}
}
&:last-of-type {
width: 80%;
& > nav {
padding-right: unset;
}
}
}
}
}
}
}
}
html {
// Mobile & Tablet
&.is-mobile {
@include multispaceNavbarGridSmallDevice;
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
left: var(--pi-spacing-medium);
bottom: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
}
}
}
}
&:not(.is-desktop) {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
position: fixed;
height: var(--pi-height-footer);
box-shadow: var(--pi-box-shadow-panel);
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top,
&.pi-saas-navbar-content__bottom {
display: none;
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include multispaceNavbarGridSmallDevice;
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
left: var(--pi-spacing-x-large);
bottom: var(--pi-spacing-x-large);
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
}
}
}
}
// Tablet L
&.is-tablet__large {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
width: var(--pi-width-navbar-collapsed);
box-shadow: var(--pi-box-shadow-panel);
.pi-headline {
height: 5.25rem;
max-width: 3.35rem;
padding: 1.6rem var(--pi-spacing-small);
}
.pi-chevron-button {
display: none;
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > .pi-chip {
transform: scale(0.8);
img {
transform: scale(0.8);
}
}
}
&.pi-saas-navbar-content__bottom {
padding: var(--pi-spacing-x-large) 0;
margin: 0 auto;
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
@include multispaceNavbarGridLargeDevice;
.pi-shell__deale-saas {
& > div {
&:not(.is-fullscreen) {
.pi-saas-navbar {
top: var(--pi-spacing-x-large);
left: var(--pi-spacing-x-large);
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
.pi-chip {
margin: auto;
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
width: var(--pi-width-navbar-expanded);
box-shadow: var(--pi-box-shadow-panel);
transition: var(--pi-animation);
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > header {
display: flex;
align-items: flex-end;
}
& > .pi-chip {
margin: auto;
transform: scale(0.9);
img {
transform: scale(0.9);
}
}
}
&.pi-saas-navbar-content__bottom {
padding: var(--pi-spacing-x-large) 0;
text-align: center;
}
}
.pi-headline {
transition: var(--pi-animation);
}
}
// Expanded
&.navbar-is-expanded {
.pi-saas-navbar {
width: var(--pi-width-navbar-expanded);
.pi-headline {
max-width: 8rem;
height: 5rem;
opacity: 0;
&.pi-logo {
transition: var(--pi-animation);
transition-duration: 0.35s;
transition-delay: 0.15s;
opacity: 1;
}
& > .pi-chip {
transform: scale(0.9);
}
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
padding: var(--pi-spacing-x-large) 0;
}
}
}
}
// Collapsed
&.navbar-is-collapsed {
.pi-saas-navbar {
width: var(--pi-width-navbar-collapsed);
.pi-headline {
max-width: 3.35rem;
height: 5.25rem;
padding: 1.25rem 0 0 var(--pi-spacing-x-large);
opacity: 0;
transition: var(--pi-animation);
&.pi-logo-simple {
transition: var(--pi-animation);
transition-duration: 0.35s;
transition-delay: 0.15s;
opacity: 1;
}
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > .pi-chip {
transform: scale(0.8);
}
}
}
}
}
}
}
}
}
}
.pi-saas-navbar {
position: fixed;
z-index: 99;
background-color: var(--pi-color-white);
border: 1px solid var(--pi-color-white-900);
border-radius: var(--pi-border-radius-large);
.pi-headline {
margin: auto;
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
.pi-headline {
width: calc(100% - var(--pi-spacing-x-large));
padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large);
}
.pi-chevron-button {
width: var(--pi-spacing-x-large);
margin-bottom: 1.125rem;
padding: 0.1375rem;
}
}
}
.pi-chevron-button {
position: relative;
left: var(--pi-spacing-small);
border-radius: 50%;
box-shadow: var(--pi-box-shadow);
}
}
@mixin multispaceNavbarGridLargeDevice {
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pi-spacing-xxx-small);
.pi-divider {
width: -webkit-fill-available;
max-width: calc(100% - var(--pi-spacing-xxxx-large));
}
}
}
}
@mixin multispaceNavbarGridSmallDevice {
// Advisor Profile Multispace
.is-advisor {
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
display: flex;
flex-direction: row-reverse;
align-items: center;
.pi-menu {
&.pi-menu__parent {
&:first-of-type {
width: 20%;
& > nav {
padding-left: unset;
.pi-menu-event-item {
&.has-children {
border-left: 1px solid var(--pi-color-grey-75);
}
}
}
}
&:last-of-type {
width: 80%;
& > nav {
padding-right: unset;
}
}
}
}
}
}
}
}
html {
// Mobile & Tablet
&.is-mobile {
@include multispaceNavbarGridSmallDevice;
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
left: var(--pi-spacing-medium);
bottom: var(--pi-spacing-medium);
width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
}
}
}
}
&:not(.is-desktop) {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
// Mobile & Tablet S
@media screen and (max-width: 62rem) {
position: fixed;
height: var(--pi-height-footer);
box-shadow: var(--pi-box-shadow-panel);
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top,
&.pi-saas-navbar-content__bottom {
display: none;
}
}
}
}
}
}
}
// Tablet
&.is-tablet {
// Tablet S
&.is-tablet__small {
@include multispaceNavbarGridSmallDevice;
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
left: var(--pi-spacing-x-large);
bottom: var(--pi-spacing-x-large);
width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
}
}
}
}
// Tablet L
&.is-tablet__large {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
width: var(--pi-width-navbar-collapsed);
box-shadow: var(--pi-box-shadow-panel);
.pi-headline {
height: 5.25rem;
max-width: 3.35rem;
padding: 1.6rem var(--pi-spacing-small);
}
.pi-chevron-button {
display: none;
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > .pi-chip {
transform: scale(0.8);
img {
transform: scale(0.8);
}
}
}
&.pi-saas-navbar-content__bottom {
padding: var(--pi-spacing-x-large) 0;
margin: 0 auto;
}
}
}
}
}
}
}
// Tablet & Desktop
&:not(.is-mobile) {
// Tablet L & Desktop
@media screen and (min-width: 62rem) {
@include multispaceNavbarGridLargeDevice;
.pi-shell__deale-saas {
& > div {
&:not(.is-fullscreen) {
.pi-saas-navbar {
top: var(--pi-spacing-x-large);
left: var(--pi-spacing-x-large);
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
.pi-chip {
margin: auto;
}
}
}
}
}
}
// Desktop
&.is-desktop {
.pi-shell__deale-saas {
& > div {
.pi-saas-navbar {
width: var(--pi-width-navbar-expanded);
box-shadow: var(--pi-box-shadow-panel);
transition: var(--pi-animation);
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > header {
display: flex;
align-items: flex-end;
}
& > .pi-chip {
margin: auto;
transform: scale(0.9);
img {
transform: scale(0.9);
}
}
}
&.pi-saas-navbar-content__bottom {
padding: var(--pi-spacing-x-large) 0;
text-align: center;
}
}
.pi-headline {
transition: var(--pi-animation);
}
}
// Expanded
&.navbar-is-expanded {
.pi-saas-navbar {
width: var(--pi-width-navbar-expanded);
.pi-headline {
max-width: 8rem;
height: 5rem;
opacity: 0;
&.pi-logo {
transition: var(--pi-animation);
transition-duration: 0.35s;
transition-delay: 0.15s;
opacity: 1;
}
& > .pi-chip {
transform: scale(0.9);
}
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__center {
padding: var(--pi-spacing-x-large) 0;
}
}
}
}
// Collapsed
&.navbar-is-collapsed {
.pi-saas-navbar {
width: var(--pi-width-navbar-collapsed);
.pi-headline {
max-width: 3.35rem;
height: 5.25rem;
padding: 1.25rem 0 0 var(--pi-spacing-x-large);
opacity: 0;
transition: var(--pi-animation);
&.pi-logo-simple {
transition: var(--pi-animation);
transition-duration: 0.35s;
transition-delay: 0.15s;
opacity: 1;
}
}
.pi-saas-navbar-content {
&.pi-saas-navbar-content__top {
& > .pi-chip {
transform: scale(0.8);
}
}
}
}
}
}
}
}
}
}

10
libs/ui/src/lib/styles/deale-saas/shell/index.scss
View File

@@ -1,5 +1,5 @@
@forward 'pi-aside';
@forward 'pi-header';
@forward 'pi-main';
@forward 'pi-menu';
@forward 'pi-navbar';
@forward 'pi-aside';
@forward 'pi-header';
@forward 'pi-main';
@forward 'pi-menu';
@forward 'pi-navbar';

586
libs/ui/src/lib/styles/deale-saas/theming/_pi-user-type-theming.scss
View File

@@ -1,293 +1,293 @@
@mixin asideColor($color) {
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
// Aside theme
&.pi-saas-aside__theme {
// Not custom
&:not(.is-custom) {
background-color: var(--pi-color-#{$color}-50);
.pi-close-button {
&:hover {
&::before,
&::after {
background-color: var(--pi-color-#{$color});
}
}
}
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-#{$color}-100);
&:hover {
background-color: var(--pi-color-#{$color}-200);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-#{$color}-100);
}
.pi-list-item {
transition: var(--pi-animation);
&.is-clickable {
&:hover {
&.pi-color__primary {
&:not(.is-disabled):not(.is-active) {
background-color: var(--pi-color-#{$color}-75);
}
}
}
}
&.pi-color__primary {
&.is-active {
background-color: var(--pi-color-#{$color}-75);
}
}
.pi-chip {
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
color: var(--pi-color-#{$color});
label {
color: var(--pi-color-#{$color});
}
}
}
}
}
}
// User profile
&.pi-saas-admin-user-profile {
.pi-chip {
// Profile
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--fill {
&:not(.pi-chip__single-icon) {
background-color: var(--pi-color-#{$color});
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
}
}
}
}
// Subscription
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
color: var(--pi-color-#{$color});
}
}
}
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
label {
color: var(--pi-color-#{$color});
}
}
}
}
}
.pi-icon {
&.is-stroked {
&.pi-icon__appearance--fill {
&.pi-icon__x-large {
border-color: var(--pi-color-#{$color}-200);
background-color: var(--pi-color-#{$color}-75);
.mat-icon {
color: var(--pi-color-#{$color});
}
}
}
}
}
}
}
}
// Custom
&.is-custom {
background-color: var(--pi-color-primary-50);
.pi-close-button {
&:hover {
&::before,
&::after {
background-color: var(--pi-color-primary);
}
}
}
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-100);
&:hover {
background-color: var(--pi-color-primary-200);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-primary-100);
}
.pi-list-item {
transition: var(--pi-animation);
&.is-clickable {
&:hover {
&.pi-color__primary {
&:not(.is-disabled):not(.is-active) {
background-color: var(--pi-color-primary-100);
}
}
}
}
&.pi-color__primary {
&.is-active {
background-color: var(--pi-color-primary-100);
}
}
.pi-chip {
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
color: var(--pi-color-primary);
label {
color: var(--pi-color-primary);
}
}
}
}
}
}
// User profile
&.pi-saas-admin-user-profile {
.pi-chip {
// Profile
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--fill {
&:not(.pi-chip__single-icon) {
background-color: var(--pi-color-primary);
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
}
}
}
}
// Subscription
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
color: var(--pi-color-primary);
}
}
}
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
label {
color: var(--pi-color-primary);
}
}
}
}
}
.pi-icon {
&.is-stroked {
&.pi-icon__appearance--fill {
&.pi-icon__x-large {
border-color: var(--pi-color-primary-200);
background-color: var(--pi-color-primary-200-rgba);
.mat-icon {
color: var(--pi-color-primary);
}
}
}
}
}
}
}
}
}
// Aside white
&.pi-saas-aside__white {
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-grey-25);
&:hover {
background-color: var(--pi-color-grey-75);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-white-900);
}
}
}
}
&:not(.is-fullscreen) {
// Large device
@media screen and (min-width: 62rem) {
.pi-saas-aside {
&.pi-saas-aside__theme {
border-width: 1px;
border-style: solid;
&:not(.is-custom) {
border-color: var(--pi-color-#{$color}-100);
}
&.is-custom {
border-color: var(--pi-color-primary-100);
}
}
}
}
}
}
}
}
.is-company {
@include asideColor(primary);
}
.is-investor {
@include asideColor(accent);
}
.is-advisor {
@include asideColor(highlighted);
}
@mixin asideColor($color) {
.pi-shell__deale-saas {
& > div {
.pi-saas-aside {
// Aside theme
&.pi-saas-aside__theme {
// Not custom
&:not(.is-custom) {
background-color: var(--pi-color-#{$color}-50);
.pi-close-button {
&:hover {
&::before,
&::after {
background-color: var(--pi-color-#{$color});
}
}
}
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-#{$color}-100);
&:hover {
background-color: var(--pi-color-#{$color}-200);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-#{$color}-100);
}
.pi-list-item {
transition: var(--pi-animation);
&.is-clickable {
&:hover {
&.pi-color__primary {
&:not(.is-disabled):not(.is-active) {
background-color: var(--pi-color-#{$color}-75);
}
}
}
}
&.pi-color__primary {
&.is-active {
background-color: var(--pi-color-#{$color}-75);
}
}
.pi-chip {
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
color: var(--pi-color-#{$color});
label {
color: var(--pi-color-#{$color});
}
}
}
}
}
}
// User profile
&.pi-saas-admin-user-profile {
.pi-chip {
// Profile
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--fill {
&:not(.pi-chip__single-icon) {
background-color: var(--pi-color-#{$color});
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
}
}
}
}
// Subscription
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-#{$color});
color: var(--pi-color-#{$color});
}
}
}
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
label {
color: var(--pi-color-#{$color});
}
}
}
}
}
.pi-icon {
&.is-stroked {
&.pi-icon__appearance--fill {
&.pi-icon__x-large {
border-color: var(--pi-color-#{$color}-200);
background-color: var(--pi-color-#{$color}-75);
.mat-icon {
color: var(--pi-color-#{$color});
}
}
}
}
}
}
}
}
// Custom
&.is-custom {
background-color: var(--pi-color-primary-50);
.pi-close-button {
&:hover {
&::before,
&::after {
background-color: var(--pi-color-primary);
}
}
}
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-primary-100);
&:hover {
background-color: var(--pi-color-primary-200);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-primary-100);
}
.pi-list-item {
transition: var(--pi-animation);
&.is-clickable {
&:hover {
&.pi-color__primary {
&:not(.is-disabled):not(.is-active) {
background-color: var(--pi-color-primary-100);
}
}
}
}
&.pi-color__primary {
&.is-active {
background-color: var(--pi-color-primary-100);
}
}
.pi-chip {
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
color: var(--pi-color-primary);
label {
color: var(--pi-color-primary);
}
}
}
}
}
}
// User profile
&.pi-saas-admin-user-profile {
.pi-chip {
// Profile
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--fill {
&:not(.pi-chip__single-icon) {
background-color: var(--pi-color-primary);
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
}
}
}
}
// Subscription
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
border-width: 1px;
border-style: solid;
border-color: var(--pi-color-primary);
color: var(--pi-color-primary);
}
}
}
&:not(.pi-status) {
&.pi-color__primary {
&.pi-chip__appearance--outline {
label {
color: var(--pi-color-primary);
}
}
}
}
}
.pi-icon {
&.is-stroked {
&.pi-icon__appearance--fill {
&.pi-icon__x-large {
border-color: var(--pi-color-primary-200);
background-color: var(--pi-color-primary-200-rgba);
.mat-icon {
color: var(--pi-color-primary);
}
}
}
}
}
}
}
}
}
// Aside white
&.pi-saas-aside__white {
// Dynamic menu
.pi-dynamic-menu {
& > *:nth-child(2) {
&.pi-wrapper__flex {
&::-webkit-scrollbar-thumb {
background-color: var(--pi-color-grey-25);
&:hover {
background-color: var(--pi-color-grey-75);
}
}
}
}
& > *:nth-child(3) {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--pi-color-white-900);
}
}
}
}
&:not(.is-fullscreen) {
// Large device
@media screen and (min-width: 62rem) {
.pi-saas-aside {
&.pi-saas-aside__theme {
border-width: 1px;
border-style: solid;
&:not(.is-custom) {
border-color: var(--pi-color-#{$color}-100);
}
&.is-custom {
border-color: var(--pi-color-primary-100);
}
}
}
}
}
}
}
}
.is-company {
@include asideColor(primary);
}
.is-investor {
@include asideColor(accent);
}
.is-advisor {
@include asideColor(highlighted);
}

2
libs/ui/src/lib/styles/deale-saas/theming/index.scss
View File

@@ -1 +1 @@
@forward 'pi-user-type-theming';
@forward 'pi-user-type-theming';

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

@@ -1,47 +1,47 @@
.pi-wrapper {
// Header Wrapper
&.pi-wrapper__header {
// Center
&.pi-wrapper__align-items--center {
.pi-header-wrapper-content {
align-items: center;
}
}
}
}
.pi-layout__07-list {
.pi-header-wrapper-content {
&.pi-header-wrapper-content__left {
width: 100%;
}
&.pi-header-wrapper-content__right {
justify-content: flex-end;
display: flex;
& > aside {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--pi-spacing-xx-small);
.pi-select {
&.pi-select__picked-option-type--button {
.pi-select-picked-option {
background-color: var(--pi-color-white);
}
&:not(:hover) {
.pi-select-picked-option {
box-shadow: var(--pi-box-shadow);
}
}
}
}
.pi-toggle-button {
& > button {
border-radius: var(--pi-border-radius-large);
}
}
}
}
}
.pi-wrapper {
// Header Wrapper
&.pi-wrapper__header {
// Center
&.pi-wrapper__align-items--center {
.pi-header-wrapper-content {
align-items: center;
}
}
}
}
.pi-layout__07-list {
.pi-header-wrapper-content {
&.pi-header-wrapper-content__left {
width: 100%;
}
&.pi-header-wrapper-content__right {
justify-content: flex-end;
display: flex;
& > aside {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--pi-spacing-xx-small);
.pi-select {
&.pi-select__picked-option-type--button {
.pi-select-picked-option {
background-color: var(--pi-color-white);
}
&:not(:hover) {
.pi-select-picked-option {
box-shadow: var(--pi-box-shadow);
}
}
}
}
.pi-toggle-button {
& > button {
border-radius: var(--pi-border-radius-large);
}
}
}
}
}
}

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

@@ -1,42 +1,42 @@
@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) {
.pi-shell__deale-saas {
.pi-wrapper {
// Max width
&.pi-wrapper__full-width,
&.pi-wrapper__full-width-centered {
max-width: $max-width;
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-wrapper {
div {
// Fixed wrapper
&.is-fixed {
position: fixed;
z-index: 99;
left: 0;
bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom));
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
right: 0;
button {
min-width: 50%;
box-shadow: var(--pi-box-shadow);
}
}
}
}
}
// Desktop
&.is-desktop {
@include dealeSaaSWrapperMaxWidth;
}
}
@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) {
.pi-shell__deale-saas {
.pi-wrapper {
// Max width
&.pi-wrapper__full-width,
&.pi-wrapper__full-width-centered {
max-width: $max-width;
}
}
}
}
html {
// Mobile
&.is-mobile {
.pi-wrapper {
div {
// Fixed wrapper
&.is-fixed {
position: fixed;
z-index: 99;
left: 0;
bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom));
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
right: 0;
button {
min-width: 50%;
box-shadow: var(--pi-box-shadow);
}
}
}
}
}
// Desktop
&.is-desktop {
@include dealeSaaSWrapperMaxWidth;
}
}

4
libs/ui/src/lib/styles/deale-saas/wrappers/index.scss
View File

@@ -1,2 +1,2 @@
@forward 'pi-header-wrapper';
@forward 'pi-wrapper';
@forward 'pi-header-wrapper';
@forward 'pi-wrapper';

Some files were not shown because too many files have changed in this diff Show More