@beterdichtbij/component-library 0.71.0-beta.3 → 0.71.1

package/dist/scss/_mixins.scss

@@ -1,78 +1,78 @@
-@mixin alert($color, $bg-color) {  
-    border-radius: 8px;
-    padding: 15px;
-    font-size: 16px;
-    background-color: $bg-color;
-    color: $color;
-    border: 1px solid $color;
-    svg {
-        fill: $color;
-        &.icon{
-        margin-right:8px;
-        }
-    }  
-}
-
-@mixin badge($color, $bg-color) {  
-    border-radius: 8px;
-    padding: 5px 8px;
-    font-weight: 500;
-    font-style: normal;
-    font-size: 0.75rem;
-    line-height: 0.875rem;
-    background-color: $bg-color;
-    color: $color;
-    svg {
-        fill: $color;
-        height: 12px;
-        width: 12px;
-        &.icon{
-        margin-right:8px;
-        }
-    }  
-}
-
-@mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color) {
-    color: $color;
-    background-color: $bg-color;  
-    border:$border $solid $border-color;
-
-    svg:not(.icon-microsoft-teams) {
-        fill: $color;
-        path{
-            fill:$color
-        }
-    }
-
-    &:hover, &:focus{
-        color: $hover-color;
-        background-color: $hover-bg-color;
-        border:$border $solid $hover-border-color;   
-        
-        svg {
-            fill: $hover-color;
-            path{
-                fill:$hover-color;
-            }
-        }
-    }
-
-    &:active{
-        color: $color;
-        background-color: $bg-color;  
-        border:$border $solid $border-color;
-
-        svg {
-            fill: $color;
-            path{
-                fill:$color
-            }
-        }
-    }
-
-    &.disabled{
-        opacity: 0.5;
-        color: $color;
-        background-color: $bg-color; 
-    }
-}
+@mixin alert($color, $bg-color) {  
+    border-radius: 8px;
+    padding: 15px;
+    font-size: 16px;
+    background-color: $bg-color;
+    color: $color;
+    border: 1px solid $color;
+    svg {
+        fill: $color;
+        &.icon{
+        margin-right:8px;
+        }
+    }  
+}
+
+@mixin badge($color, $bg-color) {  
+    border-radius: 8px;
+    padding: 5px 8px;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+    background-color: $bg-color;
+    color: $color;
+    svg {
+        fill: $color;
+        height: 12px;
+        width: 12px;
+        &.icon{
+        margin-right:8px;
+        }
+    }  
+}
+
+@mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color) {
+    color: $color;
+    background-color: $bg-color;  
+    border:$border $solid $border-color;
+
+    svg:not(.icon-microsoft-teams) {
+        fill: $color;
+        path{
+            fill:$color
+        }
+    }
+
+    &:hover, &:focus{
+        color: $hover-color;
+        background-color: $hover-bg-color;
+        border:$border $solid $hover-border-color;   
+        
+        svg {
+            fill: $hover-color;
+            path{
+                fill:$hover-color;
+            }
+        }
+    }
+
+    &:active{
+        color: $color;
+        background-color: $bg-color;  
+        border:$border $solid $border-color;
+
+        svg {
+            fill: $color;
+            path{
+                fill:$color
+            }
+        }
+    }
+
+    &.disabled{
+        opacity: 0.5;
+        color: $color;
+        background-color: $bg-color; 
+    }
+}

package/dist/scss/_mobile-menu.scss

