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