@beterdichtbij/component-library 0.60.1 → 0.62.0

package/dist/scss/_toast.scss

@@ -1,70 +1,70 @@
-.bd-toast {
-  margin: 0.5rem;
-  border: 0px;
-  margin-left: auto;
-  border-left: 4px solid $info;
-
-  .toast-header {
-    border-bottom: 1px solid hsla(203, 62%, 51%, 0.4) ;
-    padding: 20px 14px;
-    display: flex;
-    justify-content: baseline;
-
-    button {
-      margin-left: auto;
-      margin-right: 0px;
-      background-color: transparent;
-    }
-
-    svg {
-      fill: $info;
-      margin-right: 1rem;
-    }
-  }
-
-  .toast-body {
-    padding-left: 20px;
-  }
-
-  &-danger {
-    border-color: $danger;
-
-    .toast-header {
-      border-color: hsla(8, 74%, 53%, 0.4);
-
-      svg {
-        fill: $danger;
-      }
-    }
-  }
-
-  &-warning {
-    border-color: $warning;
-
-    .toast-header {
-      border-color: hsla(48, 100%, 47%, 0.4);
-
-      svg {
-        fill: $warning;
-      }
-    }
-  }
-
-  &-success {
-    border-color: $success;
-
-    .toast-header {
-      border-color: hsla(155, 100%, 37%,0.4);
-
-      svg {
-        fill:  $success
-      }
-    }
-  }
-}
-
-.toast-container {
-  position: fixed;
-  bottom: 0px;
-  width: 100%;
+.bd-toast {
+  margin: 0.5rem;
+  border: 0px;
+  margin-left: auto;
+  border-left: 4px solid $info;
+
+  .toast-header {
+    border-bottom: 1px solid hsla(203, 62%, 51%, 0.4) ;
+    padding: 20px 14px;
+    display: flex;
+    justify-content: baseline;
+
+    button {
+      margin-left: auto;
+      margin-right: 0px;
+      background-color: transparent;
+    }
+
+    svg {
+      fill: $info;
+      margin-right: 1rem;
+    }
+  }
+
+  .toast-body {
+    padding-left: 20px;
+  }
+
+  &-danger {
+    border-color: $danger;
+
+    .toast-header {
+      border-color: hsla(8, 74%, 53%, 0.4);
+
+      svg {
+        fill: $danger;
+      }
+    }
+  }
+
+  &-warning {
+    border-color: $warning;
+
+    .toast-header {
+      border-color: hsla(48, 100%, 47%, 0.4);
+
+      svg {
+        fill: $warning;
+      }
+    }
+  }
+
+  &-success {
+    border-color: $success;
+
+    .toast-header {
+      border-color: hsla(155, 100%, 37%,0.4);
+
+      svg {
+        fill:  $success
+      }
+    }
+  }
+}
+
+.toast-container {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
 }

package/dist/scss/_user-information.scss

@@ -1,35 +1,35 @@
-.bd-user-information {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    &__profile-picture {
-        width: 48px;
-        height: 48px;
-        border: 1px solid rgba($color-black, 0.1);
-        border-radius: 50%;
-        object-fit: cover;
-        object-position: center;
-    }
-
-    &__header {
-        h4 {
-            display: inline;
-            margin-right: 8px;
-        }
-
-        .header-status {
-            display: inline;
-        }
-    }
-
-    small {
-        font-size: 0.875rem;
-        line-height: 1rem;
-        color: #6a758a;
-    }
-
-    .bd-conversation-card & {
-        flex: 1;
-    }
+.bd-user-information {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    &__profile-picture {
+        width: 48px;
+        height: 48px;
+        border: 1px solid rgba($color-black, 0.1);
+        border-radius: 50%;
+        object-fit: cover;
+        object-position: center;
+    }
+
+    &__header {
+        h4 {
+            display: inline;
+            margin-right: 8px;
+        }
+
+        .header-status {
+            display: inline;
+        }
+    }
+
+    small {
+        font-size: 0.875rem;
+        line-height: 1rem;
+        color: #6a758a;
+    }
+
+    .bd-conversation-card & {
+        flex: 1;
+    }
 }

package/dist/scss/_video-call-toast.scss

@@ -1,101 +1,101 @@
-.bd-video-call-toast {
-	position: fixed;
-	top: 8px;
-	right: 8px;
-	z-index: 1005;
-	padding: 20px;
-	background-color: $color-darkblue;
-	color: $color-white;
-	min-height: 108px;
-	border-radius: 8px;
-	border: none;
-	box-shadow: 0 16px 24px -5px rgba($color-black, 0.25);
-
-	.toast-body {
-		padding: 20px;
-
-		&__title {
-			margin-bottom: 12px;
-			color: rgba($color-white, 0.8);
-		}
-
-		&__main {
-			.bd-user-information {
-				h4 {
-					color: $color-white;
-				}
-
-				small {
-					color: rgba($color-white, 0.8);
-				}
-			}
-
-			.actions {
-				display: flex;
-				gap: 12px;
-				margin-top: 12px;
-
-				button {
-					flex: 1;
-
-					svg {
-						margin: 0 10px 0 0;
-					}
-				}
-			}
-
-			&.is-handled {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-
-				.icon-wrapper {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					flex-shrink: 0;
-					width: 48px;
-					height: 48px;
-					background-color: $color-stroke-gray;
-					border-radius: 50%;
-
-					svg {
-						width: 24px;
-						height: 24px;
-						transform: rotate(135deg);
-						left: 1px;
-					}
-				}
-
-				p {
-					margin-bottom: 0;
-
-					&.title {
-						font-weight: $font-medium;
-					}
-
-					&:last-of-type {
-						color: rgba($color-white, 0.8);
-						margin-top: 4px;
-					}
-				}
-
-				&--success {
-					.icon-wrapper {
-						background-color: $green;
-
-						svg {
-							transform: scaleX(-1);
-						}
-					}
-				}
-
-				&--canceled {
-					.icon-wrapper {
-						background-color: $color-red;
-					}
-				}
-			}
-		}
-	}
+.bd-video-call-toast {
+	position: fixed;
+	top: 8px;
+	right: 8px;
+	z-index: 1005;
+	padding: 20px;
+	background-color: $color-darkblue;
+	color: $color-white;
+	min-height: 108px;
+	border-radius: 8px;
+	border: none;
+	box-shadow: 0 16px 24px -5px rgba($color-black, 0.25);
+
+	.toast-body {
+		padding: 20px;
+
+		&__title {
+			margin-bottom: 12px;
+			color: rgba($color-white, 0.8);
+		}
+
+		&__main {
+			.bd-user-information {
+				h4 {
+					color: $color-white;
+				}
+
+				small {
+					color: rgba($color-white, 0.8);
+				}
+			}
+
+			.actions {
+				display: flex;
+				gap: 12px;
+				margin-top: 12px;
+
+				button {
+					flex: 1;
+
+					svg {
+						margin: 0 10px 0 0;
+					}
+				}
+			}
+
+			&.is-handled {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+
+				.icon-wrapper {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					flex-shrink: 0;
+					width: 48px;
+					height: 48px;
+					background-color: $color-stroke-gray;
+					border-radius: 50%;
+
+					svg {
+						width: 24px;
+						height: 24px;
+						transform: rotate(135deg);
+						left: 1px;
+					}
+				}
+
+				p {
+					margin-bottom: 0;
+
+					&.title {
+						font-weight: $font-medium;
+					}
+
+					&:last-of-type {
+						color: rgba($color-white, 0.8);
+						margin-top: 4px;
+					}
+				}
+
+				&--success {
+					.icon-wrapper {
+						background-color: $green;
+
+						svg {
+							transform: scaleX(-1);
+						}
+					}
+				}
+
+				&--canceled {
+					.icon-wrapper {
+						background-color: $color-red;
+					}
+				}
+			}
+		}
+	}
 }

package/dist/scss/_zoomslider.scss

@@ -1,78 +1,78 @@
-$form-range-track-height: .2rem;
-$form-range-track-bg: #eceff1;
-$form-range-track-border-radius: 8px;
-$form-range-thumb-bg: #ABB1BF;
-
-$form-range-track-cursor: pointer;
-$form-range-track-width:  100%;
-$form-range-thumb-border-radius:  1rem;
-$form-range-thumb-width: 1rem;
-$form-range-thumb-height: 1rem;
-
-@mixin track {
-  background: $form-range-track-bg;
-  cursor: $form-range-track-cursor;
-  height: $form-range-track-height;
-  width: $form-range-track-width; 
-}
-
-@mixin thumb {
-  background: $form-range-thumb-bg;
-  border: 1px solid white;
-  border-radius: $form-range-thumb-border-radius;
-  cursor: $form-range-track-cursor;
-  height: $form-range-thumb-height;
-  width: $form-range-thumb-width;
-}
-
-.bd-zoom-slider {
-    width: auto;
-    background-color: $primary;
-    border-radius: 8px;
-    padding: 10px;
-
-    .bd-zoom-slider-min-button {
-      align-items: center;
-      cursor: $form-range-track-cursor;
-      height: 20px;
-      width: 20px;
-      fill: white;
-      margin-right: 10px;
-    }
- 
-    .bd-zoom-slider-plus-button {
-      align-items: center;
-      cursor: $form-range-track-cursor;
-      height: 20px;
-      width: 20px;
-      fill: white;
-      margin-left: 10px;
-    }
-
-    .bd-zoom-slider-input{
-      -webkit-appearance: none;
-      appearance: none;
-      margin: 8px;
-      border-radius: 8px;
-      width:  $form-range-track-width;    
-     
-      &::-webkit-slider-runnable-track {
-        @include track;
-      }
-    
-      &::-webkit-slider-thumb {
-        @include thumb;
-        -webkit-appearance: none;
-        margin-top: -6px;
-      }
-    
-      &::-moz-range-track {
-        @include track;
-      }
-    
-      &::-moz-range-thumb {
-        @include thumb;
-      }
-    }
-    
+$form-range-track-height: .2rem;
+$form-range-track-bg: #eceff1;
+$form-range-track-border-radius: 8px;
+$form-range-thumb-bg: #ABB1BF;
+
+$form-range-track-cursor: pointer;
+$form-range-track-width:  100%;
+$form-range-thumb-border-radius:  1rem;
+$form-range-thumb-width: 1rem;
+$form-range-thumb-height: 1rem;
+
+@mixin track {
+  background: $form-range-track-bg;
+  cursor: $form-range-track-cursor;
+  height: $form-range-track-height;
+  width: $form-range-track-width; 
+}
+
+@mixin thumb {
+  background: $form-range-thumb-bg;
+  border: 1px solid white;
+  border-radius: $form-range-thumb-border-radius;
+  cursor: $form-range-track-cursor;
+  height: $form-range-thumb-height;
+  width: $form-range-thumb-width;
+}
+
+.bd-zoom-slider {
+    width: auto;
+    background-color: $primary;
+    border-radius: 8px;
+    padding: 10px;
+
+    .bd-zoom-slider-min-button {
+      align-items: center;
+      cursor: $form-range-track-cursor;
+      height: 20px;
+      width: 20px;
+      fill: white;
+      margin-right: 10px;
+    }
+ 
+    .bd-zoom-slider-plus-button {
+      align-items: center;
+      cursor: $form-range-track-cursor;
+      height: 20px;
+      width: 20px;
+      fill: white;
+      margin-left: 10px;
+    }
+
+    .bd-zoom-slider-input{
+      -webkit-appearance: none;
+      appearance: none;
+      margin: 8px;
+      border-radius: 8px;
+      width:  $form-range-track-width;    
+     
+      &::-webkit-slider-runnable-track {
+        @include track;
+      }
+    
+      &::-webkit-slider-thumb {
+        @include thumb;
+        -webkit-appearance: none;
+        margin-top: -6px;
+      }
+    
+      &::-moz-range-track {
+        @include track;
+      }
+    
+      &::-moz-range-thumb {
+        @include thumb;
+      }
+    }
+    
   }

package/dist/scss/active-filters.scss

@@ -0,0 +1,60 @@
+.bd-active-filters {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        * {
+            padding-top: 4px;
+            padding-bottom: 4px;
+        }
+
+        span {
+            font-size: 15px;
+            font-weight: 700;
+        }
+
+        button {
+            font-size: 14px;
+        }
+    }
+
+    .filter {
+        display: flex;
+
+        label {
+            width: 90px;
+        }
+
+        .options {
+            display: inline-block;
+            flex: 1;
+
+            .p-chip {
+                background: #fff;
+                color: #4D5875;
+                border: 1px solid black;
+                border-radius: 18px;
+                gap: 6px;
+                padding: 2px 10px;
+                margin: 0 6px 6px 0;
+                font-weight: 700;
+
+                .p-chip-label {
+                    max-width: 169px;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+
+                svg path {
+                    fill: #4D5875;
+                }
+            }
+        }
+    }
+}