// ---- Functions
.group() {
&:after {
content: "";
display: table;
clear: both;
}
}
// ---- Variables
// Colours
@brookings: #20558A;
@blue: #0D73D6;
@blue-med: #0066C4;
@blue-dark: #0A4C8C;
@blue-very-dark: #030814;
@red: #DC2A2A;
@red-light: #F64747;
@white: #FFF;
@gray-very-light: #FAFAFA;
@gray-light: #ECECEC;
@gray: #D8D8D8;
@gray-normal: #999;
@gray-dark: #5C5C5C;
@gray-medium-dark: #434343;
@gray-very-dark: #4C4C4C;
@black: #101010;
@yellow: #FFCF1A;
// Font
@meta: 'franklin-gothic-urw', helvetica, sans-serif; // 400, 600, 700
@heading: 'franklin-gothic-urw-cond';//, helvetica, sans-serif; // 400, 500, 700
@body: 'PT Serif', Times, serif; // 400, 700, 400 Italic, 700 Italic
// Interactive
@regulation-height: 4.2rem;
.csv-url-wrapper {
display:none;
}
.regulations-tracker {
// Small reset to enforce the following CSS Box Model
&, *, *::before, *::after {
box-sizing: border-box;
position: relative;
}
// --- Layout
font-family: @meta;
font-size: 16px;
line-height: 1.3;
max-width: 1000px;
margin: 2rem auto;
width: 95vw;
h2 {
font-size: 2em;
font-weight: 700;
text-align: center;
}
h4 {
font-weight: 700;
font-size: 1.1em;
}
span.icon-external-link {
display: none !important;
}
// --- Regulations
.regulations {
margin-top: 2rem;
}
.list--empty::after {
content: 'There are no regulations matching your criteria.';
text-align: center;
display: block;
margin-top: 2rem;
font-size: 1.5em;
font-weight: 700;
}
// --- Single regulation
.reg,
.header {
border-style: solid;
.group;
}
.reg { border-top-width: 1px; }
@media (min-width: 900px){
.reg,
.header {
padding-left: .5%;
border-color: @gray-dark;
}
.header,
.reg:last-of-type {
border-bottom-width: 1px;
}
}
@media (max-width: 899px) {
.header { display: none }
.reg { margin-top: 1em }
}
// --- Elements in the regulations
.reg__action,
.reg__name,
.reg__category,
.reg__agency,
.reg__status,
.reg__updated,
.header > * {
display: inline-block;
float: left;
padding-left: .5em;
}
.reg__name {
font-weight: 600;
line-height: 1.2;
}
@media (min-width: 900px) {
.reg__action,
.reg__name,
.reg__category,
.reg__agency,
.reg__status,
.reg__updated,
.header > * {
float: left;
height: @regulation-height;
}
}
@media (max-width: 899px) {
.reg__action { float: right }
.reg__name { margin-top: .5rem }
// Show the name of the fields
.reg__agency,
.reg__category,
.reg__status,
.reg__updated {
margin-top: .75rem;
span::before,
time::before {
color: @gray-normal;
content: attr(data-title);
display: block;
font-size: .6rem;
position: absolute;
top: -1em;
width: 100%;
}
}
}
@media (max-width: 600px) {
.reg__agency { display: none }
}
@media (max-width: 400px) {
.reg__category,
.reg__status,
.reg__updated {
font-size: 4vw;
}
}
// Show or hide elements based on type of documents
.reg:not(.reg--non-rule) .reg__other { display: none; } // Hide the other info
.reg.reg--non-rule .reg__rules { display: none; } // Hide the rules
// --- Center vertically and horizontally
.reg > :not(.reg__info) {
& > * {
display: block;
// On desktop center vertically
@media ( min-width: 900px ) {
top: 50%;
transform: translateY( -50% );
}
// On smaller screen just basic padding
@media ( min-width: 550px ) and ( max-width: 899px ) {
padding-top: .5em;
padding-bottom: .5em;
}
// On smaller screen just basic padding
@media ( max-width: 549px ) {
padding-top: .25em;
padding-bottom: .25em;
}
}
}
// --- Dimensions
.reg__action { width: 3%; }
.reg__name { width: 41%; }
.reg__category { width: 15%; }
.reg__agency { width: 14%; }
.reg__status { width: 14%; }
.reg__updated { width: 12%; }
@media ( max-width: 899px ) {
.reg__action { width: 2rem }
.reg__name { width: calc( ~' 100% - 2rem '); }
.reg__agency { width: 25% }
.reg__category { width: 30% }
.reg__status { width: 25% }
.reg__updated { width: 20% }
}
@media (max-width: 600px) {
.reg__category { width: 33% }
.reg__status { width: 33% }
.reg__updated { width: 27% }
}
// --- Header
.header > * {
font-size: .9em;
height: 1.5rem;
}
// To keep the header action aligned with the rest of the column
.header .reg__action {
left: -1%;
}
.header .reg__name {
text-align: left;
}
.sort {
font-weight: 700;
font-size: .88em;
}
.sort.asc,
.sort.desc {
*::after {
content: '\0A';
position: absolute;
top: .4em;
width: .5em;
height: .5em;
margin-left: .5em;
border-style: solid;
border-color: transparent;
}
}
.sort.asc *::after {
border-top-color: inherit;
border-width: .5em .35em 0 .35em;
}
.sort.desc *::after {
border-bottom-color: inherit;
border-width: 0 .35em .5em .35em;
}
// --- Action Button
.reg .reg__action { padding: 0; }
.list .reg__action span {
// background-color: @gray-normal;
// border-radius: 50%;
display: block;
// height: 1.25rem;
padding-top: 0;
// width: 1.25rem;
text-align: center;
}
.list .reg__action button {
background-color: transparent;
border: 0;
color: @black;//@gray-very-light;
display: inline-block;
font-size: 1.5rem; //1.25rem;
font-weight: 700;
line-height: .9em;
outline: 0;
padding: 0;
}
.reg:not( .reg--active ) .reg__action__close { display: none; }
.reg.reg--active .reg__action__open { display: none; }
@media ( max-width: 899px ) {
.reg .reg__action {
margin-top: .5rem;
}
}
// --- New
.reg--new {
@media (min-width: 600px) {
&::after {
background-color: rgba(255,255,0,.5);
content: 'New';
display: inline-block;
font-size: .7rem;
left: 0;
padding: .2em .5em;
position: absolute;
top: 0;
}
}
@media (max-width: 599px) {
.reg__name span::after {
background-color: rgba(255,255,0,.5);
bottom: .2em;
content: 'New';
font-size: .7rem;
margin-left: 1em;
padding: .2em .5em;
}
}
}
.reg--new .reg__info__reviews .new {
background-color: rgba(255, 255, 0, .5);
}
// --- Rules
.reg__info__rules {
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
margin-top: 2rem;
position: relative;
z-index: 3;
.group();
@media (min-width: 899px) {
display: inline-block;
float: right;
margin-left: 0;
margin-right: 3rem;
margin-top: 0;
width: 18rem;
}
}
.reg__info__rules__legend {
background-color: @gray-light;
border-radius: 50%;
cursor: pointer;
display: inline-block;
font-size: .9em;
font-weight: 700;
height: 1.25em;
line-height: 1.25em;
position: absolute;
right: -1.3em;
text-align: center;
top: .25em;
width: 1.25em;
z-index: 10;
@media (min-width: 899px) {
right: -2em;
}
}
.reg--non-rule .reg__info__rules__legend {
cursor: none;
display: none;
pointer-events: none;
visibility: hidden;
}
.reg__other {
border: 2px solid @black;
font-weight: 600;
padding: .5em;
text-align: center;
}
@barHeight: 1.5rem;
.reg__rules {
background: linear-gradient(@gray-light 0, @gray-light @barHeight, transparent @barHeight, transparent);
display: inline-block;
float: left;
padding-top: @barHeight + .25em;
position: relative;
text-align: center;
width: calc(~'100% / 3');
}
.reg__rules::before,
.reg__rules[data-status]::after {
left: 0;
font-size: .8em;
position: absolute;
right: 0;
text-align: center;
text-transform: capitalize;
}
// Title of the rule
.reg__rules::before {
top: -1.25em;
font-weight: 600;
}
.reg__rules:nth-of-type(1)::before { content: 'Proposed'; }
.reg__rules:nth-of-type(2)::before { content: 'Final'; }
.reg__rules:nth-of-type(3)::before { content: 'Effective'; }
// Content of the rules
.reg__rules[data-status]::after {
bottom: -1.5em;
content: attr(data-status);
}
.reg__rules[data-status].active::after {
background-color: rgba(153, 255, 153, .9);
}
// Link
.reg__rules a {
border: 0;
color: @black;
cursor: pointer;
font-size: .9em;
text-decoration: none;
}
@media (min-width: 600px) {
.reg__rules a > * { border-bottom: 1px solid @gray; }
.reg__rules a:hover > * { border-bottom: 1px solid @black; }
}
// Progress
.reg__rules__progress {
background-repeat: no-repeat;
background-position: center;
background-size: @barHeight @barHeight;
height: @barHeight;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@trump: rgba(247, 54, 57, .8);
@obama: rgba(104, 178, 232, .8);
@court: @gray-dark;
.reg__rules--trump {
// .reg__rules__progress--progress { background-image: url('data:image/svg+xml;utf8,') }
.reg__rules__progress--progress { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS45NSAyMi4xNSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gc2xpY2UiPjxwb2x5Z29uIGZpbGw9InJnYmEoMjQ3LCA1NCwgNTcsIC44KSIgcG9pbnRzPSIwIDAgMTIuMTkgMCAxOS45NSAxMS4wOCAxMi4xOSAyMi4xNSAxLjAxIDIyLjE1IDcuNzIgMTEuODUgMCAwIiAvPjwvc3ZnPg==') }
// .reg__rules__progress--block { background-image: url('data:image/svg+xml;utf8,') }
.reg__rules__progress--block { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMi44OCAyMi4xNyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gc2xpY2UiPjxwb2x5Z29uIGZpbGw9InJnYmEoMjQ3LCA1NCwgNTcsIC44KSIgcG9pbnRzPSIyMi44OCAwIDE0Ljc1IDAgMTEuNDQgNC45NSA4LjEzIDAgMCAwIDcuMzQgMTEuMDcgMCAyMi4wNCA4LjE3IDIyLjE3IDExLjQ0IDE3LjI0IDE0LjcxIDIyLjE3IDIyLjg4IDIyLjA0IDE1LjUzIDExLjA3IDIyLjg4IDAiIC8+PC9zdmc+') }
}
.reg__rules--obama {
// .reg__rules__progress--progress { background-image: url('data:image/svg+xml;utf8,') }
.reg__rules__progress--progress { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS45NSAyMi4xNSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gc2xpY2UiPjxwb2x5Z29uIGZpbGw9InJnYmEoMTA0LCAxNzgsIDIzMiwgLjgpIiBwb2ludHM9IjAgMCAxMi4xOSAwIDE5Ljk1IDExLjA4IDEyLjE5IDIyLjE1IDEuMDEgMjIuMTUgNy43MiAxMS44NSAwIDAiIC8+PC9zdmc+') }
// .reg__rules__progress--block { background-image: url('data:image/svg+xml;utf8,') }
.reg__rules__progress--block { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMi44OCAyMi4xNyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gc2xpY2UiPjxwb2x5Z29uIGZpbGw9InJnYmEoMTA0LCAxNzgsIDIzMiwgLjgpIiBwb2ludHM9IjIyLjg4IDAgMTQuNzUgMCAxMS40NCA0Ljk1IDguMTMgMCAwIDAgNy4zNCAxMS4wNyAwIDIyLjA0IDguMTcgMjIuMTcgMTEuNDQgMTcuMjQgMTQuNzEgMjIuMTcgMjIuODggMjIuMDQgMTUuNTMgMTEuMDcgMjIuODggMCIgLz48L3N2Zz4=') }
}
.reg__rules--court {
// .reg__rules__progress--progress { background-image: url('data:image/svg+xml;utf8,') }
.reg__rules__progress--progress { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS45NSAyMi4xNSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gc2xpY2UiPjxwb2x5Z29uIGZpbGw9IiM1QzVDNUMiIHBvaW50cz0iMCAwIDEyLjE5IDAgMTkuOTUgMTEuMDggMTIuMTkgMjIuMTUgMS4wMSAyMi4xNSA3LjcyIDExLjg1IDAgMCIgLz48L3N2Zz4=') }
// .reg__rules__progress--block { background-image: url('data:image/svg+xml;utf8,') }
.reg__rules__progress--block { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMi44OCAyMi4xNyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gc2xpY2UiPjxwb2x5Z29uIGZpbGw9IiM1QzVDNUMiIHBvaW50cz0iMjIuODggMCAxNC43NSAwIDExLjQ0IDQuOTUgOC4xMyAwIDAgMCA3LjM0IDExLjA3IDAgMjIuMDQgOC4xNyAyMi4xNyAxMS40NCAxNy4yNCAxNC43MSAyMi4xNyAyMi44OCAyMi4wNCAxNS41MyAxMS4wNyAyMi44OCAwIiAvPjwvc3ZnPg==') }
}
// --- Information
.reg__info {
width: 100%;
max-height: 0;
overflow: hidden;
transition: max-height 100ms ease;
}
.reg__info li {
margin-bottom: 3em;
margin-left: 4%;
margin-right: 1rem;
}
.reg--active .reg__info {
height: auto;
// transition: max-height 500ms ease;
max-height: none;//100em;
}
.reg__info p {
margin-top: 1rem;
}
.reg__info__reviews {
line-height: 1.33;
margin-bottom: 1rem;
width: 100%;
@media (min-width: 899px) {
columns: 25em;
font-size: .9em;
}
}
.reg__info__reviews .status.active {
background-color: rgba(153, 255, 153, .9);
}
.reg__info__reviews a {
border-bottom: 1px dotted @black;
color: @black;
text-decoration: none;
&:hover,
&:focus {
border-bottom-style: solid;
text-decoration: none;
}
}
.reg__info__name {
max-width: 24rem;
font-size: 1.1em;
font-style: italic;
}
.reg__info li:first-of-type .reg__info__title {
display: none;
}
.reg__info__title {
font-weight: 700;
}
// --- Filters
.filters {
background-color: @gray-light;
font-size: 1.1em;
margin-bottom: 2em;
margin-top: 2em;
padding: .5em 1em;
.group;
}
.filters__title {
text-transform: capitalize;
@media (min-width: 900px) {
display: inline-block;
margin-right: 1rem;
}
}
[for=filter--noteworthy],
.filters__checkbox {
margin-left: 1em;
}
.filters__button {
background-color: @gray-very-dark;
border: 0;
border-radius: 5px;
color: @white;
font-size: .9em;
font-weight: 600;
margin-left: .5rem;
outline: 0;
text-transform: capitalize;
}
.filters__button:hover { background-color: @gray-dark; }
.filters__button:active { background-color: @black; }
.filters__options {
background-color: @gray-very-light;
border-radius: 5px;
font-size: .9em;
min-width: 8rem;
}
.filters__search input {
border-radius: 5px 0 0 5px;
border-width: 1px;
border-color: @gray;
font-size: .9em;
height: 100%;
line-height: 1;
margin: 0;
padding: .15em .5em;
width: calc( ~'99% - 1.5rem');
}
.icon-search {
background-color: @gray-very-dark;
border-radius: 0 5px 5px 0;
display: inline-block;
height: 1.42em;
margin: 0;
padding: .25em;
vertical-align: bottom;
width: 1.5rem;
svg {
display: block;
fill: @white;
height: 90%;
top: 0;
width: 90%;
}
}
.filters__search input,
.icon-search {
float: left;
}
// On desktop
@media ( min-width: 900px ) {
.filters__options:not(:last-of-type) {
margin-right: 1rem;
}
.filters__search {
float: right;
width: 12em;
}
}
// On mobile
@media ( max-width: 899px ) {
.filters__search,
.filters__options {
margin-top: 1rem;
}
.filters__label,
.filters__options {
display: inline-block;
margin-bottom: 1em;
margin-left: 0;
}
.filters__title {
font-size: 1rem;
font-weight: 700;
}
.filters__button {
display: block;
margin-bottom: 1rem;
margin-left: 0;
padding: .5em 1em;
}
}
// --- Status tooltip
.definition {
display: none;
background-color: @gray-very-light;
border: 1px solid @gray-normal;
box-shadow: 0 2px 5px @gray;
color: @gray-medium-dark;
font-size: .8em;
max-width: 12rem;
padding: .5em .6em;
pointer-events: none;
position: absolute;
right: 0;
transform: translate(-50%, -90%);
width: 100%;
z-index: 50;
}
.definition.active {
display: inline-block;
}
// --- Rules legend
.legend {
box-shadow: 0 2px 10px @gray;
display: none;
left: 50%;
max-width: 90vw;
pointer-events: none;
position: absolute;
transform: translate(-50%, -50%);
width: 700px;
z-index: 50;
}
.legend.active {
display: inline-block;
}
}