improve responsiveness

This commit is contained in:
Peter Maquiran
2023-07-07 12:03:03 +01:00
parent 2d03162a3b
commit c62f7319a0
176 changed files with 1793 additions and 1682 deletions
+26 -26
View File
@@ -18,40 +18,40 @@ ion-content{
}
.wrapper{
width: 400px;
width: rem(400);
height: auto;
padding: 0 !important;
margin: auto !important;
overflow: auto;
}
.logo{
width: 400px;
height: 400px;
width: rem(400);
height: rem(400);
background-image: url("/assets/background/auth.svg");
background-position: center;
background-repeat: no-repeat;
}
.bg-1{
width: 250px;
height: 250px;
width: rem(250);
height: rem(250);
overflow: auto;
border-radius: 50%;
margin: auto;
.bg-2{
width: 225px;
height: 225px;
width: rem(225);
height: rem(225);
overflow: auto;
border-radius: 50%;
margin: auto;
.bg-3{
width: 200px;
height: 200px;
width: rem(200);
height: rem(200);
overflow: auto;
border-radius: 50%;
margin: auto;
.bg-4{
width: 175px;
height: 175px;
width: rem(175);
height: rem(175);
overflow: hidden;
border-radius: 50%;
padding: 15px;
@@ -67,16 +67,16 @@ ion-content{
}
}
.div-logo{
width: 200px !important;
width: rem(200) !important;
margin: 0 auto;
padding: 15px !important;
padding: rem(15) !important;
}
.div-logo img{
width: 100%;
}
.wrapper ion-input{
font-size: 16px;
font-size: rem(16);
}
.wrapper ion-button{
font-size: medium;
@@ -86,24 +86,24 @@ ion-item{
--background: transparent;
}
.form{
width: 300px;
width: rem(300);
margin: auto;
overflow: auto;
}
.form-label{
margin: 15px 0 5px 0;
font-size: 15px;
margin: rem(15) 0 rem(5) 0;
font-size: rem(15);
color: var(--login-label-text);
}
.form-input{
--background: #fff;
--color:#000;
border-radius: 22.5px;
margin: 10px 0 10px 0;
margin: rem(10) 0 rem(10) 0;
}
.btn-login{
font-size: 16px;
font-size: rem(16);
background-color: #F2F2F2 !important;
color: #000;
}
@@ -119,7 +119,7 @@ ion-item{
.div-logo {
background: transparent;
width: em(140px);
width: rem(140);
justify-content: center;
display: flex;
}
@@ -136,7 +136,7 @@ ion-item{
display: flex;
align-items: center;
justify-content: center;
font-size: 19pt;
font-size: rem(25);
background: #44b5ea;
border-radius: 56px;
margin-left: 30px;
@@ -159,15 +159,15 @@ ion-item{
.clear{
color: #44b5ea;
font-size: 12pt;
font-size: rem(16);
}
.dot-active{
background: #44b5ea;
}
.dot{
width: 25px;
height: 25px;
width: rem(25);
height: rem(25);
margin: 0 10px 0 0;
border: 3px solid #44b5ea;
box-sizing: border-box;
@@ -204,7 +204,7 @@ ion-item{
justify-content: center;
.msg-bottom-p {
width: 220px;
width: rem(220);
position: absolute;
bottom: 0 !important;
text-align: center;
@@ -213,7 +213,7 @@ ion-item{
@media only screen and (max-height: 746px) {
.msg-bottom-p {
padding-top: 20px;
padding-top: rem(20);
position: unset !important;
}
}