Sign upLogin

CDJ11/CDJ

View on GitHub
Star
app/assets/stylesheets/layout.scss

Summary

Maintainability
Test Coverage
// Table of Contents
//
// 01. Global styles
// 02. Header
// 03. Footer
// 04. Tags
// 05. Auth pages
// 06. Forms
// 07. Callout
// 08. User account
// 09. Search
// 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
//

// 01. Global styles
// -----------------

::selection {
  color: #fff;
  background-color: $brand;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-size: $base-font-size;
}

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;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: $link-hover;
    }
  }

  &:focus {
    color: $link-hover;
    outline: 3px solid #ffbf47;
  }
}

.button {
  background: $brand;
  font-size: $base-font-size;

  &:hover {
    text-decoration: none !important;
  }

  &.warning,
  &.warning:hover {
    color: #000;
  }

  &.medium {
    font-size: $small-font-size;
  }
}

.button.hollow {
  border: 1px solid $link;
  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;
  }
}

.f-dropdown {
  li a {
    font-size: $small-font-size;

    &:hover {
      color: $link-hover;
    }
  }

  li:hover,
  .f-dropdown li:focus {
    background: #fff;
  }

  &.open {
    outline: none;
  }
}

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

.light {
  background: $light;
}

.highlight {
  background: $highlight;
}

.icon-check {
  color: $check;
}

.wrapper {
  min-height: 100%;
  margin: 0 auto (-$line-height) * 12;
  height: auto !important;
  height: 100%;
}

.footer,
.push {
  clear: both;
  min-height: $line-height * 12;
}

.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: $text;
      display: inline-block;
      font-weight: bold;
      position: relative;
      text-align: left;

      &:hover {
        color: $link;
      }
    }

    + li {
      margin-left: 0;
    }

    &.is-active {
      border-bottom: 2px solid $brand;
      color: $brand;
      padding-bottom: rem-calc(1);

      h2 a {
        color: $brand;
      }
    }

    &: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 {
        font-weight: bold;
        color: $brand;
      }
    }

    h2 {
      font-size: $base-font-size;
    }

    &.is-active {
      border-bottom: 2px solid $brand;
      color: $brand;
    }
  }

  &.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 {
  color: $text;
  top: $line-height / 2;
}

.back,
.icon-angle-left {
  clear: both;
  color: $text-medium;
  display: inline-block;
}

.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-bottom: 0;
  }

  .tabs-title > a {
    color: $text-medium;
    margin-bottom: rem-calc(-1);
    margin-right: $line-height;

    &[aria-selected='true'],
    &.is-active {
      color: $brand;
      border-bottom: 2px solid $brand;
      font-weight: bold;
    }
  }

  h2,
  h3 {
    font-size: $base-font-size;
  }
}

.button.float-right ~ .button.float-right {
  margin: 0 $line-height / 2;
}

.pagination .current {
  background: $brand;
}

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

.off-canvas-content {
  box-shadow: none;
}

.uppercase {
  text-transform: uppercase;
}

// 02. Header
// ----------

header {
  background: $brand;
  border-bottom: 1px solid $border;
  margin-bottom: $line-height;

  .selected {
    border-bottom: 1px solid #fff;
  }

  .locale {
    float: left;
    height: $line-height * 1.5;
    margin-left: $line-height / 2;
  }

  .external-links {
    float: none;
    padding: rem-calc(6) 0;
    text-align: center;

    @include breakpoint(medium) {
      float: right;
    }
  }
}

