From 54b1c6a9ca523887514cb2d19c9bd8e3ba65cd24 Mon Sep 17 00:00:00 2001
From: Jordan-Tompit <janko.jordan@tompit.com>
Date: Fri, 17 Mar 2023 14:00:03 +0100
Subject: [PATCH] Changes for drop-down in inputsscss

---
 .../Pages/Democomp.razor                      | 70 +++++++++++--------
 .../Styles/components/_inputs.scss            | 47 +++++++++++--
 2 files changed, 82 insertions(+), 35 deletions(-)

diff --git a/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor b/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
index b909dda..2fbe6fc 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
+++ b/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>
@@ -614,34 +632,7 @@
                                 </span>
                             </span>
                         </div>
-
-
-
-                   
-                        <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">
@@ -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>
+
+                                <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">
+                    <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>
diff --git a/src/Connected.Components/Styles/components/_inputs.scss b/src/Connected.Components/Styles/components/_inputs.scss
index 604d560..7d559a8 100644
--- a/src/Connected.Components/Styles/components/_inputs.scss
+++ b/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 {