Changes for drop-down in inputsscss

src/Connected.Components.Showcase.Runner/Pages/Democomp.razor

@@ -537,6 +537,24 @@
                     <div class="grid grid-col-3 gap-3">
 
 
+
+                        <div class="form-group ">
+                            <button type="button" required="required"></button><span class="highlight"></span><span class="bar"></span>
+                            <label class="label-animated">Name</label>
+                            <div class="input-helper-text">Some helping Text</div>
+                            <div class="input-error-text">At least 6 characters required</div>
+                            <span class="input-glyph-wraper">
+                                <span class="input-glyph">
+                                    <span class="input-glyph button">
+                                        <Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
+                                    </span>
+                                    <span class="input-glyph error">
+                                        <Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
+                                    </span>
+                                </span>
+                            </span>
+                        </div>
+
                         <div class="form-group error">
                             <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
                             <label class="label-animated">Name</label>
@@ -617,33 +635,6 @@
                 
 
 
-                   
-                        <div class="form-group-alt" style="width:50%">
-                            <label>Number</label>
-
-                            
-                            <div class="input-group-content">
-
-                                <button class="btn btn-icon-alt input-cta-icon">
-                                    <Glyph SVG="@Icons.Material.Filled.HorizontalRule" class="icon-root svg-icon icon-size-md" />
-                                </button>
-
-                                <div class="input-area">
-                                    
-                                    <input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="1">
-                                    
-                                </div>
-
-                                <button class="btn btn-icon-alt input-cta-icon">
-                                    <Glyph SVG="@Icons.Material.Filled.Add" class="icon-root svg-icon icon-size-md" />
-                                </button>
-
-                            </div>
-                        </div>
-                  
-                  
-
-
                         <div class="form-group">
                             <select type="textarea" required="required">
                                 <option value="" disabled selected hidden></option>
@@ -716,10 +707,31 @@
                             </span>
                         </div>
 
+                        <div class="form-group-alt" style="width:50%">
+                            <label>Number</label>
+                            <div class="input-helper-text">Some helping Text</div>
+                            <div class="input-error-text">At least 6 characters required</div>
+                            <div class="input-group-content">
 
+                                <button class="btn btn-icon-alt input-cta-icon">
+                                    <Glyph SVG="@Icons.Material.Filled.HorizontalRule" class="icon-root svg-icon icon-size-md" />
+                                </button>
+
+                                <div class="input-area">                                    
+                                    <input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="1">                                    
                                 </div>
 
-                    <div class="btn-content">
+                                <button class="btn btn-icon-alt input-cta-icon">
+                                    <Glyph SVG="@Icons.Material.Filled.Add" class="icon-root svg-icon icon-size-md" />
+                                </button>
+
+                            </div>
+                        </div>
+
+
+                    </div>
+
+                    <div class="btn-content justify-flex-end">
                         <button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
                         <button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
                     </div>

src/Connected.Components/Styles/components/_inputs.scss

@@ -47,7 +47,34 @@ form{
         &:focus ~ .bar:before {
             width: $width;
         }
+  }
   
+/*FOR CUSTOM SELECT*/
+  .form-group>button {
+    background: none;
+    color: var(--text-core);
+    font-weight: $font-weight-600;
+    font-size: $base-font-size;
+    padding: 10px 24px 10px 5px;
+    display: block;
+    width: 100%;
+    min-height: 2.8rem;
+    text-align: left;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid var(--border-core);
+        &:focus { 
+            outline: none;
+        }
+        &:focus ~ label.label-animated,
+        &:has(>div) ~ label.label-animated  {
+            top: -12px;
+            font-size: $font-size-sm;
+            color: var(--bg-core-primary-darken);
+        }
+        &:focus ~ .bar:before {
+            width: $width;
+        }
   }
   
   input[type="password"] {
@@ -201,11 +228,8 @@ form{
 
 /*FORM-ALT*/
 
-
-  
-
 .form-group-alt {
-     
+    position: relative; 
     label{
         font-size: .85rem;
         padding-left: 0.85rem;
@@ -228,13 +252,24 @@ form{
         .input-area{
             flex: 1;
         }
-
             /*focus within*/
             &:focus-within{
             background-color: var(--bg-core-primary-lighten);
             background-color: #fff;
         }
       }
+    .input-helper-text{
+        position: absolute;
+        bottom: -10px;
+        line-height: 30px;
+        font-size: 12px;
+        color: $text-core-lc;
+        padding: 5px 10px 10px 5px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+    }
 }
 
 .form-group-alt.error {