@bagelink/vue 0.0.245 → 0.0.247

package/src/components/form/inputs/SelectInput.vue

@@ -2,8 +2,10 @@
 	<div class="pb-1">
 		<label :for="id">
 			{{ label }}
-			<Multiselect ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
-				:placeholder="placeholder" v-model="seletValue" />
+			<Multiselect
+				ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
+				:placeholder="placeholder" v-model="seletValue"
+			/>
 		</label>
 	</div>
 </template>
@@ -125,7 +127,7 @@ fieldset[disabled] .multiselect {
 	width: 100%;
 	min-height: var(--input-height);
 	text-align: left;
-	color: #35495e;
+	color: var(--input-color);
 }
 
 .multiselect * {
@@ -172,21 +174,21 @@ fieldset[disabled] .multiselect {
 .multiselect__single {
 	position: relative;
 	display: inline-block;
-	min-height: 20px;
-	line-height: 20px;
 	border: none;
-	border-radius: var(--input-border-radius);
 	background: var(--input-bg);
-	padding: 0 0 0 5px;
 	width: calc(100%);
 	transition: border 0.1s ease;
 	box-sizing: border-box;
-	margin-bottom: 8px;
 	vertical-align: top;
+	font-size: var(--input-font-size);
+	padding-inline-start: 0rem;
+}
+.multiselect--active .multiselect__input {
+		margin-top: -0.5rem;
 }
 
 .multiselect__input::placeholder {
-	color: #35495e;
+	color: var(--input-color);
 }
 
 .multiselect__tag~.multiselect__input,
@@ -206,7 +208,7 @@ fieldset[disabled] .multiselect {
 }
 
 .multiselect__single {
-	padding-left: 5px;
+	/* padding-left: 5px; */
 	margin-bottom: 8px;
 }
 
@@ -215,12 +217,17 @@ fieldset[disabled] .multiselect {
 }
 
 .multiselect__tags {
-	min-height: 40px;
+	/* min-height: 40px; */
 	display: block;
-	padding: 8px 40px 0 8px;
+	/* padding: 0.7rem 40px 0.7rem 8px; */
 	border-radius: var(--input-border-radius);
 	background: var(--input-bg);
 	font-size: var(--input-font-size);
+	height: var(--input-height);
+	line-height: 0;
+	padding: calc(var(--input-height) / 2);
+	padding-inline-end: 40px;
+	padding-inline-start: 0.7rem;
 }
 
 .multiselect__tag {
@@ -293,8 +300,8 @@ fieldset[disabled] .multiselect {
 	display: block;
 	position: absolute;
 	box-sizing: border-box;
-	width: 40px;
-	height: 38px;
+	/* width: 40px; */
+	/* height: 38px; */
 	right: 1px;
 	top: 1px;
 	padding: 4px 8px;
@@ -303,22 +310,23 @@ fieldset[disabled] .multiselect {
 	text-align: center;
 	cursor: pointer;
 	transition: transform 0.2s ease;
+	padding-top: calc(var(--input-height) / 2 - 0.7rem);
+
 }
 
 .multiselect__select::before {
 	position: relative;
 	background-size: contain;
 	transform: scale(0.5);
-	top: 4px;
 	color: var(--bgl-black);
-	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>")
+	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
 }
 
 .multiselect__placeholder {
-	color: #adadad;
+	color: var(--placeholder-color);
 	display: inline-block;
 	margin-bottom: 10px;
-	padding-top: 2px;
+
 }
 
 .multiselect--active .multiselect__placeholder {
@@ -427,16 +435,16 @@ fieldset[disabled] .multiselect {
 
 .multiselect__option--group {
 	background: #ededed;
-	color: #35495e;
+	color: var(--input-color);
 }
 
 .multiselect__option--group.multiselect__option--highlight {
-	background: #35495e;
+	background: var(--input-color);
 	color: #fff;
 }
 
 .multiselect__option--group.multiselect__option--highlight::after {
-	background: #35495e;
+	background: var(--input-color);
 }
 
 .multiselect__option--disabled.multiselect__option--highlight {
@@ -481,7 +489,9 @@ fieldset[disabled] .multiselect {
 }
 
 *[dir="rtl"] .multiselect__tags {
-	padding: 8px 8px 0 40px;
+	padding: calc(var(--input-height) / 2);
+	padding-inline-end: 40px;
+	padding-inline-start: 0.7rem;
 }
 
 *[dir="rtl"] .multiselect__content {

package/src/styles/layout.css

@@ -272,6 +272,22 @@
     flex: 1 1 33.33333%;
 }
 
+.mb-0 {
+    margin-bottom: 0rem !important;
+}
+
+.mb-025 {
+    margin-bottom: 0.25rem !important;
+}
+
+.mb-05 {
+    margin-bottom: 0.5rem !important;
+}
+
+.mb-075 {
+    margin-bottom: 0.75rem !important;
+}
+
 .mb-1 {
     margin-bottom: 1rem !important;
 }
@@ -284,6 +300,26 @@
     margin-bottom: 3rem !important;
 }
 
+.mb-4 {
+    margin-bottom: 4rem !important;
+}
+
+.mt-0 {
+    margin-top: 0rem !important;
+}
+
+.mt-025 {
+    margin-top: 0.25rem !important;
+}
+
+.mt-05 {
+    margin-top: 0.5rem !important;
+}
+
+.mt-075 {
+    margin-top: 0.75rem !important;
+}
+
 .mt-1 {
     margin-top: 1rem !important;
 }
@@ -296,6 +332,26 @@
     margin-top: 3rem !important;
 }
 
+.mt-4 {
+    margin-top: 4rem !important;
+}
+
+.ms-0 {
+    margin-inline-start: 0rem !important;
+}
+
+.ms-025 {
+    margin-inline-start: 0.25rem !important;
+}
+
+.ms-05 {
+    margin-inline-start: 0.5rem !important;
+}
+
+.ms-075 {
+    margin-inline-start: 0.75rem !important;
+}
+
 .ms-1 {
     margin-inline-start: 1rem !important;
 }
@@ -308,6 +364,26 @@
     margin-inline-start: 3rem !important;
 }
 
+.ms-4 {
+    margin-inline-start: 4rem !important;
+}
+
+.me-0 {
+    margin-inline-end: 0rem !important;
+}
+
+.me-025 {
+    margin-inline-end: 0.25rem !important;
+}
+
+.me-05 {
+    margin-inline-end: 0.5rem !important;
+}
+
+.me-075 {
+    margin-inline-end: 0.75rem !important;
+}
+
 .me-1 {
     margin-inline-end: 1rem !important;
 }
@@ -320,86 +396,125 @@
     margin-inline-end: 3rem !important;
 }
 
-.mb-0 {
-    margin-bottom: 0rem !important;
+.me-4 {
+    margin-inline-end: 4rem !important;
 }
 
-.mb-4 {
-    margin-bottom: 4rem !important;
+
+.-mb-025 {
+    margin-bottom: -0.25rem !important;
 }
 
-.mb-075 {
-    margin-bottom: 0.75rem !important;
+.-mb-05 {
+    margin-bottom: -0.5rem !important;
 }
 
-.mb-05 {
-    margin-bottom: 0.5rem !important;
+.-mb-075 {
+    margin-bottom: -0.75rem !important;
 }
 
-.mb-025 {
-    margin-bottom: 0.25rem !important;
+.-mb-1 {
+    margin-bottom: -1rem !important;
 }
 
-.mt-0 {
-    margin-top: 0rem !important;
+.-mb-2 {
+    margin-bottom: -2rem !important;
 }
 
-.mt-4 {
-    margin-top: 4rem !important;
+.-mb-3 {
+    margin-bottom: -3rem !important;
 }
 
-.mt-075 {
+.-mb-4 {
+    margin-bottom: -4rem !important;
+}
+
+.-mt-025 {
+    margin-top: -0.25rem !important;
+}
+
+.-mt-05 {
+    margin-top: -0.5rem !important;
+}
+
+.-mt-075 {
     margin-top: 0.75rem !important;
 }
 
-.mt-05 {
-    margin-top: 0.5rem !important;
+.-mt-1 {
+    margin-top: -1rem !important;
 }
 
-.mt-025 {
-    margin-top: 0.25rem !important;
+.-mt-2 {
+    margin-top: -2rem !important;
 }
 
-.ms-0 {
-    margin-inline-start: 0rem !important;
+.-mt-3 {
+    margin-top: -3rem !important;
 }
 
-.ms-4 {
-    margin-inline-start: 4rem !important;
+.-mt-4 {
+    margin-top: -4rem !important;
 }
 
-.ms-075 {
-    margin-inline-start: 0.75rem !important;
+.-ms-025 {
+    margin-inline-start: -0.25rem !important;
 }
 
-.ms-05 {
-    margin-inline-start: 0.5rem !important;
+.-ms-05 {
+    margin-inline-start: -0.5rem !important;
 }
 
-.ms-025 {
-    margin-inline-start: 0.25rem !important;
+.-ms-075 {
+    margin-inline-start: -0.75rem !important;
 }
 
-.me-0 {
-    margin-inline-end: 0rem !important;
+.-ms-1 {
+    margin-inline-start: -1rem !important;
 }
 
-.me-4 {
-    margin-inline-end: 4rem !important;
+.-ms-2 {
+    margin-inline-start: -2rem !important;
 }
 
-.me-075 {
-    margin-inline-end: 0.75rem !important;
+.-ms-3 {
+    margin-inline-start: -3rem !important;
 }
 
-.me-05 {
-    margin-inline-end: 0.5rem !important;
+.-ms-4 {
+    margin-inline-start: -4rem !important;
 }
 
-.me-025 {
-    margin-inline-end: 0.25rem !important;
+
+.-me-025 {
+    margin-inline-end: -0.25rem !important;
 }
 
+.-me-05 {
+    margin-inline-end: -0.5rem !important;
+}
+
+.-me-075 {
+    margin-inline-end: -0.75rem !important;
+}
+
+.-me-1 {
+    margin-inline-end: -1rem !important;
+}
+
+.-me-2 {
+    margin-inline-end: -2rem !important;
+}
+
+.-me-3 {
+    margin-inline-end: -3rem !important;
+}
+
+.-me-4 {
+    margin-inline-end: -4rem !important;
+}
+
+
 .pb-0 {
     padding-bottom: 0rem !important;
 }

package/src/styles/text.css

@@ -85,6 +85,10 @@ h6 {}
     font-weight: 700;
 }
 
+.line-height-1 {
+    line-height: 1;
+}
+
 .ellipsis {
     overflow: hidden;
     display: block;