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
@@ -1,14 +1,16 @@
@import '~src/function.scss';
.main-header{
display: flex;
align-items: center;
}
.icon{
color: #797979;
width: 45px;
height: 45px;
width: rem(45);
height: rem(45);
display: flex;
justify-content: center;
font-size: 25px;
font-size: rem(25);
align-items: center;
}
@@ -17,7 +19,7 @@
.input-text {
margin-top: 20px;
width: 100%;
height: 45px;
height: rem(45);
border-radius: 5px;
border: 1px solid #ebebeb;
}
@@ -33,7 +35,7 @@
border-bottom: 1px solid #ebebeb;
list-style: none;
font-family: Roboto;
font-size: 15px;
font-size: rem(15);
}
}
}
+8 -4
View File
@@ -1,7 +1,7 @@
<!-- HEADER-->
<ion-header class="ion-no-border header-main d-md-flex">
<div *ngIf="select" class="btn-close d-none d-lg-flex cursor-pointer font-35" (click)="close()">
<div *ngIf="select" class="btn-close d-none d-lg-flex cursor-pointer font-35-rem" (click)="close()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' "class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
</div>
@@ -26,9 +26,13 @@
</div>
<div class="btn-modal-dismiss" *ngIf="showSearchInput">
<button class="btn-no-color" (click)="close()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' "class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
<button (click)="close()" style="
margin: 0px;
padding: 0px;
background: transparent;
">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' "class="icon font-40-rem" src="assets/images/icons-search-close.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon font-40-rem" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
</button>
</div>
</div>
+28 -29
View File
@@ -1,3 +1,5 @@
@import '~src/function.scss';
.top-box{
display: flex;
align-content: center;
@@ -15,7 +17,7 @@
.btn-modal-dismiss{
display: flex;
width: 50px !important;
height: fit-content;
height: fit-content;
padding: 0 !important;
margin: 0 !important;
margin-left: 25px !important;
@@ -23,9 +25,6 @@
align-content: center;
align-items: center;
ion-icon{
font-size: 32pt !important;
}
}
.ion-align-content-center{
align-content: center;
@@ -36,11 +35,11 @@
border: solid 1px #ebebeb;
.icon{
color: #797979;
width: 45px;
height: 45px;
width: rem(45);
height: rem(45);
display: flex;
justify-content: center;
font-size: 25px;
font-size: rem(25);
align-items: center;
}
.input-text{
@@ -54,11 +53,11 @@
display: flex;
justify-content: center;
align-items: center;
font-size: 45px;
font-size: rem(45);
}
.profile{
display: none;
font-size: 45px;
font-size: rem(45);
}
}
@@ -70,16 +69,16 @@ ion-slide{
// search result type
.options{
max-width: 900px;
margin-top: 10px;
margin-top: rem(10);
.container{
.d-flex{
width: 100%;
.button{
min-width: 116px;
border: solid 1px #e9e9e9;
margin: 0px 5px;
margin-bottom: 10px;
padding: 5px 20px;
margin: 0px rem(5);
margin-bottom: rem(10);
padding: rem(5) rem(20);
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
@@ -90,13 +89,13 @@ ion-slide{
margin: 0px;
font-family: Roboto;
color: var(--title-text-color);;
font-size: 15px;
font-size: rem(15);
text-align: center;
}
.label{
width: 100%;
font-family: Roboto;
font-size: 13px;
font-size: rem(13);
font-weight: 300;
color: #797979;
text-align: center;
@@ -117,12 +116,12 @@ ion-slide{
}
.icon{
display: none;
width: 45px;
height: 45px;
width: rem(45);
height: rem(45);
justify-content: center;
align-items: center;
ion-icon{
width: 25px;
width: rem(25);
}
}
}
@@ -148,19 +147,19 @@ ion-slide{
width: 100%;
.order{
font-family: Roboto;
font-size: 13px;
font-size: rem(13);
font-weight: 300;
color:#797979
}
.order-labal{
font-family: Roboto;
font-size: 15px;
font-size: rem(15);
color: var(--title-text-color);
margin-left: 20px;
}
}
ion-icon{
font-size: 25px;
font-size: rem(25);
}
}
ul{
@@ -173,7 +172,7 @@ ion-slide{
display: flex;
align-items: center;
.icon{
font-size: 35px;
font-size: rem(35);
align-items: center;
display: flex;
}
@@ -184,13 +183,13 @@ ion-slide{
margin: 0px;
width: 100%;
font-family: Roboto;
font-size: 15px;
font-size: rem(15);
color: var(--title-text-color);
line-height: 1.67;
}
span{
font-family: Roboto;
font-size: 13px;
font-size: rem(13);
font-weight: 300;
color: #797979;
}
@@ -202,7 +201,7 @@ ion-slide{
align-items: center;
padding: 0px 5px;
color: white;
font-size: 9pt;
font-size: rem(12);
font-weight: 500;
height: 19px;
-webkit-border-radius: 18px;
@@ -228,7 +227,7 @@ ion-slide{
width: 100%;
height: 24px;
font-family: Roboto;
font-size: 20px;
font-size: rem(20);
text-align: center;
color: black;
}
@@ -254,11 +253,11 @@ ion-slide{
.icon{
color: #797979;
width: 45px;
height: 45px;
width: rem(45);
height: rem(45);
display: flex;
justify-content: center;
font-size: 25px;
font-size: rem(25);
align-items: center;
}
.input-container{
+7 -5
View File
@@ -1,3 +1,5 @@
@import '~src/function.scss';
.main-header{
display: flex;
align-items: center;
@@ -5,11 +7,11 @@
.icon{
color: #797979;
width: 45px;
height: 45px;
width: rem(45);
height: rem(45);
display: flex;
justify-content: center;
font-size: 25px;
font-size: rem(25);
align-items: center;
}
@@ -18,7 +20,7 @@
.input-text {
margin-top: 20px;
width: 100%;
height: 45px;
height: rem(45);
border-radius: 5px;
border: 1px solid #ebebeb;
}
@@ -34,7 +36,7 @@
border-bottom: 1px solid #ebebeb;
list-style: none;
font-family: Roboto;
font-size: 15px;
font-size: rem(15);
}
}
}