@rypen-dev/shared-components 4.1.0 → 4.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects.",
-	"version": "4.1.0",
+	"version": "4.1.1",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/_variables.scss

@@ -170,6 +170,8 @@ $true-max-width: 1920px !default;
 
 $dealer-base-radius: 5px !default;
 
+$single-space: 20px !default;
+
 // Buttons
 $dealer-button-radius: $dealer-base-radius !default;
 

package/scss/checkout.scss

@@ -0,0 +1,15 @@
+.order-summary {
+    .value {
+        font-size: 1.25rem;
+    }
+
+    .price:not(.color-secondary-purple) {
+        color: $primary;
+    }
+
+    @media print, screen and (min-width: map-get($breakpoints, large)) {
+        &.cart-summary {
+            width: 330px;
+        }
+    }
+}

package/scss/partials/_buttons.scss

@@ -724,6 +724,11 @@ button,
     &.multi-line {
         line-height: 1.8 !important;
         padding: 14px 30px;
+
+        &.narrow {
+            padding-left: 14px;
+            padding-right: 14px;
+        }
     }
 
     &.no-margin {
@@ -887,10 +892,7 @@ button,
     > .button {
         margin-left: 5px;
         margin-right: 5px;
-    }
 
-    > button,
-    > .button {
         &:first-child {
             margin-left: 0;
         }
@@ -900,16 +902,6 @@ button,
         }
     }
 
-    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
-        > button,
-        > .button {
-            &.small-full {
-                margin-left: 0;
-                margin-right: 0;
-            }
-        }
-    }
-
     &.grid-x {
         > .cell {
             padding-left: 5px;
@@ -925,8 +917,16 @@ button,
         }
     }
 
