@bagelink/vue 0.0.322 → 0.0.335

package/src/components/layout/tabsManager.ts

@@ -0,0 +1,18 @@
+import { reactive, computed } from 'vue';
+
+const state = reactive(new Map());
+
+export function useTabs(group: string) {
+	if (!state.has(group)) {
+		state.set(group, reactive({ currentTab: null }));
+	}
+
+	const currentTab = computed({
+		get: () => state.get(group).currentTab,
+		set: (val) => {
+			state.get(group).currentTab = val;
+		},
+	});
+
+	return { currentTab };
+}

package/src/styles/appearance.css

@@ -0,0 +1,81 @@
+.opacity-1 {
+    opacity: 0.1;
+}
+
+.opacity-2 {
+    opacity: 0.2;
+}
+
+.opacity-3 {
+    opacity: 0.3;
+}
+
+.opacity-4 {
+    opacity: 0.4;
+}
+
+.opacity-5 {
+    opacity: 0.5;
+}
+
+.opacity-6 {
+    opacity: 0.6;
+}
+
+.opacity-7 {
+    opacity: 0.7;
+}
+
+.opacity-8 {
+    opacity: 0.8;
+}
+
+.opacity-9 {
+    opacity: 0.9;
+}
+
+.opacity-10 {
+    opacity: 1;
+}
+
+@media screen and (max-width: 910px) {
+    .m_opacity-1 {
+        opacity: 0.1;
+    }
+
+    .m_opacity-2 {
+        opacity: 0.2;
+    }
+
+    .m_opacity-3 {
+        opacity: 0.3;
+    }
+
+    .m_opacity-4 {
+        opacity: 0.4;
+    }
+
+    .m_opacity-5 {
+        opacity: 0.5;
+    }
+
+    .m_opacity-6 {
+        opacity: 0.6;
+    }
+
+    .m_opacity-7 {
+        opacity: 0.7;
+    }
+
+    .m_opacity-8 {
+        opacity: 0.8;
+    }
+
+    .m_opacity-9 {
+        opacity: 0.9;
+    }
+
+    .m_opacity-10 {
+        opacity: 1;
+    }
+}

package/src/styles/bagel.css

@@ -1,10 +1,12 @@
 @import "layout.css";
+@import "mobilLayout.css";
 @import "inputs.css";
 @import "buttons.css";
 @import "text.css";
 @import "scrollbar.css";
 @import "transitions.css";
 @import "loginCard.css";
+@import "appearance.css";
 @import "theme.css";
 @import "dark.css";
 @import "./fonts/Ploni.css";

package/src/styles/layout.css

@@ -101,12 +101,11 @@
     inset-inline-end: 0px;
 }
 
-.position-absolute {
-    position: absolute;
-}
-
-.position-relative {
-    position: relative;
+.positioned-full {
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
 }
 
 .auto-flow-rows {
@@ -127,7 +126,7 @@
 }
 
 .w-100,
-.w100 {
+.width-100 {
     width: 100%;
 }
 
@@ -140,24 +139,88 @@
 .w600,
 .w650,
 .w700,
+.w750,
 .w770,
+.w800,
+.w850,
 .w900,
+.w950,
 .w970,
+.w1000,
 .w1030,
-.w1170 {
+.w1050,
+.w1100,
+.w1150,
+.w1170,
+.w1200,
+.w1250,
+.w1300,
+.w1350,
+.w1400,
+.w1450,
+.w1500,
+.w1550,
+.w1600 {
     margin-inline-start: auto;
     margin-inline-end: auto;
     width: 98%;
 }
+.w10 {
+    max-width: 10px;
+}
+
+.w20 {
+    max-width: 20px;
+}
+
+.w20 {
+    max-width: 20px;
+}
+
+.w30 {
+    max-width: 30px;
+}
+
+.w40 {
+    max-width: 40px;
+}
+
+.w50 {
+    max-width: 50px;
+}
+
+.w60 {
+    max-width: 60px;
+}
+
+.w70 {
+    max-width: 70px;
+}
+
+.w80 {
+    max-width: 80px;
+}
+
+.w90 {
+    max-width: 90px;
+}
 
 .w100 {
     max-width: 100px;
 }
 
+.w150 {
+    max-width: 150px;
+}
+
 .w200 {
     max-width: 200px;
 }
 
+.w250 {
+    max-width: 250px;
+}
+
 .w300 {
     max-width: 300px;
 }
@@ -190,30 +253,98 @@
     max-width: 650px;
 }
 
-.w650 {
+.w700 {
     max-width: 700px;
 }
 
+.w750 {
+    max-width: 750px;
+}
+
 .w770 {
     max-width: 770px;
 }
 
+.w800 {
+    max-width: 800px;
+}
+
+.w850 {
+    max-width: 850px;
+}
+
 .w900 {
     max-width: 900px;
 }
 
+.w950 {
+    max-width: 950px;
+}
+
 .w970 {
     max-width: 970px;
 }
 
+.w1000 {
+    max-width: 1000px;
+}
+
 .w1030 {
     max-width: 1030px;
 }
 
+.w1050 {
+    max-width: 1050px;
+}
+
+.w1100 {
+    max-width: 1100px;
+}
+
+.w1150 {
+    max-width: 1150px;
+}
+
 .w1170 {
     max-width: 1170px;
 }
 
+.w1200 {
+    max-width: 1200px;
+}
+
+.w1250 {
+    max-width: 1250px;
+}
+
+.w1300 {
+    max-width: 1300px;
+}
+
+.w1350 {
+    max-width: 1350px;
+}
+
+.w1400 {
+    max-width: 1400px;
+}
+
+.w1450 {
+    max-width: 1450px;
+}
+
+.w1500 {
+    max-width: 1500px;
+}
+
+.w1550 {
+    max-width: 1550px;
+}
+
+.w1600 {
+    max-width: 1600px;
+}
+
 .w-all,
 .wall {
     width: -webkit-fill-available;
@@ -1037,14 +1168,31 @@
     padding: 0.25rem !important;
 }
 
-.relative {
-    position: relative;
+.relative,
+.position-relative {
+    position: relative !important;
 }
 
-.absolute {
+.absolute,
+.position-absolute {
     position: absolute !important;
 }
 
+.fixed,
+.position-fixed {
+    position: fixed !important;
+}
+
+.static,
+.position-static {
+    position: static !important;
+}
+
+.sticky,
+.position-sticky {
+    position: sticky !important;
+}
+
 .flex {
     display: flex;
     align-items: center;
@@ -1056,7 +1204,8 @@
 }
 
 .hide,
-.display-hide {
+.none,
+.display-none {
     display: none;
 }
 
@@ -1077,10 +1226,6 @@
     display: inline-block;
 }
 
-.flex-wrap {
-    flex-wrap: wrap;
-}
-
 .flex-end {
     justify-content: flex-end;
 }