lookitui 0.1.1.beta → 0.1.2.beta

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    NzNmYjIxNGYyNTU1YzYxYjZiZjZmOWY2Mzg1ZDJjNzlhYjY3NDlmYQ==
+    MGNjNDJhMDIzNmZjOGIzOGMwYWY3YWUwMTI0YTNkNzMyM2YwNDQ5Yw==
   data.tar.gz: !binary |-
-    ZTQyNGQ1NzM3NDFkM2E0YmEzYTcyMTY1ODdkZjIyZmM4N2UzZTM0YQ==
+    YTJiMmU4NmIyZTBjNWQwMDY0ZDhmYWVmMThiYWQzZWI2ZTlhMzlkMA==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    YTIzZGI2MzExYWZkNjNlZGIzZDIzM2FkY2JmMzVhMWEyYjE3YzhiNWZkNGZk
-    ZjkyNDI1MDIxY2VlYjdjZjdmOWMzM2ZjYTAwMDExYjdhZmRkZmY5OTBlMmQ1
-    ZjU1OTFkOWVjMmNiMmQzMjQ2MTRkYmYwZDdiNTNkOGZiNTJlMTI=
+    OWYxMGJjNDA2ZjQzM2FiNWE4NDVlN2FmYzI2NTM0MWY3MWVjZDA4YWI4ZTU1
+    MjNhOGE1YTBlNDVjZDg3ZGEyZTE1N2Q1Y2FkZDEyM2IxOThmZTUwNjZhMTc1
+    MzgwNzU4YTg3ZGNiZGE0NjQyOGQ3YWQ5NTU1YTU4YmRiNTFiZmY=
   data.tar.gz: !binary |-
-    NDI4OTlmZGY5ZjJmZmZhYTBlOThkNWZmNDFlM2UwMjgwZDIwN2YxZmE5ZjNj
-    ODk1Yzk0MWZkMGE3ZDU1ZTY1MzNhOGEzYzZkMTRiNTljNWJjOGNlNjZkNjQ4
-    NzM4YjkyOTcwMjEyZWUwNDgwMzA0ZTI0OTY2NjdmMGI5M2NjNDM=
+    ZDExY2ZhMzA5OTBmMmQ4ZDk5ZjA2ZjMzMjI1ZGE1NTU3OWUzMjNlYThiZmUy
+    MjkwNDIyZDk2ZDUzOGE5NTRkNDA1MWNlNzNkYjVhOWU1NGJjZjNmMmM3MjZl
+    NzM5ZDljYTBkNDY2NTAyNTM4NDY4NTk4OWJkNDZkNWQzMjMyNzY=

data/lib/{seeui.rb → lookitui.rb}

@@ -18,9 +18,9 @@
 #Compass::Frameworks.register('seeui', :path => extension_path)
 
 require 'compass'
-Compass::Frameworks.register("seeui", :path => "#{File.dirname(__FILE__)}/..")
+Compass::Frameworks.register("lookitui", :path => "#{File.dirname(__FILE__)}/..")
 
-module Seeui
+module Lookitui
 
   VERSION = "0.1"
   DATE = "2013-06-01"

data/stylesheets/_lookitui.scss

@@ -1,5 +1,5 @@
 // This is your framework's main stylesheet. Use it to import all default modules.
 @import "compass/css3";
-@import "lookit/base/1.0/base";
-@import "lookit/vars";
-@import "lookit/func";
+@import "lookitui/vars";
+@import "lookitui/base/1.0/base";
+@import "lookitui/func";

data/stylesheets/_toolbar.scss

@@ -0,0 +1 @@
+@import "toolbar/0.1/toolbar.scss";

data/stylesheets/lookitui/_all.scss

@@ -0,0 +1,11 @@
+@import "lookitui/vars";
+@import "lookitui/reset";
+@import "lookitui/func";
+@import "lookitui/ui-refresh";
+@import "lookitui/form";
+@import "lookitui/box";
+@import "lookitui/button";
+@import "lookitui/list";
+@import "lookitui/loading";
+@import "lookitui/toolbar";
+@import "lookitui/gotop";

data/stylesheets/lookitui/_box.scss

@@ -0,0 +1 @@
+@import "lookitui/box/0.1/box";

data/stylesheets/lookitui/_button.scss

@@ -1 +1 @@
-@import "button/1.0/button.scss";
+@import "button/0.1/button.scss";

