fcc63cb436
Until now, overwriting the styles for a certain tenant was a very
tedious task. For example, if we wanted to use a different brand color
for a tenant, we had to manually overwrite the styles for every element
using that color.
It isn't possible to use different SCSS variables per tenant unless we
generate a different stylesheet per tenant. However, doing so would make
the CSS compilation take way too long on installations with more than a
couple of tenants, and it wouldn't allow to get the colors dynamically
from the database, which we intend to support in the future.
So we're using CSS variables instead. These variables are supported by
97% of the browsers (as of October 2022), and for the other 3% of the
browsers we're using the default colors (SCSS variables) instead.
CSS variables have some limitations: for instance, it isn't possible to
use functions like `lighten`, `darken` or `scale-color` with CSS
variables, so the application might behave in a strange way when we use
these functions.
It also isn't possible to automatically get whether black or white text
makes a better contrast with a certain background color. To overcome
this limitation, we're providing variables ending with `-contrast`. For
instance, since the default `$brand` color is a dark one, when assigning
a light color to `--brand`, we probably want to assign
`--brand-contrast: #{$black}` as well, so the text is still readable.
990 lines
18 KiB
SCSS
990 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 {
|
|
@include full-width-background;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.description li p {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
// 02. Legislation process navigation
|
|
// ----------------------------------
|
|
|
|
.legislation-process-list {
|
|
@include full-width-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-color: $body-background;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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 {
|
|
@include brand-color;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
font-size: $small-font-size;
|
|
|
|
.icon-debates {
|
|
margin-left: rem-calc(3);
|
|
}
|
|
}
|
|
|
|
.debate-title a {
|
|
@include brand-color;
|
|
}
|
|
}
|
|
|
|
.debate-meta,
|
|
.debate-meta a {
|
|
font-size: $small-font-size;
|
|
color: #6d6d6d;
|
|
}
|
|
|
|
.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 {
|
|
@include brand-color;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.quiz-next-link {
|
|
display: block;
|
|
|
|
&:hover,
|
|
&:active {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.quiz-next {
|
|
@include brand-color;
|
|
background: #ccdbe5;
|
|
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 {
|
|
@extend %brand-background;
|
|
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 {
|
|
@include brand-background;
|
|
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;
|
|
|
|
.calc-index {
|
|
max-width: calc(35% - 25px);
|
|
|
|
.draft-index {
|
|
@supports (position: sticky) {
|
|
max-height: 100vh;
|
|
overflow-y: auto;
|
|
position: sticky;
|
|
top: $line-height;
|
|
}
|
|
}
|
|
|
|
> * {
|
|
padding-right: rem-calc(20);
|
|
}
|
|
}
|
|
|
|
.calc-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.calc-comments {
|
|
min-width: 15rem;
|
|
width: calc(35% - 25px);
|
|
|
|
> * {
|
|
padding-left: rem-calc(20);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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) {
|
|
margin: 0 auto;
|
|
max-width: 3 * $grid-row-width / 4;
|
|
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: inherit;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
text-decoration: none;
|
|
|
|
h3 {
|
|
color: inherit;
|
|
}
|
|
|
|
.anchor::before {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.calc-comments {
|
|
position: relative;
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
details:not([open]) {
|
|
background: #f2f2f2;
|
|
|
|
@include breakpoint(small only) {
|
|
border-bottom: 1px solid #d4d4d4;
|
|
}
|
|
|
|
@include breakpoint(medium) {
|
|
min-width: auto;
|
|
width: rem-calc(50);
|
|
|
|
.draft-panel {
|
|
line-height: 1;
|
|
display: block;
|
|
font-size: $small-font-size;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
color: #696969;
|
|
padding: 0;
|
|
text-align: center;
|
|
|
|
.icon-banner::before,
|
|
.icon-comments::before {
|
|
display: block;
|
|
margin: rem-calc(24) auto rem-calc(36);
|
|
}
|
|
|
|
.panel-title {
|
|
display: block;
|
|
transform: rotate(-90deg);
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.calc-text {
|
|
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 {
|
|
cursor: auto;
|
|
|
|
@include breakpoint(small only) {
|
|
summary {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:not([open]) {
|
|
border-left: 1px solid #d4d4d4;
|
|
}
|
|
|
|
.comments-box-container {
|
|
position: relative;
|
|
top: rem-calc(180);
|
|
}
|
|
|
|
.comment-box {
|
|
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 {
|
|
padding-bottom: rem-calc(8);
|
|
margin-bottom: rem-calc(16);
|
|
border-bottom: 1px solid $border;
|
|
|
|
a .icon-expand {
|
|
color: #838383;
|
|
font-size: $small-font-size;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.comments-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.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: "|";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
|
|
.expand-context a {
|
|
span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.icon-expand {
|
|
text-decoration: none;
|
|
color: #999;
|
|
line-height: 0;
|
|
}
|
|
|
|
.icon-expand {
|
|
margin-left: 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;
|
|
}
|
|
}
|
|
|
|
// 10. Legislation summary
|
|
// -------------------------
|
|
|
|
.process-summary {
|
|
> section {
|
|
margin-top: $line-height * 1.5;
|
|
padding: 0 rem-calc(16);
|
|
}
|
|
|
|
h4,
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
> section > header,
|
|
.question-title,
|
|
.annotation-title,
|
|
.comment-summary,
|
|
.proposal-summary {
|
|
@include breakpoint(medium) {
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
> :first-child {
|
|
$margin: rem-calc(map-get($grid-column-gutter, "medium"));
|
|
|
|
margin-right: $margin;
|
|
width: calc(75% - #{$margin});
|
|
}
|
|
}
|
|
}
|
|
|
|
.debate-summary,
|
|
.proposal-summary,
|
|
.annotation-summary {
|
|
@extend %panel;
|
|
min-height: auto;
|
|
padding-bottom: rem-calc(16);
|
|
padding-top: rem-calc(16);
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: $line-height / 2;
|
|
}
|
|
}
|
|
|
|
.question-title:not(:only-child) {
|
|
margin-bottom: $line-height / 2;
|
|
}
|
|
|
|
.annotation-title {
|
|
margin-bottom: $line-height / 2;
|
|
margin-top: $line-height / 2;
|
|
}
|
|
|
|
.annotation-quote {
|
|
border: 1px solid $black;
|
|
padding: rem-calc(10);
|
|
}
|
|
|
|
.comment-summary {
|
|
margin-bottom: $line-height / 2;
|
|
|
|
> :first-child {
|
|
background-color: rgba(217, 216, 243, 0.2);
|
|
border-radius: rem-calc(10);
|
|
padding: rem-calc(12);
|
|
}
|
|
}
|
|
|
|
.download-button {
|
|
margin-bottom: 0;
|
|
margin-left: 50%;
|
|
margin-top: $line-height;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|