113 lines
2.5 KiB
SCSS
113 lines
2.5 KiB
SCSS
@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);
|
|
}
|
|
}
|
|
}
|