Changes in scaffold stylesheet

examples/test/index.html

@@ -82,52 +82,6 @@
             </nav>
         </footer>
         -->
-        <article id="nav-2" class="list indented scroll">
-            <ul class="form">
-                <li data-loading="black big"></li>
-                <li id="loading-code" style="background-color: grey;"></li>
-                <li class="padding">
-                    <label>type="text"</label>
-                    <input type="text" placeholder="Input text"/>
-                    <textarea placeholder="Textarea sample"></textarea>
-                    <label class="select">
-                        <select class="custom">
-                            <option value="1">One</option>
-                            <option value="2">Two</option>
-                            <option value="3">Three</option>
-                        </select>
-                    </label>
-                </li>
-                <li class="padding">
-                    <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
-                    <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
-                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
-                </li>
-                <li  class="padding">
-                    <label class="-pop">Do you like LungoJS forms?</label>
-                    <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
-                </li>
-
-                <li class="padding">
-                    <div id="progress-normal" data-progress="25%"></div>
-                    <div id="progress-big" data-progress="50%" class="big"></div>
-                    <label>type="range"</label>
-                    <input type="range">
-                </li>
-            </ul>
-            <ul>
-                <li class="tip theme">Examples of tips</li>
-                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-
-                <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-
-
-                <li class="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</li>
-            </ul>
-        </article>
-
         <article id="nav-1" class="lisst">
             <div id = "prueba" class="box middle list  " style="background: url(http://placehold.it/320x200);">
             </div>
@@ -188,6 +142,54 @@
 
         </article>
 
+        <article id="nav-2" class="list indented scroll">
+            <ul class="form">
+                <li data-loading="black big"></li>
+                <li id="loading-code" style="background-color: grey;"></li>
+                <li class="padding">
+                    <label>type="text"</label>
+                    <input type="text" placeholder="Input text"/>
+                    <textarea placeholder="Textarea sample"></textarea>
+                    <label class="select">
+                        <select class="custom">
+                            <option value="1">One</option>
+                            <option value="2">Two</option>
+                            <option value="3">Three</option>
+                        </select>
+                    </label>
+                </li>
+                <li class="padding">
+                    <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
+                </li>
+                <li  class="padding">
+                    <label class="-pop">Do you like LungoJS forms?</label>
+                    <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
+                </li>
+
+                <li class="padding">
+                    <div id="progress-normal" data-progress="25%"></div>
+                    <div id="progress-big" data-progress="50%" class="big"></div>
+                    <label>type="range"</label>
+                    <input type="range">
+                </li>
+            </ul>
+            <ul>
+                <li class="tip theme">Examples of tips</li>
+                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+
+                <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+
+
+                <li class="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</li>
+            </ul>
+        </article>
+
+
+
         <article id="nav-4" class="list scroll">
             <ul>
                 <li>

src/stylesheets/Lungo.theme.scaffold.less

@@ -93,10 +93,10 @@ header nav {
     //.box-shadow(~"inset 0 1px 8px rgba(0,0,0,0.3)");
 
     & a {
-        color: @theme-light;
+        color: @theme;
         &.current {
             color:  @white;
-            border-bottom: solid 3px @color-border;
+            border-bottom: solid 3px @white;
         }
     }
 }
@@ -161,33 +161,36 @@ section.aside {
         background: #fff;
     }
     & li {
-        //background: #fff;
-        border-bottom: 1px inset #f8f8f8;
+        border-bottom: 1px inset @theme-light;
         &:last-child { border-bottom: none; }
 
         &.selectable:active {
             background: @theme-light;
             color: @theme-dark;
 
-            & small, & .onright:not(.bubble) {
+            & small, & .onright:not(.bubble), & strong {
                 color: @white;
                 text-shadow: none;
             }
         }
 
-        & small, & .onright:not(.bubble) { color: #888; }
+        & small, & .onright:not(.bubble) {
+            color: @theme;
+        }
 
         & strong {
-            color: #134c81;
+            color: @theme-dark;
         }
     }
 
     &.indented li {
+        /*
         border-left: solid 1px #e1e1e1;
         border-right: solid 1px #e1e1e1;
 
         &:first-child { border-top: solid 1px #e1e1e1; }
         &:last-child { border-bottom: solid 1px  #e1e1e1; }
+        */
     }
 
     & .anchor {
@@ -237,12 +240,18 @@ section.aside {
 }
 
 &.indented {
-    & ul { .border-radius(3px); }
+    & ul {
+        //.border-radius(3px);
+        border: 1px solid @theme;
+
+            .box-shadow(0 1px 1px rgba(0,0,0,0.05));
+    }
     & li {
-        &:first-child { .border-radius(3px 3px 0px 0px); }
+        &:first-child {
+            //.border-radius(3px 3px 0px 0px);
+        }
         &:last-child {
-            .border-radius(0px 0px 3px 3px);
-            .box-shadow(0 1px 1px rgba(0,0,0,0.05));
+            //.border-radius(0px 0px 3px 3px);
         }
     }
 }

src/stylesheets/Lungo.widgets.form.less

@@ -206,9 +206,9 @@ input[type="range"] {
         position: relative;
         z-index: 1;
 
+        top:-1px;
         width: 24px;
         height: 24px;
-        border-radius: 12px;
     }
 }
 /* @end */

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

@@ -20,7 +20,7 @@ input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";
 input[type="checkbox"]+span::after,input[type="radio"]+span::after{text-indent:0;width:41px;height:27px;text-align:center;}
 input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;}
 input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{height:27px;}
-input[type="range"]{-webkit-appearance:none;height:15px;width:100%;outline:none;position:relative;padding:0px;margin:0px;border:0;cursor:ew-resize;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;z-index:1;width:24px;height:24px;border-radius:12px;}
+input[type="range"]{-webkit-appearance:none;height:15px;width:100%;outline:none;position:relative;padding:0px;margin:0px;border:0;cursor:ew-resize;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;z-index:1;top:-1px;width:24px;height:24px;}
 .progress{width:100%;margin-bottom:8px;}.progress .labels{display:block;}.progress .labels span:last-child{float:right;}
 .progress .bar{height:15px;line-height:16px;display:block;}.progress .bar .value{display:block;height:inherit;width:0%;-webkit-transition:width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);}
 .big .progress .bar{height:29px;line-height:30px;}