add css

DANG
1 parent 19a110aefd
Showing 3 changed files with 61 additions and 9 deletions Side-by-side Diff
app/styles/main.css
app/views/main.html
app/views/tshirt-design.html
@@ -63,16 +63,31 @@
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
+
 }
 nav ul li{
   margin-left: 2px;
   float: left;
   padding: 6px 12px;
   background-color: #999999;
+  position: relative;
 }
+nav ul li i.fa{
+  position: absolute;
+  color: #ffffff;
+  font-size: 18px;
+  right: -4px;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+}
 nav ul li a{
   color: #ffffff;
 }
+nav ul li:hover a{
+  text-decoration: none;
+  color: #ffffff;
+}
 nav ul li.action{
   color: #ffffff;
   background-color: #ed1d24;
@@ -301,7 +316,8 @@
   background-color: transparent;
   border-radius: 0;
   border: 0;
-
+  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
+  box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-header{
   padding: 0 0 10px 0;
  
@@ -362,10 +378,15 @@
 }
 .aside #choice-design-option li{
   border: 1px solid #cdcdcd;
+  position: relative;
+  cursor: pointer;
 }
 .aside #choice-design-option li .hover{
   background-color: #fddad4;
-  opacity: 0.5;
+  opacity: 0.6;
+  position: absolute;
+  width: 100%;
+  height: 100%;
   display: none;
 }
 .aside #choice-design-option li:hover .hover{
@@ -420,6 +441,26 @@
   position: absolute;
   right: 5px;
   bottom: 0;
+}
+
+
+/*FOOTER*/
+footer{
+  background-color: #333333;
+}
+footer ul.nav-footer{
+  padding-left: 0;
+  list-style: none;
+}
+footer ul.nav-footer li{
+  float: left;
+  padding: 3px 10px;
+  border-right: 1px dotted #ffffff;
+
+}
+footer ul.nav-footer li a{
+  color: #ffffff;
+  font-size: 11px;
 }
 /* Customize container */
 @media (min-width: 768px) {
@@ -10,14 +10,13 @@
       <div class="col-sm-12">
         <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
         <ul class="pull-right">
-          <li><a href="#">商品に戻る</a></li>
-          <li><a href="#">加工方法に戻る</a></li>
+          <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
+          <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
           <li class="action">デザインする</li>
         </ul>
       </div>
     </nav>
-    <article>
-
+    <article class="clearfix">
         <aside class="col-sm-5">
           <div class="step">
             <div class="title">
  
@@ -171,8 +170,16 @@
             </ul>
           </div>
         </section>
-
     </article>
+    <footer class="clearfix">
+      <ul class="nav-footer">
+        <li><a href="#">店舗検索</a></li>
+        <li><a href="#">お客様窓口</a></li>
+        <li><a href="#">企業情報</a></li>
+        <li><a href="#">採用情報</a></li>
+        <li><a href="#">プライバシーポリシー</a></li>
+      </ul>
+    </footer>
  
     <!--MODAL CONTENT-->
     <div ng-include="'views/tshirt-design.html'"></div>
@@ -4,8 +4,8 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <button class="black" ng-click="modalClose()">x キャンセル</button>
-                <button class="black">> はじめての方へ</button>
+                <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
+                <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
             </div>
             <div class="modal-body">
                 <header class="clearfix">
@@ -36,6 +36,7 @@
                     <div class="aside col-xs-4">
                         <ul id="choice-design-option">
                             <li>
+                                <div class="hover"></div>
                                 <div class="title">
                                     <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                                     文字を追加
@@ -50,6 +51,7 @@
                                 </div>
                             </li>
                             <li>
+                                <div class="hover"></div>
                                 <div class="title">
                                     <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                                     イラストやイメージを追加
@@ -64,6 +66,7 @@
                                 </div>
                             </li>
                             <li>
+                                <div class="hover"></div>
                                 <div class="title">
                                     <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                                     自分の画像・写真を追加
@@ -78,6 +81,7 @@
                                 </div>
                             </li>
                             <li>
+                                <div class="hover"></div>
                                 <div class="title">
                                     <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                                     おすすめデザインを使う
...	...	@@ -63,16 +63,31 @@
63	63	list-style: none;
64	64	padding-left: 0;
65	65	margin-bottom: 0;
	66	+
66	67	}
67	68	nav ul li{
68	69	margin-left: 2px;
69	70	float: left;
70	71	padding: 6px 12px;
71	72	background-color: #999999;
	73	+ position: relative;
72	74	}
	75	+nav ul li i.fa{
	76	+ position: absolute;
	77	+ color: #ffffff;
	78	+ font-size: 18px;
	79	+ right: -4px;
	80	+ top: 50%;
	81	+ transform: translateX(-50%) translateY(-50%);
	82	+ -webkit-transform: translateX(-50%) translateY(-50%);
	83	+}
