@beterdichtbij/component-library 0.60.1 → 0.62.0

package/dist/scss/{_dropzone.scss → _file-upload.scss}

@@ -1,78 +1,93 @@
-@use "sass:math";
-
-.dropzone.bd-dropzone, .dropzone.bd-dropzone * {
-  box-sizing: border-box;
-}
-.dropzone.bd-dropzone {
-  position: relative;
-  color: $color-darkblue;
-  font-family: $font-family-base;
-  width:fit-content;
-  
-  .dz-message {
-    margin-bottom: 1.25rem;
-  }
-
-  .dz-preview {
-    position: relative;
-    display: inline-block;
-   
-    text-align: center;
-    
-    .dz-image{
-      min-width: 150px;
-      height: 88px;
-      object-fit: contain;
-    }
-
-    .dz-error-message,.dz-success-mark {
-      display: none;
-    }
-
-    &.dz-error {
-      .dz-error-message, .dz-error-mark {
-        display: block;
-      }
-    }
-    &.dz-success { 
-      .dz-success-mark {
-        display: block;
-        background-color: $green;
-        border-radius: 50%;
-        width:21px;
-        height:21px;
-        margin: 0px auto;
-        svg{
-          transform: translateY(-2px);
-        }
-      }
-    }
-
-    &.dz-complete {
-      .dz-progress {
-        display: none;
-      }
-    }
-
-    .dz-remove {
-      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;
-      }
-    }
-  }
+@use "sass:math";
+
+.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;
+    }
+  }
+  
+  .dz-message {
+    margin-bottom: 1.25rem;
+  }
+
+  .file-upload-preview {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+
+    .file-preview {
+      display: inline-block;
+
+      .preview-details {
+        position: relative;
+
+        .preview-image {
+          min-width: 150px;
+          height: 88px;
+          object-fit: contain;
+        }
+      }
+    }
+
+    &.dz-error {
+      .dz-error-message, .dz-error-mark {
+        display: block;
+      }
+    }
+
+    .success-mark {
+      display: block;
+      background-color: $green;
+      border-radius: 50%;
+      width:21px;
+      height:21px;
+      margin: 0px auto;
+
+      svg{
+        transform: translateY(-2px);
+      }
+    }
+
+    &.dz-complete {
+      .dz-progress {
+        display: none;
+      }
+    }
+
+    .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/_filter-card.scss

@@ -0,0 +1,58 @@
+.bd-filter-card {
+    .card-body {
+        padding: 16px;
+
+        .bd-input-group {
+            font-size: 15px;
+            margin-bottom: 8px;
+
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+
+            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;
+
+                &-last {
+                    margin-bottom: 0;
+                }
+
+                svg {
+                    margin-right: 4px;
+                }
+
+                > .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,48 +1,48 @@
-.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;
-  }
+.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;
+  }
 }

package/dist/scss/_forms.scss

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