370 lines
9.7 KiB
SCSS
370 lines
9.7 KiB
SCSS
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|