Sākums Izpētīt Palīdzība
Pierakstīties
pwa
/
Lungo.js
spogulis no https://github.com/tapquo/Lungo.js.git
2
0
Atdalīts 0
Faili Problēmas 0 Vikivietne
Pārlūkot izejas kodu

Enhaced form elements

@soyjavi 14 gadi atpakaļ
vecāks
71b0fe4d4a
revīzija
b29e793433
17 mainītis faili ar 234 papildinājumiem un 224 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 1 0
      examples/test/app/events.js
  2. 9 5
      examples/test/app/sections/aside-profiles.html
  3. 2 3
      examples/test/app/sections/aside.html
  4. 47 49
      examples/test/index.html
  5. 22 31
      src/stylesheets/Lungo.layout.article.less
  6. 6 0
      src/stylesheets/Lungo.layout.aside.less
  7. 2 2
      src/stylesheets/Lungo.layout.list.less
  8. 49 44
      src/stylesheets/Lungo.theme.default.less
  9. 5 16
      src/stylesheets/Lungo.widgets.form.less
  10. 3 1
      src/stylesheets/Lungo.widgets.less
  11. 14 1
      src/stylesheets/css/Lungo.base.css
  12. 1 1
      src/stylesheets/css/Lungo.layout.article.css
  13. 1 0
      src/stylesheets/css/Lungo.layout.aside.css
  14. 1 1
      src/stylesheets/css/Lungo.layout.list.css
  15. 43 68
      src/stylesheets/css/Lungo.theme.default.css
  16. 1 1
      src/stylesheets/css/Lungo.widgets.css
  17. 27 1
      src/stylesheets/css/Lungo.widgets.form.css

+ 1 - 0
examples/test/app/events.js
Parādīt failu 

