@bagelink/vue 0.0.312 → 0.0.316

package/dist/style.css

@@ -2297,6 +2297,65 @@ img.preview[data-v-1be8d7b1] {
 }
 }
 
+.layout {
+  min-height: 100px;
+  display: grid;
+}
+
+.v-popper--theme-tooltip .v-popper__inner {
+  background: rgb(255, 255, 255) !important;
+  color: var(--bgl-primary) !important;
+  font-size: 15px;
+  padding: 0.5rem 1rem;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+.wideNav .nav-button .bgl_btn-flex {
+  justify-content: flex-start !important;
+}
+
+.nav-button.router-link-active[data-v-5d66b060] {
+  background-color: #40b884 !important;
+}
+.bgl_sidebar[data-v-5d66b060] {
+  background-color: var(--bgl-primary);
+  color: var(--bgl-white);
+  overflow: hidden;
+  border-radius: var(--card-border-radius);
+  margin: 0.5rem;
+  width: calc(100% - 1rem);
+  padding: 0.5rem;
+  overflow-y: auto;
+}
+.wideNav .toggleNav[data-v-5d66b060] {
+  transform: rotate(180deg);
+}
+.wideNav .nav-button[data-v-5d66b060] {
+  padding-inline-start: 1rem !important;
+  width: 100%;
+}
+.nav-button.bgl_btn-icon[data-v-5d66b060] {
+  border-radius: var(--btn-border-radius) !important;
+}
+.nav-button p[data-v-5d66b060] {
+  transition: var(--nav-tran);
+  animation: fade-5d66b060 2s;
+  animation-duration: 900ms;
+}
+@keyframes fade-5d66b060 {
+0% {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+30% {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+100% {
+    opacity: 1;
+    transform: translateX(0);
+}
+}
+
 
 
 .grid {
@@ -3144,6 +3203,9 @@ img.preview[data-v-1be8d7b1] {
 .h-10px {
     height: 10px;
 }
+.hm-10px {
+    max-height: 10px;
+}
 .h-20 {
     height: 20%;
 }
@@ -3153,6 +3215,9 @@ img.preview[data-v-1be8d7b1] {
 .h-20px {
     height: 20px;
 }
+.hm-20px {
+    max-height: 20px;
+}
 .h-30 {
     height: 30%;
 }
@@ -3162,6 +3227,9 @@ img.preview[data-v-1be8d7b1] {
 .h-30px {
     height: 30px;
 }
+.hm-30px {
+    max-height: 30px;
+}
 .h-40 {
     height: 40%;
 }
@@ -3171,6 +3239,9 @@ img.preview[data-v-1be8d7b1] {
 .h-40px {
     height: 40px;
 }
+.hm-40px {
+    max-height: 40px;
+}
 .h-50 {
     height: 50%;
 }
@@ -3180,6 +3251,9 @@ img.preview[data-v-1be8d7b1] {
 .h-50px {
     height: 50px;
 }
+.hm-50px {
+    max-height: 50px;
+}
 .h-60 {
     height: 60%;
 }
@@ -3189,6 +3263,9 @@ img.preview[data-v-1be8d7b1] {
 .h-60px {
     height: 60px;
 }
+.hm-60px {
+    max-height: 60px;
+}
 .h-70 {
     height: 70%;
 }
@@ -3198,6 +3275,9 @@ img.preview[data-v-1be8d7b1] {
 .h-70px {
     height: 70px;
 }
+.hm-70px {
+    max-height: 70px;
+}
 .h-80 {
     height: 80%;
 }
@@ -3207,6 +3287,9 @@ img.preview[data-v-1be8d7b1] {
 .h-80px {
     height: 80px;
 }
+.hm-80px {
+    max-height: 80px;
+}
 .h-90 {
     height: 90%;
 }
@@ -3216,6 +3299,9 @@ img.preview[data-v-1be8d7b1] {
 .h-90px {
     height: 90px;
 }
+.hm-90px {
+    max-height: 90px;
+}
 .h-100 {
     height: 100%;
 }
@@ -3225,6 +3311,9 @@ img.preview[data-v-1be8d7b1] {
 .h-100px {
     height: 100px;
 }
+.hm-100px {
+    max-height: 100px;
+}
 .h-150 {
     height: 150%;
 }
@@ -3234,6 +3323,9 @@ img.preview[data-v-1be8d7b1] {
 .h-150px {
     height: 150px;
 }
+.hm-150px {
+    max-height: 150px;
+}
 .h-200 {
     height: 200%;
 }
@@ -3243,6 +3335,9 @@ img.preview[data-v-1be8d7b1] {
 .h-200px {
     height: 200px;
 }
+.hm-200px {
+    max-height: 200px;
+}
 .h-300 {
     height: 300%;
 }
@@ -3252,6 +3347,9 @@ img.preview[data-v-1be8d7b1] {
 .h-300px {
     height: 300px;
 }
+.hm-300px {
+    max-height: 300px;
+}
 .h-400 {
     height: 400%;
 }
@@ -3261,6 +3359,9 @@ img.preview[data-v-1be8d7b1] {
 .h-400px {
     height: 400px;
 }
+.hm-400px {
+    max-height: 400px;
+}
 .h-500 {
     height: 500%;
 }
@@ -3270,6 +3371,9 @@ img.preview[data-v-1be8d7b1] {
 .h-500px {
     height: 500px;
 }
+.hm-500px {
+    max-height: 500px;
+}
 .h-600 {
     height: 600%;
 }
@@ -3279,6 +3383,9 @@ img.preview[data-v-1be8d7b1] {
 .h-600px {
     height: 600px;
 }
+.hm-600px {
+    max-height: 600px;
+}
 .layout-h-100 {
     height: 100vh;
     overflow-y: hidden;
@@ -3754,6 +3861,14 @@ select {
     --transition-ease-in: cubic-bezier(0.1, 0.5, 0.33, 1);
     --transition-ease-out: cubic-bezier(1, 0.33, 0.5, 0.1);
 }
+.transition,
+.ease {
+    transition: var(--bgl-transition);
+}
+.transition-400,
+.ease-400 {
+    transition: var(--bgl-transition-400);
+}
 .fade-enter-active {
     transition: all 0.2s ease-out;
 }
@@ -3884,6 +3999,7 @@ select {
     --btn-padding: 30px;
     --btn-height: 40px;
     --bgl-transition: all 200ms ease;
+    --bgl-transition-400: all 400ms ease;
     --bgl-hover-filter: brightness(90%);
     --bgl-active-filter: brightness(70%);
     --bgl-font: "Lexend", "Ploni", sans-serif;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.312",
+  "version": "0.0.316",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/index.ts

@@ -28,3 +28,4 @@ export { default as Carousel } from './Carousel.vue';
 export * from './form';
 export * from './dashboard';
 export * from './whatsapp';
+export * from './layout';

package/src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export { default as Layout } from './Layout.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';

package/src/styles/layout.css

@@ -1093,6 +1093,11 @@
     height: 10px;
 }
 
+.hm-10px {
+    max-height: 10px;
+}
+
+
 .h-20 {
     height: 20%;
 }
@@ -1105,6 +1110,10 @@
     height: 20px;
 }
 
+.hm-20px {
+    max-height: 20px;
+}
+
 .h-30 {
     height: 30%;
 }
@@ -1117,6 +1126,10 @@
     height: 30px;
 }
 
+.hm-30px {
+    max-height: 30px;
+}
+
 .h-40 {
     height: 40%;
 }
@@ -1129,6 +1142,10 @@
     height: 40px;
 }
 
+.hm-40px {
+    max-height: 40px;
+}
+
 .h-50 {
     height: 50%;
 }
@@ -1141,6 +1158,10 @@
     height: 50px;
 }
 
+.hm-50px {
+    max-height: 50px;
+}
+
 .h-60 {
     height: 60%;
 }
@@ -1153,6 +1174,10 @@
     height: 60px;
 }
 
+.hm-60px {
+    max-height: 60px;
+}
+
 .h-70 {
     height: 70%;
 }
@@ -1165,6 +1190,10 @@
     height: 70px;
 }
 
+.hm-70px {
+    max-height: 70px;
+}
+
 .h-80 {
     height: 80%;
 }
@@ -1177,6 +1206,10 @@
     height: 80px;
 }
 
+.hm-80px {
+    max-height: 80px;
+}
+
 .h-90 {
     height: 90%;
 }
@@ -1189,6 +1222,10 @@
     height: 90px;
 }
 
+.hm-90px {
+    max-height: 90px;
+}
+
 
 .h-100 {
     height: 100%;
@@ -1202,6 +1239,10 @@
     height: 100px;
 }
 
+.hm-100px {
+    max-height: 100px;
+}
+
 .h-150 {
     height: 150%;
 }
@@ -1214,6 +1255,10 @@
     height: 150px;
 }
 
+.hm-150px {
+    max-height: 150px;
+}
+
 .h-200 {
     height: 200%;
 }
@@ -1226,6 +1271,10 @@
     height: 200px;
 }
 
+.hm-200px {
+    max-height: 200px;
+}
+
 .h-300 {
     height: 300%;
 }
@@ -1238,6 +1287,10 @@
     height: 300px;
 }
 
+.hm-300px {
+    max-height: 300px;
+}
+
 .h-400 {
     height: 400%;
 }
@@ -1250,6 +1303,10 @@
     height: 400px;
 }
 
+.hm-400px {
+    max-height: 400px;
+}
+
 .h-500 {
     height: 500%;
 }
@@ -1262,6 +1319,10 @@
     height: 500px;
 }
 
+.hm-500px {
+    max-height: 500px;
+}
+
 .h-600 {
     height: 600%;
 }
@@ -1274,6 +1335,11 @@
     height: 600px;
 }
 
+.hm-600px {
+    max-height: 600px;
+}
+
+
 .layout-h-100 {
     height: 100vh;
     overflow-y: hidden;

package/src/styles/theme.css

@@ -42,6 +42,7 @@
     --btn-padding: 30px;
     --btn-height: 40px;
     --bgl-transition: all 200ms ease;
+    --bgl-transition-400: all 400ms ease;
     --bgl-hover-filter: brightness(90%);
     --bgl-active-filter: brightness(70%);
     --bgl-font: "Lexend", "Ploni", sans-serif;

package/src/styles/transitions.css

@@ -3,6 +3,16 @@
     --transition-ease-out: cubic-bezier(1, 0.33, 0.5, 0.1);
 }
 
+.transition,
+.ease {
+    transition: var(--bgl-transition);
+}
+
+.transition-400,
+.ease-400 {
+    transition: var(--bgl-transition-400);
+}
+
 .fade-enter-active {
     transition: all 0.2s ease-out;
 }

package/src/components/layout/Column.vue

@@ -1,6 +0,0 @@
-<template>
-	<div/>
-</template>
-
-<style scoped>
-</style>