seeui 0.1.1.beta

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    MmJmY2ZlM2I0OThhZTFmOTI2Yjg1YWVmM2QyYTE3MmFkMDZiMWU4Yg==
+  data.tar.gz: !binary |-
+    YjRkMjI4OTY2MzRmZGMxYzkwNWIxYmU0ZDIwNWNlOTFhMDJhMjk4NA==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    ZGQ5MWEwZTJiMTljMTBiNjY3ODFiZWY5NDliMWNkN2U2MDRiMDI5NWJiNjg0
+    NDdmNWIwMDYzNzNjODJjM2U4ZTNiMDFiZGM4YTAzYTZlOGNhNzVhMjZkODVl
+    NTg4ODY5NGNkYjA3NmQwYTc2YmE2M2M2MjUxNzE4YzRlOGMxNDE=
+  data.tar.gz: !binary |-
+    MzE0YmY3YzE3Y2E4ZDkwOWFjZWIwZWNjNjM2OGZmOTJjNDdlYTUzMmVmZTMw
+    OWM3NTNhYmNhM2JiOGVhM2ExODFiNGNiNGQ2Yjc0NGNlODI1MGVjM2EwNjU4
+    Njg1NDNlZWVhNjU5ZjQ1ZWU0MWRjOTg5OWJmYWYzMjYyM2VkYmQ=

data/lib/seeui.rb

@@ -0,0 +1,28 @@
+# If you'd like to store your stylesheets and/or templates in a non-standard location within your extension, 
+# you must provide a library file and register the extension explicitly like so:
+
+#base_directory  = File.join(File.dirname(__FILE__), '..')
+#stylesheets_dir = File.join(base_directory, 'seeui', 'stylesheets')
+#templates_dir   = File.join(base_directory, 'seeui', 'templates')
+#Compass::Frameworks.register('seeui', :stylesheets_directory => stylesheets_dir, :templates_directory => templates_dir)
+
+#If you're following the standard naming convention, 
+#but the stylesheet and template directories are not at the top level, you can just do this instead:
+
+# path from the library file to where you're keeping your compass stuff.
+#base_directory  = File.join(File.dirname(__FILE__), '..', 'compass')
+#Compass::Frameworks.register('seeui', :path => base_directory)
+
+#require 'compass'
+#extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+#Compass::Frameworks.register('seeui', :path => extension_path)
+
+require 'compass'
+Compass::Frameworks.register("seeui", :path => "#{File.dirname(__FILE__)}/..")
+
+module Seeui
+
+  VERSION = "0.1"
+  DATE = "2013-06-01"
+
+end

data/stylesheets/_seeui.scss

@@ -0,0 +1,11 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+// https://github.com/ericam
+@import "compass/css3";
+@import "seeui/reset";
+@import "seeui/vars";
+@import "seeui/func";
+@import "seeui/ui-refresh";
+@import "seeui/ui-slider";
+@import "seeui/ui-slider.gionee";
+@import "seeui/ui-toolbar";
+@import "seeui/ui-toolbar.gionee";

data/stylesheets/seeui/_button.scss

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ 按钮基本样式 STYLE
+ * 调用时只需添加对应的类到html结构中（例如：<a href="#" class="btn-gray"></a>）
+ * -------------------------------------------------------------------------
+ */
+.ui-button{
+	display:inline-block; border:1px solid #D2D2D2; padding:3*$px 4*$px; cursor:pointer;
+	text-decoration:none; color:#333; font-size:14*$font-x;
+	@include border-radius(2*$px);
+	@include box-sizing(border-box);
+	-webkit-appearance:none;
+	-webkit-user-select:none;
+}
+
+.com-btn{
+	display:inline-block; padding:8*$px 20*$px; border:1px #D4D5D6 solid; cursor:pointer;
+	text-align:center; vertical-align:middle; color:#646464;
+	@include border-radius(2px);
+	@include box-sizing(border-box);
+	@include text-shadow(0 -1px 0 $text-shadow-color);
+	@include lg(top,$standard-linear-l,$standard-linear-r);
+	&:active{@include lg(top,$standard-linear-r,$standard-linear-l);}
+}
+
+
+.button{
+	text-align:center; margin:10*$px 0;
+	.btn-gray{
+		@extend .com-btn;
+	}
+
+	.btn-top{
+		@extend .com-btn;
+	}
+}

data/stylesheets/seeui/_func.scss

