Skip to content

UI: Range Slider per #108 (with passing tests) #181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jescalan merged 1 commit into from
May 13, 2015
Merged

UI: Range Slider per #108 (with passing tests) #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 95 additions & 1 deletion axis/ui.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ radio(color=#0074d9)
background: rgba(#000,.15)
border: 0.125em solid #fff
border-radius: 1em
box-shadow: 0 0 0 .1em rgba(#000, .25)
box-shadow: 0 0 0 .1em rgba(#000, .25)
content: ''
display: inline-block
height: 1em
Expand All @@ -348,3 +348,97 @@ radio(color=#0074d9)
&:checked + span:before, &:focus + span:before
background: color
box-shadow: 0 0 0 0.25em rgba(#000, .15)

// Mixin: Range
//
// A clean, cross-browser styling reset for range inputs.
// Note: range inputs are not supported in IE9 and below.
// http://caniuse.com/#feat=input-range
//
// ex. range()
// ex. range: tomato 200px 15px 9px #333

range(color=#0074d9, trackWidth=100%, thumbSize=2em, trackHeight=.5em, trackColor=rgba(#000, .1))
-webkit-appearance: none
width: trackWidth
margin: 0
outline: none
background: transparent

&::-webkit-slider-runnable-track
background: trackColor
border: none
border-radius: trackHeight
height: trackHeight
width: trackWidth

&::-webkit-slider-thumb
-webkit-appearance: none
border: none
height: thumbSize
width: thumbSize
border-radius: 50%
background: color
margin-top: "calc(-%s / 2 + %s / 2)" % (thumbSize trackHeight)
transition: all 0.2s ease

&:hover
transform: scale(1.2)
cursor: pointer

&:active
background: darken(color, 15%)

&:focus
outline: none

&:focus::-webkit-slider-runnable-track
background: trackColor

&::-moz-range-track
width: trackWidth
height: trackHeight
background: trackColor
border: none
border-radius: trackHeight

&::-moz-range-thumb
border: none
height: thumbSize
width: thumbSize
border-radius: 50%
background: color
transition: all 0.2s ease

&:hover
transform: scale(1.2)

&:active
background: darken(color, 15%)

&::-moz-focus-outer
border: 0

&::-ms-track
height: trackHeight
width: trackWidth
background: transparent
border-width: "calc(%s / 2 + %s / 2)" % (thumbSize trackHeight) 0
color: transparent;

&::-ms-fill-lower, &::-ms-fill-upper, &:focus::-ms-fill-lower, &:focus::-ms-fill-upper
background: trackColor
border-radius: 10px

&::-ms-thumb
border: none
height: 2em
width: 2em
border-radius: 50%
background: color

&:active
background: darken(color, 15%)

&::-ms-tooltip
display: none
104 changes: 104 additions & 0 deletions test/fixtures/ui/range.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
.range {
-webkit-appearance: none;
width: 100%;
margin: 0;
outline: none;
background: transparent;
}
.range::-webkit-slider-runnable-track {
background: rgba(0,0,0,0.1);
border: none;
border-radius: 0.5em;
height: 0.5em;
width: 100%;
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 2em;
width: 2em;
border-radius: 50%;
background: #0074d9;
margin-top: calc(-2em / 2 + 0.5em / 2);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.range::-webkit-slider-thumb:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
cursor: pointer;
}
.range::-webkit-slider-thumb:active {
background: #0063b8;
}
.range:focus {
outline: none;
}
.range:focus::-webkit-slider-runnable-track {
background: rgba(0,0,0,0.1);
}
.range::-moz-range-track {
width: 100%;
height: 0.5em;
background: rgba(0,0,0,0.1);
border: none;
border-radius: 0.5em;
}
.range::-moz-range-thumb {
border: none;
height: 2em;
width: 2em;
border-radius: 50%;
background: #0074d9;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.range::-moz-range-thumb:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.range::-moz-range-thumb:active {
background: #0063b8;
}
.range::-moz-focus-outer {
border: 0;
}
.range::-ms-track {
height: 0.5em;
width: 100%;
background: transparent;
border-width: calc(2em / 2 + 0.5em / 2) 0;
color: transparent;
}
.range::-ms-fill-lower,
.range::-ms-fill-upper,
.range:focus::-ms-fill-lower,
.range:focus::-ms-fill-upper {
background: rgba(0,0,0,0.1);
border-radius: 10px;
}
.range::-ms-thumb {
border: none;
height: 2em;
width: 2em;
border-radius: 50%;
background: #0074d9;
}
.range::-ms-thumb:active {
background: #0063b8;
}
.range::-ms-tooltip {
display: none;
}
2 changes: 2 additions & 0 deletions test/fixtures/ui/range.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.range
range()
3 changes: 3 additions & 0 deletions test/test.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,9 @@ describe 'ui', ->
it 'radio', (done) ->
compile_and_match(path.join(@path, 'radio.styl'), done)

it 'range', (done) ->
compile_and_match(path.join(@path, 'range.styl'), done)

describe 'utilities', ->

before -> @path = path.join(test_path, 'utilities')
Expand Down
5 changes: 5 additions & 0 deletions test/visual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
<link rel='stylesheet' href='fixtures/ui/navigation.css' >
<link rel='stylesheet' href='fixtures/ui/notice.css' >
<link rel='stylesheet' href='fixtures/ui/radio.css' >
<link rel='stylesheet' href='fixtures/ui/range.css' >

<!-- utilities -->
<link rel='stylesheet' href='fixtures/utilities/b.css' >
Expand Down Expand Up @@ -348,6 +349,10 @@ <h1>test</h1>
</label>
</fieldset>
</div>
<div>
<p>Range slider:</p>
<input type="range" class="range"/>
</div>

</section>

Expand Down