Commit 990a1e38d4e83757343a01726d2f114fcd1ccb8d

Authored by DANG
1 parent ffc06a7f8a

Edit css

Showing 3 changed files with 17 additions and 4 deletions Inline Diff

app/images/logo_mobile_world.png

7.29 KB

1 /* Space out content a bit */ 1 /* Space out content a bit */
2 @import "../fonts/font.css"; 2 @import "../fonts/font.css";
3 body { 3 body {
4 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 4 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
5
6 } 5 }
7 .padding-right-0{ 6 .padding-right-0{
8 padding-right: 0!important; 7 padding-right: 0!important;
9 } 8 }
10 .padding-left-0{ 9 .padding-left-0{
11 padding-left: 0!important; 10 padding-left: 0!important;
12 } 11 }
13 button.red{ 12 button.red{
14 color: #ffffff; 13 color: #ffffff;
15 background-color: #ff0000; 14 background-color: #ff0000;
16 border: 1px solid #ff0000; 15 border: 1px solid #ff0000;
17 16
18 } 17 }
19 button.white{ 18 button.white{
20 border: 1px solid #ff8080; 19 border: 1px solid #ff8080;
21 color: #ff8080; 20 color: #ff8080;
22 background-color: #ffffff; 21 background-color: #ffffff;
23 } 22 }
24 button.brown{ 23 button.brown{
25 background-color: #666666; 24 background-color: #666666;
26 border: 1px solid #666666; 25 border: 1px solid #666666;
27 color: #ffffff; 26 color: #ffffff;
28 border-radius: 5px; 27 border-radius: 5px;
29 } 28 }
30 button.black{ 29 button.black{
31 border: 1px solid #c9c9c9; 30 border: 1px solid #c9c9c9;
32 background-color: #343434; 31 background-color: #343434;
33 color: #ffffff; 32 color: #ffffff;
34 padding: 1px 6px; 33 padding: 1px 6px;
35 } 34 }
36 #tshirt-container{ 35 #tshirt-container{
37 border-left: 1px solid #dcdcdc; 36 border-left: 1px solid #dcdcdc;
38 border-right: 1px solid #dcdcdc; 37 border-right: 1px solid #dcdcdc;
39 } 38 }
40 /*HEADER*/ 39 /*HEADER*/
41 header{ 40 header{
42 border-bottom: 1px solid #dcdcdc; 41 border-bottom: 1px solid #dcdcdc;
43 } 42 }
44 header .logo{ 43 header .logo{
45 color: #ed1d24; 44 color: #ed1d24;
46 font-size: 30px; 45 font-size: 30px;
47 text-transform: uppercase; 46 text-transform: uppercase;
48 font-weight: bold; 47 font-weight: bold;
49 } 48 }
50 header .logo img{ 49 header .logo img{
51 width: 60px; 50 width: 60px;
52 } 51 }
53 /*NAVIGATION*/ 52 /*NAVIGATION*/
54 nav{ 53 nav{
55 border-bottom: 1px solid #dcdcdc; 54 border-bottom: 1px solid #dcdcdc;
56 padding: 10px 0; 55 padding: 10px 0;
57 } 56 }
58 nav h2{ 57 nav h2{
59 font-size: 27px; 58 font-size: 27px;
60 margin: 0 0; 59 margin: 0 0;
61 } 60 }
62 nav ul{ 61 nav ul{
63 list-style: none; 62 list-style: none;
64 padding-left: 0; 63 padding-left: 0;
65 margin-bottom: 0; 64 margin-bottom: 0;
66 65
67 } 66 }
68 nav ul li{ 67 nav ul li{
69 margin-left: 2px; 68 margin-left: 2px;
70 float: left; 69 float: left;
71 padding: 6px 12px; 70 padding: 6px 12px;
72 background-color: #999999; 71 background-color: #999999;
73 position: relative; 72 position: relative;
74 } 73 }
75 nav ul li i.fa{ 74 nav ul li i.fa{
76 position: absolute; 75 position: absolute;
77 color: #ffffff; 76 color: #ffffff;
78 font-size: 18px; 77 font-size: 18px;
79 right: -4px; 78 right: -4px;
80 top: 50%; 79 top: 50%;
81 transform: translateX(-50%) translateY(-50%); 80 transform: translateX(-50%) translateY(-50%);
82 -webkit-transform: translateX(-50%) translateY(-50%); 81 -webkit-transform: translateX(-50%) translateY(-50%);
83 } 82 }
84 nav ul li a{ 83 nav ul li a{
85 color: #ffffff; 84 color: #ffffff;
86 } 85 }
87 nav ul li:hover a{ 86 nav ul li:hover a{
88 text-decoration: none; 87 text-decoration: none;
89 color: #ffffff; 88 color: #ffffff;
90 } 89 }
91 nav ul li.action{ 90 nav ul li.action{
92 color: #ffffff; 91 color: #ffffff;
93 background-color: #ed1d24; 92 background-color: #ed1d24;
94 } 93 }
95 /*ASIDE*/ 94 /*ASIDE*/
96 aside{ 95 aside{
97 margin: 10px 0; 96 margin: 10px 0;
98 } 97 }
99 98
100 aside .break-down{ 99 aside .break-down{
101 padding: 0 0; 100 padding: 0 0;
102 } 101 }
103 aside .break-down i.fa{ 102 aside .break-down i.fa{
104 font-size: 35px; 103 font-size: 35px;
105 color: #ff0000; 104 color: #ff0000;
106 } 105 }
107 aside .break-line{ 106 aside .break-line{
108 height: 10px; 107 height: 10px;
109 } 108 }
110 aside .break-line hr{ 109 aside .break-line hr{
111 border-top: 1px dotted #cccccc; 110 border-top: 1px dotted #cccccc;
112 } 111 }
113 aside .step{ 112 aside .step{
114 margin: 0 0; 113 margin: 0 0;
115 } 114 }
116 aside .step .title{ 115 aside .step .title{
117 font-size: 15px; 116 font-size: 15px;
118 line-height: 16px; 117 line-height: 16px;
119 font-weight: bold; 118 font-weight: bold;
120 margin-bottom: 3px; 119 margin-bottom: 3px;
121 } 120 }
122 aside .step .title-notice{ 121 aside .step .title-notice{
123 font-size: 13px; 122 font-size: 13px;
124 line-height: 16px; 123 line-height: 16px;
125 margin-bottom: 3px; 124 margin-bottom: 3px;
126 } 125 }
127 aside .step .title-notice .require{ 126 aside .step .title-notice .require{
128 font-size: 10px; 127 font-size: 10px;
129 } 128 }
130 aside .step .step-box{ 129 aside .step .step-box{
131 border: 2px solid #dcdcdc; 130 border: 2px solid #dcdcdc;
132 font-size: 12px; 131 font-size: 12px;
133 132
134 } 133 }
135 /*Step 1*/ 134 /*Step 1*/
136 aside .step .step-box .tshirt-design{ 135 aside .step .step-box .tshirt-design{
137 border: 1px solid #cccccc; 136 border: 1px solid #cccccc;
138 background-color: #f5f5f5; 137 background-color: #f5f5f5;
139 margin: 10px 10px; 138 margin: 10px 10px;
140 } 139 }
140 aside .step .step-box .tshirt-design:hover{
141 border: 1px solid #ff0000;
142 }
143 aside .step .step-box .tshirt-design button:hover{
144 background-color: #fa7b7b;
145 border: 1px solid #fa7b7b;
146 }
141 aside .step .step-box .tshirt-design div{ 147 aside .step .step-box .tshirt-design div{
142 float: left; 148 float: left;
143 } 149 }
144 aside .step .step-box .tshirt-design .icon{ 150 aside .step .step-box .tshirt-design .icon{
145 padding: 4px 4px; 151 padding: 4px 4px;
146 border-right: 1px solid #cccccc; 152 border-right: 1px solid #cccccc;
147 153
148 } 154 }
149 aside .step .step-box .tshirt-design .icon img{ 155 aside .step .step-box .tshirt-design .icon img{
150 height: 50px; 156 height: 50px;
151 } 157 }
152 aside .step .step-box .tshirt-design .name{ 158 aside .step .step-box .tshirt-design .name{
153 padding: 10px 10px; 159 padding: 10px 10px;
154 160
155 } 161 }
156 aside .step .step-box .tshirt-design .action{ 162 aside .step .step-box .tshirt-design .action{
157 padding: 10px 10px; 163 padding: 10px 10px;
158 float: right; 164 float: right;
159 165
160 } 166 }
161 aside .step .step-box .tshirt-design .action button{ 167 aside .step .step-box .tshirt-design .action button{
162 padding: 8px 10px; 168 padding: 8px 10px;
163 } 169 }
164 /*Step 2*/ 170 /*Step 2*/
165 aside .step .step-box .tshirt-color{ 171 aside .step .step-box .tshirt-color{
166 padding: 6px 10px; 172 padding: 6px 10px;
167 position: relative; 173 position: relative;
168 } 174 }
169 aside .step .step-box .tshirt-color ul.choice-color{ 175 aside .step .step-box .tshirt-color ul.choice-color{
170 float: left; 176 float: left;
171 list-style: none; 177 list-style: none;
172 padding-left: 0; 178 padding-left: 0;
173 width: 100%; 179 width: 100%;
174 margin-bottom: 3px; 180 margin-bottom: 3px;
175 } 181 }
176 aside .step .step-box .tshirt-color ul.choice-color li{ 182 aside .step .step-box .tshirt-color ul.choice-color li{
177 margin: 0 10px 0 0; 183 margin: 0 10px 0 0;
178 border: 1px solid #cccccc; 184 border: 1px solid #cccccc;
179 padding: 2px 2px; 185 padding: 2px 2px;
180 float: left; 186 float: left;
187 cursor: pointer;
188 }
189 aside .step .step-box .tshirt-color ul.choice-color li.action{
190 border: 1px solid #ff0000;
191 }
192 aside .step .step-box .tshirt-color ul.choice-color li:hover{
193 border: 1px solid #ff0000;
181 } 194 }
182 aside .step .step-box .tshirt-color ul.choice-color li div{ 195 aside .step .step-box .tshirt-color ul.choice-color li div{
183 height: 30px; 196 height: 30px;
184 width: 30px; 197 width: 30px;
185 } 198 }
186 199
187 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 200 aside .step .step-box .tshirt-color ul.choice-color li.white div{
188 background-color: #ece7e4; 201 background-color: #ece7e4;
189 } 202 }
190 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 203 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
191 background-color: #e7dfd0; 204 background-color: #e7dfd0;
192 } 205 }
193 aside .step .step-box .tshirt-color .color-name{ 206 aside .step .step-box .tshirt-color .color-name{
194 width: 100%; 207 width: 100%;
195 font-size: 10px; 208 font-size: 10px;
196 } 209 }
197 aside .step .step-box .tshirt-color .view-more{ 210 aside .step .step-box .tshirt-color .view-more{
198 position: absolute; 211 position: absolute;
199 bottom: 6px; 212 bottom: 6px;
200 right: 10px; 213 right: 10px;
201 } 214 }
202 /*Step 3*/ 215 /*Step 3*/
203 aside .step .step-box .tshirt-saveorder{ 216 aside .step .step-box .tshirt-saveorder{
204 padding: 10px 10px 6px 10px; 217 padding: 10px 10px 6px 10px;
205 } 218 }
206 aside .step .step-box .tshirt-saveorder .action{ 219 aside .step .step-box .tshirt-saveorder .action{
207 width: 50%; 220 width: 50%;
208 float: left; 221 float: left;
209 } 222 }
210 aside .step .step-box .tshirt-saveorder .action:first-child{ 223 aside .step .step-box .tshirt-saveorder .action:first-child{
211 padding-right: 5px; 224 padding-right: 5px;
212 } 225 }
213 aside .step .step-box .tshirt-saveorder .action:last-child{ 226 aside .step .step-box .tshirt-saveorder .action:last-child{
214 padding-left: 5px; 227 padding-left: 5px;
215 } 228 }
216 aside .step .step-box .tshirt-saveorder .action button{ 229 aside .step .step-box .tshirt-saveorder .action button{
217 padding: 8px 10px; 230 padding: 8px 10px;
218 231
219 } 232 }
220 aside .step .step-box .tshirt-saveorder .action button .text{ 233 aside .step .step-box .tshirt-saveorder .action button .text{
221 float: left; 234 float: left;
222 width: 80%; 235 width: 80%;
223 text-align: center; 236 text-align: center;
224 padding-left: 10px; 237 padding-left: 10px;
225 vertical-align: bottom; 238 vertical-align: bottom;
226 } 239 }
227 aside .step .step-box .tshirt-saveorder .action button .arrow{ 240 aside .step .step-box .tshirt-saveorder .action button .arrow{
228 float: left; 241 float: left;
229 width: 20%; 242 width: 20%;
230 height: 40px; 243 height: 40px;
231 position: relative; 244 position: relative;
232 } 245 }
233 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 246 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
234 position: absolute; 247 position: absolute;
235 top: 50%; 248 top: 50%;
236 right: -6px; 249 right: -6px;
237 transform: translateX(-50%) translateY(-50%); 250 transform: translateX(-50%) translateY(-50%);
238 -webkit-transform: translateX(-50%) translateY(-50%); 251 -webkit-transform: translateX(-50%) translateY(-50%);
239 } 252 }
240 aside .step .step-box .tshirt-saveorder .notice{ 253 aside .step .step-box .tshirt-saveorder .notice{
241 padding: 5px 0 0 0; 254 padding: 5px 0 0 0;
242 } 255 }
243 /*Step 4*/ 256 /*Step 4*/
244 aside .step .title-notice{ 257 aside .step .title-notice{
245 258
246 } 259 }
247 aside .step .step-box .change-design{ 260 aside .step .step-box .change-design{
248 padding: 4px 4px; 261 padding: 4px 4px;
249 } 262 }
250 aside .step .step-box .change-design table{ 263 aside .step .step-box .change-design table{
251 264
252 } 265 }
253 aside .step .step-box .change-design table tr{ 266 aside .step .step-box .change-design table tr{
254 border-bottom: 1px dotted #cccccc; 267 border-bottom: 1px dotted #cccccc;
255 } 268 }
256 aside .step .step-box .change-design table tr:last-child{ 269 aside .step .step-box .change-design table tr:last-child{
257 border-bottom: 0; 270 border-bottom: 0;
258 } 271 }
259 272
260 /*Step 5- finish*/ 273 /*Step 5- finish*/
261 aside .step .finish-design{ 274 aside .step .finish-design{
262 padding: 20px 0; 275 padding: 20px 0;
263 } 276 }
264 aside .step .finish-design button{ 277 aside .step .finish-design button{
265 width: 100%; 278 width: 100%;
266 padding: 8px 10px; 279 padding: 8px 10px;
267 } 280 }
268 281
269 /*DESIGN CONTENT*/ 282 /*DESIGN CONTENT*/
270 #tshirt-content{ 283 #tshirt-content{
271 position: relative; 284 position: relative;
272 } 285 }
273 #tshirt-content .switch-border-design{ 286 #tshirt-content .switch-border-design{
274 position: absolute; 287 position: absolute;
275 top: 5px; 288 top: 5px;
276 right: 10px; 289 right: 10px;
277 color: red; 290 color: red;
278 font-size: 11px; 291 font-size: 11px;
279 } 292 }
280 #tshirt-content .tshirt-image{ 293 #tshirt-content .tshirt-image{
281 padding: 20px 0 0 0; 294 padding: 20px 0 0 0;
282 } 295 }
283 #tshirt-content .tshirt-choice{ 296 #tshirt-content .tshirt-choice{
284 297
285 } 298 }
286 #tshirt-content .tshirt-choice ul{ 299 #tshirt-content .tshirt-choice ul{
287 list-style: none; 300 list-style: none;
288 padding-left: 0; 301 padding-left: 0;
289 display: table; 302 display: table;
290 margin: auto; 303 margin: auto;
291 } 304 }
292 #tshirt-content .tshirt-choice ul li{ 305 #tshirt-content .tshirt-choice ul li{
293 float: left; 306 float: left;
294 307
295 margin: 10px 10px; 308 margin: 10px 10px;
296 } 309 }
297 #tshirt-content .tshirt-choice ul li .image{ 310 #tshirt-content .tshirt-choice ul li .image{
298 border: 1px solid #cccccc; 311 border: 1px solid #cccccc;
299 padding: 3px 3px; 312 padding: 3px 3px;
300 } 313 }
301 #tshirt-content .tshirt-choice ul li.focus{ 314 #tshirt-content .tshirt-choice ul li.focus{
302 315
303 } 316 }
304 #tshirt-content .tshirt-choice ul li.focus .image{ 317 #tshirt-content .tshirt-choice ul li.focus .image{
305 border: 1px solid #ff0000; 318 border: 1px solid #ff0000;
306 } 319 }
307 /*MODAL Design*/ 320 /*MODAL Design*/
308 #tshirt-design{ 321 #tshirt-design{
309 background-color: #666666; 322 background-color: #666666;
310 } 323 }
311 #tshirt-design .modal-dialog{ 324 #tshirt-design .modal-dialog{
312 width: 75%; 325 width: 75%;
313 margin: 0 auto; 326 margin: 0 auto;
314 } 327 }
315 #tshirt-design .modal-dialog .modal-content{ 328 #tshirt-design .modal-dialog .modal-content{
316 background-color: transparent; 329 background-color: transparent;
317 border-radius: 0; 330 border-radius: 0;
318 border: 0; 331 border: 0;
319 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 332 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
320 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 333 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
321 } 334 }
322 #tshirt-design .modal-dialog .modal-content .modal-header{ 335 #tshirt-design .modal-dialog .modal-content .modal-header{
323 padding: 0 0 10px 0; 336 padding: 0 0 10px 0;
324 border-bottom: 0; 337 border-bottom: 0;
325 border-shadow: none!important; 338 border-shadow: none!important;
326 } 339 }
327 #tshirt-design .modal-dialog .modal-content .modal-body{ 340 #tshirt-design .modal-dialog .modal-content .modal-body{
328 background-color: #f5f5f5; 341 background-color: #f5f5f5;
329 padding: 0 0; 342 padding: 0 0;
330 } 343 }
331 #tshirt-design header{ 344 #tshirt-design header{
332 border-bottom: 1px solid #cccccc; 345 border-bottom: 1px solid #cccccc;
333 background-color: #dddddd; 346 background-color: #dddddd;
334 } 347 }
335 #tshirt-design header ul.nav{ 348 #tshirt-design header ul.nav{
336 padding-left: 0; 349 padding-left: 0;
337 list-style: none; 350 list-style: none;
338 } 351 }
339 #tshirt-design header ul.nav li{ 352 #tshirt-design header ul.nav li{
340 float: left; 353 float: left;
341 padding: 8px 26px; 354 padding: 8px 26px;
342 border-right: 1px solid #cccccc; 355 border-right: 1px solid #cccccc;
343 font-size: 14px; 356 font-size: 14px;
344 cursor: pointer; 357 cursor: pointer;
345 } 358 }
346 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 359 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
347 background-color: red; 360 background-color: red;
348 color: #ffffff; 361 color: #ffffff;
349 } 362 }
350 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 363 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
351 color: #ffffff; 364 color: #ffffff;
352 } 365 }
353 #tshirt-design header ul.nav li i.fa{ 366 #tshirt-design header ul.nav li i.fa{
354 color: #fe070f; 367 color: #fe070f;
355 font-size: 20px; 368 font-size: 20px;
356 margin-right: 10px; 369 margin-right: 10px;
357 } 370 }
358 #tshirt-design header .action{ 371 #tshirt-design header .action{
359 372
360 } 373 }
361 #tshirt-design header .action button{ 374 #tshirt-design header .action button{
362 padding: 2px 10px; 375 padding: 2px 10px;
363 margin: 6px 10px; 376 margin: 6px 10px;
364 } 377 }
365 #tshirt-design header .action button:hover{ 378 #tshirt-design header .action button:hover{
366 background-color: red; 379 background-color: red;
367 color: #ffffff; 380 color: #ffffff;
368 } 381 }
369 382
370 /*Aside modal*/ 383 /*Aside modal*/
371 .aside{ 384 .aside{
372 } 385 }
373 .aside #choice-design-option{ 386 .aside #choice-design-option{
374 list-style: none; 387 list-style: none;
375 padding-left: 0; 388 padding-left: 0;
376 margin-top: 10px; 389 margin-top: 10px;
377 390
378 } 391 }
379 .aside #choice-design-option li{ 392 .aside #choice-design-option li{
380 border: 1px solid #cdcdcd; 393 border: 1px solid #cdcdcd;
381 position: relative; 394 position: relative;
382 cursor: pointer; 395 cursor: pointer;
383 } 396 }
384 .aside #choice-design-option li .hover{ 397 .aside #choice-design-option li .hover{
385 background-color: #fddad4; 398 background-color: #fddad4;
386 opacity: 0.6; 399 opacity: 0.6;
387 position: absolute; 400 position: absolute;
388 width: 100%; 401 width: 100%;
389 height: 100%; 402 height: 100%;
390 display: none; 403 display: none;
391 } 404 }
392 .aside #choice-design-option li:hover .hover{ 405 .aside #choice-design-option li:hover .hover{
393 display: block; 406 display: block;
394 } 407 }
395 408
396 .aside #choice-design-option li .title{ 409 .aside #choice-design-option li .title{
397 background: url("../images/bg1.png") repeat #cdcdcd; 410 background: url("../images/bg1.png") repeat #cdcdcd;
398 padding: 3px 10px; 411 padding: 3px 10px;
399 } 412 }
400 .aside #choice-design-option li .title i.fa{ 413 .aside #choice-design-option li .title i.fa{
401 color: #000000; 414 color: #000000;
402 } 415 }
403 416
404 .aside #choice-design-option li .content{ 417 .aside #choice-design-option li .content{
405 418
406 } 419 }
407 .aside #choice-design-option li .content i.fa{ 420 .aside #choice-design-option li .content i.fa{
408 font-size: 30px; 421 font-size: 30px;
409 color: #fe070f; 422 color: #fe070f;
410 margin: 8px 0; 423 margin: 8px 0;
411 } 424 }
412 .aside #choice-design-option li .content .des{ 425 .aside #choice-design-option li .content .des{
413 padding: 3px 10px 3px 0; 426 padding: 3px 10px 3px 0;
414 } 427 }
415 428
416 429
417 .aside #choice-illustration{ 430 .aside #choice-illustration{
418 list-style: none; 431 list-style: none;
419 padding-left: 0; 432 padding-left: 0;
420 margin-top: 10px; 433 margin-top: 10px;
421 434
422 } 435 }
423 .aside #choice-illustration li{ 436 .aside #choice-illustration li{
424 border: 1px solid #cdcdcd; 437 border: 1px solid #cdcdcd;
425 position: relative; 438 position: relative;
426 } 439 }
427 440
428 .aside #choice-illustration li .title{ 441 .aside #choice-illustration li .title{
429 background: url("../images/bg1.png") repeat #cdcdcd; 442 background: url("../images/bg1.png") repeat #cdcdcd;
430 padding: 3px 10px; 443 padding: 3px 10px;
431 } 444 }
432 445
433 .aside #choice-illustration li .content { 446 .aside #choice-illustration li .content {
434 padding: 10px 10px; 447 padding: 10px 10px;
435 } 448 }
436 449
437 .aside #choice-illustration li .content select{ 450 .aside #choice-illustration li .content select{
438 width: 100%; 451 width: 100%;
439 } 452 }
440 453
441 .aside #choice-illustration li .content .illustration-list { 454 .aside #choice-illustration li .content .illustration-list {
442 width: 100%; 455 width: 100%;
443 border: #bbb solid 1px; 456 border: #bbb solid 1px;
444 background: #FFF; 457 background: #FFF;
445 margin-top: 5px; 458 margin-top: 5px;
446 } 459 }
447 460
448 .aside #choice-illustration li .content .illustration-list .illstration-item{ 461 .aside #choice-illustration li .content .illustration-list .illstration-item{
449 height: 65px; 462 height: 65px;
450 overflow: hidden; 463 overflow: hidden;
451 float: left; 464 float: left;
452 margin-left: 5px; 465 margin-left: 5px;
453 } 466 }
454 467
455 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 468 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
456 outline: 2px solid #ed1d24; 469 outline: 2px solid #ed1d24;
457 } 470 }
458 471
459 .aside #choice-illustration li .content .illustration-list .illstration-item img { 472 .aside #choice-illustration li .content .illustration-list .illstration-item img {
460 width: 62px; 473 width: 62px;
461 cursor: pointer; 474 cursor: pointer;
462 } 475 }
463 476
464 .aside #choice-illustration li .content .color-patterns { 477 .aside #choice-illustration li .content .color-patterns {
465 width: 100%; 478 width: 100%;
466 border: #bbb solid 1px; 479 border: #bbb solid 1px;
467 background: #FFF; 480 background: #FFF;
468 margin-top: 5px; 481 margin-top: 5px;
469 } 482 }
470 483
471 .aside #choice-illustration li .content .color-patterns .color-pattern-item{ 484 .aside #choice-illustration li .content .color-patterns .color-pattern-item{
472 height: 20px; 485 height: 20px;
473 float: left; 486 float: left;
474 margin-left: 4px; 487 margin-left: 4px;
475 margin-top: 2px; 488 margin-top: 2px;
476 width: 20px; 489 width: 20px;
477 cursor: pointer; 490 cursor: pointer;
478 border: 1px solid #ddd; 491 border: 1px solid #ddd;
479 } 492 }
480 493
481 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover { 494 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
482 outline: 1px solid #ed1d24; 495 outline: 1px solid #ed1d24;
483 } 496 }
484 497
485 498
486 /*Design content*/ 499 /*Design content*/
487 .tshirt-design-container{ 500 .tshirt-design-container{
488 position: relative; 501 position: relative;
489 } 502 }
490 .tshirt-design-container .design-content{ 503 .tshirt-design-container .design-content{
491 padding: 10px 50px 10px 25px; 504 padding: 10px 50px 10px 25px;
492 } 505 }
493 .tshirt-design-container .design-content .content{ 506 .tshirt-design-container .design-content .content{
494 width: 100%; 507 width: 100%;
495 min-height: 650px; 508 min-height: 650px;
496 background-color: #f0efea; 509 background-color: #f0efea;
497 padding: 40px 85px; 510 padding: 40px 85px;
498 height: 100%; 511 height: 100%;
499 } 512 }
500 .tshirt-design-container .design-content .content .selection-design{ 513 .tshirt-design-container .design-content .content .selection-design{
501 border: 1px solid #ff0000; 514 border: 1px solid #ff0000;
502 width: 100%; 515 width: 100%;
503 height: 620px; 516 height: 620px;
504 } 517 }
505 .tshirt-design-container .agree-design{ 518 .tshirt-design-container .agree-design{
506 position: absolute; 519 position: absolute;
507 right: -16px; 520 right: -16px;
508 top: 40%; 521 top: 40%;
509 } 522 }
510 .tshirt-design-container .trash-design{ 523 .tshirt-design-container .trash-design{
511 position: absolute; 524 position: absolute;
512 right: 5px; 525 right: 5px;
513 bottom: 0; 526 bottom: 0;
514 } 527 }
515 528
516 529
517 /*FOOTER*/ 530 /*FOOTER*/
518 footer{ 531 footer{
519 background-color: #333333; 532 background-color: #333333;
520 } 533 }
521 footer ul.nav-footer{ 534 footer ul.nav-footer{
522 padding-left: 0; 535 padding-left: 0;
523 list-style: none; 536 list-style: none;
524 } 537 }
525 footer ul.nav-footer li{ 538 footer ul.nav-footer li{
526 float: left; 539 float: left;
527 padding: 3px 10px; 540 padding: 3px 10px;
528 border-right: 1px dotted #ffffff; 541 border-right: 1px dotted #ffffff;
529 542
530 } 543 }
531 footer ul.nav-footer li a{ 544 footer ul.nav-footer li a{
532 color: #ffffff; 545 color: #ffffff;
533 font-size: 11px; 546 font-size: 11px;
534 } 547 }
535 /* Customize container */ 548 /* Customize container */
536 @media (min-width: 768px) { 549 @media (min-width: 768px) {
537 .container { 550 .container {
538 /*max-width: 730px;*/ 551 /*max-width: 730px;*/
539 } 552 }
540 } 553 }
541 554
542 /* Responsive: Portrait tablets and up */ 555 /* Responsive: Portrait tablets and up */
543 @media screen and (min-width: 768px) { 556 @media screen and (min-width: 768px) {
544 /* Remove the padding we set earlier */ 557 /* Remove the padding we set earlier */
545 558
546 } 559 }
1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> 1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
2 <div class="row"> 2 <div class="row">
3 <header> 3 <header>
4 <div class="logo"> 4 <div class="logo">
5 <img src="images/uniqlo_logo.png" alt="Logo Uniqlo" /> 5 <img src="images/logo_mobile_world.png" alt="Logo Mobile World" />
6 Uniqlo Customize 6 MOBILE WORLD
7 </div> 7 </div>
8 </header> 8 </header>
9 <nav class="clearfix"> 9 <nav class="clearfix">
10 <div class="col-sm-12"> 10 <div class="col-sm-12">
11 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> 11 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
12 <ul class="pull-right"> 12 <ul class="pull-right">
13 <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></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> 14 <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
15 <li class="action">デザインする</li> 15 <li class="action">デザインする</li>
16 </ul> 16 </ul>
17 </div> 17 </div>
18 </nav> 18 </nav>
19 <article class="clearfix"> 19 <article class="clearfix">
20 <aside class="col-sm-5"> 20 <aside class="col-sm-5">
21 <div class="step"> 21 <div class="step">
22 <div class="title"> 22 <div class="title">
23 1. デザインを作る 23 1. デザインを作る
24 </div> 24 </div>
25 <div class="step-box"> 25 <div class="step-box">
26 <div class="tshirt-design clearfix"> 26 <div class="tshirt-design clearfix">
27 <div class="icon"> 27 <div class="icon">
28 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> 28 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
29 </div> 29 </div>
30 <div class="name"> 30 <div class="name">
31 背中背中 (28x22) 31 背中背中 (28x22)
32 </div> 32 </div>
33 <div class="action"> 33 <div class="action">
34 <button class="red" ng-click="modalTShirtDesign()"> 34 <button class="red" ng-click="modalTShirtDesign()">
35 <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る 35 <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
36 </button> 36 </button>
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- BREAK DOWN--> 42 <!-- BREAK DOWN-->
43 <div class="text-center break-down"> 43 <div class="text-center break-down">
44 <img src="images/bg_step_arrow.gif" alt="arrow" /> 44 <img src="images/bg_step_arrow.gif" alt="arrow" />
45 </div> 45 </div>
46 46
47 <!-- STEP 2--> 47 <!-- STEP 2-->
48 <div class="step"> 48 <div class="step">
49 <div class="title"> 49 <div class="title">
50 2.アイテムカラーを変更する 50 2.アイテムカラーを変更する
51 </div> 51 </div>
52 <div class="step-box clearfix"> 52 <div class="step-box clearfix">
53 <div class="tshirt-color"> 53 <div class="tshirt-color">
54 <ul class="choice-color clearfix"> 54 <ul class="choice-color clearfix">
55 <li class="white"><div></div></li> 55 <li class="white action"><div></div></li>
56 <li class="blue"><div></div></li> 56 <li class="blue"><div></div></li>
57 </ul> 57 </ul>
58 <div class="color-name"> 58 <div class="color-name">
59 color: 00 WHITE 59 color: 00 WHITE
60 </div> 60 </div>
61 <div class="view-more"> 61 <div class="view-more">
62 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 62 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
63 </div> 63 </div>
64 </div> 64 </div>
65 </div> 65 </div>
66 </div> 66 </div>
67 67
68 <!-- BREAK DOWN--> 68 <!-- BREAK DOWN-->
69 <div class="text-center break-down"> 69 <div class="text-center break-down">
70 <img src="images/bg_step_arrow.gif" alt="arrow" /> 70 <img src="images/bg_step_arrow.gif" alt="arrow" />
71 </div> 71 </div>
72 72
73 <!-- STEP 3--> 73 <!-- STEP 3-->
74 <div class="step"> 74 <div class="step">
75 <div class="step-box clearfix"> 75 <div class="step-box clearfix">
76 <div class="tshirt-saveorder"> 76 <div class="tshirt-saveorder">
77 <div class="clearfix"> 77 <div class="clearfix">
78 <div class="action"> 78 <div class="action">
79 <button class="white"> 79 <button class="white">
80 <div class="text"> 80 <div class="text">
81 このデザインを保存する 81 このデザインを保存する
82 </div> 82 </div>
83 <div class="arrow"> 83 <div class="arrow">
84 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 84 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
85 </div> 85 </div>
86 </button> 86 </button>
87 </div> 87 </div>
88 <div class="action"> 88 <div class="action">
89 <button class="red"> 89 <button class="red">
90 <div class="text"> 90 <div class="text">
91 このデザインで注文する 91 このデザインで注文する
92 </div> 92 </div>
93 <div class="arrow clearfix"> 93 <div class="arrow clearfix">
94 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 94 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
95 </div> 95 </div>
96 </button> 96 </button>
97 </div> 97 </div>
98 </div> 98 </div>
99 <div class="notice"> 99 <div class="notice">
100 デザインを保存するには、ログインしてください 100 デザインを保存するには、ログインしてください
101 </div> 101 </div>
102 </div> 102 </div>
103 </div> 103 </div>
104 104
105 <!-- BREAL LINE--> 105 <!-- BREAL LINE-->
106 <div class="text-center break-line"> 106 <div class="text-center break-line">
107 <hr /> 107 <hr />
108 </div> 108 </div>
109 109
110 <!-- STEP 4--> 110 <!-- STEP 4-->
111 <div class="step"> 111 <div class="step">
112 <div class="title-notice"> 112 <div class="title-notice">
113 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> 113 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
114 </div> 114 </div>
115 <div class="step-box"> 115 <div class="step-box">
116 <div class="change-design"> 116 <div class="change-design">
117 <table> 117 <table>
118 <tr> 118 <tr>
119 <td class="text-center">商品</td> 119 <td class="text-center">商品</td>
120 <td>MENドライカノコポロシャツ・ポケツキ半袖(ホワイト)</td> 120 <td>MENドライカノコポロシャツ・ポケツキ半袖(ホワイト)</td>
121 <td class="text-right"> 121 <td class="text-right">
122 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> 122 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
123 </td> 123 </td>
124 </tr> 124 </tr>
125 <tr> 125 <tr>
126 <td width="10%" class="text-center">加工方法</td> 126 <td width="10%" class="text-center">加工方法</td>
127 <td width="70%">シルク:胸中央 (27×27)</td> 127 <td width="70%">シルク:胸中央 (27×27)</td>
128 <td width="20%" class="text-right"> 128 <td width="20%" class="text-right">
129 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> 129 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
130 </td> 130 </td>
131 </tr> 131 </tr>
132 </table> 132 </table>
133 </div> 133 </div>
134 </div> 134 </div>
135 </div> 135 </div>
136 <!-- STEP 5- finish--> 136 <!-- STEP 5- finish-->
137 <div class="step"> 137 <div class="step">
138 <div class="finish-design"> 138 <div class="finish-design">
139 <button class="white"> 139 <button class="white">
140 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 140 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
141 </button> 141 </button>
142 </div> 142 </div>
143 143
144 </div> 144 </div>
145 </div> 145 </div>
146 </aside> 146 </aside>
147 <section id="tshirt-content" class="col-sm-7 text-center"> 147 <section id="tshirt-content" class="col-sm-7 text-center">
148 <div class="switch-border-design"> 148 <div class="switch-border-design">
149 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す 149 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
150 </div> 150 </div>
151 <div class="tshirt-image"> 151 <div class="tshirt-image">
152 <img src="images/t-shirt/front.png" alt="" /> 152 <img src="images/t-shirt/front.png" alt="" />
153 </div> 153 </div>
154 <div class="tshirt-choice"> 154 <div class="tshirt-choice">
155 <ul> 155 <ul>
156 <li class="front focus"> 156 <li class="front focus">
157 <div>前</div> 157 <div>前</div>
158 <div class="image"> 158 <div class="image">
159 <img src="images/t-shirt_icon/tshirt1-front.png" alt="" /> 159 <img src="images/t-shirt_icon/tshirt1-front.png" alt="" />
160 </div> 160 </div>
161 161
162 </li> 162 </li>
163 <li class="back"> 163 <li class="back">
164 <div>後</div> 164 <div>後</div>
165 <div class="image"> 165 <div class="image">
166 <img src="images/t-shirt_icon/tshirt1-back.png" alt="" /> 166 <img src="images/t-shirt_icon/tshirt1-back.png" alt="" />
167 </div> 167 </div>
168 168
169 </li> 169 </li>
170 </ul> 170 </ul>
171 </div> 171 </div>
172 </section> 172 </section>
173 </article> 173 </article>
174 <footer class="clearfix"> 174 <footer class="clearfix">
175 <ul class="nav-footer"> 175 <ul class="nav-footer">
176 <li><a href="#">店舗検索</a></li> 176 <li><a href="#">店舗検索</a></li>
177 <li><a href="#">お客様窓口</a></li> 177 <li><a href="#">お客様窓口</a></li>
178 <li><a href="#">企業情報</a></li> 178 <li><a href="#">企業情報</a></li>
179 <li><a href="#">採用情報</a></li> 179 <li><a href="#">採用情報</a></li>
180 <li><a href="#">プライバシーポリシー</a></li> 180 <li><a href="#">プライバシーポリシー</a></li>
181 </ul> 181 </ul>
182 </footer> 182 </footer>
183 183
184 <!--MODAL CONTENT--> 184 <!--MODAL CONTENT-->
185 <div ng-include="'views/tshirt-design.html'"></div> 185 <div ng-include="'views/tshirt-design.html'"></div>
186 </div> 186 </div>
187 187
188 188
189 </div> 189 </div>
190 190