@@ -0,0 +1,223 @@
+@charset "UTF-8";
+
+@mixin arrow($wh:5px,$mrt:0,$posr:10px,$bw:2px,$bc:#7e7e7e,$der:left){
+/**
+ * 自定义方向小箭头
+ * 
+ * @param $wh 	宽度和高度
+ * @param $mrt 	margin-top位置
+ * @param $posr postion right位置
+ * @param $bw 	边框宽度
+ * @param $bc 	边框颜色
+ * @param $der 	箭头方向
+ */
+	&::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;
+
+		@if ($der == top){
+			@include transform(rotate(45deg));
+		}
+		@else if($der == right){
+			right:$posr; margin-top:$mrt;
+			@include transform(rotate(45deg+90));
+		}
+		@else if($der == bottom){
+			right:$posr; margin-top:$mrt;
+			@include transform(rotate(45deg+180));
+		}
+		@else if($der == left){
+			left:50%; margin-left:-$wh/2;
+			@include transform(rotate(45deg+-90));
+		}
+	}
+};
+
+@mixin lg($dir, $col1, $col2){background-color:$col2; @include background-image(linear-gradient($dir, $col1, $col2));}
+
+@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 in-bottom-panel(){
+/**
+ * --------------------------------------------------------------------------
+ * ++ 页面底部版权信息的panel基本样式 STYLE
+ * -------------------------------------------------------------------------
+ */
+	#footer{
+		.button .btn-top{width:70%;}
+		.copyright{text-align:center; font-size:12*$font-x; line-height:150%;}
+	}
+}
+
+@mixin in-tab(){
+/**
+ * --------------------------------------------------------------------------
+ * ++ TAB切换效果基本样式 STYLE
+ * -------------------------------------------------------------------------
+ */
+	#in-tab{
+		height:44*$px; font-size:$big-font-size;
+		ul li{display:inline-block; float:left; width:25%; overflow:hidden;}
+		ul li .tab-inner{text-align:center; height:44*$px; line-height:44*$px;}
+		ul li.selected .tab-inner{border-bottom-color:#FF7E00;}
+	}
+}
+
+@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;
+			}
+			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;}
+			span.on{background:#FF7E00;}
+		}
+
+		/*.in-slider-prev,.in-slider-next{}
+		.in-slider-prev{}
+		.in-slider-next{}*/
+	}
+}
+
+@mixin in-form(){
+/**
+ * --------------------------------------------------------------------------
+ * ++ Form表单基本样式 STYLE
+ * -------------------------------------------------------------------------
+ */
+	.in-form{
+		margin:10*$px auto 0; width:80%; text-align:center; color:$text-form-color;
+		input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],select{
+			width:100%; height:40*$px; padding:0 10*$px;
+			-webkit-appearance:none; border:none; background:white; margin:0;
+			box-sizing:border-box; @include lg(top,#F4F4F4,#FFF);
+		}
+
+		& .form-field{
+			margin-bottom:10*$px;
+		}
+
+		& .form-input, & .form-select{
+			display:-webkit-box; -webkit-box-align:center;
+			section:nth-child(1){
+				min-width:60*$px;  text-align:right;
+			}
+			section:nth-child(2){
+				-webkit-box-flex:1;
+			}
+			input:focus{
+			background:#FFF;
+			}
+		}
+
+		& .form-text{
+			input{
+				border:1px solid #e3e3e3; border-top:none; width:100%; padding:0 5*$px;
+				@include border-radius(2px);
+				@include box-shadow(0 -1px 0 #e3e3e3 inset);
+				@include box-shadow(0 1px 0 #adadad inset);
+
+			}
+		}
+
+		& .form-radio{
+			input[type="radio"],input[type="radio"] + label{
+				float:left; line-height:1.5;
+			}
+
+			& span{
+				margin-right:10*$px; display:inline-block;
+			}
+		}
+
+		& .form-select{
+			section:nth-child(2){
+				@include arrow($wh:5px,$mrt:-4px,$bw:2px,$der:bottom);
+			}
+			select{
+				border:1px solid #e3e3e3; border-top:none; width:100%; padding:0 5*$px;
+				@include border-radius(2px);
+				@include box-shadow(0 -1px 0 #e3e3e3 inset);
+				@include box-shadow(0 1px 0 #adadad inset);
+			}
+		}
+
+	}
+}
+
+@mixin com-button(){
+/**
+ * --------------------------------------------------------------------------
+ * ++ 按钮基本样式 STYLE
+ * -------------------------------------------------------------------------
+ */
+	.com-btn{
+		display:inline-block; padding:8*$px 20*$px; border:1px #D4D5D6 solid; cursor:pointer;
+		text-align:center; vertical-align:middle; color:#646464;
+		@include border-radius(2px);
+		@include box-sizing(border-box);
+		@include text-shadow(0 -1px 0 $text-shadow-color);
+		@include lg(top,$standard-linear-l,$standard-linear-r);
+		&:active{@include lg(top,$standard-linear-r,$standard-linear-l);}
+	}
+
+
+	.button{
+		text-align:center; margin:10*$px 0;
+		.btn-gray{
+			@extend .com-btn;
+		}
+
+		.btn-top{
+			@extend .com-btn;
+		}
+	}
+}
+
+
+
+
+@mixin com-list(){
+/**
+ * --------------------------------------------------------------------------
+ * ++ 列表基本样式 STYLE
+ * -------------------------------------------------------------------------
+ */
+}

data/stylesheets/seeui/_reset.scss

@@ -0,0 +1,161 @@
+@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;
+	}
+}

data/stylesheets/seeui/_ui-form.scss

@@ -0,0 +1,58 @@
+.ui-form{
+	margin:10*$px auto 0; width:80%; text-align:center; color:$text-form-color;
+	input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],select{
+		width:100%; height:40*$px; padding:0 10*$px;
+		-webkit-appearance:none; border:none; background:white; margin:0;
+		box-sizing:border-box; @include lg(top,#F4F4F4,#FFF);
+	}
+
+	& .form-field{
+		margin-bottom:10*$px;
+	}
+
+	& .ui-form-input, & .ui-form-select{
+		display:-webkit-box; -webkit-box-align:center;
+		section:nth-child(1){
+			min-width:60*$px;  text-align:right;
+		}
+		section:nth-child(2){
+			-webkit-box-flex:1;
+		}
+		input:focus{
+		background:#FFF;
+		}
+	}
+
+	& .form-text{
+		input{
+			border:1px solid #e3e3e3; border-top:none; width:100%; padding:0 5*$px;
+			@include border-radius(2px);
+			@include box-shadow(0 -1px 0 #e3e3e3 inset);
+			@include box-shadow(0 1px 0 #adadad inset);
+
+		}
+	}
+
+	& .ui-form-radio{
+		input[type="radio"],input[type="radio"] + label{
+			float:left; line-height:1.5;
+		}
+
+		& span{
+			margin-right:10*$px; display:inline-block;
+		}
+	}
+
+	& .ui-form-select{
+		section:nth-child(2){
+			@include arrow($wh:5px,$mrt:-4px,$bw:2px,$der:bottom);
+		}
+		select{
+			border:1px solid #e3e3e3; border-top:none; width:100%; padding:0 5*$px;
+			@include border-radius(2px);
+			@include box-shadow(0 -1px 0 #e3e3e3 inset);
+			@include box-shadow(0 1px 0 #adadad inset);
+		}
+	}
+
+}

data/stylesheets/seeui/_ui-refresh.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ 加载更多系列效果基本样式 STYLE
+ * -------------------------------------------------------------------------
+ */
+
+.ui-refresh{
+	.ui-refresh-up, .ui-refresh-down{
+		padding:15px; background:#DEDEDE; text-shadow:0 1px 1px #FFF; text-align:center;
+	}
+}
+

data/stylesheets/seeui/_ui-slider.gionee.scss

@@ -0,0 +1,9 @@
+.ui-slider{width:320*$px; height:auto;}
+.ui-slider-pic > *{width:320*$px; height:auto;}
+
+.ui-slider-handle{
+	position:absolute; left:0; bottom:0; width:100%; height:3*$px; 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;}
+}

data/stylesheets/seeui/_ui-slider.scss

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ 幻灯片效果基本样式 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;
+}
+

data/stylesheets/seeui/_ui-toolbar.gionee.scss

@@ -0,0 +1,13 @@
+/**
+ * --------------------------------------------------------------------------
+ * ++ toolbar基本控制样式 STYLE
+ * -------------------------------------------------------------------------
+ */
+.ui-toolbar-wrap{height:40*$px; background:#dedede;}
+
+.ui-toolbar-backbtn{background:#F1F1F1; border:1px solid #CCC; border-width:1px 1px 1px 0; margin:5*$px 0 0 20*$px; padding:0 8*$px 0 6*$px; height:30*$px; line-height:29*$px;}
+.ui-toolbar-backbtn::before, .ui-toolbar-backbtn::after{content:""; position:absolute; left:-8*$px; top:-1*$px;  width:0; height:0; display:block; border:solid; border-width:15*$px 8*$px 15*$px 0;}
+.ui-toolbar-backbtn::before{border-color:transparent #ccc transparent transparent;}
+.ui-toolbar-backbtn::after{border-color:transparent #F1F1F1 transparent transparent; left:-7*$px;}
+
+.ui-toolbar-title{line-height:40*$px; text-align:center;}

data/stylesheets/seeui/_ui-toolbar.scss

@@ -0,0 +1,62 @@
+/**
+ * --------------------------------------------------------------------------
+ * ++ toolbar基本样式 STYLE
+ * -------------------------------------------------------------------------
+ */
+.ui-toolbar {
+    width:100%;
+    z-index: 999
+}
+
+.ui-toolbar-wrap {
+    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;
+}

data/stylesheets/seeui/_vars.scss

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+/*only support webkit browser*/
+$experimental-support-for-mozilla:      false;
+$experimental-support-for-webkit:       true;
+$support-for-original-webkit-gradients: true;
+$experimental-support-for-opera:        false;
+$experimental-support-for-microsoft:    false;
+$experimental-support-for-khtml:        false;
+
+/*public vars*/
+$font-size: 1rem/15;
+$font-x: 1px;
+$font-xx: 1.5px;
+$font-xxx: 2px;
+$websize:480;
+$rem: 1rem/20;
+$px:1px;
+
+
+$border-color-gray: #b1b1b1;
+
+/*color vars*/
+$standard-bg-color:#FFF;
+$standard-main-color:#F40;
+$standard-sub-color1:#F60;
+$standard-sub-color2:#F90;
+$standard-linear-l:#F8F8F8;
+$standard-linear-r:#E6E6E6;
+
+/*text vars*/
+$text-main-color:#3a3a3a;
+$text-shadow-color:#fff;
+$text-form-color:#646464;
+$text-highlight-color:#F40;
+$text-sub-color:#666;
+$text-em-color:#D40000;
+$text-link-color:#3a3a3a;
+$title-font-size:24px;
+$tab-font-size:18px;
+$big-font-size:16px;
+$normal-font-size:14px;
+$small-font-size:12px;
+
+/*space vars*/
+$page-padding-width:10px;
+$list-margin-width:30px;
+$first-list-margin-width:20px;
+$list-item-margin-width:10px;
+$group-list-margin-width:20px;
+
+/*screen min-width, min-height*/
+$screen-min-width:320px;
+$screen-max-width:360px;
+$screen-min-height:480px;

data/templates/project/_seeui.scss

@@ -0,0 +1,7 @@
+//** seeui **//
+
+// Import ---------------------------------------------------
+
+@import "seeui";
+
+/* seeui ---------------------------------------------------*/

data/templates/project/manifest.rb

@@ -0,0 +1,18 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet '_seeui.scss', :media => 'screen, projection'
+#html 'lightbox.html'
+#javascript 'lightbox.js'
+
+#description "css-only lightboxes with optional javascript bootstrapping."
+
+#help %Q{
+#Installs some html, a stylesheet partial, and javascript bootstrapping that 
+#you can use directly or refer to as an example.
+#}
+
+#welcome_message %Q{
+#Please refer to the lightbox.html file to see how the markup should be 
+#structured, the lightbox stylesheet partial to see how to use the library and 
+#apply it to your markup, and the lightbox.js script to see how 
+#bootstrapping works.
+#}

metadata

@@ -0,0 +1,71 @@
+--- !ruby/object:Gem::Specification
+name: seeui
+version: !ruby/object:Gem::Version
+  version: 0.1.1.beta
+platform: ruby
+authors:
+- Hankewins
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-04-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+description: a mobile library seeui implementation for compass
+email: hankewins@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.mkdn
+- lib/seeui.rb
+- stylesheets/seeui/_button.scss
+- stylesheets/seeui/_func.scss
+- stylesheets/seeui/_reset.scss
+- stylesheets/seeui/_ui-form.scss
+- stylesheets/seeui/_ui-refresh.scss
+- stylesheets/seeui/_ui-slider.gionee.scss
+- stylesheets/seeui/_ui-slider.scss
+- stylesheets/seeui/_ui-toolbar.gionee.scss
+- stylesheets/seeui/_ui-toolbar.scss
+- stylesheets/seeui/_vars.scss
+- stylesheets/_seeui.scss
+- templates/project/manifest.rb
+- templates/project/_seeui.scss
+homepage: http://www.hankewins.com/
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>'
+    - !ruby/object:Gem::Version
+      version: 1.3.1
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.3
+signing_key: 
+specification_version: 4
+summary: a mobile library seeui implementation for compass
+test_files: []