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

Changes for drop-down in inputsscss

Browse Source
This commit is contained in:
Janko Jordan 2023-03-17 14:00:03 +01:00
parent 5bf098e0f2
commit 54b1c6a9ca
2 changed files with 82 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -537,6 +537,24 @@
<div class="grid grid-col-3 gap-3"> <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"> <div class="form-group error">
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span> <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
<label class="label-animated">Name</label> <label class="label-animated">Name</label>
@ -614,34 +632,7 @@
</span> </span>
</span> </span>
</div> </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"> <div class="form-group">
@ -716,10 +707,31 @@
</span> </span>
</div> </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>
<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-secondary" aria-pressed="true">Cancel</button>
<button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button> <button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
</div> </div>

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

@ -47,7 +47,34 @@ form{
&:focus ~ .bar:before { &:focus ~ .bar:before {
width: $width; 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"] { input[type="password"] {
@ -201,11 +228,8 @@ form{
/*FORM-ALT*/ /*FORM-ALT*/
.form-group-alt { .form-group-alt {
position: relative;
label{ label{
font-size: .85rem; font-size: .85rem;
padding-left: 0.85rem; padding-left: 0.85rem;
@ -228,13 +252,24 @@ form{
.input-area{ .input-area{
flex: 1; flex: 1;
} }
/*focus within*/ /*focus within*/
&:focus-within{ &:focus-within{
background-color: var(--bg-core-primary-lighten); background-color: var(--bg-core-primary-lighten);
background-color: #fff; 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 { .form-group-alt.error {