Work on refactoring measurements out of Lesion Tracker package

- Removed AssociatedStudies Collection - Measurement API is generated from configuration files - Data exchange methods are defined in configuration
2016-11-15 08:21:46 +01:00
1 parent c511edd419
commit ab4d4c9008
@@ -0,0 +1,115 @@
+@import "{design}/app"
+
+$imageSliderBorderRadius = 57px
+$imageSliderTrackColor = rgba(0,0,0,0)
+$imageSliderBorder = none
+
+// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
+$imageSliderWidth = 12px
+$imageSliderHeight = 39px
+$imageSliderCursor = grab
+
+.imageControls
+  position: absolute
+  top: 0
+  right: 0
+  height: 100%
+  padding: 5px
+
+  #scrollbar
+    height: calc(100% - 20px);
+    margin-top: 5px
+    width: 31px
+
+    #imageSlider
+      position: absolute
+      left: 20px
+
+      vendorize(transform, rotate(90deg))
+      vendorize(transform-origin, top left)
+
+      -webkit-appearance: none
+      background-color: $imageSliderTrackColor
+
+      // Remove focus highlights on range input
+      &:focus
+        outline: none
+        vendorize(box-shadow, none)
+
+      // Remove focus border in Firefox
+      &::-moz-focus-outer
+        border: none
+
+      // --- Style the range track --- //
+      &::-webkit-slider-runnable-track
+        height: 5px
+        border: none
+        cursor: pointer
+        background-color: $imageSliderTrackColor
+        z-index: 6
+
+      &::-moz-range-track
+        height: 2px
+        border: none
+        cursor: pointer
+        background-color: $imageSliderTrackColor
+        z-index: 6
+
+      &::-ms-track
+        width: 100%
+        height: 2px
+        border: none
+        cursor: pointer
+        animate: 0.2s
+        background: transparent
+        border-width: 15px 0
+        color: $imageSliderTrackColor
+
+      // Hide any fill IE tries to add
+      &::-ms-fill-lower
+        background: $imageSliderTrackColor
+
+      &::-ms-fill-upper
+        background: $imageSliderTrackColor
+
+      // --- Style the range thumb --- //
+      &::-webkit-slider-thumb
+        -webkit-appearance: none !important
+        theme('background-color', '$imageSliderColor')
+        border-radius: $imageSliderBorderRadius
+        border: $imageSliderBorder
+        height: $imageSliderWidth
+        width: $imageSliderHeight
+        cursor: $imageSliderCursor
+        margin-top: -7px
+
+        &:active
+          theme('background-color', '$activeColor')
+
+      &::-moz-range-thumb
+        theme('background-color', '$imageSliderColor')
+        border-radius: $imageSliderBorderRadius
+        border: $imageSliderBorder
+        height: $imageSliderWidth
+        width: $imageSliderHeight
+        cursor: $imageSliderCursor
+        z-index: 7
+
+        &:active
+          theme('background-color', '$activeColor')
+
+      &::-ms-thumb
+        theme('background-color', '$imageSliderColor')
+        border-radius: $imageSliderBorderRadius
+        border: $imageSliderBorder
+        height: $imageSliderWidth
+        width: $imageSliderHeight
+        cursor: $imageSliderCursor
+
+        &:active
+          theme('background-color', '$activeColor')
+
+// Set left position in IE, border-width attribute breaks left position of imageSlider
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
+  #imageSlider
+    left: 50px