// ---- 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; } }