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

package/dist/scss/_dropdown.scss

@@ -1,114 +1,114 @@
-
-.bd-dropdown.dropdown {
-    display: inline-block;
-
-    &.show {
-  
-        &:after {
-            transform: rotate(180deg);
-        }
-    }
-
-    ul.dropdown-menu {
-        border: 0px;
-        box-shadow: $dropdown-box-shadow;
-        margin-top: 0.125rem;
-        
-        &.dropdown-menu-action {
-            border: 1px solid rgba(0,0,0,.15);
-            border-radius: $border-radius-default;
-            
-            .dropdown-item{
-                width:100%;
-                padding: 0.25rem 1.5rem;
-                white-space: nowrap;
-                line-height: revert;
-                
-                &:hover{
-                    background-color: #4d5875;
-                    color: #f5f5f5;
-                    text-decoration: none;
-                }
-            }
-        }
-
-
-        .dropdown-item {
-            font-size: 1rem;
-            letter-spacing: 0;
-            line-height: 2.75rem;
-
-            &:not(:last-child) {
-                border-bottom: 1px solid $color-lightblue;
-            }
-
-            &:active,
-            &:focus {
-                text-decoration: underline;
-                background-color: transparent;
-            }
-
-            @include media-breakpoint-up(md) {
-                &:hover {
-                    text-decoration: underline;
-                    background-color: transparent;
-                }
-            }
-        }
-
-    }
-
-    .dropdown-toggle {
-        display: flex;
-        align-items: center;
-        font-weight: $font-bold;
-        font-size: 16px;
-        letter-spacing: 0;
-        line-height: 24px;
-
-        &:after {
-            border: 0px;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M8.828 6.207L14.632.404a1 1 0 0 1 1.414 0l.707.707a1 1 0 0 1 0 1.414L9.682 9.596a.999.999 0 0 1-.854.282.999.999 0 0 1-.853-.282L.904 2.526a1 1 0 0 1 0-1.415L1.61.404a1 1 0 0 1 1.414 0l5.803 5.803z' fill='%23AFB8CC'/%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-size: contain;
-            background-position: 50%;
-            width: 14px;
-            height: 10px;
-            transition: 0.2s all ease-in;
-        }
-
-        &-action {
-            font-size: calc(13px/16px) * 1rem;
-            font-weight: $font-medium;
-            padding: 0 10px;
-
-            &:after{
-                background-image:url('data:image/svg+xml, <svg class="icon icon-triangle-down" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" ><path d="M11.071 2.414L6.414 7.071a1 1 0 0 1-1.414 0L.343 2.414A1 1 0 0 1 1.05.707h9.314a1 1 0 0 1 .707 1.707z" /></svg>'); 
-                border: 0;
-                box-shadow: none;
-                width: 9px;
-                height: 7px;
-                margin-left: 5px;
-            }
-        }
-    }
-
-    a.dropdown-toggle{
-        color: $color-darkblue;
-    }
-}
-
-.bd-dropdown-item {
-    list-style-type: none;
-}
-
-.placeholder-tokens-menu {
-    .dropdown-item {
-        color: $color-darkblue;
-        border-left: 1px solid $color-lightblue;
-        border-right: 1px solid $color-lightblue;
-        &.active {
-            color:$white;
-        }
-    }    
+
+.bd-dropdown.dropdown {
+    display: inline-block;
+
+    &.show {
+  
+        &:after {
+            transform: rotate(180deg);
+        }
+    }
+
+    ul.dropdown-menu {
+        border: 0px;
+        box-shadow: $dropdown-box-shadow;
+        margin-top: 0.125rem;
+        
+        &.dropdown-menu-action {
+            border: 1px solid rgba(0,0,0,.15);
+            border-radius: $border-radius-default;
+            
+            .dropdown-item{
+                width:100%;
+                padding: 0.25rem 1.5rem;
+                white-space: nowrap;
+                line-height: revert;
+                
+                &:hover{
+                    background-color: #4d5875;
+                    color: #f5f5f5;
+                    text-decoration: none;
+                }
+            }
+        }
+
+
+        .dropdown-item {
+            font-size: 1rem;
+            letter-spacing: 0;
+            line-height: 2.75rem;
+
+            &:not(:last-child) {
+                border-bottom: 1px solid $color-lightblue;
+            }
+
+            &:active,
+            &:focus {
+                text-decoration: underline;
+                background-color: transparent;
+            }
+
+            @include media-breakpoint-up(md) {
+                &:hover {
+                    text-decoration: underline;
+                    background-color: transparent;
+                }
+            }
+        }
+
+    }
+
+    .dropdown-toggle {
+        display: flex;
+        align-items: center;
+        font-weight: $font-bold;
+        font-size: 16px;
+        letter-spacing: 0;
+        line-height: 24px;
+
+        &:after {
+            border: 0px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M8.828 6.207L14.632.404a1 1 0 0 1 1.414 0l.707.707a1 1 0 0 1 0 1.414L9.682 9.596a.999.999 0 0 1-.854.282.999.999 0 0 1-.853-.282L.904 2.526a1 1 0 0 1 0-1.415L1.61.404a1 1 0 0 1 1.414 0l5.803 5.803z' fill='%23AFB8CC'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: 50%;
+            width: 14px;
+            height: 10px;
+            transition: 0.2s all ease-in;
+        }
+
+        &-action {
+            font-size: calc(13px/16px) * 1rem;
+            font-weight: $font-medium;
+            padding: 0 10px;
+
+            &:after{
+                background-image:url('data:image/svg+xml, <svg class="icon icon-triangle-down" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" ><path d="M11.071 2.414L6.414 7.071a1 1 0 0 1-1.414 0L.343 2.414A1 1 0 0 1 1.05.707h9.314a1 1 0 0 1 .707 1.707z" /></svg>'); 
+                border: 0;
+                box-shadow: none;
+                width: 9px;
+                height: 7px;
+                margin-left: 5px;
+            }
+        }
+    }
+
+    a.dropdown-toggle{
+        color: $color-darkblue;
+    }
+}
+
+.bd-dropdown-item {
+    list-style-type: none;
+}
+
+.placeholder-tokens-menu {
+    .dropdown-item {
+        color: $color-darkblue;
+        border-left: 1px solid $color-lightblue;
+        border-right: 1px solid $color-lightblue;
+        &.active {
+            color:$white;
+        }
+    }    
 }

package/dist/scss/_extern.scss

@@ -1,2 +1,2 @@
-@import "extern/bootstrap";
+@import "extern/bootstrap";
 @import "extern/prime-vue";

package/dist/scss/_file-upload-preview.scss

@@ -1,54 +1,54 @@
-.bd-file-upload-preview {
-    display: inline-block;
-
-    .preview-details {
-        position: relative;
-
-        .preview-image {
-            min-width: 150px;
-            height: 88px;
-            object-fit: contain;
-        }
-
-        .mark-container {
-            display: block;
-            border-radius: 50%;
-            width: 21px;
-            height: 21px;
-            margin: 0px auto;
-
-            &.success {
-                background-color: $green;
-
-                svg {
-                    transform: translateY(-2px);
-                }
-            }
-
-            &.pending {
-                background-color: $white;
-            }
-        }
-
-        .remove-button {
-            position: absolute;
-            top: -10px;
-            right: -10px;
-            margin: 0;
-            width: 21px;
-            height: 21px;
-            border-radius: 50%;
-            padding: 0px;
-            background-color: $primary;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            .icon {
-                margin: revert;
-                transform: revert;
-                transition: revert;
-            }
-        }
-    }
+.bd-file-upload-preview {
+    display: inline-block;
+
+    .preview-details {
+        position: relative;
+
+        .preview-image {
+            min-width: 150px;
+            height: 88px;
+            object-fit: contain;
+        }
+
+        .mark-container {
+            display: block;
+            border-radius: 50%;
+            width: 21px;
+            height: 21px;
+            margin: 0px auto;
+
+            &.success {
+                background-color: $green;
+
+                svg {
+                    transform: translateY(-2px);
+                }
+            }
+
+            &.pending {
+                background-color: $white;
+            }
+        }
+
+        .remove-button {
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            margin: 0;
+            width: 21px;
+            height: 21px;
+            border-radius: 50%;
+            padding: 0px;
+            background-color: $primary;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .icon {
+                margin: revert;
+                transform: revert;
+                transition: revert;
+            }
+        }
+    }
 }

package/dist/scss/_file-upload.scss

@@ -1,27 +1,27 @@
-.bd-file-upload {
-  position: relative;
-  color: $color-darkblue;
-  font-family: $font-family-base;
-  width:fit-content;
-
-  .p-fileupload {
-    border: 0;
-    border-radius: 0;
-    background: none;
-
-    .p-fileupload-header {
-      border: none;
-      margin-bottom: 20px;
-    }
-
-    .filename {
-      color: $color-darkblue;
-    }
-  }
-
-  .preview-container {
-    position: relative;
-    display: inline-block;
-    text-align: center;
-  }
+.bd-file-upload {
+  position: relative;
+  color: $color-darkblue;
+  font-family: $font-family-base;
+  width:fit-content;
+
+  .p-fileupload {
+    border: 0;
+    border-radius: 0;
+    background: none;
+
+    .p-fileupload-header {
+      border: none;
+      margin-bottom: 20px;
+    }
+
+    .filename {
+      color: $color-darkblue;
+    }
+  }
+
+  .preview-container {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+  }
 }

package/dist/scss/_filter-card.scss

@@ -1,65 +1,65 @@
-.bd-filter-card {
-    .card-body {
-        padding: 16px;
-
-        .bd-input-group {
-            font-size: 15px;
-            margin-bottom: 8px;
-
-            &:last-of-type {
-                margin-bottom: 0;
-            }
-
-            label {
-                word-break: break-word;
-            }
-
-            label, button {
-                font-size: 15px;
-            }
-
-            .form-label {
-                margin-bottom: 8px;
-            }
-
-            .bd-form-checkbox {
-                display: flex;
-                margin-bottom: 2px;
-            }
-
-            .collapse-button {
-                padding: 0;
-                font-weight: 700;
-                height: 24px;
-                line-height: normal;
-
-                &-last {
-                    margin-bottom: 0;
-                }
-
-                svg {
-                    margin-right: 4px;
-                    margin-bottom: 2px;
-                }
-
-                > .collapsed-show {
-                    display: none;
-                }
-
-                > .collapsed-hide {
-                    display: inline-block;
-                }
-
-                &.collapsed {
-                    > .collapsed-show {
-                        display: inline-block;
-                    }
-
-                    > .collapsed-hide {
-                        display: none;
-                    }
-                }
-            }
-        }
-    }
+.bd-filter-card {
+    .card-body {
+        padding: 16px;
+
+        .bd-input-group {
+            font-size: 15px;
+            margin-bottom: 8px;
+
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+
+            label {
+                word-break: break-word;
+            }
+
+            label, button {
+                font-size: 15px;
+            }
+
+            .form-label {
+                margin-bottom: 8px;
+            }
+
+            .bd-form-checkbox {
+                display: flex;
+                margin-bottom: 2px;
+            }
+
+            .collapse-button {
+                padding: 0;
+                font-weight: 700;
+                height: 24px;
+                line-height: normal;
+
+                &-last {
+                    margin-bottom: 0;
+                }
+
+                svg {
+                    margin-right: 4px;
+                    margin-bottom: 2px;
+                }
+
+                > .collapsed-show {
+                    display: none;
+                }
+
+                > .collapsed-hide {
+                    display: inline-block;
+                }
+
+                &.collapsed {
+                    > .collapsed-show {
+                        display: inline-block;
+                    }
+
+                    > .collapsed-hide {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
 }

package/dist/scss/_form-field.scss

@@ -1,13 +1,13 @@
-.bd-form-field {
-    margin-bottom: 27px;
-
-    .form-input-with-button{
-        display: flex;
-        gap: 0.5rem;
-        justify-content: space-between;
-        
-        .btn{
-            height:auto;
-        }
-    }
+.bd-form-field {
+    margin-bottom: 27px;
+
+    .form-input-with-button{
+        display: flex;
+        gap: 0.5rem;
+        justify-content: space-between;
+        
+        .btn{
+            height:auto;
+        }
+    }
 }

package/dist/scss/_form-multiple-checkbox.scss

@@ -1,52 +1,52 @@
-.bd-form-multiple-checkbox {
-  width: auto;
-  background: #ffffff;
-  border-radius: 5px;
-  padding: 12px 12px;
-  border: 1px solid #abb0be;
-
-  label {
-    font-weight: 400;
-    line-height: normal;
-  }
-
-  /* width */
-  &::-webkit-scrollbar {
-    width: 10px;
-  }
-
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background: $color-border;
-    border-radius: 10px;
-    border: solid 3px white;
-  }
-
-  /* Handle on hover */
-  &::-webkit-scrollbar-thumb:hover {
-    background: $color-border;
-    border: solid 3px white;
-  }
-
-  &.is-invalid {
-    border: 1px solid $color-red;
-  }
-
-  &.overflow-form-control {
-    max-height: 200px;
-    overflow: scroll;
-    overflow-x: hidden;
-  }
-
-  .custom-checkbox {
-    margin-bottom: 0px;
-  }
-
-  .custom-control-label {
-    line-height: 30px;
-  }
-
-  button {
-    margin-bottom: 10px;
-  }
+.bd-form-multiple-checkbox {
+  width: auto;
+  background: #ffffff;
+  border-radius: 5px;
+  padding: 12px 12px;
+  border: 1px solid #abb0be;
+
+  label {
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  /* width */
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: $color-border;
+    border-radius: 10px;
+    border: solid 3px white;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: $color-border;
+    border: solid 3px white;
+  }
+
+  &.is-invalid {
+    border: 1px solid $color-red;
+  }
+
+  &.overflow-form-control {
+    max-height: 200px;
+    overflow: scroll;
+    overflow-x: hidden;
+  }
+
+  .custom-checkbox {
+    margin-bottom: 0px;
+  }
+
+  .custom-control-label {
+    line-height: 30px;
+  }
+
+  button {
+    margin-bottom: 10px;
+  }
 }

package/dist/scss/_forms.scss

@@ -1,3 +1,3 @@
-@import "forms/form-check";
-@import "forms/form-input";
-@import "forms/form-select";
+@import "forms/form-check";
+@import "forms/form-input";
+@import "forms/form-select";