Changes to master-search and inputs
This commit is contained in:
parent
bfdbc38cbb
commit
5bf098e0f2
@ -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>
|
||||
|
||||
|
@ -21,7 +21,13 @@ $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");
|
||||
|
||||
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -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,
|
||||
.form-group-alt input::-webkit-inner-spin-button {
|
||||
|
||||
/* Remove Arrows/Spinners Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.form-group-alt input[type="number"] {
|
||||
/* Remove Arrows/Spinners Firefox */
|
||||
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);
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user