@@ -1,6 +1,7 @@
 
 App.Events = (function(lng, undefined) {
 
 
     lng.ready(function() {
 
+        //lng.View.Aside.toggle('.onright');
 
 
         setTimeout(function() {

+ 9 - 5
examples/test/app/sections/aside-profiles.html
Parādīt failu 

@@ -1,4 +1,4 @@
 
-<aside id="profiles" class="scroll onright">
 
+<aside id="profiles" class=" onright">
 
     <div>
 
         <header data-title="Favorites">
 
             <nav class="plain onright">
 
@@ -6,8 +6,8 @@
 
             </nav>
 
         </header>
 
 
-        <div class="list scroll" style="height: 128px;">
 
-            <ul>
 
+        <article class="list scroll current" >
 
+            <ul >
 
                 <li class="thumb">
 
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/1.jpg">
 
                         <strong>Name of friend</strong>
 
@@ -16,6 +16,7 @@
 
                 </li>
 
                 <li class="thumb">
 
                     <a href="#nav-2" data-target="article" data-image="assets/images/avatars/2.jpg">
 
+                        <span class="onright bubble">123</span>
 
                         <strong>Name of friend</strong>
 
                         <small>Extra info: mail / phone</small>
 
                     </a>
 
@@ -75,8 +76,11 @@
 
                     </a>
 
                 </li>
 
             </ul>
 
-        </div>
 
-        <footer>prueba</footer>
 
+        </article>
 
+<!--
 
+        <footer >
 
+
 
+        </footer> -->
 
 
     </div>
 
 </aside>

+ 2 - 3
examples/test/app/sections/aside.html
Parādīt failu 

@@ -1,8 +1,7 @@
 
 <aside id="kitchen-sink-scroll" class="small scroll onleft">
 
     <nav>
 
         <a href="#nav-1" data-target="article" class="current" data-icon="clock"></a>
 
-       <a href="#nav-2" data-target="article" data-icon="check"  data-count="14"></a>
 
-       <a href="#test-2" data-target="section" data-icon="wifi"></a>
 
-
 
+        <a href="#nav-2" data-target="article" data-icon="check" data-count="14"></a>
 
+        <a href="#test-2" data-target="section" data-icon="wifi"></a>
 
     </nav>
 
 </aside>

+ 47 - 49
examples/test/index.html
Parādīt failu 

@@ -42,7 +42,7 @@
 
 
 <body class="app">
 
     <section id="test-1" class="pop">
 
-        <header class="-extended">
 
+        <header class="extended">
 
             <nav class="onleft">
 
                 <a href="#kitchen-sink-scroll" data-target="aside" data-icon="user"></a>
 
                 <a href="#kitchen-sink-scroll" data-article="nav-2" data-target="aside" data-icon="heart" data-count="8"></a>
 
@@ -56,12 +56,11 @@
 
             </nav>
 
         </header>
 
 
-        <!--
 
+
 
         <nav class="groupbar">
 
             <a href="#nav-1" data-target="article" class="current"  data-icon="clock">&nbsp;Lists</a>
 
             <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Form</a>
 
         </nav>
 
-        -->
 
 
 
         <footer class="toolbar with-labels">
 
@@ -83,11 +82,54 @@
 
             </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 scroll ">
 
-                <img src="http://placehold.it/320x200">
 
+            <div id = "prueba" class="box middle list  " style="background: url(http://placehold.it/320x200);">
 
             </div>
 
 
             <div class="box quarter grey">
 
@@ -199,51 +241,7 @@
 
 
 
 
-        <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>
 
-                    <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>
 
-                    <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>
 
-                    <label class="-pop">Do you like LungoJS forms?</label>
 
-                    <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
 
-                </li>
 
-
 
-                <li>
 
-                    <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-3" class="list indented">

+ 22 - 31
src/stylesheets/Lungo.layout.article.less
Parādīt failu 

@@ -28,12 +28,6 @@ article {
 
         z-index: 1;
 
     }
 
 
-    & .title {
 
-        font-size: 1.1em;
 
-        margin: 0px 0 4px;
 
-        & .icon { margin-right: 4px; }
 
-    }
 
-
 
     & .text {
 
         margin: 4px 0 8px;
 
         display: block;
 
@@ -43,22 +37,19 @@ article {
 
     }
 
 
     & .box {
 
-        .box-shadow( 0 1px 0 #e0e0e0);
 
-        
-        
-        
+		.box-shadow( 0 1px 0 #e0e0e0);
 
         &.grey {
 
-			color: #636363 !important;
 
-			text-shadow:  0 1px 0 #fff;
 
-			background: #efefef;
 
-			line-height: 1.5em;
 
-			
-			& .icon, & a {
 
-				color: #636363;
 
-			}
 
-			& .icon { 
-				font-size:  1.25em;
 
-			}
 
+            color: #636363 !important;
 
+            text-shadow:  0 1px 0 #fff;
 
+            background: #efefef;
 
+            line-height: 1.5em;
 
+
 
+            & .icon, & a {
 
+                color: #636363;
 
+            }
 
+            & .icon {
 
+                font-size:  1.25em;
 
+            }
 
         }
 
 
         &.quarter {
 
@@ -74,16 +65,16 @@ article {
 
             height: 66.7%;
 
         }
 
     }
 
-    
-    & .col {       
-    	float:  left;
 
-    	display: inline-block;
 
-    	height:  100%;
 
-    	font-size:  0.85em;
 
-            
-    	&:not(last-child) {
 
-			.box-shadow(inset 1px 0 0 #e0e0e0);
 
-		}
 
+
 
+    & .col {
 
+        float:  left;
 
+        display: inline-block;
 
+        height:  100%;
 
+        font-size:  0.85em;
 
+
 
+        &:not(last-child) {
 
+            .box-shadow(inset 1px 0 0 #e0e0e0);
 
+        }
 
         &.quarter {
 
             width: 25%;
 
         }

+ 6 - 0
src/stylesheets/Lungo.layout.aside.less
Parādīt failu 

@@ -33,11 +33,17 @@ aside {
 
     &.onright { right: 0px; }
 
     &.current { visibility: visible;}
 
 
+
 
     & header, & footer {
 
         position: relative;
 
         left: none;
 
     }
 
 
+    & footer {
 
+        position: absolute;
 
+        bottom: 0;
 
+    }
 
+
 
     &.small {
 
         width: @aside-width-small;

+ 2 - 2
src/stylesheets/Lungo.layout.list.less
Parādīt failu 

@@ -53,8 +53,8 @@
 
 
         &.thumb img {
 
            margin: -8px 8px -8px -8px;
 
-           height: 47px;
 
-           width:47px;
 
+           height: 46px;
 
+           width:46px;
 
         }
 
     }

+ 49 - 44
src/stylesheets/Lungo.theme.default.less
Parādīt failu 

@@ -60,12 +60,9 @@ section > footer {
 
     .border-radius(0px 0px @border-radius-section @border-radius-section);
 
 }
 
 
-article {
 
-    background-color: #EBEBEB;
 
-    & .title {
 
-        color: #797979;
 
-        text-shadow: 0px 1px 0px #fff;
 
-    }
 
+article { 
+	background: #efefef; 
+	//background: red;
 
 }
 
 /* @end */
 
 
@@ -116,39 +113,44 @@ header nav {
 
 /* @end */
 
 
 /* @group <aside> */
 
-
 
+a {
 
+	//background-color: #333;
 
+}
 
 aside {
 
     color:  #fff;
 
-    background: #323d4c;
 
+    background: #272727;
 
+    background: #333;
 
 		
     & header, footer {
 
-		.box-shadow(~"inset 0 1px 0 #434b55, inset 0 -1px 0 #384352");
 
-    	.linear-gradient(top, ~',#2c3440 0%', ~',#242d38 100%');
 
-    	
-    	& nav a {
 
-			.box-shadow(~"1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1)");
 
-		}	
+		.box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1)");
 
+    	background: #272727;
 
 	}
 
 	
-	& .list li {
 
-        color: #F0F0F0;
 
+	& article {
 
 		background: none;
 
-        border-bottom: 1px solid #434b55;
 
-   		& strong {
 
-			text-shadow: 0 1px 1px black;
 
+	}
 
+	
+	& .list {
 
+		& ul {
 
+			background: none;
 
 		}
 
 		
-		& small {
 
-			color:  rgba(255,255,255,0.3);
 
+		& li {
 
+			color: #F0F0F0;
 
+			border-bottom: 1px solid #2f2f2f;
 
+	        
+	   		& strong {
 
+				text-shadow: 0 1px 1px black;
 
+				color: #fff;
 
+			}
 
+			
+			& small {
 
+				color:  rgba(255,255,255,0.3);
 
+			}
 
 		}
 
 	}
 
 	
-	& a {
 
-		color: #fff !important;
 
-		opacity: 0.5;
 
-		&.current { opacity: 1; }
 
-	}
 
-		
+	& a.current { background: #2f2f2f; }		
 }
 
 
 section.aside {
 
@@ -168,8 +170,11 @@ section.aside {
 
 .list, .list li:not(.toolbar) a { color: #2a2a2a; }
 
 
 .list {
 
+	& ul {
 
+		background: #fff;
 
+	}
 
     & li {
 
-        background: #fff;
 
+        //background: #fff;
 
         border-bottom: 1px inset #f8f8f8;
 
         &:last-child { border-bottom: none; }
 
 
@@ -275,33 +280,33 @@ section.aside {
 
 /* @end */
 
 
 /* @group <form> */
 
-@box-shadow-form: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
 
+@box-shadow-form: ~'inset 0 2px 1px 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';
 
 @box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 
 
+@border-radius-form: 2px;
 
+
 
 form, .form {
 
-    font-weight: bold;
 
-    & li { min-height: 27px; }
 
-    & label { color: #999; }
 
+    & label { 
+    	color: #999; 
+    }
 
 }
 
-
 
 input, textarea, select {
 
-    border: 1px solid #b2b2b2;
 
-    .border-radius(@border-radius);
 
+    border: 1px solid #ccc;
 
+    .border-radius(@border-radius-form);
 
     color: #858585;
 
-
 
-
 
     font-family: 'Roboto', Helvetica, Arial, sans-serif;
 
     .box-shadow(@box-shadow-form);
 
-}
 
-
 
-input:focus, textarea:focus, select:focus {
 
-    color:  @color-border-light;
 
-    border-color: @color-border-light;
 
-    .box-shadow(@box-shadow-form);
 
+    
+    &:focus {
 
+		color: #000;
 
+    	border-color: @color-border-light;
 
+    	.box-shadow(0 0 6px @color-border-light);
 
+	}
 
 }
 
 
 .select:after {
 
-    background: #858585;
 
+    background: #ccc;
 
     color: white;
 
     border-top-right-radius: @border-radius;
 
     border-bottom-right-radius: @border-radius;

+ 5 - 16
src/stylesheets/Lungo.widgets.form.less
Parādīt failu 

@@ -18,30 +18,19 @@ label {
 
 }
 
 
 input:not([type=checkbox]), textarea, select {
 
-    display: inline-block;
 
-    padding: 5px 0 5px 5px;
 
+    display: block;
 
     width: 97%;
 
+    margin: 0 0 2px;
 
+    padding: 1.5%;
 
 
-    outline: none;
 
-
 
-    font-size:  15px;
 
-    line-height: 15px;
 
-
 
+    font-size:  1.15em;
 
     font-weight: bold;
 
 
     -webkit-appearance: none;
 
     -webkit-user-select: text;
 
-
 
-    margin: 0 0 6px;
 
+    -webkit-font-smoothing: antialiased;
 
 }
 
 
-.big {
 
-    width: 99%;
 
-    height: 190px;
 
-    .border-radius(0px);
 
-    line-height: 22px;
 
-    //padding: 0px;
 
-}
 
 
 /* @group search */
 
 input[type=search] {

+ 3 - 1
src/stylesheets/Lungo.widgets.less
Parādīt failu 

@@ -32,7 +32,9 @@
 
 .onleft { float: left; }
 
 .onright { float: right;}
 
 .hidden { display: none; }
 
-.indented > * { padding: 10px; }
 
+.indented > * {
 
+    margin: 10px;
 
+}
 
 .wrapper {
 
     padding: 8px 8px;
 
 }

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 14 - 1
src/stylesheets/css/Lungo.base.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 1
src/stylesheets/css/Lungo.layout.article.css


+ 1 - 0
src/stylesheets/css/Lungo.layout.aside.css
Parādīt failu 

@@ -4,6 +4,7 @@ section.aside.onright{-webkit-transform:translate(-256px, 0);-moz-transform:tran
 
 aside{position:fixed;height:auto;top:0;bottom:0;visibility:hidden;z-index:0;width:256px;}aside.onright{right:0px;}
 
 aside.current{visibility:visible;}
 
 aside header,aside footer{position:relative;left:none;}
 
+aside footer{position:absolute;bottom:0;}
 
 aside.small{width:64px;}aside.small nav{margin-top:42px;}aside.small nav a{padding:0px;width:64px;height:64px;}
 
 aside.small nav .icon{font-size:64px;text-align:center;}
 
 aside.small nav .bubble{left:-24px;}

+ 1 - 1
src/stylesheets/css/Lungo.layout.list.css
Parādīt failu 

@@ -2,7 +2,7 @@
 
 .list li a{position:relative;display:block;padding:8px;}
 
 .list li.arrow>a::after{content:'';display:block;width:6px;height:6px;border-right:3px solid #D0D0D8;border-top:3px solid #D0D0D8;position:absolute;right:12px;top:43%;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
 
 .list li .icon,.list li img{float:left;width:32px;height:32px;margin-right:8px;font-size:46px;line-height:32px;text-align:center;}
 
-.list li.thumb img{margin:-8px 8px -8px -8px;height:47px;width:47px;}
 
+.list li.thumb img{margin:-8px 8px -8px -8px;height:46px;width:46px;}
 
 .list .bubble{padding-left:5px;padding-right:5px;}
 
 .list .onright{font-size:0.75em;font-weight:bold;}
 
 .list .onright .icon,.list small .icon{height:13px;width:auto;margin-right:1px;font-size:1.4em !important;line-height:0.8em;}

+ 43 - 68
src/stylesheets/css/Lungo.theme.default.css
Parādīt failu 

@@ -81,11 +81,7 @@ section > footer {
 
   background-clip: padding-box;
 
 }
 
 article {
 
-  background-color: #EBEBEB;
 
-}
 
-article .title {
 
-  color: #797979;
 
-  text-shadow: 0px 1px 0px #fff;
 
+  background: #efefef;
 
 }
 
 /* @end */
 
 /* @group <nav> */
 
@@ -172,53 +168,38 @@ header nav.plain a:active {
 
 /* @group <aside> */
 
 aside {
 
   color: #fff;
 
-  background: #323d4c;
 
+  background: #272727;
 
+  background: #333;
 
 }
 
 aside header,
 
 aside footer {
 
-  -webkit-box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
 
-  -moz-box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
 
-  box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
 
-  -webkit-box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
 
-  -moz-box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
 
-  box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
 
-  background-image: -webkit-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: -moz-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: -ms-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: -o-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: -webkit-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: -moz-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: -ms-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: -o-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-  background-image: linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 
-}
 
-aside header nav a,
 
-aside footer nav a {
 
-  -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
 
-  -moz-box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
 
-  box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
 
-  -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
 
-  -moz-box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
 
-  box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
 
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
+  background: #272727;
 
+}
 
+aside article {
 
+  background: none;
 
+}
 
+aside .list ul {
 
+  background: none;
 
 }
 
 aside .list li {
 
   color: #F0F0F0;
 
-  background: none;
 
-  border-bottom: 1px solid #434b55;
 
+  border-bottom: 1px solid #2f2f2f;
 
 }
 
 aside .list li strong {
 
   text-shadow: 0 1px 1px black;
 
+  color: #fff;
 
 }
 
 aside .list li small {
 
   color: rgba(255, 255, 255, 0.3);
 
 }
 
-aside a {
 
-  color: #fff !important;
 
-  opacity: 0.5;
 
-}
 
 aside a.current {
 
-  opacity: 1;
 
+  background: #2f2f2f;
 
 }
 
 section.aside {
 
   -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
 
@@ -262,8 +243,10 @@ section.aside.onright {
 
 .list li:not(.toolbar) a {
 
   color: #2a2a2a;
 
 }
 
-.list li {
 
+.list ul {
 
   background: #fff;
 
+}
 
+.list li {
 
   border-bottom: 1px inset #f8f8f8;
 
 }
 
 .list li:last-child {
 
@@ -462,14 +445,6 @@ section.aside.onright {
 
 }
 
 /* @end */
 
 /* @group <form> */
 
-form,
 
-.form {
 
-  font-weight: bold;
 
-}
 
-form li,
 
-.form li {
 
-  min-height: 27px;
 
-}
 
 form label,
 
 .form label {
 
   color: #999;
 
@@ -477,42 +452,42 @@ form label,
 
 input,
 
 textarea,
 
 select {
 
-  border: 1px solid #b2b2b2;
 
-  -webkit-border-radius: 3px;
 
-  -moz-border-radius: 3px;
 
-  border-radius: 3px;
 
+  border: 1px solid #ccc;
 
+  -webkit-border-radius: 2px;
 
+  -moz-border-radius: 2px;
 
+  border-radius: 2px;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
-  -webkit-border-radius: 3px;
 
-  -moz-border-radius: 3px;
 
-  border-radius: 3px;
 
+  -webkit-border-radius: 2px;
 
+  -moz-border-radius: 2px;
 
+  border-radius: 2px;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
   color: #858585;
 
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
 
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
+  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
 
+  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
 
+  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
 
+  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
 
+  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
 
+  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
 
 }
 
 input:focus,
 
 textarea:focus,
 
 select:focus {
 
-  color: #64b9e2;
 
+  color: #000;
 
   border-color: #64b9e2;
 
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef;
 
+  -webkit-box-shadow: 0 0 6px #64b9e2;
 
+  -moz-box-shadow: 0 0 6px #64b9e2;
 
+  box-shadow: 0 0 6px #64b9e2;
 
+  -webkit-box-shadow: 0 0 6px #64b9e2;
 
+  -moz-box-shadow: 0 0 6px #64b9e2;
 
+  box-shadow: 0 0 6px #64b9e2;
 
 }
 
 .select:after {
 
-  background: #858585;
 
+  background: #ccc;
 
   color: white;
 
   border-top-right-radius: 3px;
 
   border-bottom-right-radius: 3px;

+ 1 - 1
src/stylesheets/css/Lungo.widgets.css
Parādīt failu 

@@ -2,7 +2,7 @@
 
 .onleft{float:left;}
 
 .onright{float:right;}
 
 .hidden{display:none;}
 
-.indented>*{padding:10px;}
 
+.indented>*{margin:10px;}
 
 .wrapper{padding:8px 8px;}
 
 .icon.small{font-size:20px !important;height:16px !important;width:16px !important;line-height:16px !important;}
 
 .framed{border:2px solid #fff;}

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 27 - 1
src/stylesheets/css/Lungo.widgets.form.css