Add Slider bars code

picturepan2 · Mar 29, 2017 · 136b112 · 136b112
1 parent afb6282
commit 136b112
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 37 deletions.
diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css
@@ -451,8 +451,8 @@
   background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
 .parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
-  -webkit-transform: translate3d(-.4rem, -.4rem, 10rem);
-  transform: translate3d(-.4rem, -.4rem, 10rem);
+  -webkit-transform: translate3d(-.65rem, -.65rem, 10rem);
+  transform: translate3d(-.65rem, -.65rem, 10rem);
 }
 .parallax .parallax-top-right {
   height: 50%;
@@ -470,8 +470,8 @@
   background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
 .parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
-  -webkit-transform: translate3d(.4rem, -.4rem, 10rem);
-  transform: translate3d(.4rem, -.4rem, 10rem);
+  -webkit-transform: translate3d(.65rem, -.65rem, 10rem);
+  transform: translate3d(.65rem, -.65rem, 10rem);
 }
 .parallax .parallax-bottom-left {
   bottom: 0;
@@ -489,8 +489,8 @@
   background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
-  -webkit-transform: translate3d(-.4rem, .4rem, 10rem);
-  transform: translate3d(-.4rem, .4rem, 10rem);
+  -webkit-transform: translate3d(-.65rem, .65rem, 10rem);
+  transform: translate3d(-.65rem, .65rem, 10rem);
 }
 .parallax .parallax-bottom-right {
   bottom: 0;
@@ -508,8 +508,8 @@
   background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
-  -webkit-transform: translate3d(.4rem, .4rem, 10rem);
-  transform: translate3d(.4rem, .4rem, 10rem);
+  -webkit-transform: translate3d(.65rem, .65rem, 10rem);
+  transform: translate3d(.65rem, .65rem, 10rem);
 }
 .progress {
   -webkit-appearance: none;
@@ -574,7 +574,7 @@
   border: 0;
   border-radius: 50%;
   height: 1.2rem;
-  margin-top: -.4rem;
+  margin-top: -.5rem;
   transition: transform .2s ease, -webkit-transform .2s ease;
   transition: transform .2s ease;
   transition: -webkit-transform .2s ease;
@@ -631,19 +631,19 @@
 .slider::-webkit-slider-runnable-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-moz-range-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-ms-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-ms-fill-lower {

diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css
diff --git a/dist/spectre.css b/dist/spectre.css
@@ -1907,6 +1907,42 @@ code {
   -webkit-flex-shrink: 1;
   flex-shrink: 1;
 }
+.bar-slider {
+  height: .2rem;
+  margin: 1rem 0;
+  position: relative;
+}
+.bar-slider .bar-item {
+  left: 0;
+  padding: 0;
+  position: absolute;
+}
+.bar-slider .bar-item:not(:last-child):first-child {
+  background: #f0f1f4;
+  z-index: 1;
+}
+.bar-slider .bar-slider-btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: #5764c6;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  height: 1.2rem;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  -webkit-transform: translate(50%, -50%);
+  -ms-transform: translate(50%, -50%);
+  transform: translate(50%, -50%);
+  transition: all .2s ease;
+  width: 1.2rem;
+}
+.bar-slider .bar-slider-btn:active {
+  box-shadow: 0 0 0 .2rem #5764c6;
+}
 .card {
   background: #fff;
   border: .1rem solid #f0f1f4;

diff --git a/dist/spectre.min.css b/dist/spectre.min.css
diff --git a/docs/components.html b/docs/components.html
@@ -399,7 +399,7 @@
           </div>
           <section class="notes">
             <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p>
-            <p>There is a class <code>bar-sm</code> for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p>
+            <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p>
           </section>
 
 <!-- bars example -->
@@ -411,6 +411,51 @@
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;25%&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;25%&lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;background:#818bd5;&quot;</span>&gt;15%&lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+          <header class="text-center"><h4>Slider bars</h4></header>
+          <div class="columns">
+            <div class="column col-8 col-xs-12">
+              <div class="bar bar-slider">
+                <div class="bar-item" role="progressbar" style="width:50%;">
+                  <button class="bar-slider-btn tooltip" data-tooltip="50%" role="slider"></button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="columns">
+            <div class="column col-8 col-xs-12">
+              <div class="bar bar-slider">
+                <div class="bar-item" role="progressbar" style="width:15%;">
+                  <button class="bar-slider-btn tooltip" data-tooltip="25%" role="slider"></button>
+                </div>
+                <div class="bar-item" role="progressbar" style="width:65%;">
+                  <button class="bar-slider-btn tooltip" data-tooltip="65%" role="slider"></button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <section class="notes">
+            <p>You can add the <code>bar-slider</code> class to the Bars container. And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. You need to set the <code>bar-item</code> width manually to have the slider point.</p>
+            <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p>
+          </section>
+
+<!-- slider bars example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;
+    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;&quot;</span>&gt;
+    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:65%;&quot;</span>&gt;
+    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
 </code></pre>
 
         </section>

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
@@ -451,8 +451,8 @@
   background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
 .parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
-  -webkit-transform: translate3d(-.4rem, -.4rem, 10rem);
-  transform: translate3d(-.4rem, -.4rem, 10rem);
+  -webkit-transform: translate3d(-.65rem, -.65rem, 10rem);
+  transform: translate3d(-.65rem, -.65rem, 10rem);
 }
 .parallax .parallax-top-right {
   height: 50%;
@@ -470,8 +470,8 @@
   background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
 .parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
-  -webkit-transform: translate3d(.4rem, -.4rem, 10rem);
-  transform: translate3d(.4rem, -.4rem, 10rem);
+  -webkit-transform: translate3d(.65rem, -.65rem, 10rem);
+  transform: translate3d(.65rem, -.65rem, 10rem);
 }
 .parallax .parallax-bottom-left {
   bottom: 0;
@@ -489,8 +489,8 @@
   background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
-  -webkit-transform: translate3d(-.4rem, .4rem, 10rem);
-  transform: translate3d(-.4rem, .4rem, 10rem);
+  -webkit-transform: translate3d(-.65rem, .65rem, 10rem);
+  transform: translate3d(-.65rem, .65rem, 10rem);
 }
 .parallax .parallax-bottom-right {
   bottom: 0;
@@ -508,8 +508,8 @@
   background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
-  -webkit-transform: translate3d(.4rem, .4rem, 10rem);
-  transform: translate3d(.4rem, .4rem, 10rem);
+  -webkit-transform: translate3d(.65rem, .65rem, 10rem);
+  transform: translate3d(.65rem, .65rem, 10rem);
 }
 .progress {
   -webkit-appearance: none;
@@ -574,7 +574,7 @@
   border: 0;
   border-radius: 50%;
   height: 1.2rem;
-  margin-top: -.4rem;
+  margin-top: -.5rem;
   transition: transform .2s ease, -webkit-transform .2s ease;
   transition: transform .2s ease;
   transition: -webkit-transform .2s ease;
@@ -631,19 +631,19 @@
 .slider::-webkit-slider-runnable-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-moz-range-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-ms-track {
   background: #f0f1f4;
   border-radius: .2rem;
-  height: .4rem;
+  height: .2rem;
   width: 100%;
 }
 .slider::-ms-fill-lower {