Rename .onright/.onleft to .right/.left

examples/kitchen-sink/app/events.js

@@ -42,7 +42,7 @@ App.Events = (function(lng, undefined) {
     });
 
     //List.Append & List.prepend
-    lng.dom('section#lists header .onright a').tap(function(event) {
+    lng.dom('section#lists header .right a').tap(function(event) {
         var param = {
             el: '#list-dinamic',
             template: 'profile-tmp',
@@ -73,4 +73,4 @@ App.Events = (function(lng, undefined) {
         console.error('loaded article');
     });
 
-})(LUNGO);
+})(LUNGO);

examples/kitchen-sink/app/sections/aside-profiles.html

@@ -1,4 +1,4 @@
-<aside id="profiles" class="scrollable onright">
+<aside id="profiles" class="scrollable right">
     <div>
         <div class="anchor">Author of LungoJS</div>
         <a href="http://twitter.com/soyjavi" target="_blank" data-image="assets/images/avatars/soyjavi.jpg">Javi Jim&eacute;nez Villar</a>
@@ -12,4 +12,4 @@
         <a href="#" data-image="https://secure.gravatar.com/avatar/b41d652ca9b88e636516d907599dcc87?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Juan Gallego Galisteo</a>
         <a href="#" data-image="https://secure.gravatar.com/avatar/a3257b495a2bc4ae15405c7880300848?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">John McLear</a>
     </div>
-</aside>
+</aside>

examples/kitchen-sink/app/sections/buttons-extra.html

@@ -1,18 +1,18 @@
 <section id="buttons-extra">
     <header data-back="home" data-title="Example of buttons">
-        <nav class="onright">
+        <nav class="right">
             <a href="#" class="button red " data-icon="add">With icon</a>
             <a href="#" class="button arcticblue ">Text</a>
         </nav>
     </header>
 
     <footer>
-        <nav class="onleft">
+        <nav class="left">
             <a href="#" class="button blue ">Text</a>
             <a href="#" class="button yellow " data-icon="left"></a>
         </nav>
-        <a href="#" class="button orange onright" data-icon="right">onright</a>
+        <a href="#" class="button orange right" data-icon="right">right</a>
     </footer>
 
     <article></article>
-</section>
+</section>

examples/kitchen-sink/app/sections/forms.html

@@ -78,7 +78,7 @@
                 <li class="anchor" data-icon="edit">Example of checkbox</li>
                 <li>
                     <label>Do you like LungoJS forms?</label>
-                    <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
+                    <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
                 </li>
             </ul>
 
@@ -112,4 +112,4 @@
             </ul>
         </div>
     </article>
-</section>
+</section>

examples/kitchen-sink/app/sections/lists.html

@@ -1,6 +1,6 @@
 <section id="lists">
     <header data-back="home" data-title="Lists" class="extended">
-        <nav class="onright">
+        <nav class="right">
             <a href="#" data-article="list-dinamic" class="button" data-icon="up"></a>
             <a href="#" data-article="list-dinamic" class="button prepend" data-icon="down"></a>
         </nav>
@@ -16,4 +16,4 @@
     <article id="list-ordered" class="list"></article>
     <article id="list-indented" class="list indented scrollable"></article>
     <article id="list-dinamic" class="list scrollable"></article>
-</section>
+</section>

examples/kitchen-sink/app/sections/navigation.html

@@ -1,6 +1,6 @@
 <section id="navigation">
     <header data-back="home" data-title="Navigation">
-        <nav class="onright">
+        <nav class="right">
             <a href="#navigation-index" class="button" data-target="section"><abbr>Transitions</abbr></a>
         </nav>
     </header>
@@ -24,7 +24,7 @@
     <header data-back="left" data-title="Navigation"></header>
 
     <footer>
-        <nav class="onright">
+        <nav class="right">
             <a href="#nav-extra-1" data-target="article" class="current" data-icon="user"></a>
             <a href="#nav-extra-2" data-target="article" data-icon="calendar" data-count="17"></a>
             <a href="#nav-extra-3" data-target="article" data-icon="mail"></a>
@@ -34,4 +34,4 @@
     <article id="nav-extra-1" data-title="Article 1"></article>
     <article id="nav-extra-2" data-title="Article 2"></article>
     <article id="nav-extra-3" data-title="Article 3"></article>
-</section>
+</section>

examples/kitchen-sink/app/sections/settings.html

@@ -1,6 +1,6 @@
 <section id="settings">
     <header data-back="home" data-title="Settings">
-        <nav class="onright">
+        <nav class="right">
             <a href="#settings_main" data-target="article" class="current" data-title="Settings" data-icon="user"></a>
             <a href="#settings_second" data-target="article" data-title="Chat" data-icon="chat"></a>
             <a href="#settings_third" data-target="article" data-title="Share Methods" data-icon="earth"></a>
@@ -17,4 +17,4 @@
             <a href="#" class="current" data-icon="add"></a>
         </nav>
     </footer>
-</section>
+</section>

examples/kitchen-sink/app/view.js

@@ -4,7 +4,7 @@ App.View = (function(lng, App, undefined) {
         'profile-tmp',
         '<li class="selectable {{anchor}}">\
                 <img src="{{avatar}}" />\
-                <div class="onright">{{name}}</div>\
+                <div class="right">{{name}}</div>\
                 {{name}}\
                 <small>{{description}}</small>\
             </a>\
@@ -26,4 +26,4 @@ App.View = (function(lng, App, undefined) {
     }
 
 
-})(LUNGO, App);
+})(LUNGO, App);