data/stylesheets/lookitui/_form.scss

@@ -1 +1 @@
-@import "form/1.0/form.scss";
+@import "form/0.1/form.scss";

data/stylesheets/lookitui/_func.scss

@@ -2,6 +2,12 @@
 
 @mixin lg($dir, $col1, $col2){background-color:$col2; @include background-image(linear-gradient($dir, $col1, $col2));}
 
+/**
+ * ==============================================================================
+ * 功能性的函数命名规则为：fn-函数功能名称
+ * ==============================================================================
+ */
+
 /**
  * 自定义方向小箭头
  * 
@@ -12,7 +18,7 @@
  * @param $bc 	边框颜色
  * @param $der 	箭头方向
  */
-@mixin arrow($wh:5px,$mrt:0,$posr:10px,$bw:2px,$bc:#7e7e7e,$der:left){
+@mixin fn-arrow($wh:5px,$mrt:0,$posr:10px,$bw:2px,$bc:#7e7e7e,$der:left){
 	&::after{
 		content:''; display:block; position:absolute; top:50%; margin-top:-$wh/2;
 		width:$wh; height:$wh;
@@ -36,6 +42,19 @@
 	}
 };
 
+/**
+ * new add
+ */
+@mixin fn-arrow-right($wh:6px, $mrt:0, $posr:10px,  $bw:2px, $bc:#7e7e7e){
+	&::after{
+		content:""; display:block; position:absolute; top:50%; margin-top:-$wh/2;
+		width:$wh; height:$wh;
+		border:1px $bc solid; border-width:$bw 0 0 $bw;
+		right:$posr; margin-top:$mrt;
+		@include transform(rotate(45deg+90));
+	}
+}
+
 /**
  * @param $name 自定义字体的名称
  * @param $path 算定义字体的路径
@@ -51,43 +70,118 @@
 	}
 }
 
-//old mixin
+/**
+ * 解决css3动画引起页面图片及文字抖动问题
+ */
+@mixin fn-no-flick{
+	-moz-backface-visibility: hidden; /* Firefox */
+	-webkit-backface-visibility:hidden; /* Chrome and Safari */
+	-webkit-transform-style:preserve-3d;
+	backface-visibility: hidden;
+}
 
-@mixin in-top-panel{
 /**
- * --------------------------------------------------------------------------
- * ++ 页面顶部带返回功能的panel基本样式 STYLE
- * -------------------------------------------------------------------------
+ * 清除浮动
  */
-	#header{
-		.m-nav{
-			height:44*$px; display:-webkit-box; -webkit-box-align:center; background:#dedede;
-			& section{
-				&:nth-child(1){
-					min-width:44*$px;
-					.back{width:44*$px; height:44*$px; text-indent:-9999*$px; overflow:hidden;@include arrow($wh:8px,$bw:3px,$der:left);}
-					.back:active{background:rgba(0,0,0,.5);}
-				}
-				&:nth-child(2){
-					-webkit-box-flex:1; text-align:center;
-					span{display:block; padding:0 10*$px; font-size:18*$font-x; font-weight:bold; color:#333; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
-				}
-				&:nth-child(3){min-width:44*$px;}
-			}
-		}
+@mixin fn-clearfix{
+	.clearfix::after{
+		content:""; 
+		display:block; 
+		postion:absolute; left:0; top:0; 
+		width:0; height:0; 
+		font-size:0; 
+		clear:both;
+	}
+}
+
+/**
+ * 超出的文字自动隐藏
+ */
+@mixin fn-text-overflow{
+	overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
+}
+
+/**
+ * 网站图片变灰（适合特殊事件、特定时间），目前仅主流浏览器支持（移动端浏览器暂不支持）
+ */
+@mixin fn-grayscale{
+	html {
+		-webkit-filter: grayscale(100%);
+		-moz-filter: grayscale(100%);
+		-ms-filter: grayscale(100%);
+		-o-filter: grayscale(100%);
+		filter:url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix  type='matrix'  values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscalerayscale");
+		filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
+		zoom: 1;
 	}
 }
 
-@mixin in-bottom-panel(){
+//old mixin
+
 /**
  * --------------------------------------------------------------------------
- * ++ 页面底部版权信息的panel基本样式 STYLE
+ * ++ 页面顶部带返回功能的panel基本样式 STYLE
  * -------------------------------------------------------------------------
  */
-	#footer{
-		.button .btn-top{width:70%;}
-		.copyright{text-align:center; font-size:12*$font-x; line-height:150%;}
-	}
+@mixin ui-top-panel($height:40px, $background:#dedede){
+    .ui-toolbar {
+        width:100%;
+        z-index: 999
+    }
+
+    .ui-toolbar-wrap {
+        height:$height; background:$background;
+        position: relative;
+    }
+
+    .ui-toolbar-placeholder {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        overflow: visible;
+        position: relative;
+    }
+
+    .ui-toolbar-title {
+        height: 100%;
+    }
+
+    .ui-toolbar-backbtn {
+        display: block;
+        position: relative;
+        float: left;
+        cursor: pointer;
+        -webkit-box-sizing:border-box;
+        box-sizing:border-box;
+        -webkit-user-select: none;
+        user-select: none;
+    }
+
+    .ui-toolbar-left, .ui-toolbar-right {
+        position: absolute;
+        top:0;
+        height: 100%;
+    }
+
+    .ui-toolbar-left {
+        left: 0;
+    }
+    .ui-toolbar-right {
+        top:0;
+        right:0;
+    }
+    .ui-toolbar-left > * {
+        display: inline-block;
+        float: left;
+        margin-right:5px;
+        text-align: center;
+    }
+    .ui-toolbar-right > * {
+        display: inline-block;
+        float: right;
+        margin-right:10px;
+        text-align: center;
+    }
 }
 
 @mixin in-tab(){
@@ -104,33 +198,83 @@
 	}
 }
 
-@mixin in-slider($pic-normal-width:auto,$pic-normal-height:auto,$handle:0){
-/**
- * --------------------------------------------------------------------------
- * ++ 图片效果基本样式 STYLE
- * -------------------------------------------------------------------------
- */
-	.in-slider{
-		position:relative; width:$pic-normal-width; height:$pic-normal-height; margin:0 auto; overflow:hidden;
-		.in-slider-cont{
-			height:100%; position:relative; overflow:hidden;
-			ul{display:-webkit-box; -webkit-box-align:center;}
-			ul li{
-				overflow:hidden; width:$pic-normal-width; height:$pic-normal-height;
+@mixin ui-slider(){
+	/**
+	 * --------------------------------------------------------------------------
+	 * ++ 幻灯片效果基本样式 STYLE
+	 * -------------------------------------------------------------------------
+	 */
+
+	.ui-slider{
+		position:relative;
+		margin:0 auto;
+		overflow:hidden;
+	}
+
+	.ui-slider-wrap{
+		position:relative;
+		height:100%;
+		overflow:hidden;
+	}
+
+	.ui-slider-pic{
+		display:-webkit-box;
+		-webkit-box-align:center;
+	}
+
+	.ui-slider-pic > *{
+
+	}
+
+	.ui-slider-handle{
+		position:absolute;
+	}
+
+	//轮播图片
+	.ui-slider{
+		.ui-slider-wrap{width:320px; @extend .com-media-width; margin:0 auto; position:relative; overflow:hidden;}
+		.ui-slider-content{width:100%; height:100%; position:relative; overflow:hidden;}
+		.ui-slider-pic{
+			display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center;
+			li{
+				width:320px; @extend .com-media-width; overflow:hidden; position:relative;
+				img{width:320px; @extend .com-media-width; height:auto;}
 			}
-			img{width:100%; height:auto;}
 		}
-
-		.in-slider-status{
-			position:absolute; bottom:0; width:100%; height:3px; background:rgba(51,51,51,0.5); display:-webkit-box;
-			span{display:block; -webkit-box-flex:1; height:100%; overflow:hidden;}
+		
+		.ui-slider-text{
+			li{
+				a{display:block;}
+				a:last-child{position:absolute; left:0; bottom:0; z-index:10; width:100%; height:26px; line-height:26px; overflow:hidden; background:rgba(132,132,132,.55);}
+				span{color:#fff; padding-left:10px;}
+			}
+		}
+		/** 线条 **/
+		.ui-slider-handle-line{
+			position:absolute; left:0; bottom:0; width:100%; height:3px; overflow:hidden;
+			background:rgba(51,51,51,0.5); display:-webkit-box;
+			span{display:block; -webkit-box-flex:1; height:100%;}
 			span.on{background:#FF7E00;}
 		}
-
-		/*.in-slider-prev,.in-slider-next{}
-		.in-slider-prev{}
-		.in-slider-next{}*/
+		/** 方形 **/
+		.ui-slider-handle-square{
+			position:absolute; right:10px; bottom:10px; overflow:hidden; line-height:0;
+			span{display:inline-block; background:#fff; width:6px; height:6px; margin-left:2px;}
+			span.on{background:#e05a3f;}
+		}
+		/** 圆形 **/
+		.ui-slider-handle-circle{
+			position:absolute; right:10px; bottom:10px; z-index:11; overflow:hidden; line-height:0;
+			span{
+				display:inline-block; width:6px; height:6px; background:#fff;
+				@include border-radius(50% 50%);
+			}
+			span.on{background:#e05a3f;}
+		}
 	}
+
+	//media query conponent
+	@media all and (min-width:359px){.com-media-width{width:360px;}}
 }
 
 @mixin in-form(){

data/stylesheets/lookitui/_gotop.scss

@@ -0,0 +1 @@
+@import "gotop/0.1/gotop.scss";

data/stylesheets/lookitui/_list.scss

@@ -0,0 +1 @@
+@import "list/0.1/list.scss";

data/stylesheets/lookitui/_loading.scss

@@ -0,0 +1 @@
+@import "lookitui/loading/0.1/loading";

data/stylesheets/lookitui/_reset.scss

@@ -1,161 +1 @@
-@charset "UTF-8";
-@mixin GIONEE_WEBSITE_REST($MODEL){
-	@if ($MODEL == REST_ENV_PX){
-		//完全采用Pixel方式
-		@include GIONEE_REST_ENV_PX();
-	}
-	@else if ($MODEL == REST_ENV_REM){
-		//完全采用REM等比缩放方式
-		@include GIONEE_REST_ENV_REM();
-	}
-	@else if ($MODEL == REST_ENV_PC){
-		//兼容PC端多浏览器模式下的全新方式
-		@include GIONEE_REST_ENV_PC();
-	}
-}
-
-@mixin GIONEE_REST_ENV_PX(){
-	body,div,p,form,input,h1,h2,h3,h4,h5,ul,ol,li,dl,dt,dd,table,tbody,tr,td,textarea,img,iframe,figure{margin:0; padding:0; list-style:none; vertical-align:middle;}
-	body{font-size:14px/1.5; font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,Arial; color:#000; -webkit-user-select:none; -webkit-text-size-adjust:none;}
-	*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
-	img{border:0; -webkit-touch-callout:none;} a,*[onclick]{-webkit-tap-highlight-color:rgba(0,0,0,0); text-decoration:none; color:#000;}
-
-	.clearfix::after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
-
-	.no-flick{
-		//解决css3动画引起页面图片及文字抖动问题
-		-moz-backface-visibility: hidden; /* Firefox */
-		-webkit-backface-visibility:hidden; /* Chrome and Safari */
-		-webkit-transform-style:preserve-3d;
-		backface-visibility: hidden;
-	}
-}
-
-@mixin GIONEE_REST_ENV_REM(){
-	/*
-	 * 1rem=20px for 320px(中低端分辨率).
-	 * 1rem=22.5px for 360px(高端分辨率).
-	 */
-	html{font-size:20px; -webkit-text-size-adjust:none;}
-	@media all and (min-width:359px){.uc-hack{font-size:22.5px;}}
-	@media all and (min-width:359px) and (-webkit-min-device-pixel-ratio:1.5){html{font-size:22.5px;}}
-	/* @media all and (min-width:359px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:landscape){html{font-size:14px;}}
-	@media all and (max-width:320px) and (-webkit-device-pixel-ratio:1.5) and (orientation:landscape){html{font-size:14px;}} */
-	body{font:1rem/1 "\5FAE\8F6F\96C5\9ED1","\5b8b\4f53",Tahoma,Helvetica,Arial,sans-serif;}
-
-	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dt,dd,ol,ul,li,
-	a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,
-	s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,
-	fieldset,form,label,legend,able,caption,tbody,tfoot,thead,tr,th,td,
-	article,aside,canvas,details,embed,figure,figcaption,footer,header,
-	hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0);}
-
-	fieldset,img{border:none;}
-	img{width:100%; max-width:16rem; height:auto;}
-	a{text-decoration:none;}
-	a, a:active{color:#333;}
-
-	address,caption,cite,code,dfn,em,th,var{font-style:normal; font-weight:normal;}
-	ul,ol,dl,li,dt,dd{list-style:none;}
-	h1,h2,h3,h4,h5,h6{font-size:1rem; font-weight:normal;}
-	q:before,q:after{content:"";}
-	abbr,acronym{border:none; font-variant:normal;}
-
-	/* to preserve line-height and selector appearance */
-	sup{vertical-align:text-top;}
-	sub{vertical-align:text-bottom;}
-
-	a:focus, input, textarea{outline:none; border:0;}
-	input,button,textarea,select{font-family:inherit; font-size:inherit; font-weight:inherit; outline:none;}
-	img,input,button,select{vertical-align:middle;}
-	textarea{resize:none;}
-
-	/* fixed-width elements */
-	pre,code,kbd,samp,tt{font-family:"CourierNew",Courier,monospace;}
-
-	/* reset HTML5 elements */
-	mark{background:#ff0;}
-
-	/* the dead elements */
-	s,u{text-decoration:none;}
-	b{font-weight:normal;}
-	i{font-style:normal;}
-
-	/***********************************************
-	 * Common Class
-	 ***********************************************/
-	.hidden{display:none;}
-	.invisible{visibility:hidden;}
-
-	.floatleft{float:left !important;}
-	.floatright{float:right !important;}
-
-	.clearfix:after{content:"\0020"; display:block; height:0; clear:both;}
-	.clear{clear:both;}
-	.oz{overflow:hidden;}
-}
-
-@mixin GIONEE_REST_ENV_PC(){
-	//暂时放置 未优化时本地REST
-	/*CSS Reset*/
-	*{margin:0; padding:0;}
-	//*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
-	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,textarea,select,optgroup,option,fieldset,legend,p,blockquote,th,td{
-		-webkit-tap-highlight-color:rgba(0,0,0,0);
-	    -webkit-user-select: none;
-	    -webkit-touch-callout: none;
-	}
-	input,button,textarea,select,optgroup,option {
-	    font-family: inherit;
-	    font-size: inherit;
-	    font-style: inherit;
-	    font-weight: inherit;
-	    color: inherit;
-	}
-	article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
-		display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);
-	}
-
-	table{border-collapse: collapse;border-spacing: 0;}
-	h1,h2,h3,h4,h5,h6{font-size: 100%;}
-	ul,ol,li{list-style: none;}
-	em,i{font-style:normal;}
-	img{border:none;}
-	input,img{vertical-align:middle;}
-	a{text-decoration:none;}
-
-	//html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
-
-	/*
-	 * 1rem=20px for 320px(中低端分辨率).
-	 * 1rem=22.5px for 360px(高端分辨率).
-	 */
-	// html{font-size:20px; -webkit-text-size-adjust:none;}
-	// @media all and (min-width:359px){.uc-hack{font-size:22.5px;}}
-	// @media all and (min-width:359px) and (-webkit-min-device-pixel-ratio:1.5){html{font-size:22.5px;}}
-	// @media all and (min-width:359px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:landscape){html{font-size:14px;}}
-	// @media all and (max-width:320px) and (-webkit-device-pixel-ratio:1.5) and (orientation:landscape){html{font-size:14px;}}
-	//body{font:1rem/1 "\5FAE\8F6F\96C5\9ED1","\5b8b\4f53","微软雅黑E软雅黑6F\96C5\9ED1",Helvetica;}
-	body{
-		font:1rem/1 "\5FAE\8F6F\96C5\9ED1","\5b8b\4f53","微软雅黑E软雅黑6F\96C5\9ED1",Helvetica;
-		-webkit-user-select:none;
-		-webkit-text-size-adjust:none;
-	}
-
-	@media all and (min-width:360px){.uc-hack{font-size:15px;}}
-	@media all and (min-width:360px) and (-webkit-device-pixel-ratio:2){html{font-size:15px;}}
-
-	.none{display:none;}
-	.no-spacing{margin:0; padding:0;}
-	.margin-center{margin:0 auto; text-align:center;}
-
-	.clearfix::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
-
-	.no-flick{
-		//解决css3动画引起页面图片及文字抖动问题
-		-moz-backface-visibility: hidden; /* Firefox */
-		-webkit-backface-visibility:hidden; /* Chrome and Safari */
-		-webkit-transform-style:preserve-3d;
-		backface-visibility: hidden;
-	}
-}
+@import "base/0.1/base.scss";