fix: elimina los ultimos errores de estrictez y normaliza a LF
This commit is contained in:
@@ -1,413 +1,413 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user