@@ -1,92 +1,92 @@
-.bd-mobile-menu {
-    position: fixed;
-    height: 100%;
-    width: 100%;
-    top: 0px;
-    right: -100%;
-    background: #fff;
-    z-index: 1000;
-    animation-duration: .5s;
-    padding: 0px 30px;
-    user-select: none;
-    display: none;
-
-    &.inactive {
-        animation-name: slideout;
-    }
-
-    &.active {
-        animation-name: slidein;
-        right: 0px;
-    }
-
-    .header {
-        height: 66px;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid $color-lightblue;
-        color: $color-blue;
-        font-family: $font-secondary;
-        font-weight: $font-bold;
-        font-size: 1rem;
-
-        .icon-close-wrapper {
-            width: 44px;
-            height: 66px;
-            cursor: pointer;
-            display: flex;
-            justify-content: right;
-            align-items: center;
-
-            .icon-close {
-                fill: $color-blue;
-            }
-        }
-    }
-
-    .navbar {
-        padding: 0px;
-
-        .nav-item {
-            border-bottom: 1px solid $color-lightblue;
-            font-size: 1rem;
-
-            .nav-link {
-                cursor: pointer;
-            }
-
-            .icon {
-                fill: #394156;
-                margin-right: 8px;
-            }
-        }
-    }
-}
-
-@keyframes slidein {
-    from {
-        right: -100%;
-    }
-
-    to {
-        right: 0px;
-    }
-}
-
-@keyframes slideout {
-    from {
-        right: 0px;
-    }
-
-    to {
-        right: -100%;
-    }
-}
-
-@media (max-width: map-get($grid-breakpoints, md)) {
-    .bd-mobile-menu {
-        display: block;
-    }
+.bd-mobile-menu {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0px;
+    right: -100%;
+    background: #fff;
+    z-index: 1000;
+    animation-duration: .5s;
+    padding: 0px 30px;
+    user-select: none;
+    display: none;
+
+    &.inactive {
+        animation-name: slideout;
+    }
+
+    &.active {
+        animation-name: slidein;
+        right: 0px;
+    }
+
+    .header {
+        height: 66px;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid $color-lightblue;
+        color: $color-blue;
+        font-family: $font-secondary;
+        font-weight: $font-bold;
+        font-size: 1rem;
+
+        .icon-close-wrapper {
+            width: 44px;
+            height: 66px;
+            cursor: pointer;
+            display: flex;
+            justify-content: right;
+            align-items: center;
+
+            .icon-close {
+                fill: $color-blue;
+            }
+        }
+    }
+
+    .navbar {
+        padding: 0px;
+
+        .nav-item {
+            border-bottom: 1px solid $color-lightblue;
+            font-size: 1rem;
+
+            .nav-link {
+                cursor: pointer;
+            }
+
+            .icon {
+                fill: #394156;
+                margin-right: 8px;
+            }
+        }
+    }
+}
+
+@keyframes slidein {
+    from {
+        right: -100%;
+    }
+
+    to {
+        right: 0px;
+    }
+}
+
+@keyframes slideout {
+    from {
+        right: 0px;
+    }
+
+    to {
+        right: -100%;
+    }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)) {
+    .bd-mobile-menu {
+        display: block;
+    }
 }

package/dist/scss/_modal.scss

