@beterdichtbij/component-library 0.70.1 → 0.71.0-alpha.0

package/dist/scss/forms/_form-check.scss

@@ -1,17 +1,17 @@
-.form-check.bd-form-checkbox{
-  padding: 0;
-  min-height: 1.6rem;
-
-  input {
-    background-size: 16px 11px;
-    background-repeat: no-repeat;
-    background-position: 50%;
-    float: unset;
-    margin: 0 .5em 0 0;
-
-    &.form-check-input.is-invalid{
-      border-color: $gray-500;
-      background-color: revert;
-    }
-  }
+.form-check.bd-form-checkbox{
+  padding: 0;
+  min-height: 1.6rem;
+
+  input {
+    background-size: 16px 11px;
+    background-repeat: no-repeat;
+    background-position: 50%;
+    float: unset;
+    margin: 0 .5em 0 0;
+
+    &.form-check-input.is-invalid{
+      border-color: $gray-500;
+      background-color: revert;
+    }
+  }
 }

package/dist/scss/forms/_form-input.scss

@@ -1,10 +1,10 @@
-.form-label {
-    line-height: 1.5rem;
-    padding: 0;
-    font-weight: $font-bold;
-    margin-bottom: 0.25rem;
-}
-
-.bd-invalid-feedback.is-invalid{
-    display:block
+.form-label {
+    line-height: 1.5rem;
+    padding: 0;
+    font-weight: $font-bold;
+    margin-bottom: 0.25rem;
+}
+
+.bd-invalid-feedback.is-invalid{
+    display:block
 }

package/dist/scss/main.scss

@@ -1,53 +1,53 @@
-// Imports below need to be first!
-@import "base";
-@import "bootstrap/scss/bootstrap";
-@import "mixins";
-
-@import "active-filters";
-@import "alert";
-@import "article";
-@import "assign-conversation-modal";
-@import "attachments";
-@import "badge";
-@import "button";
-@import "card";
-@import "chatcloud";
-@import "collapsable-card";
-@import "content-library-card";
-@import "content-library-card-message-template";
-@import "content-library-modal";
-@import "content-library-overview";
-@import "content-library-split-button";
-@import "conversation-to-text-modal";
-@import "dropdown";
-@import "extern";
-@import "file-upload";
-@import "file-upload-preview";
-@import "filter-card";
-@import "form-field";
-@import "form-multiple-checkbox";
-@import "forms";
-@import "header";
-@import "icon-luscii-logo";
-@import "icons";
-@import "image-attachment-modal";
-@import "input-group";
-@import "loader";
-@import "markdown-editor";
-@import "message-template-form-modal";
-@import "mobile-menu";
-@import "modal";
-@import "notification-button";
-@import "pagination";
-@import "phone-number-edit-modal";
-@import "pill";
-@import "pill-container";
-@import "profile-image";
-@import "table";
-@import "table-sort-header";
-@import "templates";
-@import "toast";
-@import "user";
-@import "user-information";
-@import "video-call-toast";
+// Imports below need to be first!
+@import "base";
+@import "bootstrap/scss/bootstrap";
+@import "mixins";
+
+@import "active-filters";
+@import "alert";
+@import "article";
+@import "assign-conversation-modal";
+@import "attachments";
+@import "badge";
+@import "button";
+@import "card";
+@import "chatcloud";
+@import "collapsable-card";
+@import "content-library-card";
+@import "content-library-card-message-template";
+@import "content-library-modal";
+@import "content-library-overview";
+@import "content-library-split-button";
+@import "conversation-to-text-modal";
+@import "dropdown";
+@import "extern";
+@import "file-upload";
+@import "file-upload-preview";
+@import "filter-card";
+@import "form-field";
+@import "form-multiple-checkbox";
+@import "forms";
+@import "header";
+@import "icon-luscii-logo";
+@import "icons";
+@import "image-attachment-modal";
+@import "input-group";
+@import "loader";
+@import "markdown-editor";
+@import "message-template-form-modal";
+@import "mobile-menu";
+@import "modal";
+@import "notification-button";
+@import "pagination";
+@import "phone-number-edit-modal";
+@import "pill";
+@import "pill-container";
+@import "profile-image";
+@import "table";
+@import "table-sort-header";
+@import "templates";
+@import "toast";
+@import "user";
+@import "user-information";
+@import "video-call-toast";
 @import "zoomslider";

package/dist/scss/templates/_change-password-template.scss

@@ -1,9 +1,9 @@
-.change-password-template {
-    .alert-danger {
-        ul {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-    }
+.change-password-template {
+    .alert-danger {
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+    }
 }

package/dist/scss/templates/_content-library-template.scss

@@ -1,136 +1,136 @@
-.content-library-template {
-    .content-library-header {
-        margin-bottom: 15px;
-
-        .controls-row {
-            gap: 16px 0;
-        }
-    }
-
-    .add-button {
-        width: 100%;
-        font-size: 15px;
-
-        .icon-plus {
-            width: 12px;
-            height: 13px;
-        }
-    }
-
-    .select-button-block {
-        margin: 0;
-        padding: 0;
-
-        .v-select {
-            &.vs--open {
-                .vs__selected-options {
-                    span {
-                        top: 10%;
-                    }
-                }
-            }
-
-            .vs__dropdown-toggle {
-                height: 40px;
-                background-color: white;
-                border: 1px solid $color-border;
-            }
-
-            &.is-invalid {
-                .vs__dropdown-toggle {
-                    border: 1px solid $color-red;
-                }
-            }
-
-            .vs__selected-options {
-                span {
-                    position: unset;
-                    color: $color-darkblue;
-                }
-            }
-
-            .vs__dropdown-menu {
-                margin-top: 0px;
-                padding-left: 10px;
-            }
-
-            input::placeholder {
-                color: #ABB0BE;
-            }
-
-            input {
-                padding: 0px;
-            }
-
-            &.vs--single.vs--open .vs__selected {
-                position: inherit;
-                top: 0%;
-            }
-
-            .vs__selected-options {
-                flex-wrap: unset;
-                padding: 0px;
-
-                span {
-                    line-height: 40px;
-                    font-size: 16px;
-                    white-space: nowrap;
-
-                    img {
-                        height: 18px;
-                        margin-right: 5px;
-                    }
-
-                    svg {
-                        margin-right: 5px;
-                    }
-                }
-            }
-
-            .vs__dropdown-menu {
-                padding: 0px;
-
-                .vs__dropdown-option {
-                    padding: 0px 0px 0px 10px;
-                    line-height: 40px;
-                    font-size: 16px;
-
-                    img {
-                        height: 18px;
-                        margin-right: 5px;
-                    }
-
-                    svg {
-                        margin-right: 5px;
-                    }
-                }
-            }
-        }
-    }
-
-    .content-library-header__messages {
-        display: flex;
-        align-items: center;
-        justify-content: left;
-        text-align: center;
-        font-weight: bold;
-        color: $gray-primary;
-    }
-
-    @media (max-width: 850px) {
-        .content-library-header__messages {
-            margin-bottom: 16px;
-        }
-
-        .controls-row > div {
-            padding: 4px;
-        }
-    }
-
-    .controls-row {
-        > *:first-child {
-        padding-left: 2px;
-        }
-    }
- 
+.content-library-template {
+    .content-library-header {
+        margin-bottom: 15px;
+
+        .controls-row {
+            gap: 16px 0;
+        }
+    }
+
+    .add-button {
+        width: 100%;
+        font-size: 15px;
+
+        .icon-plus {
+            width: 12px;
+            height: 13px;
+        }
+    }
+
+    .select-button-block {
+        margin: 0;
+        padding: 0;
+
+        .v-select {
+            &.vs--open {
+                .vs__selected-options {
+                    span {
+                        top: 10%;
+                    }
+                }
+            }
+
+            .vs__dropdown-toggle {
+                height: 40px;
+                background-color: white;
+                border: 1px solid $color-border;
+            }
+
+            &.is-invalid {
+                .vs__dropdown-toggle {
+                    border: 1px solid $color-red;
+                }
+            }
+
+            .vs__selected-options {
+                span {
+                    position: unset;
+                    color: $color-darkblue;
+                }
+            }
+
+            .vs__dropdown-menu {
+                margin-top: 0px;
+                padding-left: 10px;
+            }
+
+            input::placeholder {
+                color: #ABB0BE;
+            }
+
+            input {
+                padding: 0px;
+            }
+
+            &.vs--single.vs--open .vs__selected {
+                position: inherit;
+                top: 0%;
+            }
+
+            .vs__selected-options {
+                flex-wrap: unset;
+                padding: 0px;
+
+                span {
+                    line-height: 40px;
+                    font-size: 16px;
+                    white-space: nowrap;
+
+                    img {
+                        height: 18px;
+                        margin-right: 5px;
+                    }
+
+                    svg {
+                        margin-right: 5px;
+                    }
+                }
+            }
+
+            .vs__dropdown-menu {
+                padding: 0px;
+
+                .vs__dropdown-option {
+                    padding: 0px 0px 0px 10px;
+                    line-height: 40px;
+                    font-size: 16px;
+
+                    img {
+                        height: 18px;
+                        margin-right: 5px;
+                    }
+
+                    svg {
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    .content-library-header__messages {
+        display: flex;
+        align-items: center;
+        justify-content: left;
+        text-align: center;
+        font-weight: bold;
+        color: $gray-primary;
+    }
+
+    @media (max-width: 850px) {
+        .content-library-header__messages {
+            margin-bottom: 16px;
+        }
+
+        .controls-row > div {
+            padding: 4px;
+        }
+    }
+
+    .controls-row {
+        > *:first-child {
+        padding-left: 2px;
+        }
+    }
+ 
 }

package/dist/scss/templates/_not-found-template.scss

@@ -1,10 +1,10 @@
-.not-found-template {
-    h1 {
-        margin: 0;
-    }
-
-    p {
-        text-align: left;
-        margin: 0;
-    }
+.not-found-template {
+    h1 {
+        margin: 0;
+    }
+
+    p {
+        text-align: left;
+        margin: 0;
+    }
 }

package/dist/scss/templates/_video-call-template.scss

@@ -0,0 +1,207 @@
+.video-call-template {
+	$small-text: 14px;
+
+	.bd-conversation-card {
+		margin-bottom: 20px;
+	}
+
+	.incoming,
+	.outgoing {
+		.card {
+			padding: 20px;
+			row-gap: 20px;
+		}
+
+		&__video {
+			display: block;
+		}
+
+		&__screenshare {
+			display: none;
+		}
+
+		&__video,
+		&__screenshare {
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			border-radius: 4px;
+			background-color: $color-bg;
+			overflow: hidden;
+			font-size: 0;
+
+			div {
+				width: 100%;
+				height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+				video {
+					width: 100%;
+					object-fit: contain !important;
+				}
+			}
+		}
+
+		&__available-cameras-count {
+			font-size: $small-text;
+			margin: 0;
+		}
+	}
+
+	.incoming {
+		&--loading,
+		&--declined,
+		&--hangup {
+			.card {
+				justify-content: center;
+				align-items: center;
+			}
+		}
+
+		.card {
+			height: 680px;
+
+			@include media-breakpoint-down(sm) {
+				height: unset;
+			}
+
+			button {
+				width: fit-content;
+			}
+
+			.permissions-denied__audio,
+			.permissions-denied__video {
+				display: flex;
+				gap: 16px;
+				align-items: baseline;
+				justify-content: center;
+			}
+		}
+
+		&__video,
+		&__screenshare {
+			height: 580px;
+
+			@include media-breakpoint-down(sm) {
+				height: 200px;
+			}
+		}
+
+		&__settings {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+
+	.side {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 100%;
+		gap: 20px;
+	}
+
+	.outgoing {
+		margin-bottom: 20px;
+
+		&__video {
+			height: 200px;
+		}
+
+		.permissions-denied__video {
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+		}
+	}
+
+	.settings {
+		border: 1px solid $color-border-light;
+		padding: 20px;
+		border-radius: 8px;
+
+		p {
+			color: $color-gray-secondary;
+		}
+
+		&__signal {
+			display: flex;
+			align-items: center;
+			padding-bottom: 20px;
+			gap: 12px;
+			border-bottom: 1px solid $color-border-light;
+
+			&.weak {
+				.indicator li:nth-child(1) {
+					background-color: $brand-danger;
+				}
+			}
+
+			&.steady {
+				.indicator li:nth-child(1),
+				.indicator li:nth-child(2) {
+					background-color: $brand-warning;
+				}
+			}
+
+			&.strong {
+				.indicator li {
+					background-color: $brand-success;
+				}
+			}
+
+			.indicator {
+				list-style: none;
+				display: flex;
+				align-items: flex-end;
+				margin: 0;
+				padding: 0;
+				gap: 2px;
+
+				li {
+					width: 6px;
+					border-radius: 1.6px;
+					background-color: $color-border-light;
+
+					&:nth-child(1) {
+						height: 7px;
+					}
+
+					&:nth-child(2) {
+						height: 13px;
+					}
+
+					&:nth-child(3) {
+						height: 20px;
+					}
+				}
+			}
+
+			p {
+				margin-bottom: 0;
+				line-height: 20px;
+			}
+		}
+
+		&__help {
+			padding-top: 20px;
+
+			p {
+				font-size: $small-text;
+				line-height: 21px;
+
+				&:last-of-type {
+					margin-bottom: 0;
+				}
+
+				b {
+					font-weight: 600;
+				}
+			}
+		}
+	}
+}