SPDT
/
sapl
mirror of https://github.com/interlegis/sapl.git
5
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Update menu styles along with global colors

pull/6/head
Caio Viotti 9 years ago
parent
2541f74d5a
commit
1f481fa33c
3 changed files with 211 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      static/styles/_settings.scss
  2. 131
      static/styles/app.scss
  3. 87
      templates/base.html

44
static/styles/_settings.scss
View File

@ -86,7 +86,7 @@ $include-html-global-classes: $include-html-classes;
// - - - - - - - - - - - - - - - - - - - - - - - - -
// We use these to define default font stacks
// $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
$font-family-sans-serif: "Open Sans" "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
@ -115,8 +115,8 @@ $include-html-global-classes: $include-html-classes;
// $black : #000000;
// We use these as default colors throughout
// $primary-color: #008CBA;
// $secondary-color: #e7e7e7;
$primary-color: #27AE60;
$secondary-color: #34495E;
// $alert-color: #f04124;
// $success-color: #43AC6A;
// $warning-color: #f08a24;
@ -139,7 +139,7 @@ $include-html-global-classes: $include-html-classes;
// $last-child-float: $opposite-direction;
// We use these to make sure border radius matches unless we want it different.
// $global-radius: 3px;
$global-radius: 4px;
// $global-rounded: 1000px;
// We use these to control inset shadow shiny edges and depressions.
@ -709,18 +709,18 @@ $include-html-global-classes: $include-html-classes;
// - - - - - - - - - - - - - - - - - - - - - - - - -
// We use these to style the icon-bar and items
// $icon-bar-bg: $oil;
$icon-bar-bg: $secondary-color;
// $icon-bar-font-color: $white;
// $icon-bar-font-color-hover: $icon-bar-font-color;
// $icon-bar-font-size: 1rem;
// $icon-bar-hover-color: $primary-color;
// $icon-bar-font-size: 0;
$icon-bar-hover-color: darken($secondary-color, 5%);
// $icon-bar-icon-color: $white;
// $icon-bar-icon-color-hover: $icon-bar-icon-color;
// $icon-bar-icon-size: 1.875rem;
// $icon-bar-image-width: 1.875rem;
// $icon-bar-image-height: 1.875rem;
// $icon-bar-icon-size: 1rem;
$icon-bar-image-width: 1rem;
$icon-bar-image-height: 1rem;
// $icon-bar-active-color: $primary-color;
// $icon-bar-item-padding: 1.25rem;
$icon-bar-item-padding: 0.75rem;
// We use this to set default opacity and cursor for disabled icons.
// $icon-bar-disabled-opacity: .7;
@ -1399,11 +1399,11 @@ $include-html-global-classes: $include-html-classes;
// $include-html-top-bar-classes: $include-html-classes;
// Background color for the top bar
// $topbar-bg-color: $oil;
// $topbar-bg: $topbar-bg-color;
$topbar-bg-color: $secondary-color;
$topbar-bg: $topbar-bg-color;
// Height and margin
// $topbar-height: rem-calc(45);
$topbar-height: rem-calc(40);
// $topbar-margin-bottom: 0;
// Controlling the styles for the title in the top bar
@ -1415,11 +1415,11 @@ $include-html-global-classes: $include-html-classes;
// $topbar-link-color-hover: $white;
// $topbar-link-color-active: $white;
// $topbar-link-color-active-hover: $white;
// $topbar-link-weight: $font-weight-normal;
// $topbar-link-font-size: rem-calc(13);
$topbar-link-weight: bold;
$topbar-link-font-size: rem-calc(12px);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
// $topbar-link-bg-hover: $jet;
$topbar-link-bg-hover: darken($topbar-bg, 5%);
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
@ -1432,12 +1432,12 @@ $include-html-global-classes: $include-html-classes;
// $topbar-button-top: 7px;
// Style the top bar dropdown elements
// $topbar-dropdown-bg: $oil;
$topbar-dropdown-bg: $primary-color;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
// $topbar-dropdown-link-bg: $oil;
// $topbar-dropdown-link-bg-hover: $jet;
// $topbar-dropdown-link-weight: $font-weight-normal;
$topbar-dropdown-link-bg: $topbar-dropdown-bg;
$topbar-dropdown-link-bg-hover: darken($topbar-dropdown-bg, 5%);
$topbar-dropdown-link-weight: bold;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: .4;
@ -1473,7 +1473,7 @@ $include-html-global-classes: $include-html-classes;
// Sticky Class
// $topbar-sticky-class: ".sticky";
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
$topbar-arrows: false; //Set false to remove the triangle icon from the menu item
// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
// 36. Visibility Classes

131
static/styles/app.scss
View File

@ -4,8 +4,104 @@
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
$main-color: #27AE60;
$sub-color: #34495E;
$top-bar-dropdown-radius: $global-radius;
// Foundation Restyling
// - - - - - - - - - - - - - - - - - - - - - - - - -
// Moving the mobile menu icon to the right
.title-area.left {
.toggle-topbar {
right: initial;
}
// Making sure dropdowns on mobile are not rendered on top of the top bar.
@media #{$small-only} {
~ .top-bar-section {
.has-dropdown.moved > .dropdown,
.dropdown {
top: $topbar-height;
}
}
}
}
// Restyles to foundation top bar menu, in order to behave aesthetically different
/*
XXX
Is there a better way to implement these styles using best practices without the
need to override this much of foundation? Or at least avoid too much nesting and
specificity (better use of BEM and ITCSS)?
*/
.nav {
@media #{$topbar-media-query} {
.has-dropdown {
.dropdown {
// Border-radius for the dropdowns
@include radius(rem-calc($top-bar-dropdown-radius));
> li:nth-child(2), > li:nth-child(2) > a {
@include side-radius(top, rem-calc($top-bar-dropdown-radius));
}
> li:last-child, li:last-child > a {
@include side-radius(bottom, rem-calc($top-bar-dropdown-radius));
}
// Default values while dropdown is hidden
// For transition effect
opacity: 0;
// This allows the triangle pip to stay above the dropdown
overflow: visible;
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.19),
0 2px 6px rgba(0, 0, 0, 0.23);
pointer-events: none; // Making sure when its animating back do default states, it wont
transform: translateY(rem-calc(25px));
transition: transform 0.1s linear,
opacity 0.1s linear,
clip 0s 0.3s;
&::before {
@include css-triangle(rem-calc(6px), $topbar-dropdown-bg, bottom);
position: absolute;
top: rem-calc(-12px);
left: rem-calc(15px);
}
&::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: rem-calc(-25px);
height: rem-calc(25px);
width: 100%;
transition: all 0.3s cubic-bezier(0.55,0,0.1,1);
}
}
&.hover, &.not-click:hover {
> .dropdown {
opacity: 1;
clip: rect(-100px, 2000px, 2000px, -100px);
transform: translateY(rem-calc(10px));
pointer-events: auto;
transition: transform 0.3s cubic-bezier(0.55,0,0.1,1),
opacity 0.3s cubic-bezier(0.55,0,0.1,1), clip 0s 0s;
&::after {
top: rem-calc(-10px);
}
}
}
}
}
}
// Our app
// - - - - - - - - - - - - - - - - - - - - - - - - -
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
@ -17,7 +113,6 @@ $sub-color: #34495E;
}
html, body {
font: 100% "Open Sans", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
@ -34,23 +129,23 @@ border: none;
a {
background-color: transparent;
color: $main-color;
color: $primary-color;
text-decoration: none;
transition: 0.2s;
}
h1 {
color: $main-color;
color: $primary-color;
font-size: 120%;
}
h2 {
color: $main-color;
color: $primary-color;
font-size: 110%;
}
h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover {
color: $main-color;
color: $primary-color;
}
.fadein {
@ -86,17 +181,6 @@ color: #444444;
}
.navigation {
position: fixed;
z-index: 100;
top: 0;
font-weight: 700;
font-size: 85%;
padding: 0;
width: 100%;
height: 40px;
line-height: 40px;
background-color: $sub-color;
color: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
}
@ -105,13 +189,14 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23);
max-width: 960px;
}
.masthead {
}
.icon-bar {
vertical-align: top;
}
.masthead > .container {
padding-top: 60px;
border-bottom: 20px solid $main-color;
padding-top: 20px;
border-bottom: 20px solid $primary-color;
background-color: #ffffff;
}
@ -170,7 +255,7 @@ font-size: 100%;
.footer {
width: 100%;
background-color: $sub-color;
background-color: $secondary-color;
color: #ffffff;
text-align: center;
}

