430 lines
11 KiB
SCSS
430 lines
11 KiB
SCSS
.pi-layout {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
width: 100vw;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position-x: right;
|
|
|
|
.pi-main-wrapper-content {
|
|
min-height: unset;
|
|
// Left
|
|
&.pi-main-wrapper-content__left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
header {
|
|
h1 + * {
|
|
margin-top: var(--pi-spacing-x-small);
|
|
}
|
|
}
|
|
}
|
|
// Right
|
|
&.pi-main-wrapper-content__right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
* + .mat-mdc-radio-group {
|
|
padding-top: var(--pi-spacing-x-large);
|
|
}
|
|
.mat-mdc-radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
label {
|
|
margin-bottom: unset;
|
|
}
|
|
}
|
|
.mat-mdc-radio-label-content {
|
|
padding-left: var(--pi-spacing-medium);
|
|
}
|
|
|
|
.pi-panel {
|
|
box-shadow: var(--pi-box-shadow);
|
|
transition: var(--pi-animation);
|
|
width: 100%;
|
|
max-width: 30rem;
|
|
&.is-active {
|
|
border: 1px solid var(--pi-color-primary-100);
|
|
background-color: var(--pi-color-primary-50);
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
box-shadow: var(--pi-box-shadow-hover);
|
|
&:not(.is-active) {
|
|
border: 1px solid var(--pi-color-primary-200);
|
|
}
|
|
}
|
|
// Padding
|
|
&.has-padding {
|
|
width: 100%;
|
|
padding: var(--pi-spacing-large);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html {
|
|
// Mobile
|
|
&.is-mobile {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
|
|
@media screen and (max-height: 46.25rem) {
|
|
min-height: calc(198vh + var(--pi-height-footer));
|
|
}
|
|
.pi-main-wrapper-content {
|
|
// Right
|
|
&.pi-main-wrapper-content__right {
|
|
height: calc(
|
|
100vh - var(--pi-spacing-x-large) - var(
|
|
--pi-spacing-x-large
|
|
) - var(--pi-height-footer) -
|
|
8rem
|
|
);
|
|
}
|
|
// Left
|
|
&.pi-main-wrapper-content__left {
|
|
// Header
|
|
& > header {
|
|
transform: scale(0.92);
|
|
.pi-color__black-primary {
|
|
& > article {
|
|
display: flex;
|
|
gap: var(--pi-spacing-xxx-small);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Radio panels
|
|
.mat-mdc-radio-group {
|
|
gap: var(--pi-spacing-small);
|
|
width: 100%;
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
.pi-button {
|
|
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
|
|
.pi-button__small
|
|
):not(.pi-button__large) {
|
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.is-tablet {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
|
|
.pi-wrapper__main {
|
|
.pi-main-wrapper-content {
|
|
&.pi-main-wrapper-content__left {
|
|
& > header {
|
|
max-width: 66.66%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
&.pi-main-wrapper-content__right {
|
|
min-height: calc(
|
|
100vh - var(--pi-spacing-xx-large) - var(
|
|
--pi-spacing-xx-large
|
|
) - var(--pi-height-footer) -
|
|
20rem
|
|
);
|
|
}
|
|
}
|
|
}
|
|
.pi-button {
|
|
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
|
|
.pi-button__small
|
|
):not(.pi-button__large) {
|
|
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
|
|
min-width: 11rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Tablet S
|
|
&.is-tablet__small {
|
|
.pi-wrapper__main {
|
|
.pi-main-wrapper-content {
|
|
& > * + *:not(:last-child) {
|
|
width: 66.66%;
|
|
margin: var(--pi-spacing-x-large) auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Tablet L
|
|
&.is-tablet__large {
|
|
.pi-wrapper__main {
|
|
.pi-main-wrapper-content {
|
|
& > * + *:not(:last-child) {
|
|
width: 50%;
|
|
margin: var(--pi-spacing-x-large) auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Mobile & Tablet
|
|
&:not(.is-desktop) {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
// Main
|
|
.pi-wrapper {
|
|
&.pi-wrapper__main {
|
|
& > section {
|
|
padding-bottom: var(--pi-height-header);
|
|
}
|
|
.pi-main-wrapper-content {
|
|
width: 100%;
|
|
// Left
|
|
&.pi-main-wrapper-content__left {
|
|
& > header {
|
|
justify-content: center;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
h3 {
|
|
display: block;
|
|
}
|
|
}
|
|
form {
|
|
& > h4 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
// Action wrapper
|
|
.pi-wrapper__action {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
height: var(--pi-height-footer);
|
|
width: 100%;
|
|
margin-top: unset;
|
|
background-color: var(--pi-color-white-rgba-06);
|
|
box-shadow: var(--pi-box--shadow-top);
|
|
}
|
|
}
|
|
// Right
|
|
&.pi-main-wrapper-content__right {
|
|
gap: var(--pi-spacing-xxxx-large);
|
|
padding-top: 6rem;
|
|
background-image: unset;
|
|
|
|
& > form {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mat-mdc-radio-group {
|
|
align-items: center;
|
|
}
|
|
.mat-mdc-radio-label-content {
|
|
h3 {
|
|
font: {
|
|
size: var(--pi-font-size-xx-large);
|
|
}
|
|
}
|
|
}
|
|
// Mobile and Tablet S
|
|
@media screen and (max-width: 62rem) {
|
|
.pi-main-wrapper-content {
|
|
&.pi-main-wrapper-content__left {
|
|
// Header
|
|
& > header {
|
|
h1 {
|
|
font: {
|
|
size: var(--pi-font-size-x-large);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Action wrapper
|
|
.pi-wrapper__action {
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Small device
|
|
@media screen and (max-width: 62rem) {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
.mat-mdc-radio-group > * {
|
|
width: -webkit-fill-available;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} // Tablet & Desktop
|
|
&:not(.is-mobile) {
|
|
// Tablet L and Desktop
|
|
@media screen and (min-width: 62rem) {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
.pi-main-wrapper-content {
|
|
&.pi-main-wrapper-content__left {
|
|
// Header
|
|
& > header {
|
|
h1 {
|
|
font: {
|
|
size: var(--pi-font-size-xx-large);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-mdc-radio-label-content {
|
|
h3 {
|
|
font: {
|
|
size: 2.375rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Desktop
|
|
&.is-desktop {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
height: 100vh;
|
|
overflow-y: hidden;
|
|
.pi-wrapper__main {
|
|
.pi-main-wrapper-content {
|
|
// Left
|
|
&.pi-main-wrapper-content__left {
|
|
justify-content: space-between;
|
|
max-width: 50%;
|
|
.pi-panel {
|
|
&.has-padding {
|
|
max-width: 32rem;
|
|
}
|
|
}
|
|
.pi-wrapper {
|
|
&.pi-wrapper__action {
|
|
gap: var(--pi-spacing-x-large);
|
|
}
|
|
}
|
|
}
|
|
// Right
|
|
&.pi-main-wrapper-content__right {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.is-desktop__small {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
padding: var(--pi-spacing-xxx-large);
|
|
gap: var(--pi-spacing-xx-large);
|
|
.pi-main-wrapper-content {
|
|
height: calc(
|
|
100vh - var(--pi-spacing-xxx-large) - var(
|
|
--pi-spacing-xxx-large
|
|
)
|
|
);
|
|
// Left
|
|
&.pi-main-wrapper-content__left {
|
|
.mat-mdc-radio-group {
|
|
max-width: 70%;
|
|
}
|
|
}
|
|
|
|
// Right
|
|
&.pi-main-wrapper-content__right {
|
|
gap: var(--pi-spacing-medium);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.is-desktop__medium {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
padding: var(--pi-spacing-xxx-large);
|
|
gap: var(--pi-spacing-xxx-large);
|
|
.pi-main-wrapper-content {
|
|
// Left
|
|
&.pi-main-wrapper-content__left {
|
|
height: calc(
|
|
100vh - var(--pi-spacing-xxx-large) - var(
|
|
--pi-spacing-xxx-large
|
|
)
|
|
);
|
|
.mat-mdc-radio-group {
|
|
max-width: 66.66%;
|
|
}
|
|
}
|
|
// Right
|
|
&.pi-main-wrapper-content__right {
|
|
gap: var(--pi-spacing-x-large);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.is-desktop__large {
|
|
.pi-layout {
|
|
&.pi-layout__05-splitted {
|
|
&.pi-05a-splitted-paywall-layout {
|
|
padding: var(--pi-spacing-xxxx-large);
|
|
gap: var(--pi-spacing-xxxx-large);
|
|
|
|
.pi-main-wrapper-content {
|
|
height: calc(
|
|
100vh - var(--pi-spacing-xxxx-large) - var(
|
|
--pi-spacing-xxxx-large
|
|
)
|
|
);
|
|
// Left
|
|
&.pi-main-wrapper-content__left {
|
|
.mat-mdc-radio-group {
|
|
max-width: 50%;
|
|
}
|
|
.pi-wrapper__action {
|
|
margin-top: 5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|