@beterdichtbij/component-library 0.72.0 → 0.72.1-alpha.0

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;
+    }
 }

package/dist/scss/_pagination.scss

@@ -1,57 +1,57 @@
- .page-link, .page-link:hover {
-    width: 40px;
-    height: 40px;
-    border:$pagination-border-width solid $pagination-border-color;
-    border-radius: $pagination-border-radius;
-    font-weight: $font-semibold;
-    color: $pagination-color;
-    background-color: $white;
-    cursor: pointer;
-    user-select: none;
-  
-    .active &{
-        border-color: $primary;
-        background-color: $white; 
-        color: $font-color-primary; 
-        
-        .colleague & {
-            border-color: $color-colleague;
-        }
-
-    }
-
-    .disabled &{
-       border: none;
-       background-color: transparent;
-    }
-}
-
-.bd-pagination {
-    .pagination {
-        display: block;
-        text-align: center;
-        margin-bottom: 0px;
-
-        &.colleague {
-            .page-item:not(.active) .page-link {
-                color: $color-colleague;
-            }
-        }
-
-        .page-item {
-            background-color: $white;
-            display: inline-block;
-            margin: 4px;
-            vertical-align: top;
-
-            .page-link {
-                color: $blue;
-
-                svg {
-                    color: $color-darkblue;
-                    margin: 0;
-                }
-            }
-        }
-    }
+ .page-link, .page-link:hover {
+    width: 40px;
+    height: 40px;
+    border:$pagination-border-width solid $pagination-border-color;
+    border-radius: $pagination-border-radius;
+    font-weight: $font-semibold;
+    color: $pagination-color;
+    background-color: $white;
+    cursor: pointer;
+    user-select: none;
+  
+    .active &{
+        border-color: $primary;
+        background-color: $white; 
+        color: $font-color-primary; 
+        
+        .colleague & {
+            border-color: $color-colleague;
+        }
+
+    }
+
+    .disabled &{
+       border: none;
+       background-color: transparent;
+    }
+}
+
+.bd-pagination {
+    .pagination {
+        display: block;
+        text-align: center;
+        margin-bottom: 0px;
+
+        &.colleague {
+            .page-item:not(.active) .page-link {
+                color: $color-colleague;
+            }
+        }
+
+        .page-item {
+            background-color: $white;
+            display: inline-block;
+            margin: 4px;
+            vertical-align: top;
+
+            .page-link {
+                color: $blue;
+
+                svg {
+                    color: $color-darkblue;
+                    margin: 0;
+                }
+            }
+        }
+    }
 }

package/dist/scss/_phone-number-edit-modal.scss

@@ -1,36 +1,36 @@
-#phone-number-edit-modal {
-    #form-input-telefoonnummer {
-        flex: 1;
-    }
-
-    .alert-danger {
-        ul {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-    }
-
-    .mobile-device {
-        display: none;
-    }
-
-    .tablet-device-up {
-        display: block;
-    }
-
-    @media (max-width: 576px) {
-        #form-input-phone-number .form-input-with-button {
-            gap: 0;
-            margin-bottom: 8px;
-        }
-
-        .mobile-device {
-            display: block;
-        }
-
-        .tablet-device-up {
-            display: none;
-        }
-    }
+#phone-number-edit-modal {
+    #form-input-telefoonnummer {
+        flex: 1;
+    }
+
+    .alert-danger {
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    .mobile-device {
+        display: none;
+    }
+
+    .tablet-device-up {
+        display: block;
+    }
+
+    @media (max-width: 576px) {
+        #form-input-phone-number .form-input-with-button {
+            gap: 0;
+            margin-bottom: 8px;
+        }
+
+        .mobile-device {
+            display: block;
+        }
+
+        .tablet-device-up {
+            display: none;
+        }
+    }
 }

package/dist/scss/_pill-container.scss

@@ -1,26 +1,26 @@
-.bd-pill-container {
-    margin-bottom: 20px;
-
-    .bd-chat-cloud-card__footer &{
-        margin-bottom: 0px;
-    }
-
-    &__list {
-        display: flex;
-        justify-content: flex-start;
-        flex-flow: wrap;
-        list-style: none;
-        gap: 8px;
-        padding: 5px 0px;
-
-        .bd-chat-cloud-card__footer &{
-            padding: 0px;
-        }
-    }
-
-    &__item {
-        max-width: 300px;
-        overflow: auto;
-        margin: 5px 5px 0px 0px;
-    }
-}
+.bd-pill-container {
+    margin-bottom: 20px;
+
+    .bd-chat-cloud-card__footer &{
+        margin-bottom: 0px;
+    }
+
+    &__list {
+        display: flex;
+        justify-content: flex-start;
+        flex-flow: wrap;
+        list-style: none;
+        gap: 8px;
+        padding: 5px 0px;
+
+        .bd-chat-cloud-card__footer &{
+            padding: 0px;
+        }
+    }
+
+    &__item {
+        max-width: 300px;
+        overflow: auto;
+        margin: 5px 5px 0px 0px;
+    }
+}