Add autoprefixer local css config. Add most local css to slider
Javi Velasco
parent
40948c2641
commit
275bf7c4fe
|
|
@ -1,5 +1,4 @@
|
|||
require './style'
|
||||
|
||||
style = require './style'
|
||||
ProgressBar = require "../progress_bar"
|
||||
Input = require "../input"
|
||||
prefixer = require "../prefixer"
|
||||
|
|
@ -136,16 +135,12 @@ module.exports = React.createClass
|
|||
# events. Receives the position to move to
|
||||
move: (position) ->
|
||||
value = @endPositionToValue(position)
|
||||
@setState
|
||||
dragging: true
|
||||
value: value
|
||||
@setState value: value
|
||||
|
||||
# This method is called when a movement was finished
|
||||
end: (events) ->
|
||||
_removeEventsFromDocument(events)
|
||||
@setState
|
||||
dragging: false
|
||||
pressed: false
|
||||
@setState pressed: false
|
||||
|
||||
# Given a position, this method calculates the distance to the start
|
||||
# position stored in the state and gets the corresponding value that is
|
||||
|
|
@ -183,43 +178,55 @@ module.exports = React.createClass
|
|||
|
||||
render: ->
|
||||
knobStyles = prefixer.transform("translateX(#{@calcOffset()}px)")
|
||||
className = @props.className
|
||||
className = "#{@props.className} #{style.slider}"
|
||||
className += " editable" if @props.editable
|
||||
className += " pinned" if @props.pinned
|
||||
className += " pressed" if @state.pressed
|
||||
className += " dragging" if @state.dragging
|
||||
className += " ring" if @state.value == @props.min
|
||||
|
||||
<div data-component-slider className={className} tabIndex="0" ref="slider"
|
||||
<div data-component-slider
|
||||
className={className}
|
||||
tabIndex="0"
|
||||
ref="slider"
|
||||
onFocus={@onSliderFocus}
|
||||
onBlur={@onSliderBlur} >
|
||||
|
||||
<div data-component-slider-container
|
||||
className={style.container}
|
||||
onTouchStart={@onSliderTouchStart}
|
||||
onMouseDown={@onSliderMouseDown} >
|
||||
|
||||
<div data-component-slider-knob
|
||||
className={style.knob}
|
||||
style={knobStyles}
|
||||
onMouseDown={@onMouseDown}
|
||||
onTouchStart={@onTouchStart} >
|
||||
|
||||
<div data-component-slider-knob-inner data-value={parseInt(@state.value)}></div>
|
||||
<div data-component-slider-knob-inner
|
||||
className={style.knobInner}
|
||||
data-value={parseInt(@state.value)}></div>
|
||||
</div>
|
||||
|
||||
<div data-component-slider-progressbar>
|
||||
<ProgressBar className="slider-progressbar-inner" ref="progressbar" mode="determinate" value={@state.value} max={@props.max} min={@props.min}/>
|
||||
<ProgressBar className="slider-progressbar-inner"
|
||||
ref="progressbar"
|
||||
mode="determinate"
|
||||
value={@state.value}
|
||||
max={@props.max}
|
||||
min={@props.min}/>
|
||||
{
|
||||
if @props.snaps
|
||||
<div className="slider-snaps">
|
||||
<div className={style.snaps}>
|
||||
{
|
||||
for i in [1..((@props.max - @props.min) / @props.step)]
|
||||
<div key="span-#{i}" className="slider-snap"></div>
|
||||
<div key="span-#{i}" className={style.snap}></div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ <Input className="slider-input" ref="input" onBlur={@onInputBlur}
|
||||
{ <Input className={style.input} ref="input" onBlur={@onInputBlur}
|
||||
value={@valueForInput(@state.value)} /> if @props.editable }
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,46 +3,142 @@
|
|||
|
||||
RANGE_SIDE_SEPARATION = 20px
|
||||
|
||||
:local(.container)
|
||||
height: 32px
|
||||
margin-right: 32px
|
||||
position: relative
|
||||
user-select: none
|
||||
width: calc(100% - 32px)
|
||||
&:not(:last-child)
|
||||
margin-right: RANGE_SIDE_SEPARATION + 32px
|
||||
&:not(:first-child)
|
||||
margin-left: RANGE_SIDE_SEPARATION
|
||||
|
||||
:local(.knob)
|
||||
align-items: center
|
||||
background-color: transparent
|
||||
display: flex
|
||||
flex-direction: row
|
||||
height: 32px
|
||||
justify-content: center
|
||||
left: 0
|
||||
position: relative
|
||||
top: 0
|
||||
width: 32px
|
||||
z-index: 5
|
||||
|
||||
:local(.knobInner)
|
||||
background-color: SECONDARY
|
||||
border-radius: 50%
|
||||
height: 12px
|
||||
transition-duration: 0.1s
|
||||
transition-property: height, width, background-color, border
|
||||
transition-timing-function: ease
|
||||
width: 12px
|
||||
z-index: 4
|
||||
|
||||
:local(.snaps)
|
||||
display: flex
|
||||
flex-direction: row
|
||||
height: 2px
|
||||
left: 0
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 15px
|
||||
width: calc(100% + 2px)
|
||||
&:after
|
||||
background-color: black
|
||||
border-radius: 50%
|
||||
content: ""
|
||||
display: block
|
||||
height: 2px
|
||||
width: 2px
|
||||
|
||||
:local(.snap)
|
||||
flex: 1
|
||||
&:after
|
||||
background-color: black
|
||||
border-radius: 50%
|
||||
content: ""
|
||||
display: block
|
||||
height: 2px
|
||||
width: 2px
|
||||
|
||||
:local(.input)
|
||||
margin-bottom: 0
|
||||
text-align: center
|
||||
width: 40px
|
||||
|
||||
// Modifier of basic element classes
|
||||
:local(.slider):focus :local(.knob):before
|
||||
background-color: SECONDARY
|
||||
border-radius: 50%
|
||||
bottom: 0
|
||||
content: ""
|
||||
left: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
opacity: .26
|
||||
z-index: 2
|
||||
|
||||
:local(.slider).editable
|
||||
display: flex
|
||||
align-items center
|
||||
flex-direction row
|
||||
|
||||
:local(.slider).pinned :local(.knobInner)
|
||||
&:before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: 0
|
||||
background-color: SECONDARY
|
||||
left: 0
|
||||
width: 26px
|
||||
height: 26px
|
||||
margin-left: 3px
|
||||
border-radius: 50% 50% 50% 0
|
||||
transition-delay: 1s
|
||||
transform: rotate(-45deg) scale(0) translate(0)
|
||||
transition: transform .2s ease, background-color .18s ease
|
||||
|
||||
&:after
|
||||
color: white
|
||||
content: attr(data-value)
|
||||
font-size: 10px
|
||||
height: 26px
|
||||
left: 0
|
||||
position: absolute
|
||||
text-align: center
|
||||
top: 0
|
||||
transform: scale(0) translate(0)
|
||||
transition: transform .2s ease, background-color .18s ease
|
||||
width: 32px
|
||||
|
||||
:local(.slider).pinned.ring :local(.knobInner):before
|
||||
background-color: #c8c8c8
|
||||
|
||||
:local(.slider).pinned.pressed :local(.knobInner)
|
||||
&:before
|
||||
transition-delay: 100ms
|
||||
transform: rotate(-45deg) scale(1) translate(17px, -17px)
|
||||
|
||||
&:after
|
||||
transition-delay: 100ms
|
||||
transform: scale(1) translate(0, -17px)
|
||||
|
||||
:local(.slider).pressed:not(.pinned) :local(.knobInner)
|
||||
height: 100%
|
||||
transform: translateZ(0)
|
||||
width: 100%
|
||||
|
||||
:local(.slider).ring :local(.knobInner)
|
||||
border: 2px solid #c8c8c8
|
||||
background-color: transparent
|
||||
|
||||
// Modifiers for the progress bar (a dependency element -> overrides)
|
||||
[data-component-slider]
|
||||
[data-component-slider-container]
|
||||
height: 32px
|
||||
margin-right: 32px
|
||||
position: relative
|
||||
user-select: none
|
||||
width: calc(100% - 32px)
|
||||
|
||||
// Leave extra space if something is on right or left
|
||||
&:not(:last-child)
|
||||
margin-right: RANGE_SIDE_SEPARATION + 32px
|
||||
|
||||
&:not(:first-child)
|
||||
margin-left: RANGE_SIDE_SEPARATION
|
||||
|
||||
// This is the know style
|
||||
[data-component-slider-knob]
|
||||
display-flex()
|
||||
align-items center
|
||||
background-color: transparent
|
||||
flex-direction row
|
||||
height: 32px
|
||||
justify-content center
|
||||
left: 0
|
||||
position: relative
|
||||
top: 0
|
||||
width: 32px
|
||||
z-index: 5
|
||||
|
||||
[data-component-slider-knob-inner]
|
||||
background-color: SECONDARY
|
||||
border-radius: 50%
|
||||
height: 12px
|
||||
transition-duration 0.1s
|
||||
transition-property height, width, background-color, border
|
||||
transition-timing-function ease
|
||||
width: 12px
|
||||
z-index: 4
|
||||
|
||||
// This is the progress bar
|
||||
[data-component-slider-progressbar]
|
||||
height: 100%
|
||||
left: 16px
|
||||
|
|
@ -58,138 +154,16 @@ RANGE_SIDE_SEPARATION = 20px
|
|||
[data-component-progressbar-value]
|
||||
transition-duration 0s
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// This is the style for the snaps points
|
||||
.slider-snaps
|
||||
display-flex()
|
||||
flex-direction row
|
||||
height: 2px
|
||||
left: 0
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 15px
|
||||
width: calc(100% + 2px)
|
||||
&:after
|
||||
background-color: black
|
||||
border-radius: 50%
|
||||
content: ""
|
||||
display: block
|
||||
height: 2px
|
||||
width: 2px
|
||||
|
||||
.slider-snap
|
||||
flex 1
|
||||
&:after
|
||||
background-color: black
|
||||
border-radius: 50%
|
||||
content: ""
|
||||
display: block
|
||||
height: 2px
|
||||
width: 2px
|
||||
|
||||
// The editable class gives style to hold a numeric input next to the slider that
|
||||
// allows to modify directly the slider value
|
||||
&.editable
|
||||
display-flex()
|
||||
align-items center
|
||||
flex-direction row
|
||||
|
||||
.slider-input
|
||||
margin-bottom: 0
|
||||
text-align: center
|
||||
width: 40px
|
||||
|
||||
// When the pinned class is present, the knob should have a hidden pin that
|
||||
// is shown when is pressed
|
||||
&.pinned
|
||||
[data-component-slider-knob-inner]
|
||||
&:before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: 0
|
||||
background-color: SECONDARY
|
||||
left: 0
|
||||
width: 26px
|
||||
height: 26px
|
||||
margin-left: 3px
|
||||
border-radius: 50% 50% 50% 0
|
||||
transition-delay 1s
|
||||
transform rotate(-45deg) scale(0) translate(0)
|
||||
transition transform .2s ease, background-color .18s ease
|
||||
|
||||
&:after
|
||||
color: white
|
||||
content: attr(data-value)
|
||||
font-size: 10px
|
||||
height: 26px
|
||||
left: 0
|
||||
position: absolute
|
||||
text-align: center
|
||||
top: 0
|
||||
transform: scale(0) translate(0)
|
||||
transition transform .2s ease, background-color .18s ease
|
||||
width: 32px
|
||||
|
||||
&.pressed
|
||||
[data-component-slider-knob-inner]
|
||||
&:before
|
||||
transition-delay 100ms
|
||||
transform rotate(-45deg) scale(1) translate(17px, -17px)
|
||||
|
||||
&:after
|
||||
transition-delay 100ms
|
||||
transform scale(1) translate(0, -17px)
|
||||
|
||||
// Statuses
|
||||
&.pressed:not(.pinned)
|
||||
[data-component-slider-knob]
|
||||
[data-component-slider-knob-inner]
|
||||
width: 100%
|
||||
height: 100%
|
||||
transform translateZ(0)
|
||||
|
||||
&.ring
|
||||
[data-component-slider-container]
|
||||
[data-component-slider-progressbar]
|
||||
left: 30px
|
||||
width: calc(100% - 14px)
|
||||
|
||||
// When there is no value selected this is the modifier class
|
||||
&.ring
|
||||
[data-component-slider-container]
|
||||
[data-component-slider-knob]
|
||||
[data-component-slider-knob-inner]
|
||||
background-color: transparent
|
||||
border: 2px solid #c8c8c8
|
||||
|
||||
[data-component-slider-progressbar]
|
||||
left: 20px
|
||||
transition: left 0.18s ease, width 0.18s ease
|
||||
width: calc(100% - 4px)
|
||||
|
||||
&.pinned
|
||||
[data-component-slider-knob-inner]
|
||||
&:before
|
||||
background-color: #c8c8c8
|
||||
|
||||
// This is just if we want to do something with it
|
||||
&.dragging
|
||||
[data-component-slider-knob]
|
||||
background-color: inherit
|
||||
|
||||
&:focus
|
||||
[data-component-slider-container]
|
||||
[data-component-slider-knob]:before
|
||||
background-color: SECONDARY
|
||||
border-radius: 50%
|
||||
bottom: 0
|
||||
content: ""
|
||||
left: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
opacity: .26
|
||||
z-index: 2
|
||||
|
|
|
|||
|
|
@ -26,10 +26,12 @@
|
|||
"react" : "^0.13.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer-core" : "^5.1.11",
|
||||
"coffee-jsx-loader" : "^0.1.2",
|
||||
"css-loader" : "^0.14.5",
|
||||
"extract-text-webpack-plugin" : "^0.8.1",
|
||||
"node-libs-browser" : "^0.5.2",
|
||||
"postcss-loader" : "^0.4.3",
|
||||
"style-loader" : "^0.12.3",
|
||||
"stylus-loader" : "^1.2.0",
|
||||
"webpack" : "^1.9.10"
|
||||
|
|
|
|||
|
|
@ -38,9 +38,13 @@ module.exports =
|
|||
,
|
||||
test : /\.coffee$/, loader: 'coffee-jsx-loader'
|
||||
,
|
||||
test : /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader!')
|
||||
test : /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader!')
|
||||
]
|
||||
|
||||
postcss: [
|
||||
require('autoprefixer-core')
|
||||
],
|
||||
|
||||
plugins: [
|
||||
new ExtractTextPlugin pkg.name + '.[name].css', allChunks: false
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue