@bagelink/vue 0.0.142 → 0.0.147

package/src/styles/layout.css

@@ -0,0 +1,268 @@
+.grid {
+    display: grid;
+}
+
+.inline-grid {
+    display: inline-grid;
+}
+
+.fill {
+    width: 100vw;
+    height: 100vh;
+}
+
+.justify-items-center {
+    justify-items: center;
+}
+
+.justify-content-center {
+    justify-content: center;
+}
+
+.justify-content-start {
+    justify-content: start;
+}
+
+.align-content-center {
+    align-content: center;
+}
+
+.align-items-top {
+    align-items: flex-start !important;
+}
+
+.align-items-center {
+    align-items: center;
+}
+
+.row-gap-1 {
+    row-gap: 0.2rem;
+}
+
+.row-gap-2 {
+    row-gap: 0.5rem;
+}
+
+.row-gap-3 {
+    row-gap: 1rem;
+}
+
+.fit-content {
+    width: fit-content;
+    height: fit-content;
+}
+
+.margin-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.auto-flow-columns {
+    grid-auto-flow: column;
+}
+
+.justify-content-between {
+    justify-content: space-between;
+}
+
+.justify-self-start {
+    justify-self: start;
+}
+
+.columns-max-content {
+    grid-auto-columns: max-content;
+}
+
+.w-100 {
+    width: 100%;
+}
+
+.col-gap-1 {
+    column-gap: 1rem;
+}
+
+.col-gap-05 {
+    column-gap: 0.5rem;
+}
+
+.rows-max-content {
+    grid-auto-rows: max-content;
+}
+
+.grid.overflow>* {
+    min-width: 0px;
+    overflow: auto;
+}
+
+.ps-1 {
+    padding-left: 1rem;
+}
+
+.justify-content-around {
+    justify-content: space-between;
+}
+
+.justify-content-end {
+    justify-content: end;
+}
+
+.justify-self-end {
+    justify-self: end;
+}
+
+.justify-self-center {
+    justify-self: center;
+}
+
+.position-right {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+}
+
+.position-relative {
+    position: relative;
+}
+
+.auto-flow-rows {
+    grid-auto-flow: row;
+}
+
+.align-items-start {
+    align-items: start !important;
+}
+
+.align-self-end {
+    align-self: end;
+}
+
+.h-100 {
+    height: 100%;
+}
+
+.vh-100 {
+    height: 100vh;
+}
+
+.min-100 {
+    min-height: 100%;
+}
+
+.w-100 {
+    width: 100%;
+}
+
+.gap-1 {
+    gap: 0.25rem;
+}
+
+.gap-2 {
+    gap: 0.5rem;
+}
+
+.gap-3 {
+    gap: 1rem;
+}
+
+.gap-col-1 {
+    column-gap: 0.25rem;
+}
+
+.gap-col-2 {
+    column-gap: 0.5rem;
+}
+
+.gap-col-3 {
+    column-gap: 1rem;
+}
+
+.gap-row-1 {
+    row-gap: 0.25rem;
+}
+
+.gap-row-2 {
+    row-gap: 0.5rem;
+}
+
+.gap-row-3 {
+    row-gap: 1rem;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.flex-grow {
+    flex-grow: 1;
+}
+
+.flex-shrink {
+    flex-shrink: 1;
+}
+
+.flex-2-col {
+    max-width: 50%;
+    flex: 1 1 calc(50% - 2rem);
+}
+
+.flex-3-col {
+    flex: 1 1 33.33333%;
+}
+
+.mb-0 {
+    margin-bottom: 0;
+}
+
+.mb-1 {
+    margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+    margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+    margin-bottom: 1rem;
+}
+
+.mt-0 {
+    margin-top: 0;
+}
+
+.mt-1 {
+    margin-top: 0.25rem;
+}
+
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mt-3 {
+    margin-top: 1rem;
+}
+
+.ms-1 {
+    margin-inline-start: 0.25rem;
+}
+
+.ms-2 {
+    margin-inline-start: 0.5rem;
+}
+
+.ms-3 {
+    margin-inline-start: 1rem;
+}
+
+.me-1 {
+    margin-inline-end: 0.25rem;
+}
+
+
+.me-2 {
+    margin-inline-end: 0.5rem;
+}
+
+.me-3 {
+    margin-inline-end: 1rem;
+}

package/src/styles/modal.css

@@ -1,90 +1,91 @@
 .bg-dark {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    z-index: 999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-    opacity: 0;
-    transition: all ease-in-out 0.3s;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 999;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	pointer-events: none;
+	opacity: 0;
+	transition: all ease-in-out 0.3s;
 }
 
 .modal {
-    width: 96%;
-    max-width: 680px;
-    transform: scale(0.5);
-    opacity: 0;
-    transition: all ease-in-out 0.15s;
-    overflow: auto;
-    max-height: 96vh;
+	width: 96%;
+	max-width: 680px;
+	transform: scale(0.5);
+	opacity: 0;
+	transition: all ease-in-out 0.15s;
+	overflow: auto;
+	max-height: 96vh;
 }
 
 .small-modal .modal {
-    max-width: 300px;
-    text-align: center;
+	max-width: 300px;
+	text-align: center;
 }
 
 .tool-bar {
-    margin: -2rem -1rem 1rem;
-    display: flex;
-    justify-content: space-between;
-    position: sticky;
-    padding-top: 1rem;
-    top: -2rem;
-    z-index: 3;
-    background: var(--bgl-white);
+	margin: -2rem -1rem 1rem;
+	display: flex;
+	justify-content: space-between;
+	position: -webkit-sticky;
+	position: sticky;
+	padding-top: 1rem;
+	top: -2rem;
+	z-index: 3;
+	background: var(--bgl-white);
 }
 
 .modal-size {
-    cursor: pointer;
+	cursor: pointer;
 }
 
 .is-side .modal {
-    inset-inline-end: -600px;
-    transform: scale(1);
-    opacity: 1;
-    position: fixed;
-    top: 20px;
-    bottom: 20px;
-    max-width: 600px;
-    width: 90%;
+	inset-inline-end: -600px;
+	transform: scale(1);
+	opacity: 1;
+	position: fixed;
+	top: 20px;
+	bottom: 20px;
+	max-width: 600px;
+	width: 90%;
 }
 
 .is-active .modal {
-    transform: scale(1);
-    opacity: 1;
-    box-shadow: 6px 6px 20px 20px #0000001c;
+	transform: scale(1);
+	opacity: 1;
+	box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .is-active.is-side .modal {
-    inset-inline-end: 20px;
+	inset-inline-end: 20px;
 }
 
 .bg-dark.is-active {
-    opacity: 1;
-    pointer-events: all;
+	opacity: 1;
+	pointer-events: all;
 }
 
 .is-side.bg-dark.is-active {
-    opacity: 1;
+	opacity: 1;
 }
 
 .is-side.is-active .modal {
-    pointer-events: all;
+	pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-    .tool-bar {
-        margin: -2rem 0 1rem;
-        align-items: center;
-    }
+	.tool-bar {
+			margin: -2rem 0 1rem;
+			align-items: center;
+	}
 
-    .is-active.is-side .modal {
-        inset-inline-end: 5%;
-    }
+	.is-active.is-side .modal {
+			inset-inline-end: 5%;
+	}
 }

package/src/styles/scrollbar.css

@@ -0,0 +1,18 @@
+::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5rem;
+}
+
+::-webkit-scrollbar-track {
+    /* border-left: 1px solid var(--bgl-gray-light); */
+    /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--bgl-gray);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}

package/src/styles/text.css

@@ -0,0 +1,35 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    width: max-content;
+}
+
+h1 {
+}
+
+h2 {
+}
+
+h3 {
+}
+
+h4 {
+}
+
+h5 {
+}
+
+h6 {
+}
+
+.txt-center {
+    text-align: center;
+}
+
+
+.smalltxt {
+    font-size: 12px;
+}