@rypen-dev/shared-components 8.2.0 → 8.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects. Starting with version 8, this package is built with Vite 7 and Vue 3.",
-	"version": "8.2.0",
+	"version": "8.2.2",
 	"type": "module",
 	"main": "./dist/index.js",
 	"scripts": {

package/scss/checkout.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 .order-summary {
     .value {
         font-size: 1.25rem;
@@ -7,7 +9,7 @@
         color: $primary;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, large)) {
+    @media print, screen and (min-width: map.get($breakpoints, large)) {
         &.cart-summary {
             width: 330px;
         }

package/scss/partials/_buttons.scss

@@ -3,6 +3,7 @@
 /// <reference path="../vendor/foundation-settings" />
 
 @use "sass:math";
+@use 'sass:map';
 
 .cta-link {
     display: inline-block;
@@ -148,7 +149,7 @@
         cursor: default;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         line-height: 1rem;
         font-size: 0.9375rem;
 
@@ -236,7 +237,7 @@ a.info {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         > span:not(.tooltip) {
             width: 24px;
             height: 24px;
@@ -395,7 +396,7 @@ $arrow-width-medium: 50px;
     }
 
     &.small-no-tail {
-        @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+        @media screen and (max-width: map.get($breakpoints, medium) - 1px) {
             padding-right: 20px;
 
             &::before {
@@ -410,7 +411,7 @@ $arrow-width-medium: 50px;
     }
 
     &.medium-no-tail {
-        @media screen and (max-width: map-get($breakpoints, large) - 1px) {
+        @media screen and (max-width: map.get($breakpoints, large) - 1px) {
             padding-right: 20px;
 
             &::before {
@@ -511,7 +512,7 @@ $arrow-width-medium: 50px;
         }
     }
 
-    @media screen and (min-width: map-get($breakpoints, meidum)) and (max-width: map-get($breakpoints, large) - 1px) {
+    @media screen and (min-width: map.get($breakpoints, meidum)) and (max-width: map.get($breakpoints, large) - 1px) {
         &.medium-only-small-text {
             font-size: 0.875rem;
         }
@@ -530,7 +531,7 @@ $arrow-width-medium: 50px;
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         line-height: 1.125rem;
         font-size: 1.0625rem;
         letter-spacing: 2px;
@@ -585,7 +586,7 @@ $arrow-width-medium: 50px;
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) and (max-width: map-get($breakpoints, large) - 1px) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) and (max-width: map.get($breakpoints, large) - 1px) {
         &.medium-only-small-text {
             font-size: 0.875rem;
         }
@@ -679,7 +680,7 @@ $arrow-width-medium: 50px;
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         line-height: 1.125rem;
         font-size: 1.0625rem;
         padding-right: $arrow-width-medium;
@@ -1046,7 +1047,7 @@ button,
         margin-right: -6px;
     }
 
-    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+    @media screen and (max-width: map.get($breakpoints, medium) - 1px) {
         &.small-full {
             width: 100% !important;
             margin-left: 0;
@@ -1054,7 +1055,7 @@ button,
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         line-height: $button-height-medium;
         margin-bottom: 1rem;
         letter-spacing: $button-letter-spacing-medium;
@@ -1177,7 +1178,7 @@ button,
         }
     }
 
-    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+    @media screen and (max-width: map.get($breakpoints, medium) - 1px) {
         > button,
         > .button {
             &.small-full {
@@ -1223,7 +1224,7 @@ button,
 }
 
 .medium-button-row {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         > button,
         > .button {
             margin-left: 5px;
@@ -1353,7 +1354,7 @@ ul.button-menu {
         padding: 0 20px;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         margin: 0 -0.5rem;
     }
 }

package/scss/partials/_content.scss

@@ -2,6 +2,8 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use 'sass:map';
+
 .photo-collage {
     position: relative;
     width: 250px;
@@ -9,7 +11,7 @@
     padding: 20px 0;
 
     &.small-centered {
-        @media (max-width: map-get($breakpoints, medium) - 1px) {
+        @media (max-width: map.get($breakpoints, medium) - 1px) {
             margin-left: auto;
             margin-right: auto;
         }
@@ -68,7 +70,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         &.single {
             width: 200px;
 
@@ -86,7 +88,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, large)) {
+    @media (min-width: map.get($breakpoints, large)) {
         margin-top: 0;
         margin-bottom: 0;
     }

package/scss/partials/_flyovers.scss

@@ -1,7 +1,9 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
-@media (min-width: map-get($breakpoints, medium)) {
+@use 'sass:map';
+
+@media (min-width: map.get($breakpoints, medium)) {
     body.flyover-open {
         overflow: hidden;
     }
@@ -62,7 +64,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, large)) {
+    @media print, screen and (min-width: map.get($breakpoints, large)) {
         width: 50vw;
 
         .body.restricted {
@@ -75,7 +77,7 @@
 .flyover-enter .flyover {
     right: -100vw !important;
 
-    @media (min-width: map-get($breakpoints, large)) {
+    @media (min-width: map.get($breakpoints, large)) {
         right: -50vw !important;
     }
 }
@@ -83,7 +85,7 @@
 .flyover-leave-to .flyover {
     right: -100vw !important;
 
-    @media (min-width: map-get($breakpoints, large)) {
+    @media (min-width: map.get($breakpoints, large)) {
         right: -50vw !important;
     }
 }

package/scss/partials/_forms.scss

@@ -3,6 +3,7 @@
 /// <reference path="../vendor/foundation-settings" />
 
 @use "sass:color";
+@use 'sass:map';
 
 input[type=date]::-webkit-datetime-edit-text {
     color: $input-placeholder-color;
@@ -118,7 +119,7 @@ select {
         margin-bottom: 0 !important;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         label {
             padding-top: 2px;
         }
@@ -449,7 +450,7 @@ select {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         &.medium-flex-group {
             display: flex;
 
@@ -509,7 +510,7 @@ label {
         margin-bottom: 0;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         font-size: 1.0625rem;
     }
 }
@@ -520,6 +521,14 @@ label {
         border-radius: 0 $global-form-input-radius $global-form-input-radius 0;
     }
 
+    &.small {
+        .input-group-field {
+            height: 35px;
+            padding: 5px;
+            font-size: 0.875rem;
+        }
+    }
+
     &.tiny {
         .input-group-field {
             height: 30px;
@@ -872,7 +881,7 @@ label {
             }
         }
 
-        @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        @media print, screen and (min-width: map.get($breakpoints, medium)) {
             input {
                 height: 4rem;
                 font-size: 1.625rem;
@@ -1031,7 +1040,7 @@ label {
                 line-height: calc(2.75rem - 4px) !important;
             }
     
-            @media print, screen and (min-width: map-get($breakpoints, medium)) {
+            @media print, screen and (min-width: map.get($breakpoints, medium)) {
                 line-height: calc(5rem - 4px);
     
                 &.small,
@@ -1096,7 +1105,7 @@ label {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         &.medium-no-margin {
             margin-bottom: 0 !important;
         }
@@ -1106,7 +1115,7 @@ label {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, large)) {
+    @media print, screen and (min-width: map.get($breakpoints, large)) {
         &.large-no-margin {
             margin-bottom: 0 !important;
         }
@@ -1409,7 +1418,7 @@ select {
             }
         }
     
-        @media (min-width: map-get($breakpoints, large)) {
+        @media (min-width: map.get($breakpoints, large)) {
             li a .preview {
                 .preview-image {
                     width: 300px;
@@ -1418,7 +1427,7 @@ select {
             }
         }
     
-        @media (min-width: map-get($breakpoints, xlarge)) {
+        @media (min-width: map.get($breakpoints, xlarge)) {
             li a .preview {
                 .preview-image {
                     width: 400px;
@@ -1428,7 +1437,7 @@ select {
         }
     }
 
-    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+    @media screen and (max-width: map.get($breakpoints, medium) - 1px) {
         a {
             .preview {
                 display: none !important;
@@ -1436,7 +1445,7 @@ select {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         li {
             margin-right: 4px;
             margin-bottom: 4px;
@@ -1652,7 +1661,7 @@ body.hover-capable {
         margin-bottom: 0;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         flex: 1 1 0;
         vertical-align: bottom;
         margin: 0 26px 38px 0;
@@ -1686,7 +1695,7 @@ body.hover-capable {
 }
 
 .grouped-fields {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         display: flex;
         flex-grow: 1;
         position: relative;
@@ -2060,7 +2069,7 @@ input:checked ~ .switch-paddle {
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         &.range {
             .divider strong::after {
                 content: '\00a0–\00a0';

package/scss/partials/_layout.scss

@@ -1,25 +1,27 @@
-@media all and (max-width: map-get($breakpoints, medium) - 1px) {
+@use 'sass:map';
+
+@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)) {
+@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)) {
+@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)) {
+@media all and (min-width: map.get($breakpoints, xlarge)) {
     body:after {
         content: 'size-xlarge';
         display: none;
@@ -79,7 +81,7 @@
     margin-top: #{$single-space * 0.25} !important;
 }
 
-@media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
+@media screen and (max-width: (map.get($breakpoints, medium) - 1px)) {
     .small-single-space {
         margin-bottom: $single-space !important;
     }
@@ -109,7 +111,7 @@
     }
 }
 
-@media print, screen and (min-width: map-get($breakpoints, medium)) {
+@media print, screen and (min-width: map.get($breakpoints, medium)) {
     .medium-single-space {
         margin-bottom: $single-space !important;
     }
@@ -139,13 +141,13 @@
     }
 }
 
-@media print, screen and (min-width: map-get($breakpoints, medium)) and (max-width: (map-get($breakpoints, large) - 1px)) {
+@media print, screen and (min-width: map.get($breakpoints, medium)) and (max-width: (map.get($breakpoints, large) - 1px)) {
     .medium-only-double-space {
         margin-bottom: #{$single-space * 2} !important;
     }
 }
 
-@media print, screen and (min-width: map-get($breakpoints, large)) {
+@media print, screen and (min-width: map.get($breakpoints, large)) {
     .large-no-space {
         margin-bottom: 0 !important;
     }
@@ -164,7 +166,7 @@
 }
 
 .medium-grid-container {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         max-width: $grid-container;
         margin: 0 auto;
         padding-left: $grid-container-gutter-medium;
@@ -195,7 +197,7 @@ hr {
     &.extra-large {
         margin: 60px 0;
 
-        @media (min-width: map-get($breakpoints, medium)) {
+        @media (min-width: map.get($breakpoints, medium)) {
             margin: 80px 0;
         }
     }
@@ -344,7 +346,7 @@ hr {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         li {
             margin-bottom: 8px;
         }
@@ -395,7 +397,7 @@ hr {
         }
     }
 
-    @media (min-width: map-get($breakpoints, large)) {
+    @media (min-width: map.get($breakpoints, large)) {
         a {
             font-size: 1.125rem;
             margin: 0 20px;
@@ -452,7 +454,7 @@ hr {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         a {
             margin-right: 30px;
         }

package/scss/partials/_modals.scss

@@ -3,6 +3,7 @@
 /// <reference path="../vendor/foundation-settings" />
 
 @use "sass:color";
+@use 'sass:map';
 
 .modal-mask {
     position: fixed;
@@ -235,7 +236,7 @@
             padding-right: $grid-cell-padding;
         }
 
-        @media (min-width: map-get($breakpoints, medium)) {
+        @media (min-width: map.get($breakpoints, medium)) {
             .modal-body {
                 margin-left: -$grid-cell-padding-medium;
                 margin-right: -$grid-cell-padding-medium;
@@ -245,7 +246,7 @@
         }
     }
 
-    @media (max-width: map-get($breakpoints, medium) - 1px) {
+    @media (max-width: map.get($breakpoints, medium) - 1px) {
         .modal-header {
             padding-top: 20px;
 
@@ -267,7 +268,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         padding: 40px 30px;
         border-color: $modal-border-color-medium;
         width: 687px;

package/scss/partials/_navigation.scss

@@ -2,6 +2,8 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use 'sass:map';
+
 nav > ul {
     list-style-type: none;
     margin: 0;
@@ -87,7 +89,7 @@ nav > ul {
         background-color: $pagination-hover-color;
     }
 
-    @media (max-width: map-get($breakpoints, medium) - 1px) {
+    @media (max-width: map.get($breakpoints, medium) - 1px) {
         li {
             &:first-child {
                 padding-left: 0 !important;

package/scss/partials/_progressbar.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 .progress-bar {
     ol {
         list-style-type: none;
@@ -141,7 +143,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         li {
             > span {
                 span {

package/scss/partials/_proposalsgallery.scss

@@ -3,6 +3,7 @@
 /// <reference path="../vendor/foundation-settings" />
 
 @use "sass:color";
+@use 'sass:map';
 
 .image-selector {
     position: relative;
@@ -116,7 +117,7 @@
         }
     }
 
-    @media (max-width: map-get($breakpoints, medium) - 1px) {
+    @media (max-width: map.get($breakpoints, medium) - 1px) {
         .image-area {
             .substitute-warning {
                 font-size: 0.675rem;
@@ -144,7 +145,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         padding: 30px 90px 90px;
         margin-bottom: 0;
 
@@ -224,7 +225,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, large)) {
+    @media (min-width: map.get($breakpoints, large)) {
         .image-nav {
             .image-nav-list {
                 &.up-6 {

package/scss/partials/_proposalsmodals.scss

@@ -1,6 +1,8 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use 'sass:map';
+
 .modal-container {
     .modal-body {
         .form.side-by-side {
@@ -16,7 +18,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         .modal-body {
             .form.side-by-side {
                 .row {
@@ -50,7 +52,7 @@
         text-align: left;
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         .modal-grid {
             max-height: calc(100vh - 80px);
         }

package/scss/partials/_slideshow.scss

@@ -2,6 +2,8 @@
 /// <reference path="../../node_modules/@rypen-dev/shared-components/scss/variables" />
 /// <reference path="../../node_modules/@rypen-dev/shared-components/scss/vendor/foundation-settings" />
 
+@use 'sass:map';
+
 .slideshow {
     position: relative;
     overflow: hidden;
@@ -65,7 +67,7 @@
             opacity: 1;
         }
 
-        @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        @media print, screen and (min-width: map.get($breakpoints, medium)) {
             padding-bottom: 53.4722%;
         }
     }
@@ -93,7 +95,7 @@
             }
         }
 
-        @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        @media print, screen and (min-width: map.get($breakpoints, medium)) {
             position: absolute;
             bottom: 20px;
             left: 0;
@@ -124,7 +126,7 @@
             padding-bottom: 63.57%;
         }
 
-        @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        @media print, screen and (min-width: map.get($breakpoints, medium)) {
             .slide {
             }
 
@@ -195,7 +197,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         .promo-card {
             .content {
                 padding-left: 30px;
@@ -212,7 +214,7 @@
         }
     }
 
-    @media screen and (min-width: map-get($breakpoints, medium)) and (max-width: map-get($breakpoints, large) - 1px) {
+    @media screen and (min-width: map.get($breakpoints, medium)) and (max-width: map.get($breakpoints, large) - 1px) {
         .promo-card {
             .content {
                 h2 {
@@ -223,7 +225,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, large)) {
+    @media print, screen and (min-width: map.get($breakpoints, large)) {
         .promo-card {
             .content {
                 padding-left: 60px;
@@ -254,7 +256,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         position: absolute;
         top: 20px;
         left: 0;
@@ -273,7 +275,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, large)) {
+    @media print, screen and (min-width: map.get($breakpoints, large)) {
         top: 40px;
 
         .cell {

package/scss/partials/_specsheet.scss

@@ -2,6 +2,8 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use 'sass:map';
+
 .specsheet {
     padding: 1rem 0;
     font-weight: $headline-weight-normal;
@@ -136,7 +138,7 @@
         }
     }
 
-    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+    @media screen and (max-width: map.get($breakpoints, medium) - 1px) {
         .specsheet-list {
             .item {
                 width: 100%;

package/scss/partials/_tables.scss

@@ -1,6 +1,8 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use 'sass:map';
+
 div.table {
     font-size: 0.9375rem;
     color: $table-text-color;
@@ -9,7 +11,7 @@ div.table {
         padding: 10px 0;
     }
 
-    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+    @media screen and (max-width: map.get($breakpoints, medium) - 1px) {
         .table-head {
             display: none;
         }
@@ -48,7 +50,7 @@ div.table {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         display: table;
         width: 100%;
 

package/scss/partials/_tooltips.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 .tooltip-container {
     position: relative;
 
@@ -188,7 +190,7 @@
             }
         }
 
-        @media (max-width: map-get($breakpoints, medium) - 1px) {
+        @media (max-width: map.get($breakpoints, medium) - 1px) {
             display: none !important;
         }
     }
@@ -236,7 +238,7 @@
             border-left: solid 10px transparent;
         }
 
-        @media (min-width: map-get($breakpoints, medium)) {
+        @media (min-width: map.get($breakpoints, medium)) {
             &.medium-right-tooltip::after {
                 right: 0;
                 border-right: 0;
@@ -247,7 +249,7 @@
         }
     }
 
-    @media (max-width: map-get($breakpoints, medium) - 1px) {
+    @media (max-width: map.get($breakpoints, medium) - 1px) {
         &.small-left-tooltip {
             left: 0;
             transform: none;
@@ -282,7 +284,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         &.medium-up {
             top: auto;
             bottom: 100%;

package/scss/partials/_typography.scss

@@ -1,9 +1,12 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu:300,400,500,700');
+@use 'sass:map';
 
-// OpenSans: Light = 300, Regular = 400, Semi-Bold = 600, Bold = 700 (Extra-Bold = 800)
+//@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu:300,400,500,700');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+// OpenSans: Light = 300, Regular = 400, Semi-Bold = 600, Bold = 700, Extra-Bold = 800
 // Ubuntu: Light = 300, Regular = 400, Medium = 500, Bold = 700
 
 body {
@@ -77,7 +80,7 @@ h6 {
         border-bottom: solid 2px $headline-accent-color;
         padding-bottom: 2px;
 
-        @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        @media print, screen and (min-width: map.get($breakpoints, medium)) {
             border-bottom-width: 3px;
         }
     }
@@ -154,7 +157,7 @@ h2 {
         padding-bottom: 4px;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         font-size: 2.875rem;
         line-height: 4.5rem;
         margin-bottom: 40px;
@@ -179,7 +182,7 @@ h3 {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         font-size: 2.125rem;
         line-height: 3.375rem;
         margin-bottom: 40px;
@@ -218,7 +221,7 @@ h5 {
         font-weight: $headline-weight-bold;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         font-size: 1.125rem;
         letter-spacing: 1.5px;
         margin-bottom: 40px;
@@ -337,7 +340,7 @@ h5 {
             content: '— ';
         }
 
-        @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        @media print, screen and (min-width: map.get($breakpoints, medium)) {
             font-size: 1.0625rem;
 
             strong {
@@ -353,7 +356,7 @@ h6 {
     font-weight: 600;
     margin-bottom: 20px;
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         letter-spacing: 1px;
     }
 
@@ -380,7 +383,7 @@ p {
         margin-bottom: 0;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         margin-bottom: 40px;
     }
 }
@@ -403,7 +406,7 @@ blockquote {
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         font-size: 1.75rem;
         line-height: 2.44rem;
     }
@@ -449,7 +452,7 @@ blockquote {
         text-transform: uppercase;
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         letter-spacing: 2px;
         line-height: 1.125rem;
         font-size: 1.0625rem;
@@ -470,7 +473,7 @@ small,
     font-size: 1.125rem;
     line-height: 1.5rem;
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         font-size: 1.625rem;
         line-height: 2.625rem;
     }
@@ -599,7 +602,7 @@ small,
         font-size: 2.5rem;
         line-height: normal;
 
-        @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        @media print, screen and (min-width: map.get($breakpoints, medium)) {
             font-size: 3.25rem;
         }
     }
@@ -689,7 +692,7 @@ small,
     font-family: $headline-font-family;
     font-weight: $headline-weight-normal;
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         font-size: 1.25rem;
         line-height: 1.6;
 

package/scss/proposals.scss

@@ -3,6 +3,7 @@
 /// <reference path="./vendor/foundation-settings" />
 
 @use "sass:color";
+@use 'sass:map';
 
 // --> Originally from layout.scss
 .pill.menu {
@@ -135,7 +136,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         span {
             position: absolute;
             display: block;
@@ -164,7 +165,7 @@
         display: none;
     }
 
-    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+    @media screen and (max-width: map.get($breakpoints, medium) - 1px) {
         .selected-container {
             text-align: center;
 
@@ -325,7 +326,7 @@
         }
     }
 
-    @media (max-width: map-get($breakpoints, medium) - 1px) {
+    @media (max-width: map.get($breakpoints, medium) - 1px) {
         width: calc(100vw - 20px) !important;
         top: 50%;
         left: 10px;
@@ -338,7 +339,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         .inner {
             .card {
                 header {
@@ -397,7 +398,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         &.scrolling {
             > ul,
             > .table-wrapper {
@@ -505,7 +506,7 @@
         padding: 0 15px 10px;
     }
 
-    @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+    @media screen and (max-width: map.get($breakpoints, medium) - 1px) {
         .editor-content & {
             margin-left: -10px;
             margin-right: -10px;
@@ -538,7 +539,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         .item-row {
             padding: 10px 15px;
 
@@ -664,7 +665,7 @@
         }
     }
 
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    @media print, screen and (min-width: map.get($breakpoints, medium)) {
         &.label-small-only {
             label {
                 display: none;
@@ -743,7 +744,7 @@
     }
 
     &.side-by-side {
-        @media (min-width: map-get($breakpoints, medium)) {
+        @media (min-width: map.get($breakpoints, medium)) {
             .toggle-section {
                 padding-left: 200px;
                 margin-bottom: 0;

package/scss/proposalsshared.scss

@@ -1,6 +1,8 @@
 /// <reference path="./variables" />
 /// <reference path="./mixins" />
 /// <reference path="./vendor/foundation-settings" />
+ 
+@use 'sass:map';
 
 .project-footer {
     margin-top: 30px;
@@ -35,7 +37,7 @@
         margin-bottom: 30px;
     }
 
-    @media screen and (min-width: map-get($breakpoints, medium)) {
+    @media screen and (min-width: map.get($breakpoints, medium)) {
         margin-top: 50px;
         display: flex;
         justify-content: space-between;
@@ -150,7 +152,7 @@
         }
     }
 
-    @media (min-width: map-get($breakpoints, medium)) {
+    @media (min-width: map.get($breakpoints, medium)) {
         .group-name {
             font-size: 1.25rem;
 

package/scss/styles.scss

@@ -48,6 +48,7 @@
 @include foundation-visibility-classes;
 //@include foundation-float-classes;
 
+@import './partials/typography';
 @import './partials/layout';
 @import './partials/navigation';
 @import './partials/badges';
@@ -59,7 +60,6 @@
 @import './partials/pills';
 @import './partials/tables';
 @import './partials/tooltips';
-@import './partials/typography';
 @import './partials/content';
 @import './partials/specsheet';
 @import './partials/notifications';