Legislation process markup and styles

This commit is contained in:
Martín González
2016-12-01 13:37:40 +01:00
committed by Amaia Castro
parent 54f8549c43
commit bbacd4546b
7 changed files with 658 additions and 1 deletions

View File

@@ -6,6 +6,8 @@
@import "admin";
@import "layout";
@import "participation";
@import "legislation";
@import "legislation_process";
@import "custom";
@import "c3";
@import "annotator.min";

View File

@@ -0,0 +1,131 @@
// Table of Contents
//
// 01. Hero
// 02. Sidebar menu
// 03. Legislation cards
//
// 01. Hero
// -----------------
.legislation-hero {
margin-bottom: 4rem;
}
.brand-heading {
background: $brand;
.column {
padding-top: 10rem;
padding-bottom: 10rem;
h4 {
font-weight: 400;
text-align: center;
color: white;
}
}
}
// 02. Sidebar menu
// -----------------
.legislation-categories {
ul {
list-style: none;
padding-left: 0;
margin-left: 0;
li {
cursor: pointer;
@include breakpoint(medium) {
max-width: 80%;
}
h4 {
font-weight: 400;
color: $text-medium;
margin-bottom: 3rem;
transition: color 0.25s ease-out, color 0.25s ease-out;
}
&:hover h4, &:active h4 {
color: $brand;
}
}
.active h4 {
font-weight: 700;
color: $brand;
padding-bottom: 0.5rem;
border-bottom: 2px solid $brand;
}
}
}
// 03. Legislation cards
// -----------------
.legislation {
margin: 0 0 4rem 0;
}
.legislation {
background: white;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 0;
box-shadow: 0px 1px 3px 0 #DEE0E3;
min-height: 12rem;
padding: 2rem 0 0 0;
}
.button-legislation {
background: white;
border: 1px solid #2C9BE5;
color: #2C9BE5;
display: inline-block;
font-weight: 700;
margin-top: rem-calc(12);
.icon-comments {
margin-right: 0.5rem;
color: $text-medium;
transition: color 0.25s ease-out, color 0.25s ease-out;
}
&:hover, &:active {
border: 1px solid lighten(#2C9BE5, 25%);
cursor: pointer;
}
&:hover .icon-comments, &:active .icon-comments {
color: white;
}
}
.legislation-text {
margin-bottom: 1rem;
h3 a {
color: $black;
}
}
.legislation-calendar-info p {
font-size: $small-font-size;
color: $text-medium;
margin-bottom: 0;
}
.legislation-calendar {
background: #E5ECF2;
padding-top: 1rem;
h5 {
margin-bottom: 0;
color: #61686E;
}
p {
font-size: $small-font-size;
}
}

View File

@@ -0,0 +1,205 @@
// Table of Contents
//
// 01. Utils
// 02. Hero
// 03. Legislation process
// 04. Debate list
// 05. Legislation draft
//
// 01. Utils
// -----------------
.grey {
color: #878787;
}
.grey-heading {
background: #E6E6E6;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.strong {
font-weight: 700;
}
// 02. Hero
// -----------------
.legislation-hero {
padding-top: 1.5rem;
@include breakpoint(medium) {
padding-top: 3.5rem;
}
h4 {
color: #878787;
text-transform: uppercase;
font-weight: 400;
}
ul {
list-style: none;
margin-left: 0;
li:before {
vertical-align: text-bottom;
padding-right: 0.5rem;
content: "";
color: #8AA8BE;
}
}
.half-gradient {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e6e6e6+0,e6e6e6+50,ffffff+50 */
background: #e6e6e6; /* Old browsers */
background: -moz-linear-gradient(top, #e6e6e6 0%, #e6e6e6 50%, #ffffff 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e6e6e6 0%,#e6e6e6 50%,#ffffff 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e6e6e6 0%,#e6e6e6 50%,#ffffff 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.center .button {
background: #004A83;
margin-bottom: 0;
}
.headline {
margin-bottom: 1rem;
}
.description {
margin-bottom: 1rem;
}
.button-subscribe {
margin-top: 1.5rem;
h3 {
margin-bottom: 0;
}
p {
margin-bottom: 0;
font-size: $small-font-size;
}
&:hover h3 {
color: white;
}
@include breakpoint(medium) {
padding: 0.5em 1em;
margin-top: 3rem;
}
}
@include breakpoint(medium) {
.headline {
margin-bottom: 4rem;
}
.description {
margin-bottom: 0;
}
}
}
// 03. Legislation process
// -----------------
.legislation-process-categories {
list-style: none;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid $medium-gray;
li {
cursor: pointer;
margin-left: 3rem;
display: inline-block;
a,
h4 {
color: #6D6D6D;
margin-bottom: 0;
}
a:hover {
text-decoration: none;
}
}
.active {
border-bottom: 2px solid $brand;
}
.active h4 {
// padding-bottom: 0.4rem;
}
}
// 04. Debate list
// -----------------
.debate-chooser {
padding: 2rem 3rem;
.debate-block {
margin-bottom: 2.5rem;
.debate-type {
text-transform: uppercase;
color: #178DCC;
font-weight: 700;
font-size: $small-font-size;
.icon-debates {
margin-left: 0.2rem;
}
}
.debate-title a {
color: $brand;
}
.debate-meta,
.debate-meta a {
font-size: $small-font-size;
color: #6D6D6D;
.icon-comments {
margin-right: 0.2rem;
}
}
}
.debate-info {
padding: 1rem;
background: #F4F4F4;
}
}
// 05. Legislation draft
// -----------------
.debate-draft {
padding: 10rem 2rem 15rem 2rem;
display: block;
background: #F2F2F2;
button {
height: 90px;
h3 {
margin-bottom: 0;
}
p {
margin-bottom: 0;
font-size: $small-font-size;
}
}
}

View File

@@ -492,7 +492,7 @@
}
}
.debate, .proposal, .investment-project {
.debate, .proposal, .investment-project, .legislation {
margin: $line-height/4 0;
.panel {

View File

@@ -0,0 +1,159 @@
<div class="legislation-hero no-margin-top grey-heading">
<div class="row headline">
<div class="small-12 medium-7 column">
<p class="grey">Colabora en la elaboración de la normativa sobre</p>
<h2>
Licencias urbanísticas, declaraciones responsables y comunicaciones previas
</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">
<h3>Suscríbete al proceso</h3>
<p>Recibe notificaciones clave sobre el proceso</p>
</a>
</div>
</div>
<div class="row description">
<div class="small-12 medium-4 column">
<h4>En qué consiste</h4>
<p>Se va a modificar la regulación del procedimiento para la autorización de obras y la apertura de locales comerciales o empresariales para simplificar y agilizar trámites.</p>
</div>
<div class="small-12 medium-4 column">
<h4>A quién va dirigido</h4>
<ul>
<li>Ciudadanos con vivienda en propiedad</li>
<li>Profesionales de la construcción y reformas</li>
<li>Empresarios con locales comerciales</li>
</ul>
</div>
<div class="small-12 medium-4 column">
<h4>Cómo puedes participar</h4>
<ul>
<li><strong>Participa en el debate previo</strong> para identificar los problemas a solucionar, la necesidad de esta normativa, sus objetivos y posibles soluciones alternativas.</li>
<li>Después del debate el Ayuntamiento presentará un borrador del texto al cual podrás realizar <strong>comentarios y alegaciones</strong>.</li>
</ul>
</div>
</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">
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="#">
<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="debate-chooser">
<div class="row">
<div class="small-12 medium-9 column">
<div class="debate-list">
<div class="debate-block">
<div class="debate-type">
Debate <span class="icon-debates" aria-hidden="true"></span>
</div>
<div class="debate-title">
<h4><a href="#">¿Qué medidas podría adoptar el Ayuntamiento de Madrid para facilitar y agilizar la autorización para la realización de obras y la apertura de locales comerciales o empresariales?</a></h4>
</div>
<div class="debate-meta">
<span class="icon-comments" aria-hidden="true"></span> <span class="debate-comments"><a href="#">Sin comentarios</a></span> · <span class="debate-date">27/11/2016
</div>
</div>
<div class="debate-block">
<div class="debate-type">
Debate <span class="icon-debates" aria-hidden="true"></span>
</div>
<div class="debate-title">
<h4><a href="#">¿En el ámbito de las autorizaciones urbanísticas, es partidario de que se modifique el papel que juegan las empresas privadas acreditadas (ECU) para que también puedan facilitar las gestiones en las obras que realicen los particulares en sus viviendas u otras actuaciones similares?</a></h4>
</div>
<div class="debate-meta">
<span class="icon-comments" aria-hidden="true"></span> <span class="debate-comments"><a href="#">Sin comentarios</a></span> · <span class="debate-date">27/11/2016
</div>
</div>
<div class="debate-block">
<div class="debate-type">
Debate <span class="icon-debates" aria-hidden="true"></span>
</div>
<div class="debate-title">
<h4><a href="#">¿Qué medidas podría adoptar el Ayuntamiento de Madrid para facilitar y agilizar la autorización para la realización de obras y la apertura de locales comerciales o empresariales?</a></h4>
</div>
<div class="debate-meta">
<span class="icon-comments" aria-hidden="true"></span> <span class="debate-comments"><a href="#">Sin comentarios</a></span> · <span class="debate-date">27/11/2016
</div>
</div>
<div class="debate-block">
<div class="debate-type">
Debate <span class="icon-debates" aria-hidden="true"></span>
</div>
<div class="debate-title">
<h4><a href="#">¿En el ámbito de las autorizaciones urbanísticas, es partidario de que se modifique el papel que juegan las empresas privadas acreditadas (ECU) para que también puedan facilitar las gestiones en las obras que realicen los particulares en sus viviendas u otras actuaciones similares?</a></h4>
</div>
<div class="debate-meta">
<span class="icon-comments" aria-hidden="true"></span> <span class="debate-comments"><a href="#">Sin comentarios</a></span> · <span class="debate-date">27/11/2016
</div>
</div>
<div class="debate-block">
<div class="debate-type">
Debate <span class="icon-debates" aria-hidden="true"></span>
</div>
<div class="debate-title">
<h4><a href="#">¿Qué medidas podría adoptar el Ayuntamiento de Madrid para facilitar y agilizar la autorización para la realización de obras y la apertura de locales comerciales o empresariales?</a></h4>
</div>
<div class="debate-meta">
<span class="icon-comments" aria-hidden="true"></span> <span class="debate-comments"><a href="#">Sin comentarios</a></span> · <span class="debate-date">27/11/2016
</div>
</div>
<div class="debate-block">
<div class="debate-type">
Debate <span class="icon-debates" aria-hidden="true"></span>
</div>
<div class="debate-title">
<h4><a href="#">¿En el ámbito de las autorizaciones urbanísticas, es partidario de que se modifique el papel que juegan las empresas privadas acreditadas (ECU) para que también puedan facilitar las gestiones en las obras que realicen los particulares en sus viviendas u otras actuaciones similares?</a></h4>
</div>
<div class="debate-meta">
<span class="icon-comments" aria-hidden="true"></span> <span class="debate-comments"><a href="#">Sin comentarios</a></span> · <span class="debate-date">27/11/2016
</div>
</div>
</div>
</div>
<div class="small-12 medium-3 column">
<div class="debate-info">Realiza tus aportaciones al debate previo participando en los siguientes temas.</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,93 @@
<div class="legislation-hero no-margin-top grey-heading">
<div class="row headline">
<div class="small-12 medium-7 column">
<p class="grey">Colabora en la elaboración de la normativa sobre</p>
<h2>
Licencias urbanísticas, declaraciones responsables y comunicaciones previas
</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">
<h3>Suscríbete al proceso</h3>
<p>Recibe notificaciones clave sobre el proceso</p>
</a>
</div>
</div>
<div class="row description">
<div class="small-12 medium-4 column">
<h4>En qué consiste</h4>
<p>Se va a modificar la regulación del procedimiento para la autorización de obras y la apertura de locales comerciales o empresariales para simplificar y agilizar trámites.</p>
</div>
<div class="small-12 medium-4 column">
<h4>A quién va dirigido</h4>
<ul>
<li>Ciudadanos con vivienda en propiedad</li>
<li>Profesionales de la construcción y reformas</li>
<li>Empresarios con locales comerciales</li>
</ul>
</div>
<div class="small-12 medium-4 column">
<h4>Cómo puedes participar</h4>
<ul>
<li><strong>Participa en el debate previo</strong> para identificar los problemas a solucionar, la necesidad de esta normativa, sus objetivos y posibles soluciones alternativas.</li>
<li>Después del debate el Ayuntamiento presentará un borrador del texto al cual podrás realizar <strong>comentarios y alegaciones</strong>.</li>
</ul>
</div>
</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">
Más información y contexto
</a>
</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="#">
<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="debate-chooser">
<div class="row">
<div class="debate-draft">
<div class="small-12 medium-7 column">
<h3>Esta fase del proceso todavía no está abierta</h3>
<p>Suscríbete al proceso para recibir un aviso en el momento en que se abra.</p>
</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">
<h3>Suscríbete al proceso</h3>
<p>Recibe notificaciones clave sobre el proceso</p>
</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,67 @@
<div class="legislation-hero no-margin-top brand-heading">
<div class="row">
<div class="small-12 medium-12 column padding">
<h4>
PROCESOS DESTACADOS
</h4>
</div>
</div>
</div>
<div class="row">
<div class="legislation-categories small-12 medium-3 column">
<ul>
<li class="active"><h4>Procesos activos</h4></li>
<li><h4>Próximamente</h4></li>
<li><h4>Terminados</h4></li>
</ul>
</div>
<div id="legislation" class="legislation-list small-12 medium-9 column">
<div id="legislation-list">
<div id="proposal_1" class="legislation clear">
<div class="column row legislation-text">
<div class="small-12 medium-8 column">
<div class="legislation-text">
<h3><a href="/proposals/6-soluta-sed-sapiente-dolores">Licencias urbanísticas, declaraciones responsables y comunicaciones previas</a></h3>
<p>Se va a modificar la regulación del procedimiento para la autorización de obras y la apertura de locales comerciales o empresariales para simplificar y agilizar trámites</p>
</div>
</div>
<div id="proposal_6_votes" class="small-12 medium-4 column">
<a class="button button-legislation big expanded" title="Apoyar esta propuesta" data-remote="true" rel="nofollow" data-method="post" href="/proposals/6-soluta-sed-sapiente-dolores/vote?value=yes">
<span class="icon-comments"></span>&nbsp; Ver últimas aportaciones
</a>
</div>
</div>
<div class="column row">
<div class="small-12 column legislation-calendar-info">
<p>Fechas clave:</p>
</div>
</div>
<div class="column row small-collapse medium-uncollapse legislation-calendar">
<div class="small-6 medium-3 column">
<h5>Debate previo</h5>
<p>15 nov 2016 - 15 dic 2016</p>
</div>
<div class="small-6 medium-3 column">
<h5>Publicación borrador</h5>
<p>1 dic 2016</p>
</div>
<div class="small-6 medium-3 column">
<h5>Alegaciones</h5>
<p>1 dic 2016 - 15 dic 2016</p>
</div>
<div class="small-6 medium-3 column">
<h5>Publicación resultados</h5>
<p>15 feb 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>