Split SCSS mixins in several files

One file was OK when we only had a couple of mixins, but recently we've
been adding quite a few.

We can now avoid a SCSS Lint warning by excluding just the file with the
affected mixin.

.scss-lint.yml

@@ -98,6 +98,7 @@ linters:
 
   PlaceholderInExtend:
     enabled: true
+    exclude: "app/assets/stylesheets/mixins/icons.scss"
 
   PrivateNamingConvention:
     enabled: true

app/assets/stylesheets/application.scss

@@ -4,7 +4,7 @@
 @import "font-awesome-sprockets";
 @import "font-awesome";
 @import "icons";
-@import "mixins";
+@import "mixins/*";
 @import "admin";
 @import "advanced_search";
 @import "layout";

app/assets/stylesheets/mixins.scss

@@ -1,322 +0,0 @@
-// 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;
-  }
-}

app/assets/stylesheets/mixins/buttons.scss

@@ -0,0 +1,19 @@
+%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;
+}

app/assets/stylesheets/mixins/headings.scss

@@ -0,0 +1,7 @@
+@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));
+    }
+  }
+}

app/assets/stylesheets/mixins/icons.scss

@@ -0,0 +1,47 @@
+%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");
+    }
+  }
+}

app/assets/stylesheets/mixins/layouts.scss

@@ -0,0 +1,23 @@
+@mixin admin-layout {
+
+  > header {
+    margin-bottom: 0;
+  }
+
+  > .menu-and-content {
+    flex: 1;
+  }
+}
+
+@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;
+  }
+}

app/assets/stylesheets/mixins/orbit_bullets.scss

@@ -0,0 +1,24 @@
+@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;
+    }
+  }
+}

app/assets/stylesheets/mixins/sdg.scss

@@ -0,0 +1,58 @@
+@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;
+      }
+    }
+  }
+}

app/assets/stylesheets/mixins/tags.scss

@@ -0,0 +1,31 @@
+%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;
+  }
+}
+

app/assets/stylesheets/mixins/tooltips.scss

@@ -0,0 +1,13 @@
+@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%);
+  }
+}

app/assets/stylesheets/mixins/uploads.scss

@@ -0,0 +1,73 @@
+@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;
+  }
+}