b08c279c31
The link to the comments page was an "expand" icon, which was confusing because it wasn't really expanding the contents of the sidebar but going to an entirely different page. Furthermore, it didn't have any text for people using screen readers, which is why Axe was reporting the following accessibility error: ``` link-name: Links must have discernible text (serious) https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI The following 1 node violate this rule: Selector: #annotation-link > a HTML: <a href="/legislation/processes/75/draft_versions/30/annotations/8?sub_annotation_ids="> <span class="icon-expand" aria-hidden="true"></span> </a> Fix all of the following: - Element is in tab order and does not have accessible text Fix any of the following: - Element does not have text that is visible to screen readers - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute ``` So we're removing the icon and turning the "N comments" text into a link, so it's easier to guess that the link takes us to the page showing all the comments for this annotation.
912 lines
17 KiB
SCSS
912 lines
17 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;
|
|
border-bottom: 0;
|
|
border-top-left-radius: rem-calc(6);
|
|
border-top-right-radius: rem-calc(6);
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
margin-right: calc($line-height / 4);
|
|
margin-top: 0;
|
|
|
|
&:hover:not(.is-active) {
|
|
background: $highlight;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
padding: calc($line-height / 4) calc($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;
|
|
font-size: $small-font-size;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
|
|
.icon-debates {
|
|
margin-left: rem-calc(3);
|
|
}
|
|
}
|
|
|
|
.debate-title a {
|
|
@include brand-color;
|
|
}
|
|
}
|
|
|
|
.debate-meta,
|
|
.debate-meta a {
|
|
color: #6d6d6d;
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.debate-info {
|
|
background: #f4f4f4;
|
|
padding: rem-calc(16);
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
a {
|
|
@include brand-color;
|
|
@include header-font-size(h4);
|
|
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 {
|
|
@include header-font-size(h2);
|
|
margin-bottom: $line-height;
|
|
}
|
|
|
|
.debate-questions {
|
|
list-style: none;
|
|
position: relative;
|
|
|
|
.control {
|
|
background: #fff;
|
|
border: 1px solid $border;
|
|
border-radius: rem-calc(4);
|
|
color: #555;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-bottom: calc($line-height / 2);
|
|
margin-right: $line-height;
|
|
padding: calc($line-height / 2) $line-height * 2;
|
|
position: relative;
|
|
}
|
|
|
|
.is-active {
|
|
background: #ccdbe6;
|
|
border: 0;
|
|
}
|
|
|
|
.control input {
|
|
opacity: 0;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.control input:checked ~ .control-indicator {
|
|
@include brand-background;
|
|
border: 0;
|
|
}
|
|
|
|
.radio .control-indicator {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.control-indicator {
|
|
border: 2px solid #9c9c9c;
|
|
display: block;
|
|
font-size: 65%;
|
|
height: rem-calc(16);
|
|
left: 15px;
|
|
line-height: rem-calc(16);
|
|
pointer-events: none;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 15px;
|
|
user-select: none;
|
|
width: rem-calc(16);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 05. Legislation allegations
|
|
// ---------------------------
|
|
|
|
.draft-panels {
|
|
padding: rem-calc(32) 0;
|
|
position: relative;
|
|
|
|
.draft-chooser {
|
|
|
|
h3 {
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
margin-right: rem-calc(8);
|
|
vertical-align: top;
|
|
}
|
|
|
|
span {
|
|
color: $text-medium;
|
|
font-size: $small-font-size;
|
|
font-style: italic;
|
|
line-height: rem-calc(37);
|
|
margin-left: rem-calc(4);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.select-box {
|
|
position: relative;
|
|
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
}
|
|
|
|
select {
|
|
display: block;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
span {
|
|
font-style: normal;
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
.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 {
|
|
background: #f2f2f2;
|
|
color: #696969;
|
|
font-size: $small-font-size;
|
|
font-weight: 700;
|
|
padding: rem-calc(8) rem-calc(16);
|
|
text-transform: uppercase;
|
|
|
|
.icon-comments {
|
|
margin-right: rem-calc(4);
|
|
}
|
|
|
|
.icon-banner {
|
|
color: $text-medium;
|
|
line-height: 0;
|
|
vertical-align: sub;
|
|
}
|
|
}
|
|
|
|
.draft-index {
|
|
ul:first-child {
|
|
font-size: rem-calc(16);
|
|
margin-left: rem-calc(36);
|
|
margin-top: $line-height;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
|
|
li {
|
|
margin-bottom: rem-calc(16);
|
|
}
|
|
|
|
.open::before {
|
|
content: "\58";
|
|
cursor: pointer;
|
|
font-family: "icons";
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
margin-left: rem-calc(-20);
|
|
position: absolute;
|
|
}
|
|
|
|
.closed::before {
|
|
content: "\5a";
|
|
cursor: pointer;
|
|
font-family: "icons";
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
margin-left: rem-calc(-20);
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
.draft-text {
|
|
padding: rem-calc(16);
|
|
position: relative;
|
|
|
|
@include breakpoint(medium) {
|
|
margin: 0 auto;
|
|
max-width: calc(3 * $grid-row-width / 4);
|
|
padding: rem-calc(32) rem-calc(32) rem-calc(32) rem-calc(48);
|
|
}
|
|
|
|
table {
|
|
@include table-scroll;
|
|
}
|
|
|
|
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 {
|
|
color: $text-medium;
|
|
content: "#";
|
|
display: none;
|
|
left: 0;
|
|
position: absolute;
|
|
|
|
@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 {
|
|
color: #696969;
|
|
display: block;
|
|
font-size: $small-font-size;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 0;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
|
|
.icon-banner::before,
|
|
.icon-comments::before {
|
|
display: block;
|
|
margin: rem-calc(24) auto rem-calc(36);
|
|
}
|
|
|
|
.panel-title {
|
|
display: block;
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.calc-text {
|
|
border-right: 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 {
|
|
background: #f9f9f9;
|
|
border: 1px solid $border;
|
|
display: block;
|
|
margin-bottom: rem-calc(32);
|
|
padding: rem-calc(4);
|
|
|
|
.button {
|
|
font-size: $small-font-size;
|
|
padding: rem-calc(10) rem-calc(20);
|
|
}
|
|
|
|
.publish-comment {
|
|
float: right;
|
|
}
|
|
|
|
.comment-header {
|
|
border-bottom: 1px solid $border;
|
|
margin-bottom: rem-calc(16);
|
|
padding-bottom: rem-calc(8);
|
|
}
|
|
|
|
.comments-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.comment-input {
|
|
border-bottom: 1px solid $border;
|
|
margin-bottom: rem-calc(16);
|
|
margin-top: rem-calc(16);
|
|
padding-bottom: rem-calc(64);
|
|
|
|
textarea {
|
|
border-bottom: 1px solid #d0d0d0;
|
|
border-left: 1px solid #d0d0d0;
|
|
border-radius: 0;
|
|
border-right: 1px solid #d0d0d0;
|
|
box-shadow: none;
|
|
height: rem-calc(200);
|
|
margin-bottom: rem-calc(8);
|
|
width: 100%;
|
|
}
|
|
|
|
.comment-actions {
|
|
.cancel-comment {
|
|
color: #87a3b9;
|
|
display: inline-block;
|
|
font-size: $small-font-size;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment {
|
|
border-bottom: 1px solid $border;
|
|
font-size: $small-font-size;
|
|
margin-bottom: rem-calc(16);
|
|
padding-bottom: calc($line-height / 2);
|
|
|
|
.comment-text {
|
|
margin-bottom: rem-calc(8);
|
|
|
|
p {
|
|
font-size: $small-font-size;
|
|
line-height: 1.5;
|
|
|
|
&:last-child {
|
|
margin-bottom: rem-calc(8);
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-meta {
|
|
|
|
.comment-more-info {
|
|
display: inline-block;
|
|
|
|
.comment-expand {
|
|
display: inline-block;
|
|
|
|
&::after {
|
|
color: #838383;
|
|
content: "|";
|
|
}
|
|
}
|
|
|
|
.comment-replies {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.comment-votes {
|
|
color: #838383;
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 06. Legislation changes
|
|
// -----------------
|
|
|
|
.legislation-changes {
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
|
|
li {
|
|
margin-bottom: rem-calc(16);
|
|
|
|
&::before {
|
|
content: "—";
|
|
margin-right: rem-calc(4);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 07. Legislation comments
|
|
// -----------------
|
|
|
|
.legislation-comments {
|
|
|
|
.comment-section {
|
|
background: #fafafa;
|
|
border: 1px solid #dee0e3;
|
|
margin-bottom: rem-calc(16);
|
|
margin-top: rem-calc(4);
|
|
padding: rem-calc(16);
|
|
}
|
|
|
|
.comment {
|
|
margin-bottom: rem-calc(48);
|
|
|
|
.expand-context a {
|
|
span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.icon-expand {
|
|
color: #999;
|
|
line-height: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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;
|
|
border: 1px solid #dee0e3;
|
|
margin-bottom: rem-calc(16);
|
|
margin-top: rem-calc(4);
|
|
padding: rem-calc(16);
|
|
}
|
|
|
|
.comment {
|
|
|
|
a {
|
|
span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.icon-expand,
|
|
.icon-comments {
|
|
color: #999;
|
|
line-height: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.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: calc($line-height / 2);
|
|
}
|
|
}
|
|
|
|
.question-title:not(:only-child) {
|
|
margin-bottom: calc($line-height / 2);
|
|
}
|
|
|
|
.annotation-title {
|
|
margin-bottom: calc($line-height / 2);
|
|
margin-top: calc($line-height / 2);
|
|
}
|
|
|
|
.annotation-quote {
|
|
border: 1px solid $black;
|
|
padding: rem-calc(10);
|
|
}
|
|
|
|
.comment-summary {
|
|
margin-bottom: calc($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%);
|
|
}
|
|
}
|