infrastructure/web-assets
1
4
Fork 3
Code Issues 3 Pull Requests 1 Projects Releases 42 Wiki Activity

WIP: Form components extensions and improvements #94707

Draft
Márton Lente wants to merge 12 commits from component-forms into v2
pull from: component-forms
merge into: infrastructure:v2

When changing the target branch, be careful to rebase the branch in your fork to match. See documentation.
Conversation 4 Commits 12 Files Changed 3 +46 -2
2 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 88441cd556 - Show all commits

30
src/index.html
View File

@ -1774,9 +1774,37 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label>Slider</label> <label>Slider</label>
<div>
<input class="slider-custom" id="slider-custom" min="1" max="100" type="range" value="50"> <input class="slider-custom" id="slider-custom" min="1" max="100" type="range" value="50">
</div> </div>
<div class="col-md-6">
<div class="mb-5">
<label>Slider with step markers (default)</label>
<input class="slider-custom" id="slider-custom" min="1" max="9" type="range" value="5">
<div class="slider-custom-steps">
<div class="slider-custom-steps-item"></div>
<div class="slider-custom-steps-item"></div>
<div class="slider-custom-steps-item"></div>
<div class="slider-custom-steps-item"></div>
<div class="slider-custom-steps-item"></div>
<div class="slider-custom-steps-item"></div>
<div class="slider-custom-steps-item"></div>
<div class="slider-custom-steps-item"></div>
<div class="slider-custom-steps-item"></div>
</div>
</div>
<label>Slider with step markers (dots)</label>
<input class="slider-custom" id="slider-custom" min="1" max="9" type="range" value="5">
<div class="slider-custom-steps">
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
<div class="slider-custom-steps-item slider-custom-steps-item-dots"></div>
</div>
</div> </div>
</div> </div>

16
src/styles/_forms.sass
View File

@ -325,3 +325,19 @@ select
height: var(--spacer) height: var(--spacer)
-webkit-appearance: none -webkit-appearance: none
width: var(--spacer) width: var(--spacer)
.slider-custom-steps
display: flex
justify-content: space-between
padding-left: 1.6rem
padding-right: 1.2rem
.slider-custom-steps-item
background-color: var(--color-text-tertiary)
height: var(--spacer-1)
transform: translateX(-.1rem)
width: .2rem
.slider-custom-steps-item-dots
border-radius: 50%
width: var(--spacer-1)