@rypen-dev/shared-components 6.1.9 → 6.1.10

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 6, this package is built with Webpack 5 and Vue 3.",
-	"version": "6.1.9",
+	"version": "6.1.10",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/_mixins.scss

@@ -1,8 +1,6 @@
 /// <reference path="./variables" />
 /// <reference path="./vendor/foundation-settings" />
 
-@use './variables' as *;
-
 @mixin button-shadow {
     box-shadow: 0 6px 20px 1px $shadow-color;
 }

package/scss/checkout.scss

@@ -1,6 +1,3 @@
-@use './variables' as *;
-@use './vendor/foundation-settings' as *;
-
 .order-summary {
     .value {
         font-size: 1.25rem;

package/scss/partials/_badges.scss

@@ -2,8 +2,6 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
 // called "labels" in foundation
 
 .label {

package/scss/partials/_buttons.scss

@@ -2,10 +2,6 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-@use '../mixins';
-
 @use "sass:math";
 
 .cta-link {

package/scss/partials/_content.scss

@@ -2,9 +2,6 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 .photo-collage {
     position: relative;
     width: 250px;

package/scss/partials/_flyovers.scss

@@ -1,10 +1,6 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-@use '../mixins';
-
 @media (min-width: map-get($breakpoints, medium)) {
     body.flyover-open {
         overflow: hidden;

package/scss/partials/_forms.scss

@@ -2,9 +2,7 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-@use '../mixins';
+@use "sass:color";
 
 input[type=date]::-webkit-datetime-edit-text {
     color: $input-placeholder-color;
@@ -1269,7 +1267,7 @@ select {
                 top: 12px;
                 right: 12px;
                 border-radius: 50%;
-                background-color: fade-out($tertiary-alt, 0.4);
+                background-color: color.adjust($tertiary-alt, $alpha: -0.4);
                 font-size: 1.425rem;
                 line-height: 1.425rem;
                 text-align: center;
@@ -1285,7 +1283,7 @@ select {
             &::after {
                 content: '';
                 position: absolute;
-                background-color: fade-out($white, 0.5);
+                background-color: color.adjust($white, $alpha: 0.5);
                 top: 4px;
                 left: 4px;
                 right: 4px;
@@ -1304,7 +1302,7 @@ select {
                     z-index: 61;
                     bottom: 0;
                     top: auto;
-                    border-left: solid 2px fade-out($dark-gray, 0.5);
+                    border-left: solid 2px color.adjust($dark-gray, $alpha: -0.5);
                     border-bottom: 0;
                     transform: rotate(45deg);
                 }
@@ -1318,7 +1316,7 @@ select {
                     z-index: 61;
                     bottom: 0;
                     top: auto;
-                    border-left: solid 2px fade-out($dark-gray, 0.5);
+                    border-left: solid 2px color.adjust($dark-gray, $alpha: -0.5);
                     border-bottom: 0;
                     transform: rotate(-45deg);
                     pointer-events: none;
@@ -1699,14 +1697,14 @@ body.hover-capable {
 
 .credit-card-security {
     position: relative;
-    border: solid 1px fade-out($secondary-alt, 0.7);
+    border: solid 1px color.adjust($secondary-alt, $alpha: -0.7);
     border-radius: 3px;
     height: 100px;
     padding: 40px 20px 0;
 
     &::before {
         content: '';
-        background-color: fade-out($secondary-alt, 0.8);
+        background-color: color.adjust($secondary-alt, $alpha: -0.8);
         position: absolute;
         top: 10px;
         left: 0;
@@ -1720,7 +1718,7 @@ body.hover-capable {
         height: 20px;
         padding: 0 4px;
         line-height: 20px;
-        border: solid 1px fade-out($secondary-alt, 0.7);
+        border: solid 1px color.adjust($secondary-alt, $alpha: -0.7);
         background-color: $gray-overlay;
         text-align: right;
         font-size: 0.75rem;

package/scss/partials/_layout.scss

@@ -1,6 +1,3 @@
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 @media all and (max-width: map-get($breakpoints, medium) - 1px) {
     body:after {
         content: 'size-small';

package/scss/partials/_loader.scss

@@ -1,9 +1,6 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 .loader {
     text-align: center;
     padding: 30px 0;
@@ -25,7 +22,7 @@
 }
 
 .working-screen {
-    background-color: fade-out($white, 0.5);
+    background-color: color.adjust($white, $alpha: -0.5);
     position: absolute;
     top: 0;
     left: 0;

package/scss/partials/_modals.scss

@@ -2,9 +2,7 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-@use '../mixins';
+@use "sass:color";
 
 .modal-mask {
     position: fixed;
@@ -13,7 +11,7 @@
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: fade-out($white, 0.2);
+    background-color: color.adjust($white, $alpha: -0.2);
 
     transition: opacity .3s ease, background-color .3s ease;
 

package/scss/partials/_navigation.scss

@@ -2,9 +2,6 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 nav > ul {
     list-style-type: none;
     margin: 0;

package/scss/partials/_notifications.scss

@@ -1,6 +1,3 @@
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 .notification-row {
     .notification-summary {
         display: flex;

package/scss/partials/_pills.scss

@@ -2,9 +2,6 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 @use "sass:color";
 
 .pill {

package/scss/partials/_print.scss

@@ -1,6 +1,3 @@
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 @media print {
     @page {
         size: 8.5in 11in;

package/scss/partials/_progressbar.scss

@@ -1,6 +1,3 @@
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 .progress-bar {
     ol {
         list-style-type: none;

package/scss/partials/_proposalsgallery.scss

@@ -2,8 +2,7 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
+@use "sass:color";
 
 .image-selector {
     position: relative;

package/scss/partials/_proposalsmodals.scss

@@ -1,9 +1,6 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 .modal-container {
     .modal-body {
         .form.side-by-side {

package/scss/partials/_specsheet.scss

@@ -2,9 +2,6 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 .specsheet {
     padding: 1rem 0;
     font-weight: $headline-weight-normal;

package/scss/partials/_tables.scss

@@ -1,9 +1,6 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 div.table {
     font-size: 0.9375rem;
     color: $table-text-color;

package/scss/partials/_tooltips.scss

@@ -1,7 +1,3 @@
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-@use '../mixins';
-
 .tooltip-container {
     position: relative;
 

package/scss/partials/_typography.scss

@@ -1,9 +1,6 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
-@use '../variables' as *;
-@use '../vendor/foundation-settings' as *;
-
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu:300,400,500');
 
 // OpenSans: Light = 300, Regular = 400, Semi-Bold = 600, Bold = 700 (Extra-Bold = 800)

package/scss/proposals.scss

@@ -2,9 +2,7 @@
 /// <reference path="./mixins" />
 /// <reference path="./vendor/foundation-settings" />
 
-@use './variables' as *;
-@use './vendor/foundation-settings' as *;
-@use '../mixins';
+@use "sass:color";
 
 // --> Originally from layout.scss
 .pill.menu {
@@ -84,7 +82,7 @@
 
     &::after {
         content: '';
-        background-color: fade-out($success-alt, 0.75);
+        background-color: color.adjust($success-alt, $alpha: -0.75);
         position: absolute;
         top: 0;
         left: 0;
@@ -101,7 +99,7 @@
         }
 
         &::after {
-            background-color: fade-out($primary, 0.75);
+            background-color: color.adjust($primary, $alpha: -0.75);
         }
     }
 
@@ -114,7 +112,7 @@
         }
     
         &::after {
-            background-color: fade-out($alert, 0.75);
+            background-color: color.adjust($alert, $alpha: -0.75);
         }
     }
 }
@@ -246,7 +244,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: fade-out($white, 0.2);
+    background-color: color.adjust($white, $alpha: -0.2);
     z-index: 100;
 }
 
@@ -420,15 +418,15 @@
 .vertical-split,
 .table-row {
     &.modified {
-        background-color: fade-out($success-alt, 0.75) !important;
+        background-color: color.adjust($success-alt, $alpha: -0.75) !important;
     }
 
     &.attention {
-        background-color: fade-out($attention, 0.5) !important;
+        background-color: color.adjust($attention, $alpha: -0.5) !important;
     }
 
     &.needs-response {
-        background-color: fade-out($quaternary, 0.4) !important;
+        background-color: color.adjust($quaternary, $alpha: -0.4) !important;
     }
 }
 

package/scss/proposalsshared.scss

@@ -2,9 +2,6 @@
 /// <reference path="./mixins" />
 /// <reference path="./vendor/foundation-settings" />
 
-@use './variables' as *;
-@use './vendor/foundation-settings' as *;
-
 .project-footer {
     margin-top: 30px;
 

package/scss/styles.scss

@@ -1,23 +1,67 @@
-@use './variables' as *;
-@use './mixins';
+@import './variables';
+@import './mixins';
 
-// foundation 6 sites
-@use './vendor/foundation';
+// Vendor
+@import './vendor/foundation-settings';
+@import '~foundation-sites/scss/foundation';
+//@import '~@fortawesome/fontawesome-free/scss/fontawesome';
 
-@use './partials/layout';
-@use './partials/navigation';
-@use './partials/badges';
-@use './partials/buttons';
-@use './partials/forms';
-@use './partials/loader';
-@use './partials/modals';
-@use './partials/flyovers';
-@use './partials/pills';
-@use './partials/tables';
-@use './partials/tooltips';
-@use './partials/typography';
-@use './partials/content';
-@use './partials/specsheet';
-@use './partials/notifications';
-@use './partials/progressbar';
-@use './partials/print';
+// Individual Foundation Pieces
+@include foundation-global-styles;
+@include foundation-xy-grid-classes;
+//@include foundation-grid;
+//@include foundation-flex-grid;
+@include foundation-flex-classes;
+@include foundation-typography;
+@include foundation-forms;
+//@include foundation-button;
+//@include foundation-accordion;
+//@include foundation-accordion-menu;
+//@include foundation-badge;
+//@include foundation-breadcrumbs;
+//@include foundation-button-group;
+//@include foundation-callout;
+//@include foundation-card;
+//@include foundation-close-button;
+//@include foundation-menu;
+//@include foundation-menu-icon;
+//@include foundation-drilldown-menu;
+//@include foundation-dropdown;
+//@include foundation-dropdown-menu;
+//@include foundation-responsive-embed;
+@include foundation-label;
+//@include foundation-media-object;
+//@include foundation-off-canvas;
+//@include foundation-orbit;
+//@include foundation-pagination;
+//@include foundation-progress-bar;
+//@include foundation-slider;
+//@include foundation-sticky;
+@include foundation-reveal;
+@include foundation-switch;
+//@include foundation-table;
+//@include foundation-tabs;
+//@include foundation-thumbnail;
+//@include foundation-title-bar;
+//@include foundation-tooltip;
+//@include foundation-top-bar;
+@include foundation-visibility-classes;
+//@include foundation-float-classes;
+
+@import './partials/layout';
+@import './partials/navigation';
+@import './partials/badges';
+@import './partials/buttons';
+@import './partials/forms';
+@import './partials/loader';
+@import './partials/modals';
+@import './partials/flyovers';
+@import './partials/pills';
+@import './partials/tables';
+@import './partials/tooltips';
+@import './partials/typography';
+@import './partials/content';
+@import './partials/specsheet';
+@import './partials/notifications';
+@import './partials/progressbar';
+@import './partials/print';

package/scss/vendor/_foundation-settings.scss

@@ -1,5 +1,4 @@
  /// <reference path="../variables" />
- @use '../variables' as *;
 
  @use "sass:color";
 
@@ -65,7 +64,7 @@
 //  55. Top Bar
 //  56. Xy Grid
 
-@use 'foundation-sites/scss/util/util' as *;
+@import 'foundation-sites/scss/util/util';
 
 // 1. Global
 // ---------

package/scss/vendor/_foundation.scss

@@ -1,45 +0,0 @@
-// Vendor
-@use './foundation-settings' as *;
-@use 'foundation-sites/scss/foundation' as *;
-
-// Individual Foundation Pieces
-@include foundation-global-styles;
-@include foundation-xy-grid-classes;
-//@include foundation-grid;
-//@include foundation-flex-grid;
-@include foundation-flex-classes;
-@include foundation-typography;
-@include foundation-forms;
-//@include foundation-button;
-//@include foundation-accordion;
-//@include foundation-accordion-menu;
-//@include foundation-badge;
-//@include foundation-breadcrumbs;
-//@include foundation-button-group;
-//@include foundation-callout;
-//@include foundation-card;
-//@include foundation-close-button;
-//@include foundation-menu;
-//@include foundation-menu-icon;
-//@include foundation-drilldown-menu;
-//@include foundation-dropdown;
-//@include foundation-dropdown-menu;
-//@include foundation-responsive-embed;
-@include foundation-label;
-//@include foundation-media-object;
-//@include foundation-off-canvas;
-//@include foundation-orbit;
-//@include foundation-pagination;
-//@include foundation-progress-bar;
-//@include foundation-slider;
-//@include foundation-sticky;
-@include foundation-reveal;
-@include foundation-switch;
-//@include foundation-table;
-//@include foundation-tabs;
-//@include foundation-thumbnail;
-//@include foundation-title-bar;
-//@include foundation-tooltip;
-//@include foundation-top-bar;
-@include foundation-visibility-classes;
-//@include foundation-float-classes;