examples/kitchen-sink/index.html

@@ -64,8 +64,8 @@
 
     <section id="kitchen-sink">
         <header data-title="LungoJS Kitchen Sink">
-            <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside" data-icon="items"></a>
-            <a href="#profiles" data-target="aside" data-article="welcome" class="button onright">Profiles</a>
+            <a href="#kitchen-sink-scroll" class="button left" data-target="aside" data-icon="items"></a>
+            <a href="#profiles" data-target="aside" data-article="welcome" class="button right">Profiles</a>
         </header>
 
         <!-- ============================= welcome ============================= -->
@@ -188,7 +188,7 @@
                         <small>Relationship field between &lt;header&gt; and &lt;a&gt;</small>
                     </li>
                     <li>
-                        <div class="onright" data-count="23 units"></div>
+                        <div class="right" data-count="23 units"></div>
                         data-count
                         <small>Creates counters of different &lt;elements&gt;</small>
                     </li>

examples/test/app/events-oldschool.js

@@ -14,7 +14,7 @@ LUNGO.Events.init({
 App.Events = (function(lng, undefined) {
 
     lng.ready(function() {
-        //lng.View.Aside.toggle('.onright');
+        //lng.View.Aside.toggle('.right');
 
         setTimeout(function() {
             lng.View.Element.progress('#progress-normal', 50, true, 'yeah');
@@ -71,4 +71,4 @@ App.Events = (function(lng, undefined) {
     };
 
 })(LUNGO);
-*/
+*/

examples/test/app/sections/aside-profiles.html

@@ -1,7 +1,7 @@
-<aside id="profiles" class=" onright">
+<aside id="profiles" class=" right">
     <div>
         <header data-title="Favorites">
-            <nav class="plain onright">
+            <nav class="plain right">
                 <a href="#" data-icon="refresh"></a>
             </nav>
         </header>
@@ -10,14 +10,14 @@
             <ul >
                 <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/1.jpg">
-                        <div class="bubble onright">prueba</div>
+                        <div class="bubble right">prueba</div>
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
                 <li class="">
                     <a href="#nav-2" data-target="article" data-image="assets/images/avatars/2.jpg">
-                        <span class="onright bubble">123</span>
+                        <span class="right bubble">123</span>
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
@@ -84,4 +84,4 @@
         </footer> -->
 
     </div>
-</aside>
+</aside>

examples/test/app/sections/aside.html

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

examples/test/boletus.html

@@ -104,7 +104,7 @@
 
     <section id="a" data-transition="pop" >
         <header data-title="a">
-            <nav class="onright">
+            <nav class="right">
                 <a href="#baaaa" data-target="section">B</a>
             </nav>
         </header>
@@ -121,15 +121,15 @@
 
     <section id="sec-1"  class="popa" data-transition="pop">
         <header class="extended">
-            <nav class="onleft">
+            <nav class="left">
                 <a href="#kitchen-sink-scroll" data-target="aside" data-icon="home"></a>
                 <a href="#kitchen-sink-scroll" data-article="nav-2" data-target="aside" data-icon="heart" data-count="8"></a>
             </nav>
-            <div class="onleft">
+            <div class="left">
                 <span class="title with-subtitle">Javi Jiménez Villar</span>
                 <span class="subtitle">@soyjavi</span>
             </div>
-            <nav class="onright ">
+            <nav class="right ">
                 <!--
                 <a href="#profiles" data-target="aside" data-label="User"></a>
                 <a href="#profiles" data-target="aside" data-icon="users" data-label="User"></a>
@@ -138,7 +138,7 @@
                 <a href="#profiles" data-target="aside" data-icon="user" data-count="1"></a>
             </nav>
 
-            <nav class="onright plain ">
+            <nav class="right plain ">
                 <a href="#" data-loading="white disable"></a>
                 <a href="#" data-loading="white "></a>
             </nav>
@@ -182,7 +182,7 @@
             <div class="three row grey">
                 <div class="six row green">
                     <div class="wrapper">
-                        <div class="onright" data-icon="calendar">June 9, 2012</div>
+                        <div class="right" data-icon="calendar">June 9, 2012</div>
                         <strong>LungoJS.2 Application</strong>
                         <small>by Javi Jimenez <div class="bubble grey">PRO</div></small>
                     </div>
@@ -206,7 +206,7 @@
                     <li class=" selectable" >
                         <a href="#" data-image="http://placehold.it/32x32">
 
-                            <div class="onright" data-icon="calendar">2 days ago</div>
+                            <div class="right" data-icon="calendar">2 days ago</div>
                             <strong>List: .selectable</strong>
                             <small>a: data-image</small>
                         </a>
@@ -215,7 +215,7 @@
                     <li class=" selectable" >
                         <a href="#" data-image="http://placehold.it/32x32">
 
-                            <div class="onright" data-icon="calendar">2 days ago</div>
+                            <div class="right" data-icon="calendar">2 days ago</div>
                             <strong>List: .selectable</strong>
                             <small>a: data-image</small>
                         </a>
@@ -224,7 +224,7 @@
                     <li class=" selectable" >
                         <a href="#" data-image="http://placehold.it/32x32">
 
-                            <div class="onright" data-icon="calendar">2 days ago</div>
+                            <div class="right" data-icon="calendar">2 days ago</div>
                             <strong>List: .selectable</strong>
                             <small>a: data-image</small>
                         </a>
@@ -257,7 +257,7 @@
                 </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>
+                    <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
                 </li>
 
                 <li class="padding">
@@ -298,7 +298,7 @@
                 <li class=" selectable" >
                     <a href="#" data-image="http://placehold.it/32x32">
 
-                        <div class="onright" data-icon="calendar">2 days ago</div>
+                        <div class="right" data-icon="calendar">2 days ago</div>
                         <strong>List: .selectable</strong>
                         <small>a: data-image</small>
                     </a>
@@ -311,7 +311,7 @@
                 </li>
                 <li class="red">
                     <a href="#"  data-icon="home">
-                        <div class="bubble red onright"><span class="icon map"></span>125m</div>
+                        <div class="bubble red right"><span class="icon map"></span>125m</div>
                         <strong>List: .red</strong>
                         <small data-icon="clock">a: data-icon & .bubble</small>
                     </a>
@@ -349,11 +349,11 @@
 
     <section id="sec-2" data-transition="pop">
         <header data-title="Auto title centered">
-            <nav class="onleft">
+            <nav class="left">
                 <a href="#back" data-target="section" class="cancel" data-icon="close" data-label="CANCEL"></a>
             </nav>
 
-            <nav class="onright ">
+            <nav class="right ">
                 <a href="#" class="accept" data-icon="check" data-label="ACCEPT"></a>
             </nav>
         </header>

examples/test/index.html

@@ -88,7 +88,7 @@
 
     <section id="a" data-transition="pop" >
         <header data-title="a">
-            <nav class="onright">
+            <nav class="right">
                 <a href="#baaaa" data-target="section">B</a>
             </nav>
         </header>
@@ -105,15 +105,15 @@
 -->
     <section id="sec-1"  class="popa" data-transition="pop">
         <header class="extended">
-            <nav class="onleft">
+            <nav class="left">
                 <a href="#kitchen-sink-scroll" data-target="aside" data-icon="home"></a>
                 <a href="#kitchen-sink-scroll" data-article="nav-2" data-target="aside" data-icon="heart" data-count="8"></a>
             </nav>
-            <div class="onleft">
+            <div class="left">
                 <span class="title with-subtitle">Javi Jiménez Villar</span>
                 <span class="subtitle">@soyjavi</span>
             </div>
-            <nav class="onright ">
+            <nav class="right ">
                 <!--
                 <a href="#profiles" data-target="aside" data-label="User"></a>
                 <a href="#profiles" data-target="aside" data-icon="users" data-label="User"></a>
@@ -122,7 +122,7 @@
                 <a href="#profiles" data-target="aside" data-icon="user" data-count="1"></a>
             </nav>
 
-            <nav class="onright plain ">
+            <nav class="right plain ">
                 <a href="#" data-loading="white disable"></a>
                 <a href="#" data-loading="white "></a>
             </nav>
@@ -166,7 +166,7 @@
             <div class="three row grey">
                 <div class="six row green">
                     <div class="wrapper">
-                        <div class="onright" data-icon="calendar">June 9, 2012</div>
+                        <div class="right" data-icon="calendar">June 9, 2012</div>
                         <strong>LungoJS.2 Application</strong>
                         <small>by Javi Jimenez <div class="bubble grey">PRO</div></small>
                     </div>
@@ -190,7 +190,7 @@
                     <li class=" selectable" >
                         <a href="#" data-image="http://placehold.it/32x32">
 
-                            <div class="onright" data-icon="calendar">2 days ago</div>
+                            <div class="right" data-icon="calendar">2 days ago</div>
                             <strong>List: .selectable</strong>
                             <small>a: data-image</small>
                         </a>
@@ -199,7 +199,7 @@
                     <li class=" selectable" >
                         <a href="#" data-image="http://placehold.it/32x32">
 
-                            <div class="onright" data-icon="calendar">2 days ago</div>
+                            <div class="right" data-icon="calendar">2 days ago</div>
                             <strong>List: .selectable</strong>
                             <small>a: data-image</small>
                         </a>
@@ -208,7 +208,7 @@
                     <li class=" selectable" >
                         <a href="#" data-image="http://placehold.it/32x32">
 
-                            <div class="onright" data-icon="calendar">2 days ago</div>
+                            <div class="right" data-icon="calendar">2 days ago</div>
                             <strong>List: .selectable</strong>
                             <small>a: data-image</small>
                         </a>
@@ -241,7 +241,7 @@
                 </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>
+                    <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
                 </li>
 
                 <li class="padding">
@@ -282,7 +282,7 @@
                 <li class=" selectable" >
                     <a href="#" data-image="http://placehold.it/32x32">
 
-                        <div class="onright" data-icon="calendar">2 days ago</div>
+                        <div class="right" data-icon="calendar">2 days ago</div>
                         <strong>List: .selectable</strong>
                         <small>a: data-image</small>
                     </a>
@@ -295,7 +295,7 @@
                 </li>
                 <li class="red">
                     <a href="#"  data-icon="home">
-                        <div class="bubble red onright"><span class="icon map"></span>125m</div>
+                        <div class="bubble red right"><span class="icon map"></span>125m</div>
                         <strong>List: .red</strong>
                         <small data-icon="clock">a: data-icon & .bubble</small>
                     </a>
@@ -333,11 +333,11 @@
 
     <section id="sec-2" data-transition="pop">
         <header data-title="Auto title centered">
-            <nav class="onleft">
+            <nav class="left">
                 <a href="#back" data-target="section" class="cancel" data-icon="close" data-label="CANCEL"></a>
             </nav>
 
-            <nav class="onright ">
+            <nav class="right ">
                 <a href="#" class="accept" data-icon="check" data-label="ACCEPT"></a>
             </nav>
         </header>

examples/todo.js/index.html

@@ -40,7 +40,7 @@
 
 	<section id="main">
 		<header data-title="ToDo.js">
-            <nav class="onright">
+            <nav class="right">
 			     <a href="#new" data-target="section" class="active" data-icon="plus"><abbr>New Task</abbr></a>
             </nav>
 		</header>
@@ -58,10 +58,10 @@
 
     <section id="view">
         <header data-title="View" >
-            <nav class="onleft">
+            <nav class="left">
                 <a href="#back" data-target="section" class="current" data-icon="left"><abbr>Back</abbr></a>
             </nav>
-            <nav class="onright">
+            <nav class="right">
                 <a href="#" id="btnDeleteTodo" class="active" data-icon="trash"><abbr>Delete</abbr></a>
             </nav>
         </header>
@@ -111,4 +111,4 @@
     <script src="app/services.js"></script>
     <script src="app/view.js"></script>
 </body>
-</html>
+</html>

src/Lungo.Constants.js

@@ -25,8 +25,8 @@ LUNGO.Constants = {
         SHOW: 'show',
         HIDE: 'hide',
         CURRENT: 'current',
-        RIGHT: 'onright',
-        LEFT: 'onleft',
+        RIGHT: 'right',
+        LEFT: 'left',
         HORIZONTAL: 'horizontal',
         SMALL: 'small'
     },
@@ -69,4 +69,4 @@ LUNGO.Constants = {
         LOADING_RESOURCE: 'ERROR: Loading resource.'
     }
 
-};
+};

src/attributes/Lungo.Attributes.Data.js

@@ -64,6 +64,6 @@ LUNGO.Attributes.Data = {
     Back: {
         tag: 'back',
         selector: 'header, footer',
-        html: '<nav class="onleft"><a href="#back" data-target="section" class="onleft"><span class="icon {{value}}"></span></a></nav>'
+        html: '<nav class="left"><a href="#back" data-target="section" class="left"><span class="icon {{value}}"></span></a></nav>'
     }
-};
+};

src/stylesheets/Lungo.layout.aside.less

@@ -14,7 +14,7 @@ section.aside {
     &:not(.small) { .transform(translate(@aside-width, 0)); }
     &.small { .transform(translate(@aside-width-small, 0)); }
 
-    &.onright {
+    &.right {
         .transform(translate(-@aside-width, 0));
         &.small { .transform(translate(-@aside-width-small, 0)); }
     }
@@ -30,7 +30,7 @@ aside {
 
     width: @aside-width;
 
-    &.onright { right: 0px; }
+    &.right { right: 0px; }
     &.current {
         display: block;
     }
@@ -84,4 +84,4 @@ aside {
 
         &.small{ left: @aside-width-small; }
     }
-}
+}

src/stylesheets/Lungo.layout.list.less

@@ -61,12 +61,12 @@
         padding-right: 5px;
     }
 
-    & .onright {
+    & .right {
         font-size: 0.75em;
         font-weight: bold;
     }
 
-    & .onright .icon, & small .icon {
+    & .right .icon, & small .icon {
         height: 13px !important;
         width: 13px !important;
         margin-right: 1px !important;

src/stylesheets/Lungo.theme.default.less

@@ -60,8 +60,8 @@ section > footer {
     .border-radius(0px 0px @border-radius-section @border-radius-section);
 }
 
-article { 
-	background: #efefef; 
+article {
+	background: #efefef;
 	//background: red;
 }
 /* @end */
@@ -79,7 +79,7 @@ header nav {
             &.accept { background: rgba(0, 255, 0, 0.4); }
             &.cancel { background: rgba(255, 0, 0, 0.4); }
         }
-        &.onright a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
+        &.right a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
 
         & a:active { .box-shadow(~"inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5)"); }
     }
@@ -120,48 +120,48 @@ aside {
     color:  #fff;
     background: #272727;
     background: #333;
-		
+
     & header, footer {
 		.box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1)");
     	background: #272727;
 	}
-	
+
 	& article {
 		background: none;
 	}
-	
+
 	& .list {
 		& ul {
 			background: none;
 		}
-		
+
 		& 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.current { background: #2f2f2f; }		
+
+	& a.current { background: #2f2f2f; }
 }
 
 section.aside {
     .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
-    &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
+    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
 }
 
 @media handheld, only screen and (min-width: 768px) {
     section.current, section.show {
         .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
-        &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
+        &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
     }
 }
 /* @end */
@@ -183,14 +183,14 @@ section.aside {
             color: @theme-highlight-color;
             text-shadow: @theme-highlight-text-shadow;
 
-            & small, & .onright:not(.bubble) {
+            & small, & .right:not(.bubble) {
                 color: @white;
                 text-shadow: none;
             }
         }
 
-        & small, & .onright:not(.bubble) { color: #888; }
-        
+        & small, & .right:not(.bubble) { color: #888; }
+
         & strong {
 			color: #134c81;
 		}
@@ -287,8 +287,8 @@ section.aside {
 @border-radius-form: 2px;
 
 form, .form {
-    & label { 
-    	color: #999; 
+    & label {
+    	color: #999;
     }
 }
 input, textarea, select {
@@ -297,7 +297,7 @@ input, textarea, select {
     color: #858585;
     font-family: 'Roboto', Helvetica, Arial, sans-serif;
     .box-shadow(@box-shadow-form);
-    
+
     &:focus {
 		color: #000;
     	border-color: @color-border-light;
@@ -394,24 +394,24 @@ input[type="range"] {
     .border-radius(8px);
     text-shadow: 0 0 1px rgba(0,0,0,1);
 
-    &.count { 
-    	.linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%); 
+    &.count {
+    	.linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
     	.box-shadow(0 0 2px rgba(0,0,0,0.5);
     }
 }
     header .bubble.count {
         .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
     }
-	
+
     article .list .bubble{
 		.box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
 	}
-	
-	
+
+
 	aside .list .bubble {
 		background: rgba(0,0,0,0.25);
 				.box-shadow(~'inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56');
 		.box-shadow(~'inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2)');
 	}
-		
-/* @end */
+
+/* @end */

src/stylesheets/Lungo.theme.scaffold.less

@@ -68,7 +68,7 @@ header nav {
             &.accept { background: rgba(0, 255, 0, 0.4); }
             &.cancel { background: rgba(255, 0, 0, 0.4); }
         }
-        &.onright a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
+        &.right a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
 
         & a:active { .box-shadow(~"inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5)"); }
     }
@@ -148,13 +148,13 @@ aside {
 
 section.aside {
     .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
-    &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
+    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
 }
 
 @media handheld, only screen and (min-width: 768px) {
     section.current, section.show {
         .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
-        &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
+        &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
     }
 }
 /* @end */
@@ -174,13 +174,13 @@ section.aside {
             background: @theme-light;
             color: @theme-dark;
 
-            & small, & .onright:not(.bubble), & strong {
+            & small, & .right:not(.bubble), & strong {
                 color: @white;
                 text-shadow: none;
             }
         }
 
-        & small, & .onright:not(.bubble) {
+        & small, & .right:not(.bubble) {
             color: @theme;
         }
 

src/stylesheets/Lungo.widgets.less

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

src/stylesheets/css/Lungo.theme.scaffold.css

@@ -54,7 +54,7 @@ header nav:not(.plain) a.accept {
 header nav:not(.plain) a.cancel {
   background: rgba(255, 0, 0, 0.4);
 }
-header nav:not(.plain).onright a {
+header nav:not(.plain).right a {
   -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
   -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
   box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
@@ -151,7 +151,7 @@ section.aside {
   -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
   box-shadow: -4px 0 8px rgba(0,0,0,0.5);
 }
-section.aside.onright {
+section.aside.right {
   -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
   -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
   box-shadow: 4px 0 8px rgba(0,0,0,0.5);
@@ -169,8 +169,8 @@ section.aside.onright {
     -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
     box-shadow: -4px 0 8px rgba(0,0,0,0.5);
   }
-  section.current.onright,
-  section.show.onright {
+  section.current.right,
+  section.show.right {
     -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
     -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
     box-shadow: 4px 0 8px rgba(0,0,0,0.5);
@@ -199,13 +199,13 @@ section.aside.onright {
   color: #333333;
 }
 .list li.selectable:active small,
-.list li.selectable:active .onright:not(.bubble),
+.list li.selectable:active .right:not(.bubble),
 .list li.selectable:active strong {
   color: #ffffff;
   text-shadow: none;
 }
 .list li small,
-.list li .onright:not(.bubble) {
+.list li .right:not(.bubble) {
   color: #999999;
 }
 .list li strong {

src/stylesheets/css/Lungo.widgets.css

@@ -23,12 +23,10 @@
 .scroll.horizontal  > *  > * {
   float: left;
 }
-.left,
-.onleft {
+.left {
   float: left;
 }
-.right,
-.onright {
+.right {
   float: right;
 }
 .hidden {