@beterdichtbij/component-library 0.58.5 → 0.60.0

package/dist/scss/_header.scss

@@ -1,171 +1,171 @@
-.bd-header {
-    height: 64px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0px 15px;
-    background-color: white;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000; 
-
-    .col {
-        white-space: nowrap;
-    }
-
-    .bd-hamburger {
-        display: none;
-        font-size: 	.9375rem;
-        font-family: $font-secondary;
-        align-items: center;
-        width: 58px;
-        justify-content: right;
-        font-weight: $font-bold;
-        cursor: pointer;
-        user-select: none;
-        gap: 4px;
-
-        .icon-menu {
-            width: 14px;
-            font-weight: 900;
-        }
-    }
-
-    .logo-mix {
-        .logo {
-            cursor: pointer;
-            height: 30px;
-        }
-
-        .organization-logo {
-            margin-left: 24px;
-
-            &:not([src]),
-            &[src=""] {
-                display: none;
-            }
-        }
-    }
-
-    .header-options {
-        text-align: center;
-    }
-
-    // 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,
-        &:hover {
-            background-color: #f1f2f4;
-        }
-    }
-
-    .profile-side {
-        display: flex;
-        flex-direction: row;
-    }
-
-    .bd-btn-settings {
-        height: 56px;
-        user-select: none;
-        display: flex;
-        justify-content: right;
-        align-items: center;
-        gap: 5px;
-
-        .icon {
-            fill: #394156;
-            width: 40px;
-            height: 40px;
-        }
-
-        .bd-profile-picture {
-            .rounded-circle {
-                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 {
-                    cursor: pointer;
-
-                    &:active {
-                        color: var(--bs-dropdown-link-color);
-                    }
-                }
-            }
-        }
-    }
-
-    @media (max-width: map-get($grid-breakpoints, md)) {
-        .header-options {
-            display: none;
-        }
-
-        .bd-hamburger {
-            display: flex;
-        }
-
-        .bd-btn-settings, .btn-header {
-            display: none !important;
-        }
-    }
-
-    @media (max-width: 890px) {
-        .logo-mix .logo {
-            height: 20px;
-
-            &.organization-logo {
-                margin-left: 16px;
-            }
-        }
-    }
-
-    @media (max-width: 1050px) {
-        .dropdown-toggle {
-            max-width: 140px;
-        }
-    }
-
-    @media (max-width: 400px) {
-        .logo-mix .logo.organization-logo {
-            display: none;
-        }
-    }
+.bd-header {
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 15px;
+    background-color: white;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000; 
+
+    .col {
+        white-space: nowrap;
+    }
+
+    .bd-hamburger {
+        display: none;
+        font-size: 	.9375rem;
+        font-family: $font-secondary;
+        align-items: center;
+        width: 58px;
+        justify-content: right;
+        font-weight: $font-bold;
+        cursor: pointer;
+        user-select: none;
+        gap: 4px;
+
+        .icon-menu {
+            width: 14px;
+            font-weight: 900;
+        }
+    }
+
+    .logo-mix {
+        .logo {
+            cursor: pointer;
+            height: 30px;
+        }
+
+        .organization-logo {
+            margin-left: 24px;
+
+            &:not([src]),
+            &[src=""] {
+                display: none;
+            }
+        }
+    }
+
+    .header-options {
+        text-align: center;
+    }
+
+    // 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,
+        &:hover {
+            background-color: #f1f2f4;
+        }
+    }
+
+    .profile-side {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .bd-btn-settings {
+        height: 56px;
+        user-select: none;
+        display: flex;
+        justify-content: right;
+        align-items: center;
+        gap: 5px;
+
+        .icon {
+            fill: #394156;
+            width: 40px;
+            height: 40px;
+        }
+
+        .bd-profile-picture {
+            .rounded-circle {
+                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 {
+                    cursor: pointer;
+
+                    &:active {
+                        color: var(--bs-dropdown-link-color);
+                    }
+                }
+            }
+        }
+    }
+
+    @media (max-width: map-get($grid-breakpoints, md)) {
+        .header-options {
+            display: none;
+        }
+
+        .bd-hamburger {
+            display: flex;
+        }
+
+        .bd-btn-settings, .btn-header {
+            display: none !important;
+        }
+    }
+
+    @media (max-width: 890px) {
+        .logo-mix .logo {
+            height: 20px;
+
+            &.organization-logo {
+                margin-left: 16px;
+            }
+        }
+    }
+
+    @media (max-width: 1050px) {
+        .dropdown-toggle {
+            max-width: 140px;
+        }
+    }
+
+    @media (max-width: 400px) {
+        .logo-mix .logo.organization-logo {
+            display: none;
+        }
+    }
 }

