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) {
  @extend .fa-#{$icon};

  &::before {
    @extend %font-icon;

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

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

    &::before {
      @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));
    }
  }
}