@beterdichtbij/component-library 0.23.0 → 0.24.0

package/dist/scss/_header.scss

@@ -1,110 +1,110 @@
-.header-navbar {
-    height: 64px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0px 15px;
-    background-color: white;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 1000; 
-
-    .bd-hamburger {
-        display: none;
-        font-size: 	.9375rem;
-        font-family: $font-secondary;
-        align-items: center;
-        width: 58px;
-        justify-content: space-between;
-        font-weight: $font-bold;
-        cursor: pointer;
-        user-select: none;
-
-        .icon-menu {
-            width: 14px;
-            font-weight: 900;
-        }
-    }
-      
-    .bd-logo {
-        cursor: pointer;
-        width: 169px;
-    }
-
-    // css verwijderen als variant button is opgenomen BDButton
-    .btn-header {
-        color: #394156;
-        background-color: transparent;
-        font-weight: 400;
-        border-radius: 24px;
-        padding-left: 16px;
-        padding-right: 16px;
-        text-decoration: none;
-        margin: 0px 4px;
-
-        &.router-link-active {
-            background-color: #f1f2f4;
-        }
-    }
-
-    .bd-btn-settings {
-        height: 56px;
-        user-select: none;
-
-        .bd-profile-picture {
-            width: 40px;
-            height: 40px;
-        }
-
-        .bd-dropdown.dropdown {
-            height: 100%;
-
-            .dropdown-toggle {
-                height: 100%;
-                margin-right: 0px;
-                text-decoration: none;
-                font-weight: $font-medium;
-                font-family: $headings-font-family;
-
-                span {
-                    white-space: nowrap;
-                    overflow-x: hidden;
-                    text-overflow: ellipsis;
-                    max-width: 250px;
-                    letter-spacing: 0;
-                }
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-
-            .dropdown-menu {
-                margin-top: 0px;
-
-                .dropdown-item:active {
-                    color: var(--bs-dropdown-link-color);
-                }
-            }
-        }
-    }
-
-    @media (max-width: map-get($grid-breakpoints, md)) {
-        .header-options {
-            display: none;
-        }
-
-        .bd-hamburger {
-            display: flex;
-        }
-
-        .bd-logo {
-            width: 134px;
-        }
-
-        .bd-btn-settings, .btn-header {
-            display: none !important;
-        }
-    }
+.header-navbar {
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 15px;
+    background-color: white;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000; 
+
+    .bd-hamburger {
+        display: none;
+        font-size: 	.9375rem;
+        font-family: $font-secondary;
+        align-items: center;
+        width: 58px;
+        justify-content: space-between;
+        font-weight: $font-bold;
+        cursor: pointer;
+        user-select: none;
+
+        .icon-menu {
+            width: 14px;
+            font-weight: 900;
+        }
+    }
+      
+    .bd-logo {
+        cursor: pointer;
+        width: 169px;
+    }
+
+    // css verwijderen als variant button is opgenomen BDButton
+    .btn-header {
+        color: #394156;
+        background-color: transparent;
+        font-weight: 400;
+        border-radius: 24px;
+        padding-left: 16px;
+        padding-right: 16px;
+        text-decoration: none;
+        margin: 0px 4px;
+
+        &.router-link-active {
+            background-color: #f1f2f4;
+        }
+    }
+
+    .bd-btn-settings {
+        height: 56px;
+        user-select: none;
+
+        .bd-profile-picture {
+            width: 40px;
+            height: 40px;
+        }
+
+        .bd-dropdown.dropdown {
+            height: 100%;
+
+            .dropdown-toggle {
+                height: 100%;
+                margin-right: 0px;
+                text-decoration: none;
+                font-weight: $font-medium;
+                font-family: $headings-font-family;
+
+                span {
+                    white-space: nowrap;
+                    overflow-x: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 250px;
+                    letter-spacing: 0;
+                }
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .dropdown-menu {
+                margin-top: 0px;
+
+                .dropdown-item:active {
+                    color: var(--bs-dropdown-link-color);
+                }
+            }
+        }
+    }
+
+    @media (max-width: map-get($grid-breakpoints, md)) {
+        .header-options {
+            display: none;
+        }
+
+        .bd-hamburger {
+            display: flex;
+        }
+
+        .bd-logo {
+            width: 134px;
+        }
+
+        .bd-btn-settings, .btn-header {
+            display: none !important;
+        }
+    }
 }

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