701378d02c
Instead of adding the padding to each individual element inside the container, why not adding padding to the container itself? The answer is "because we want the background of the children elements to take the width of the whole screen". But this generates either HTML cluttered with elements to add padding or repetitive padding definitions in the CSS. So now we only define the padding once, and when an element requires a full width background or border, we use the `full-width-background` mixin. In this case the code is a bit more complex because the header is also used in the dashboard and admin layouts: * In the public layout, the body has a margin, so we include the mixin to take margin into account * In the dashboard layout, the header itself has a margin, so we include the same mixin * In the admin layout, the headet doesn't have a margin but gets the whole width, so in this case we include the mixin which dosen't take the margin into account In the future, the idea is to apply this principle to the <body> element and remove the `@include grid-column-gutter` in the CSS as well as the `small-12 column` classes in the HTML. Note we use the `calc()` function inside the mixin instead of using it in the `$full-width-margin` variable. That way we avoid nested `calc()` operations, which don't work in Internet Explorer. Also note we're using `flex-grow: 1` to make one element appear on the left of the screen and the other one on the right. It would be easier to use `justify-content: space-between` (which is actually the default for the top-bar element). However, there's a bug in Internet Explorer and old versions of Firefox; they include the absolutely-positioned `::before` element we use to set the full width background when calculating where to position the elements. The bug was fixed in Firefox 52 (released in 2017). Finally, we're removing the padding from our logo. In order to allow logos like the new one and at the same time provide backwards compatibility to logos in existing CONSUL installations, we're relaxing the validation rule for the logo width.
2717 lines
40 KiB
SCSS
2717 lines
40 KiB
SCSS
// Table of Contents
|
|
//
|
|
// 01. Global styles
|
|
// 02. Header
|
|
// 03. Footer
|
|
// 04. Tags
|
|
// 05. Auth pages
|
|
// 06. Forms
|
|
// 07. Callout
|
|
// 08. User account
|
|
// 10. Official levels
|
|
// 11. Tables
|
|
// 12. Social
|
|
// 13. Pages
|
|
// 14. Verification
|
|
// 15. Comments
|
|
// 16. Flags
|
|
// 17. Activity
|
|
// 18. Banners
|
|
// 19. Recommendations
|
|
// 20. Documents
|
|
// 21. Related content
|
|
// 22. Images
|
|
// 23. Maps
|
|
// 24. Homepage
|
|
// 25. LocalCensusRecords
|
|
//
|
|
|
|
// 01. Global styles
|
|
// -----------------
|
|
|
|
* {
|
|
@include normal-selection;
|
|
}
|
|
|
|
html {
|
|
font-size: calc(0.25em + Max(0.75em, 0.75vw));
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: $base-font-size;
|
|
min-height: 100%;
|
|
|
|
&.public {
|
|
@include breakpoint($global-width) {
|
|
margin-left: $body-margin;
|
|
margin-right: $body-margin;
|
|
}
|
|
}
|
|
|
|
> .wrapper {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
clear: both;
|
|
font-weight: 700;
|
|
}
|
|
|
|
p {
|
|
font-size: $base-font-size;
|
|
font-weight: 400;
|
|
line-height: $base-line;
|
|
}
|
|
|
|
a {
|
|
color: $link;
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: $link-hover;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:focus {
|
|
color: $link-hover;
|
|
outline: $outline-focus;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@extend %button;
|
|
@include inverted-selection;
|
|
background: $brand;
|
|
|
|
&.warning,
|
|
&.warning:hover {
|
|
color: #000;
|
|
}
|
|
|
|
&.medium {
|
|
font-size: $small-font-size;
|
|
}
|
|
}
|
|
|
|
.button.hollow {
|
|
@include normal-selection;
|
|
border: 1px solid;
|
|
color: $link;
|
|
}
|
|
|
|
.button.hollow.error {
|
|
border-color: $alert-border;
|
|
color: $color-alert;
|
|
}
|
|
|
|
.postfix.button {
|
|
padding: 0;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.inline-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.aling-middle {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.sidebar-divider {
|
|
border-top: 1px solid $border;
|
|
margin-top: $line-height;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.margin {
|
|
margin-bottom: $line-height;
|
|
margin-top: $line-height;
|
|
}
|
|
|
|
.margin-top {
|
|
margin-top: $line-height;
|
|
}
|
|
|
|
.margin-bottom {
|
|
margin-bottom: $line-height;
|
|
}
|
|
|
|
.margin-left {
|
|
margin-left: $line-height;
|
|
}
|
|
|
|
.margin-right {
|
|
margin-right: $line-height;
|
|
}
|
|
|
|
.float-right-medium {
|
|
|
|
@include breakpoint(medium) {
|
|
float: right !important;
|
|
}
|
|
}
|
|
|
|
.no-margin-top {
|
|
margin-top: rem-calc(-24);
|
|
}
|
|
|
|
.padding {
|
|
padding-bottom: $line-height;
|
|
padding-top: $line-height;
|
|
}
|
|
|
|
.padding-top {
|
|
padding-top: $line-height;
|
|
}
|
|
|
|
.light {
|
|
background: $light;
|
|
}
|
|
|
|
.highlight {
|
|
background: $highlight;
|
|
}
|
|
|
|
.icon-check {
|
|
color: $check;
|
|
}
|
|
|
|
.ie-callout {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
.close {
|
|
font-size: rem-calc(34);
|
|
top: 20%;
|
|
}
|
|
}
|
|
|
|
.menu.simple {
|
|
border-bottom: 1px solid $border;
|
|
clear: both;
|
|
margin-bottom: $line-height / 2;
|
|
|
|
li {
|
|
font-size: $base-font-size;
|
|
margin-bottom: 0;
|
|
margin-right: $line-height / 2;
|
|
|
|
@include breakpoint(medium) {
|
|
margin-right: $line-height * 1.5;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
position: relative;
|
|
text-align: left;
|
|
|
|
&:hover {
|
|
color: $link;
|
|
}
|
|
}
|
|
|
|
+ li {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.is-active {
|
|
@include brand-text;
|
|
border-bottom: 2px solid;
|
|
padding-bottom: rem-calc(1);
|
|
}
|
|
|
|
&:not(.is-active) {
|
|
margin-bottom: $line-height / 3;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: $base-font-size;
|
|
}
|
|
}
|
|
|
|
.menu.vertical {
|
|
margin: $line-height 0;
|
|
padding: $line-height 0;
|
|
|
|
li {
|
|
margin-bottom: $line-height;
|
|
|
|
a {
|
|
color: $text-medium;
|
|
padding: 0;
|
|
|
|
&.is-active {
|
|
@include brand-text;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: $base-font-size;
|
|
}
|
|
|
|
&.is-active {
|
|
@include brand-text;
|
|
border-bottom: 2px solid;
|
|
}
|
|
}
|
|
|
|
&.no-margin-top {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&.no-padding-top {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.small {
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.logo {
|
|
@include logo;
|
|
}
|
|
|
|
.close-button {
|
|
top: $line-height / 2;
|
|
}
|
|
|
|
.back,
|
|
.icon-angle-left {
|
|
clear: both;
|
|
color: $text-medium;
|
|
display: inline-block;
|
|
padding-right: $line-height / 2;
|
|
}
|
|
|
|
.back:not([class^="icon-"]) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tabs-content {
|
|
border: 0;
|
|
}
|
|
|
|
.tabs {
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
margin-bottom: $line-height;
|
|
|
|
.tabs-title {
|
|
font-size: $base-font-size;
|
|
margin-right: $line-height;
|
|
}
|
|
|
|
.tabs-title > a {
|
|
color: $text-medium;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
@include brand-text;
|
|
background: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&[aria-selected="true"],
|
|
&.is-active {
|
|
@include brand-text;
|
|
border-bottom: 0;
|
|
font-weight: bold;
|
|
|
|
&::after {
|
|
border-bottom: 2px solid;
|
|
bottom: 0;
|
|
content: "";
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
font-size: $base-font-size;
|
|
}
|
|
}
|
|
|
|
.button.float-right ~ .button.float-right {
|
|
margin: 0 $line-height / 2;
|
|
}
|
|
|
|
.pagination .current {
|
|
@extend %brand-background;
|
|
}
|
|
|
|
.pagination li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.truncate-horizontal-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.align-top {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.align-middle {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table {
|
|
display: table;
|
|
}
|
|
|
|
.table-cell {
|
|
display: table-cell;
|
|
}
|
|
|
|
.uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.help-text {
|
|
line-height: rem-calc(20);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.menu-and-content {
|
|
$side-menu-min-width: rem-calc(240);
|
|
|
|
@include breakpoint(medium) {
|
|
display: flex;
|
|
|
|
> nav {
|
|
flex: 20%;
|
|
min-width: $side-menu-min-width;
|
|
|
|
+ * {
|
|
flex: 80%;
|
|
padding: $line-height;
|
|
}
|
|
}
|
|
|
|
[for="show_menu"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(small only) {
|
|
> nav {
|
|
height: 100%;
|
|
left: -$side-menu-min-width;
|
|
overflow-y: auto;
|
|
position: fixed;
|
|
top: 0;
|
|
transition: left 0.5s ease;
|
|
width: $side-menu-min-width;
|
|
z-index: 12;
|
|
|
|
+ * {
|
|
padding: $line-height;
|
|
}
|
|
}
|
|
|
|
[name="show_menu"]:checked + nav,
|
|
> nav:focus-within {
|
|
left: 0;
|
|
|
|
+ * {
|
|
overflow-x: hidden;
|
|
|
|
[for="show_menu"]::after {
|
|
@include reveal-overlay;
|
|
content: "";
|
|
cursor: pointer;
|
|
display: block;
|
|
z-index: 11;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[name="show_menu"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// 02. Header
|
|
// ----------
|
|
|
|
body > header,
|
|
.wrapper > header {
|
|
@include grid-column-gutter;
|
|
margin-bottom: $line-height;
|
|
|
|
@include breakpoint(small down) {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.selected {
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
.remote-translations-button {
|
|
|
|
&.callout {
|
|
margin: 0;
|
|
padding: rem-calc(6);
|
|
|
|
[type="submit"] {
|
|
@include brand-text;
|
|
background: none;
|
|
border: 0;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.external-links {
|
|
padding: rem-calc(6) 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.public > .wrapper > header,
|
|
.proposal-dashboard > header {
|
|
@include full-width-border(bottom, 1px solid $border);
|
|
|
|
> * {
|
|
@include full-width-background($adjust-padding: true);
|
|
}
|
|
|
|
.top-bar {
|
|
@extend %brand-background;
|
|
}
|
|
}
|
|
|
|
.proposal-dashboard > header {
|
|
|
|
@include breakpoint($global-width) {
|
|
margin-left: $body-margin;
|
|
margin-right: $body-margin;
|
|
}
|
|
}
|
|
|
|
.top-bar {
|
|
background-color: inherit;
|
|
padding: 0;
|
|
|
|
@include breakpoint(medium) {
|
|
justify-content: flex-start;
|
|
|
|
.top-bar-title {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
background: none;
|
|
}
|
|
|
|
.menu > li {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
@include breakpoint(medium) {
|
|
width: auto;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
padding-left: 0;
|
|
|
|
@include breakpoint(medium) {
|
|
font-size: $small-font-size;
|
|
padding: rem-calc(11) rem-calc(16);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
background: none;
|
|
text-align: left;
|
|
|
|
@include breakpoint(medium) {
|
|
@include brand-text;
|
|
background: $body-background;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.has-submenu {
|
|
|
|
&.is-active a {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
|
|
&.is-dropdown-submenu {
|
|
background: $body-background;
|
|
color: $text;
|
|
margin: 0;
|
|
margin-top: rem-calc(-12);
|
|
padding: 0;
|
|
z-index: 9;
|
|
}
|
|
|
|
.is-submenu-item {
|
|
display: block;
|
|
height: auto;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.top-bar-title {
|
|
line-height: $line-height;
|
|
margin-right: 0;
|
|
|
|
a img {
|
|
height: rem-calc(48);
|
|
margin: 0;
|
|
width: auto;
|
|
|
|
@include breakpoint(medium up) {
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-button {
|
|
border: 1px solid;
|
|
border-radius: $button-radius;
|
|
color: inherit;
|
|
padding: 0.6em;
|
|
}
|
|
|
|
.menu-icon {
|
|
@include hamburger($color: currentcolor, $color-hover: currentcolor);
|
|
cursor: inherit;
|
|
}
|
|
|
|
.title-bar {
|
|
background: none;
|
|
float: right;
|
|
}
|
|
|
|
.dropdown.menu > li {
|
|
|
|
a {
|
|
background: none;
|
|
}
|
|
|
|
&.is-active > a {
|
|
color: inherit;
|
|
}
|
|
|
|
&.is-dropdown-submenu-parent > a::after {
|
|
border-top-color: currentcolor;
|
|
}
|
|
}
|
|
|
|
.top-links {
|
|
background: $dark;
|
|
color: $white;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: $small-font-size;
|
|
|
|
> :first-child {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
margin: 0 rem-calc(6);
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
li {
|
|
display: block;
|
|
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
|
|
&::after {
|
|
content: "|";
|
|
}
|
|
|
|
&:last-child::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.subnavigation {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include breakpoint(medium) {
|
|
background: $body-background;
|
|
color: $text;
|
|
flex-direction: row;
|
|
padding-bottom: 0;
|
|
|
|
> :first-child {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
|
|
li {
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
margin-right: rem-calc(20);
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: $line-height * 2;
|
|
position: relative;
|
|
text-align: left;
|
|
width: 100%;
|
|
|
|
@include breakpoint(medium) {
|
|
display: block;
|
|
font-weight: bold;
|
|
width: auto;
|
|
|
|
&:hover {
|
|
color: $link;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
z-index: 1;
|
|
}
|
|
|
|
&.is-active {
|
|
color: #fff;
|
|
|
|
@include breakpoint(medium) {
|
|
@include brand-text;
|
|
border-bottom: 2px solid;
|
|
margin-bottom: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-group {
|
|
padding-top: $line-height / 4;
|
|
|
|
@include breakpoint(medium) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.input-group-field {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.input-group-button {
|
|
line-height: $line-height * 1.5;
|
|
padding-bottom: 0;
|
|
|
|
button {
|
|
background: $border;
|
|
border: 1px solid #ccc;
|
|
border-left: 0;
|
|
color: $text;
|
|
height: $line-height * 1.5;
|
|
line-height: $line-height * 1.5;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
input {
|
|
height: $line-height * 1.5 !important;
|
|
margin-bottom: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.top-bar-right {
|
|
|
|
.is-active {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.submenu {
|
|
border-bottom: 1px solid $border;
|
|
clear: both;
|
|
margin-bottom: $line-height / 2;
|
|
|
|
a {
|
|
color: inherit;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
margin-right: $line-height / 2;
|
|
position: relative;
|
|
text-align: left;
|
|
|
|
@include breakpoint(medium) {
|
|
margin-right: $line-height;
|
|
}
|
|
|
|
&:hover {
|
|
color: $link;
|
|
}
|
|
}
|
|
|
|
.is-active {
|
|
@include brand-text;
|
|
border-bottom: 2px solid;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: $base-font-size;
|
|
}
|
|
}
|
|
|
|
.search-form-header [type=text] {
|
|
max-width: none;
|
|
}
|
|
|
|
// 03. Footer
|
|
// ----------
|
|
|
|
footer {
|
|
.logo {
|
|
color: inherit;
|
|
}
|
|
|
|
.logo a {
|
|
font-family: "Lato" !important;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: $small-font-size;
|
|
|
|
&.info a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
a,
|
|
a:active,
|
|
a:focus {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
color: $text-medium;
|
|
}
|
|
}
|
|
|
|
.footer-sections {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background: #f1f1f1;
|
|
clear: both;
|
|
margin-top: $line-height * 2;
|
|
padding-bottom: $line-height;
|
|
padding-top: $line-height;
|
|
|
|
.public & {
|
|
@include full-width-background;
|
|
}
|
|
}
|
|
|
|
.subfooter {
|
|
border-top: 1px solid $text-light;
|
|
font-size: $small-font-size;
|
|
padding-top: $line-height / 2;
|
|
}
|
|
|
|
// 04. Tags
|
|
// --------
|
|
|
|
.tag-cloud a,
|
|
.categories a,
|
|
.geozone a,
|
|
.sidebar-links a {
|
|
@extend %tag;
|
|
}
|
|
|
|
.categories a,
|
|
.geozone a {
|
|
background: $highlight;
|
|
color: $link;
|
|
|
|
&:hover,
|
|
&.is-active {
|
|
@extend %brand-background;
|
|
}
|
|
}
|
|
|
|
.sidebar-map {
|
|
|
|
.map {
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
.sidebar-title {
|
|
border-top: 2px solid $brand;
|
|
display: inline-block;
|
|
font-size: rem-calc(16);
|
|
font-weight: bold;
|
|
margin: -1px 0 $line-height / 2;
|
|
padding-top: $line-height / 4;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
// 05. Auth pages
|
|
// --------------
|
|
|
|
.auth-page {
|
|
|
|
.footer {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.auth-image {
|
|
background: $brand image-url("auth_bg.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
color: $white;
|
|
|
|
@include breakpoint(medium) {
|
|
min-height: $line-height * 42;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: $line-height;
|
|
|
|
a {
|
|
color: inherit;
|
|
display: block;
|
|
text-align: center;
|
|
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.auth-form {
|
|
|
|
@include breakpoint(medium) {
|
|
padding-top: $line-height * 4;
|
|
}
|
|
|
|
p,
|
|
a,
|
|
.checkbox {
|
|
font-size: $small-font-size;
|
|
}
|
|
}
|
|
|
|
.auth-divider {
|
|
border-top: 1px solid $border;
|
|
margin-top: $line-height * 1.5;
|
|
text-align: center;
|
|
|
|
span {
|
|
background: $body-background;
|
|
box-decoration-break: clone;
|
|
font-weight: bold;
|
|
padding: 0 $line-height / 2;
|
|
position: relative;
|
|
top: -$line-height / 2;
|
|
}
|
|
}
|
|
|
|
// 06. Forms
|
|
// ---------
|
|
|
|
form {
|
|
|
|
label {
|
|
font-size: $base-font-size;
|
|
font-weight: bold;
|
|
line-height: $line-height;
|
|
}
|
|
|
|
fieldset legend {
|
|
font-weight: bold;
|
|
}
|
|
|
|
[type="radio"] {
|
|
height: $line-height !important;
|
|
vertical-align: top;
|
|
|
|
+ label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
&:checked + label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
[type]:not([type="button"], [type=checkbox], [type=file], [type=radio], [type=submit]) {
|
|
background: #f8f8f8;
|
|
height: $input-height;
|
|
margin-bottom: rem-calc(16);
|
|
|
|
&.error {
|
|
margin-bottom: rem-calc(1);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: $input-background-disabled;
|
|
}
|
|
}
|
|
|
|
[type="checkbox"] + label,
|
|
[type="radio"] + label {
|
|
margin-right: 0;
|
|
}
|
|
|
|
[type=file] {
|
|
margin: $line-height / 2 0 $line-height / 2 $line-height / 4;
|
|
}
|
|
|
|
.cke {
|
|
margin-bottom: $line-height;
|
|
}
|
|
|
|
.html-area:not(.form-error) {
|
|
height: 272px;
|
|
margin-bottom: $line-height;
|
|
|
|
&.admin {
|
|
height: 572px;
|
|
}
|
|
}
|
|
|
|
.checkbox,
|
|
.radio {
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
line-height: $line-height;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.translatable-fields {
|
|
|
|
&.highlight {
|
|
display: inline-block;
|
|
padding-top: $line-height;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.translation-locale {
|
|
padding-top: $line-height;
|
|
}
|
|
|
|
// 07. Callout
|
|
// -----------
|
|
|
|
.callout-slide {
|
|
animation-duration: 1s;
|
|
animation-fill-mode: both;
|
|
animation-name: slide;
|
|
}
|
|
|
|
@keyframes slide {
|
|
from {
|
|
transform: translate3d(100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.notice-container {
|
|
min-width: $line-height * 12;
|
|
right: 24px;
|
|
top: 24px;
|
|
|
|
@include breakpoint(medium) {
|
|
position: absolute;
|
|
}
|
|
|
|
.notice {
|
|
height: $line-height * 4;
|
|
|
|
.notice-text {
|
|
width: 95%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.callout {
|
|
font-size: $small-font-size;
|
|
overflow: hidden;
|
|
|
|
a:not(.button) {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&.success,
|
|
&.notice {
|
|
background-color: $success-bg;
|
|
border-color: $success-border;
|
|
color: $color-success;
|
|
}
|
|
|
|
&.primary {
|
|
background-color: $info-bg;
|
|
border-color: $info-border;
|
|
color: $color-info;
|
|
|
|
a {
|
|
color: $link !important;
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
background-color: $warning-bg;
|
|
border-color: $warning-border;
|
|
color: $color-warning;
|
|
}
|
|
|
|
&.alert,
|
|
&.error {
|
|
background-color: $alert-bg;
|
|
border-color: $alert-border;
|
|
color: $color-alert;
|
|
}
|
|
|
|
.close {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.button {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.no-error {
|
|
background: $success-bg;
|
|
color: $color-success;
|
|
}
|
|
|
|
.error {
|
|
background: $alert-bg;
|
|
color: $color-alert;
|
|
display: inline-block;
|
|
margin: 0 $line-height / 4;
|
|
|
|
a {
|
|
color: $color-alert;
|
|
}
|
|
}
|
|
|
|
.callout {
|
|
|
|
&.highlight,
|
|
&.light {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
// 08. User account
|
|
// ----------------
|
|
|
|
.account {
|
|
|
|
select {
|
|
height: $line-height * 2;
|
|
margin-right: $line-height / 2;
|
|
}
|
|
|
|
.verify-account {
|
|
padding-right: $line-height / 2;
|
|
}
|
|
|
|
.final-votes-info {
|
|
background: $warning-bg;
|
|
border: 1px solid $warning-border;
|
|
color: $color-warning;
|
|
margin-top: $line-height;
|
|
padding: $line-height / 2;
|
|
|
|
ul li {
|
|
margin: $line-height / 2 0;
|
|
}
|
|
|
|
.icon-box {
|
|
color: #d4a26d;
|
|
font-size: rem-calc(120);
|
|
line-height: rem-calc(120);
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar,
|
|
.admin-avatar,
|
|
.moderator-avatar,
|
|
.initialjs-avatar {
|
|
border-radius: rem-calc(1000);
|
|
position: relative;
|
|
}
|
|
|
|
.author-deleted,
|
|
.user-deleted {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
display: inline-block;
|
|
font-size: rem-calc(32);
|
|
line-height: rem-calc(32);
|
|
height: rem-calc(32);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.user-permissions {
|
|
|
|
p {
|
|
span {
|
|
color: $text-medium;
|
|
font-size: rem-calc(12);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin-bottom: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
li {
|
|
font-size: $small-font-size;
|
|
margin-bottom: $line-height / 2;
|
|
|
|
span {
|
|
color: $text-medium;
|
|
font-size: rem-calc(12);
|
|
}
|
|
|
|
.icon-check {
|
|
color: $check;
|
|
}
|
|
|
|
.icon-x {
|
|
color: $delete;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notifications-list {
|
|
position: relative;
|
|
|
|
&::before {
|
|
background: $border;
|
|
content: "";
|
|
height: 100%;
|
|
left: 7px;
|
|
position: absolute;
|
|
top: 2px;
|
|
width: 2px;
|
|
}
|
|
}
|
|
|
|
.notification {
|
|
border: 1px solid $border;
|
|
display: block;
|
|
margin-bottom: $line-height / 4;
|
|
margin-left: $line-height;
|
|
padding: $line-height / 2 $line-height;
|
|
position: relative;
|
|
|
|
@include breakpoint(medium) {
|
|
|
|
.mark-notification {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 12px;
|
|
}
|
|
}
|
|
|
|
&.unread {
|
|
background: $highlight-soft;
|
|
border: 1px solid $highlight;
|
|
|
|
&:hover {
|
|
background: $highlight;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
p:not(.time) {
|
|
color: $link;
|
|
}
|
|
|
|
&::before {
|
|
content: "\43";
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
background: $body-background;
|
|
color: $brand;
|
|
content: "\4d";
|
|
font-family: "icons" !important;
|
|
font-size: $small-font-size;
|
|
height: rem-calc(20);
|
|
left: -24px;
|
|
line-height: rem-calc(20);
|
|
position: absolute;
|
|
text-align: center;
|
|
width: rem-calc(20);
|
|
}
|
|
|
|
p {
|
|
color: $text;
|
|
margin-bottom: 0;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.time {
|
|
font-size: $small-font-size;
|
|
color: $text-medium;
|
|
}
|
|
}
|
|
|
|
// 10. Officials levels
|
|
// --------------------
|
|
|
|
.level-1,
|
|
.level-2,
|
|
.level-3,
|
|
.level-4,
|
|
.level-5,
|
|
.is-author,
|
|
.is-association {
|
|
color: #000;
|
|
}
|
|
|
|
.is-author {
|
|
background: #00a5f1;
|
|
}
|
|
|
|
.is-association {
|
|
background: #e38d83;
|
|
}
|
|
|
|
.level-1 {
|
|
background: #1abc9c;
|
|
}
|
|
|
|
.level-2,
|
|
.level-3,
|
|
.level-4 {
|
|
background: #43ac6a;
|
|
}
|
|
|
|
.level-5 {
|
|
background: #f08a24;
|
|
}
|
|
|
|
// 11. Tables
|
|
// ----------
|
|
|
|
table {
|
|
border: $border;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
|
|
th {
|
|
background: #f8f9fb;
|
|
}
|
|
|
|
tr {
|
|
|
|
td {
|
|
line-height: $line-height;
|
|
padding: $line-height / 2 $line-height / 4;
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
background: $table-background;
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
background: adjust-color($table-background, $red: -3, $green: -1, $blue: -2);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.table-for-mobile {
|
|
|
|
@include breakpoint(medium down) {
|
|
th,
|
|
td {
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 12. Social
|
|
// ----------
|
|
|
|
.button.button-twitter,
|
|
.button.button-facebook,
|
|
.button.button-google,
|
|
.button.button-wordpress {
|
|
color: $text;
|
|
font-weight: bold;
|
|
|
|
&::before {
|
|
font-size: rem-calc(24);
|
|
margin-right: $font-icon-margin;
|
|
}
|
|
}
|
|
|
|
.button.button-twitter {
|
|
@include has-fa-icon(twitter, brands);
|
|
background: #ecf7fc;
|
|
border-left: 3px solid #45b0e3;
|
|
|
|
&::before {
|
|
color: #45b0e3;
|
|
}
|
|
}
|
|
|
|
.social-share-button .ssb-icon {
|
|
background-image: none;
|
|
color: #fff;
|
|
height: $icon-width;
|
|
line-height: $icon-width;
|
|
text-align: center;
|
|
width: $icon-width;
|
|
|
|
&::before {
|
|
font-size: $icon-width / 2;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.ssb-twitter {
|
|
@include has-fa-icon(twitter, brands);
|
|
background: #45b0e3;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: #40a2d1;
|
|
}
|
|
}
|
|
|
|
.button.button-facebook {
|
|
@include has-fa-icon(facebook-f, brands);
|
|
background: #ebeef4;
|
|
border-left: 3px solid #3b5998;
|
|
|
|
&::before {
|
|
color: #3b5998;
|
|
}
|
|
}
|
|
|
|
.ssb-facebook {
|
|
@include has-fa-icon(facebook-f, brands);
|
|
background: #3b5998;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: #354f88;
|
|
}
|
|
}
|
|
|
|
.button.button-google {
|
|
@include has-fa-icon(google, brands);
|
|
background: #fcedea;
|
|
border-left: 3px solid #de4c34;
|
|
|
|
&::before {
|
|
color: #de4c34;
|
|
}
|
|
}
|
|
|
|
.button.button-wordpress {
|
|
@include has-fa-icon(wordpress, brands);
|
|
background: #dcdde3;
|
|
border-left: 3px solid #2f2f33;
|
|
|
|
&::before {
|
|
color: #2f2f33;
|
|
}
|
|
}
|
|
|
|
.ssb-telegram {
|
|
@include has-fa-icon(telegram-plane, brands);
|
|
background: #08c;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: #40a2d1;
|
|
}
|
|
}
|
|
|
|
.ssb-whatsapp_app {
|
|
@include has-fa-icon(whatsapp, brands);
|
|
background: #43d854;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: #43d854;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(medium) {
|
|
|
|
.ssb-telegram,
|
|
.ssb-whatsapp_app {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.share-supported {
|
|
text-align: center;
|
|
|
|
.social-share-button {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
// 13. Pages
|
|
// ---------
|
|
|
|
.help {
|
|
|
|
li {
|
|
border-bottom: 1px solid $border;
|
|
font-weight: bold;
|
|
margin-left: rem-calc(-12);
|
|
position: relative;
|
|
|
|
span {
|
|
color: $text;
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&::after {
|
|
content: none;
|
|
color: $text-medium;
|
|
font-family: "icons" !important;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 24px;
|
|
|
|
@include breakpoint(medium) {
|
|
content: "c";
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
padding: $line-height / 2;
|
|
}
|
|
|
|
a:hover {
|
|
background: $highlight;
|
|
|
|
span {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 14. Verification
|
|
// ----------------
|
|
|
|
.verification {
|
|
|
|
@include breakpoint(medium) {
|
|
.left + .left {
|
|
margin-left: $line-height / 2;
|
|
}
|
|
}
|
|
|
|
.date-of-birth {
|
|
|
|
select {
|
|
float: left;
|
|
width: 30%;
|
|
|
|
@include breakpoint(medium) {
|
|
width: 25%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
height: $line-height * 3;
|
|
|
|
@include breakpoint(medium) {
|
|
height: $line-height * 2;
|
|
}
|
|
|
|
&.success .meter {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.verification-step {
|
|
background: #f6f6f6;
|
|
font-weight: bold;
|
|
line-height: rem-calc(20);
|
|
padding-top: $line-height / 4;
|
|
text-transform: uppercase;
|
|
vertical-align: top;
|
|
|
|
@include breakpoint(medium) {
|
|
line-height: $line-height * 2;
|
|
padding: 0;
|
|
}
|
|
|
|
.number {
|
|
display: block;
|
|
|
|
@include breakpoint(medium) {
|
|
background-color: #fff;
|
|
border-radius: rem-calc(30);
|
|
color: #43ac6a;
|
|
display: inline-block;
|
|
height: rem-calc(30);
|
|
line-height: rem-calc(30);
|
|
vertical-align: middle;
|
|
width: rem-calc(30);
|
|
}
|
|
}
|
|
|
|
&.is-active {
|
|
background: #43ac6a;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.send-letter {
|
|
background: none;
|
|
color: $link;
|
|
|
|
&:hover {
|
|
color: $link-hover;
|
|
}
|
|
}
|
|
|
|
.button + form {
|
|
display: inline-block;
|
|
margin-left: $line-height / 2;
|
|
}
|
|
|
|
.verification-list {
|
|
font-size: rem-calc(13);
|
|
list-style-type: none;
|
|
margin-left: 0;
|
|
|
|
span {
|
|
display: inline-block;
|
|
min-width: $line-height * 12;
|
|
}
|
|
}
|
|
}
|
|
|
|
.verification-step .completed {
|
|
background: #43ac6a;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
|
.number {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.verify-account {
|
|
padding-right: $line-height / 2;
|
|
|
|
.already-verified {
|
|
color: $check;
|
|
line-height: $line-height * 2;
|
|
|
|
.icon-check {
|
|
font-size: rem-calc(24);
|
|
line-height: rem-calc(45);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.verify {
|
|
margin-bottom: $line-height * 2;
|
|
margin-top: $line-height;
|
|
|
|
h1 {
|
|
color: $check;
|
|
|
|
.icon-check {
|
|
line-height: rem-calc(30);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.letter-divider {
|
|
border-top: 1px solid #ddd;
|
|
clear: both;
|
|
height: 0;
|
|
margin: rem-calc(24) 0;
|
|
position: relative;
|
|
|
|
.icon-letter {
|
|
background: $body-background;
|
|
color: $color-info;
|
|
font-size: rem-calc(24);
|
|
margin-left: -27px;
|
|
padding: 0 $line-height / 2;
|
|
position: absolute;
|
|
top: -12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 15. Comments
|
|
// ------------
|
|
|
|
.comments {
|
|
background: $body-background;
|
|
background-repeat: repeat-x;
|
|
padding-bottom: $line-height * 4;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
|
|
span {
|
|
font-size: rem-calc(18);
|
|
font-weight: normal;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.order-links {
|
|
margin-bottom: $line-height;
|
|
margin-top: $line-height;
|
|
}
|
|
|
|
.comment {
|
|
line-height: $list-lineheight;
|
|
margin: $line-height / 4 0;
|
|
position: relative;
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
[class^="icon-"] {
|
|
font-size: $base-font-size;
|
|
text-decoration: none;
|
|
vertical-align: sub;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-body,
|
|
.notification-body {
|
|
|
|
img {
|
|
margin-right: $line-height / 2;
|
|
}
|
|
|
|
.reply {
|
|
border: 1px solid $border;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
font-size: $small-font-size;
|
|
margin: $line-height / 4 0;
|
|
padding: $line-height / 4;
|
|
position: relative;
|
|
|
|
.divider {
|
|
color: $text-light;
|
|
display: inline-block;
|
|
}
|
|
|
|
form {
|
|
margin-top: $line-height / 2;
|
|
}
|
|
}
|
|
|
|
.responses-count {
|
|
.show-children {
|
|
@include has-fa-icon(plus-square, regular);
|
|
}
|
|
|
|
.collapse-children {
|
|
@include has-fa-icon(minus-square, regular);
|
|
}
|
|
|
|
.show-children::before,
|
|
.collapse-children::before {
|
|
margin-right: $font-icon-margin;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
&.collapsed {
|
|
|
|
.collapse-children {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:not(.collapsed) {
|
|
|
|
.show-children {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.delete-comment {
|
|
@include has-fa-icon(trash-alt, regular);
|
|
color: $delete;
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: $link-hover;
|
|
}
|
|
|
|
&::before {
|
|
margin-right: $font-icon-margin;
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
|
|
.comment-user {
|
|
margin-top: $line-height / 4;
|
|
padding: $line-height / 4 0;
|
|
overflow: hidden;
|
|
|
|
&.level-1,
|
|
&.level-2,
|
|
&.level-3,
|
|
&.level-4,
|
|
&.level-5,
|
|
&.is-author,
|
|
&.is-admin,
|
|
&.is-moderator {
|
|
background: rgba(70, 219, 145, 0.3);
|
|
padding: $line-height / 4 $line-height / 2;
|
|
}
|
|
|
|
&.level-1 {
|
|
background: none;
|
|
}
|
|
|
|
&.level-5 {
|
|
background: rgba(255, 241, 204, 1);
|
|
}
|
|
|
|
&.is-author,
|
|
&.is-admin,
|
|
&.is-moderator {
|
|
background: rgba(45, 144, 248, 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-list {
|
|
margin: $line-height / 4 0;
|
|
|
|
.comment-list {
|
|
border-left: 1px dashed $border;
|
|
display: inline-block;
|
|
padding-left: rem-calc(8);
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.comment-form {
|
|
display: none;
|
|
}
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.comment-info {
|
|
color: $text-medium;
|
|
display: inline-block;
|
|
font-size: $small-font-size;
|
|
line-height: rem-calc(32); // Same as avatar height
|
|
|
|
.user-name {
|
|
color: $text;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.comment-votes {
|
|
|
|
a {
|
|
color: $text-light;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
a:hover {
|
|
color: $text-medium;
|
|
text-decoration: none;
|
|
|
|
.icon-like {
|
|
color: $like;
|
|
}
|
|
|
|
.icon-unlike {
|
|
color: $unlike;
|
|
}
|
|
}
|
|
}
|
|
|
|
.faded {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.comment-form {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
// 16. Flags
|
|
// ---------
|
|
|
|
.flag-content {
|
|
|
|
button {
|
|
@include link;
|
|
}
|
|
}
|
|
|
|
.flag-disable,
|
|
.flag-active {
|
|
line-height: 0;
|
|
}
|
|
|
|
.flag-disable {
|
|
color: $text-medium;
|
|
}
|
|
|
|
.flag-active {
|
|
color: $delete;
|
|
}
|
|
|
|
.dropdown-pane a {
|
|
color: $text-medium;
|
|
}
|
|
|
|
// 17. Activity
|
|
// ------------
|
|
|
|
.activity {
|
|
|
|
.retired {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.public-interests {
|
|
|
|
li {
|
|
margin-right: $line-height / 4;
|
|
|
|
span {
|
|
background: none;
|
|
border: 1px solid #ececec;
|
|
}
|
|
}
|
|
}
|
|
|
|
.following {
|
|
|
|
.follow-list {
|
|
list-style-type: circle;
|
|
padding: $line-height / 2;
|
|
|
|
li {
|
|
margin-bottom: $line-height / 2;
|
|
margin-left: $line-height;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: rem-calc(24);
|
|
margin-top: $line-height;
|
|
padding-left: rem-calc(30);
|
|
position: relative;
|
|
|
|
span {
|
|
left: 0;
|
|
position: absolute;
|
|
top: 2px;
|
|
}
|
|
}
|
|
|
|
.interests {
|
|
|
|
@include breakpoint(medium) {
|
|
border-left: 1px solid #ececec;
|
|
padding-left: $line-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 18. Banners
|
|
// -----------
|
|
|
|
.banner {
|
|
@include full-width-background;
|
|
|
|
.debates-list &::before,
|
|
.proposals-list &::before {
|
|
content: none;
|
|
}
|
|
|
|
a > * {
|
|
padding: 0 rem-calc(16);
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
+ .budget-header,
|
|
+ .jumbo {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
// 19. Recommendations
|
|
// -------------------
|
|
|
|
.section-recommended {
|
|
background: #fafafa;
|
|
border-top: 1px solid $border;
|
|
margin-bottom: rem-calc(-48);
|
|
padding: $line-height 0;
|
|
|
|
h2 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: $line-height * 2;
|
|
}
|
|
|
|
.debates,
|
|
.proposals,
|
|
.budget-investments {
|
|
|
|
@include breakpoint(medium) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@include breakpoint(small) {
|
|
margin-bottom: $line-height;
|
|
}
|
|
|
|
.button.hollow {
|
|
margin-top: rem-calc(15);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
padding: $line-height / 2;
|
|
|
|
.card {
|
|
border: 0;
|
|
}
|
|
|
|
.card-section {
|
|
margin: 0 auto;
|
|
max-width: none;
|
|
padding: 0;
|
|
|
|
p {
|
|
font-size: $base-font-size;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.orbit {
|
|
height: rem-calc(300);
|
|
|
|
.orbit-wrapper {
|
|
max-height: rem-calc(250);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.orbit-bullets {
|
|
@include orbit-bullets;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card .orbit .orbit-wrapper .truncate {
|
|
background: image-url("truncate.png");
|
|
background-repeat: repeat-x;
|
|
bottom: 0;
|
|
height: rem-calc(20);
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.debates-inner,
|
|
.proposals-inner,
|
|
.budget-investments-inner {
|
|
max-height: rem-calc(350);
|
|
|
|
@include breakpoint(small) {
|
|
max-height: rem-calc(400);
|
|
}
|
|
|
|
h4 {
|
|
margin-top: 0;
|
|
margin-bottom: $line-height;
|
|
font-size: rem-calc(18);
|
|
min-height: 0;
|
|
}
|
|
|
|
h5 {
|
|
font-size: $small-font-size;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.carousel-image {
|
|
|
|
.card .orbit {
|
|
height: rem-calc(480);
|
|
|
|
.orbit-wrapper {
|
|
max-height: rem-calc(450);
|
|
}
|
|
}
|
|
|
|
.debates,
|
|
.proposals {
|
|
|
|
a {
|
|
display: block;
|
|
margin-top: $line-height;
|
|
}
|
|
}
|
|
|
|
.debates-inner,
|
|
.proposals-inner,
|
|
.budget-investments-inner {
|
|
border: 1px solid $border;
|
|
padding: $line-height;
|
|
margin-right: $line-height;
|
|
max-height: rem-calc(500);
|
|
|
|
@include breakpoint(small) {
|
|
max-height: rem-calc(600);
|
|
}
|
|
}
|
|
}
|
|
|
|
.carousel-image .orbit-wrapper img {
|
|
display: block;
|
|
height: rem-calc(120);
|
|
|
|
@include breakpoint(small) {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.recommended-index {
|
|
@include full-width-background;
|
|
@include full-width-border(bottom, 1px solid #eee);
|
|
@include full-width-border(top, 1px solid #fafafa);
|
|
background: #fafafa;
|
|
margin-bottom: $line-height;
|
|
margin-top: rem-calc(-25);
|
|
padding: $line-height 0 $line-height / 2;
|
|
|
|
@include breakpoint(medium) {
|
|
padding-top: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $small-font-size;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h3 {
|
|
font-size: $base-font-size;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
a {
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.recommendation {
|
|
background: $body-background;
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
|
display: block;
|
|
margin-bottom: $line-height / 4;
|
|
padding: $line-height / 2;
|
|
|
|
&:hover {
|
|
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
.hide-recommendations {
|
|
color: $text-light;
|
|
position: absolute;
|
|
right: 12px;
|
|
top: -18px;
|
|
}
|
|
|
|
// 20. Documents
|
|
// -------------
|
|
|
|
.documents {
|
|
|
|
h2 {
|
|
font-size: rem-calc(24);
|
|
|
|
span {
|
|
color: #4f4f4f;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
ul li {
|
|
padding-top: $line-height / 2;
|
|
|
|
&:not(:first-child) {
|
|
border-top: 1px solid $highlight;
|
|
}
|
|
}
|
|
|
|
.document-link {
|
|
background: $highlight-soft;
|
|
border: 2px solid $highlight;
|
|
border-radius: rem-calc(5);
|
|
display: block;
|
|
margin: $line-height / 2 0;
|
|
padding: $line-height / 2;
|
|
position: relative;
|
|
|
|
.icon-document {
|
|
color: #007bb7;
|
|
display: inline-block;
|
|
font-size: rem-calc(24);
|
|
line-height: $line-height;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.document-link a {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.additional-document-link {
|
|
background: $highlight-soft;
|
|
border: 1px solid $highlight;
|
|
display: block;
|
|
margin: $line-height / 2 0;
|
|
padding: $line-height / 2;
|
|
position: relative;
|
|
|
|
a {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.icon-document {
|
|
color: #007bb7;
|
|
display: inline-block;
|
|
font-size: rem-calc(24);
|
|
line-height: $line-height;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.document-divider {
|
|
background: #fafafa;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
// 21. Related content
|
|
// -------------------
|
|
|
|
.related-content {
|
|
border-top: 1px solid $border;
|
|
|
|
h2 {
|
|
font-size: rem-calc(24);
|
|
|
|
span {
|
|
color: #4f4f4f;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-related-content {
|
|
color: $link;
|
|
cursor: pointer;
|
|
display: block;
|
|
margin-bottom: $line-height;
|
|
|
|
@include breakpoint(medium) {
|
|
float: right;
|
|
}
|
|
|
|
&:focus {
|
|
outline: $outline-focus;
|
|
}
|
|
|
|
&[aria-expanded="false"] + form {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.related-content-list {
|
|
list-style-type: none;
|
|
margin-left: 0;
|
|
|
|
li {
|
|
border-bottom: 1px solid $border;
|
|
margin-bottom: 0 !important;
|
|
padding: $line-height / 2;
|
|
|
|
@include breakpoint(medium) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
> :first-child {
|
|
flex: 1;
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
border-top: 1px solid $border;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: $base-font-size;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.related-content-title {
|
|
color: #4f4f4f;
|
|
font-size: rem-calc(12);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.flag {
|
|
margin-top: $line-height / 2;
|
|
}
|
|
}
|
|
|
|
.relate-content-score {
|
|
display: block;
|
|
|
|
@include breakpoint(medium) {
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
font-weight: bold;
|
|
margin-right: $line-height;
|
|
text-decoration: none;
|
|
|
|
&.score-positive {
|
|
@include has-fa-icon(check, solid);
|
|
color: $color-success;
|
|
}
|
|
|
|
&.score-negative {
|
|
@include has-fa-icon(times, solid);
|
|
color: $color-alert;
|
|
}
|
|
|
|
&::before {
|
|
margin-right: $font-icon-margin;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 22. Images
|
|
// -----------------
|
|
|
|
.button {
|
|
|
|
&.upload-image {
|
|
@include has-fa-icon(image, solid);
|
|
}
|
|
|
|
&.upload-document {
|
|
@include has-fa-icon(file, solid);
|
|
}
|
|
|
|
&.upload-image,
|
|
&.upload-document {
|
|
font-weight: bold;
|
|
margin-bottom: $line-height * 1.5;
|
|
|
|
&::before {
|
|
$button-padding-left: nth($button-padding, 2);
|
|
margin-left: -$button-padding-left / 2;
|
|
margin-right: $button-padding-left / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 23. Maps
|
|
// -----------------
|
|
|
|
.location-map-remove-marker {
|
|
border-bottom: 1px dotted #cf2a0e;
|
|
color: $delete;
|
|
display: inline-block;
|
|
margin-top: $line-height / 2;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
border-bottom-style: solid;
|
|
color: #cf2a0e;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.leaflet-bar a {
|
|
|
|
&.leaflet-disabled {
|
|
color: #525252;
|
|
}
|
|
}
|
|
|
|
.leaflet-container {
|
|
|
|
.leaflet-control-attribution {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
a {
|
|
color: $link;
|
|
}
|
|
}
|
|
|
|
.leaflet-bottom,
|
|
.leaflet-pane,
|
|
.leaflet-top {
|
|
z-index: 4;
|
|
}
|
|
|
|
// 24. Homepage
|
|
// ------------
|
|
|
|
.home-page,
|
|
.custom-page,
|
|
.sdg-goal-show,
|
|
.sdg-goals-index {
|
|
|
|
a {
|
|
|
|
p {
|
|
|
|
&.description {
|
|
color: $text;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
}
|
|
|
|
.background-header {
|
|
clip-path: ellipse(60% 80% at 50% 0%);
|
|
height: $line-height * 2;
|
|
background: $highlight;
|
|
margin-top: rem-calc(-48);
|
|
}
|
|
|
|
.cards-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.card a {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
border: 0;
|
|
flex-grow: 0;
|
|
overflow: visible;
|
|
|
|
a {
|
|
.figure-card img {
|
|
transition-duration: 0.3s;
|
|
transition-property: transform;
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
|
|
text-decoration: none;
|
|
|
|
.figure-card img {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
p,
|
|
.sdg-tag-list {
|
|
padding: 0 $line-height / 4;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
&.title {
|
|
@include header-font-size(h3);
|
|
}
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
|
|
&.title {
|
|
display: inline-block;
|
|
border-top: 4px solid $brand;
|
|
margin-bottom: 0;
|
|
padding: $line-height / 2 0;
|
|
}
|
|
}
|
|
|
|
figure img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.feeds-list {
|
|
|
|
a {
|
|
|
|
&.see-all {
|
|
border-bottom: 1px solid $border;
|
|
display: block;
|
|
font-size: $small-font-size;
|
|
margin: $line-height 0 $line-height / 2;
|
|
text-align: right;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.figure-card {
|
|
display: flex;
|
|
margin: 0 0 $line-height;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
@include breakpoint(medium down) {
|
|
min-height: $line-height * 4;
|
|
}
|
|
|
|
@include breakpoint(medium) {
|
|
max-height: rem-calc(185);
|
|
}
|
|
|
|
@include breakpoint(large) {
|
|
min-height: rem-calc(185);
|
|
}
|
|
|
|
.gradient {
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%);
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
figcaption {
|
|
bottom: 0;
|
|
color: #fff;
|
|
font-size: rem-calc(24);
|
|
line-height: rem-calc(24);
|
|
text-transform: uppercase;
|
|
padding: $line-height / 4 $line-height / 2;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 3;
|
|
|
|
h3 {
|
|
font-size: $base-font-size;
|
|
|
|
@include breakpoint(medium) {
|
|
font-size: rem-calc(20);
|
|
}
|
|
|
|
@include breakpoint(large) {
|
|
font-size: rem-calc(24);
|
|
line-height: rem-calc(24);
|
|
}
|
|
}
|
|
|
|
span {
|
|
background: $body-background;
|
|
border-radius: rem-calc(4);
|
|
color: $text;
|
|
display: inline-block;
|
|
font-size: $small-font-size;
|
|
font-weight: bold;
|
|
margin-bottom: $line-height / 4;
|
|
padding: rem-calc(4) rem-calc(8);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 25. Local Census Records
|
|
// ------------------------
|
|
|
|
.local-census-record-new,
|
|
.local-census-record-edit {
|
|
|
|
.date-of-birth {
|
|
select {
|
|
float: left;
|
|
width: 30%;
|
|
margin-right: $line-height / 4;
|
|
}
|
|
}
|
|
}
|