refactor styles for payments-mobile

This commit is contained in:
Kostya
2024-01-19 14:29:37 +03:00
parent eae674ba54
commit c20832953f
3 changed files with 45 additions and 1 deletions

View File

@@ -107,6 +107,7 @@ input:focus {
font-weight: 700;
font-size: 9px;
margin-left: 5px;
line-height: unset;
}
.payments-modal__submit {
@@ -127,10 +128,14 @@ input:focus {
}
.payments-modal__submit button {
margin-top: 10px;
border-radius: 10px;
background: #EF4444;
border: none;
padding: 20px 20px;
font-family: Montserrat Alternates;
font-weight: 700;
font-size: 18px;
}
.payments-modal__promocode {
@@ -159,3 +164,37 @@ input:focus {
top: 25px;
left: -10px;
}
/* Media */
@media screen and (max-width: 600px) and (min-width: 420px) {
.root-mobile {
left: 12%;
}
.input-style__mobile input {
width: 300px !important;
}
.button-style__mobile li button {
padding: 8px 14px;
}
.payments-modal__agree h3 {
font-size: 10.5px;
}
}
@media screen and (max-width: 340px) {
.input-style__mobile input {
width: 225px;
}
.button-style__mobile li button {
padding: 6px 8px;
}
.checkbox-styles input[type="checkbox"] {
width: 15px;
height: 15px;
}
input[type="checkbox"]:checked::before {
font-size: 10px;
line-height: unset;
}
}

View File

@@ -62,6 +62,11 @@ body {
font-size: 33px;
}
.header-off {
pointer-events: none !important;
filter: blur(15px) !important;
}
.info-profile {
margin: 6% 10% 0 10%;
text-align: center;

View File

@@ -2,7 +2,7 @@
<div class="content-mobile__profile">
<header-mobile-component></header-mobile-component>
<main class="profile-mobile">
<main class="profile-mobile" :class="{ 'header-off' : payments.paymentsWindow }">
<div class="profile-mobile__content">
<div class="macroinfo-profile text-default-mobile img-margin">
<h2>Профиль</h2>