grecia/app/assets/stylesheets/mixins.scss

// Table of Contents
//
// 01. Logo
// 02. Orbit bullets
// 03. Direct uploads
// 04. Admin layout
// ------------------

// 01. Logo
// --------

@mixin logo {
  color: #fff;
  display: inline-block;
  font-family: "Lato" !important;
  font-size: rem-calc(24);
  font-weight: lighter;

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

// 02. Orbit bullets
// -----------------

@mixin orbit-bullets {
  @include disable-mouse-outline;
  position: relative;
  margin-top: $orbit-bullet-margin-top;
  margin-bottom: $orbit-bullet-margin-bottom;
  text-align: center;

  button {
    width: $orbit-bullet-diameter;
    height: $orbit-bullet-diameter;
    margin: $orbit-bullet-margin;

    border-radius: 50%;
    background-color: $orbit-bullet-background;

    &:hover {
      background-color: $orbit-bullet-background-active;
    }

    &.is-active {
      background-color: $orbit-bullet-background-active;
    }
  }
}

// 03. Direct uploads
// ------------------

@mixin direct-uploads {

  .cached-image {
    max-width: rem-calc(150);
    max-height: rem-calc(150);
  }

  .progress-bar-placeholder {
    display: none;
    margin-bottom: $line-height;
  }

  .document,
  .image {

    .document-attachment,
    .image-attachment {
      padding-left: 0;

      p {
        margin-bottom: 0;
      }
    }

    .attachment-errors {

      > .js-image-attachment,
      > .js-document-attachment {
        display: none;

        ~ .error {
          display: inline-block;
        }
      }
    }
  }

  .button {
    font-weight: normal;
  }

  .progress-bar {
    width: 100%;
    background-color: $light-gray;
  }

  .file-name {
    margin-top: 0;
  }

  .loading-bar {
    height: 5px;
    width: 0;
    transition: width 500ms ease-out;

    &.uploading {
      background-color: $dark-gray;
    }

    &.complete {
      background-color: $success-color;
    }

    &.errors {
      background-color: $alert-color;
      margin-top: $line-height / 2;
    }
  }

  .loading-bar.no-transition {
    transition: none;
  }
}

// 04. Admin layout
// ----------------

@mixin admin-layout {

  > header {
    margin-bottom: 0;
  }

  > .menu-and-content {
    flex: 1;
  }
}

%font-icon {
  @extend %fa-icon;
  font-family: "Font Awesome 5 Free";
  margin-right: rem-calc(4);
  vertical-align: middle;
}

%svg-icon {
  background: currentcolor;
  content: "";
  height: 1em;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  width: 1em;
}

%admin-menu-icon {
  font-size: rem-calc(20);
  margin-left: rem-calc(8);
  margin-right: rem-calc(10);
}

@mixin has-fa-icon($icon, $style, $position: "before") {

  &::#{$position} {
    @extend %font-icon;
    @extend .fa-#{$icon}:before;

    @if $style == "solid" {
      font-weight: bold;
    } @else {
      font-weight: normal;
    }

    @if $style == "brands" {
      font-family: "Font Awesome 5 Brands";
    }
  }

  @supports (mask-image: url()) {

    &::#{$position} {
      @extend %svg-icon;
      mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg");
    }
  }
}

@mixin bottom-tooltip {
  @include tooltip;
  line-height: $global-lineheight;
  margin-top: $line-height / 8;
  width: max-content;

  &::before {
    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}

%button {
  font-size: $base-font-size;

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

@mixin regular-button($color: $brand) {
  @include button($background: $color);
  @extend %button;
}

@mixin hollow-button($color: $link) {
  @include button($style: hollow, $background: $color);
  @extend %button;
  margin-bottom: 0;
}

@mixin header-font-size($heading-tag) {
  @each $size, $headers in $header-styles {
    @include breakpoint($size) {
      font-size: rem-calc(map-get(map-get($headers, $heading-tag), font-size));
    }
  }
}

@mixin sdg-goal-list($spacing: 1ch) {
  $min-spacing: $sdg-icon-min-width / 10;
  $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};

  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: -$spacing 0 $line-height / 3 -#{$spacing};
  margin-left: calc(-1 * #{$max-spacing});
  margin-top: calc(-1 * #{$max-spacing});
  width: calc(100% + #{$spacing});
  width: calc(100% + #{$max-spacing});

  > *,
  > .tabs-title {
    margin-bottom: 0;
    margin-left: $spacing;
    margin-left: $max-spacing;
    margin-right: 0;
    margin-top: $spacing;
    margin-top: $max-spacing;
  }

  a:hover .sdg-goal-icon {
    filter: brightness(90%);
  }
}

%sdg-goal-list {
  @include sdg-goal-list;
}

%sdg-goal-list-expanded {
  $spacing: 0.5%;
  @include sdg-goal-list($spacing);

  label,
  li {
    min-width: $sdg-icon-min-width;
    width: calc(100% / 17 - #{$spacing});

    &:hover {
      cursor: pointer;
    }

    .sdg-goal-icon {
      width: 100%;
    }

    a:focus {
      outline: none;

      img {
        outline: $outline-focus;
      }
    }
  }
}

%tags {
  margin-bottom: 0;
  margin-left: 0;

  li {
    display: inline-block;
    margin-bottom: 0;
  }

  a,
  span {
    @extend %tag;
  }
}

%tag {
  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;
    text-decoration: none;
  }
}