@apolitical/component-library 8.11.2 → 8.11.3-lrn-102

package/styles/base/buttons/_buttons.scss

@@ -3,432 +3,434 @@
 @import './icons', './mixins';
 
 @layer base {
-  button,
-  .button {
-    @include transition(background color border-color text-decoration-color);
-
-    background: get-map($theme, 'button_primary_bg');
-    padding: px-to-rem(get-map($button-medium, 'padding-top'))
-      px-to-rem(get-map($button-medium, 'padding-horizontal'))
-      px-to-rem(get-map($button-medium, 'padding-bottom'));
-    position: relative;
-    text-align: center;
-    font-size: px-to-rem(get-map($button-medium, 'font-size'));
-    font-weight: 700;
-    text-decoration: none;
-    border-radius: 360rem; // Completely round corners. This could be any large number but 360 evokes a circle well!
-    border: none;
-    cursor: pointer;
-    box-sizing: border-box;
-    display: inline-block;
-
-    &,
-    &:hover,
-    &:active,
-    &:focus,
-    &:focus-visible {
-      color: get-map($theme, 'button_primary');
-    }
-
-    &:hover {
-      background: get-map($theme, 'button_primary_bg_hover');
-    }
-
-    &:active,
-    &.active {
-      background: get-map($theme, 'button_primary_bg_active');
-    }
-
-    &:focus,
-    &:focus-visible {
-      background: get-map($theme, 'button_primary_bg_focus');
-    }
-
-    // TODO: remove when we have new styling
-    &.new {
-      background: get-map($theme, 'button_new_primary_bg');
-      padding: px-to-rem(get-map($button-medium, 'padding-top_new'))
-        px-to-rem(get-map($button-medium, 'padding-horizontal_new'))
-        px-to-rem(get-map($button-medium, 'padding-bottom_new'));
-      color: get-map($theme, 'button_primary');
-
-      &:hover,
-      &:focus,
-      &:focus-visible,
-      &:active {
-        background: get-map($theme, 'button_new_primary_bg_hover');
-      }
-    }
-
-    @each $size, $styles in $sizes {
-      &.#{$size} {
-        padding: px-to-rem(get-map($styles, 'padding-top'))
-          px-to-rem(get-map($styles, 'padding-horizontal'))
-          px-to-rem(get-map($styles, 'padding-bottom'));
-        font-size: px-to-rem(get-map($styles, 'font-size'));
-
-        // TODO: remove `new` styling when we switch to new styling everywhere
-        &.new {
-          padding: px-to-rem(get-map($styles, 'padding-top_new'))
-            px-to-rem(get-map($styles, 'padding-horizontal_new'))
-            px-to-rem(get-map($styles, 'padding-bottom_new'));
-        }
-
-        &.icon {
-          margin-top: px-to-rem(get-map($styles, 'icon-offset'));
-
-          &.left::before {
-            margin-right: px-to-rem(get-map($styles, 'icon-gutter'));
-          }
-
-          &.right::before {
-            margin-left: px-to-rem(get-map($styles, 'icon-gutter'));
-          }
-        }
-      }
-    }
-
-    &.full-width {
-      width: 100%;
-    }
+  .v1styles {
+    button,
+    .button {
+      @include transition(background color border-color text-decoration-color);
+
+      background: get-map($theme, 'button_primary_bg');
+      padding: px-to-rem(get-map($button-medium, 'padding-top'))
+        px-to-rem(get-map($button-medium, 'padding-horizontal'))
+        px-to-rem(get-map($button-medium, 'padding-bottom'));
+      position: relative;
+      text-align: center;
+      font-size: px-to-rem(get-map($button-medium, 'font-size'));
+      font-weight: 700;
+      text-decoration: none;
+      border-radius: 360rem; // Completely round corners. This could be any large number but 360 evokes a circle well!
+      border: none;
+      cursor: pointer;
+      box-sizing: border-box;
+      display: inline-block;
 
-    &.destructive {
       &,
       &:hover,
       &:active,
       &:focus,
       &:focus-visible {
-        background: get-map($theme, 'button_primary_destructive_bg');
-        color: get-map($theme, 'button_primary_destructive');
-      }
-
-      &:hover,
-      &:active {
-        background: get-map($theme, 'button_primary_destructive_bg_hover');
-      }
-
-      &:focus,
-      &:focus-visible {
-        box-shadow: $outline get-map($theme, 'button_primary_destructive_box-shadow');
-      }
-    }
-
-    &.secondary {
-      background: get-map($theme, 'button_secondary_bg');
-      border: px-to-rem(get-map($secondary, 'border')) solid
-        get-map($theme, 'button_secondary_border');
-
-      &,
-      &:hover {
-        color: get-map($theme, 'button_secondary');
+        color: get-map($theme, 'button_primary');
       }
 
       &:hover {
-        background: get-map($theme, 'button_secondary_bg_hover');
+        background: get-map($theme, 'button_primary_bg_hover');
       }
 
       &:active,
-      &:focus,
-      &:focus-visible {
-        color: get-map($theme, 'button_secondary_focus');
-        border-color: get-map($theme, 'button_secondary_border_focus');
-      }
-
-      &:active {
-        background: get-map($theme, 'button_secondary_bg_active');
+      &.active {
+        background: get-map($theme, 'button_primary_bg_active');
       }
 
       &:focus,
       &:focus-visible {
-        background: get-map($theme, 'button_secondary_bg_focus');
+        background: get-map($theme, 'button_primary_bg_focus');
       }
 
-      &.muted {
-        border-color: get-map($theme, 'button_secondary_border_muted');
+      // TODO: remove when we have new styling
+      &.new {
+        background: get-map($theme, 'button_new_primary_bg');
+        padding: px-to-rem(get-map($button-medium, 'padding-top_new'))
+          px-to-rem(get-map($button-medium, 'padding-horizontal_new'))
+          px-to-rem(get-map($button-medium, 'padding-bottom_new'));
+        color: get-map($theme, 'button_primary');
 
-        &,
+        &:hover,
+        &:focus,
+        &:focus-visible,
         &:active {
-          background: get-map($theme, 'button_secondary_bg_muted');
-          color: get-map($theme, 'button_secondary_muted');
+          background: get-map($theme, 'button_new_primary_bg_hover');
         }
+      }
 
-        &:hover,
-        &:focus,
-        &:focus-visible {
-          background: get-map($theme, 'button_secondary_bg_muted_hover');
-          color: get-map($theme, 'button_secondary_muted_hover');
-          border-color: get-map($theme, 'button_secondary_border_muted_hover');
+      @each $size, $styles in $sizes {
+        &.#{$size} {
+          padding: px-to-rem(get-map($styles, 'padding-top'))
+            px-to-rem(get-map($styles, 'padding-horizontal'))
+            px-to-rem(get-map($styles, 'padding-bottom'));
+          font-size: px-to-rem(get-map($styles, 'font-size'));
+
+          // TODO: remove `new` styling when we switch to new styling everywhere
+          &.new {
+            padding: px-to-rem(get-map($styles, 'padding-top_new'))
+              px-to-rem(get-map($styles, 'padding-horizontal_new'))
+              px-to-rem(get-map($styles, 'padding-bottom_new'));
+          }
+
+          &.icon {
+            margin-top: px-to-rem(get-map($styles, 'icon-offset'));
+
+            &.left::before {
+              margin-right: px-to-rem(get-map($styles, 'icon-gutter'));
+            }
+
+            &.right::before {
+              margin-left: px-to-rem(get-map($styles, 'icon-gutter'));
+            }
+          }
         }
       }
 
+      &.full-width {
+        width: 100%;
+      }
+
       &.destructive {
         &,
         &:hover,
         &:active,
         &:focus,
         &:focus-visible {
-          background: get-map($theme, 'button_secondary_bg_destructive');
-          color: get-map($theme, 'button_secondary_destructive');
-          border-color: get-map($theme, 'button_secondary_border_destructive');
+          background: get-map($theme, 'button_primary_destructive_bg');
+          color: get-map($theme, 'button_primary_destructive');
         }
-      }
 
-      &.disabled {
-        &,
         &:hover,
-        &:active,
+        &:active {
+          background: get-map($theme, 'button_primary_destructive_bg_hover');
+        }
+
         &:focus,
         &:focus-visible {
-          background: get-map($theme, 'button_secondary_bg_disabled');
-          color: get-map($theme, 'button_secondary_disabled');
-          border-color: get-map($theme, 'button_secondary_border_disabled');
+          box-shadow: $outline get-map($theme, 'button_primary_destructive_box-shadow');
         }
       }
 
-      // TODO: remove when we have new styling
-      &.new {
-        border: none;
+      &.secondary {
+        background: get-map($theme, 'button_secondary_bg');
+        border: px-to-rem(get-map($secondary, 'border')) solid
+          get-map($theme, 'button_secondary_border');
 
         &,
-        &:hover,
+        &:hover {
+          color: get-map($theme, 'button_secondary');
+        }
+
+        &:hover {
+          background: get-map($theme, 'button_secondary_bg_hover');
+        }
+
         &:active,
         &:focus,
         &:focus-visible {
-          color: get-map($theme, 'button_new_secondary');
+          color: get-map($theme, 'button_secondary_focus');
+          border-color: get-map($theme, 'button_secondary_border_focus');
+        }
+
+        &:active {
+          background: get-map($theme, 'button_secondary_bg_active');
         }
 
-        &:hover,
-        &:active,
         &:focus,
         &:focus-visible {
-          background: get-map($theme, 'button_new_secondary_bg_hover');
+          background: get-map($theme, 'button_secondary_bg_focus');
         }
-      }
-    }
 
-    &.tertiary {
-      &:not(.new) {
-        padding: px-to-rem(get-map($tertiary, 'padding-top'))
-          px-to-rem(get-map($tertiary, 'padding-horizontal'))
-          px-to-rem(get-map($tertiary, 'padding-bottom'));
-        bottom: px-to-rem(get-map($tertiary, 'padding-top'));
-        right: px-to-rem(get-map($tertiary, 'padding-horizontal'));
-      }
+        &.muted {
+          border-color: get-map($theme, 'button_secondary_border_muted');
 
-      text-decoration: underline;
-      text-decoration-color: transparent;
+          &,
+          &:active {
+            background: get-map($theme, 'button_secondary_bg_muted');
+            color: get-map($theme, 'button_secondary_muted');
+          }
 
-      &,
-      &:focus,
-      &:focus-visible {
-        background: get-map($theme, 'button_tertiary_bg');
-        color: get-map($theme, 'button_tertiary');
-        text-decoration-color: get-map($theme, 'button_tertiary_text-decoration');
-      }
+          &:hover,
+          &:focus,
+          &:focus-visible {
+            background: get-map($theme, 'button_secondary_bg_muted_hover');
+            color: get-map($theme, 'button_secondary_muted_hover');
+            border-color: get-map($theme, 'button_secondary_border_muted_hover');
+          }
+        }
 
-      &:hover,
-      &:active {
-        text-decoration-color: currentcolor;
-      }
+        &.destructive {
+          &,
+          &:hover,
+          &:active,
+          &:focus,
+          &:focus-visible {
+            background: get-map($theme, 'button_secondary_bg_destructive');
+            color: get-map($theme, 'button_secondary_destructive');
+            border-color: get-map($theme, 'button_secondary_border_destructive');
+          }
+        }
 
-      &:hover {
-        color: get-map($theme, 'button_tertiary_hover');
-      }
+        &.disabled {
+          &,
+          &:hover,
+          &:active,
+          &:focus,
+          &:focus-visible {
+            background: get-map($theme, 'button_secondary_bg_disabled');
+            color: get-map($theme, 'button_secondary_disabled');
+            border-color: get-map($theme, 'button_secondary_border_disabled');
+          }
+        }
 
-      &:active {
-        color: get-map($theme, 'button_tertiary_active');
-      }
+        // TODO: remove when we have new styling
+        &.new {
+          border: none;
 
-      &.muted {
-        color: get-map($theme, 'button_tertiary_muted');
+          &,
+          &:hover,
+          &:active,
+          &:focus,
+          &:focus-visible {
+            color: get-map($theme, 'button_new_secondary');
+          }
 
-        &:hover,
-        &:focus,
-        &:focus-visible {
-          color: get-map($theme, 'button_tertiary_muted_hover');
+          &:hover,
+          &:active,
+          &:focus,
+          &:focus-visible {
+            background: get-map($theme, 'button_new_secondary_bg_hover');
+          }
         }
       }
 
-      &.disabled {
-        &,
-        &:hover,
-        &:active,
-        &:focus,
-        &:focus-visible {
-          background: get-map($theme, 'button_tertiary_disabled_bg');
-          color: get-map($theme, 'button_tertiary_disabled');
-          text-decoration-color: get-map(
-            $theme,
-            'button_tertiary_disabled_text-decoration'
-          );
+      &.tertiary {
+        &:not(.new) {
+          padding: px-to-rem(get-map($tertiary, 'padding-top'))
+            px-to-rem(get-map($tertiary, 'padding-horizontal'))
+            px-to-rem(get-map($tertiary, 'padding-bottom'));
+          bottom: px-to-rem(get-map($tertiary, 'padding-top'));
+          right: px-to-rem(get-map($tertiary, 'padding-horizontal'));
         }
-      }
 
-      &.full-width {
-        right: 0;
-      }
+        text-decoration: underline;
+        text-decoration-color: transparent;
 
-      // TODO: remove when we have new styling
-      &.new {
-        color: get-map($theme, 'button_new_tertiary');
-        text-decoration-color: currentcolor;
-
-        &:hover,
-        &:active,
+        &,
         &:focus,
         &:focus-visible {
-          background: get-map($theme, 'button_new_secondary_bg_hover');
-          color: get-map($theme, 'button_new_secondary');
+          background: get-map($theme, 'button_tertiary_bg');
+          color: get-map($theme, 'button_tertiary');
+          text-decoration-color: get-map($theme, 'button_tertiary_text-decoration');
         }
-      }
-    }
-
-    &.icon {
-      display: inline-flex;
-      align-items: center;
-      flex-flow: row;
-      place-content: center;
-
-      &::before {
-        content: '';
-        background: currentcolor;
-        width: px-to-rem(get-map($button-medium, 'icon-width'));
-        height: px-to-rem(get-map($button-medium, 'icon-width'));
-        display: inline-block;
-        vertical-align: middle;
-      }
 
-      &.left {
-        &::before {
-          margin-right: px-to-rem(get-map($button-medium, 'icon-gutter'));
+        &:hover,
+        &:active {
+          text-decoration-color: currentcolor;
         }
 
-        &.no-text::before {
-          margin-right: 0;
+        &:hover {
+          color: get-map($theme, 'button_tertiary_hover');
         }
-      }
 
-      &.right {
-        &::before {
-          margin-left: px-to-rem(get-map($button-medium, 'icon-gutter'));
-          order: 2;
+        &:active {
+          color: get-map($theme, 'button_tertiary_active');
         }
 
-        &.no-text::before {
-          margin-left: 0;
-        }
-      }
+        &.muted {
+          color: get-map($theme, 'button_tertiary_muted');
 
-      @each $icon, $large-icon, $medium-icon, $small-icon in $icons {
-        $icon-sizes: ('large', $large-icon), ('medium', $medium-icon),
-          ('small', $small-icon);
+          &:hover,
+          &:focus,
+          &:focus-visible {
+            color: get-map($theme, 'button_tertiary_muted_hover');
+          }
+        }
 
-        @at-root {
-          %icon-#{$icon} {
-            @include icon-styling($icon, $icon-sizes);
+        &.disabled {
+          &,
+          &:hover,
+          &:active,
+          &:focus,
+          &:focus-visible {
+            background: get-map($theme, 'button_tertiary_disabled_bg');
+            color: get-map($theme, 'button_tertiary_disabled');
+            text-decoration-color: get-map(
+              $theme,
+              'button_tertiary_disabled_text-decoration'
+            );
           }
         }
 
-        &.#{$icon} {
-          @extend %icon-#{$icon};
+        &.full-width {
+          right: 0;
         }
 
-        &.hover_#{$icon} {
+        // TODO: remove when we have new styling
+        &.new {
+          color: get-map($theme, 'button_new_tertiary');
+          text-decoration-color: currentcolor;
+
           &:hover,
+          &:active,
           &:focus,
           &:focus-visible {
-            @extend %icon-#{$icon};
+            background: get-map($theme, 'button_new_secondary_bg_hover');
+            color: get-map($theme, 'button_new_secondary');
           }
         }
       }
 
-      &.animate {
+      &.icon {
+        display: inline-flex;
+        align-items: center;
+        flex-flow: row;
+        place-content: center;
+
         &::before {
-          @include transition(transform, #{get-map($animation, 'duration')}s, ease);
+          content: '';
+          background: currentcolor;
+          width: px-to-rem(get-map($button-medium, 'icon-width'));
+          height: px-to-rem(get-map($button-medium, 'icon-width'));
+          display: inline-block;
+          vertical-align: middle;
+        }
 
-          transform: none;
+        &.left {
+          &::before {
+            margin-right: px-to-rem(get-map($button-medium, 'icon-gutter'));
+          }
+
+          &.no-text::before {
+            margin-right: 0;
+          }
         }
 
-        &.bounce {
-          @include animate {
-            @keyframes bounce {
-              0%,
-              100% {
-                transform: scale(1);
-              }
+        &.right {
+          &::before {
+            margin-left: px-to-rem(get-map($button-medium, 'icon-gutter'));
+            order: 2;
+          }
 
-              70% {
-                transform: scale(#{get-map($animation-bounce, 'scale')});
-              }
+          &.no-text::before {
+            margin-left: 0;
+          }
+        }
+
+        @each $icon, $large-icon, $medium-icon, $small-icon in $icons {
+          $icon-sizes: ('large', $large-icon), ('medium', $medium-icon),
+            ('small', $small-icon);
+
+          @at-root {
+            %icon-#{$icon} {
+              @include icon-styling($icon, $icon-sizes);
             }
+          }
 
+          &.#{$icon} {
+            @extend %icon-#{$icon};
+          }
+
+          &.hover_#{$icon} {
+            &:hover,
             &:focus,
-            &:active,
-            &.do-animation {
-              &::before {
-                animation: bounce #{get-map($animation-bounce, 'duration')}s #{get-map(
-                    $animation-bounce,
-                    'iteration'
-                  )};
-              }
+            &:focus-visible {
+              @extend %icon-#{$icon};
             }
           }
         }
 
-        &.rotate-180::before {
-          transform: rotate(180deg);
-        }
-      }
-    }
+        &.animate {
+          &::before {
+            @include transition(transform, #{get-map($animation, 'duration')}s, ease);
 
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.3;
-    }
+            transform: none;
+          }
 
-    &[data-hover-text] {
-      position: relative;
+          &.bounce {
+            @include animate {
+              @keyframes bounce {
+                0%,
+                100% {
+                  transform: scale(1);
+                }
+
+                70% {
+                  transform: scale(#{get-map($animation-bounce, 'scale')});
+                }
+              }
 
-      &::before,
-      .text {
-        @include transition(opacity);
+              &:focus,
+              &:active,
+              &.do-animation {
+                &::before {
+                  animation: bounce #{get-map($animation-bounce, 'duration')}s #{get-map(
+                      $animation-bounce,
+                      'iteration'
+                    )};
+                }
+              }
+            }
+          }
 
-        opacity: 1;
+          &.rotate-180::before {
+            transform: rotate(180deg);
+          }
+        }
       }
 
-      &::after {
-        @include transition(
-          width height opacity right,
-          0s 0s 0.2s 0.2s,
-          ease-in-out,
-          0s 0s 0.1s 0.1s
-        );
-
-        content: '';
-        width: 0;
-        height: 0;
-        position: absolute;
-        top: px-to-rem(get-map($secondary-destruction, 'offset'));
-        right: get-map($secondary-destruction, 'right');
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.3;
       }
 
-      &:hover,
-      &:focus {
+      &[data-hover-text] {
+        position: relative;
+
         &::before,
         .text {
-          opacity: 0;
+          @include transition(opacity);
+
+          opacity: 1;
         }
 
         &::after {
-          content: attr(data-hover-text);
-          width: 100%;
-          height: 100%;
-          right: 0;
-          opacity: 1;
+          @include transition(
+            width height opacity right,
+            0s 0s 0.2s 0.2s,
+            ease-in-out,
+            0s 0s 0.1s 0.1s
+          );
+
+          content: '';
+          width: 0;
+          height: 0;
+          position: absolute;
+          top: px-to-rem(get-map($secondary-destruction, 'offset'));
+          right: get-map($secondary-destruction, 'right');
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          opacity: 0;
+        }
+
+        &:hover,
+        &:focus {
+          &::before,
+          .text {
+            opacity: 0;
+          }
+
+          &::after {
+            content: attr(data-hover-text);
+            width: 100%;
+            height: 100%;
+            right: 0;
+            opacity: 1;
+          }
         }
       }
     }