Polishing styles (#35245)

* setting up slider

* removing spaces

* added slider.html to test.configs

* changed dates to 2021

* example story

* formatting

* css

* slider

* minor changes

* resolve merge

* formatting & styling

* formatting and removing unnecessary code

* centering and pointer

* minor formatting changes

* addressed pr comments

* removing unnecessary code in css

* adding bubble

* adding gradient and working on bubble

* updating compared to previous pr

* working on bubble

* bubble

* post state and clean up

* formatting and testing

* first pr changes and fixing bubble

* removing whitespace from css

* css index

* changes from review

* changed line height in bubble

* circle check

* css and testing

* tests and bubble

* css white space

* removing sides

* change bubble and slider math

* reverting code

* overall beginning

* tests and review

* whitespaces

* css index

* reviews: minor css changes

* css index

* css index

* bubble changes

* thumb border

* dark theme

extensions/amp-story-interactive/0.1/amp-story-interactive-slider.css

@@ -16,7 +16,9 @@
 
 .i-amphtml-story-interactive-slider-container {
   --percentage: 0%;
-  --thumb-size: 1.5em;
+  /* This maps the range and has the gradient follow behind the thumb */
+  --percentage-corrected: calc(2.5% + 0.95 * var(--percentage)) !important;
+  --thumb-size: 1.5em !important;
 }
 
 .i-amphtml-story-interactive-slider-input-container {
@@ -26,7 +28,6 @@
   box-shadow: var(--i-amphtml-interactive-component-shadow) !important;
   align-items: center !important;
   justify-content: center !important;
-  height: 3em !important;
   padding: 0em 1em !important;
 }
 
@@ -41,11 +42,11 @@
   line-height: 2.9em !important;
   font-weight: 700 !important;
   color: white !important;
-  z-index: 1;
+  z-index: 1 !important;
 }
 
-.i-amphtml-story-interactive-slider-bubble.show {
-  transform: translate(-50%, -155%) scale(1) !important;
+.i-amphtml-story-interactive-mid-selection .i-amphtml-story-interactive-slider-bubble {
+  transform: translate(-50%, -160%) scale(1) !important;
 }
 
 .i-amphtml-story-interactive-slider-bubble::after {
@@ -63,12 +64,12 @@
 }
 
 .i-amphtml-story-interactive-post-selection .i-amphtml-story-interactive-slider-bubble {
-  transform: translate(-50%, -50%) scale(0.8) !important;
+  transform: translate(-50%, -50%) scale(0.9) !important;
 }
 
 .i-amphtml-story-interactive-post-selection .i-amphtml-story-interactive-slider-bubble::after {
   cursor: initial !important;
-  border: 0.125em solid white !important;
+  border: 0.1em solid var(--i-amphtml-interactive-option-background-color) !important;
   border-bottom-right-radius: 50% !important;
 }
 
@@ -78,12 +79,9 @@
   height: 1em !important;
   width: calc(100% + var(--thumb-size)) !important;
   margin: 0em calc(var(--thumb-size) * -0.5) !important;
-  /* This maps the range and has the gradient follow behind the thumb */
-  --percentage-corrected: calc(2.5% + 0.95 * var(--percentage)) !important;
   background: linear-gradient(
     90deg,
-    #b28fff 0%,
-    #783bfe var(--percentage-corrected),
+    var(--interactive-accent-color) var(--percentage-corrected),
     transparent var(--percentage-corrected)
   ) !important;
   border-radius: 0.5em !important;
@@ -100,14 +98,17 @@
 }
 
 .i-amphtml-story-interactive-slider-input::before {
-  background: var(--interactive-accent-color) !important;
+  background: linear-gradient(
+    90deg,
+    white,
+    var(--interactive-accent-color) var(--percentage-corrected)
+  ) !important;
   content: '' !important;
-  opacity: 0.3 !important;
+  opacity: 0.5 !important;
   width: 100% !important;
   height: 100% !important;
   border-radius: 0.5em !important;
   position: absolute !important;
-  z-index: 1 !important;
 }
 
 .i-amphtml-story-interactive-slider-input::-webkit-slider-thumb {
@@ -116,6 +117,15 @@
   height: var(--thumb-size) !important;
   background: var(--interactive-accent-color) !important;
   border-radius: 50% !important;
+  position: relative !important;
+}
+
+.i-amphtml-story-interactive-mid-selection .i-amphtml-story-interactive-slider-input::-webkit-slider-thumb {
+  transform: rotate(45deg) !important;
+  box-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.25),
+    0em 0em 0em 0.07em var(--i-amphtml-interactive-option-background-color) !important;
+  border-top-left-radius: 0% !important;
+  z-index: 2 !important;
 }
 
 .i-amphtml-story-interactive-slider-input[disabled] {

extensions/amp-story-interactive/0.1/amp-story-interactive-slider.js

@@ -99,7 +99,7 @@ export class AmpStoryInteractiveSlider extends AmpStoryInteractive {
   onDrag_() {
     const {value} = this.inputEl_;
     this.bubbleEl_.textContent = value + '%';
-    this.bubbleEl_.classList.add('show');
+    this.rootEl_.classList.add('i-amphtml-story-interactive-mid-selection');
     setImportantStyles(this.rootEl_, {'--percentage': value + '%'});
   }
 
@@ -109,6 +109,6 @@ export class AmpStoryInteractiveSlider extends AmpStoryInteractive {
   onRelease_() {
     this.updateToPostSelectionState_();
     this.inputEl_.setAttribute('disabled', '');
-    this.bubbleEl_.classList.remove('show');
+    this.rootEl_.classList.remove('i-amphtml-story-interactive-mid-selection');
   }
 }

extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-slider.js

@@ -127,12 +127,11 @@ describes.realWin(
       const slider = ampStorySlider
         .getRootElement()
         .querySelector('input[type="range"]');
-      const sliderBubble = ampStorySlider
-        .getRootElement()
-        .querySelector('.i-amphtml-story-interactive-slider-bubble');
       // simulates an input event, which is when the user drags the slider
       slider.dispatchEvent(new CustomEvent('input'));
-      expect(sliderBubble).to.have.class('show');
+      expect(ampStorySlider.getRootElement()).to.have.class(
+        'i-amphtml-story-interactive-mid-selection'
+      );
     });
 
     it('should show post-selection state when the user releases the slider', async () => {