chore: copia de libs/shared con prefijo Pi y APIs de terceros actualizadas
This commit is contained in:
@@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.pi-layout {
|
||||
&.pi-layout__04-space-between {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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)));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.pi-container-layout {
|
||||
padding-bottom: var(--pi-spacing-xxxx-large);
|
||||
}
|
||||
203
libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss
Normal file
203
libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss
Normal file
@@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
18
libs/ui/src/lib/styles/deale-saas/layouts/index.scss
Normal file
18
libs/ui/src/lib/styles/deale-saas/layouts/index.scss
Normal file
@@ -0,0 +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';
|
||||
Reference in New Issue
Block a user