@dvrd/dvr-controls 1.1.14 → 1.1.15

package/src/js/input/date/timePicker/style/timePicker.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/common-variables' as commons;
+@use '../../../../../style/colors';
 
 .timepicker-container {
   height: 21.5rem;
@@ -51,17 +52,17 @@
         position: relative;
 
         .selected-background {
-          @include centerY;
+          @include commons.centerY;
           position: absolute;
           width: 100%;
           height: calc(100% / 3);
           z-index: 0;
-          background-color: $color-gray-4;
+          background-color: colors.$color-gray-4;
         }
 
         .time-select-container {
           position: relative;
-          border: 1px solid $color-gray-7;
+          border: 1px solid colors.$color-gray-7;
           border-radius: .25rem;
           height: 6rem;
           overflow-y: auto;

package/src/js/input/password/style/passwordInput.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .dvr-password-field-container {
   position: relative;
@@ -29,11 +29,11 @@
   }
 
   .passwordOrnament {
-    color: $color-gray-3;
+    color: colors.$color-gray-3;
     transition: color .2s ease;
 
     &:hover {
-      color: $color-gray-5;
+      color: colors.$color-gray-5;
     }
   }
 }

package/src/js/input/password/style/passwordRules.scss

@@ -2,16 +2,16 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .password-rules-container {
-  @include borderRadius(.2rem);
+  border-radius: .2rem;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: white;
   padding: .3rem;
-  border: 1px solid $color-gray-5;
+  border: 1px solid colors.$color-gray-5;
   z-index: 1;
   display: flex;
   flex-direction: column;
@@ -31,7 +31,7 @@
     transition: color .2s ease;
 
     &.passed {
-      color: $color-green-whatsapp;
+      color: colors.$color-green-whatsapp;
     }
 
     &.failed {

package/src/js/input/simple/style/simpleInput.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .dvr-simple-input-container {
   display: inline-flex;
@@ -43,7 +43,7 @@
   }
 
   .dvr-simple-input-ornament {
-    color: $color-gray-header;
+    color: colors.$color-gray-header;
 
     .dvr-simple-input-clear {
       cursor: pointer;

package/src/js/input/style/input.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/common-variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .inputContainer {
   position: relative;
@@ -45,13 +46,13 @@
       font-size: 1rem;
 
       &:disabled {
-        color: $color-gray-4 !important;
+        color: colors.$color-gray-4 !important;
       }
     }
 
     .clearButton {
       font-size: .8rem;
-      color: $color-gray-5;
+      color: colors.$color-gray-5;
       transition: color .2s ease-in-out;
       cursor: pointer;
       margin-right: .3rem;
@@ -64,7 +65,7 @@
   }
 
   &.outlined {
-    @include borderRadius(.2rem);
+    border-radius: .2rem;
     border-width: 2px;
     border-style: solid;
     padding: .2rem;
@@ -108,7 +109,7 @@
 
       &:not(.filled) {
         .label {
-          @include centerY;
+          @include commons.centerY;
 
           &.multiLine {
             top: calc(.2rem + 2px);

package/src/js/link/link.tsx

@@ -5,10 +5,11 @@
 import './style/link.scss';
 import classNames from 'classnames';
 import React, {MouseEventHandler} from 'react';
-import {navigate} from '../util/componentUtil';
+import { NavigateFunction, useNavigate } from 'react-router';
 
 interface Props {
     onClick?: MouseEventHandler;
+    navigate?: NavigateFunction;
     route?: string;
     className?: string;
     disabled?: boolean;
@@ -18,6 +19,7 @@ interface Props {
 
 export default function Link(props: React.PropsWithChildren<Props>) {
     const {className, disabled, route, children, underline, target, onClick} = props;
+    const navigate = props.navigate ?? useNavigate();
 
     function _onClick(evt: React.MouseEvent) {
         evt.preventDefault();

package/src/js/link/style/link.scss

@@ -2,10 +2,10 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
 
 .app-link {
-  color: $color-blue-1;
+  color: colors.$color-blue-1;
   text-decoration: none;
   transition: color .2s ease-in-out, border-bottom-color .2s ease-in-out;
   cursor: pointer;
@@ -15,7 +15,7 @@
   }
 
   &:hover {
-    color: $color-blue-1-darken;
+    color: colors.$color-blue-1-darken;
 
     &.underline {
       border-bottom: 1px solid currentColor;
@@ -24,7 +24,7 @@
 
   &.disabled {
     cursor: default;
-    color: $color-gray-4 !important;
+    color: colors.$color-gray-4 !important;
     border-bottom: 1px solid transparent !important;
   }
 }

package/src/js/loader/style/loader.scss

@@ -2,14 +2,15 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .loader-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  z-index: $z-index-high;
+  z-index: commons.$z-index-high;
   background-color: rgba(white, .6);
   top: 0;
   left: 0;
@@ -21,9 +22,9 @@
   }
 
   .loader-label {
-    @include borderRadius(.2rem);
+    border-radius: .2rem;
     font-size: .9rem;
-    color: $color-gray-6;
+    color: colors.$color-gray-6;
     text-align: center;
     margin-top: .5rem;
     display: block;
@@ -32,7 +33,7 @@
   }
 
   .loader {
-    @include borderRadius(50%);
+    border-radius: 50%;
     border: 1rem solid;
     animation: rotate 1s ease-in-out infinite;
     min-width: 2rem;

package/src/js/navigation/style/mobileNavigation.scss

@@ -2,14 +2,11 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .dvrd-mobile-navigation {
-  @media(min-width: 750px) {
-    display: none;
-  }
-
-  color: $color-blue-text;
+  color: colors.$color-blue-text;
   position: fixed;
   z-index: 2000;
 
@@ -22,11 +19,14 @@
     padding: .5rem; // For better UX, makes the touch surface bigger
 
     .mobile-navigation-icon {
-      @include backgroundShadow2;
-      font-size: 2rem;
-      padding: .25rem;
-      background-color: white;
-      border-radius: .5rem;
+      @include commons.backgroundShadow2;
+
+      & {
+        font-size: 2rem;
+        padding: .25rem;
+        background-color: white;
+        border-radius: .5rem;
+      }
     }
   }
 
@@ -39,18 +39,21 @@
   }
 
   .mobile-navigation-container {
-    @include backgroundShadow3($borderRadius: 0);
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100dvh;
-    max-width: 100dvw;
-    overflow-y: auto;
-    background-color: white;
-    transform: translateX(-100%);
-    transition: transform .2s ease-in-out;
-    display: grid;
-    grid-template-rows: fit-content(100%) 1fr fit-content(100%);
+    @include commons.backgroundShadow3($borderRadius: 0);
+
+    & {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100dvh;
+      max-width: 100dvw;
+      overflow-y: auto;
+      background-color: white;
+      transform: translateX(-100%);
+      transition: transform .2s ease-in-out;
+      display: grid;
+      grid-template-rows: fit-content(100%) 1fr fit-content(100%);
+    }
 
     .mobile-navigation-close {
       position: sticky;
@@ -71,7 +74,7 @@
         font-size: 1.1rem;
 
         &.active {
-          color: $color-blue-1;
+          color: colors.$color-blue-1;
           font-weight: 500;
         }
       }
@@ -89,4 +92,8 @@
       transform: none;
     }
   }
+
+  @media(min-width: 750px) {
+    display: none;
+  }
 }

package/src/js/optionsList/style/dvrdOptionsList.scss

@@ -2,13 +2,14 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .dvrd-options-list {
   position: relative;
 
   .btn-container {
-    @include backgroundShadow2;
+    @include commons.backgroundShadow2;
     border-radius: .5rem;
     padding: .7rem 1rem;
     display: grid;
@@ -43,7 +44,7 @@
     .option {
       padding: .5rem;
       cursor: pointer;
-      border-bottom: 1px solid $color-gray-4;
+      border-bottom: 1px solid colors.$color-gray-4;
       transition: background-color .2s ease-in-out;
 
       .option-label {
@@ -57,7 +58,7 @@
 
       &:hover {
         &.default {
-          background-color: rgba($color-blue-1, .2);
+          background-color: rgba(colors.$color-blue-1, .2);
         }
 
         &.red {
@@ -69,7 +70,7 @@
 
   &.open, &.hover:hover {
     .options-container {
-      @include backgroundShadow();
+      @include commons.backgroundShadow;
       visibility: visible;
       opacity: 1;
     }

package/src/js/optionsMenu/style/optionsMenu.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .option-menu-container {
   display: flex;
@@ -24,14 +25,14 @@
   }
 
   .menu-options-list {
-    @include backgroundShadow;
+    @include commons.backgroundShadow;
     position: fixed;
     display: flex;
     flex-direction: column;
     visibility: hidden;
     opacity: 0;
     transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
-    z-index: $z-index-dialog;
+    z-index: commons.$z-index-dialog;
 
     .menu-option {
       display: flex;
@@ -50,14 +51,14 @@
       }
 
       &:hover {
-        background-color: $color-gray-7;
+        background-color: colors.$color-gray-7;
       }
 
       &.disabled {
         cursor: not-allowed;
 
         .menu-option-label {
-          color: $color-gray-3;
+          color: colors.$color-gray-3;
         }
       }
     }

package/src/js/pdf/element/style/pdfElement.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/common-variables' as commons;
+@use '../../../../style/colors';
 
 .pdf-draggable {
   outline: 2px solid transparent;
@@ -14,7 +15,7 @@
     left: -2px;
     width: calc(100% + 4px);
     transform: translateY(-100%);
-    background-color: $color-gray-5;
+    background-color: colors.$color-gray-5;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -34,7 +35,7 @@
       }
 
       &:hover {
-        color: $color-gray-4;
+        color: colors.$color-gray-4;
 
         &.delete {
           color: red;
@@ -47,7 +48,7 @@
       align-items: center;
 
       .action {
-        border-right: 1px solid $color-gray-5;
+        border-right: 1px solid colors.$color-gray-5;
 
         &:last-child {
           border-right: none;
@@ -62,7 +63,7 @@
 
     .guide {
       position: absolute;
-      background-color: $color-gray-4;
+      background-color: colors.$color-gray-4;
       top: 0;
       left: 0;
 
@@ -92,8 +93,8 @@
   }
 
   &:hover, &.focused {
-    outline-color: $color-gray-5;
-    z-index: $z-index-high;
+    outline-color: colors.$color-gray-5;
+    z-index: commons.$z-index-high;
     background-color: white;
 
     .action-bar {

package/src/js/pdf/image/style/pdfImage.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .pdf-image {
   width: 100%;
@@ -15,8 +15,8 @@
 
   .img-selector {
     padding: 2rem;
-    border: 2px dashed $color-gray-3;
-    color: $color-gray-3;
+    border: 2px dashed colors.$color-gray-3;
+    color: colors.$color-gray-3;
     display: flex;
     flex-direction: column;
     align-items: center;

package/src/js/pdf/invoiceTable/style/pdfInvoiceTable.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .pdf-invoice-table {
   .invoice-line {
@@ -18,7 +18,7 @@
     }
 
     .light {
-      color: $color-gray-3;
+      color: colors.$color-gray-3;
     }
 
     .fl {

package/src/js/pdf/settings/buttons/style/iconButton.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/colors';
 
 .icon-button {
   display: inline-flex;
@@ -10,11 +10,11 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  background-color: $color-gray-7;
+  background-color: colors.$color-gray-7;
   width: 34px;
   height: 34px;
   transition: background-color .2s ease-in-out;
-  border-right: 1px solid $color-gray-4;
+  border-right: 1px solid colors.$color-gray-4;
 
   .icon-container {
     display: inline-flex;
@@ -37,11 +37,11 @@
   }
 
   &:hover {
-    background-color: $color-gray-4;
+    background-color: colors.$color-gray-4;
   }
 
   &.active {
-    background-color: $color-blue-1;
+    background-color: colors.$color-blue-1;
   }
 
   &:last-child {

package/src/js/pdf/settings/image/pdfImageSettings.tsx

@@ -1,13 +1,11 @@
 /*
  * Copyright (c) 2024. Dave van Rijn Development
  */
-import './style/pdfImageSettings.scss';
-
 import React, {PureComponent} from 'react';
-import PdfImage from "../../image/pdfImage";
-import {Button, DvrdButton, DvrdSelect, ElementPosition, SelectItemShape} from "../../../../../index";
-import IconButton, {IconButtonType} from "../buttons/iconButton";
-import {PDFDisplay} from "../../../util/interfaces";
+import {DvrdButton, DvrdSelect, ElementPosition, SelectItemShape} from '../../../../../index';
+import {PDFDisplay} from '../../../util/interfaces';
+import PdfImage from '../../image/pdfImage';
+import IconButton, {IconButtonType} from '../buttons/iconButton';
 
 interface Props {
     element: PdfImage;

package/src/js/pdf/settings/invoiceTable/style/pdfInvoiceTableSettings.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/display-breakpoints' as breakpoints;
+@use '../../../../../style/colors';
 
 .pdf-invoice-table-settings {
   display: grid;
@@ -24,11 +25,11 @@
     grid-column-start: span 2;
     width: 100%;
     height: 1px;
-    background-color: $color-gray-4;
+    background-color: colors.$color-gray-4;
     margin: .5rem 0;
   }
 
-  @include break-lg-down {
+  @include breakpoints.break-lg-down {
     grid-template-columns: auto;
     grid-column-gap: 0;
 

package/src/js/pdf/settings/style/pdfElementSettings.scss

@@ -2,12 +2,12 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .pdf-element-settings {
   background-color: white;
   padding: 1rem;
-  border: 1px solid $color-gray-7;
+  border: 1px solid colors.$color-gray-7;
   border-radius: .5rem;
   max-width: 30rem;
 
@@ -22,7 +22,7 @@
   .divider {
     width: 100%;
     height: 1px;
-    background-color: $color-gray-4;
+    background-color: colors.$color-gray-4;
     margin: .5rem 0;
   }
 

package/src/js/pdf/settings/text/style/pdfTextSettings.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/common-variables' as commons;
+@use '../../../../../style/colors';
 
 .pdf-text-settings {
   display: grid;
@@ -43,7 +44,7 @@
         flex-direction: column;
 
         .variables-title {
-          border-bottom: 2px solid $color-gray-4;
+          border-bottom: 2px solid colors.$color-gray-4;
           cursor: pointer;
           padding: .5rem .25rem;
           font-weight: 500;
@@ -61,7 +62,7 @@
             align-items: flex-start;
 
             .text-variable {
-              @include backgroundShadow;
+              @include commons.backgroundShadow;
               padding: .2rem .4rem;
               border-radius: .5rem;
               cursor: pointer;
@@ -76,7 +77,7 @@
               }
 
               &:hover {
-                background-color: $color-gray-7;
+                background-color: colors.$color-gray-7;
               }
             }
           }