.top-bar {
  background: $brand !important;
  color: #fff;
  padding-bottom: 0;
  padding-top: 0;

  @include breakpoint(medium) {
    padding: 0;
  }

  ul {
    background: none;
    padding-right: rem-calc(15);
  }

  .menu .menu-text {
    padding: 0;

    a {
      color: #fff;
      display: inline-block;
      font-family: 'Lato' !important;
      font-size: rem-calc(24);
      font-weight: lighter;
      line-height: $line-height * 2;
      padding: 0;

      @include breakpoint(medium) {
        line-height: rem-calc(80);
        margin-top: 0;
      }

      img {

        @include breakpoint(medium) {
          margin-right: $line-height / 2;
          margin-top: 0;
        }
      }
    }
  }

  .menu > li {
    display: block;
    width: 100%;

    @include breakpoint(medium) {
      width: auto;
    }

    a {
      color: #fff;
      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) {
        background: #fff;
        color: $brand;
        text-align: center;
      }
    }
  }

  .has-submenu {

    &.is-active a {
      color: #fff;
      font-weight: bold;
    }
  }

  .menu {

    &.is-dropdown-submenu {
      background: #fff;
      margin: 0;
      margin-top: rem-calc(-12);
      padding: 0;
      z-index: 9;
    }

    .is-submenu-item {
      display: block;
      height: auto;
      margin-bottom: 0;

      a {
        color: $text;
      }
    }
  }

  .top-bar-title {
    line-height: $line-height;

    a img {
      height: rem-calc(48);
      margin: 0;
      width: auto;

      @include breakpoint(medium up) {
        height: auto;
      }
    }
  }
}

.menu-icon {

  &.dark {

    &:hover::after,
    &::after {
      background: #fff;
      box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
    }
  }
}

.title-bar {
  background: none;
  float: right;
}

.menu-icon {

  &.dark {

    &:hover::after,
    &::after {
      background: #fff;
      box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
    }
  }
}

.title-bar {
  background: none;
  float: right;
}

.dropdown.menu > li {

  &.is-dropdown-submenu-parent > a::after {
    border-color: #fff transparent transparent;
  }
}

.top-links {
  background: $dark;
  color: #fff;
  font-size: $small-font-size;
  padding-right: $line-height / 2;

  a {
    color: #fff;
    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 {

  @include breakpoint(medium) {
    background: #fff;
    padding-bottom: 0;
  }

  ul {
    list-style-type: none;
    margin: 0;

    li {
      @include breakpoint(medium) {
        display: inline-block;
        margin-right: rem-calc(20);
      }
    }
  }

  a {
    color: #fff;
    display: inline-block;
    line-height: $line-height * 2;
    position: relative;
    text-align: left;
    width: 100%;

    @include breakpoint(medium) {
      color: $text;
      display: block;
      font-weight: bold;
      width: auto;

      &:hover {
        color: $link;
      }
    }

    &.is-active {
      color: #fff;

      @include breakpoint(medium) {
        border-bottom: 2px solid $brand;
        color: $brand;
      }
    }
  }

  .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: $text;
    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 {
    border-bottom: 2px solid $brand;
    color: $brand;

    &:hover {
      text-decoration: none;
    }
  }

  h2 {
    font-size: $base-font-size;
  }
}

.search-form-header [type=text] {
  max-width: none;
}

// 03. Footer
// ----------

footer {
  color: $text;

  .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: $text;
    text-decoration: underline;

    &:hover {
      color: $text-medium;
    }
  }

  .footer-sections {
    padding-left: 0;
  }

  .title {
    font-weight: bold;
    text-decoration: none;
  }
}

.footer {
  background: #f1f1f1;
  margin-top: $line-height * 2;
  padding-top: $line-height;
}

.subfooter {
  border-top: 1px solid $text-light;
  font-size: $small-font-size;
  padding-top: $line-height / 2;
}

// 04. Tags
// --------

.tags a ,
.tag-cloud a,
.categories a,
.geozone a,
.sidebar-links a,
.tags span {
  background: #ececec;
  border-radius: rem-calc(6);
  color: $text;
  display: inline-block;
  font-size: $small-font-size;
  margin-bottom: $line-height / 3;
  padding: $line-height / 4 $line-height / 3;
  text-decoration: none;

  &:hover {
    background: #e0e0e0;
  }
}

.categories a,
.geozone a {
  background: $highlight;
  color: $link;

  &:hover,
  &.is-active {
    background: $brand;
    color: #fff;
  }
}

.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 {

  .wrapper {
    margin: 0 auto (-$line-height) * 14;
  }
}

.auth-image {
  background: $brand image-url('auth_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;

  @include breakpoint(medium) {
    min-height: $line-height * 42;
  }

  h1 {
    margin-top: $line-height;

    a {
      color: #fff;
      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-bottom: 1px solid $border;
  height: rem-calc(14);
  margin: $line-height 0;
  text-align: center;

  span {
    background: #fff;
    font-weight: bold;
    padding: 0 $line-height / 2;
  }
}

// 06. Forms
// ---------

.locale-form {
  display: inline-block;
  position: relative;

  label {
    color: #fff;
    font-size: $small-font-size;
    font-weight: normal;
  }

  select {
    background-image: image-url('language_select.png');
    background-origin: border-box;
    background-position: right;
    background-size: 24px 24px;

    option {
      background: #fff;
      color: $text;
      border: 0;
      outline: none;
    }
  }

  .locale-switcher {
    background-color: transparent;
    border: 0;
    color: #fff;
    font-size: $small-font-size;
    margin-bottom: 0;
    outline: none;
    padding-left: rem-calc(3);
    padding-right: $line-height;
    width: auto;

    &:focus {
      outline: 3px solid #ffbf47;
    }
  }
}

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=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.close-button) {
    background: #f8f8f8;
    height: $line-height * 2;
    margin-bottom: rem-calc(16);

    &.error {
      margin-bottom: rem-calc(1);
    }
  }

  [type="checkbox"] + label,
  [type="radio"] + label {
    margin-right: 0;
  }

  [type=file] {
    margin: $line-height / 2 0 $line-height / 2 $line-height / 4;
  }

  .ckeditor {
    min-height: $line-height * 13;
  }

  .checkbox,
  .radio {
    display: inline-block;
    font-weight: normal;
    line-height: $line-height;
    vertical-align: middle;
  }
}

// 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;
  position: absolute;
  right: 24px;
  top: 24px;

  .notice {
    height: $line-height * 4;

    .notice-text {
      width: 95%;
    }
  }
}

.callout {
  font-size: $small-font-size;

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

.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 {
  position: relative;

  &:hover {
    text-decoration: none;
  }

  [class^="icon-"] {
    font-size: rem-calc(19);
    vertical-align: middle;
  }

  .icon-circle {
    color: #ecf00b;
    font-size: rem-calc(10);
    position: absolute;
    left: 12px;
    top: 6px;

    @include breakpoint(medium) {
      left: auto;
      right: 8px;
    }
  }
}

.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: #fff;
    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;
  }
}

