@beterdichtbij/component-library 0.72.1 → 0.72.2-beta.0

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,184 +1,184 @@
-.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;
-
-        &:focus,
-        &:focus-visible {
-          outline: 3px solid $blue-dark;
-          outline-offset: 2px;
-        }
-
-        .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;
-      gap: 5px;
-      // 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;
+
+        &:focus,
+        &:focus-visible {
+          outline: 3px solid $blue-dark;
+          outline-offset: 2px;
+        }
+
+        .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;
+      gap: 5px;
+      // 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;
+      }
+    }
+  }
 }

package/dist/scss/_notification-button.scss

@@ -1,30 +1,30 @@
-.bd-notification-button {
-    display: flex;
-    position: relative;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    width: 40px;
-    height: 40px;
-    font-size: 18px;
-
-    img {
-        width: 100%;
-        height: 100%
-    }
-
-    .number-circle {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        border-radius: 50%;
-        width: 12px;
-        height: 12px;
-        background: #3594cf;
-        color: #ffffff;
-        font-size: 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+.bd-notification-button {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+
+    img {
+        width: 100%;
+        height: 100%
+    }
+
+    .number-circle {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        border-radius: 50%;
+        width: 12px;
+        height: 12px;
+        background: #3594cf;
+        color: #ffffff;
+        font-size: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 }