mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-20 13:26:08 +00:00
improve responsiveness
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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{
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user