@beterdichtbij/component-library 0.72.7 → 0.73.0-beta.1

package/dist/scss/_templates.scss

@@ -1,265 +1,319 @@
-@import "templates/change-password-template";
-@import "templates/content-library-template";
-@import "templates/not-found-template";
-@import "templates/video-call-template";
-// TODO split up per template component
-
-.template {
-    @media (max-width: map-get($grid-breakpoints, md)) {
-        .template-title {
-            padding-left:1rem;
-        }
-
-        .container, .row {
-            --bs-gutter-x: 0;
-        }
-        
-        .container {
-            border-top-left-radius: 8px;
-            border-top-right-radius: 8px;
-        }
-
-        .bd-form-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-
-        img {
-            border-top-left-radius: 8px;
-            border-top-right-radius: 8px;
-        }
-    }
-    
-    &.profile-template, &.change-password-template {
-        @media (max-width: map-get($grid-breakpoints, md)) {
-            
-            .bd-profile-picture{
-                width:80px;
-                height: 80px;
-            }
-        }
-
-        .vue-date-picker {
-            // Style only applies when dialog is above.
-            .dp__arrow_bottom + div .dp__calendar {
-                $week-height: 45px;
-                height: $week-height * 6;
-            }
-
-            .dp__theme_light {
-                flex: 1;
-                --dp-font-family: $font-primary;
-                --dp-primary-color: #3594CF;
-                --dp-text-color : $font-color-primary;
-
-                .btn {
-                    height: 38px;
-                }
-            }
-        }
-    }
-
-    .bd-card-template {
-        margin-bottom: 50px;
-        padding: 56px;
-
-        @media (max-width: map-get($grid-breakpoints, md)) {
-            padding: 1rem;
-        }
-
-        .card-body{
-            padding:revert;
-        }
-
-        .bd-card-img {
-            display:flex;
-            gap: 18px;
-            margin-bottom: 2rem;
-
-            button,.btn,.btn-link{
-                align-self: center;
-            }           
-        }
-
-        .form-input-with-button{
-            display:flex;
-            gap: 0.5rem;
-        }
-        .form-label{
-            margin-bottom:0.25rem;
-            span.form-label-optional {
-                font-weight:400;
-            }
-        }
-
-        &.my-organization-card {
-            padding: 0px;
-
-            .bd-card-img {
-                padding: 0px;
-                width: 100%;
-                height: 250px;
-                
-               img {
-                object-fit: cover;
-                border-bottom-left-radius: 0px;
-                border-bottom-right-radius: 0px;
-               }
-            }
-        }
-    }  
-
-    &.overview-template {
-        .bd-dropdown.dropdown .dropdown-toggle {
-            display: flex;
-            align-items: center;
-            font-weight: 500;
-            font-size: 13px;
-            letter-spacing: 0;
-            line-height: 24px;
-            margin-right: 0px;
-            text-decoration: none;
-        }
-
-        .bd-form-checkbox {
-            margin-bottom: 22px;
-            font-family: $font-family-base;
-        }
-
-        .bd-article {
-            margin-bottom: 16px;
-            padding: 20px;
-            cursor: pointer;
-
-            header {
-                position: relative;       
-
-                .bd-date {
-                    color: $secondary;
-                    font-size: .875rem;
-                    font-weight: 400;
-                    text-wrap: nowrap;
-                }
-
-                .bd-counter {
-                    margin-right: 0px;
-                }
-
-                .bd-user__information header {
-                    justify-content: flex-start; 
-                }
-            }
-
-            .bd-dropdown .dropdown-menu {
-                padding: 0px;
-
-                .dropdown-item {
-                    cursor: pointer;
-                    line-height: normal;
-                    padding: 8px 20px;
-                }
-            }
-        }
-        
-        .bd-badge {
-            margin-right:auto;
-            margin: 0px 4px;
-            align-self:flex-start;
-        }
-        
-        .bd-text{
-            line-height: 1.375rem;
-            max-height: 2.75rem;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            -webkit-line-clamp: 2; 
-
-            p {
-                margin-bottom: 0px;
-            }
-        }
-        
-        .bd-body-card {
-            display: flex;
-            justify-content: space-between;
-
-            @media (max-width: map-get($grid-breakpoints, md)) {
-                flex-direction: column;
-                align-items:flex-end;
-                >*:first-child {
-                    align-self: stretch;
-                  }
-            }
-    
-
-        }
-        
-        .bd-dropdown {
-            margin-right: 0px;
-        }
-
-        .bd-counter {
-            display:none
-        }
-
-        .bd-article.is-unread {
-            border-right: 4px solid $primary;
-
-            .bd-date {
-                color: $primary;
-                font-weight: 500;
-            }
-
-            .bd-counter {
-                display: block;
-                width: 20px;
-                height: 20px;
-                border-radius: 12px;
-                background-color: $primary;
-                margin-top:6px;
-            }
-        }
-    }
-
-    &.detail-conversation-template{
-        .bd-card-template {
-            margin-top: 20px;
-        }
-
-        .spinner-border {
-            width: 1rem;
-            height: 1rem;
-            --bs-spinner-border-width: 0.15em;
-        }
-
-        .icon-eye-show {
-            height: 25px;
-            width: 25px;
-            padding-bottom: 3px;
-        }
-    }
-}
-
-@media (max-width: map-get($grid-breakpoints, sm)) {
-    .template {
-        &.overview-template {
-            .bd-form-checkbox {
-                padding-left:2.8rem;
-                margin-bottom: 12px;
-            }
-
-            .conversations-container {
-                padding: 0px;
-
-                .bd-article {
-                    margin-bottom: 5px;
-                    border-radius: 0px;
-                    padding: 16px;
-                }
-            }
-        }
-    }
+@import "templates/change-password-template";
+@import "templates/content-library-template";
+@import "templates/not-found-template";
+@import "templates/video-call-template";
+// TODO split up per template component
+
+.template {
+    @media (max-width: map-get($grid-breakpoints, md)) {
+        .template-title {
+            padding-left:1rem;
+        }
+
+        .container, .row {
+            --bs-gutter-x: 0;
+        }
+        
+        .container {
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+        }
+
+        button {
+            margin-right : 1rem;
+        }
+
+        img {
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+        }
+    }
+    
+    &.my-organization-template {
+        .template-header-col {        
+            display: flex;
+            justify-content: space-between;
+            
+            h2 {
+                line-height: 2.375rem;
+            }
+        }
+
+        .bd-card-description {
+            padding:0 2rem;
+
+            h3 {
+                font-size: 20px;
+                font-weight: 700;
+                line-height: 25px;
+            }
+
+            .city {
+                font-family: Work Sans, sans-serif;
+                font-size: 16px;
+                font-weight: 400;
+                line-height: 24px;
+                text-align: left;
+                color: #6B758A;
+            }
+        }
+    }
+   
+    &.profile-edit-template, &.change-password-template {
+        @media (max-width: map-get($grid-breakpoints, md)) {
+            
+            .bd-profile-picture{
+                width:80px;
+                height: 80px;
+            }
+        }
+
+        .vue-date-picker {
+            // Style only applies when dialog is above.
+            .dp__arrow_bottom + div .dp__calendar {
+                $week-height: 45px;
+                height: $week-height * 6;
+            }
+
+            .dp__theme_light {
+                flex: 1;
+                --dp-font-family: $font-primary;
+                --dp-primary-color: #3594CF;
+                --dp-text-color : $font-color-primary;
+
+                .btn {
+                    height: 38px;
+                }
+            }
+        }
+    }
+
+    .bd-card-template {
+        margin-bottom: 50px;
+        padding: 56px;
+
+        @media (max-width: map-get($grid-breakpoints, md)) {
+            padding: 1rem;
+        }
+
+        .card-body{
+            padding:revert;
+        }
+
+        .bd-card-img {
+            display:flex;
+            gap: 18px;
+            margin-bottom: 2rem;
+
+            button,.btn,.btn-link{
+                align-self: center;
+            }           
+        }
+
+        .form-input-with-button{
+            display:flex;
+            gap: 0.5rem;
+        }
+        .form-label{
+            margin-bottom:0.25rem;
+            span.form-label-optional {
+                font-weight:400;
+            }
+        }
+
+        &.my-organization-card {
+            padding: 0px;
+
+            .bd-card-img {
+                padding: 0px;
+                width: 100%;
+                height: 250px;
+                
+               img {
+                object-fit: cover;
+                border-bottom-left-radius: 0px;
+                border-bottom-right-radius: 0px;
+               }
+            }
+        }
+    }  
+
+    &.overview-template {
+        .bd-dropdown.dropdown .dropdown-toggle {
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            font-size: 13px;
+            letter-spacing: 0;
+            line-height: 24px;
+            margin-right: 0px;
+            text-decoration: none;
+        }
+
+        .bd-form-checkbox {
+            margin-bottom: 22px;
+            font-family: $font-family-base;
+        }
+
+        .bd-article {
+            margin-bottom: 16px;
+            padding: 20px;
+            cursor: pointer;
+
+            header {
+                position: relative;       
+
+                .bd-date {
+                    color: $secondary;
+                    font-size: .875rem;
+                    font-weight: 400;
+                    text-wrap: nowrap;
+                }
+
+                .bd-counter {
+                    margin-right: 0px;
+                }
+
+                .bd-user__information header {
+                    justify-content: flex-start; 
+                }
+            }
+
+            .bd-dropdown .dropdown-menu {
+                padding: 0px;
+
+                .dropdown-item {
+                    cursor: pointer;
+                    line-height: normal;
+                    padding: 8px 20px;
+                }
+            }
+        }
+        
+        .bd-badge {
+            margin-right:auto;
+            margin: 0px 4px;
+            align-self:flex-start;
+        }
+        
+        .bd-text{
+            line-height: 1.375rem;
+            max-height: 2.75rem;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            -webkit-line-clamp: 2; 
+
+            p {
+                margin-bottom: 0px;
+            }
+        }
+        
+        .bd-body-card {
+            display: flex;
+            justify-content: space-between;
+
+            @media (max-width: map-get($grid-breakpoints, md)) {
+                flex-direction: column;
+                align-items:flex-end;
+                >*:first-child {
+                    align-self: stretch;
+                  }
+            }
+    
+
+        }
+        
+        .bd-dropdown {
+            margin-right: 0px;
+        }
+
+        .bd-counter {
+            display:none
+        }
+
+        .bd-article.is-unread {
+            border-right: 4px solid $primary;
+
+            .bd-date {
+                color: $primary;
+                font-weight: 500;
+            }
+
+            .bd-counter {
+                display: block;
+                width: 20px;
+                height: 20px;
+                border-radius: 12px;
+                background-color: $primary;
+                margin-top:6px;
+            }
+        }
+    }
+
+    &.detail-conversation-template{
+        .bd-card-template {
+            margin-top: 20px;
+        }
+
+        .spinner-border {
+            width: 1rem;
+            height: 1rem;
+            --bs-spinner-border-width: 0.15em;
+        }
+
+        .icon-eye-show {
+            height: 25px;
+            width: 25px;
+            padding-bottom: 3px;
+        }
+    }
+
+    &.not-found-template {
+        padding-top: 0px;
+        
+        .center-screen {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            min-height: 100vh; 
+        }
+          
+        .container-warning {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        background-color: #fff;
+        height: 319px;
+        width: 500px;
+        border-radius: 8px;
+        padding: 40px;
+        
+        }
+    }
+}
+
+@media (max-width: map-get($grid-breakpoints, sm)) {
+    .template {
+        &.overview-template {
+            .bd-form-checkbox {
+                padding-left:2.8rem;
+                margin-bottom: 12px;
+            }
+
+            .conversations-container {
+                padding: 0px;
+
+                .bd-article {
+                    margin-bottom: 5px;
+                    border-radius: 0px;
+                    padding: 16px;
+                }
+            }
+        }
+    }
 }