quasar 2.3.1 → 2.4.0

package/src/components/slider/QSlider.sass

@@ -1,225 +1,291 @@
 .q-slider
   position: relative
-  color: var(--q-primary)
-  outline: 0
 
   &--h
     width: 100%
-    height: 40px
   &--v
-    width: 40px
     height: 200px
 
+  &--editable .q-slider__track-container
+    cursor: grab
+
   &__track-container
-    background: rgba(0,0,0,.26)
+    outline: 0
 
     &--h
-      top: 50%
-      margin-top: -1px
       width: 100%
-      height: 2px
+      padding: 12px 0
+      .q-slider__selection
+        will-change: width, left
     &--v
-      left: 50%
-      margin-left: -1px
       height: 100%
-      width: 2px
+      padding: 0 12px
+      .q-slider__selection
+        will-change: height, top
 
   &__track
+    color: var(--q-primary)
+    background: rgba(0,0,0,.1)
+    border-radius: $generic-border-radius
+    width: inherit
+    height: inherit
+
+  &__inner
+    background: rgba(0,0,0,.1)
+    border-radius: inherit
+    width: 100%
+    height: 100%
+
+  &__selection
     background: currentColor
+    border-radius: inherit
+    width: 100%
+    height: 100%
+
+  &__markers
+    color: rgba(0,0,0,.3)
+    border-radius: inherit
+    width: 100%
+    height: 100%
+
+    &:after
+      content: ''
+      position: absolute
+      background: currentColor
 
     &--h
-      will-change: width, left
-      top: 0
-      bottom: 0
+      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &:after
+        height: 100%
+        width: 2px
+        top: 0
+        right: 0
+
     &--v
