Legislation process markup and styles
This commit is contained in:
Martín González
committed by
Amaia Castro
Amaia Castro
parent
54f8549c43
commit
bbacd4546b
@@ -6,6 +6,8 @@
|
||||
@import "admin";
|
||||
@import "layout";
|
||||
@import "participation";
|
||||
@import "legislation";
|
||||
@import "legislation_process";
|
||||
@import "custom";
|
||||
@import "c3";
|
||||
@import "annotator.min";
|
||||
|
||||
131
app/assets/stylesheets/legislation.scss
Normal file
131
app/assets/stylesheets/legislation.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
205
app/assets/stylesheets/legislation_process.scss
Normal file
205
app/assets/stylesheets/legislation_process.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -492,7 +492,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.debate, .proposal, .investment-project {
|
||||
.debate, .proposal, .investment-project, .legislation {
|
||||
margin: $line-height/4 0;
|
||||
|
||||
.panel {
|
||||
|
||||
Reference in New Issue
Block a user