-    &.small-stacked {
-        @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+        > button,
+        > .button {
+            &.small-full {
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+    
+        &.small-stacked {
             > .cell {
                 padding-left: 0;
                 padding-right: 0;
@@ -962,8 +962,8 @@ button,
     }
 }
 
-@media print, screen and (min-width: map-get($breakpoints, medium)) {
-    .medium-button-row {
+.medium-button-row {
+    @media print, screen and (min-width: map-get($breakpoints, medium)) {
         > button,
         > .button {
             margin-left: 5px;

package/scss/partials/_forms.scss

@@ -22,6 +22,18 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0;
 }
 
+@supports (-moz-appearance:none) {
+    .input-container.date {
+        [type="date"][disabled] {
+            padding-right: 32px;
+        }
+
+        &.small [type="date"][disabled] {
+            padding-right: 30px;
+        }
+    }
+}
+
 [type='text'],
 [type='password'],
 [type='date'],
@@ -147,6 +159,10 @@ select {
         }
     }
 
+    input:focus + label::before {
+        border-color: $input-border-focus-color;
+    }
+
     input:disabled + label::before {
         border-color: $medium-gray;
         background-color: $light-gray;
@@ -155,7 +171,7 @@ select {
     input:checked:disabled + label::after {
         background-image: url($checkbox-image-disabled);
     }
-
+    
     &.secondary {
         label {
             &::before {
@@ -167,6 +183,10 @@ select {
             background-image: url($checkbox-image-secondary);
         }
 
+        input:focus + label::before {
+            border-color: $success-alt;
+        }
+
         &:not(.plain-label) label {
             color: $secondary;
         }
@@ -183,6 +203,10 @@ select {
             background-image: url($checkbox-image-warning);
         }
 
+        input:focus + label::before {
+            border-color: scale-color($warning, $lightness: -25%);
+        }
+
         &:not(.plain-label) label {
             color: $warning;
         }
@@ -287,6 +311,10 @@ select {
         }
     }
 
+    input:focus + label::before {
+        border-color: $input-border-focus-color;
+    }
+
     input:disabled + label::before {
         border-color: $medium-gray;
         background-color: $light-gray;
@@ -295,6 +323,24 @@ select {
     input:checked:disabled + label::after {
         background-color: $medium-gray;
     }
+
+    &.medium {
+        label {
+            padding-left: 28px;
+            font-size: 0.9375rem;
+            line-height: 18px;
+
+            &::before {
+                width: 20px;
+                height: 20px;
+            }
+
+            &::after {
+                width: 12px;
+                height: 12px;
+            }
+        }
+    }
     
     &.small {
         label {
@@ -423,6 +469,14 @@ label {
         margin-bottom: 0.25rem;
     }
 
+    &.smaller {
+        font-family: $body-font-family;
+        font-size: 0.875rem;
+        line-height: normal;
+        margin-bottom: 0.25rem;
+        font-weight: 600;
+    }
+
     &.no-margin {
         margin-bottom: 0;
     }
@@ -492,6 +546,7 @@ label {
         [type='color'] {
             height: 30px;
             padding: 0 0.5rem;
+            font-size: 0.875rem;
         }
 
         select {
@@ -549,8 +604,9 @@ label {
 
         &.date {
             &::after {
-                width: 14px;
+                width: 18px;
                 height: 17px;
+                background-size: 14px 17px;
             }
         }
 
@@ -561,6 +617,35 @@ label {
         }
     }
 
+    &.large {
+        [type='text'],
+        [type='password'],
+        [type='date'],
+        [type='datetime'],
+        [type='datetime-local'],
+        [type='month'],
+        [type='week'],
+        [type='email'],
+        [type='number'],
+        [type='search'],
+        [type='tel'],
+        [type='time'],
+        [type='url'],
+        [type='color'] {
+            height: 55px;
+            font-size: 1.25rem;
+        }
+
+        select {
+            height: 55px;
+            font-size: 1.25rem;
+        }
+
+        textarea {
+            font-size: 1.25rem;
+        }
+    }
+
     &.line {
         [type='text'],
         [type='password'],
@@ -583,6 +668,7 @@ label {
             padding-left: 0;
             padding-right: 0;
             padding-top: 0;
+            padding-bottom: 0;
         }
 
         &.error {
@@ -630,11 +716,14 @@ label {
         &::after {
             content: '';
             position: absolute;
-            background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjAgMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU0LjEgKDc2NDkwKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5jYWxlbmRhcjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGQ9Ik0yMCw5IEwyMCw2IEMyMCw1LjQ0NzcxNTI1IDE5LjU1MjI4NDcsNSAxOSw1IEwxNyw1IEwxNyw2IEMxNyw2LjU1MjI4NDc1IDE2LjU1MjI4NDcsNyAxNiw3IEMxNS40NDc3MTUzLDcgMTUsNi41NTIyODQ3NSAxNSw2IEwxNSw1IEw5LDUgTDksNiBDOSw2LjU1MjI4NDc1IDguNTUyMjg0NzUsNyA4LDcgQzcuNDQ3NzE1MjUsNyA3LDYuNTUyMjg0NzUgNyw2IEw3LDUgTDUsNSBDNC40NDc3MTUyNSw1IDQsNS40NDc3MTUyNSA0LDYgTDQsOSBMMjAsOSBaIE0yMCwxMSBMNCwxMSBMNCwyMCBDNCwyMC41NTIyODQ3IDQuNDQ3NzE1MjUsMjEgNSwyMSBMMTksMjEgQzE5LjU1MjI4NDcsMjEgMjAsMjAuNTUyMjg0NyAyMCwyMCBMMjAsMTEgWiBNOSwzIEwxNSwzIEwxNSwyIEMxNSwxLjQ0NzcxNTI1IDE1LjQ0NzcxNTMsMSAxNiwxIEMxNi41NTIyODQ3LDEgMTcsMS40NDc3MTUyNSAxNywyIEwxNywzIEwxOSwzIEMyMC42NTY4NTQyLDMgMjIsNC4zNDMxNDU3NSAyMiw2IEwyMiwyMCBDMjIsMjEuNjU2ODU0MiAyMC42NTY4NTQyLDIzIDE5LDIzIEw1LDIzIEMzLjM0MzE0NTc1LDIzIDIsMjEuNjU2ODU0MiAyLDIwIEwyLDYgQzIsNC4zNDMxNDU3NSAzLjM0MzE0NTc1LDMgNSwzIEw3LDMgTDcsMiBDNywxLjQ0NzcxNTI1IDcuNDQ3NzE1MjUsMSA4LDEgQzguNTUyMjg0NzUsMSA5LDEuNDQ3NzE1MjUgOSwyIEw5LDMgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkNyZWF0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTYuMDAwMDAwLCAtNjI2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iY2FsZW5kYXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwNTQuMDAwMDAwLCA2MjUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgIDwvbWFzaz4KICAgICAgICAgICAgICAgIDx1c2UgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPGcgaWQ9ImNvbG9yLS8tYnJhbmQtLy1icmFuZC1wdXJwbGUiIG1hc2s9InVybCgjbWFzay0yKSIgZmlsbD0iIzUwNDE3NCIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9IjEiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJzd2F0Y2giPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iQ29sb3ItMSIgcG9pbnRzPSItMi4xNDQ5NTA4OGUtMTMgMS4wODI0Njc0NWUtMTQgMjQgMS4wODI0Njc0NWUtMTQgMjQgMjQgLTIuMTQ0OTUwODhlLTEzIDI0Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=') no-repeat;
-            background-size: 100%;
+            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjAgMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU0LjEgKDc2NDkwKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5jYWxlbmRhcjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGQ9Ik0yMCw5IEwyMCw2IEMyMCw1LjQ0NzcxNTI1IDE5LjU1MjI4NDcsNSAxOSw1IEwxNyw1IEwxNyw2IEMxNyw2LjU1MjI4NDc1IDE2LjU1MjI4NDcsNyAxNiw3IEMxNS40NDc3MTUzLDcgMTUsNi41NTIyODQ3NSAxNSw2IEwxNSw1IEw5LDUgTDksNiBDOSw2LjU1MjI4NDc1IDguNTUyMjg0NzUsNyA4LDcgQzcuNDQ3NzE1MjUsNyA3LDYuNTUyMjg0NzUgNyw2IEw3LDUgTDUsNSBDNC40NDc3MTUyNSw1IDQsNS40NDc3MTUyNSA0LDYgTDQsOSBMMjAsOSBaIE0yMCwxMSBMNCwxMSBMNCwyMCBDNCwyMC41NTIyODQ3IDQuNDQ3NzE1MjUsMjEgNSwyMSBMMTksMjEgQzE5LjU1MjI4NDcsMjEgMjAsMjAuNTUyMjg0NyAyMCwyMCBMMjAsMTEgWiBNOSwzIEwxNSwzIEwxNSwyIEMxNSwxLjQ0NzcxNTI1IDE1LjQ0NzcxNTMsMSAxNiwxIEMxNi41NTIyODQ3LDEgMTcsMS40NDc3MTUyNSAxNywyIEwxNywzIEwxOSwzIEMyMC42NTY4NTQyLDMgMjIsNC4zNDMxNDU3NSAyMiw2IEwyMiwyMCBDMjIsMjEuNjU2ODU0MiAyMC42NTY4NTQyLDIzIDE5LDIzIEw1LDIzIEMzLjM0MzE0NTc1LDIzIDIsMjEuNjU2ODU0MiAyLDIwIEwyLDYgQzIsNC4zNDMxNDU3NSAzLjM0MzE0NTc1LDMgNSwzIEw3LDMgTDcsMiBDNywxLjQ0NzcxNTI1IDcuNDQ3NzE1MjUsMSA4LDEgQzguNTUyMjg0NzUsMSA5LDEuNDQ3NzE1MjUgOSwyIEw5LDMgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkNyZWF0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTYuMDAwMDAwLCAtNjI2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iY2FsZW5kYXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwNTQuMDAwMDAwLCA2MjUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgIDwvbWFzaz4KICAgICAgICAgICAgICAgIDx1c2UgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPGcgaWQ9ImNvbG9yLS8tYnJhbmQtLy1icmFuZC1wdXJwbGUiIG1hc2s9InVybCgjbWFzay0yKSIgZmlsbD0iIzUwNDE3NCIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9IjEiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJzd2F0Y2giPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iQ29sb3ItMSIgcG9pbnRzPSItMi4xNDQ5NTA4OGUtMTMgMS4wODI0Njc0NWUtMTQgMjQgMS4wODI0Njc0NWUtMTQgMjQgMjQgLTIuMTQ0OTUwODhlLTEzIDI0Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
+            background-repeat: no-repeat;
+            background-position: center;
+            background-color: $input-background-color;
+            background-size: 20px 22px;
             right: 10px;
             top: 10px;
-            width: 20px;
+            width: 24px;
             height: 22px;
             pointer-events: none;
         }
@@ -774,6 +863,44 @@ label {
         }
     }
 
+    &.value {
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        padding: 5px 0;
+        line-height: 1.2;
+
+        &.small {
+            min-height: 35px;
+            font-size: 0.875rem;
+        }
+
+        &.tiny {
+            min-height: 30px;
+            padding: 0;
+        }
+
+        &.filled {
+            background-color: $middle-gray;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 5px;
+
+            &.tiny {
+                padding-left: 5px;
+                padding-right: 5px;
+            }
+        }
+    }
+
+    &.text {
+        padding-top: 6px;
+    }
+
+    &.text-center input {
+        text-align: center;
+    }
+
     &.error,
     &.warning {
         input,
@@ -854,12 +981,20 @@ label {
         &.medium-no-margin {
             margin-bottom: 0 !important;
         }
+
+        &.medium-text-center input {
+            text-align: center;
+        }
     }
 
     @media print, screen and (min-width: map-get($breakpoints, large)) {
         &.large-no-margin {
             margin-bottom: 0 !important;
         }
+
+        &.large-text-center input {
+            text-align: center;
+        }
     }
 }
 
@@ -903,6 +1038,21 @@ select {
         }
     }
 
+    &.no-preview {
+        .swatch-list li a .preview {
+            display: none !important;
+        }
+    }
+
+    &.name-only {
+        .swatch-list li a .preview .preview-name {
+            padding: 5px;
+            line-height: 1.2;
+            font-size: 0.875rem;
+            min-width: 100px;
+        }
+    }
+
     &.error {
         .swatch-list li {
             border-color: $alert;
@@ -1572,6 +1722,19 @@ body.hover-capable {
             background-color: $text-gray;
         }
     }
+
+    &.inline {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    &.small {
+        height: 35px;
+    }
+
+    &.tiny {
+        height: 26px;
+    }
 }
 
 .switch-paddle {
@@ -1599,6 +1762,43 @@ body.hover-capable {
         width: 30px;
         height: 30px;
     }
+
+    .switch.small & {
+        height: 35px;
+        width: 80px !important;
+
+        &::before {
+            line-height: 35px;
+            width: 45px;
+        }
+
+        &::after {
+            width: 25px;
+            height: 25px;
+            top: 5px;
+            left: 5px;
+        }
+    }
+
+    .switch.tiny & {
+        height: 26px;
+        width: 60px !important;
+        font-size: 0.75rem;
+        border-radius: 13px;
+
+        &::before {
+            line-height: 26px;
+            width: 42px;
+        }
+
+        &::after {
+            border-radius: 50%;
+            top: 6px;
+            left: 6px;
+            width: 14px;
+            height: 14px;
+        }
+    }
 }
 
 input:checked ~ .switch-paddle {
@@ -1611,6 +1811,14 @@ input:checked ~ .switch-paddle {
     &::after {
         left: 65px;
     }
+
+    .switch.small &::after {
+        left: 50px;
+    }
+
+    .switch.tiny &::after {
+        left: 42px;
+    }
 }
 
 .timespan-container {
@@ -1670,6 +1878,10 @@ input:checked ~ .switch-paddle {
         textarea,
         select {
             border-color: $secondary;
+
+            &:focus {
+                border-color: $secondary-alt;
+            }
         }
 
         label {
@@ -1764,7 +1976,7 @@ input:checked ~ .switch-paddle {
         z-index: 10;
 
         ul {
-            max-height: 250px;
+            max-height: 200px;
             overflow: auto;
             display: block;
             list-style-type: none;

package/scss/partials/_layout.scss

@@ -1,3 +1,31 @@
+@media all and (max-width: map-get($breakpoints, medium) - 1px) {
+    body:after {
+        content: 'size-small';
+        display: none;
+    }
+}
+
+@media all and (min-width: map-get($breakpoints, medium)) {
+    body:after {
+        content: 'size-medium';
+        display: none;
+    }
+}
+
+@media all and (min-width: map-get($breakpoints, large)) {
+    body:after {
+        content: 'size-large';
+        display: none;
+    }
+}
+
+@media all and (min-width: map-get($breakpoints, xlarge)) {
+    body:after {
+        content: 'size-xlarge';
+        display: none;
+    }
+}
+
 .show-override {
     // override due to combo of on-load and vue applied styles for initially hidden items
     display: block !important;
@@ -12,132 +40,132 @@
 }
 
 .single-space {
-    margin-bottom: 20px !important;
+    margin-bottom: $single-space !important;
 }
 
 .double-space {
-    margin-bottom: 40px !important;
+    margin-bottom: #{$single-space * 2} !important;
 }
 
 .triple-space {
-    margin-bottom: 60px !important;
+    margin-bottom: #{$single-space * 3} !important;
 }
 
 .half-space {
-    margin-bottom: 10px !important;
+    margin-bottom: #{$single-space * 0.5} !important;
 }
 
 .quarter-space {
-    margin-bottom: 5px !important;
+    margin-bottom: #{$single-space * 0.25} !important;
 }
 
 .single-space-top {
-    margin-top: 20px !important;
+    margin-top: $single-space !important;
 }
 
 .double-space-top {
-    margin-top: 40px !important;
+    margin-top: #{$single-space * 2} !important;
 }
 
 .triple-space-top {
-    margin-top: 60px !important;
+    margin-top: #{$single-space * 3} !important;
 }
 
 .half-space-top {
-    margin-top: 10px !important;
+    margin-top: #{$single-space * 0.5} !important;
 }
 
 .quarter-space-top {
-    margin-top: 5px !important;
+    margin-top: #{$single-space * 0.25} !important;
 }
 
 .small-single-space {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: 20px !important;
+        margin-bottom: $single-space !important;
     }
 }
 
 .medium-single-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: 20px !important;
+        margin-bottom: $single-space !important;
     }
 }
 
 .small-single-space-top {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-top: 20px !important;
+        margin-top: $single-space !important;
     }
 }
 
 .medium-single-space-top {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: 20px !important;
+        margin-top: $single-space !important;
     }
 }
 
 .small-double-space {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: 40px !important;
+        margin-bottom: #{$single-space * 2} !important;
     }
 }
 
 .medium-double-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: 40px !important;
+        margin-bottom: #{$single-space * 2} !important;
     }
 }
 
 .medium-only-double-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) and (max-width: (map-get($breakpoints, large) - 1px)) {
-        margin-bottom: 40px !important;
+        margin-bottom: #{$single-space * 2} !important;
     }
 }
 
 .small-double-space-top {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-top: 40px !important;
+        margin-top: #{$single-space * 2} !important;
     }
 }
 
 .medium-double-space-top {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: 40px !important;
+        margin-top: #{$single-space * 2} !important;
     }
 }
 
 .small-triple-space {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: 60px !important;
+        margin-bottom: #{$single-space * 3} !important;
     }
 }
 
 .medium-triple-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: 60px !important;
+        margin-bottom: #{$single-space * 3} !important;
     }
 }
 
 .small-half-space {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: 10px !important;
+        margin-bottom: #{$single-space * 0.5} !important;
     }
 }
 
 .medium-half-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: 10px !important;
+        margin-bottom: #{$single-space * 0.5} !important;
     }
 }
 
 .small-half-space-top {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-top: 10px !important;
+        margin-top: #{$single-space * 0.5} !important;
     }
 }
 
 .medium-half-space-top {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: 10px !important;
+        margin-top: #{$single-space * 0.5} !important;
     }
 }
 
@@ -178,6 +206,18 @@ hr {
         margin-top: 0;
     }
 
+    &.small {
+        margin: 0.5rem 0;
+    }
+
+    &.large {
+        margin: 40px 0;
+    }
+    
+    &.short {
+        width: 80px;
+    }
+
     &.secondary {
         border-bottom-color: $secondary;
     }
@@ -186,9 +226,9 @@ hr {
     &.tertiary-alt {
         border-bottom-color: $tertiary-alt;
     }
-
-    &.small {
-        margin: 0.5rem 0;
+    
+    &.warning {
+        border-bottom-color: $warning;
     }
 
     &.dark-gray {