peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add responsive effect in shared header MD

Browse Source
This commit is contained in:
Peter Maquiran
2020-12-29 10:17:34 +01:00
parent 5d7f0d08be
commit ea89cb205a
2 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/header/header.page.html
+24 -12
View File
@@ -1,14 +1,26 @@
<ion-toolbar class="bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
<ion-grid>
<ion-row class="div-top-header ion-justify-content-between">
<ion-col>
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
</ion-col>
<ion-col>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
</ion-col>
<ion-col>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
src/app/shared/header/header.page.scss
+30 -27
View File
@@ -1,28 +1,31 @@
.div-top-header{
width: 400px;
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
padding-top: 15px;
border: 0!important;
@import '~src/function.scss';
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: 140px;
margin: 5px 0 0px 71px;
float: left;
}
.div-logo img{
width: 100%;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
}
.div-top-header{
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
padding-top: 15px;
border: 0!important;
.div-search{
font-size: 45px;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: em(140px);
margin: 0px auto;
margin-top: 5px;
justify-content: center;
display: flex;
}
.div-logo img{
width: 100%;
margin: 0px auto;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
}