package/dist/scss/_icon-luscii-logo.scss

@@ -1,32 +1,32 @@
-.icon-luscii-logo {
-  .st0 {
-    fill: #ffffff;
-  }
-  .st1 {
-    fill: #78c9dc;
-  }
-  .st2 {
-    fill: url(#SVGID_1_);
-  }
-  .st3 {
-    fill: #6870a5;
-  }
-  .st4 {
-    fill: #2b6077;
-  }
-  .st5 {
-    fill: #e7348a;
-  }
-  .st6 {
-    fill: #602160;
-  }
-  .st7 {
-    fill: #189cd9;
-  }
-  .st8 {
-    fill: #00a1b3;
-  }
-  .st9 {
-    fill: #193866;
-  }
+.icon-luscii-logo {
+  .st0 {
+    fill: #ffffff;
+  }
+  .st1 {
+    fill: #78c9dc;
+  }
+  .st2 {
+    fill: url(#SVGID_1_);
+  }
+  .st3 {
+    fill: #6870a5;
+  }
+  .st4 {
+    fill: #2b6077;
+  }
+  .st5 {
+    fill: #e7348a;
+  }
+  .st6 {
+    fill: #602160;
+  }
+  .st7 {
+    fill: #189cd9;
+  }
+  .st8 {
+    fill: #00a1b3;
+  }
+  .st9 {
+    fill: #193866;
+  }
 }

package/dist/scss/_icons.scss

@@ -1,58 +1,58 @@
-.icon{
-  display: inline-block;
-  height: 18px;
-  width: 17px;
-  position: relative;
-
-  &.icon-check{
-    .bd-dropzone &{
-      height: 16px;
-      width: 11px;
-      fill: $color-white;
-    }
-  }
-  &.icon-remove {
-    width: 11px;
-    height: 11px;
-
-    .dz-remove &{
-      fill: $color-white;
-    }
-  }
-
-  &.icon-file{
-    fill: $color-darkblue;
-    .dz-details &{
-      height: 88px;
-      min-width: 150px;
-    }
-
-    .dz-error &{
-      fill: $color-red;
-    }
-  }
-
-  &.icon-error{
-    .dz-error-mark & , .dz-error-message &, .bd-invalid-feedback &{
-      path {
-        fill: $color-red;
-      }
-    }
-  }
-  &.icon-loading{
-    width:25px;
-    height:25px;
-  }
-
-  &.icon-close{
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-    fill: white;
-  }
-
-  &.icon-menu {
-    width: 14px;
-    font-weight: 900;
-  }
+.icon{
+  display: inline-block;
+  height: 18px;
+  width: 17px;
+  position: relative;
+
+  &.icon-check{
+    .bd-dropzone &{
+      height: 16px;
+      width: 11px;
+      fill: $color-white;
+    }
+  }
+  &.icon-remove {
+    width: 11px;
+    height: 11px;
+
+    .dz-remove &{
+      fill: $color-white;
+    }
+  }
+
+  &.icon-file{
+    fill: $color-darkblue;
+    .dz-details &{
+      height: 88px;
+      min-width: 150px;
+    }
+
+    .dz-error &{
+      fill: $color-red;
+    }
+  }
+
+  &.icon-error{
+    .dz-error-mark & , .dz-error-message &, .bd-invalid-feedback &{
+      path {
+        fill: $color-red;
+      }
+    }
+  }
+  &.icon-loading{
+    width:25px;
+    height:25px;
+  }
+
+  &.icon-close{
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    fill: white;
+  }
+
+  &.icon-menu {
+    width: 14px;
+    font-weight: 900;
+  }
 }