lookitui 0.1.1.beta → 0.1.2.beta

data/stylesheets/lookitui/box/0.1/box.scss

@@ -0,0 +1,27 @@
+@charset "utf-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ box区块基本样式 STYLE
+ * 
+ * -------------------------------------------------------------------------
+ */
+.ui-box{
+	border:1px solid #ccc; border-bottom:0;
+	&.ui-box-follow{border-top:0;}
+}
+
+.ui-box-head{
+	border-bottom:1px solid #bababa; position:relative;
+	.ui-box-head-border{
+		padding:10px; border:1px solid #fff; overflow:hidden;
+		@include lg(top,#fcfcfc,#f1f1f1);
+	}
+	.ui-box-head-title{float:left; font-weight:bold;}
+	.ui-box-head-desc{float:left; font-size:12*$px; margin-left:10px; color:#808080;}
+	.ui-box-head-more{float:right;}
+}
+
+.ui-box-container{
+	background:#fff; border-bottom:1px solid #bababa;
+	.ui-box-content{padding:10px;}
+}

data/stylesheets/lookitui/button/0.1/button.scss

@@ -0,0 +1,46 @@
+@charset "utf-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ 按钮基本样式 STYLE
+ * 
+ * -------------------------------------------------------------------------
+ */
+button,input[type="button"],input[type="submit"],input[type="reset"]{
+	-webkit-appearance: button;
+	font-family: inherit;
+    font-size: 100%;
+    margin: 0;
+}
+
+.ui-button{
+	display:inline-block; text-align:center; text-decoration:none; vertical-align:middle; cursor:pointer; background-image:none;
+	@include border-radius(5*$px);
+	@include box-sizing(border-box);
+}
+
+//橙色列表
+.ui-button-lorange,.ui-button-morange,.ui-button-sorange{border:1px solid #ed8b22; color:#fff; @include lg(top,#fd9e37,#ff7c00);}
+.ui-button-lorange{width:160px; padding:10px 0;}
+.ui-button-morange{width:120px; padding:8px 0;}
+.ui-button-sorange{width:80px; padding:6px 0;}
+
+//浅灰色列表
+.ui-button-llight,.ui-button-mlight,.ui-button-slight{border:1px solid #bababa; color:#646464; @include lg(top,#f8f8f8,#e6e6e6);}
+.ui-button-llight{width:160px; padding:10px 0;}
+.ui-button-mlight{width:120px; padding:8px 0;}
+.ui-button-slight{width:80px; padding:6px 0;}
+
+//灰色列表
+.ui-button-lgray{}
+.ui-button-mgray{}
+.ui-button-sgray{}
+
+.ui-button-mwhite{
+	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);}
+}

data/stylesheets/lookitui/form/{1.0 → 0.1}/form.scss

@@ -1,22 +1,22 @@
 @charset "utf-8";
 .com-ui-form-input{
-	border:1px solid #e3e3e3; border-top:none; width:100%; padding:0 5*$px;
+	border:1px solid #e3e3e3; border-top:none; width:100%; padding:0 5px;
 	@include border-radius(2px);
 	@include box-shadow(0 -1px 0 #e3e3e3 inset);
 	@include box-shadow(0 1px 0 #adadad inset);
 }
 
 .ui-form{
-	margin:10*$px auto 0; max-width:80%; text-align:center; color:$text-form-color;
+	margin:10px auto 0; text-align:center; color:$text-form-color;
 	.ui-form-item{display:-webkit-box; -webkit-box-align:center; margin-bottom:10px;}
 	.ui-form-item > *{display:block;}
-	.ui-form-item .ui-label{min-width:60*$px;  text-align:right; vertical-align:middle;}
+	.ui-form-item .ui-label{min-width:60px;  text-align:right; vertical-align:middle;}
 	.ui-form-item .ui-input{
 		-webkit-box-flex:1; 
 		@extend .com-ui-form-input;
 	}
 	.ui-form-item .ui-select{
-		-webkit-box-flex:1; width:100%; position:relative; @include arrow($wh:5px,$mrt:-4px,$bw:2px,$der:bottom);
+		-webkit-box-flex:1; width:100%; position:relative; @include fn-arrow($wh:5px,$mrt:-4px,$bw:2px,$der:bottom);
 		select{
 			@extend .com-ui-form-input;
 		}
@@ -27,7 +27,7 @@
 	}
 	//验证码的样式设置
 	.ui-form-item-check{
-		a{color:#08c; font-size:12px;}
+		a{color:#08c; font-size:12*$px;}
 		img{margin:0 10px;}
 	}
 	//禁用文本框
@@ -37,7 +37,7 @@
 	}
 
 	input,select,textarea{
-		min-height:40*$px; padding:0 10*$px;
+		min-height:40px; padding:0 10px;
 		-webkit-appearance:none;
 		box-sizing:border-box; @include lg(top,#F4F4F4,#FFF);
 	}

data/stylesheets/lookitui/gotop/0.1/gotop.scss

@@ -0,0 +1,21 @@
+@charset "utf-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ toolbar组件+基本样式 STYLE
+ * 
+ * -------------------------------------------------------------------------
+ */
+@include fn-font-face('uxiconfont','../fonts/uxiconfont');
+.ui-gotop{
+    width:40px;
+    height:40px;
+    line-height:40px;
+    position:fixed;
+    right:10px;
+    bottom:20px;
+    background:#454545;
+    text-align:center;
+    @include box-shadow(0 0 5px rgba(0,0,0,1));
+    @include border-radius(3px);
+    font-family:'uxiconfont'; font-size:20*$px; color:#fff;
+}

data/stylesheets/lookitui/list/0.1/list.scss

@@ -0,0 +1,41 @@
+@charset "utf-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ list列表基本样式 STYLE
+ * 
+ * -------------------------------------------------------------------------
+ */
+.ui-list{
+	overflow:hidden;
+	.ui-list-item{
+		height:36px; line-height:36px; border-bottom:1px solid #f5f5f5; padding:0 10px;
+		@include fn-text-overflow();
+		a{display:block;}
+	}
+	.ui-arrow-right{
+		position:relative; padding-right:20px;
+		@include fn-arrow-right($bc:#e5e5e5);
+	}
+}
+.ui-list-gray{background:#fafafa;}
+
+/** 排行榜列表 **/
+.ui-list-rank{
+	.ui-arrow-right{
+		position:relative; padding-right:20px;
+		@include fn-arrow-right();
+	}
+	.num{
+		margin-right:5px; padding:2px 6px; background:#ccc; color:#fff; font-style:normal;
+		@include border-radius(20%);
+	}
+	li:nth-child(1) .num,li:nth-child(2) .num,li:nth-child(3) .num{background:#f88d03;}
+}
+
+
+/* <ul class="ui-list">
+	<li class="ui-list-item"><a href="#">列表内容一</a></li>
+	<li class="ui-list-item"><a href="#">列表内容二</a></li>
+	<li class="ui-list-item"><a href="#">列表内容三</a></li>
+	<li class="ui-list-item"><a href="#">列表内容四</a></li>
+</ul> */

data/stylesheets/lookitui/loading/0.1/loading.scss

@@ -0,0 +1,209 @@
+@charset "utf-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ Loading组件+基本样式 STYLE
+ * 
+ * -------------------------------------------------------------------------
+ */
+.ui-loading{
+	vertical-align:middle; text-align:center;
+}
+
+.ui-loading-label{
+	display:inline-block;
+    height: 40px; line-height:40px;
+}
+
+.ui-loading-img {
+	display:inline-block;
+	vertical-align:middle;
+    width: 40px;
+    height: 40px;
+    text-indent: -10000px;
+    background: url('../img/ui-loading.png') 0 0 no-repeat;
+    //background: url('../img/ui-loading-orange.png') 0 0 no-repeat;
+    -webkit-background-size: 40px 40px;
+    -webkit-animation-name: ui-loading-anim;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: step-start;
+}
+
+@-webkit-keyframes ui-loading-anim {
+	from {
+        -webkit-transform: rotate(0deg);
+    }
+    8.32% {
+        -webkit-transform: rotate(0deg);
+    }
+    8.33% {
+        -webkit-transform: rotate(30deg);
+    }
+    16.65% {
+        -webkit-transform: rotate(30deg);
+    }
+    16.66% {
+        -webkit-transform: rotate(60deg);
+    }
+    24.99% {
+        -webkit-transform: rotate(60deg);
+    }
+    25% {
+        -webkit-transform: rotate(90deg);
+    }
+    33.32% {
+        -webkit-transform: rotate(90deg);
+    }
+    33.33% {
+        -webkit-transform: rotate(120deg);
+    }
+    41.65% {
+        -webkit-transform: rotate(120deg);
+    }
+    41.66% {
+        -webkit-transform: rotate(150deg);
+    }
+    49.99% {
+        -webkit-transform: rotate(150deg);
+    }
+    50% {
+        -webkit-transform: rotate(180deg);
+    }
+    58.32% {
+        -webkit-transform: rotate(180deg);
+    }
+    58.33% {
+        -webkit-transform: rotate(210deg);
+    }
+    66.65% {
+        -webkit-transform: rotate(210deg);
+    }
+    66.66% {
+        -webkit-transform: rotate(240deg);
+    }
+    74.99% {
+        -webkit-transform: rotate(240deg);
+    }
+    75% {
+        -webkit-transform: rotate(270deg);
+    }
+    83.32% {
+        -webkit-transform: rotate(270deg);
+    }
+    83.33% {
+        -webkit-transform: rotate(300deg);
+    }
+    91.65% {
+        -webkit-transform: rotate(300deg);
+    }
+    91.66% {
+        -webkit-transform: rotate(330deg);
+    }
+    99.99% {
+        -webkit-transform: rotate(330deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+
+//
+.ui-loading-dot{
+	display:inline-block; 
+	margin-right:5px;
+	position:relative;
+	width:40px;
+	height:40px;
+}
+
+.ui-loading-dot-item{
+	position:absolute;
+	background-color:#FFA200;
+	width:9px;
+	height:9px;
+	-webkit-border-radius:6px;
+	-webkit-animation-name:bounce_circularG;
+	-webkit-animation-duration:1.04s;
+	-webkit-animation-iteration-count:infinite;
+	-webkit-animation-direction:linear;
+	border-radius:6px;
+	animation-name:bounce_circularG;
+	animation-duration:1.04s;
+	animation-iteration-count:infinite;
+	animation-direction:linear;
+}
+
+.d_1{
+left:0;
+top:16px;
+-webkit-animation-delay:0.39s;
+animation-delay:0.39s;
+}
+
+.d_2{
+left:4px;
+top:4px;
+-webkit-animation-delay:0.52s;
+animation-delay:0.52s;
+}
+
+.d_3{
+top:0;
+left:16px;
+-webkit-animation-delay:0.65s;
+animation-delay:0.65s;
+}
+
+.d_4{
+right:4px;
+top:4px;
+-webkit-animation-delay:0.78s;
+animation-delay:0.78s;
+}
+
+.d_5{
+right:0;
+top:16px;
+-webkit-animation-delay:0.91s;
+animation-delay:0.91s;
+}
+
+.d_6{
+right:4px;
+bottom:4px;
+-webkit-animation-delay:1.04s;
+animation-delay:1.04s;
+}
+
+.d_7{
+left:16px;
+bottom:0;
+-webkit-animation-delay:1.17s;
+animation-delay:1.17s;
+}
+
+.d_8{
+left:4px;
+bottom:4px;
+-webkit-animation-delay:1.3s;
+animation-delay:1.3s;
+}
+
+@-webkit-keyframes bounce_circularG{
+0%{
+-webkit-transform:scale(1)}
+
+100%{
+-webkit-transform:scale(.3)}
+
+}
+
+@keyframes bounce_circularG{
+0%{
+transform:scale(1)}
+
+100%{
+transform:scale(.3)}
+
+}

data/stylesheets/lookitui/tab/0.1/tab.scss

@@ -0,0 +1,17 @@
+@charset "utf-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ tab区块基本样式 STYLE
+ * 
+ * -------------------------------------------------------------------------
+ */
+.ui-tab-nav{
+	@include display-box();
+	li{@include box-flex(1); border-bottom:1px solid #e8e8e8;}
+	li a{display:block; height:40px; line-height:40px; text-align:center;}
+	.ui-tab-nav-active a{border-bottom:2px solid #ffa200;}
+}
+
+.ui-tab-content{
+	.ui-tab-panel{padding:10px;}
+}

data/stylesheets/lookitui/toolbar/0.1/toolbar.scss

@@ -0,0 +1,79 @@
+@charset "utf-8";
+/**
+ * --------------------------------------------------------------------------
+ * ++ toolbar组件+基本样式 STYLE
+ * 
+ * -------------------------------------------------------------------------
+ */
+
+@include fn-font-face('uxiconfont','../fonts/uxiconfont');
+
+.ui-toolbar {
+    width:100%;
+    z-index: 999
+}
+
+.ui-toolbar-wrap {
+    height:40px; line-height:40px; background:#dedede;
+    position: relative;
+}
+
+.ui-toolbar-placeholder {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: visible;
+    position: relative;
+}
+
+.ui-toolbar-title {
+    height: 100%;
+    text-align:center;
+}
+
+.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;
+    height:100%; width:100%;
+    text-align: center;
+}
+.ui-toolbar-right > * {
+    display: inline-block;
+    float: right;
+    height:100%; width:100%;
+    text-align: center;
+}
+
+//橙色
+.ui-toolbar-bgorange{
+	@include lg(top,#ef684e,#df5a3e); color:#fff;
+	.ui-toolbar-left > *,.ui-toolbar-right > *{width:44px; font-family:'uxiconfont'; font-size:18*$px; color:#fff;}
+	.ui-toolbar-title{@include text-shadow(0 1px 1px #d2d0d0);}
+}
+
+//黑色
+.ui-toolbar-bgblack{
+	background:#3d3d3d; color:#fff;
+	.ui-toolbar-left > *,.ui-toolbar-right > *{width:44px; font-family:'uxiconfont'; font-size:18*$px; color:#fff;}
+	a:hover,a:active{background:#0D314F;}
+}
+
+//灰色
+.ui-toolbar-bggray{
+	background:#F7F7F7; color:#111;
+	.ui-toolbar-left > *,.ui-toolbar-right > *{width:44px; font-family:'uxiconfont'; font-size:18*$px; color:#ccc;}
+	a:hover,a:active{background:#f2f2f2;}
+}