Files
grecia/app/assets/stylesheets/legislation_process.scss
Javi Martín 128a816464 Remove collaborative legislation summary
This feature wasn't properly tested nor reviewed, and after reviewing
several pull requests with a similar status and considering this pull
request is related to the public area of the web, we've decided to
remove it before releasing version 1.1.

This commit reverts commit 4f50e67a.
2019-11-06 17:21:03 +01:00

1009 lines
18 KiB
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-list {
border-bottom: 1px solid $border;
}
.key-dates {
list-style-type: none;
margin: 0 rem-calc(-10);
@include breakpoint(large) {
margin: 0;
}
li {
border: 1px solid $border;
display: block;
margin: rem-calc(-1) 0;
min-height: $line-height * 3;
position: relative;
vertical-align: top;
@include breakpoint(large down) {
&::after {
content: "\63";
font-family: "icons" !important;
font-size: rem-calc(24);
pointer-events: none;
position: absolute;
right: 12px;
top: 12px;
}
}
@include breakpoint(large) {
background: #fafafa;
display: inline-block;
border-bottom: 0;
border-top-left-radius: rem-calc(6);
border-top-right-radius: rem-calc(6);
margin-bottom: 0;
margin-right: $line-height / 4;
margin-top: 0;
&:hover:not(.is-active) {
background: $highlight;
}
&::after {
content: "";
}
}
a {
display: block;
padding: $line-height / 4 $line-height / 2;
@include breakpoint(large) {
display: inline-block;
}
&:hover {
text-decoration: none;
}
h4 {
margin-bottom: 0;
}
}
}
span {
color: $text-medium;
font-size: $small-font-size;
}
.is-active {
background: $highlight;
position: relative;
@include breakpoint(large) {
background: none;
border: 1px solid $border;
border-bottom: 0;
&::after {
border-bottom: 1px solid #fefefe;
bottom: -1px;
left: 0;
position: absolute;
width: 100%;
}
}
&::after {
content: "";
}
}
}
// 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: $highlight;
.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;
}
}
.process-proposal {
margin-bottom: $line-height;
.header {
background: $highlight;
padding: $line-height;
@include breakpoint(medium) {
height: $line-height * 4;
}
}
.process-title {
font-size: $small-font-size;
margin-bottom: 0;
text-transform: uppercase;
}
.process-link {
font-size: rem-calc(19);
font-weight: bold;
}
}