-      will-change: height, top
-      left: 0
-      right: 0
+      background-image: repeating-linear-gradient(to bottom, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &:after
+        width: 100%
+        height: 2px
+        left: 0
+        bottom: 0
+
+  &__marker-labels-container
+    position: relative
+    width: 100%
+    height: 100%
+    min-height: 24px
+    min-width: 24px
 
-  &__track-markers
-    color: #000
+  &__marker-labels
+    position: absolute
 
     &--h
-      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &-standard
+        top: 0
+      &-switched
+        bottom: 0
+
+      &-ltr
+        transform: translateX(-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: translateX(50%) #{"/* rtl:ignore */"}
+
     &--v
-      background-image: repeating-linear-gradient(to top, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &-standard
+        left: 4px
+      &-switched
+        right: 4px
 
-    &:after
-      content: ''
-      position: absolute
-      right: 0
-      top: 0
-      bottom: 0
-      height: 2px
-      width: 2px
-      background: currentColor
+      &-ltr
+        transform: translateY(-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: translateY(50%) #{"/* rtl:ignore */"}
 
-  &__thumb-container
-    width: 20px
-    height: 20px
+  &__thumb
+    z-index: 1
     outline: 0
+    color: var(--q-primary)
+    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
 
     &--h
       top: 50%
-      margin-top: -10px
-      transform: translateX(-10px) #{"/* rtl:ignore */"}
       will-change: left
+      &-ltr
+        transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: scale(1) translate(50%,-50%) #{"/* rtl:ignore */"}
+
     &--v
-      left: 50%
-      margin-left: -10px
-      transform: translateY(-10px)
+      left: 50% #{"/* rtl:ignore */"}
       will-change: top
+      &-ltr
+        transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: scale(1) translate(-50%,50%) #{"/* rtl:ignore */"}
 
-  &__thumb
+  &__thumb-shape
     top: 0
     left: 0
-    transform: scale(1)
-    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
     stroke-width: 3.5
     stroke: currentColor
+    transition: transform .28s
 
     path
       stroke: currentColor
       fill: currentColor
 
   &__focus-ring
-    width: 20px
-    height: 20px
-    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
     border-radius: 50%
     opacity: 0
+    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
     transition-delay: .14s
 
-  &__arrow
-    position: absolute
-    width: 0
-    height: 0
-    transform-origin: 50% 50%
-    transition: transform 100ms ease-out
+  &__pin
+    opacity: 0
+    white-space: nowrap
+    transition: opacity .28s ease-out
+    transition-delay: .14s
+
+    &:before
+      content: ''
+      width: 0
+      height: 0
+      position: absolute
 
     &--h
-      top: 19px
-      left: 4px
-      border-top: 6px solid currentColor
-      border-left: 6px solid transparent
-      border-right: 6px solid transparent
-      transform: scale(0) translateY(0)
-    &--v
-      top: 4px
-      left: 15px
-      border-top: 6px solid transparent
-      border-bottom: 6px solid transparent
-      border-right: 6px solid currentColor
-      transform: scale(0) translateX(-20px)
+      &:before
+        border-left: 6px solid transparent
+        border-right: 6px solid transparent
+        left: 50%
+        transform: translateX(-50%)
+      &-standard
+        bottom: 100%
+        &:before
+          bottom: 2px
+          border-top: 6px solid currentColor
+      &-switched
+        top: 100%
+        &:before
+          top: 2px
+          border-bottom: 6px solid currentColor
 
-  &__pin
-    transition: transform 100ms ease-out
+    &--v
+      top: 0
+      &:before
+        top: 50%
+        transform: translateY(-50%)
+        border-top: 6px solid transparent
+        border-bottom: 6px solid transparent
+      &-standard
+        left: 100%
+        &:before
+          left: 2px
+          border-right: 6px solid currentColor
+      &-switched
+        right: 100%
+        &:before
+          right: 2px
+          border-left: 6px solid currentColor
+
+  &__label
     z-index: 1
     white-space: nowrap
+    position: absolute
 
     &--h
-      bottom: 0
-      right: 0
-      transform: scale(0) translateY(0)
-      will-change: left
+      left: 50%
+      transform: translateX(-50%)
+      &-standard
+        bottom: 7px
+      &-switched
+        top: 7px
+
     &--v
       top: 50%
-      left: 20px
-      height: 0
-      transform: scale(0) translateX(-20px)
-      will-change: top
-      transform-origin: left center
-
-    &-text-container
-      min-height: 25px
-      padding: 2px 8px
-      border-radius: $generic-border-radius
-      background: currentColor
-      position: relative
-      text-align: center
-
-      &--h
-        right: -50%
-      &--v
-        transform: translateY(-50%)
+      transform: translateY(-50%)
+      &-standard
+        left: 7px
+      &-switched
+        right: 7px
+
+  &__text-container
+    min-height: 25px
+    padding: 2px 8px
+    border-radius: $generic-border-radius
+    background: currentColor
+    position: relative
+    text-align: center
 
-    &-text
-      color: #fff
-      font-size: 12px
-
-  &--editable
-    cursor: grab
+  &__text
+    color: #fff
+    font-size: 12px
 
   &--no-value
-    .q-slider__thumb, .q-slider__track
+    .q-slider__thumb,
+    .q-slider__inner,
+    .q-slider__selection
       visibility: hidden
 
   &--focus
     .q-slider__thumb
       transform: scale(1)
 
-  &--focus, body.desktop &.q-slider--editable:hover
+  &--focus,
+  body.desktop &.q-slider--editable .q-slider__track-container:hover
     .q-slider__focus-ring
       background: currentColor
       transform: scale3d(1.55, 1.55, 1)
       opacity: .25
-    .q-slider__thumb, .q-slider__track
+    .q-slider__thumb,
+    .q-slider__inner,
+    .q-slider__selection
       visibility: visible
 
   &--inactive
-    .q-slider__thumb-container
+    .q-slider__thumb
       &--h
         transition: left .28s, right .28s
       &--v
         transition: top .28s, bottom .28s
 
-    .q-slider__track
-      &--h
-        transition: width .28s, left .28s, right .28s
-      &--v
-        transition: height .28s, top .28s, bottom .28s
+    .q-slider__selection
+      transition: width .28s, left .28s, right .28s, height .28s, top .28s, bottom .28s
+
+    .q-slider__text-container
+      transition: transform .28s
 
   &--active
     cursor: grabbing
 
-    .q-slider__thumb
+    .q-slider__thumb-shape
       transform: scale(1.5)
 
-    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
+    .q-slider__focus-ring,
+    &.q-slider--label .q-slider__thumb-shape
       transform: scale(0) !important
 
-  body.desktop &.q-slider--enabled:hover
-    .q-slider__pin,
-    .q-slider__arrow
-      &--h
-        transform: scale(1) translateY(-25px)
-      &--v
-        transform: scale(1) translateX(5px)
+  body.desktop &.q-slider--enabled .q-slider__track-container:hover
+    .q-slider__pin
+      opacity: 1
 
   &--label
-    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
-      .q-slider__pin,
-      .q-slider__arrow
-        &--h
-          transform: scale(1) translateY(-25px)
-        &--v
-          transform: scale(1) translateX(5px)
+    &.q-slider--active,
+    .q-slider--focus,
+    &.q-slider--label-always
+      .q-slider__pin
+        opacity: 1
 
   &--dark
-    .q-slider__track-container
-      background: rgba(#fff, .3)
-    .q-slider__track-markers
-      color: #fff
+    .q-slider__track
+      background: rgba(#fff,.1)
+    .q-slider__inner
+      background: rgba(#fff,.1)
+    .q-slider__markers
+      color: rgba(#fff,.3)
 
-  &--reversed
-    .q-slider__thumb-container
+  &--dense
+    .q-slider__track-container
       &--h
-        transform: translateX(10px) #{"/* rtl:ignore */"}
+        padding: 6px 0
       &--v
-        transform: translateY(10px)
-
-  &--dense
-    &--h
-      height: 20px
-    &--v
-      width: 20px
+        padding: 0 6px