Os ícones desenhados para toolbar devem manter o formato de largura 28 pixels e altura 27 pixels para garantir uma aparência uniforme e organizada na barra de ferramentas. Além disso, é importante salvá-los em formato PNG para manter a qualidade da imagem e sem perda de dados.
Os botões possuem dois estados, habilitado e desabilitado, que devem ser identificados visualmente por meio de paletas de cores diferentes. As cores adequadas para cada estado estarão disponíveis abaixo.
| Aviso |
|---|
Obs.: Não deverá ser utilizada cor, ou variação de cor, diferente das apresentadas a seguir. |
| Section |
|---|
| Column |
|---|
| | Estado |
|---|
| colour | Green |
|---|
| title | HABILITADO |
|---|
|
| HTML |
|---|
<html>
<head>
<style>
.box {
width: 70px;
height: 70px;
background-color: #F2F0CE;
display: inline-block;
margin-right: 10px;
}
.blue{
background-color: #164659;
}
.red{
background-color: #FF0000;
}
.label {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<div class="box blue"></div>
<div class="label"><b>Cor de Fundo<br>RGB:</b> 22 70 89<br><b>HEX:</b> #164659</div>
<br>
<br>
<div class="box"></div>
<div class="label"><b>Cor do Ícone<br>RGB:</b> 153 152 130<br><b>HEX:</b> #f2f0ce</div>
<div class="box"></div>
<div class="box red"></div>
</body>
</html> |
|
| Column |
|---|
| | Estado |
|---|
| colour | Red |
|---|
| title | DESABILITADO |
|---|
|
| HTML |
|---|
<html>
<head>
<style>
.box {
width: 70px;
height: 70px;
display: inline-block;
background-color: #000000;
margin-right: 10px;
}
.blue {
background-color: #164659;
}
.disable {
background-color: #999882;
}
.label {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<div class="box blue"></div>
<div class="label"><b>Cor de Fundo<br>RGB:</b> 22 70 89<br><b>HEX:</b> #164659</div>
<br>
<br>
<div class="box disable"></div>
<div class="label"><b>Cor do Ícone<br>RGB:</b> 153 152 130<br><b>HEX:</b> #999882</div>
</body>
</html>
|
|
|
