362 lines
10 KiB
SCSS
362 lines
10 KiB
SCSS
@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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|