Changes to master-search and inputs
This commit is contained in:
parent
bfdbc38cbb
commit
5bf098e0f2
@ -133,7 +133,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex gap-2 gap-sm-5 items-center">
|
<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">
|
<div class="input-group-content">
|
||||||
<button class="btn btn-icon-alt input-cta-icon mr-1" tabindex="1">
|
<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" />
|
<Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon icon-size-md" />
|
||||||
@ -198,7 +198,7 @@
|
|||||||
<h2>Alerts</h2>
|
<h2>Alerts</h2>
|
||||||
<p>An alert is used to notify the user about an important message without interrupting the ongoing task.</p>
|
<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="wrapper">
|
||||||
|
|
||||||
<div class="alert alert-sm danger"> <!--classes for smaller size (alert-sm) and color(danger, warning, success, info) -->
|
<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>
|
<div class="input-error-text">At least 6 characters required</div>
|
||||||
<span class="input-glyph-wraper">
|
<span class="input-glyph-wraper">
|
||||||
<span class="input-glyph">
|
<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">
|
<span class="input-glyph button">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
||||||
</span>
|
</span>
|
||||||
@ -611,14 +619,25 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="form-group-alt" style="width:50%">
|
<div class="form-group-alt" style="width:50%">
|
||||||
|
<label>Number</label>
|
||||||
|
|
||||||
|
|
||||||
<div class="input-group-content">
|
<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">
|
<div class="input-area">
|
||||||
<form>
|
|
||||||
<input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="1">
|
<input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="1">
|
||||||
</form>
|
|
||||||
</div>
|
</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>
|
||||||
</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)
|
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");
|
$colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
|
||||||
|
|
||||||
@ -323,7 +329,7 @@ $columns: 12;
|
|||||||
.form-outer {
|
.form-outer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
overflow: hidden;
|
overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-step {
|
.form-step {
|
||||||
@ -331,6 +337,9 @@ overflow: hidden;
|
|||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
transition: all 0.5s ease-out;
|
transition: all 0.5s ease-out;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
height: min(calc(100dvh - 245px), 800px);
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-step.next {
|
.form-step.next {
|
||||||
|
@ -20,7 +20,8 @@ form{
|
|||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input:not([type="radio"], [type="radio"], #search),
|
|
||||||
|
.form-group input:not([type="radio"], [type="radio"]),
|
||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
background: none;
|
background: none;
|
||||||
@ -161,6 +162,7 @@ form{
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.input-glyph i,
|
.input-glyph i,
|
||||||
.input-glyph svg {
|
.input-glyph svg {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
@ -194,3 +196,61 @@ form{
|
|||||||
.input-glyph.button.reset {
|
.input-glyph.button.reset {
|
||||||
display:none
|
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 *;
|
@use "../globals" as *;
|
||||||
|
|
||||||
/*form group-alt*/
|
/*form group-alt*/
|
||||||
.form-group-alt {
|
.form-group-search {
|
||||||
--height: 2.5rem;
|
--height: 2.5rem;
|
||||||
|
|
||||||
//border: 1px solid var(--bg-core-primary);
|
//border: 1px solid var(--bg-core-primary);
|
||||||
@ -18,26 +18,30 @@
|
|||||||
transition: $transition;
|
transition: $transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*INPUT RESET*/
|
/*INPUT RESET*/
|
||||||
.form-group-alt input {
|
input {
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-family: inherit;
|
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;
|
-webkit-appearance: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
/* Remove Arrows/Spinners Firefox */
|
||||||
/* Firefox */
|
input[type="number"] {
|
||||||
.form-group-alt input[type="number"] {
|
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* clears the 'X' in search*/
|
/* clears the 'X' in search*/
|
||||||
input[type="search"]::-webkit-search-decoration,
|
input[type="search"]::-webkit-search-decoration,
|
||||||
input[type="search"]::-webkit-search-cancel-button,
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
@ -47,7 +51,7 @@ input[type="search"]::-webkit-search-results-decoration {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*focus within*/
|
/*focus within*/
|
||||||
.form-group-alt:focus-within {
|
.form-group-search:focus-within {
|
||||||
background-color: var(--bg-core-primary-lighten);
|
background-color: var(--bg-core-primary-lighten);
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
@ -79,14 +83,14 @@ input[type="search"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*SEARCH CONTENT*/
|
/*SEARCH CONTENT*/
|
||||||
.form-group-alt .input-group-content {
|
.form-group-search .input-group-content {
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group-alt .input-leading-icon {
|
.form-group-search .input-leading-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -98,7 +102,7 @@ input[type="search"] {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group-alt .input-cta-icon {
|
.form-group-search .input-cta-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -119,22 +123,29 @@ input[type="search"] {
|
|||||||
|
|
||||||
.input-cta-icon-more {
|
.input-cta-icon-more {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
opacity: 1;
|
||||||
right: -7px;
|
right: -7px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-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;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group-alt input {
|
.form-group-search input {
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&.focus {
|
&.focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group-alt .input-cta-icon:hover {
|
.form-group-search .input-cta-icon:hover {
|
||||||
background-color: var(--bg-core-primary-lighten);
|
background-color: var(--bg-core-primary-lighten);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user