Adjust mixin names for consistency

src/styles/mixins/molecules.scss

@@ -27,7 +27,7 @@
 
   &:hover,
   &.is-focused {
-    @include utils.active-shadow;
+    @include utils.shadow--active;
   }
 
   &--theme-clean {
@@ -48,7 +48,7 @@
  */
 @mixin footer-links {
   @include layout.row(center);
-  @include utils.border-top;
+  @include utils.border--top;
   padding-top: 8px;
 
   &__icon {
@@ -117,7 +117,7 @@
 
   &__header {
     @include layout.row($align: center);
-    @include utils.border-bottom;
+    @include utils.border--bottom;
     padding-bottom: var.$layout-space;
   }
 
@@ -170,7 +170,7 @@
 
   &__tab {
     @include utils.font--large;
-    @include utils.border-right;
+    @include utils.border--right;
     flex: 1 1;
     text-align: center;
     color: var.$color-text--light;

src/styles/mixins/utils.scss

@@ -4,19 +4,19 @@
   border: var.$border-width solid var.$color-border;
 }
 
-@mixin border-top {
+@mixin border--top {
   border-top: var.$border-width solid var.$color-border;
 }
 
-@mixin border-right {
+@mixin border--right {
   border-right: var.$border-width solid var.$color-border;
 }
 
-@mixin border-bottom {
+@mixin border--bottom {
   border-bottom: var.$border-width solid var.$color-border;
 }
 
-@mixin border-left {
+@mixin border--left {
   border-left: var.$border-width solid var.$color-border;
 }
 
@@ -78,6 +78,6 @@
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
-@mixin active-shadow {
+@mixin shadow--active {
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
 }

src/styles/sidebar/components/annotation-license.scss

@@ -4,7 +4,7 @@
 
 .annotation-license {
   @include utils.font--small;
-  @include utils.border-top;
+  @include utils.border--top;
   // Space between border and text content
   padding-top: var.$layout-space--xsmall;
 

src/styles/sidebar/components/help-panel.scss

@@ -11,8 +11,8 @@
   }
 
   &__subcontent {
-    @include utils.border-top;
-    @include utils.border-bottom;
+    @include utils.border--top;
+    @include utils.border--bottom;
     @include layout.vertical-space;
 
     a {

src/styles/sidebar/components/menu-item.scss

@@ -61,7 +61,7 @@ a.menu-item:hover {
   }
 
   &.is-expanded {
-    @include utils.border-bottom;
+    @include utils.border--bottom;
     background-color: var.$grey-1;
     color: var.$color-text;
     &:hover {
@@ -142,7 +142,7 @@ a.menu-item:hover {
 
 // The container for open submenus
 .menu-item__submenu {
-  @include utils.border-bottom;
+  @include utils.border--bottom;
   &:hover {
     // Make it a bit darker on hover.
     background-color: var.$grey-3;

src/styles/sidebar/components/menu-section.scss

@@ -2,7 +2,7 @@
 @use "../../mixins/utils";
 
 .menu-section__content {
-  @include utils.border-bottom;
+  @include utils.border--bottom;
 }
 
 .menu-section__heading {

src/styles/sidebar/components/top-bar.scss

@@ -5,7 +5,7 @@
 
 .top-bar {
   @include utils.font--large;
-  @include utils.border-bottom;
+  @include utils.border--bottom;
   color: var.$grey-mid;
   background: var.$white;
   height: var.$top-bar-height;