Trang chủ Khám phá Trợ giúp
Đăng nhập
pwa
/
Lungo.js
mirror of https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Browse Source

Enhaced form elements

@soyjavi 14 năm trước cách đây
mục cha
71b0fe4d4a
commit
b29e793433
17 tập tin đã thay đổi với 234 bổ sung và 224 xóa
Split View Hiển thị tình trạng sai khác
  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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

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

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 14 - 1
src/stylesheets/css/Lungo.base.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 1
src/stylesheets/css/Lungo.layout.article.css


+ 1 - 0
src/stylesheets/css/Lungo.layout.aside.css
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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;}

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 27 - 1
src/stylesheets/css/Lungo.widgets.form.css