FIXED: SGNForms: SGNSelect: SGNSelect were not working as expected wh…

…ile paired as a SGNInput-Prefix/Suffix.
SGNetworksIndia · Feb 14, 2023 · e41ed75 · e41ed75
1 parent c94f518
commit e41ed75
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 6 deletions.
diff --git a/demos/forms.html b/demos/forms.html
@@ -0,0 +1,62 @@
+<!--
+  ~ Copyright (c) 2022-2023 SGNetworks. All rights reserved.
+  ~
+  ~ The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification",  "Alteration", "Re-distribution" is completely prohibited.
+  ~ VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Forms - SGNUIKit Demo</title>
+		<script sgn-ui-kit-loader-icon="assets/img/icon.png" src="/src/js/SGNUIKit.loader.js"></script>
+		<!--<script src="/dist/js/SGNUIKit.loader.js"></script>-->
+	</head>
+	<body>
+		<main>
+			<div class="sgn-container auto-grid col-3">
+				<!-- CARD (BASIC) -->
+				<form action="" method="post">
+					<div class="sgn-input-prefix">
+						<select class="form-control" name="t">
+							<option selected value="1">Property</option>
+							<option value="2">Vacant Land</option>
+						</select>
+					</div>
+					<input class="form-control" name="q" placeholder="Enter your location" type="text">
+					<div class="sgn-input-suffix">
+						<button class="btn primary">Search</button>
+					</div>
+				</form>
+
+				<!-- CARD (BASIC) -->
+				<form action="" method="post">
+					<div class="sgn-inline-form">
+						<div class="sgn-input-prefix inline">
+							<select class="form-control" name="t">
+								<option selected value="1">Property</option>
+								<option value="2">Vacant Land</option>
+							</select>
+						</div>
+						<input class="form-control" name="q" placeholder="Enter your location" type="text">
+						<button class="btn primary">Search</button>
+					</div>
+				</form>
+
+				<!-- CARD (BASIC) -->
+				<form action="" method="post">
+					<label for="fp-cms-listings-property-create-bathroom">Bathrooms</label>
+					<input class="form-control" id="fp-cms-listings-property-create-bathroom" max="11" min="0" name="bathroom" required sgn-input-help="This room is usually used to take a bath or shower. Sometimes the facilities of a W.C are also present in this room." type="number" value="0">
+
+					<label for="fp-cms-listings-property-create-washroom">Suggestion</label>
+					<input
+							class="form-control searchable" id="fp-cms-listings-property-create-washroom" max="11" min="0" name="washroom" readonly required sgn-input-help="This room is used for the toilet, having a bath or shower, brushing the teeth, and washing the face. In some cases, the facilities of this room are usually present in the bathroom."
+							sgn-input-suggestions="geolocation" type="text" value="1"
+					>
+				</form>
+
+			</div>
+		</main>
+	</body>
+</html>
diff --git a/src/css/components/SGNForms/inputs/select.css b/src/css/components/SGNForms/inputs/select.css
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
  *
  * The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification",  "Alteration", "Re-distribution" is completely prohibited.
  * VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
@@ -9,12 +9,18 @@
 	overflow: visible;
 }
 
+.sgn-form.sgn-select:after {
+	content: "\25BC";
+	position: absolute;
+	right: .2rem;
+}
+
 .sgn-form.sgn-select > .sgn-form-wrapper > .sgn-input-wrapper {
 
 }
 
 .sgn-form.sgn-select > .sgn-form-wrapper > .sgn-input-wrapper > .sgn-select-input {
-
+	cursor: pointer;
 }
 
 .sgn-form.sgn-select > .sgn-form-wrapper > .sgn-input-wrapper > .sgn-select {
@@ -26,14 +32,19 @@
 	box-shadow: -1rem 1rem 1rem -1rem var(--sgn-shadow-darker), 1rem 1rem 1rem -1rem var(--sgn-shadow-darker);
 	padding: var(--padding-sm) !important;
 	width: calc(100% + (3px * 2));
-	display: none;
 	flex-direction: column;
 	position: absolute;
 	top: 0;
 	left: -3px;
-	transition: opacity .5s linear .5s, height .4s linear;
-	border-top-width: 0 !important;
+	/* transition: opacity .5s linear .5s, height .4s linear; */
 	z-index: 1;
+	transition: all .2s linear;
+	opacity: 0;
+	transform: scaleY(0);
+}
+
+.sgn-form.sgn-select > .sgn-form-wrapper > .sgn-input-wrapper > .sgn-select.hidden {
+	display: none;
 }
 
 .sgn-form.sgn-select > .sgn-form-wrapper > .sgn-input-wrapper > .sgn-select > .sgn-option {
@@ -58,7 +69,7 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	/* TRANSISITION */
+	/* TRANSITION */
 	transition: opacity .5s ease-in;
 	z-index: -1;
 }
@@ -74,6 +85,24 @@
 	transition: opacity .5s ease-out;
 }
 
+.sgn-form.sgn-select > .sgn-form-wrapper > .sgn-input-wrapper > .sgn-select > .sgn-option.selected {
+	color: var(--sgn-accent-primary-text);
+}
+
+.sgn-form.sgn-select > .sgn-form-wrapper > .sgn-input-wrapper > .sgn-select > .sgn-option.selected:before {
+	background-image: var(--sgn-gradient-secondary);
+	opacity: 1;
+}
+
+
+.sgn-select-open,
+.sgn-form.sgn-select.open {
+	overflow: visible !important;
+}
+
+.sgn-form.sgn-select.open {
+	border-width: 0 !important;
+}
 
 .sgn-form.sgn-select.open > .sgn-form-wrapper > .sgn-input-wrapper > .sgn-select {
 	display: flex;
@@ -83,6 +112,11 @@
 	border-color: var(--sgnf-accent-active);
 }
 
+.sgn-form.sgn-select.open > .sgn-form-wrapper > .sgn-input-wrapper > .sgn-select.open {
+	opacity: 1;
+	transform: scaleY(1);
+}
+