73	84	nav ul li a{
74	85	color: #ffffff;
75	86	}
	87	+nav ul li:hover a{
	88	+ text-decoration: none;
	89	+ color: #ffffff;
	90	+}
76	91	nav ul li.action{
77	92	color: #ffffff;
78	93	background-color: #ed1d24;
...	...	@@ -301,7 +316,8 @@
301	316	background-color: transparent;
302	317	border-radius: 0;
303	318	border: 0;
304		-
	319	+ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
	320	+ box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
305	321	}
306	322	#tshirt-design .modal-dialog .modal-content .modal-header{
307	323	padding: 0 0 10px 0;
308	324
...	...	@@ -362,10 +378,15 @@
362	378	}
363	379	.aside #choice-design-option li{
364	380	border: 1px solid #cdcdcd;
	381	+ position: relative;
	382	+ cursor: pointer;
365	383	}
366	384	.aside #choice-design-option li .hover{
367	385	background-color: #fddad4;
368		- opacity: 0.5;
	386	+ opacity: 0.6;
	387	+ position: absolute;
	388	+ width: 100%;
	389	+ height: 100%;
369	390	display: none;
370	391	}
371	392	.aside #choice-design-option li:hover .hover{
...	...	@@ -420,6 +441,26 @@
420	441	position: absolute;
421	442	right: 5px;
422	443	bottom: 0;
	444	+}
	445	+
	446	+
	447	+/FOOTER/
	448	+footer{
	449	+ background-color: #333333;
	450	+}
	451	+footer ul.nav-footer{
	452	+ padding-left: 0;
	453	+ list-style: none;
	454	+}
	455	+footer ul.nav-footer li{
	456	+ float: left;
	457	+ padding: 3px 10px;
	458	+ border-right: 1px dotted #ffffff;
	459	+
	460	+}
	461	+footer ul.nav-footer li a{
	462	+ color: #ffffff;
	463	+ font-size: 11px;
423	464	}
424	465	/* Customize container */
425	466	@media (min-width: 768px) {
...	...	@@ -10,14 +10,13 @@
10	10	<div class="col-sm-12">
11	11	<h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
12	12	<ul class="pull-right">
13		- <li><a href="#">商品に戻る</a></li>
14		- <li><a href="#">加工方法に戻る</a></li>
	13	+ <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
	14	+ <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
15	15	<li class="action">デザインする</li>
16	16	</ul>
17	17	</div>
18	18	</nav>
19		- <article>
20		-
	19	+ <article class="clearfix">
21	20	<aside class="col-sm-5">
22	21	<div class="step">
23	22	<div class="title">
24	23
...	...	@@ -171,8 +170,16 @@
171	170	</ul>
172	171	</div>
173	172	</section>
174		-
175	173	</article>
	174	+ <footer class="clearfix">
	175	+ <ul class="nav-footer">
	176	+ <li><a href="#">店舗検索</a></li>
	177	+ <li><a href="#">お客様窓口</a></li>
	178	+ <li><a href="#">企業情報</a></li>
	179	+ <li><a href="#">採用情報</a></li>
	180	+ <li><a href="#">プライバシーポリシー</a></li>
	181	+ </ul>
	182	+ </footer>
176	183
177	184	<!--MODAL CONTENT-->
178	185	<div ng-include="'views/tshirt-design.html'"></div>
...	...	@@ -4,8 +4,8 @@
4	4	<div class="modal-dialog" role="document">
5	5	<div class="modal-content">
6	6	<div class="modal-header">
7		- <button class="black" ng-click="modalClose()">x キャンセル</button>
8		- <button class="black">> はじめての方へ</button>
	7	+ <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
	8	+ <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
9	9	</div>
10	10	<div class="modal-body">
11	11	<header class="clearfix">
...	...	@@ -36,6 +36,7 @@
36	36	<div class="aside col-xs-4">
37	37	<ul id="choice-design-option">
38	38	<li>
	39	+ <div class="hover"></div>
39	40	<div class="title">
40	41	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
41	42	文字を追加
...	...	@@ -50,6 +51,7 @@
50	51	</div>
51	52	</li>
52	53	<li>
	54	+ <div class="hover"></div>
53	55	<div class="title">
54	56	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
55	57	イラストやイメージを追加
...	...	@@ -64,6 +66,7 @@
64	66	</div>
65	67	</li>
66	68	<li>
	69	+ <div class="hover"></div>
67	70	<div class="title">
68	71	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
69	72	自分の画像・写真を追加
...	...	@@ -78,6 +81,7 @@
78	81	</div>
79	82	</li>
80	83	<li>
	84	+ <div class="hover"></div>
81	85	<div class="title">
82	86	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
83	87	おすすめデザインを使う