@beterdichtbij/component-library 0.20.0 → 0.22.0

package/dist/scss/_mobile-menu.scss

@@ -0,0 +1,83 @@
+.bd-mobile-menu {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0px;
+    right: -100%;
+    background: #fff;
+    z-index: 1000;
+    animation-duration: .5s;
+    padding: 0px 30px;
+    user-select: none;
+    display: none;
+
+    &.inactive {
+        animation-name: slideout;
+    }
+
+    &.active {
+        animation-name: slidein;
+        right: 0px;
+    }
+
+    .header {
+        height: 66px;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid $color-lightblue;
+        color: $color-blue;
+        font-family: $font-secondary;
+        font-weight: $font-bold;
+        font-size: 1rem;
+
+        .icon-close-wrapper {
+            width: 44px;
+            height: 66px;
+            cursor: pointer;
+            display: flex;
+            justify-content: right;
+            align-items: center;
+
+            .icon-close {
+                fill: $color-blue;
+            }
+        }
+    }
+
+    .navbar {
+        padding: 0px;
+
+        .nav-item {
+            border-bottom: 1px solid $color-lightblue;
+            font-size: 1rem;
+        }
+    }
+}
+
+@keyframes slidein {
+    from {
+        right: -100%;
+    }
+
+    to {
+        right: 0px;
+    }
+}
+
+@keyframes slideout {
+    from {
+        right: 0px;
+    }
+
+    to {
+        right: -100%;
+    }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)) {
+    .bd-mobile-menu {
+        display: block;
+    }
+}

package/dist/scss/_modal.scss

@@ -1,16 +1,89 @@
-.modal.bd-modal{
+.modal.bd-modal {
+  
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top:30px;
+
+    button.btn-close  { 
+      top: 20px;
+      right: 20px;
+      position: absolute;
+      padding: revert;
+      margin: revert;
+      height: revert;
+    }
+
+    @include media-breakpoint-up(md) {
+      padding: 0px 65px;
+    }  
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column-reverse;
+      align-items: center;
+      justify-content: center;
+      padding: .75rem;
+      margin-top: 0px;
+
+      > * {
+        width: 100%;
+        text-align: center; 
+      }  
+
+      button.btn-close {
+        top: initial;
+        right: initial;
+        position: initial;
+        margin: auto;
+        font-size: 0.9em;
+        padding: initial;
+        height: initial;       
+      }
+    }
+  }
+
+  .modal-body {
+    @include media-breakpoint-up(md) {
+      padding: 30px 65px;
+    }  
+    border: 0px;
+  }
+
   .modal-footer {
     justify-content: flex-start;
-  }
+  
+    @include media-breakpoint-up(md) {
+      padding: 30px 65px;
+    }
 
-  @include media-breakpoint-up(md) { 
-    .modal-footer {
-     padding-left: 1.75rem;
-     padding-bottom:1rem;
+    @include media-breakpoint-down(md) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: .75rem;
+
+        > * {
+          width: 100%;
+        }   
     }
   }
 
-  .btn-close{
+  .btn-close {
     align-self: baseline;
   }
+
+  .modal-title {
+    font-family: $font-secondary;
+    font-weight: $font-normal;
+    font-size: 31px;
+    color: $color-darkblue;
+    letter-spacing: 0;
+   
+    @include media-breakpoint-down(sm) {
+      margin-top: 20px;
+      line-height:normal;
+    }  
+  }
+
 }

package/dist/scss/base/variables.scss

@@ -90,7 +90,8 @@ $font-black : 900;
 
 $font-color-primary : $color-darkblue;
 
-
+//chatcloud
+$color-chatcloud:#E1EFF8;
 
 //dropdown item vars 
 $dropdown-bg: #fff;

package/dist/scss/component-library-styling.scss

@@ -18,4 +18,5 @@
 @import "user";
 @import "markdown-editor";
 @import "modal";
-@import "attachments"
+@import "attachments";
+@import "chatcloud";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.20.0",
+    "version": "0.22.0",
     "author": "Ralph van der Neut <rvanderneut@beterdichtbij.nl>",
     "type": "module",
     "files": [