Skip to content

Commit

Permalink
Finish styles for slider
Browse files Browse the repository at this point in the history
  • Loading branch information
@javivelasco
javivelasco committed Jul 21, 2015
1 parent ad1f0c3 commit 91dd948
Showing 1 changed file with 127 additions and 133 deletions.
260 changes: 127 additions & 133 deletions components/slider/style.styl
View file
Expand Up @@ -3,166 +3,160 @@
RANGE_SIDE_SEPARATION = 20px

:local(.container)
height: 32px
margin-right: 32px
position: relative
user-select: none
width: calc(100% - 32px)
height : 32px
margin-right : 32px
position : relative
user-select : none
width : calc(100% - 32px)
&:not(:last-child)
margin-right: RANGE_SIDE_SEPARATION + 32px
margin-right : RANGE_SIDE_SEPARATION + 32px
&:not(:first-child)
margin-left: RANGE_SIDE_SEPARATION
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
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
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)
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
background-color : black
border-radius : 50%
content : ""
display : block
height : 2px
width : 2px

:local(.snap)
flex: 1
flex : 1
&:after
background-color: black
border-radius: 50%
content: ""
display: block
height: 2px
width: 2px
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
margin-bottom : 0
text-align : center
width : 40px

:local(.progress)
height : 100%
left : 16px
position : absolute
top : 0
width : 100%

:local(.progressInner)
height : 2px
position : absolute
top : 15px
#value
transition-duration : 0s

// When its focused
:local(.root):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
background-color : SECONDARY
border-radius : 50%
bottom : 0
content : ""
left : 0
position : absolute
right : 0
top : 0
opacity : .26
z-index : 2

:local(.root).editable
display: flex
align-items: center
flex-direction: row
display : flex
align-items : center
flex-direction : row

// When its pinned
:local(.root).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
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(.root).ring :local(.knobInner):before
background-color: #c8c8c8

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

// When the knob is pressed
:local(.root).pressed.pinned :local(.knobInner)
&:before
transition-delay: 100ms
transform: rotate(-45deg) scale(1) translate(17px, -17px)
transition-delay : 100ms
transform : rotate(-45deg) scale(1) translate(17px, -17px)

&:after
transition-delay: 100ms
transform: scale(1) translate(0, -17px)
transition-delay : 100ms
transform : scale(1) translate(0, -17px)

:local(.root).pressed:not(.pinned) :local(.knobInner)
height: 100%
transform: translateZ(0)
width: 100%
height : 100%
transform : translateZ(0)
width : 100%

:local(.root).pressed:not(.pinned).ring :local(.progress)
left : 30px
width : calc(100% - 14px)

// When there is no current value
:local(.root).ring :local(.knobInner)
background-color: transparent
border: 2px solid #c8c8c8

// Modifiers for the progress bar (a dependency element -> overrides)
[data-component-slider]
[data-component-slider-container]
[data-component-slider-progressbar]
height: 100%
left: 16px
position: absolute
top: 0
width: 100%

.slider-progressbar-inner
height: 2px
position: absolute
top: 15px

[data-component-progressbar-value]
transition-duration: 0s

&.pressed:not(.pinned)
&.ring
[data-component-slider-container]
[data-component-slider-progressbar]
left: 30px
width: calc(100% - 14px)

&.ring
[data-component-slider-container]
[data-component-slider-progressbar]
left: 20px
transition: left 0.18s ease, width 0.18s ease
width: calc(100% - 4px)
background-color : transparent
border : 2px solid #c8c8c8

:local(.root).ring :local(.knobInner):before
background-color : #c8c8c8

:local(.root).ring :local(.progress)
left : 20px
transition : left 0.18s ease, width 0.18s ease
width : calc(100% - 4px)

0 comments on commit 91dd948

Please sign in to comment.