diff --git a/static/styles/_settings.scss b/static/styles/_settings.scss index 1e0978a4d..3347c6297 100644 --- a/static/styles/_settings.scss +++ b/static/styles/_settings.scss @@ -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 diff --git a/static/styles/app.scss b/static/styles/app.scss index f532721b0..2d4f9f978 100644 --- a/static/styles/app.scss +++ b/static/styles/app.scss @@ -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; } diff --git a/templates/base.html b/templates/base.html index 0f202f35b..6f6eb5acd 100644 --- a/templates/base.html +++ b/templates/base.html @@ -17,7 +17,6 @@ - {# Root directory to look for SASS files is set in settings.py with SASS_PROCESSOR_ROOT #} {# Scripts #} @@ -33,11 +32,86 @@ {# Navigation #} {% block navigation %} - + {% endblock navigation %} {# Header #} @@ -48,6 +122,7 @@ Logo
+ {# XXX Make better use of translation tags in html blocks ie. actually use the proper blocktrans tag efficiently #}

{{ parliament_type }} {% trans 'de' %} {{ city }} - {{ state }}

{% trans 'Sistema de Apoio ao Processo Legislativo' %}