@apolitical/component-library 1.18.8 → 2.0.0

package/styles/base/buttons/_buttons.scss

@@ -1,18 +1,18 @@
-@use 'sass:map';
 @use 'sass:meta';
-@import './../../functions',
-        './../../mixins',
-        './../../variables';
+@import './../../functions', './../../mixins', './../../variables';
 @import './icons', './mixins', './sizes';
 
 @layer base {
-  button, .button {
-    background: map.get($theme, 'button_primary_bg');
-    padding: px-to-rem(map.get($medium, 'padding-top')) px-to-rem(map.get($medium, 'padding-horizontal'))
-          px-to-rem(map.get($medium, 'padding-bottom')) px-to-rem(map.get($medium, 'padding-horizontal'));
+  button,
+  .button {
+    background: get-map($theme, 'button_primary_bg');
+    padding: px-to-rem(get-map($medium, 'padding-top'))
+      px-to-rem(get-map($medium, 'padding-horizontal'))
+      px-to-rem(get-map($medium, 'padding-bottom'))
+      px-to-rem(get-map($medium, 'padding-horizontal'));
     position: relative;
     text-align: center;
-    font-size: px-to-rem(map.get($medium, 'font-size'));
+    font-size: px-to-rem(get-map($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!
@@ -21,32 +21,47 @@
     box-sizing: border-box;
     display: inline-block;
 
-    &, &:hover, &:active, &:focus, &:focus-visible { color: map.get($theme, 'button_primary'); }
+    &,
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible {
+      color: get-map($theme, 'button_primary');
+    }
 
     &:hover {
-      background: map.get($theme, 'button_primary_bg_hover');
+      background: get-map($theme, 'button_primary_bg_hover');
     }
 
-    &:active, &.active {
-      background: map.get($theme, 'button_primary_bg_active');
+    &:active,
+    &.active {
+      background: get-map($theme, 'button_primary_bg_active');
     }
 
-    &:focus, &:focus-visible {
-      background: map.get($theme, 'button_primary_bg_focus');
+    &:focus,
+    &:focus-visible {
+      background: get-map($theme, 'button_primary_bg_focus');
     }
 
     @each $size, $styles in $sizes {
       &.#{$size} {
-        padding: px-to-rem(map.get($styles, 'padding-top')) px-to-rem(map.get($styles, 'padding-horizontal'))
-          px-to-rem(map.get($styles, 'padding-bottom')) px-to-rem(map.get($styles, 'padding-horizontal'));
-        font-size: px-to-rem(map.get($styles, 'font-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'))
+          px-to-rem(get-map($styles, 'padding-horizontal'));
+        font-size: px-to-rem(get-map($styles, 'font-size'));
+
+        &.icon {
+          margin-top: px-to-rem(get-map($styles, 'icon-offset'));
 
-          &.icon {
-            margin-top: px-to-rem(map.get($styles, 'icon-offset'));
+          &.left::before {
+            margin-right: px-to-rem(get-map($styles, 'icon-gutter'));
+          }
 
-            &.left::before { margin-right: px-to-rem(map.get($styles, 'icon-gutter')); }
-            &.right::before { margin-left: px-to-rem(map.get($styles, 'icon-gutter')); }
+          &.right::before {
+            margin-left: px-to-rem(get-map($styles, 'icon-gutter'));
           }
+        }
       }
     }
 
@@ -55,122 +70,162 @@
     }
 
     &.destructive {
-        &, &:hover, &:active, &:focus, &:focus-visible {
-          background: map.get($theme, 'button_primary_destructive_bg');
-          color: map.get($theme, 'button_primary_destructive');
-        }
-
-        &:hover, &:active {
-          background: map.get($theme, 'button_primary_destructive_bg_hover');
-        }
+      &,
+      &:hover,
+      &:active,
+      &:focus,
+      &:focus-visible {
+        background: get-map($theme, 'button_primary_destructive_bg');
+        color: get-map($theme, 'button_primary_destructive');
+      }
 
-        &:focus, &:focus-visible {
-          box-shadow: $outline map.get($theme, 'button_primary_destructive_box-shadow');
-        }
+      &: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 {
       @include transition(background color border-color);
 
-      background: map.get($theme, 'button_secondary_bg');
-      border: px-to-rem(map.get($secondary, 'border')) solid map.get($theme, 'button_secondary_border');
+      background: get-map($theme, 'button_secondary_bg');
+      border: px-to-rem(get-map($secondary, 'border')) solid
+        get-map($theme, 'button_secondary_border');
 
-        &, &:hover { color: map.get($theme, 'button_secondary'); }
+      &,
+      &:hover {
+        color: get-map($theme, 'button_secondary');
+      }
 
-        &:hover {
-          background: map.get($theme, 'button_secondary_bg_hover');
-        }
+      &:hover {
+        background: get-map($theme, 'button_secondary_bg_hover');
+      }
 
-        &:active, &:focus, &:focus-visible {
-          color: map.get($theme, 'button_secondary_focus');
-          border-color: map.get($theme, 'button_secondary_border_focus');
-        }
+      &:active,
+      &:focus,
+      &:focus-visible {
+        color: get-map($theme, 'button_secondary_focus');
+        border-color: get-map($theme, 'button_secondary_border_focus');
+      }
 
-        &:active {
-          background: map.get($theme, 'button_secondary_bg_active');
-        }
+      &:active {
+        background: get-map($theme, 'button_secondary_bg_active');
+      }
 
-        &:focus, &:focus-visible {
-          background: map.get($theme, 'button_secondary_bg_focus');
-        }
+      &:focus,
+      &:focus-visible {
+        background: get-map($theme, 'button_secondary_bg_focus');
+      }
 
-        &.muted {
-          border-color: map.get($theme, 'button_secondary_border_muted');
+      &.muted {
+        border-color: get-map($theme, 'button_secondary_border_muted');
 
-            &, &:active {
-              background: map.get($theme, 'button_secondary_bg_muted');
-              color: map.get($theme, 'button_secondary_muted');
-            }
+        &,
+        &:active {
+          background: get-map($theme, 'button_secondary_bg_muted');
+          color: get-map($theme, 'button_secondary_muted');
+        }
 
-            &:hover, &:focus, &:focus-visible {
-              background: map.get($theme, 'button_secondary_bg_muted_hover');
-              color: map.get($theme, 'button_secondary_muted_hover');
-              border-color: map.get($theme, 'button_secondary_border_muted_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');
         }
+      }
 
-        &.destructive {
-            &, &:hover, &:active, &:focus, &:focus-visible {
-              background: map.get($theme, 'button_secondary_bg_destructive');
-              color: map.get($theme, 'button_secondary_destructive');
-              border-color: map.get($theme, 'button_secondary_border_destructive');
-            }
+      &.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');
         }
+      }
 
-        &.disabled {
-          &, &:hover, &:active, &:focus, &:focus-visible {
-            background: map.get($theme, 'button_secondary_bg_disabled');
-            color: map.get($theme, 'button_secondary_disabled');
-            border-color: map.get($theme, 'button_secondary_border_disabled');
-          }
+      &.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');
         }
+      }
     }
 
     &.tertiary {
       @include transition(color text-decoration-color);
 
-      padding: px-to-rem(map.get($tertiary, 'padding-top')) px-to-rem(map.get($tertiary, 'padding-horizontal'))
-        px-to-rem(map.get($tertiary, 'padding-bottom')) px-to-rem(map.get($tertiary, 'padding-horizontal'));
-      bottom: px-to-rem(map.get($tertiary, 'padding-top'));
-      right: px-to-rem(map.get($tertiary, 'padding-horizontal'));
+      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'))
+        px-to-rem(get-map($tertiary, 'padding-horizontal'));
+      bottom: px-to-rem(get-map($tertiary, 'padding-top'));
+      right: px-to-rem(get-map($tertiary, 'padding-horizontal'));
       text-decoration: underline;
       text-decoration-color: transparent;
 
-      &, &:focus, &:focus-visible {
-        background: map.get($theme, 'button_tertiary_bg');
-        color: map.get($theme, 'button_tertiary');
-        text-decoration-color: map.get($theme, 'button_tertiary_text-decoration');
+      &,
+      &: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, &:active {
+      &:hover,
+      &:active {
         text-decoration-color: currentcolor;
       }
 
       &:hover {
-        color: map.get($theme, 'button_tertiary_hover');
+        color: get-map($theme, 'button_tertiary_hover');
       }
 
       &:active {
-        color: map.get($theme, 'button_tertiary_active');
+        color: get-map($theme, 'button_tertiary_active');
       }
 
       &.muted {
-        color: map.get($theme, 'button_tertiary_muted');
+        color: get-map($theme, 'button_tertiary_muted');
 
-          &:hover, &:focus, &:focus-visible {
-            color: map.get($theme, 'button_tertiary_muted_hover');
-          }
+        &:hover,
+        &:focus,
+        &:focus-visible {
+          color: get-map($theme, 'button_tertiary_muted_hover');
+        }
       }
 
       &.disabled {
-        &, &:hover, &:active, &:focus, &:focus-visible {
-          background: map.get($theme, 'button_tertiary_disabled_bg');
-          color: map.get($theme, 'button_tertiary_disabled');
-          text-decoration-color: map.get($theme, 'button_tertiary_disabled_text-decoration');
+        &,
+        &: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'
+          );
         }
       }
 
+      &.full-width {
+        right: 0;
+      }
     }
 
     &.icon {
@@ -178,77 +233,95 @@
       flex-flow: row;
       place-content: center;
 
+      &::before {
+        content: '';
+        background: currentcolor;
+        width: px-to-rem(get-map($medium, 'icon-width'));
+        height: px-to-rem(get-map($medium, 'icon-width'));
+        display: block;
+      }
+
+      &.left {
         &::before {
-          content: '';
-          background: currentcolor;
-          width: px-to-rem(map.get($medium, 'icon-width'));
-          height: px-to-rem(map.get($medium, 'icon-width'));
-          display: block;
+          margin-right: px-to-rem(get-map($medium, 'icon-gutter'));
         }
 
-        &.left {
-            &::before { margin-right: px-to-rem(map.get($medium, 'icon-gutter')); }
-
-            &.no-text::before { margin-right: 0; }
+        &.no-text::before {
+          margin-right: 0;
         }
+      }
 
-        &.right {
-          &::before {
-            margin-left: px-to-rem(map.get($medium, 'icon-gutter'));
-            order: 2;
-          }
+      &.right {
+        &::before {
+          margin-left: px-to-rem(get-map($medium, 'icon-gutter'));
+          order: 2;
+        }
 
-          &.no-text::before { margin-left: 0; }
+        &.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);
+      @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); }
+        @at-root {
+          %icon-#{$icon} {
+            @include icon-styling($icon, $icon-sizes);
           }
+        }
 
-          &.#{$icon} {
-            @extend %icon-#{$icon};
-          }
+        &.#{$icon} {
+          @extend %icon-#{$icon};
+        }
 
-          &.hover_#{$icon} {
-            &:hover, &:focus, &:focus-visible {
-              @extend %icon-#{$icon};
-            }
+        &.hover_#{$icon} {
+          &:hover,
+          &:focus,
+          &:focus-visible {
+            @extend %icon-#{$icon};
           }
-
         }
+      }
 
-        &.animate {
-          &::before {
-            @include transition(transform, #{map.get($animation, 'duration')}s, ease);
-
-            transform: none;
-          }
+      &.animate {
+        &::before {
+          @include transition(transform, #{get-map($animation, 'duration')}s, ease);
 
-          &.bounce {
-            @include animate {
-              @keyframes bounce {
-                0%, 100% { transform: scale(1); }
+          transform: none;
+        }
 
-                70% {
-                  transform: scale(#{map.get($animation-bounce, 'scale')});
-                }
+        &.bounce {
+          @include animate {
+            @keyframes bounce {
+              0%,
+              100% {
+                transform: scale(1);
               }
 
-              &:focus, &:active, &.do-animation {
-                &::before { animation: bounce #{map.get($animation-bounce, 'duration')}s #{map.get($animation-bounce, 'iteration')}; }
+              70% {
+                transform: scale(#{get-map($animation-bounce, 'scale')});
               }
-
             }
-          }
 
-          &.rotate-180::before {
-            transform: rotate(180deg);
+            &:focus,
+            &:active,
+            &.do-animation {
+              &::before {
+                animation: bounce #{get-map($animation-bounce, 'duration')}s #{get-map(
+                    $animation-bounce,
+                    'iteration'
+                  )};
+              }
+            }
           }
+        }
 
+        &.rotate-180::before {
+          transform: rotate(180deg);
         }
+      }
     }
 
     &.disabled {
@@ -259,44 +332,48 @@
     &[data-hover-text] {
       position: relative;
 
-        &::before, .text {
-          @include transition(opacity);
+      &::before,
+      .text {
+        @include transition(opacity);
 
-          opacity: 1;
-        }
+        opacity: 1;
+      }
 
-        &::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(map.get($secondary-destruction, 'offset'));
-          right: map.get($secondary-destruction, 'right');
-          display: flex;
-          align-items: center;
-          justify-content: center;
+      &::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;
+      }
+
+      &:hover,
+      &:focus {
+        &::before,
+        .text {
           opacity: 0;
         }
 
-        &:hover, &:focus {
-          &::before, .text {
-            opacity: 0;
-          }
-
-          &::after {
-            content: attr(data-hover-text);
-            width: 100%;
-            height: 100%;
-            right: 0;
-            opacity: 1;
-          }
-
+        &::after {
+          content: attr(data-hover-text);
+          width: 100%;
+          height: 100%;
+          right: 0;
+          opacity: 1;
         }
-
+      }
     }
-
   }
 }
-    

package/styles/base/buttons/_icons.scss

@@ -8,29 +8,29 @@
 // Otherwise, put the value in pixels.
 
 $icons: ('arrow_left', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
-        ('arrow_right', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
-        ('arrow_corner-down_right', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),
-        ('arrow_corner-down_left', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),
-        ('arrow-down', (d, d, 4, 10), (d, d, 3, 8), (d, d, 4, d)),
-        ('chevron_left', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
-        ('chevron_right', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
-        ('close', (48, 48, 0, 0), (32, 32, 0, 0), (24, 24, 0, 0)),
-        ('ellipsis', (48, 48, 0, 0), (32, 32, 0, 0), (16, 16, 0, 0)),
-        ('flag', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
-        ('heart', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
-        ('heart_empty', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
-        ('navigation_arrow', (d, d, 4, 10), (d, d, d, d), (14, 14, d, 10)),
-        ('pencil', (d, d, d, d), (d, d, d, 11), (d, d, 3, 9)),
-        ('pencil-paper', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
-        ('plus', (d, d, 4, d), (d, d, 2, d), (11, 11, 3, d)),
-        ('share', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
-        ('share_copy-link', (30, 29, d, d), (22, 21, d, d), (d, d, d, d)),
-        ('share_email', (30, 21, d, d), (24, 17, d, d), (d, d, d, d)),
-        ('social_facebook', (40, 40, d, d), (32, 32, d, d), (d, d, d, d)),
-        ('social_linkedin', (40, 40, d, d), (32, 32, d, d), (d, d, d, d)),
-        ('social_twitter', (40, 40, d, d), (32, 32, d, d), (d, d, d, d)),
-        ('speech-bubble_square_thick', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
-        ('star', (16, 16, 0, 0), (d, d, 0, 0), (16, 16, 0, 0)),
-        ('star_empty', (16, 16, 0, 0), (d, d, 0, 0), (16, 16, 0, 0)),
-        ('tick', (14, 11, 8, 10), (14, 11, 5, 8), (9, 7, 6, 6)),
-        ('trash', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10));
+  ('arrow_right', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
+  ('arrow_corner-down_right', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),
+  ('arrow_corner-down_left', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),
+  ('arrow-down', (d, d, 4, 10), (d, d, 3, 8), (d, d, 4, d)),
+  ('chevron_left', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
+  ('chevron_right', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
+  ('close', (48, 48, 0, 0), (32, 32, 0, 0), (24, 24, 0, 0)),
+  ('ellipsis', (48, 48, 0, 0), (32, 32, 0, 0), (16, 16, 0, 0)),
+  ('flag', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+  ('heart', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+  ('heart_empty', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+  ('navigation_arrow', (d, d, 4, 10), (d, d, d, d), (14, 14, d, 10)),
+  ('pencil', (d, d, d, d), (d, d, d, 11), (d, d, 3, 9)),
+  ('pencil-paper', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+  ('plus', (d, d, 4, d), (d, d, 2, d), (11, 11, 3, d)),
+  ('share', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+  ('share_copy-link', (30, 29, d, d), (22, 21, d, d), (d, d, d, d)),
+  ('share_email', (30, 21, d, d), (24, 17, d, d), (d, d, d, d)),
+  ('social_facebook', (40, 40, d, d), (32, 32, d, d), (d, d, d, d)),
+  ('social_linkedin', (40, 40, d, d), (32, 32, d, d), (d, d, d, d)),
+  ('social_twitter', (40, 40, d, d), (32, 32, d, d), (d, d, d, d)),
+  ('speech-bubble_square_thick', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+  ('star', (16, 16, 0, 0), (d, d, 0, 0), (16, 16, 0, 0)),
+  ('star_empty', (16, 16, 0, 0), (d, d, 0, 0), (16, 16, 0, 0)),
+  ('tick', (14, 11, 8, 10), (14, 11, 5, 8), (9, 7, 6, 6)),
+  ('trash', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10));

package/styles/base/buttons/_index.scss

@@ -1,2 +1 @@
-@import 'buttons',
-        'button-wrapper';
+@import 'buttons', 'button-wrapper';

package/styles/base/buttons/_mixins.scss

@@ -2,7 +2,9 @@
 @import './../../functions';
 
 @mixin icon-styling($icon, $icon-sizes) {
-  &::before { @include image('icons/#{$icon}.svg', true); }
+  &::before {
+    @include image('icons/#{$icon}.svg', true);
+  }
 
   @each $size, $styles in $icon-sizes {
     @include icon-classes(width, list.nth($styles, 1), $size);
@@ -19,9 +21,13 @@
   @if $value != 'd' {
     $classname: '';
 
-    @if $class { $classname: '.#{$class}' }
+    @if $class {
+      $classname: '.#{$class}';
+    }
 
-    @if $size != 'medium' { $classname: $classname + '.#{$size}'; }
+    @if $size != 'medium' {
+      $classname: $classname + '.#{$size}';
+    }
 
     &#{$classname}:before {
       #{$property}: px-to-rem($value);