changes on style for MD

This commit is contained in:
Tiago Kayaya
2020-11-27 11:59:32 +01:00
parent b103c5b19b
commit c4e27d07b1
12 changed files with 250 additions and 56 deletions
+14 -1
View File
@@ -1,6 +1,19 @@
<ion-header>
<ion-toolbar>
<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-toolbar>
<ion-toolbar class="bg-blue">
<ion-buttons slot="end">
<!-- customized TOGGLE button -->
<div class="toggleBox">
+29 -2
View File
@@ -145,7 +145,7 @@ Calendar
*/
/* NEW CSS FOR TOGGLE BUTTON */
.toggleBox{
margin:20px 20px 0 0;
margin:20px 12px 7px 0;
}
input[type="checkbox"]{
position: relative;
@@ -214,7 +214,34 @@ label{
font-size: 25px;
margin: 0 5px 0 25px;
padding: 0;
color:#000;
color:#ffffff;
float: left;
}
.div-top-header{
width: 400px;
height: 50px;
margin: 6px auto;
background-color: #0782c9;
overflow: auto;
}
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: 150px;
margin: 2.5px 0 2.5px 71px;
float: left;
}
.div-logo img{
width: 100%;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
+26 -22
View File
@@ -1,25 +1,29 @@
<ion-header translucent="true">
<ion-toolbar>
<ion-item class="ion-text-header-top" lines="none">
<div class="div-logo">
<img src='assets/images/logo.png' alt='logo'>
</div>
<ion-label>
<h6 class="header-xsmall">Presidente da República</h6>
<h2 class="header-large">GABINETE DIGITAL</h2>
</ion-label>
</ion-item>
<ion-buttons slot="end">
<div class="toggleBox">
<div (click)="changeProfile()" class="toggle">
<input type="checkbox">
<label for="" class="onbtn">PR</label>
<label for="" class="ofbtn">MDGPR</label>
</div>
</div>
</ion-buttons>
<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-toolbar>
<ion-toolbar>
<ion-toolbar class="bg-blue">
<ion-buttons slot="end">
<div class="toggleBox">
<div (click)="changeProfile()" class="toggle">
<input type="checkbox">
<label for="" class="onbtn">PR</label>
<label for="" class="ofbtn">MDGPR</label>
</div>
</div>
</ion-buttons>
</ion-toolbar>
<ion-toolbar class="bg-blue">
<ion-label>
<ion-item class="ion-text-right" lines="none">
<ion-label class="ion-text-wrap">
@@ -33,7 +37,7 @@
</ion-label>
</ion-toolbar>
<!-- TABS -->
<ion-toolbar >
<ion-toolbar>
<ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
<ion-segment-button value="Combinada">
Combinada
@@ -48,7 +52,7 @@
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content >
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-label>
<p class="p-small">{{customDate}}</p>
+43 -4
View File
@@ -1,27 +1,64 @@
/* HEADER */
.bg-blue{
--background:#0782c9;
background:#0782c9;
--background-color:#0782c9;
background-color:#0782c9;
color: #ffffff;
--color: #ffffff;
}
ion-toolbar{
--background: white;
}
.ion-text-header-top{
width: 100%;
--background: transparent;
text-align: center;
padding-top: 15px;
color: #ffffff;
/* border: 1px solid red; */
}
.div-top-header{
width: 400px;
height: 50px;
margin: 6px auto;
background-color: #0782c9;
overflow: auto;
}
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{
width: 60px;
/* border: 1px solid red; */
margin-right: 20px;
background: transparent;
width: 150px;
margin: 2.5px 0 2.5px 71px;
float: left;
}
.div-logo img{
width: 100%;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
.ion-text-header-top p{
--background: transparent;
color: #ffffff;
}
.ion-text-right{
--background: transparent;
color: #ffffff;
}
.header-large{
font-family: Arial, Helvetica, sans-serif;
font-size: 12.5pt;
/* font-weight: 600; */
background: transparent;
color: #ffffff;
}
.header-xsmall{
font-family: Arial, Helvetica, sans-serif;
@@ -30,6 +67,7 @@ ion-toolbar{
padding-bottom: 3.5px;
margin-bottom: 3.5px;
border-bottom: 1px solid #ccc;
background: transparent;
}
.header-medium{
font-size: 12pt;
@@ -46,6 +84,7 @@ ion-toolbar{
color:#000;
margin-right: 25px !important;
text-align: right;
/* color: #ffffff; */
}
/* CONTENT */
@@ -1,5 +1,18 @@
<ion-header>
<ion-toolbar>
<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-toolbar>
<ion-toolbar class="bg-blue">
<ion-title class="header-title">Gabinete Digital</ion-title>
</ion-toolbar>
</ion-header>
@@ -92,6 +92,34 @@ ion-label{
font-size: 25px;
margin: 0 5px 0 25px;
padding: 0;
color:#000;
color:#ffffff;
float: left;
}
.div-top-header{
width: 400px;
height: 50px;
margin: 6px auto;
background-color: #0782c9;
overflow: auto;
}
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: 150px;
margin: 2.5px 0 2.5px 71px;
float: left;
}
.div-logo img{
width: 100%;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
+13 -15
View File
@@ -1,21 +1,19 @@
<ion-content>
<ion-content class="bg-blue">
<div class="wrapper">
<div class="div-logo">
<img src='assets/images/fullLogo.png' alt='logo'>
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<h2 class="center">Inicie a sessão</h2>
<form>
<ion-list>
<ion-item>
<ion-label position="floating">Nome de utilizador</ion-label>
<h3 class="center">Inicie a sessão</h3>
<form class="form">
<p class="form-label">Nome de utilizador</p>
<ion-item class="form-input">
<ion-input type="text" [(ngModel)]="username" name="input-username"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Palavra-passe</ion-label>
<ion-input type="password" [(ngModel)]="password" name="input-password" ></ion-input>
</ion-item>
<ion-button class="btn-ok" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</ion-button>
</ion-list>
</form>
</div>
<p class="form-label">Palavra-passe</p>
<ion-item class="form-input">
<ion-input type="password" [(ngModel)]="password" name="input-password" ></ion-input>
</ion-item>
<ion-button class="btn-ok-login" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</ion-button>
</form>
</div>
</ion-content>
+30 -10
View File
@@ -2,24 +2,44 @@
margin: 0 auto;
}
.div-logo{
width: 270px;
width: 200px;
margin: 0 auto;
padding-bottom: 15px;
}
.div-logo img{
width: 100%;
}
form{
/* border: 1px solid red; */
padding: 10px;
}
.wrapper ion-label{
font-size: 20px;
}
.wrapper ion-input{
font-size: 22px;
font-size: 18px;
}
.wrapper ion-button{
font-size: medium;
margin-top: 25px;
margin-top: 18px;
}
ion-item{
--background: transparent;
}
.form{
width: 300px;
overflow: auto;
margin: 0 auto;
}
.form-label{
margin: 15px 0 5px 0;
font-size: 15px;
}
.form-input{
--background: #fff;
/* --color:#fff; */
border-radius: 10px;
margin: 5px 0 5px 0;
}
.btn-ok-login{
width: 160px !important;
height: 45px !important;
margin: 15px auto;
padding: 10px 15px;
border-radius: 22.5px;
background-color: #42b9fe;
color: #ffffff !important;
}