mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
changes on style for MD
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user