New style for input=range

examples/kitchen-sink/flexbox.html

@@ -74,7 +74,46 @@
             </nav>
         </footer>
 
-        <article id="layout-art1"></article>
+        <article id="layout-art1" class="padding">
+            <form>
+                <label>text</label>
+                <input type="text"/>
+                <!--
+                <label>text.disabled</label>
+                <input type="text" disabled/>
+                <label>password</label>
+                <input type="password"/>
+
+                <label>textarea</label>
+                <textarea></textarea>
+            -->
+
+
+                <label>Example of select</label>
+                <label class="select">
+                    <select class="custom">
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </label>
+
+
+                <label>Example of progress</label>
+                <div id="progress-normal" data-progress="25%"></div>
+
+                <label>Example of range</label>
+                <input type="range" placeholder="type your name" />
+
+                 <input type="range" min="0" max="1" class="checkbox left" value="0">
+                <input type="range" min="0" max="1" class="checkbox right active" value="1">
+
+                </form>
+                &nbsp;
+                <form>
+                <a href="#" class="button big theme" data-label="Boton Azul" data-icon="check"></a>
+            </form>
+        </article>
         <article id="layout-art2"></article>
         <article id="layout-art3"></article>
         <article id="layout-art4"></article>

src/stylesheets/Lungo.theme.default.less

@@ -21,8 +21,6 @@
     @footer-dark: #23282C;
 @color: #484a49;
 