@@ -1,177 +1,177 @@
-.modal.bd-modal {
-
-  backdrop-filter: brightness(0.7);
-  
-  &.modal-xl {
-    @include media-breakpoint-down(xl) {
-      .modal-dialog {
-        max-width: 100%;
-      }
-    }
-  }
-
-  .modal-dialog {
-    min-height: 100%;
-    display: flex;
-    align-items: center;
-    margin: 0 auto;
-
-    .modal-content {
-      background: #f5f5f5;
-    }
-
-    .modal-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      // Explicitly inherit border-radius from .modal-dialog set by Bootstrap.
-      border-radius: inherit;
-
-      button.btn-close {
-        top: 20px;
-        right: 20px;
-        position: absolute;
-        padding: revert;
-        margin: revert;
-        height: revert;
-        display: flex;
-        gap: 4px;
-        background: transparent;
-        background-image: initial;
-        color: $gray-primary;
-
-        .icon-close {
-          width: 24px;
-          height: 24px;
-          background-color: $blue-text; 
-          display: inline-block;
-          padding: 4px; 
-          border-radius: 50%;
-
-          path {
-            fill: $color-white;
-          }
-      
-          &:hover {
-            background-color: $color-lightblue;
-
-            path {
-                fill: $blue-text;
-            }
-          }
-        }
-      }
-
-      @include media-breakpoint-up(md) {
-        padding: 30px 65px 15px 65px;
-      }
-
-      @include media-breakpoint-down(md) {
-        flex-direction: column-reverse;
-        align-items: center;
-        justify-content: center;
-        padding: .75rem;
-        margin-top: 0px;
-
-        > * {
-          width: 100%;
-          text-align: center;
-        }
-
-        button.btn-close {
-          top: initial;
-          right: initial;
-          position: initial;
-          margin: auto;
-          font-size: 0.9em;
-          padding: initial;
-          height: initial;
-        }
-      }
-    }
-
-    .modal-body {
-      border: 0px;
-      // Explicitly inherit border-radius from .modal-dialog set by Bootstrap.
-      border-radius: inherit;
-
-      @include media-breakpoint-up(md) {
-        padding: 15px 65px 30px 65px;
-      }
-
-      > p:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-
-    &:has(.modal-footer) .modal-body {
-      @include media-breakpoint-up(md) {
-        padding: 15px 65px;
-      }
-    }
-
-    .modal-footer {
-      justify-content: flex-start;
-      // Explicitly inherit border-radius from .modal-dialog set by Bootstrap.
-      border-radius: inherit;
-
-      button {
-        margin: 0 2px;
-
-        &:first-child {
-          margin-left: 0;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      @include media-breakpoint-up(md) {
-        padding: 15px 65px 30px 65px;
-      }
-
-      @include media-breakpoint-down(md) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: .75rem;
-
-        > button {
-          width: 100%;
-          margin: 2px 0;
-
-          &:first-child {
-            margin-top: 0;
-          }
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-
-    .btn-close {
-      align-self: baseline;
-    }
-
-    .modal-title {
-      font-family: $font-secondary;
-      font-weight: $font-normal;
-      font-size: 31px;
-      color: $color-darkblue;
-      letter-spacing: 0;
-
-      @include media-breakpoint-down(sm) {
-        margin-top: 20px;
-        line-height:normal;
-      }
-
-      .title-image {
-        height: 31px;
-        margin-right: 10px;
-      }
-    }
-  }
+.modal.bd-modal {
+
+  backdrop-filter: brightness(0.7);
+  
+  &.modal-xl {
+    @include media-breakpoint-down(xl) {
+      .modal-dialog {
+        max-width: 100%;
+      }
+    }
+  }
+
+  .modal-dialog {
+    min-height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+
+    .modal-content {
+      background: #f5f5f5;
+    }
+
+    .modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      // Explicitly inherit border-radius from .modal-dialog set by Bootstrap.
+      border-radius: inherit;
+
+      button.btn-close {
+        top: 20px;
+        right: 20px;
+        position: absolute;
+        padding: revert;
+        margin: revert;
+        height: revert;
+        display: flex;
+        gap: 4px;
+        background: transparent;
+        background-image: initial;
+        color: $gray-primary;
+
+        .icon-close {
+          width: 24px;
+          height: 24px;
+          background-color: $blue-text; 
+          display: inline-block;
+          padding: 4px; 
+          border-radius: 50%;
+
+          path {
+            fill: $color-white;
+          }
+      
+          &:hover {
+            background-color: $color-lightblue;
+
+            path {
+                fill: $blue-text;
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-up(md) {
+        padding: 30px 65px 15px 65px;
+      }
+
+      @include media-breakpoint-down(md) {
+        flex-direction: column-reverse;
+        align-items: center;
+        justify-content: center;
+        padding: .75rem;
+        margin-top: 0px;
+
+        > * {
+          width: 100%;
+          text-align: center;
+        }
+
+        button.btn-close {
+          top: initial;
+          right: initial;
+          position: initial;
+          margin: auto;
+          font-size: 0.9em;
+          padding: initial;
+          height: initial;
+        }
+      }
+    }
+
+    .modal-body {
+      border: 0px;
+      // Explicitly inherit border-radius from .modal-dialog set by Bootstrap.
+      border-radius: inherit;
+
+      @include media-breakpoint-up(md) {
+        padding: 15px 65px 30px 65px;
+      }
+
+      > p:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    &:has(.modal-footer) .modal-body {
+      @include media-breakpoint-up(md) {
+        padding: 15px 65px;
+      }
+    }
+
+    .modal-footer {
+      justify-content: flex-start;
+      // Explicitly inherit border-radius from .modal-dialog set by Bootstrap.
+      border-radius: inherit;
+
+      button {
+        margin: 0 2px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      @include media-breakpoint-up(md) {
+        padding: 15px 65px 30px 65px;
+      }
+
+      @include media-breakpoint-down(md) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: .75rem;
+
+        > button {
+          width: 100%;
+          margin: 2px 0;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    .btn-close {
+      align-self: baseline;
+    }
+
+    .modal-title {
+      font-family: $font-secondary;
+      font-weight: $font-normal;
+      font-size: 31px;
+      color: $color-darkblue;
+      letter-spacing: 0;
+
+      @include media-breakpoint-down(sm) {
+        margin-top: 20px;
+        line-height:normal;
+      }
+
+      .title-image {
+        height: 31px;
+        margin-right: 10px;
+      }
+    }
+  }
 }