app/assets/stylesheets/legislation_process.scss
// Table of Contents
//
// 01. Hero
// 02. Legislation process navigation
// 03. Debate list
// 04. Debate quiz
// 05. Legislation allegations
// 06. Legislation changes
// 07. Legislation comments
// 08. Legislation draft comment
// 09. Legislation proposals
//
// 01. Hero
// --------
.legislation-hero {
ul {
list-style: none;
margin-left: 0;
li {
&::before {
color: #8aa8be;
content: '■';
padding-right: $line-height / 4;
vertical-align: text-bottom;
}
}
}
.title {
font-weight: bold;
text-transform: uppercase;
}
.description li p {
display: inline;
}
}
// 02. Legislation process navigation
// ----------------------------------
.legislation-process-categories {
position: relative;
.legislation-process-list {
border-bottom: 1px solid $medium-gray;
margin: 0 rem-calc(16) rem-calc(16);
ul {
list-style: none;
margin: 0 auto;
margin-bottom: 0;
padding-left: 0;
}
li {
border-bottom: 2px solid transparent;
cursor: pointer;
display: inline-block;
margin-bottom: $line-height;
margin-right: $line-height;
transition: all 0.4s;
@include breakpoint(medium) {
margin-bottom: 0;
}
&:hover,
&:active,
&:focus {
border-bottom: 2px solid $brand;
}
a,
h4 {
display: block;
color: #6d6d6d;
margin-bottom: 0;
}
}
a {
&:hover,
&:active {
text-decoration: none;
}
p {
margin-bottom: 0;
@include breakpoint(medium) {
margin-bottom: rem-calc(16);
}
}
}
.is-active {
border-bottom: 2px solid $brand;
}
}
}
// 03. Debate list
// ----------------
.debate-chooser {
padding: rem-calc(32) rem-calc(16);
@include breakpoint(medium) {
.debate-chooser {
padding: rem-calc(32) rem-calc(48);
}
}
.debate-block {
margin-bottom: rem-calc(40);
.debate-type {
text-transform: uppercase;
color: $brand;
font-weight: 700;
font-size: $small-font-size;
.icon-debates {
margin-left: rem-calc(3);
}
}
.debate-title a {
color: $brand;
}
}
.debate-meta,
.debate-meta a {
font-size: $small-font-size;
color: #6d6d6d;
.icon-comments {
margin-right: rem-calc(3);
}
}
.debate-info {
padding: rem-calc(16);
background: #f4f4f4;
}
}
// 04. Debate quiz
// ---------------
.debate-questions {
.comments {
margin-top: $line-height * 2.5;
}
.quiz-header {
margin-bottom: $line-height;
.quiz-title,
.quiz-next {
padding: $line-height;
@include breakpoint(medium) {
height: $line-height * 4;
}
}
.quiz-title {
background: #e5ecf2;
.quiz-header-title {
font-size: $small-font-size;
font-weight: 700;
margin-bottom: 0;
text-transform: uppercase;
}
}
h4 a {
color: $brand;
&:hover {
text-decoration: none;
}
}
.quiz-next-link {
display: block;
&:hover,
&:active {
text-decoration: none;
}
}
.quiz-next {
background: #ccdbe5;
color: $brand;
font-size: $small-font-size;
font-weight: bold;
text-align: right;
text-transform: uppercase;
transition: background 0.25s ease-out, background 0.25s ease-out;
.icon-angle-right {
vertical-align: middle;
}
&:hover,
&:active {
background: $brand;
color: #fff;
text-decoration: none;
}
}
}
.quiz-question {
margin-bottom: $line-height;
}
.debate-questions {
position: relative;
list-style: none;
.control {
background: #fff;
border: 1px solid $border;
border-radius: rem-calc(4);
color: #555;
cursor: pointer;
display: inline-block;
margin-bottom: $line-height / 2;
margin-right: $line-height;
padding: $line-height / 2 $line-height * 2;
position: relative;
}
.is-active {
background: #ccdbe6;
border: 0;
}
.control input {
position: absolute;
opacity: 0;
z-index: -1;
}
.control input:checked ~ .control-indicator {
background-color: $brand;
border: 0;
}
.radio .control-indicator {
border-radius: 50%;
}
.control-indicator {
position: absolute;
top: 15px;
left: 15px;
display: block;
width: rem-calc(16);
height: rem-calc(16);
line-height: rem-calc(16);
font-size: 65%;
text-align: center;
border: 2px solid #9c9c9c;
pointer-events: none;
user-select: none;
}
}
}
// 05. Legislation allegations
// ---------------------------
.draft-panels {
position: relative;
padding: rem-calc(32) 0;
.draft-chooser {
h3 {
vertical-align: top;
display: inline-block;
font-weight: 400;
margin-right: rem-calc(8);
}
span {
margin-left: rem-calc(4);
font-style: italic;
font-size: $small-font-size;
color: $text-medium;
vertical-align: top;
line-height: rem-calc(37);
}
.select-box {
position: relative;
@include breakpoint(medium) {
display: inline-block;
}
select {
margin-bottom: 0;
display: block;
}
span {
vertical-align: inherit;
font-style: normal;
}
.see-changes {
color: $text-medium;
text-decoration: underline;
}
}
.button {
margin-top: rem-calc(16);
@include breakpoint(medium) {
margin-top: 0;
}
}
}
.draft-allegation {
@include breakpoint(medium) {
display: flex;
padding-left: rem-calc(15);
padding-right: rem-calc(15);
}
.calc-index {
.draft-panel {
cursor: pointer;
}
.draft-index-rotated {
display: none;
}
}
@media screen and (min-width: 40em) {
.calc-index {
width: calc(35% - 25px);
}
.calc-text {
width: calc(65% - 25px);
}
.calc-comments {
cursor: pointer;
background: #f2f2f2;
width: rem-calc(50);
.draft-panel {
.panel-title {
display: none;
}
}
}
}
.border-right {
@include breakpoint(medium) {
border-right: 1px solid $border;
}
}
.border-left {
@include breakpoint(medium) {
border-left: 1px solid $border;
}
}
.draft-panel {
text-transform: uppercase;
font-weight: 700;
padding: rem-calc(8) rem-calc(16);
color: #696969;
background: #f2f2f2;
font-size: $small-font-size;
.icon-comments {
margin-right: rem-calc(4);
}
.icon-banner {
line-height: 0;
color: $text-medium;
vertical-align: sub;
margin-right: rem-calc(4);
}
}
.draft-index {
ul:first-child {
font-size: rem-calc(16);
text-decoration: underline;
margin-left: rem-calc(36);
margin-top: $line-height;
}
ul {
list-style: none;
li {
margin-bottom: rem-calc(16);
}
.open::before {
cursor: pointer;
position: absolute;
margin-left: rem-calc(-20);
font-family: 'icons';
content: '\58';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.closed::before {
cursor: pointer;
position: absolute;
margin-left: rem-calc(-20);
font-family: 'icons';
content: '\5a';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
}
.draft-text {
position: relative;
padding: rem-calc(16);
@include breakpoint(medium) {
padding: rem-calc(32) rem-calc(32) rem-calc(32) rem-calc(48);
}
h2 {
font-weight: 400;
margin-bottom: rem-calc(32);
margin-top: rem-calc(32);
}
h3 {
font-weight: 400;
margin-bottom: rem-calc(16);
}
.anchor::before {
display: none;
content: '#';
color: $text-medium;
position: absolute;
left: 0;
@include breakpoint(medium) {
left: 24px;
}
}
a {
color: $text;
&:hover,
&:active,
&:focus {
text-decoration: none;
h3 {
color: $text;
}
.anchor::before {
display: block;
}
}
}
}
.calc-comments {
position: relative;
.comment-box {
display: none;
}
.draft-comments-rotated {
@include breakpoint(medium) {
font-size: $small-font-size;
text-transform: uppercase;
font-weight: 700;
color: #696969;
margin-top: rem-calc(64);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
}
}
}
.comments-on {
.calc-index {
width: rem-calc(50);
background: #f2f2f2;
cursor: pointer;
.panel-title {
display: none;
}
.draft-index {
display: none;
}
.draft-index-rotated {
@include breakpoint(medium) {
line-height: 1;
display: block;
font-size: $small-font-size;
text-transform: uppercase;
font-weight: 700;
color: #696969;
margin-top: $line-height;
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
.panel-title {
display: block;
}
}
}
}
.calc-text {
width: calc(65% - 25px);
border-right: 0;
.show-comments {
width: 105%;
background: #fafafa;
padding: rem-calc(4) rem-calc(40) rem-calc(4) rem-calc(4);
border: 1px solid $border;
margin-bottom: rem-calc(16);
p {
margin-bottom: 0;
}
}
}
.calc-comments {
background: #fff;
cursor: auto;
width: calc(35% - 25px);
.draft-panel {
cursor: pointer;
}
.draft-comments-rotated {
display: none;
}
.comments-box-container {
position: absolute;
top: rem-calc(230);
}
.comment-box {
width: rem-calc(375);
padding: rem-calc(4);
background: #f9f9f9;
border: 1px solid $border;
display: block;
margin-bottom: rem-calc(32);
.button {
font-size: $small-font-size;
padding: rem-calc(10) rem-calc(20);
}
.publish-comment {
float: right;
}
.comment-header {
color: #838383;
padding-bottom: rem-calc(8);
margin-bottom: rem-calc(16);
border-bottom: 1px solid $border;
.comment-number {
color: $text;
display: inline-block;
}
.icon-comment {
margin-right: rem-calc(8);
}
a .icon-expand {
color: #838383;
font-size: $small-font-size;
float: right;
}
}
.comments-wrapper {
position: relative;
.participation-not-allowed {
padding: rem-calc(20) rem-calc(8);
}
}
.comment-footer {
position: relative;
.participation-not-allowed {
font-size: rem-calc(14);
height: rem-calc(50);
padding: $line-height / 2;
top: -18px;
}
}
.comment-input {
padding-bottom: rem-calc(64);
margin-bottom: rem-calc(16);
margin-top: rem-calc(16);
border-bottom: 1px solid $border;
.comment-advice {
border-top: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
width: 100%;
padding: rem-calc(8);
display: inline-block;
font-size: $small-font-size;
background: #dfdfdf;
.icon-proposals {
color: #838383;
}
a {
color: #87a3b9;
text-decoration: underline;
}
}
textarea {
border-radius: 0;
box-shadow: none;
border-bottom: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
width: 100%;
height: rem-calc(200);
margin-bottom: rem-calc(8);
}
.comment-actions {
.cancel-comment {
color: #87a3b9;
text-decoration: underline;
font-size: $small-font-size;
display: inline-block;
}
}
}
.comment {
border-bottom: 1px solid $border;
padding-bottom: $line-height / 2;
margin-bottom: rem-calc(16);
font-size: $small-font-size;
.comment-text {
margin-bottom: rem-calc(8);
p {
line-height: 1.5;
font-size: $small-font-size;
&:last-child {
margin-bottom: rem-calc(8);
}
}
}
.comment-meta {
.comment-more-info {
display: inline-block;
.comment-expand {
display: inline-block;
&::after {
content: '|';
color: #838383;
}
}
.comment-replies {
display: inline-block;
}
}
.comment-votes {
color: #838383;
float: right;
display: inline-block;
.comment-votes-number {
margin-right: rem-calc(4);
display: inline-block;
&::after {
margin-left: rem-calc(4);
content: '|';
}
}
.icon-like,
.icon-unlike {
cursor: pointer;
color: #c7c7c7;
&:hover,
&:active,
&:focus {
color: #838383;
}
}
.icon-like {
margin-right: rem-calc(4);
}
}
}
}
}
.draft-panel {
background: #e5e5e5;
border-left: 1px solid #d4d4d4;
.panel-title {
display: inline-block;
}
}
}
}
}
// 06. Legislation changes
// -----------------
.legislation-changes {
ul {
list-style: none;
margin-left: 0;
li {
margin-bottom: rem-calc(16);
&::before {
margin-right: rem-calc(4);
content: '—';
}
}
}
.changes-link {
display: block;
margin-left: rem-calc(16);
font-size: $small-font-size;
@include breakpoint(medium) {
display: inline-block;
}
a {
span {
text-decoration: underline;
}
.icon-external {
text-decoration: none;
color: #999;
line-height: 0;
vertical-align: sub;
margin-left: rem-calc(8);
}
&:active,
&:focus,
&:hover {
text-decoration: none;
}
}
}
}
// 07. Legislation comments
// -----------------
.legislation-comments {
.comment-section {
background: #fafafa;
padding: rem-calc(16);
border: 1px solid #dee0e3;
margin-top: rem-calc(4);
margin-bottom: rem-calc(16);
}
.comment {
margin-bottom: rem-calc(48);
a {
span {
text-decoration: underline;
}
.icon-expand,
.icon-comments {
text-decoration: none;
color: #999;
line-height: 0;
}
.icon-expand {
margin-left: rem-calc(4);
}
.icon-comments {
margin-right: rem-calc(4);
}
&:active,
&:focus,
&:hover {
text-decoration: none;
}
}
}
}
// 08. Legislation draft comment
// -----------------
.legislation-comment {
.annotation-share-comment {
margin-bottom: rem-calc(32);
}
.comment-section {
background: #fafafa;
padding: rem-calc(16);
border: 1px solid #dee0e3;
margin-top: rem-calc(4);
margin-bottom: rem-calc(16);
}
.comment {
a {
span {
text-decoration: underline;
}
.icon-expand,
.icon-comments {
text-decoration: none;
color: #999;
line-height: 0;
}
.icon-expand {
margin-left: rem-calc(4);
}
.icon-comments {
margin-right: rem-calc(4);
}
&:active,
&:focus,
&:hover {
text-decoration: none;
}
}
}
}
// 09. Legislation proposals
// -------------------------
.proposal-show {
&.legislation-proposal-show h1 {
font-size: rem-calc(24);
@include breakpoint(medium) {
font-size: rem-calc(36);
}
}
}
.legislation-proposals {
margin-top: rem-calc(-6);
.proposal h3 {
font-size: rem-calc(20);
margin-top: 0;
}
}