Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes to master-search and inputs

Browse Source
This commit is contained in:
Janko Jordan 2023-03-17 09:08:35 +01:00
parent bfdbc38cbb
commit 5bf098e0f2
4 changed files with 122 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
View File

@ -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>

11
src/Connected.Components/Styles/components/_grid.scss
View File

@ -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 {

62
src/Connected.Components/Styles/components/_inputs.scss
View File

@ -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;
}
}

41
src/Connected.Components/Styles/components/_master-search.scss
View File

@ -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);
}