Browse Source

New stylesheets for <aside> element

@soyjavi 14 years ago
parent
commit
292f2dc1c9

+ 2 - 7
src/stylesheets/css/Lungo.layout.aside.css

@@ -1,17 +1,12 @@
 section.aside{-webkit-transform:translate3d(256px, 0, 0);-moz-transform:translate3d(256px, 0, 0);-o-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}section.aside.onright{-webkit-transform:translate3d(-256px, 0, 0);-moz-transform:translate3d(-256px, 0, 0);-o-transform:translate3d(-256px, 0, 0);transform:translate3d(-256px, 0, 0);}
 aside{position:absolute;width:inherit;height:inherit;top:0px;visibility:hidden;z-index:0;width:256px;max-width:256px;}aside.onright{right:0px;}
 aside.current{visibility:visible;}
-header:not(.extended)~aside{top:40px;}
-header.extended~aside{top:74px;}
-footer~aside{bottom:40px;height:auto;}
-footer.toolbar~aside{bottom:48px;}
-aside~article{-webkit-transform:translate3d(0px, 0, 0);-moz-transform:translate3d(0px, 0, 0);-o-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
-aside .title,aside a,aside .anchor{padding:0 6px;}
 aside .title{line-height:40px;font-size:15px;font-weight:bold;height:40px;}
 aside a{display:block;width:244px;height:40px;font-size:15px;line-height:40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 aside .bubble{float:right;font-size:11px;}
+aside .title,aside a,aside .anchor{padding:0 6px;}
 aside a .bubble,aside .title .bubble{margin-top:13px;}
 aside .anchor .bubble{margin-top:2px;}
 aside .icon{width:24px;float:left;margin:8px 4px 0 0;font-size:24px;line-height:24px;text-align:center;}
 aside .anchor{font-weight:bold;line-height:19px;}
-@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} section{width:auto !important;left:256px;right:0px !important;-webkit-transition:none;}section.hide{z-index:-1;}}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} section.aside{width:auto !important;left:256px !important;right:0px !important;-webkit-transform:translate3d(0px, 0, 0);-moz-transform:translate3d(0px, 0, 0);-o-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);-webkit-transition:none;}}

File diff suppressed because it is too large
+ 2 - 2
src/stylesheets/css/Lungo.layout.css


File diff suppressed because it is too large
+ 1 - 12
src/stylesheets/css/Lungo.theme.default.font.css


+ 30 - 45
src/stylesheets/less/Lungo.layout.aside.less

@@ -33,50 +33,37 @@ aside {
 	
 	&.onright { right: 0px; }
 	&.current { visibility: visible;} 
-}
-
-header:not(.extended) ~ aside { top: @header_footer_height; }    
-header.extended ~ aside { top: @header_extended_height; }        
-footer ~ aside { 
-    bottom: @header_footer_height; 
-    height: auto; 
-}
-    footer.toolbar ~ aside { bottom: @footer_toolbar_height; }
-
-aside ~ article {
-    .transform(translate3d(0px, 0, 0));
-    -webkit-transition: -webkit-transform 250ms @defaultTrasition;
+	
+	& .title {
+    	line-height: 40px;
+	    font-size: 15px;
+	    font-weight: bold;
+		height: 40px;    	
+	}
+	
+	& a {
+    	display: block;
+		width: 244px;
+		height: 40px;
+	
+		font-size: 15px;
+		line-height: 40px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		
+	}
+	
+	& .bubble {
+    	float: right;
+    	font-size: 11px;
+	}
 }
 
 aside .title, aside a, aside .anchor {    
 	padding: 0 6px;
 }
 
-aside .title {    
-    line-height: 40px;
-    font-size: 15px;
-    font-weight: bold;
-	height: 40px;
-}
-
-aside a {
-	display: block;
-	width: 244px;
-	height: 40px;
-
-	font-size: 15px;
-	line-height: 40px;
-	overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-}
-
-
-	aside .bubble {
-    	float: right;
-    	font-size: 11px;
-    }
-
 aside a .bubble, aside .title .bubble {
 	margin-top: 13px;
 }
@@ -102,15 +89,13 @@ aside .anchor .bubble {
 	@media handheld, only screen and (min-width: 768px) {
 		[data-target="aside"] { display: none !important; }
 		
-		section {
+		section.aside {
 			width: auto !important;
-	    	left: 256px;
-	    	right:  0px !important;
-	    	-webkit-transition: none;
+    		left: 256px !important;
+    		right: 0px !important;
+    		.transform(translate3d(0px, 0, 0));
+    		-webkit-transition: none;
 
-	    	&.hide {
-    			z-index: -1;
-			}
 		}
 	}
 /* @end */

+ 9 - 2
src/stylesheets/less/Lungo.layout.less

@@ -25,21 +25,28 @@ section {
 	
 	.transform(translate3d(100%, 0, 0));
 	-webkit-backface-visibility: hidden;
-	-webkit-transition: -webkit-transform 250ms @defaultTrasition;	
-	
+	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
+	/*
+	   -moz-transition: @keyframe @defaultTrasition;
+         -o-transition: @keyframe @defaultTrasition;
+            transition: @keyframe @defaultTrasition;
+	*/
 	&:first-child, &.show {	.transform(translate3d(0%, 0, 0)); }
 	&.hide { .transform(translate3d(-100%, 0, 0)); }
 	
 	&.pop {
     	.transform(scale(0.5));
+    	z-index: 0;
     	opacity: 0;
 		-webkit-transition: all 250ms @defaultTrasition;
 		
 		&:first-child, &.show {	
+			z-index: 1;
 			.transform(scale(1));
 			opacity: 1;
 		}
 		&.hide { 
+			z-index: 0;
 			.transform(scale(1.2));
 			opacity: 0;
 		}