87
templates/base.html
View File

@ -17,7 +17,6 @@
<link rel="stylesheet" href="{% static 'foundation-datepicker/css/foundation-datepicker.min.css' %}">
<link rel="stylesheet" href="{% static 'components-font-awesome/css/font-awesome.css' %}">
<link rel="stylesheet" href="{% static 'foundation-icon-fonts/foundation-icons.css' %}">
{# Root directory to look for SASS files is set in settings.py with SASS_PROCESSOR_ROOT #}
<link rel="stylesheet" href="{% sass_src 'styles/app.scss' %}" type="text/css">
{# Scripts #}
@ -33,11 +32,86 @@
{# Navigation #}
{% block navigation %}
<nav id="navigation" class="navigation">
<div class="container">
<span>Navigation Placeholder!</span>
</div>
</nav>
<div id="navigation" class="navigation fixed contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area left">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<div class="nav right">
<div class="icon-bar three-up">
<a class="item" tabindex="0" role="button" aria-label="{% trans 'Pesquisa' %}">
<img src="{% static 'img/search.png' %}">
</a>
<a class="item" tabindex="0" role="button" aria-label="{% trans 'Manual' %}">
<img src="{% static 'img/manual.png' %}">
</a>
<a class="item" tabindex="0" role="button" aria-label="{% trans 'Usuário' %}">
<img src="{% static 'img/user.png' %}">
</a>
</div>
</div>
<section class="top-bar-section">
<ul class="nav left">
<li class="nav__item has-dropdown"><a class="nav__link">Institucional</a>
<ul class="nav__sub-nav dropdown">
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Mesa Diretora</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Comissões</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Comissões</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Bancadas</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Parlamentares</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Bancadas</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Parlamentares</a></li>
</ul>
</li>
<li class="nav__item has-dropdown"><a class="nav__link">Protocolo</a>
<ul class="nav__sub-nav dropdown">
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Pesquisar</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Protocolo Legislativo</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Protocolo SPDO</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Receber Proposições</a></li>
</ul>
</li>
<li class="nav__item has-dropdown"><a class="nav__link">Atividade Legislativa</a>
<ul class="nav__sub-nav dropdown">
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Proposições</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Matérias Legislativas</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Matérias Legislativas</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Sessões Plenárias</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Pautas das Sessões</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Atas das Sessões</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Reuniões das Comissões</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Tramitação em Lote</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Impressos</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Relatórios</a></li>
</ul>
</li>
<li class="nav__item has-dropdown"><a class="nav__link">Normas Jurídicas</a>
<ul class="nav__sub-nav dropdown">
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Pesquisar</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Pesquisar</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Índice de Assuntos</a></li>
</ul>
</li>
<li class="nav__item has-dropdown"><a class="nav__link">Sistema</a>
<ul class="nav__sub-nav dropdown">
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Tabelas Auxiliares</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Provedor LexML</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Publicador LexML</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Gerenciar Usuários</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Backup e Restauração</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Migração de Dados</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Sobre</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">ZopeEdit Windows</a></li>
<li class="nav__sub-item"><a class="nav__sub-link" href="#">Troca de Senha</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
{% endblock navigation %}
{# Header #}
@ -48,6 +122,7 @@
<img src="{% static 'img/logo.png' %}" alt="Logo">
</a>
<div class="masthead__heading">
{# XXX Make better use of translation tags in html blocks ie. actually use the proper blocktrans tag efficiently #}
<h1>{{ parliament_type }} {% trans 'de' %} {{ city }} - {{ state }}</h1>
<h2>{% trans 'Sistema de Apoio ao Processo Legislativo' %}</h2>
</div>

Write Preview
Loading…
Cancel
Save