Changes to master-search and inputs

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

@@ -133,7 +133,7 @@
                         </button>  
                     </div>
                     <div class="d-flex gap-2 gap-sm-5 items-center">
-                        <div class="form-group-alt">
+                        <div class="form-group-search">
                             <div class="input-group-content">
                                 <button class="btn btn-icon-alt input-cta-icon mr-1"  tabindex="1">
                                     <Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon icon-size-md" />
@@ -198,7 +198,7 @@
                 <h2>Alerts</h2>
                 <p>An alert is used to notify the user about an important message without interrupting the ongoing task.</p>
 
-                <div class="grid grid-col-2">
+                <div class="grid ">
                     <div class="wrapper">
 
                         <div class="alert alert-sm danger"> <!--classes for smaller size (alert-sm) and color(danger, warning, success, info) -->
@@ -597,6 +597,14 @@
                             <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.Filled.ArrowDropDown" class="icon-root svg-icon" />
+                                    </span>
+                                    <span class="input-glyph button">
+                                        <Glyph SVG="@Icons.Material.Filled.ArrowDropUp" class="icon-root svg-icon" />
+                                    </span>
+
                                     <span class="input-glyph button">
                                         <Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
                                     </span>
@@ -611,14 +619,25 @@
 
                    
                         <div class="form-group-alt" style="width:50%">
+                            <label>Number</label>
+
+                            
                             <div class="input-group-content">
-                                <div class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.HorizontalRule" class="icon-root svg-icon icon-size-md" /></div>
+
+                                <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">
-                                    <form>
+                                    
                                     <input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="1">
-                                    </form>
+                                    
                                 </div>
-                                <div class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.Add" class="icon-root svg-icon icon-size-md" /></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>
                   

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

@@ -21,8 +21,14 @@ $gridcol: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
       minmax(max(250px, 100% / (#{$colCount} + 1) + 1px), 1fr)
     );
   }
+
+  .grid-col-#{$colCount} > *:only-child {
+      width: calc(100% / (#{$colCount}));
+  }
 }
 
+
+
 $colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
 
 @include breakpoint(xl) {
@@ -323,7 +329,7 @@ $columns: 12;
 .form-outer {
 display: flex;
 flex-wrap: nowrap;
-overflow: hidden;
+overflow: clip;
 }
 
 .form-step {
@@ -331,6 +337,9 @@ overflow: hidden;
   flex: 1 0 auto;
   transition: all 0.5s ease-out;
   transform: translateX(0);
+  height: min(calc(100dvh - 245px), 800px);
+  overflow-y: auto;
+  overflow-x: hidden;
   }
 
   .form-step.next {

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

@@ -20,7 +20,8 @@ form{
     resize: none;
   }
   
- .form-group input:not([type="radio"], [type="radio"], #search),
+
+ .form-group input:not([type="radio"], [type="radio"]),
   textarea,
   select {
     background: none;
@@ -161,6 +162,7 @@ form{
 
 }
 
+
 .input-glyph i,
 .input-glyph svg {
     font-size: 1.25rem;
@@ -194,3 +196,61 @@ form{
 .input-glyph.button.reset {
     display:none
 }
+
+
+
+/*FORM-ALT*/
+
+
+  
+
+.form-group-alt {
+     
+    label{
+        font-size: .85rem;
+        padding-left: 0.85rem;
+        margin-bottom: 0.75rem;
+        display: inline-block;
+        color: var(--bg-core-primary-darken);
+    }
+     .input-group-content {   
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.15rem;
+        color: var(--text-core);
+        border-radius: $border-radius-pill;
+        background-color: var(--bg-core-primary-light);
+        border: 1px solid var(--bg-core-primary-lighten);
+        position: relative;
+        transition: $transition;
+
+        .input-area{
+            flex: 1;
+        }
+
+            /*focus within*/
+            &:focus-within{
+            background-color: var(--bg-core-primary-lighten);
+            background-color: #fff;
+        }
+      }
+}
+
+.form-group-alt.error {
+     
+    label{
+        color: $danger
+    }
+     .input-group-content {   
+        color: var(--text-core);
+        background-color: var(--bg-core-primary-light);
+        border: 1px solid $danger;
+      }
+      input{
+        padding-right:.15rem;
+    }
+}  
+  
+
+  

src/Connected.Components/Styles/components/_master-search.scss

@@ -2,7 +2,7 @@
 @use "../globals" as *;
 
 /*form group-alt*/
-.form-group-alt {
+.form-group-search {
   --height: 2.5rem;
 
   //border: 1px solid var(--bg-core-primary);
@@ -18,26 +18,30 @@
   transition: $transition;
 }
 
+
+
+
 /*INPUT RESET*/
-.form-group-alt input {
+input {
   border: none;
   outline: none;
   background: transparent;
   font-family: inherit;
 }
 
-/* Chrome, Safari, Edge, Opera */
+
-.form-group-alt input::-webkit-outer-spin-button,
+/* Remove Arrows/Spinners Chrome, Safari, Edge, Opera */
-.form-group-alt input::-webkit-inner-spin-button {
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
+/* Remove Arrows/Spinners Firefox */
-/* Firefox */
+input[type="number"] {
-.form-group-alt input[type="number"] {
   -moz-appearance: textfield;
 }
 
+
 /* clears the 'X' in search*/
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
@@ -47,7 +51,7 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 /*focus within*/
-.form-group-alt:focus-within {
+.form-group-search:focus-within {
   background-color: var(--bg-core-primary-lighten);
   background-color: #fff;
 }
@@ -79,14 +83,14 @@ input[type="search"] {
 }
 
 /*SEARCH CONTENT*/
-.form-group-alt .input-group-content {
+.form-group-search .input-group-content {
   height: var(--height);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.form-group-alt .input-leading-icon {
+.form-group-search .input-leading-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -98,7 +102,7 @@ input[type="search"] {
   z-index: 1;
 }
 
-.form-group-alt .input-cta-icon {
+.form-group-search .input-cta-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -119,22 +123,29 @@ input[type="search"] {
 
 .input-cta-icon-more {
   position: absolute;
+  opacity: 1;
   right: -7px;
   top: 50%;
   transform: translateY(-50%);
+  transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
 }
-.form-group-alt .input-area {
+
+.form-group-search .input-cta-icon:hover .input-cta-icon-more{
+  opacity: 0;
+} 
+
+.form-group-search .input-area {
   flex: 1;
 }
 
-.form-group-alt input {
+.form-group-search input {
   &:focus-visible,
   &.focus {
     outline: 0;
   }
 }
 
-.form-group-alt .input-cta-icon:hover {
+.form-group-search .input-cta-icon:hover {
   background-color: var(--bg-core-primary-lighten);
 }