-@section-radius: 4px;
-
 .app {
     background: #000;
     font-family: "Roboto", Helvetica, Arial, sans-serif;
@@ -35,9 +33,8 @@
 
 /* @group <header> & <footer> & <article> */
 section > header {
-    .linear-gradient(top, ~','@theme, ~','@theme-dark);
-    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)");
-    .border-radius(@section-radius @section-radius 0px 0px);
+    background-color: @theme-dark;
+    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)");
 
     & .title {
         color: #fff;
@@ -51,13 +48,12 @@ section > header {
 }
 
 section > footer {
-    .linear-gradient(top, ~','@footer 0%, ~','@footer-dark 60%);
-    .border-radius(0px 0px @section-radius @section-radius);
+    background-color: @footer-dark;
     .box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05)");
 }
 
 section > nav.groupbar {
-    .linear-gradient(top, ~','@footer-dark 0%, ~','@footer 60%);
+    background-color: @footer;
 }
 
 section > article { background: #f4f5f5; }
@@ -74,7 +70,7 @@ header nav {
     }
 
     &.button a {
-        border-radius: @section-radius;
+        // border-radius: @section-radius;
         .linear-gradient(top, ~','rgba(0,0,0,0.0), ~','rgba(0,0,0,0.1));
         box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0, 0, 0, .5);
         &:active { background: rgba(0,0,0,0.2); }
@@ -217,52 +213,61 @@ a.button {
 /* @group <form> */
 @box-shadow-form: ~'inset 0 1px 2px rgba(0,0,0,0.1)';
 @box-shadow-form-active: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
-
-@border-radius-form: 2px;
+@form-border-radius: 1px;
 label { color: #999; }
 
-input, textarea, select {
+input[type=text],  textarea, select {
     border: 1px solid #ccc;
-    .border-radius(@border-radius-form);
+    .border-radius(@form-border-radius);
+    .box-shadow(@box-shadow-form);
     color: #858585;
     font-family: Helvetica, Arial, sans-serif;
-    .box-shadow(@box-shadow-form);
 
     &:focus {
         color: #484a49;
         border-color: @theme;
-        .box-shadow(0 0 6px @theme-light);
+        .box-shadow(0 0 1px @theme-light);
+    }
+
+    &[disabled] {
+        background: #f00;
     }
 }
 
 .select:after {
     background: #ccc;
     color: white;
-    border-top-right-radius: @border-radius-form;
-    border-bottom-right-radius: @border-radius-form;
+    border-top-right-radius: @form-border-radius;
+    border-bottom-right-radius: @form-border-radius;
 }
 
 
 
 /* @group range */
-
-input[type="range"]:not(.checkbox) {
-    background-color: #c7c7c7;
-    .border-radius(@border-radius-form);
+input[type=range] {
     .box-shadow(@box-shadow-form);
+    .border-radius(@form-border-radius);
 
-    &:active { .box-shadow(none); }
 
-    &::-webkit-slider-thumb {
-        .border-radius(12px);
-        background: #a0a0a0;
+    &:not(.checkbox) {
+        background-color: #c7c7c7;
+        &:active { background-color: @theme-light;  }
     }
-    &:active::-webkit-slider-thumb {
-        .box-shadow(0px 0px 4px @theme-light);
-        .linear-gradient(top, ~','@theme 0%, ~','@theme-dark 100%);
+
+    &.checkbox {
+        background-color: #aaaaaa;
+        color: rgba(255,255,255,0.6);
+        &.active { background-color: @theme-light; }
     }
-}
 
+    &::-webkit-slider-thumb {
+        border-radius: @form-border-radius;
+        box-shadow:0px 1px 2px 1px rgba(0,0,0,0.3);
+        background: #fff; }
+
+    &::-webkit-slider-thumb::after {
+        background: rgb(234,234,234); }
+}
 /* @end */
 
 /* @group .progress */
@@ -275,12 +280,13 @@ input[type="range"]:not(.checkbox) {
     }
 
     & .bar {
+        .box-shadow(@box-shadow-form);
         background: #c7c7c7;
-        .border-radius(@border-radius-form);
+        .border-radius(@form-border-radius);
 
         & .value {
-            .linear-gradient(top, ~','@theme-light 0%, ~','@theme-dark 100%);
-            .border-radius(@border-radius-form);
+            background-color: @theme-light;
+            .border-radius(@form-border-radius);
 
             & .label {
                 float: right;

src/stylesheets/Lungo.widgets.form.less

@@ -9,14 +9,17 @@
 
 @import "constants.less";
 
-@input-height: 29px;
+@form-input-height: 30px;
+@rounded-radius: 2px;
+
 
 form {
+    margin: 3%;
+
     &.wrapper input:not([type=checkbox]), textarea, select {
         margin: 3px 0px 3px 0px;
     }
 
-    @rounded-radius: 2px;
     &.rounded {
         & input:not([type=checkbox]), textarea, select {
             width: 94%;
@@ -29,15 +32,14 @@ form {
 }
 
 label:not(.select) {
-    font-size: 0.9em;
-    line-height: 1.5em;
+    // font-size: 0.9em;
 }
 
 input[type=text], textarea, select {
     display: block;
     width: 96%;
-    padding: 0.5% 2%;
-    height: @input-height;
+    padding: 0 2%;
+    height: @form-input-height;
     font-size: 14px;
     font-weight: bold;
 
@@ -60,7 +62,7 @@ input[type=search] {
         float: right;
         padding: 0px;
         width: 13%;
-        height: @input-height;
+        height: @form-input-height;
         & .icon{
             top: -3px;
             float: none;
@@ -73,7 +75,7 @@ input[type=search] {
 
 select {
     width: 100%;
-    height: @input-height;
+    height: @form-input-height;
 }
 
 label.select {
@@ -88,8 +90,8 @@ label.select {
     top: 0;
     right: 0;
     bottom: 0;
-    height: @input-height;
-    width: @input-height;
+    height: @form-input-height;
+    width: @form-input-height;
 
     content: "▼";
     pointer-events:none;
@@ -100,48 +102,54 @@ label.select {
     content: none;
 }
 /* @end */
+input[type=range] {
+    -webkit-appearance: none;
+    outline: none;
 
+    &:not(.checkbox) {
+        height: 12px;
+        width: 100%;
+        padding: 0px;
+        margin: 8px 0 12px 0;
+        border: 0;
+        cursor: ew-resize;
 
-input[type=range].checkbox {
-    -webkit-appearance: none;
-    background: #aaaaaa;
-    color: rgba(255,255,255,0.6);
-    width:70px;
-    height:30px;
-    padding:1px 2px 1px 2px;
-    border-radius:4px;
-    box-shadow:0px 0px 4px 0px #555 inset, 0px 1px 5px 0px #555 inset;
-    font-family:'lungojsicon';
-
-    &:after {
-        content: "\0055";
-        position: relative;
-        float: right;
-        top: -23px;
-        padding: 0 8px;
-        font-size: 1.5em;
+        &::-webkit-slider-thumb {
+            top: -1px;
+        }
     }
 
-    &.active {
-        background: rgba(102, 186, 40, 1);
+    &.checkbox {
+        background: #aaaaaa;
+        width:70px;
+
+        height: 30px;
+        padding: 1px 2px;
+        font-family:'lungojsicon';
+
         &:after {
+            content: "\0055";
+            position: relative;
+            float: right;
+            top: -23px;
+            padding: 0 8px;
+            font-size: 1.5em; }
+
+        &.active:after {
             float: left;
             content: "\0051";
-            font-weight: bold;
-        }
+            font-weight: bold; }
     }
 
     &::-webkit-slider-thumb {
         -webkit-appearance: none;
-        background-color: #444;
         width: 30px;
         height: 24px;
-        border-radius:3px;
+        border-radius: 2px;
         position:relative;
         margin:2px 2px 2px 2px;
-        box-shadow:0px 1px 2px 1px #666;
-        background: rgb(255,255,255);
-    }
+        border: none; }
+
     &::-webkit-slider-thumb::after {
       width:13px;
       height:13px;
@@ -151,36 +159,12 @@ input[type=range].checkbox {
       border-radius:7.5px;
       z-index:9;
       top:5px;
-      left:9px;
-        background: rgb(234,234,234);
-    }
-
-
+      left:9px; }
 }
 
 
-/* @group range */
-input[type="range"]:not(.checkbox) {
-    -webkit-appearance: none;
-    height: 15px;
-    width: 100%;
-    outline: none;
-    position: relative;
-    padding: 0px;
-    margin: 0px;
-    border: 0;
-    cursor: ew-resize;
-
-    &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        position: relative;
-        z-index: 1;
 
-        top:-1px;
-        width: 24px;
-        height: 24px;
-    }
-}
+/* @group range */
 /* @end */
 
 /* @group progress */
@@ -195,8 +179,8 @@ input[type="range"]:not(.checkbox) {
     }
 
     & .bar {
-        height:  15px;
-        line-height: 15px;
+        height:  12px;
+        line-height: 12px;
         display: block;
 
         & .value {

src/stylesheets/css/Lungo.theme.default.css

@@ -24,20 +24,10 @@ a.theme:active {
 }
 /* @group <header> & <footer> & <article> */
 section > header {
-  background-image: -webkit-linear-gradient(top , #2a95d3 , #1984c2);
-  background-image: -moz-linear-gradient(top , #2a95d3 , #1984c2);
-  background-image: -ms-linear-gradient(top , #2a95d3 , #1984c2);
-  background-image: -o-linear-gradient(top , #2a95d3 , #1984c2);
-  background-image: linear-gradient(top , #2a95d3 , #1984c2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
-  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
-  -webkit-border-radius: 4px 4px 0px 0px;
-  -moz-border-radius: 4px 4px 0px 0px;
-  border-radius: 4px 4px 0px 0px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
+  background-color: #1984c2;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
 }
 section > header .title {
   color: #fff;
@@ -48,27 +38,13 @@ section > header .subtitle {
   opacity: 0.7;
 }
 section > footer {
-  background-image: -webkit-linear-gradient(top , #292f34 0% , #23282c 60%);
-  background-image: -moz-linear-gradient(top , #292f34 0% , #23282c 60%);
-  background-image: -ms-linear-gradient(top , #292f34 0% , #23282c 60%);
-  background-image: -o-linear-gradient(top , #292f34 0% , #23282c 60%);
-  background-image: linear-gradient(top , #292f34 0% , #23282c 60%);
-  -webkit-border-radius: 0px 0px 4px 4px;
-  -moz-border-radius: 0px 0px 4px 4px;
-  border-radius: 0px 0px 4px 4px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
+  background-color: #23282c;
   -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
   -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
   box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
 }
 section > nav.groupbar {
-  background-image: -webkit-linear-gradient(top , #23282c 0% , #292f34 60%);
-  background-image: -moz-linear-gradient(top , #23282c 0% , #292f34 60%);
-  background-image: -ms-linear-gradient(top , #23282c 0% , #292f34 60%);
-  background-image: -o-linear-gradient(top , #23282c 0% , #292f34 60%);
-  background-image: linear-gradient(top , #23282c 0% , #292f34 60%);
+  background-color: #292f34;
 }
 section > article {
   background: #f4f5f5;
@@ -92,7 +68,6 @@ header nav.box a:active {
   background: rgba(0, 0, 0, 0.1);
 }
 header nav.button a {
-  border-radius: 4px;
   background-image: -webkit-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
   background-image: -moz-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
   background-image: -ms-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
@@ -274,73 +249,74 @@ a.button:active {
 label {
   color: #999;
 }
-input,
+input[type=text],
 textarea,
 select {
   border: 1px solid #ccc;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  color: #858585;
-  font-family: Helvetica, Arial, sans-serif;
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  color: #858585;
+  font-family: Helvetica, Arial, sans-serif;
 }
-input:focus,
+input[type=text]:focus,
 textarea:focus,
 select:focus {
   color: #484a49;
   border-color: #2a95d3;
-  -webkit-box-shadow: 0 0 6px #39abe1;
-  -moz-box-shadow: 0 0 6px #39abe1;
-  box-shadow: 0 0 6px #39abe1;
+  -webkit-box-shadow: 0 0 1px #39abe1;
+  -moz-box-shadow: 0 0 1px #39abe1;
+  box-shadow: 0 0 1px #39abe1;
+}
+input[type=text][disabled],
+textarea[disabled],
+select[disabled] {
+  background: #f00;
 }
 .select:after {
   background: #ccc;
   color: white;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
 }
 /* @group range */
-input[type="range"]:not(.checkbox) {
-  background-color: #c7c7c7;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
+input[type=range] {
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-}
-input[type="range"]:not(.checkbox):active {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-input[type="range"]:not(.checkbox)::-webkit-slider-thumb {
-  -webkit-border-radius: 12px;
-  -moz-border-radius: 12px;
-  border-radius: 12px;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  background: #a0a0a0;
-}
-input[type="range"]:not(.checkbox):active::-webkit-slider-thumb {
-  -webkit-box-shadow: 0px 0px 4px #39abe1;
-  -moz-box-shadow: 0px 0px 4px #39abe1;
-  box-shadow: 0px 0px 4px #39abe1;
-  background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+}
+input[type=range]:not(.checkbox) {
+  background-color: #c7c7c7;
+}
+input[type=range]:not(.checkbox):active {
+  background-color: #39abe1;
+}
+input[type=range].checkbox {
+  background-color: #aaaaaa;
+  color: rgba(255, 255, 255, 0.6);
+}
+input[type=range].checkbox.active {
+  background-color: #39abe1;
+}
+input[type=range]::-webkit-slider-thumb {
+  border-radius: 1px;
+  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
+  background: #fff;
+}
+input[type=range]::-webkit-slider-thumb::after {
+  background: #eaeaea;
 }
 /* @end */
 /* @group .progress */
@@ -351,23 +327,22 @@ input[type="range"]:not(.checkbox):active::-webkit-slider-thumb {
   color: #858585;
 }
 .progress .bar {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   background: #c7c7c7;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
 }
 .progress .bar .value {
-  background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
-  background-image: -moz-linear-gradient(top , #39abe1 0% , #1984c2 100%);
-  background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
-  background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
-  background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
+  background-color: #39abe1;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;

src/stylesheets/css/Lungo.widgets.form.css

@@ -8,6 +8,9 @@
  */
 /* DIMENSIONS */
 /* COLORS */
+form {
+  margin: 3%;
+}
 form.wrapper input:not([type=checkbox]),
 form textarea,
 form select {
@@ -39,17 +42,13 @@ form.rounded select:last-of-type {
   -moz-background-clip: padding;
   background-clip: padding-box;
 }
-label:not(.select) {
-  font-size: 0.9em;
-  line-height: 1.5em;
-}
 input[type=text],
 textarea,
 select {
   display: block;
   width: 96%;
-  padding: 0.5% 2%;
-  height: 29px;
+  padding: 0 2%;
+  height: 30px;
   font-size: 14px;
   font-weight: bold;
   -webkit-appearance: none;
@@ -69,7 +68,7 @@ input[type=search]  + .button {
   float: right;
   padding: 0px;
   width: 13%;
-  height: 29px;
+  height: 30px;
 }
 input[type=search]  + .button .icon {
   top: -3px;
@@ -79,7 +78,7 @@ input[type=search]  + .button .icon {
 /* @group select */
 select {
   width: 100%;
-  height: 29px;
+  height: 30px;
 }
 label.select {
   position: relative;
@@ -92,8 +91,8 @@ label.select {
   top: 0;
   right: 0;
   bottom: 0;
-  height: 29px;
-  width: 29px;
+  height: 30px;
+  width: 30px;
   content: "▼";
   pointer-events: none;
   line-height: 31px;
@@ -102,15 +101,26 @@ label.select {
   content: none;
 }
 /* @end */
-input[type=range].checkbox {
+input[type=range] {
   -webkit-appearance: none;
+  outline: none;
+}
+input[type=range]:not(.checkbox) {
+  height: 12px;
+  width: 100%;
+  padding: 0px;
+  margin: 8px 0 12px 0;
+  border: 0;
+  cursor: ew-resize;
+}
+input[type=range]:not(.checkbox)::-webkit-slider-thumb {
+  top: -1px;
+}
+input[type=range].checkbox {
   background: #aaaaaa;
-  color: rgba(255, 255, 255, 0.6);
   width: 70px;
   height: 30px;
-  padding: 1px 2px 1px 2px;
-  border-radius: 4px;
-  box-shadow: 0px 0px 4px 0px #555 inset, 0px 1px 5px 0px #555 inset;
+  padding: 1px 2px;
   font-family: 'lungojsicon';
 }
 input[type=range].checkbox:after {
@@ -121,26 +131,21 @@ input[type=range].checkbox:after {
   padding: 0 8px;
   font-size: 1.5em;
 }
-input[type=range].checkbox.active {
-  background: #66ba28;
-}
 input[type=range].checkbox.active:after {
   float: left;
   content: "\0051";
   font-weight: bold;
 }
-input[type=range].checkbox::-webkit-slider-thumb {
+input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
-  background-color: #444;
   width: 30px;
   height: 24px;
-  border-radius: 3px;
+  border-radius: 2px;
   position: relative;
   margin: 2px 2px 2px 2px;
-  box-shadow: 0px 1px 2px 1px #666;
-  background: #ffffff;
+  border: none;
 }
-input[type=range].checkbox::-webkit-slider-thumb::after {
+input[type=range]::-webkit-slider-thumb::after {
   width: 13px;
   height: 13px;
   display: block;
@@ -150,28 +155,8 @@ input[type=range].checkbox::-webkit-slider-thumb::after {
   z-index: 9;
   top: 5px;
   left: 9px;
-  background: #eaeaea;
 }
 /* @group range */
-input[type="range"]:not(.checkbox) {
-  -webkit-appearance: none;
-  height: 15px;
-  width: 100%;
-  outline: none;
-  position: relative;
-  padding: 0px;
-  margin: 0px;
-  border: 0;
-  cursor: ew-resize;
-}
-input[type="range"]:not(.checkbox)::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  position: relative;
-  z-index: 1;
-  top: -1px;
-  width: 24px;
-  height: 24px;
-}
 /* @end */
 /* @group progress */
 .progress {
@@ -186,8 +171,8 @@ input[type="range"]:not(.checkbox)::-webkit-slider-thumb {
   float: right;
 }
 .progress .bar {
-  height: 15px;
-  line-height: 15px;
+  height: 12px;
+  line-height: 12px;
   display: block;
 }
 .progress .bar .value {