chore: copia de libs/shared con prefijo Pi y APIs de terceros actualizadas
This commit is contained in:
361
libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss
Normal file
361
libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss
Normal file
@@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user