TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit a56541cf9577c3f4ab4210fcd243d52e6882e1e2

Authored by DANG
1 parent 19a110aefd
Exists in master and in 2 other branches develop, master-heroku

add css

Showing 3 changed files with 61 additions and 9 deletions Side-by-side Diff

... ... @@ -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>
app/views/tshirt-design.html
Diff comments   View file @ a56541c
... ... @@ -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 おすすめデザインを使う