// 09. Search
// ----------

.advanced-search {
  float: left;
  margin: $line-height 0;
  position: inherit;

  @include breakpoint(medium) {
    float: right;
    margin-bottom: 0;
    margin-top: $line-height / 4;
    position: absolute;
    right: 0;
  }
}

.advanced-search-form {

  @include breakpoint(medium) {
    > .column {
      padding: 0;
    }
  }

  select {
    height: $line-height * 2;
  }
}

// 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: #fff;
    }

    &:nth-child(even) {
      background: #fafcfb;
    }
  }

  .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-telegram {
  background: #fff;
  color: $text;
  font-weight: bold;
  height: $line-height * 2;
  line-height: $line-height * 2;
  padding: 0;
  position: relative;
}

.button.button-twitter {
  background: #ecf7fc;
  border-left: 3px solid #45b0e3;

  &::before {
    color: #45b0e3;
    content: 'f';
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height * 2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.ssb-twitter {
  background: #45b0e3;
  background-image: none !important;
  color: #fff;
  height: $line-height * 2 !important;
  position: relative;
  width: $line-height * 2 !important;

  &::before {
    content: 'f';
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height * 2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover,
  &:focus {
    background: #fff;
    color: #40a2d1;
  }
}

.button.button-facebook {
  background: #ebeef4;
  border-left: 3px solid #3b5998;

  &::before {
    color: #3b5998;
    content: 'A';
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height * 2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.ssb-facebook {
  background: #3b5998;
  background-image: none !important;
  color: #fff;
  height: rem-calc(48) !important;
  position: relative;
  width: rem-calc(48) !important;

  &::before {
    content: 'A';
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height * 2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover,
  &:focus {
    background: #fff;
    color: #354f88;
  }
}

.button.button-google {
  background: #fcedea;
  border-left: 3px solid #de4c34;

  &::before {
    color: #de4c34;
    content: 'B';
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height * 2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

[class^="ssb-icon ssb-google"] {
  background: #de4c34;
  background-image: none !important;
  color: #fff;
  height: $line-height * 2 !important;
  position: relative;
  width: $line-height * 2 !important;

  &::before {
    content: 'B';
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height * 2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover,
  &:focus {
    background: #fff;
    color: #ce3e26;
  }
}

.button.button-telegram {
  background: #ecf7fc;
  border-left: 3px solid #08c;

  &::before {
    color: #08c;
    content: '1';
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height * 2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.ssb-telegram {
  background: #08c;
  background-image: none !important;
  color: #fff;
  height: $line-height * 2 !important;
  position: relative;
  width: $line-height * 2 !important;

  &::before {
    content: '1';
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height * 2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover,
  &:focus {
    background: #fff;
    color: #40a2d1;
  }
}

@include breakpoint(medium) {

  .button.button-telegram,
  .ssb-telegram {
    display: none !important;
  }
}

.social {

  a {
    font-size: rem-calc(24);
    margin: 0 $line-height / 2;
    text-decoration: none;

    &:hover {
      color: $brand;
    }
  }
}

.share-supported {
  text-align: center;

  .social-share-button {
    display: inline-block;
  }

  .ssb-twitter {
    background: #45b0e3;
    color: #fff;
    height: $line-height;
    position: relative;
    width: $line-height * 2;

    &::before {
      content: 'f';
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height * 2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover,
    &:focus {
      background: #fff;
      color: #40a2d1;
    }
  }

  .ssb-facebook {
    background: #3b5998;
    color: #fff;
    height: rem-calc(24);
    position: relative;
    width: rem-calc(48);

    &::before {
      content: 'A';
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height * 2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover,
    &:focus {
      background: #fff;
      color: #354f88;
    }
  }

  [class^="ssb-icon ssb-google"] {
    background: #de4c34;
    color: #fff;
    height: rem-calc(24);
    position: relative;
    width: rem-calc(48);

    &::before {
      content: 'B';
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height * 2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover,
    &:focus {
      background: #fff;
      color: #ce3e26;
    }
  }

  .ssb-telegram {
    background: #08c;
    color: #fff;
    height: $line-height;
    position: relative;
    width: $line-height * 2;

    &::before {
      content: '1';
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height * 2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover,
    &:focus {
      background: #fff;
      color: #40a2d1;
    }
  }
}

// 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: #fff;
      color: $color-info;
      font-size: rem-calc(24);
      margin-left: -27px;
      padding: 0 $line-height / 2;
      position: absolute;
      top: -12px;
    }
  }
}

// 15. Comments
// ------------

.comments {
  background: #fff;
  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;
    }
  }

  .comment {
    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 {
    background: #fff;
    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;

    .relative,
    [class^="icon-arrow"] {
      padding-left: $line-height / 2;
    }

    [class^="icon-arrow"] {
      font-size: $base-font-size;
      left: -20px;
      position: absolute;
      text-decoration: none;
      top: -1px;
    }

    .divider {
      color: $text-light;
      display: inline-block;
    }

    form {
      margin-top: $line-height / 2;
    }
  }

  .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-children {
  border-left: 1px dashed $border;
  display: inline-block;
  margin-left: rem-calc(16);
  padding-left: rem-calc(8);
  width: 100%;
}

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

.wide-order-selector {
  float: none;
  margin-top: 0;

  @include breakpoint(medium) {
    float: right;
    margin-top: rem-calc(-24);
  }

  label {
    padding-right: $line-height / 2;
    float: none;

    @include breakpoint(medium) {
      float: right;
    }
  }
}

.comment-form {
  display: inline-block;
  width: 100%;
}

// 16. Flags
// ---------

.flag-content {

  .button {
    background: none;
    margin-bottom: 0;
    padding: 0;
  }
}

.flag-disable,
.flag-active {
  line-height: 0;
  vertical-align: sub;
}

.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-style-one {
  background-color: $brand;
}

.banner-style-two {
  background-color: $budget;
}

.banner-style-three {
  background-color: #33dadf;
}

@include breakpoint(large) {

  .banner-img-one {
    background-image: image-url('banners/banner1.png');
  }

  .banner-img-two {
    background-image: image-url('banners/banner2.png');
  }

  .banner-img-three {
    background-image: image-url('banners/banner3.png');
  }
}

.banner-img-one,
.banner-img-two,
.banner-img-three {
  background-position: bottom right;
  background-repeat: no-repeat;
}

.banner-style-one,
.banner-style-two,
.banner-style-three,
.banner {
  margin: 0;
  margin-bottom: $line-height;

  @include breakpoint(large) {

    h3 {
      width: 80%;
    }
  }

  h2,
  h3,
  a {
    color: #eaeaf2;
  }

  h2 {
    padding: $line-height / 2;
    padding-bottom: 0;
  }

  h3 {
    padding: $line-height / 2;
    padding-top: 0;
  }

  a:hover h2,
  a:hover h3 {
    color: #eaeaf2 !important;
    text-decoration: none;
  }
}

// 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 {
    background: #fff;
    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 {
  background: #fafafa;
  border-bottom: 1px solid #eee;
  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: #fff;
    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: 0 $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 {
  display: block;

  @include breakpoint(medium) {
    float: right;
  }
}

.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) {

      .score-actions {
        display: none;
        float: right;
      }
    }

    &:first-child {
      border-top: 1px solid $border;
    }

    &:hover {
      background: #f9f9f9;

      .score-actions {
        display: block;
      }
    }
  }

  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;
    padding-left: rem-calc(20);
    position: relative;
    text-decoration: none;

    &.score-positive::before,
    &.score-negative::before {
      font-family: 'icons';
      left: 0;
      position: absolute;
    }

    &.score-positive {
      color: $color-success;

      &::before {
        color: $color-success;
        content: '\6c';
      }
    }

    &.score-negative {
      color: $color-alert;

      &::before {
        color: $color-alert;
        content: '\76';
      }
    }
  }
}

// 22. Images
// -----------------

.images .button {
  margin-top: $line-height / 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: 1px solid #cf2a0e;
    color: #cf2a0e;
    text-decoration: none;
  }
}

.leaflet-bar a {

  &.leaflet-disabled {
    color: #525252 !important;
  }
}

// 24. Homepage
// ------------

.home-page {

  a {

    p {

      &.description {
        color: $text;
      }
    }
  }

  a:hover {

    h3 {
      color: #fff;
    }
  }

  .background-header {
    clip-path: ellipse(60% 80% at 50% 0%);
    height: $line-height * 2;
    background: $highlight;
    margin-top: rem-calc(-48);
  }

  .card {
    border: 0;
    overflow: visible;

    a {

      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;

      img {
        transform: scale(1.1);
      }
    }

    p {
      padding: 0 $line-height / 4;
    }
  }

  h3 {

    &.title {
      display: inline-block;
      border-top: 4px solid $brand;
      margin-bottom: 0;
      min-width: rem-calc(240);
      padding: $line-height / 2 0;
    }
  }

  .figure-card {

    figcaption {
      z-index: 3;
    }

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

  figure img {
    height: 100%;
    width: 100%;
  }
}

.feeds-list {

  .proposal {
    clear: both;
  }

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

.feed-image {
  display: inline-block;
  height: rem-calc(120);
  overflow: hidden;

  @include breakpoint(medium) {
    height: rem-calc(96);
  }

  img {
    margin-left: rem-calc(-15);
    max-width: none;
    width: rem-calc(120);
  }
}

.feed-description {

  p {
    font-size: $small-font-size;
    margin-bottom: 0;
  }
}

.feed-content {

  .debate,
  .proposal {
    margin-bottom: 0;
    margin-top: 0;
    padding: $line-height / 2 0;
  }
}

.figure-card {
  display: flex;
  margin: 0 0 $line-height;
  position: relative;

  @include breakpoint(medium) {
    max-height: rem-calc(185);
    overflow: hidden;
  }

  a {

    h3,
    .title {
      color: #fff;
    }

    &:hover {
      text-decoration: none;
    }
  }

  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%;

    h3,
    .title {
      font-size: rem-calc(24);
      line-height: rem-calc(24);
    }

    span {
      background: #fff;
      border-radius: rem-calc(4);
      color: #000;
      display: inline-block;
      font-size: $small-font-size;
      font-weight: bold;
      margin-bottom: $line-height / 4;
      padding: rem-calc(4) rem-calc(8);
    }
  }
}