add css

DANG
1 parent 97d46dae2b
Showing 3 changed files with 26 additions and 3 deletions Side-by-side Diff
app/scripts/controllers/main.js
app/styles/main.css
app/views/main.html
@@ -2,6 +2,7 @@
 	'use strict';
 	app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) {
 		//Define and init var
+		$('[data-toggle="tooltip"]').tooltip()
 		$rootScope.API_URL = 'http://domain.com';
 		$scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
 		$scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
@@ -12,6 +12,9 @@
   height:100%;
   width:100%;
 }
+a:hover{
+  text-transform: none;
+}
 /*Scroll bar style*/
 ::-webkit-scrollbar {
   -webkit-appearance: none;
@@ -122,6 +125,10 @@
   border-right: 1px solid #000000;
   font-size: 12px;
 }
+header .top-menu li a:hover{
+  color: #cccccc;
+  text-decoration: none;
+}
 header .top-menu li:last-child a{
   border-right: 0;
 }
  
  
  
@@ -134,20 +141,31 @@
   float: left;
   margin: 0 10px;
 }
+header .top-control li div{
+  cursor: pointer;
+}
 header .top-control li .bt-yellow{
   background-color: #fe6a00;
   color: #ffffff;
   padding: 3px 10px;
   font-size: 12px;
 }
+header .top-control li .bt-yellow:hover{
+  background-color: #fe913e;
+}
+
 header .user-control{
   background-color: #888888;
   text-align: center;
+  cursor: pointer;
 }
 header .user-control div{
   font-size: 12px;
   color: #ffffff;
 }
+header .user-control div:first-child:hover{
+  background-color: #b2b1b1;
+}
 header .user-control div:first-child{
   padding: 10px 10px;
 }
@@ -155,6 +173,9 @@
   background-color: #fe6a00;
   padding: 3px 10px;
 }
+header .user-control div:last-child:hover{
+  background-color: #fe913e;
+}
 /*NAVIGATION*/
 nav{
   border-bottom: 1px solid #dcdcdc;
@@ -379,7 +400,7 @@
   padding-left: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action button{
-  padding: 4px 10px;
+  padding: 4px 35px;
   width: 100%;
 }
  
@@ -956,6 +977,7 @@
   header .top-control li{
     margin: 0 4px;
   }
+
   header .top-menu{
     display: table;
     margin: auto;
@@ -60,9 +60,9 @@
       <div class="col-sm-12">
         <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
         <ul class="pull-right">
-          <li class="circle"><a href="#">商品に戻る</a></li>
+          <li class="circle" data-toggle="tooltip" data-placement="bottom" title="前の画面に戻るときはこのボタンをお使いください。"><a href="#">商品に戻る</a></li>
           <li class="line"></li>
-          <li class="circle"><a href="#">加工方法に戻る</a></li>
+          <li class="circle" data-toggle="tooltip" data-placement="bottom" title="前の画面に戻るときはこのボタンをお使いください。"><a href="#">加工方法に戻る</a></li>
           <li class="line line-action"></li>
           <li class="circle action"><a href="#">デザインする</a></li>
         </ul>
...	...	@@ -2,6 +2,7 @@
2	2	'use strict';
3	3	app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) {
4	4	//Define and init var
	5	+ $('[data-toggle="tooltip"]').tooltip()
5	6	$rootScope.API_URL = 'http://domain.com';
6	7	$scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
7	8	$scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
...	...	@@ -12,6 +12,9 @@
12	12	height:100%;
13	13	width:100%;
14	14	}
	15	+a:hover{
	16	+ text-transform: none;
	17	+}
15	18	/Scroll bar style/
16	19	::-webkit-scrollbar {
17	20	-webkit-appearance: none;
...	...	@@ -122,6 +125,10 @@
122	125	border-right: 1px solid #000000;
123	126	font-size: 12px;
124	127	}
	128	+header .top-menu li a:hover{
	129	+ color: #cccccc;
	130	+ text-decoration: none;
	131	+}
125	132	header .top-menu li:last-child a{
126	133	border-right: 0;
127	134	}
128	135
129	136
130	137
...	...	@@ -134,20 +141,31 @@
134	141	float: left;
135	142	margin: 0 10px;
136	143	}
	144	+header .top-control li div{
	145	+ cursor: pointer;
	146	+}
137	147	header .top-control li .bt-yellow{
138	148	background-color: #fe6a00;
139	149	color: #ffffff;
140	150	padding: 3px 10px;
141	151	font-size: 12px;
142	152	}
	153	+header .top-control li .bt-yellow:hover{
	154	+ background-color: #fe913e;
	155	+}
	156	+
143	157	header .user-control{
144	158	background-color: #888888;
145	159	text-align: center;
	160	+ cursor: pointer;
146	161	}
147	162	header .user-control div{
148	163	font-size: 12px;
149	164	color: #ffffff;
150	165	}
	166	+header .user-control div:first-child:hover{
	167	+ background-color: #b2b1b1;
	168	+}
151	169	header .user-control div:first-child{
152	170	padding: 10px 10px;
153	171	}
...	...	@@ -155,6 +173,9 @@
155	173	background-color: #fe6a00;
156	174	padding: 3px 10px;
157	175	}
	176	+header .user-control div:last-child:hover{
	177	+ background-color: #fe913e;
	178	+}
158	179	/NAVIGATION/
159	180	nav{
160	181	border-bottom: 1px solid #dcdcdc;
...	...	@@ -379,7 +400,7 @@
379	400	padding-left: 5px;
380	401	}
381	402	aside .step .step-box .tshirt-saveorder .action button{
382		- padding: 4px 10px;
	403	+ padding: 4px 35px;
383	404	width: 100%;
384	405	}
385	406
...	...	@@ -956,6 +977,7 @@
956	977	header .top-control li{
957	978	margin: 0 4px;
958	979	}
	980	+
959	981	header .top-menu{
960	982	display: table;
961	983	margin: auto;
...	...	@@ -60,9 +60,9 @@
60	60	<div class="col-sm-12">
61	61	<h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
62	62	<ul class="pull-right">
63		- <li class="circle"><a href="#">商品に戻る</a></li>
	63	+ <li class="circle" data-toggle="tooltip" data-placement="bottom" title="前の画面に戻るときはこのボタンをお使いください。"><a href="#">商品に戻る</a></li>
64	64	<li class="line"></li>
65		- <li class="circle"><a href="#">加工方法に戻る</a></li>
	65	+ <li class="circle" data-toggle="tooltip" data-placement="bottom" title="前の画面に戻るときはこのボタンをお使いください。"><a href="#">加工方法に戻る</a></li>
66	66	<li class="line line-action"></li>
67	67	<li class="circle action"><a href="#">デザインする</a></li>
68	68	</ul>