Added border bottom to buttons (#362)

src/components/button/_button.scss

@@ -1,196 +1,182 @@
-@mixin btn-override(
-  $bg,
-  $color,
-  $color-hover: $color,
-  $darken-hover: 10%,
-  $border-color: $bg,
-  $border-color-hover: darken($border-color, $darken-hover)
-) {
-  border-color: $border-color;
-  background: $bg;
-  color: $color;
-
-  &:hover,
-  &:focus {
-    border-color: $border-color-hover;
-    background: darken($bg, $darken-hover);
-    color: $color-hover;
-  }
-
-  &:focus {
-    outline: 3px solid $color-focus;
-  }
-}
+$button-border-height: 3px;
 
 .btn {
   display: inline-block;
   margin: 0;
-  padding: 0.75rem 1rem;
-  width: 100%;
+  padding: 0;
 
-  border: 1px solid $color-button;
-  border-radius: $input-radius;
-
-  background: $color-button;
-  color: $color-white;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
 
   font-family: inherit;
   font-size: 1rem;
   font-weight: 600;
 
-  text-decoration: none;
   text-rendering: optimizeLegibility;
 
+  vertical-align: top;
+
   cursor: pointer;
 
-  transition: background-color 200ms ease-in, color 200ms ease-in, border 200ms ease-in;
+  &__inner {
+    display: inherit;
+    padding: 0.75em 1em;
 
-  &:hover,
-  &:focus {
-    border-color: darken($color-button, 10%);
-    background-color: darken($color-button, 10%);
+    border-bottom: ems($button-border-height) solid rgba(0, 0, 0, 0.35);
+    border-radius: $input-radius;
 
+    background: $color-button;
     color: $color-white;
-    text-decoration: none;
+  }
+
+  // When preceded by another button (e.g. in a group)
+  & + & {
+    margin-left: 0.5rem;
   }
 
   &:focus {
     outline: 3px solid $color-focus;
     outline-offset: 3px;
   }
 
-  @include mq(s) {
-    width: auto;
+  // When clicked
+  &:not([class*='btn--ghost']):not([class*='btn--mobile']):active {
+    padding-top: ems(3px);
   }
-}
 
-.btn--inline {
-  padding: $input-padding 1rem;
-}
-
-.btn--secondary,
-.btn--print {
-  @include btn-override($bg: $color-button-secondary, $color: $color-black);
-  font-weight: normal;
-}
-
-.btn--print {
-  &:after {
-    @include icon('print-link');
+  &:not([class*='btn--ghost']):not([class*='btn--mobile']):active &__inner {
+    border-bottom: 0;
+  }
 
-    content: '';
+  &--small,
+  &--mobile {
+    font-size: 0.9rem;
+  }
 
-    margin: 0 0 0 0.5rem;
-    vertical-align: middle;
+  // Modifiers
+  &--inline & {
+    &__inner {
+      padding: $input-padding 1rem;
+    }
   }
-}
 
-.btn--ghost {
-  @include btn-override(
-    $bg: transparent,
-    $color: $color-white,
-    $border-color: rgba(255, 255, 255, 0.6),
-    $border-color-hover: rgba(255, 255, 255, 1)
-  );
+  &--secondary &,
+  &--print & {
+    &__inner {
+      background: $color-button-secondary;
+      color: $color-black;
+      font-weight: normal;
+    }
+  }
 
-  padding: 0.5rem 1rem;
-  border-width: 2px;
-}
+  &--print &__inner {
+    &:after {
+      @include icon('print');
 
-.btn--ghost-blue {
-  @include btn-override($bg: transparent, $color: $color-blue, $border-color: darken($color-blue, 10%), $border-color-hover: $color-blue);
+      content: '';
 
-  padding: 0.5rem 1rem;
-  border-width: 2px;
-}
-
-.btn--small {
-  padding: 0.4rem 0.5rem;
-  font-size: 0.9rem;
-}
+      margin: 0 0 0 0.5rem;
+      vertical-align: middle;
+    }
+  }
 
-.btn--loader {
-  position: relative;
-  transition: color 300ms ease-out;
+  &--loader &__inner {
+    position: relative;
+    transition: color 0.3s ease-in-out;
 
-  &::after {
-    content: '';
+    &:after {
+      @include icon($name: 'loader', $height: 1.5em);
 
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+      content: '';
 
-    margin: auto;
+      position: absolute;
 
-    width: 2rem;
-    height: 2rem;
+      top: 50%;
+      left: 50%;
 
-    background-image: url('#{$static}/img/loader.svg');
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 1.5rem;
+      transform: translate(-50%, -50%);
 
-    opacity: 0;
+      opacity: 0;
 
-    pointer-events: none;
-    transition: opacity 300ms ease-out 200ms;
+      transition: opacity 0.3s ease-in-out;
+    }
   }
-  &.is-loading {
+
+  &--loader.is-loading &__inner {
     color: transparent;
-    &::after {
+
+    &:after {
       opacity: 1;
     }
   }
-}
 
-.btn-group {
-  .btn-group__btn {
-    display: inline-block;
-    margin-right: 1rem;
-    &:last-of-type {
-      margin-right: 0;
+  // Spooky Buttons
+  &--ghost &,
+  &--mobile & {
+    &__inner {
+      border: 2px solid rgba(255, 255, 255, 0.6);
+
+      background: transparent;
+      color: $color-white;
     }
   }
-}
 
-.btn--menu {
-  @extend .btn--secondary;
-  @extend .btn--small;
-  @include mq(m) {
-    display: none;
+  &--ghost:active &,
+  &--mobile:active & {
+    &__inner {
+      border-color: $color-white;
+    }
   }
-}
 
-.btn--mobile {
-  @extend .btn--ghost;
-  @extend .btn--small;
+  &--ghost-blue & {
+    &__inner {
+      border: 2px solid $color-blue;
 
-  $size: 0.6rem;
+      background: transparent;
+      color: $color-blue;
+    }
+  }
 
-  position: relative;
-  padding-right: $size * 2.5;
+  &--ghost-blue:active & {
+    &__inner {
+      border-color: darken($color-blue, 10%);
+      color: darken($color-blue, 10%);
+    }
+  }
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 11px;
-    right: 8px;
-    width: $size;
-    height: $size;
-    background: url('#{$static}/img/icons/icons--chevron-down-white.svg') no-repeat center center;
-    background-size: $size $size;
+  &--mobile {
+    @include mq(m) {
+      display: none;
+    }
   }
 
-  &[aria-expanded='true'] {
-    &::before {
-      transform: rotate(180deg);
+  &--mobile & {
+    &__inner {
+      padding: 0.4rem 0.5rem;
+
+      &:after {
+        content: '';
+        display: inline-block;
+        margin: 0 0 0 0.5rem;
+
+        width: 12px;
+        height: 8px;
+
+        background: {
+          image: url(#{$static}/img/icons/icons--chevron-down-white.svg);
+          repeat: no-repeat;
+          size: 12px 8px;
+        }
+
+        vertical-align: middle;
+      }
     }
   }
 
-  @include mq(m) {
-    display: none;
+  &--mobile[aria-expanded='true'] & {
+    &__inner:after {
+      transform: rotate(180deg);
+    }
   }
 }

src/components/button/_macro.njk

@@ -1,7 +1,4 @@
 {% macro onsButton(params) %}
-  {#- Define common attributes we can use for the toggle button type #}
-  {% set buttonToggleAttributes %} aria-haspopup="true" aria-expanded="false" aria-controls="{{ params.ariaControls }}" aria-label="{{ params.ariaLabel }}"{% endset %}
-
   <button
       type="{{ params.type if params.type else ('button' if params.print else 'submit') }}"
       class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}{% if params.print %} btn--print print__hidden u-d-no js-print-btn{% endif %}"
@@ -10,8 +7,7 @@
       {% if params.name %}name="{{ params.name }}"{% endif %}
       {% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
       {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
-      {% if params.isToggle %}{{ buttonToggleAttributes | safe }}{% endif %}
       >
-      {{- params.html | safe if params.html else params.text -}}
+      <span class="btn__inner">{{- params.html | safe if params.html else params.text -}}</span>
   </button>
 {% endmacro %}