@burh/nuxt-core 1.0.451 → 1.0.453

package/components/burh-ds/Cards/CourseInfoCard.vue

@@ -26,7 +26,7 @@
 								<span
 									v-if="items.number"
 									:class="items.color ? items.color : ''"
-									class="display-1 font-weight-bold"
+									class="display-1 font-weight-bold number-value"
 								>{{ items.percentage ? items.percentage : items.number}}</span
 								>
 								<p
@@ -111,6 +111,18 @@ export default {
             }
         }
     }
+     @media screen and (max-width: 1380px){
+        font-size: .8rem;
+    }
+    @media screen and (max-width: 1132px){
+        font-size: .7rem;
+    }
+    @media screen and (max-width: 1009px){
+        font-size: .67rem;
+    }
+    @media screen and (max-width: 768px){
+        font-size: 1rem;
+    }
 }
 
 .chart__graph {
@@ -134,9 +146,30 @@ export default {
     align-items: center;
     justify-content: center;
     flex-direction: column;
-
 }
 
+.number-value{
+    font-size: 2rem;
+
+    @media screen and (max-width: 1380px){
+        font-size: 1.5rem;
+    }
+    @media screen and (max-width: 1075px){
+        font-size: 1.3rem;
+    }
+    @media screen and (max-width: 934px){
+        font-size: 1.2rem;
+    }
+    @media screen and (max-width: 952px){
+        font-size: 1rem;
+    }
+    @media screen and (max-width: 768px){
+        font-size: 1.8rem;
+    }
+    @media screen and (max-width: 672px){
+        font-size: 1.4rem;
+    }
+}
 .card__content {
     width: 100%;
 }
@@ -144,6 +177,7 @@ export default {
 .card-title {
     font-size: 1rem;
 }
+
 .info-box {
     @media (min-width: 576px) {
         flex: 0 0 50%;

package/components/burh-ds/Filters/BaseFilterContainer.vue

@@ -15,7 +15,7 @@
 			</div>
 			<div>
 				<button
-					@click="!isLocked ? $emit('filter-apply') : $emit('open-plan-modal')"
+					@click="!isLocked ? handleFilterApply() : $emit('open-plan-modal')"
 					class="base__filter__button apply"
 					:class="{ 'disabled': isLocked }"
 				>
@@ -44,6 +44,12 @@ export default {
 			type: Boolean,
 			default: false
 		}
+	},
+	methods: {
+		handleFilterApply() {
+			this.$bus.$emit('close-dropdown');
+			this.$emit('filter-apply');
+		}
 	}
 };
 </script>

package/components/burh-ds/Filters/FilterWithDropdown.vue

@@ -1,14 +1,15 @@
 <template>
-	<div>
+	<div :class="{'filter__with__dropdown' : isDropdownOpen}">
 		<div
 			v-if="isDropdownOpen"
 			id="backgroundFade"
+			@mousedown="dropDownOutsideClick"
 		></div>
 		<div
-			v-click-outside="dropDownOutsideClick"
+			ref="filterContainer"
 			class="filter__container"
 			:class="{'filter__container__dropdown--open': isDropdownOpen}"
-			ref="filterContainer"
+			:style="`--filter-text-color: ${this.baseColor}; --filter-base-color: ${this.baseColor}22`"
 		>
 			<button
 				class="filter__item"
@@ -61,6 +62,10 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		baseColor: {
+			type: String,
+			default: '#5865F2'
+		}
 	},
 	data() {
 		return {
@@ -104,10 +109,22 @@ export default {
 				this.isDropdownOpen = false;
 			}
 		}
+	},
+	mounted() {
+		this.$bus.$on('close-dropdown', () => this.isDropdownOpen = false);
+	},
+	beforeDestroy() {
+		this.$bus.$off('close-dropdown');
 	}
 };
 </script>
 
+<style lang="scss">
+.el-select-dropdown.el-popper {
+    z-index: 2147483020!important;
+}
+</style>
+
 <style lang="scss" scoped>
 @keyframes fadeIn {
 	from { opacity: 0; }
@@ -137,15 +154,26 @@ export default {
     width: 100vw;
     height: 100vh;
     background: rgba(255, 255, 255, 0.6);
-    z-index: 200;
+    z-index: 1050;
     animation: 0.5s fadeIn;
 }
 
+.filter__with__dropdown {
+    @media (max-width: 820px) {
+        & {
+            z-index: 2147483010;
+        }
+    }
+}
+
 .filter__container__dropdown--open {
-    z-index: 210!important;
+    z-index: 1060!important;
 }
 
 .filter__container {
+    $baseColor: var(--filter-base-color);
+    $textColor: var(--filter-text-color);
+
     position: relative;
     z-index: 100;
     margin-bottom: 10px;
@@ -202,10 +230,10 @@ export default {
         background: transparent;
         &:focus {
             outline: none;
-            background: rgba(31, 140, 235, 0.2);
+            background: $baseColor;
             border-color: transparent;
             p {
-                color: #5865F2;
+                color: $textColor;
             }
         }
         &:not(.filter__item--active):not(:disabled):hover {
@@ -225,10 +253,10 @@ export default {
             white-space: nowrap;
         }
         &--active {
-            background: rgba(31, 140, 235, 0.2);
+            background: $baseColor;
             border-color: transparent;
             p {
-                color: #5865F2;
+                color: $textColor;
             }
         }
         .status {

package/components/burh-ds/Headings/AppHeader.vue

@@ -198,7 +198,7 @@ export default {
             }
             &--active {
                 img {
-                    border-color: #1F8CEB;
+                    border-color: #5865f2;
                 }
             }
         }
@@ -273,7 +273,7 @@ export default {
     font-size: 0.7rem;
     user-select: none;
     &--active {
-        border-color: #1F8CEB;
+        border-color: #5865f2;
     }
 }
 

package/components/burh-ds/Img/ImageWithFallback.vue

@@ -29,6 +29,10 @@ export default {
 		fallbackText: {
 			type: String,
 			required: true
+		},
+		fallbackSingle: {
+			type: Boolean,
+			default: true
 		}
 	},
 	methods: {
@@ -47,7 +51,11 @@ export default {
 			let userAvatarName;
 
 			if (this.fallbackText) {
-				userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
+				if (this.fallbackSingle) {
+					userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
+				} else {
+					userAvatarName = this.fallbackText;
+				}
 			} else {
 				userAvatarName = 'BURH';
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@burh/nuxt-core",
-    "version": "1.0.451",
+    "version": "1.0.453",
     "description": "Design System and Components.",
     "author": "Burh",
     "scripts": {