Refactor legislation process navigation

This commit is contained in:
Martín González
2016-12-21 17:54:57 +01:00
parent 3c3a779f9f
commit 2c3539cf33
9 changed files with 104 additions and 207 deletions

View File

@@ -7,10 +7,6 @@
// 01. Hero
// -----------------
.legislation-hero {
margin-bottom: 4rem;
}
.brand-heading {
background: $brand;

View File

@@ -2,7 +2,7 @@
//
// 01. Utils
// 02. Hero
// 03. Legislation process
// 03. Legislation process navigation
// 04. Debate list
// 05. Debate quiz
// 06. Legislation draft
@@ -38,11 +38,9 @@
// -----------------
.legislation-hero {
padding-top: 1.5rem;
margin-bottom: 2rem;
@include breakpoint(medium) {
padding-top: 3.5rem;
margin-bottom: 4rem;
}
h4 {
@@ -117,48 +115,69 @@
}
}
// 03. Legislation process
// 03. Legislation process navigation
// -----------------
.legislation-process-categories {
list-style: none;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid $medium-gray;
position: relative;
li {
cursor: pointer;
margin-left: 0;
display: inline-block;
margin-bottom: 1rem;
svg {
position: absolute;
top: 0.75rem;
left: 0;
@include breakpoint(medium) {
margin-left: 3rem;
margin-bottom: 0;
}
a,
h4 {
color: #6D6D6D;
margin-bottom: 0;
}
a {
&:hover, &:active {
text-decoration: none;
}
p {
margin-bottom: 0;
@include breakpoint(medium) {
margin-bottom: 1rem;
}
}
transform: rotate(-8deg);
}
}
.active {
border-bottom: 2px solid $brand;
ul {
padding-top: 3rem;
list-style: none;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid $medium-gray;
@include breakpoint(medium) {
padding-top: 4rem;
}
li {
cursor: pointer;
margin-left: 0;
display: inline-block;
margin-bottom: 1rem;
margin-right: 1rem;
@media (min-width: 950px) {
margin-right: 0;
margin-left: 3rem;
margin-bottom: 0;
}
a,
h4 {
color: #6D6D6D;
margin-bottom: 0;
}
a {
&:hover, &:active {
text-decoration: none;
}
p {
margin-bottom: 0;
@include breakpoint(medium) {
margin-bottom: 1rem;
}
}
}
}
.active {
border-bottom: 2px solid $brand;
}
}
}
@@ -356,7 +375,6 @@
// -----------------
.legislation-allegation {
padding-top: 1rem;
margin-bottom: 2rem;
.headline {
margin-bottom: 0;

File diff suppressed because one or more lines are too long

View File

@@ -21,32 +21,7 @@
</div>
<div class="column row">
<ul class="legislation-process-categories">
<li>
<a href="legislation_debate.html">
<h4>Fase debate previo</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="legislation_draft.html">
<h4>Publicación borrador</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li class="active">
<a href="#">
<h4>Fase alegaciones</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="#">
<h4>Publicación resultados</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
</ul>
<%= render 'sandbox/legislation_process_nav' %>
<div class="draft-panels small-12 column row">
<div class="row draft-chooser">
@@ -63,7 +38,7 @@
<span>actualizada el 13 nov 2017</span>
</div>
<div class="small-12 medium-3 column">
<a class="button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="legislation_draft_comments.html">Ver todos los comentarios</a>
<a class="button strong" title="Ver todos los comentarios" href="legislation_draft_comments.html">Ver todos los comentarios</a>
</div>
</div>

View File

@@ -7,7 +7,7 @@
</h2>
</div>
<div class="small-12 medium-4 column right">
<a class="button-subscribe expanded button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="/proposals/6-soluta-sed-sapiente-dolores/vote?value=yes">
<a class="button-subscribe expanded button strong" title="Suscríbete al proceso" href="#">
<h3>Suscríbete al proceso</h3>
<p>Recibe notificaciones clave sobre el proceso</p>
</a>
@@ -37,39 +37,14 @@
</div>
<div class="center half-gradient">
<a class="button big center strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="/proposals/6-soluta-sed-sapiente-dolores/vote?value=yes">
<a class="button big center strong" title="Más información y contexto" href="#">
Más información y contexto
</a>
</div>
</div>
<div class="row">
<ul class="legislation-process-categories">
<li class="active">
<a href="#">
<h4>Fase debate previo</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="legislation_draft.html">
<h4>Publicación borrador</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="legislation_allegations.html">
<h4>Fase alegaciones</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="#">
<h4>Publicación resultados</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
</ul>
<div class="column row">
<%= render 'sandbox/legislation_process_nav' %>
<div class="debate-chooser">
<div class="row">

View File

@@ -43,33 +43,8 @@
</div>
</div>
<div class="row">
<ul class="legislation-process-categories">
<li>
<a href="legislation_debate.html">
<h4>Fase debate previo</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li class="active">
<a href="#">
<h4>Publicación borrador</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="legislation_allegations.html">
<h4>Fase alegaciones</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="#">
<h4>Publicación resultados</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
</ul>
<div class="column row">
<%= render 'sandbox/legislation_process_nav' %>
<div class="debate-chooser">
<div class="row">
@@ -81,7 +56,7 @@
</div>
<div class="small-12 medium-5 column">
<button class="button-subscribe expanded button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="/proposals/6-soluta-sed-sapiente-dolores/vote?value=yes">
<button class="button-subscribe expanded button strong" title="Suscríbete al proceso" href="/proposals/6-soluta-sed-sapiente-dolores/vote?value=yes">
<h3>Suscríbete al proceso</h3>
<p>Recibe notificaciones clave sobre el proceso</p>
</button>

View File

@@ -21,32 +21,7 @@
</div>
<div class="column row">
<ul class="legislation-process-categories">
<li>
<a href="legislation_debate.html">
<h4>Fase debate previo</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="legislation_draft.html">
<h4>Publicación borrador</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li class="active">
<a href="#">
<h4>Fase alegaciones</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="#">
<h4>Publicación resultados</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
</ul>
<%= render 'sandbox/legislation_process_nav' %>
<div class="draft-panels small-12 column row">
<div class="row draft-chooser">
@@ -62,7 +37,7 @@
<span>actualizada el 13 nov 2017</span>
</div>
<div class="small-12 medium-3 column">
<a class="button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="legislation_allegations.html">Ver borrador del texto</a>
<a class="button strong" title="Suscríbete al proceso" href="legislation_allegations.html">Ver borrador del texto</a>
</div>
</div>

View File

@@ -21,32 +21,7 @@
</div>
<div class="column row">
<ul class="legislation-process-categories">
<li>
<a href="legislation_debate.html">
<h4>Fase debate previo</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="legislation_draft.html">
<h4>Publicación borrador</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li class="active">
<a href="#">
<h4>Fase alegaciones</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="#">
<h4>Publicación resultados</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
</ul>
<%= render 'sandbox/legislation_process_nav' %>
<div class="draft-panels small-12 column row">
<div class="row draft-chooser">
@@ -62,7 +37,7 @@
<span>actualizada el 13 nov 2017</span>
</div>
<div class="small-12 medium-3 column">
<a class="button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="legislation_allegations.html">Ver borrador del texto</a>
<a class="button strong" title="Suscríbete al proceso" href="legislation_allegations.html">Ver borrador del texto</a>
</div>
</div>

View File

@@ -21,32 +21,7 @@
</div>
<div class="column row">
<ul class="legislation-process-categories">
<li>
<a href="legislation_debate.html">
<h4>Fase debate previo</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="legislation_draft.html">
<h4>Publicación borrador</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li class="active">
<a href="#">
<h4>Fase alegaciones</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
<li>
<a href="#">
<h4>Publicación resultados</h4>
<p>15 nov 2015 - 15 dic 2016</p>
</a>
</li>
</ul>
<%= render 'sandbox/legislation_process_nav' %>
<div class="draft-panels small-12 column row">
<div class="row draft-chooser">
@@ -62,7 +37,7 @@
<span>actualizada el 13 nov 2017</span>
</div>
<div class="small-12 medium-3 column">
<a class="button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="legislation_allegations.html">Ver borrador del texto</a>
<a class="button strong" title="Suscríbete al proceso" href="legislation_allegations.html">Ver borrador del texto</a>
</div>
</div>