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

cleans legislation process scss

Browse Source
This commit is contained in:
decabeza
2017-09-04 19:31:10 +02:00
parent da1f72ee7c
commit a15a75a4d6
3 changed files with 97 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
app/assets/stylesheets/legislation_process.scss
View File

@@ -13,32 +13,29 @@
// //
// 01. Utils // 01. Utils
// ----------------- // ---------
$grey-heading: #e6e6e6;
$border-dark: darken($border, 10%);
.grey-heading { .grey-heading {
background: #e6e6e6; background: $grey-heading;
} }
$epigraph-font-size: rem-calc(15);
$epigraph-line-height: rem-calc(22);
// 02. Hero // 02. Hero
// ----------------- // --------
.legislation-hero {
h4 { .legislation-hero {
text-transform: uppercase;
}
ul { ul {
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
li::before { li::before {
vertical-align: text-bottom;
padding-right: 0.5rem;
content: '■';
color: #8aa8be; color: #8aa8be;
content: '■';
padding-right: $line-height / 4;
vertical-align: text-bottom;
} }
} }
@@ -47,63 +44,33 @@ $epigraph-line-height: rem-calc(22);
} }
.debate-add-info { .debate-add-info {
border-top: 1px solid $border-dark;
margin-top: $line-height; margin-top: $line-height;
padding-top: $line-height; padding-top: $line-height;
border-top: 1px solid darken($border, 10%);
@include breakpoint(medium) {
margin-bottom: 2rem;
}
.debate-info-wrapper {
h2 {
font-size: $lead-font-size;
@include breakpoint(medium) {
float: left;
}
}
}
} }
.text-center .button { .title {
background: $brand; font-weight: bold;
margin-bottom: 0; text-transform: uppercase;
} }
.description { .description {
p {
font-size: $epigraph-font-size;
line-height: $epigraph-line-height;
}
ul {
font-size: $epigraph-font-size;
line-height: $epigraph-line-height;
}
li { li {
margin-bottom: 1rem;
p { p {
display: inline; display: inline;
margin-bottom: 0;
} }
} }
h4 {
font-size: $base-font-size;
}
} }
.button-subscribe { .button-subscribe {
margin-top: 1rem; margin-top: $line-height;
@include breakpoint(medium) { @include breakpoint(medium) {
margin-top: $line-height * 2;
padding: 0.5em 1em; padding: 0.5em 1em;
margin-top: 3rem;
} }
h3 { h3 {
@@ -111,8 +78,8 @@ $epigraph-line-height: rem-calc(22);
} }
p { p {
margin-bottom: 0;
font-size: $small-font-size; font-size: $small-font-size;
margin-bottom: 0;
} }
&:hover h3 { &:hover h3 {
@@ -122,7 +89,8 @@ $epigraph-line-height: rem-calc(22);
} }
// 03. Legislation process navigation // 03. Legislation process navigation
// ----------------- // ----------------------------------
.legislation-process-categories { .legislation-process-categories {
position: relative; position: relative;
@@ -131,20 +99,11 @@ $epigraph-line-height: rem-calc(22);
margin: 0 1rem 1rem; margin: 0 1rem 1rem;
ul { ul {
margin: 0 auto;
list-style: none; list-style: none;
padding-left: 0; margin: 0 auto;
margin-bottom: 0; margin-bottom: 0;
padding-left: 0;
svg {
position: absolute;
top: 1.25rem;
@include breakpoint(1280px) {
transform: rotate(-6deg);
left: -1rem;
}
}
} }
li { li {
@@ -154,6 +113,10 @@ $epigraph-line-height: rem-calc(22);
transition: all 0.4s; transition: all 0.4s;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
@include breakpoint(medium) {
margin-left: $line-height * 2;
}
&:first-of-type { &:first-of-type {
margin-left: 0; margin-left: 0;
} }
@@ -164,29 +127,25 @@ $epigraph-line-height: rem-calc(22);
border-bottom: 2px solid $brand; border-bottom: 2px solid $brand;
} }
@media (min-width: 950px) {
margin: 0 0 0 3rem;
}
a, a,
h4 { h4 {
display: block; display: block;
color: #6d6d6d; color: #6d6d6d;
margin-bottom: 0; margin-bottom: 0;
} }
}
a { a {
&:hover, &:hover,
&:active { &:active {
text-decoration: none; text-decoration: none;
} }
p { p {
margin-bottom: 0; margin-bottom: 0;
@include breakpoint(medium) { @include breakpoint(medium) {
margin-bottom: 1rem; margin-bottom: 1rem;
}
} }
} }
} }
@@ -198,7 +157,8 @@ $epigraph-line-height: rem-calc(22);
} }
// 04. Debate list // 04. Debate list
// ----------------- // ----------------
.debate-chooser { .debate-chooser {
padding: 2rem 1rem; padding: 2rem 1rem;
@@ -244,38 +204,43 @@ $epigraph-line-height: rem-calc(22);
} }
// 05. Debate quiz // 05. Debate quiz
// ----------------- // ---------------
.debate-questions { .debate-questions {
.comments { .comments {
margin-top: 4rem; margin-top: $line-height * 2.5;
} }
.quiz-header { .quiz-header {
margin-bottom: 2rem; margin-bottom: $line-height;
.quiz-title, .quiz-title,
.quiz-next { .quiz-next {
padding: 1rem; padding: $line-height;
height: 6rem;
@include breakpoint(medium) {
height: $line-height * 4;
}
} }
.quiz-title { .quiz-title {
background: #e5ecf2; background: #e5ecf2;
.quiz-header-title { .quiz-header-title {
font-size: $small-font-size;
font-weight: 700;
margin-bottom: 0; margin-bottom: 0;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700;
font-size: $small-font-size;
} }
} }
h4 a { h4 a {
color: $brand; color: $brand;
}
h4 a:hover { &:hover {
text-decoration: none; text-decoration: none;
}
} }
.quiz-next-link { .quiz-next-link {
@@ -285,57 +250,49 @@ $epigraph-line-height: rem-calc(22);
&:active { &:active {
text-decoration: none; text-decoration: none;
} }
}
.quiz-next { .quiz-next {
background: #ccdbe5; background: #ccdbe5;
font-weight: 700; color: $brand;
color: $brand; font-size: $small-font-size;
font-size: $small-font-size; font-weight: bold;
text-align: right; text-align: right;
text-transform: uppercase; text-transform: uppercase;
transition: background 0.25s ease-out, background 0.25s ease-out; transition: background 0.25s ease-out, background 0.25s ease-out;
.icon-angle-right { .icon-angle-right {
vertical-align: sub; vertical-align: middle;
} }
&:hover, &:hover,
&:active { &:active {
text-decoration: none; background: $brand;
background: $brand; color: #fff;
color: #fff; text-decoration: none;
.icon-angle-right {
color: #fff;
}
}
} }
} }
} }
.quiz-question { .quiz-question {
margin-bottom: 2rem; margin-bottom: $line-height;
} }
.debate-questions { .debate-questions {
position: relative; position: relative;
list-style: none; list-style: none;
.participation-not-allowed {
padding-bottom: 3rem;
}
.control { .control {
position: relative;
display: inline-block;
color: #555;
cursor: pointer;
background: #fff; background: #fff;
border: 1px solid $border; border: 1px solid $border;
border-radius: 4px; border-radius: rem-calc(4);
padding: 0.75rem 2.5rem; color: #555;
margin-right: 1.5rem; cursor: pointer;
margin-bottom: 0.5rem; display: inline-block;
margin-bottom: $line-height / 2;
margin-right: $line-height;
padding: $line-height / 2 $line-height * 2;
position: relative;
} }
.active { .active {
@@ -376,14 +333,15 @@ $epigraph-line-height: rem-calc(22);
} }
// 06. Legislation draft // 06. Legislation draft
// ----------------- // ---------------------
.debate-draft { .debate-draft {
padding: 10rem 2rem 15rem; padding: 10rem 2rem 15rem;
display: block; display: block;
background: #f2f2f2; background: #f2f2f2;
button { button {
height: 90px; height: rem-calc(90);
h3 { h3 {
margin-bottom: 0; margin-bottom: 0;
@@ -397,7 +355,8 @@ $epigraph-line-height: rem-calc(22);
} }
// 07. Legislation allegations // 07. Legislation allegations
// ----------------- // ---------------------------
.legislation-allegation { .legislation-allegation {
padding-top: 1rem; padding-top: 1rem;
@@ -416,12 +375,12 @@ $epigraph-line-height: rem-calc(22);
.button-circle { .button-circle {
line-height: 0; line-height: 0;
padding: 0; padding: 0;
width: 30px; width: rem-calc(30);
height: 30px; height: rem-calc(30);
border-radius: 50%; border-radius: 50%;
span { span {
padding-left: 1px; padding-left: rem-calc(1);
&::before { &::before {
line-height: 1.55; line-height: 1.55;
@@ -547,7 +506,7 @@ $epigraph-line-height: rem-calc(22);
.calc-comments { .calc-comments {
cursor: pointer; cursor: pointer;
background: #f2f2f2; background: #f2f2f2;
width: 50px; width: rem-calc(50);
.draft-panel { .draft-panel {
.panel-title { .panel-title {
@@ -700,7 +659,7 @@ $epigraph-line-height: rem-calc(22);
.comments-on { .comments-on {
.calc-index { .calc-index {
width: 50px; width: rem-calc(50);
background: #f2f2f2; background: #f2f2f2;
cursor: pointer; cursor: pointer;
@@ -764,11 +723,11 @@ $epigraph-line-height: rem-calc(22);
.comments-box-container { .comments-box-container {
position: absolute; position: absolute;
top: 230px; top: rem-calc(230);
} }
.comment-box { .comment-box {
width: 375px; width: rem-calc(375);
padding: 1rem; padding: 1rem;
background: #f9f9f9; background: #f9f9f9;
border: 1px solid $border; border: 1px solid $border;
@@ -819,7 +778,7 @@ $epigraph-line-height: rem-calc(22);
.participation-not-allowed { .participation-not-allowed {
font-size: 0.875rem; font-size: 0.875rem;
height: 50px; height: rem-calc(50);
padding: 0.85rem 0.75rem; padding: 0.85rem 0.75rem;
top: -18px; top: -18px;
} }
@@ -858,7 +817,7 @@ $epigraph-line-height: rem-calc(22);
border-right: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0; border-left: 1px solid #d0d0d0;
width: 100%; width: 100%;
height: 200px; height: rem-calc(200);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }

6
app/views/legislation/processes/_header.html.erb
View File

@@ -9,15 +9,13 @@
<div id="debate-show" class="row description legislation-debate-show"> <div id="debate-show" class="row description legislation-debate-show">
<div class="small-12 column"> <div class="small-12 column">
<% if process.description.present? %> <% if process.description.present? %>
<h4><%= t('legislation.processes.header_full.description') %></h4> <p class="title"><%= t('legislation.processes.header_full.description') %></h4>
<%= markdown process.description %> <%= markdown process.description %>
<% end %> <% end %>
</div> </div>
<% if process.additional_info.present? %> <% if process.additional_info.present? %>
<div class="small-12 column debate-add-info"> <div class="small-12 column debate-add-info">
<div class="debate-info-wrapper"> <%= markdown process.additional_info if process.additional_info %>
<%= markdown process.additional_info if process.additional_info %>
</div>
</div> </div>
<% end %> <% end %>
</div> </div>

6
app/views/legislation/processes/_header_full.html.erb
View File

@@ -11,15 +11,13 @@
<div class="row description"> <div class="row description">
<div class="small-12 column"> <div class="small-12 column">
<% if process.description.present? %> <% if process.description.present? %>
<h4><%= t('.description') %></h4> <p class="title"><%= t('.description') %></p>
<%= markdown process.description %> <%= markdown process.description %>
<% end %> <% end %>
</div> </div>
<% if process.additional_info.present? %> <% if process.additional_info.present? %>
<div id="debate-show" class="small-12 column debate-add-info legislation-debate-show"> <div id="debate-show" class="small-12 column debate-add-info legislation-debate-show">
<div class="debate-info-wrapper"> <%= markdown process.additional_info if process.additional_info %>
<%= markdown process.additional_info if process.additional_info %>
</div>
</div> </div>
<% end %> <% end %>
</div> </div>