Finish styles for slider
Javi Velasco
parent
ad1f0c3bd5
commit
91dd948c54
|
|
@ -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
|
||||
margin-bottom : 0
|
||||
text-align : center
|
||||
width : 40px
|
||||
|
||||
// Modifier of basic element classes
|
||||
: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
|
||||
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%
|
||||
:local(.root).ring :local(.knobInner):before
|
||||
background-color : #c8c8c8
|
||||
|
||||
.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)
|
||||
:local(.root).ring :local(.progress)
|
||||
left : 20px
|
||||
transition : left 0.18s ease, width 0.18s ease
|
||||
width : calc(100% - 4px)
|
||||
|
|
|
|||
Loading…
Reference in New Issue