From f5c102ea1173672095b03a82fbc0b2bcc17a3438 Mon Sep 17 00:00:00 2001
From: bbe <benjamin.bernard-bouissieres@ipexia.com>
Date: Tue, 11 Aug 2020 10:51:16 +0200
Subject: [PATCH 1/3] Add paper style for input[type=range]

(cherry picked from commit 28d49a3d0e5c66ffc33253c1407f68131236555f)
---
 src/components/_forms.scss | 98 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 95 insertions(+), 3 deletions(-)

diff --git a/src/components/_forms.scss b/src/components/_forms.scss
index 758377a..59d85fb 100644
--- a/src/components/_forms.scss
+++ b/src/components/_forms.scss
@@ -140,7 +140,7 @@ select {
     float: left;
     margin: 0 10px 0 0;
     position: relative;
-    
+
     input {
       height: 0;
       opacity: 0;
@@ -284,7 +284,7 @@ select {
 
     input {
       display: none;
-      
+
       &:checked + .paper-switch-tile-card {
         transform: rotateX(180deg);
       }
@@ -301,7 +301,7 @@ select {
     transform-style: preserve-3d;
     transition: all 600ms;
     width: 100%;
-    
+
     div {
       backface-visibility: hidden;
       box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.3);
@@ -318,6 +318,98 @@ select {
 
   }
 
+  input[type='range'] {
+    appearance: none;
+
+    &:focus {
+      border-color: $secondary;
+    }
+
+    /* For Chromium */
+    &::-webkit-slider-runnable-track {
+      background: $secondary;
+      border: 1px solid $primary;
+      border-radius: 18px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 8px;
+      margin: 10px 0;
+      width: 100%;
+    }
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      background: #fff;
+      border: 1px solid $primary;
+      border-bottom-left-radius: 0.7rem 1rem;
+      border-bottom-right-radius: 1rem 0.9rem;
+      border-top-left-radius: 1rem 1rem;
+      border-top-right-radius: 1rem 0.6rem;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 36px;
+      margin-top: -14px;
+      width: 16px;
+    }
+
+    /* For Mozilla Firefox */
+    &::-moz-range-track {
+      background: $secondary;
+      border: 1px solid $primary;
+      border-radius: 18px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 8px;
+      width: 100%;
+    }
+
+    &::-moz-range-thumb {
+      background: #fff;
+      border: 1px solid $primary;
+      border-bottom-left-radius: 0.7rem 1rem;
+      border-bottom-right-radius: 1rem 0.9rem;
+      border-top-left-radius: 1rem 1rem;
+      border-top-right-radius: 1rem 0.6rem;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 36px;
+      width: 16px;
+    }
+
+    /* For IE */
+    &::-ms-track {
+      background: transparent;
+      border-color: transparent;
+      border-width: 16px 0;
+      color: transparent;
+      cursor: pointer;
+      height: 8px;
+      width: 100%;
+    }
+
+    &::-ms-fill-lower,
+    &::-ms-fill-upper {
+      background: $secondary;
+      border: 1px solid $primary;
+      border-radius: 18px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+    }
+
+    &::-ms-thumb {
+      background: #fff;
+      border: 1px solid $primary;
+      border-bottom-left-radius: 0.7rem 1rem;
+      border-bottom-right-radius: 1rem 0.9rem;
+      border-top-left-radius: 1rem 1rem;
+      border-top-right-radius: 1rem 0.6rem;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 36px;
+      width: 16px;
+    }
+
+  }
+
 }
 
 fieldset.form-group {

From b4be7ae2d289b98bff4d909b1267458308b772da Mon Sep 17 00:00:00 2001
From: bbe <benjamin.bernard-bouissieres@ipexia.com>
Date: Tue, 11 Aug 2020 11:32:11 +0200
Subject: [PATCH 2/3] Add examples in documentation forms.md

---
 docs/content/docs/components/forms.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/docs/content/docs/components/forms.md b/docs/content/docs/components/forms.md
index dc14505..cb113b3 100644
--- a/docs/content/docs/components/forms.md
+++ b/docs/content/docs/components/forms.md
@@ -163,6 +163,15 @@ description: PaperCSS Forms
     </div>
   </label>
 </fieldset>
+<fieldset class="form-group">
+  <label for="input-range">Note /10 :</label>
+  <input type="range" name="note" id="input-range" min="0" max="10">
+</fieldset>
+<fieldset class="form-group">
+  <label for="percentage">Percentage (<code>.input-block</code>) :</label>
+  <input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
+  <output id="output" for="percentage">50%</output>
+</fieldset>
 
 #### Code:
 
@@ -322,4 +331,14 @@ description: PaperCSS Forms
     </div>
   </label>
 </fieldset>
+<fieldset class="form-group">
+  <label for="input-range">Note /10 :</label>
+  <input type="range" name="note" id="input-range" min="0" max="10">
+</fieldset>
+<fieldset class="form-group">
+  <label for="percentage">Percentage (<code>.input-block</code>) :</label>
+  <input class="input-block" type="range" name="percentage" id="percentage"
+         min="0" max="100" oninput="output.value = this.value + '%';">
+  <output id="output" for="percentage">50%</output>
+</fieldset>
 ```

From 71835734fdbfc79b6355c0c67e7fd2d068ac526b Mon Sep 17 00:00:00 2001
From: bbe <benjamin.bernard-bouissieres@ipexia.com>
Date: Mon, 17 Aug 2020 12:28:11 +0200
Subject: [PATCH 3/3] Remove range input border

---
 docs/content/docs/components/forms.md | 9 +++------
 src/components/_forms.scss            | 5 +----
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/docs/content/docs/components/forms.md b/docs/content/docs/components/forms.md
index cb113b3..e063205 100644
--- a/docs/content/docs/components/forms.md
+++ b/docs/content/docs/components/forms.md
@@ -164,10 +164,9 @@ description: PaperCSS Forms
   </label>
 </fieldset>
 <fieldset class="form-group">
+  <legend>Sliders</legend>
   <label for="input-range">Note /10 :</label>
   <input type="range" name="note" id="input-range" min="0" max="10">
-</fieldset>
-<fieldset class="form-group">
   <label for="percentage">Percentage (<code>.input-block</code>) :</label>
   <input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
   <output id="output" for="percentage">50%</output>
@@ -332,13 +331,11 @@ description: PaperCSS Forms
   </label>
 </fieldset>
 <fieldset class="form-group">
+  <legend>Sliders</legend>
   <label for="input-range">Note /10 :</label>
   <input type="range" name="note" id="input-range" min="0" max="10">
-</fieldset>
-<fieldset class="form-group">
   <label for="percentage">Percentage (<code>.input-block</code>) :</label>
-  <input class="input-block" type="range" name="percentage" id="percentage"
-         min="0" max="100" oninput="output.value = this.value + '%';">
+  <input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
   <output id="output" for="percentage">50%</output>
 </fieldset>
 ```
diff --git a/src/components/_forms.scss b/src/components/_forms.scss
index 59d85fb..2f987e5 100644
--- a/src/components/_forms.scss
+++ b/src/components/_forms.scss
@@ -320,10 +320,7 @@ select {
 
   input[type='range'] {
     appearance: none;
-
-    &:focus {
-      border-color: $secondary;
-    }
+    border-width: 0;
 
     /* For Chromium */
     &::-webkit-slider-runnable-track {