consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactors a little of SCSS for header

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-11-27 18:18:46 +01:00
parent 8149a7c564
commit 11bdcc90cf
5 changed files with 47 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/header_logo_madrid.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

146
app/assets/stylesheets/layout.scss
View File

@@ -38,32 +38,24 @@
}
@mixin logo {
a {
color: white;
font-family: 'Lato' !important;
font-size: rem-calc(20);
font-weight: lighter;
line-height: $line-height*4;
padding-left: rem-calc(6);
span {
opacity: .5;
&.logo-site {
font-size: rem-calc(16);
font-weight: lighter;
opacity: 1;
vertical-align: top;
}
}
@media (min-width: $small-breakpoint) {
font-size: rem-calc(28);
span {
font-size: rem-calc(20);
font-size: rem-calc(24);
line-height: rem-calc(48);
}
img {
height: 48px;
width: 48px;
@media (min-width: $small-breakpoint) {
height: 80px;
margin-right: rem-calc(12);
margin-top: 0;
width: 80px;
}
}
}
@@ -392,27 +384,13 @@ header {
}
.selected {
border-bottom: 2px solid white;
padding-bottom: rem-calc(2);
position: relative;
&:before {
top: -14px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top-color: white;
border-width: 8px;
margin-left: -8px;
}
}
.locale {
float: none;
height: rem-calc(48);
padding-top: rem-calc(3);
text-align: center;
@media (min-width: $small-breakpoint) {
float: left;
@@ -427,7 +405,7 @@ header {
.external-links {
float: none;
padding: rem-calc(12) 0;
padding: rem-calc(6) 0;
text-align: center;
@media (min-width: $small-breakpoint) {
@@ -447,73 +425,33 @@ header {
}
.contain-to-grid {
background: #112E51;
background: $brand;
}
.top-bar {
background: #112E51 !important;
background: $brand !important;
color: white;
height: rem-calc(48);
min-height: rem-calc(48);
max-width: 1170px !important;
padding: 0 rem-calc(12);
@media (min-width: $small-breakpoint) {
height: rem-calc(96);
height: auto;
padding: 0;
}
.name {
height: rem-calc(48);
@media (min-width: $small-breakpoint) {
margin-left: rem-calc(12);
}
a {
color: white;
font-family: 'Lato';
font-size: rem-calc(16);
font-weight: lighter;
line-height: $line-height*2;
span {
*display: inline; /* IE */
opacity: .5;
&.logo-site {
*display: inline; /* IE */
font-size: rem-calc(14);
opacity: 1;
}
}
@include logo;
line-height: rem-calc(48);
@media (min-width: $small-breakpoint) {
font-size: rem-calc(24);
line-height: $line-height*4;
span, span.logo-site {
font-size: rem-calc(16);
}
}
@media (min-width: $medium-breakpoint) {
font-size: rem-calc(30);
line-height: $line-height*4;
span, span.logo-site {
font-size: rem-calc(20);
}
}
img {
height: 48px;
width: 48px;
@media (min-width: $small-breakpoint) {
margin-top: rem-calc(24);
}
@media (min-width: $medium-breakpoint) {
height: 96px;
margin-right: rem-calc(12);
margin-top: 0;
width: 96px;
}
line-height: rem-calc(80);
}
}
}
@@ -558,6 +496,7 @@ header {
ul {
margin-left: 0;
margin-right: rem-calc(12);
@media (min-width: $small-breakpoint) {
margin-left: rem-calc(24);
@@ -581,10 +520,11 @@ header {
@media (min-width: $small-breakpoint) {
&.button {
background: $brand;
background: white;
border-radius: rem-calc(3);
color: $brand;
line-height: rem-calc(15);
margin-top: rem-calc(24);
margin-top: rem-calc(16);
padding-left: rem-calc(15);
text-align: center;
}
@@ -600,12 +540,11 @@ header {
}
ul li, ul li:hover:not(.has-form) > a:not(.button) {
line-height: $line-height;
@media (min-width: $small-breakpoint) {
background: none;
border: 0;
line-height: $line-height*4;
line-height: rem-calc(80);
}
}
@@ -622,7 +561,7 @@ header {
padding: rem-calc(12) 0;
@media (min-width: $small-breakpoint) {
line-height: $line-height*4;
line-height: rem-calc(80);
padding: 0 rem-calc(12);
}
@@ -643,21 +582,22 @@ header {
}
.top-links {
background: #0B0C0C;
background: $dark;
color: white;
font-size: rem-calc(14);
.row {
padding: 0 rem-calc(12);
}
padding-right: rem-calc(12);
a {
color: white;
margin: 0 rem-calc(6);
&:hover {
text-decoration: underline;
}
}
.social {
padding-top: rem-calc(6);
}
}
.subnavigation-container {
@@ -850,13 +790,6 @@ footer {
h1 {
@include logo;
a {
span.logo-site {
vertical-align: middle;
}
}
}
}
@@ -911,6 +844,7 @@ form.locale-form {
background-color: transparent;
border: 0;
color: white;
margin-bottom: 0;
outline: none;
padding-left: rem-calc(3);
padding-right: rem-calc(24);

3
app/assets/stylesheets/variables.scss
View File

@@ -19,8 +19,9 @@ $line-height: rem-calc(24);
$body: #E9E9E9;
$background: #EDEFF0;
$dark: #0B0C0C;
$border: #DEE0E3;
$brand: #0077B9;
$brand: #004A83;
$text: #222222;
$text-medium: #999999;

2
app/views/layouts/_header.html.erb
View File

@@ -35,7 +35,7 @@
<li class="toggle-topbar menu-icon"><a href="#"><span><%= t("application.menu")%></span></a></li>
<li class="name">
<%= link_to root_path do %>
<%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '96x96', alt: t("layouts.header.logo")) %>
<%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '80x80', alt: t("layouts.header.logo")) %>
<% if transparency_page? %>
<%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}") %> <span>|</span>

2
config/locales/es.yml
View File

@@ -14,7 +14,7 @@ es:
external_link_blog_url: "/blog"
open_gov: "Gobierno %{open}"
open: "abierto"
participation_html: "Madrid <strong>Decide</strong>"
participation_html: "Madrid Decide"
transparency: "Transparencia"
open_data: "Datos abiertos"
open_city_title: "La ciudad que quieres será la ciudad que quieras."