TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit c55955c063478113d1b399e06119c730e198bbfa

Authored by DANG
1 parent 8841fa14eb
Exists in master and in 1 other branch develop

new menu

Showing 17 changed files with 131 additions and 88 deletions Inline Diff

No preview for this file type
No preview for this file type
app/images/.DS_Store
Diff comments   View file @ c55955c
No preview for this file type
app/images/arrow1.png
Diff comments   View file @ c55955c

4.11 KB
app/images/arrow2.png
Diff comments   View file @ c55955c

4.1 KB
app/images/bgbutton1.png
Diff comments   View file @ c55955c

4.16 KB
app/images/bgbutton2.png
Diff comments   View file @ c55955c

3.18 KB
app/images/linebg.png
Diff comments   View file @ c55955c

6.4 KB
app/images/logo_mobile_world.png
View file @ c55955c

7.29 KB
app/images/logobottom.png
Diff comments   View file @ c55955c

9.31 KB
app/images/stepicon1.png
Diff comments   View file @ c55955c

5.57 KB
app/images/stepicon2.png
Diff comments   View file @ c55955c

5.68 KB
app/images/t-shirt_icon/tshirt1.gif
Diff comments   View file @ c55955c

1.09 KB | W: | H:

1.33 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/uniqlo_logo.png
View file @ c55955c

5.04 KB
app/images/yeoman.png
View file @ c55955c

13.2 KB
1 /* Space out content a bit */ 1 /* Space out content a bit */
2 @import "../fonts/font.css"; 2 @import "../fonts/font.css";
3 @import "../fonts/font_canvas/font-canvas.css"; 3 @import "../fonts/font_canvas/font-canvas.css";
4 @import "placedesign.css"; 4 @import "placedesign.css";
5 html{ 5 html{
6 height:100%; 6 height:100%;
7 width:100%; 7 width:100%;
8 } 8 }
9 body { 9 body {
10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 10 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
11 height:100%; 11 height:100%;
12 width:100%; 12 width:100%;
13 } 13 }
14 /*Scroll bar style*/ 14 /*Scroll bar style*/
15 ::-webkit-scrollbar { 15 ::-webkit-scrollbar {
16 -webkit-appearance: none; 16 -webkit-appearance: none;
17 width: 7px; 17 width: 7px;
18 } 18 }
19 ::-webkit-scrollbar-track { 19 ::-webkit-scrollbar-track {
20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 20 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
21 } 21 }
22 22
23 ::-webkit-scrollbar-thumb { 23 ::-webkit-scrollbar-thumb {
24 border-radius: 4px; 24 border-radius: 4px;
25 background-color: rgba(0,0,0,.5); 25 background-color: rgba(0,0,0,.5);
26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 26 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
27 } 27 }
28 /*End scroll bar style*/ 28 /*End scroll bar style*/
29 .padding-right-0{ 29 .padding-right-0{
30 padding-right: 0!important; 30 padding-right: 0!important;
31 } 31 }
32 .padding-left-0{ 32 .padding-left-0{
33 padding-left: 0!important; 33 padding-left: 0!important;
34 } 34 }
35 button.red{ 35 button.red{
36 color: #ffffff; 36 color: #ffffff;
37 background-color: #ff0000; 37 background-color: #ff0000;
38 border: 1px solid #ff0000; 38 border: 1px solid #ff0000;
39 39
40 } 40 }
41 button.white{ 41 button.white{
42 border: 1px solid #ff8080; 42 border: 1px solid #ff8080;
43 color: #ff8080; 43 color: #ff8080;
44 background-color: #ffffff; 44 background-color: #ffffff;
45 } 45 }
46 button.brown{ 46 button.brown{
47 background-color: #666666; 47 background-color: #666666;
48 border: 1px solid #666666; 48 border: 1px solid #666666;
49 color: #ffffff; 49 color: #ffffff;
50 border-radius: 5px; 50 border-radius: 5px;
51 } 51 }
52 button.black{ 52 button.black{
53 border: 1px solid #c9c9c9; 53 border: 1px solid #c9c9c9;
54 background-color: #343434; 54 background-color: #343434;
55 color: #ffffff; 55 color: #ffffff;
56 padding: 1px 6px; 56 padding: 1px 6px;
57 } 57 }
58 #tshirt-container{ 58 #tshirt-container{
59 border-left: 1px solid #dcdcdc; 59 border-left: 1px solid #dcdcdc;
60 border-right: 1px solid #dcdcdc; 60 border-right: 1px solid #dcdcdc;
61 } 61 }
62 /*HEADER*/ 62 /*HEADER*/
63 header{ 63 header{
64 border-bottom: 1px solid #dcdcdc; 64 border-bottom: 1px solid #dcdcdc;
65 } 65 }
66 header .logo{ 66 header .logo{
67 padding-left: 0!important; 67 padding-left: 0!important;
68 } 68 }
69 header .logo img{ 69 header .logo img{
70 height: 60px; 70 height: 60px;
71 } 71 }
72 header .social-share{ 72 header .social-share{
73 list-style: none; 73 list-style: none;
74 background-color: #eeeeee; 74 background-color: #eeeeee;
75 display: table; 75 display: table;
76 padding-left: 0; 76 padding-left: 0;
77 margin-bottom: 0; 77 margin-bottom: 0;
78 } 78 }
79 header .social-share li{ 79 header .social-share li{
80 float: left; 80 float: left;
81 margin: 15px 15px; 81 margin: 15px 15px;
82 background-color: #c5c5c5; 82 background-color: #c5c5c5;
83 width: 30px; 83 width: 30px;
84 height: 30px; 84 height: 30px;
85 -moz-border-radius: 15px; 85 -moz-border-radius: 15px;
86 -webkit-border-radius: 15px; 86 -webkit-border-radius: 15px;
87 border-radius: 15px; 87 border-radius: 15px;
88 text-align: center; 88 text-align: center;
89 padding: 6px 0; 89 padding: 6px 0;
90 } 90 }
91 header .social-share li i{ 91 header .social-share li i{
92 font-size: 20px; 92 font-size: 20px;
93 color: #ffffff; 93 color: #ffffff;
94 } 94 }
95 header .top-menu{ 95 header .top-menu{
96 list-style: none; 96 list-style: none;
97 padding-left: 0; 97 padding-left: 0;
98 margin-bottom: 3px; 98 margin-bottom: 5px;
99 } 99 }
100 header .top-menu li{ 100 header .top-menu li{
101 float: left; 101 float: left;
102 padding: 6px 10px; 102 padding: 6px 0;
103
103 } 104 }
105 header .top-menu li a{
106 color: #000000;
107 padding: 0 10px;
108 border-right: 1px solid #000000;
109 font-size: 12px;
110 }
111 header .top-menu li:last-child a{
112 border-right: 0;
113 }
104 header .top-control{ 114 header .top-control{
105 list-style: none; 115 list-style: none;
106 padding-left: 0; 116 padding-left: 0;
107 margin-bottom: 0; 117 margin-bottom: 0;
108 } 118 }
109 header .top-control li{ 119 header .top-control li{
110 float: left; 120 float: left;
111 margin: 0 10px; 121 margin: 0 10px;
112 } 122 }
113 header .top-control li .bt-yellow{ 123 header .top-control li .bt-yellow{
114 background-color: #fe6a00; 124 background-color: #fe6a00;
115 color: #ffffff; 125 color: #ffffff;
116 padding: 4px 10px; 126 padding: 3px 10px;
117 font-size: 12px; 127 font-size: 12px;
118 } 128 }
119 header .user-control{ 129 header .user-control{
120 background-color: #888888; 130 background-color: #888888;
121 text-align: center; 131 text-align: center;
122 } 132 }
133 header .user-control div{
134 font-size: 12px;
135 color: #ffffff;
136 }
137 header .user-control div:first-child{
138 padding: 10px 10px;
139 }
140 header .user-control div:last-child{
141 background-color: #fe6a00;
142 padding: 3px 10px;
143 }
123 /*NAVIGATION*/ 144 /*NAVIGATION*/
124 nav{ 145 nav{
125 border-bottom: 1px solid #dcdcdc; 146 border-bottom: 1px solid #dcdcdc;
126 padding: 10px 0; 147 padding: 5px 0;
127 } 148 }
128 nav h2{ 149 nav h2{
129 font-size: 27px; 150 font-size: 27px;
130 margin: 0 0; 151 margin: 20px 0;
152
131 } 153 }
132 nav ul{ 154 nav ul{
133 list-style: none; 155 list-style: none;
134 padding-left: 0; 156 padding-left: 0;
135 margin-bottom: 0; 157 margin-bottom: 0;
136 158
137 } 159 }
138 nav ul li{ 160 nav ul li{
139 margin-left: 2px;
140 float: left; 161 float: left;
141 padding: 6px 12px; 162 }
163 nav ul li.line{
164 border-bottom: 2px dashed #000000;
165 width: 34px;
166 height: 34px;
167 }
168 nav ul li.line-action{
169 border-bottom: 2px dashed #fe6a00;
170 }
171 nav ul li.circle{
172 width: 70px;
173 height: 70px;
174 -moz-border-radius: 35px;
175 -webkit-border-radius: 35px;
176 border-radius: 35px;
177 text-align: center;
178 font-size: 12px;
179 /*margin-left: 26px;*/
180
142 background-color: #999999; 181 background-color: #999999;
143 position: relative; 182 position: relative;
183 display: inline;
184 cursor: pointer;
144 } 185 }
145 nav ul li i.fa{ 186
146 position: absolute; 187 nav ul li.circle a{
147 color: #ffffff; 188 color: #ffffff;
148 font-size: 18px; 189 position: absolute;
149 right: -4px;
150 top: 50%; 190 top: 50%;
191 left: 50%;
151 transform: translateX(-50%) translateY(-50%); 192 transform: translateX(-50%) translateY(-50%);
152 -webkit-transform: translateX(-50%) translateY(-50%); 193 -webkit-transform: translateX(-50%) translateY(-50%);
153 } 194 }
154 nav ul li a{
155 color: #ffffff;
156 }
157 nav ul li:hover a{ 195 nav ul li:hover a{
158 text-decoration: none; 196 text-decoration: none;
159 color: #ffffff; 197 color: #ffffff;
160 } 198 }
161 nav ul li.action{ 199 nav ul li.action{
162 color: #ffffff; 200 background-color: #fe6a00;
163 background-color: #ed1d24;
164 } 201 }
165 /*ASIDE*/ 202 /*ASIDE*/
166 aside{ 203 aside{
167 margin: 10px 0; 204 margin: 10px 0;
168 } 205 }
169 206 aside .break-left{
207 position: absolute;
208 left: 50%;
209 top: 50%;
210 transform: translateX(-50%) translateY(-50%);
211 -webkit-transform: translateX(-50%) translateY(-50%);
212 }
170 aside .break-down{ 213 aside .break-down{
171 padding: 0 0; 214 padding: 0 0;
172 } 215 }
173 aside .break-down i.fa{ 216 aside .break-down i.fa{
174 font-size: 35px; 217 font-size: 35px;
175 color: #ff0000; 218 color: #ff0000;
176 } 219 }
177 aside .break-line{ 220 aside .break-line{
178 height: 10px; 221 height: 10px;
179 } 222 }
180 aside .break-line hr{ 223 aside .break-line hr{
181 border-top: 1px dotted #cccccc; 224 border-top: 1px dotted #cccccc;
182 } 225 }
183 aside .step{ 226 aside .step{
184 margin: 0 0; 227 margin: 0 0;
185 } 228 }
186 aside .step .title{ 229 aside .step .title{
187 font-size: 15px; 230 font-size: 15px;
188 line-height: 16px; 231 line-height: 16px;
189 font-weight: bold; 232 font-weight: bold;
190 margin-bottom: 3px; 233 margin-bottom: 3px;
191 } 234 }
192 aside .step .title-notice{ 235 aside .step .title-notice{
193 font-size: 13px; 236 font-size: 13px;
194 line-height: 16px; 237 line-height: 16px;
195 margin-bottom: 3px; 238 margin-bottom: 3px;
196 } 239 }
197 aside .step .title-notice .require{ 240 aside .step .title-notice .require{
198 font-size: 10px; 241 font-size: 10px;
199 } 242 }
200 aside .step .step-box{ 243 aside .step .step-box{
201 border: 2px solid #dcdcdc; 244 border: 2px solid #dcdcdc;
202 font-size: 12px; 245 font-size: 12px;
203 246
204 } 247 }
205 /*Step 1*/ 248 /*Step 1*/
206 aside .step .step-box .tshirt-design{ 249 aside .step .step-box .tshirt-design{
207 border: 1px solid #cccccc; 250 /*border: 1px solid #cccccc;*/
208 background-color: #f5f5f5; 251 /*background-color: #f5f5f5;*/
209 margin: 10px 10px; 252 margin: 4px 4px;
210 } 253 }
211 aside .step .step-box .tshirt-design:hover{ 254 aside .step .step-box .tshirt-design:hover{
212 border: 1px solid #ff0000; 255 /*border: 1px solid #ff0000;*/
213 } 256 }
214 aside .step .step-box .tshirt-design button:hover{ 257 aside .step .step-box .tshirt-design button:hover{
215 background-color: #fa7b7b; 258 background-color: #fa7b7b;
216 border: 1px solid #fa7b7b; 259 border: 1px solid #fa7b7b;
217 } 260 }
218 aside .step .step-box .tshirt-design div{ 261 aside .step .step-box .tshirt-design div{
219 float: left; 262 /*float: left;*/
220 } 263 }
221 aside .step .step-box .tshirt-design .icon{ 264 aside .step .step-box .tshirt-design .icon{
222 padding: 4px 4px; 265 padding: 4px 4px;
223 border-right: 1px solid #cccccc; 266 text-align: center;
224 267 width: 100%;
225 } 268 }
226 aside .step .step-box .tshirt-design .icon img{ 269 aside .step .step-box .tshirt-design .icon img{
227 height: 50px; 270 max-width: 100%;
228 } 271 }
229 aside .step .step-box .tshirt-design .name{ 272 aside .step .step-box .tshirt-design .name{
230 padding: 10px 10px; 273 padding: 2px 4px;
274 text-align: center;
231 275
232 } 276 }
233 aside .step .step-box .tshirt-design .action{ 277 aside .step .step-box .tshirt-design .action{
234 padding: 10px 10px; 278 /*padding: 10px 10px;*/
235 float: right; 279 /*float: right;*/
236 280
237 } 281 }
238 aside .step .step-box .tshirt-design .action button{ 282 aside .step .step-box .tshirt-design .action button{
239 padding: 8px 10px; 283 padding: 6px 8px;
284 width: 100%;
240 } 285 }
241 /*Step 2*/ 286 /*Step 2*/
242 aside .step .step-box .tshirt-color{ 287 aside .step .step-box .tshirt-color{
243 padding: 6px 10px; 288 padding: 6px 10px;
244 position: relative; 289 position: relative;
245 } 290 }
246 aside .step .step-box .tshirt-color ul.choice-color{ 291 aside .step .step-box .tshirt-color ul.choice-color{
247 float: left; 292 float: left;
248 list-style: none; 293 list-style: none;
249 padding-left: 0; 294 padding-left: 0;
250 width: 100%; 295 width: 100%;
251 margin-bottom: 3px; 296 margin-bottom: 3px;
252 } 297 }
253 aside .step .step-box .tshirt-color ul.choice-color li{ 298 aside .step .step-box .tshirt-color ul.choice-color li{
254 margin: 0 8px 4px 0; 299 margin: 0 8px 4px 0;
255 border: 1px solid #cccccc; 300 border: 1px solid #cccccc;
256 padding: 2px 2px; 301 padding: 2px 2px;
257 float: left; 302 float: left;
258 cursor: pointer; 303 cursor: pointer;
259 } 304 }
260 aside .step .step-box .tshirt-color ul.choice-color li.action{ 305 aside .step .step-box .tshirt-color ul.choice-color li.action{
261 border: 1px solid #ff0000; 306 border: 1px solid #ff0000;
262 } 307 }
263 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 308 aside .step .step-box .tshirt-color ul.choice-color li:hover{
264 border: 1px solid #ff0000; 309 border: 1px solid #ff0000;
265 } 310 }
266 aside .step .step-box .tshirt-color ul.choice-color li div{ 311 aside .step .step-box .tshirt-color ul.choice-color li div{
267 height: 30px; 312 height: 30px;
268 width: 30px; 313 width: 30px;
269 } 314 }
270 315
271 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 316 aside .step .step-box .tshirt-color ul.choice-color li.white div{
272 background-color: #ece7e4; 317 background-color: #ece7e4;
273 } 318 }
274 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 319 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
275 background-color: #e7dfd0; 320 background-color: #e7dfd0;
276 } 321 }
277 aside .step .step-box .tshirt-color .color-name{ 322 aside .step .step-box .tshirt-color .color-name{
278 width: 100%; 323 width: 100%;
279 font-size: 10px; 324 font-size: 10px;
280 } 325 }
281 aside .step .step-box .tshirt-color .view-more{ 326 aside .step .step-box .tshirt-color .view-more{
282 position: absolute; 327
283 bottom: 6px;
284 right: 10px;
285 } 328 }
286 /*Step 3*/ 329 /*Step 3*/
287 aside .step .step-box .tshirt-saveorder{ 330 aside .step .step-box .tshirt-saveorder{
288 padding: 10px 10px 6px 10px; 331 padding: 10px 10px 6px 10px;
289 } 332 }
290 aside .step .step-box .tshirt-saveorder .action{ 333 aside .step .step-box .tshirt-saveorder .action{
291 width: 50%; 334 width: 50%;
292 float: left; 335 float: left;
293 } 336 }
294 aside .step .step-box .tshirt-saveorder .action:first-child{ 337 aside .step .step-box .tshirt-saveorder .action:first-child{
295 padding-right: 5px; 338 padding-right: 5px;
296 } 339 }
297 aside .step .step-box .tshirt-saveorder .action:last-child{ 340 aside .step .step-box .tshirt-saveorder .action:last-child{
298 padding-left: 5px; 341 padding-left: 5px;
299 } 342 }
300 aside .step .step-box .tshirt-saveorder .action button{ 343 aside .step .step-box .tshirt-saveorder .action button{
301 padding: 8px 10px; 344 padding: 8px 10px;
302 345
303 } 346 }
304 aside .step .step-box .tshirt-saveorder .action button .text{ 347 aside .step .step-box .tshirt-saveorder .action button .text{
305 float: left; 348 float: left;
306 width: 80%; 349 width: 80%;
307 text-align: center; 350 text-align: center;
308 padding-left: 10px; 351 padding-left: 10px;
309 vertical-align: bottom; 352 vertical-align: bottom;
310 } 353 }
311 aside .step .step-box .tshirt-saveorder .action button .arrow{ 354 aside .step .step-box .tshirt-saveorder .action button .arrow{
312 float: left; 355 float: left;
313 width: 20%; 356 width: 20%;
314 height: 40px; 357 height: 40px;
315 position: relative; 358 position: relative;
316 } 359 }
317 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 360 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
318 position: absolute; 361 position: absolute;
319 top: 50%; 362 top: 50%;
320 right: -6px; 363 right: -6px;
321 transform: translateX(-50%) translateY(-50%); 364 transform: translateX(-50%) translateY(-50%);
322 -webkit-transform: translateX(-50%) translateY(-50%); 365 -webkit-transform: translateX(-50%) translateY(-50%);
323 } 366 }
324 aside .step .step-box .tshirt-saveorder .notice{ 367
325 padding: 5px 0 0 0;
326 }
327 /*Step 4*/ 368 /*Step 4*/
328 aside .step .title-notice{
329 369
330 }
331 aside .step .step-box .change-design{ 370 aside .step .step-box .change-design{
332 padding: 4px 4px; 371 padding: 4px 4px;
333 } 372 }
334 aside .step .step-box .change-design table{ 373 aside .step .step-box .change-design table{
335 374
336 } 375 }
337 aside .step .step-box .change-design table tr{ 376 aside .step .step-box .change-design table tr{
338 border-bottom: 1px dotted #cccccc; 377 border-bottom: 1px dotted #cccccc;
339 } 378 }
340 aside .step .step-box .change-design table tr:last-child{ 379 aside .step .step-box .change-design table tr:last-child{
341 border-bottom: 0; 380 border-bottom: 0;
342 } 381 }
343 382
344 /*Step 5- finish*/ 383 /*Step 5- finish*/
345 aside .step .finish-design{ 384 aside .step .finish-design{
346 padding: 20px 0; 385 padding: 20px 0;
347 } 386 }
348 aside .step .finish-design button{ 387 aside .step .finish-design button{
349 width: 100%; 388 width: 100%;
350 padding: 8px 10px; 389 padding: 8px 10px;
351 } 390 }
352 391
353 /*DESIGN CONTENT*/ 392 /*DESIGN CONTENT*/
354 #tshirt-content{ 393 #tshirt-content{
355 position: relative; 394 position: relative;
356 } 395 }
357 #tshirt-content .switch-border-design{ 396 #tshirt-content .switch-border-design{
358 position: absolute; 397 position: absolute;
359 top: 5px; 398 top: 5px;
360 right: 10px; 399 right: 10px;
361 color: red; 400 color: red;
362 font-size: 11px; 401 font-size: 11px;
363 } 402 }
364 #tshirt-content .tshirt-image{ 403 #tshirt-content .tshirt-image{
365 padding: 20px 0 0 0; 404 padding: 20px 0 0 0;
366 position: relative; 405 position: relative;
367 height: 100%; 406 height: 100%;
368 width: 100%; 407 width: 100%;
369 } 408 }
370 409
371 #tshirt-content .tshirt-image img{ 410 #tshirt-content .tshirt-image img{
372 width: 100%; 411 width: 100%;
373 } 412 }
374 413
375 #tshirt-content .tshirt-choice{ 414 #tshirt-content .tshirt-choice{
376 415
377 } 416 }
378 #tshirt-content .tshirt-choice ul{ 417 #tshirt-content .tshirt-choice ul{
379 list-style: none; 418 list-style: none;
380 padding-left: 0; 419 padding-left: 0;
381 display: table; 420 display: table;
382 margin: auto; 421 margin: auto;
383 } 422 }
384 #tshirt-content .tshirt-choice ul li{ 423 #tshirt-content .tshirt-choice ul li{
385 float: left; 424 float: left;
386 margin: 10px 10px; 425 margin: 10px 10px;
387 cursor: pointer; 426 cursor: pointer;
388 } 427 }
389 #tshirt-content .tshirt-choice ul li .image{ 428 #tshirt-content .tshirt-choice ul li .image{
390 border: 1px solid #cccccc; 429 border: 1px solid #cccccc;
391 padding: 3px 3px; 430 padding: 3px 3px;
392 } 431 }
393 #tshirt-content .tshirt-choice ul li.focus{ 432 #tshirt-content .tshirt-choice ul li.focus{
394 433
395 } 434 }
396 #tshirt-content .tshirt-choice ul li.focus .image{ 435 #tshirt-content .tshirt-choice ul li.focus .image{
397 border: 1px solid #ff0000; 436 border: 1px solid #ff0000;
398 } 437 }
399 #tshirt-content .tshirt-choice ul li .image img{ 438 #tshirt-content .tshirt-choice ul li .image img{
400 width: 50px; 439 width: 50px;
401 height: auto; 440 height: auto;
402 } 441 }
403 /*MODAL Design*/ 442 /*MODAL Design*/
404 #tshirt-design{ 443 #tshirt-design{
405 background-color: #666666; 444 background-color: #666666;
406 } 445 }
407 #tshirt-design .modal-dialog{ 446 #tshirt-design .modal-dialog{
408 /*width: 800px!important;*/ 447 /*width: 800px!important;*/
409 margin: 0 auto; 448 margin: 0 auto;
410 } 449 }
411 #tshirt-design .modal-dialog .modal-content{ 450 #tshirt-design .modal-dialog .modal-content{
412 background-color: transparent; 451 background-color: transparent;
413 border-radius: 0; 452 border-radius: 0;
414 border: 0; 453 border: 0;
415 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 454 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
416 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 455 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
417 } 456 }
418 #tshirt-design .modal-dialog .modal-content .modal-header{ 457 #tshirt-design .modal-dialog .modal-content .modal-header{
419 padding: 0 0 10px 0; 458 padding: 0 0 10px 0;
420 border-bottom: 0; 459 border-bottom: 0;
421 border-shadow: none!important; 460 border-shadow: none!important;
422 } 461 }
423 #tshirt-design .modal-dialog .modal-content .modal-body{ 462 #tshirt-design .modal-dialog .modal-content .modal-body{
424 background-color: #f5f5f5; 463 background-color: #f5f5f5;
425 padding: 0 0; 464 padding: 0 0;
426 } 465 }
427 #tshirt-design header{ 466 #tshirt-design header{
428 border-bottom: 1px solid #cccccc; 467 border-bottom: 1px solid #cccccc;
429 background-color: #dddddd; 468 background-color: #dddddd;
430 } 469 }
431 #tshirt-design header ul.nav{ 470 #tshirt-design header ul.nav{
432 padding-left: 0; 471 padding-left: 0;
433 list-style: none; 472 list-style: none;
434 } 473 }
435 #tshirt-design header ul.nav li{ 474 #tshirt-design header ul.nav li{
436 float: left; 475 float: left;
437 padding: 8px 26px; 476 padding: 8px 26px;
438 border-right: 1px solid #cccccc; 477 border-right: 1px solid #cccccc;
439 font-size: 14px; 478 font-size: 14px;
440 cursor: pointer; 479 cursor: pointer;
441 } 480 }
442 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 481 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
443 background-color: red; 482 background-color: red;
444 color: #ffffff; 483 color: #ffffff;
445 } 484 }
446 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 485 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
447 color: #ffffff; 486 color: #ffffff;
448 } 487 }
449 #tshirt-design header ul.nav li i.fa{ 488 #tshirt-design header ul.nav li i.fa{
450 color: #fe070f; 489 color: #fe070f;
451 font-size: 20px; 490 font-size: 20px;
452 margin-right: 10px; 491 margin-right: 10px;
453 } 492 }
454 #tshirt-design header .action{ 493 #tshirt-design header .action{
455 494
456 } 495 }
457 #tshirt-design header .action button{ 496 #tshirt-design header .action button{
458 padding: 2px 10px; 497 padding: 2px 10px;
459 margin: 6px 10px; 498 margin: 6px 10px;
460 } 499 }
461 #tshirt-design header .action button:hover{ 500 #tshirt-design header .action button:hover{
462 background-color: red; 501 background-color: red;
463 color: #ffffff; 502 color: #ffffff;
464 } 503 }
465 504
466 /*Aside modal*/ 505 /*Aside modal*/
467 .aside{ 506 .aside{
468 } 507 }
469 508
470 .aside .box-design-option{ 509 .aside .box-design-option{
471 list-style: none; 510 list-style: none;
472 padding-left: 0; 511 padding-left: 0;
473 margin-top: 10px; 512 margin-top: 10px;
474 } 513 }
475 514
476 .aside .box-design-option li{ 515 .aside .box-design-option li{
477 border: 1px solid #cdcdcd; 516 border: 1px solid #cdcdcd;
478 position: relative; 517 position: relative;
479 /*cursor: pointer;*/ 518 /*cursor: pointer;*/
480 margin-bottom: 10px; 519 margin-bottom: 10px;
481 } 520 }
482 .aside .box-design-option li .hover{ 521 .aside .box-design-option li .hover{
483 background-color: #fddad4; 522 background-color: #fddad4;
484 opacity: 0.6; 523 opacity: 0.6;
485 position: absolute; 524 position: absolute;
486 width: 100%; 525 width: 100%;
487 height: 100%; 526 height: 100%;
488 display: none; 527 display: none;
489 } 528 }
490 .aside .box-design-option li:hover .hover{ 529 .aside .box-design-option li:hover .hover{
491 display: block; 530 display: block;
492 } 531 }
493 532
494 .aside .box-design-option li .title{ 533 .aside .box-design-option li .title{
495 background: url("../images/bg1.png") repeat #cdcdcd; 534 background: url("../images/bg1.png") repeat #cdcdcd;
496 padding: 3px 10px; 535 padding: 3px 10px;
497 } 536 }
498 .aside .box-design-option li .title i.fa{ 537 .aside .box-design-option li .title i.fa{
499 color: #000000; 538 color: #000000;
500 } 539 }
501 540
502 .aside .box-design-option li .content{ 541 .aside .box-design-option li .content{
503 542
504 } 543 }
505 .aside .box-design-option li .content i.fa{ 544 .aside .box-design-option li .content i.fa{
506 font-size: 30px; 545 font-size: 30px;
507 color: #fe070f; 546 color: #fe070f;
508 margin: 8px 0; 547 margin: 8px 0;
509 } 548 }
510 .aside .box-design-option li .content .des{ 549 .aside .box-design-option li .content .des{
511 padding: 3px 10px 3px 0; 550 padding: 3px 10px 3px 0;
512 } 551 }
513 .aside .box-design-option li .content .color-patterns { 552 .aside .box-design-option li .content .color-patterns {
514 width: 100%; 553 width: 100%;
515 border: #bbb solid 1px; 554 border: #bbb solid 1px;
516 background: #FFF; 555 background: #FFF;
517 margin-top: 5px; 556 margin-top: 5px;
518 min-height: 65px; 557 min-height: 65px;
519 } 558 }
520 559
521 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 560 .aside .box-design-option li .content .color-patterns .color-pattern-item{
522 height: 20px; 561 height: 20px;
523 float: left; 562 float: left;
524 margin-left: 4px; 563 margin-left: 4px;
525 margin-top: 2px; 564 margin-top: 2px;
526 width: 20px; 565 width: 20px;
527 cursor: pointer; 566 cursor: pointer;
528 border: 1px solid #ddd; 567 border: 1px solid #ddd;
529 } 568 }
530 569
531 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { 570 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
532 outline: 1px solid #ed1d24; 571 outline: 1px solid #ed1d24;
533 } 572 }
534 573
535 .aside .box-design-option li .title .reset-color-patterns { 574 .aside .box-design-option li .title .reset-color-patterns {
536 cursor: pointer; 575 cursor: pointer;
537 } 576 }
538 577
539 .aside .box-design-option li .title .reset-color-patterns:hover { 578 .aside .box-design-option li .title .reset-color-patterns:hover {
540 opacity: 0.6; 579 opacity: 0.6;
541 } 580 }
542 581
543 .aside .box-design-option li .content .layer-item { 582 .aside .box-design-option li .content .layer-item {
544 text-align: center; 583 text-align: center;
545 border: 1px #ddd solid; 584 border: 1px #ddd solid;
546 background: #FFF; 585 background: #FFF;
547 padding: 5px; 586 padding: 5px;
548 font-size: 12px; 587 font-size: 12px;
549 cursor: pointer; 588 cursor: pointer;
550 } 589 }
551 590
552 .aside .box-design-option li .content .layer-item:hover { 591 .aside .box-design-option li .content .layer-item:hover {
553 background: #ffcccc; 592 background: #ffcccc;
554 } 593 }
555 594
556 595
557 /*Design Text*/ 596 /*Design Text*/
558 .aside #choice-text{ 597 .aside #choice-text{
559 598
560 } 599 }
561 .aside #choice-text .content{ 600 .aside #choice-text .content{
562 padding: 10px 10px; 601 padding: 10px 10px;
563 } 602 }
564 .aside #choice-text .content ul.font-family-box{ 603 .aside #choice-text .content ul.font-family-box{
565 list-style: none; 604 list-style: none;
566 margin: 10px 0; 605 margin: 10px 0;
567 padding-left: 0; 606 padding-left: 0;
568 height: 180px; 607 height: 180px;
569 width: 100%; 608 width: 100%;
570 overflow-y: scroll; 609 overflow-y: scroll;
571 border: 1px solid #c0c0c0; 610 border: 1px solid #c0c0c0;
572 } 611 }
573 612
574 .aside #choice-text .content .font-family-box li{ 613 .aside #choice-text .content .font-family-box li{
575 cursor: pointer; 614 cursor: pointer;
576 padding: 4px 8px; 615 padding: 4px 8px;
577 border: 0; 616 border: 0;
578 border-bottom: 1px solid #c0c0c0; 617 border-bottom: 1px solid #c0c0c0;
579 border-right: 1px solid #c0c0c0; 618 border-right: 1px solid #c0c0c0;
580 font-size: 16px; 619 font-size: 16px;
581 margin-bottom: 0; 620 margin-bottom: 0;
582 } 621 }
583 .aside #choice-text .content .font-family-box li.active{ 622 .aside #choice-text .content .font-family-box li.active{
584 border: 1px solid #fe070f; 623 border: 1px solid #fe070f;
585 } 624 }
586 .aside #choice-text .content .spacing-letter{ 625 .aside #choice-text .content .spacing-letter{
587 626
588 } 627 }
589 .aside #choice-text .content .spacing-letter .text-label{ 628 .aside #choice-text .content .spacing-letter .text-label{
590 font-size: 16px; 629 font-size: 16px;
591 padding: 4px 0; 630 padding: 4px 0;
592 } 631 }
593 .aside #choice-text .content .spacing-letter .box{ 632 .aside #choice-text .content .spacing-letter .box{
594 border: 1px solid #8c8c8c; 633 border: 1px solid #8c8c8c;
595 box-shadow: 0 0 5px #888888; 634 box-shadow: 0 0 5px #888888;
596 background-color: #f0f0f0; 635 background-color: #f0f0f0;
597 } 636 }
598 .aside #choice-text .content .spacing-letter .item{ 637 .aside #choice-text .content .spacing-letter .item{
599 float: left; 638 float: left;
600 } 639 }
601 .aside #choice-text .content .spacing-letter .item:hover{ 640 .aside #choice-text .content .spacing-letter .item:hover{
602 background-color: #fddad4; 641 background-color: #fddad4;
603 } 642 }
604 643
605 .aside #choice-text .content .spacing-letter .item i.fa{ 644 .aside #choice-text .content .spacing-letter .item i.fa{
606 font-size: 22px; 645 font-size: 22px;
607 margin: 0 0; 646 margin: 0 0;
608 color: #000000; 647 color: #000000;
609 } 648 }
610 .aside #choice-text .content .spacing-letter .item-text{ 649 .aside #choice-text .content .spacing-letter .item-text{
611 padding: 6px 20px; 650 padding: 6px 20px;
612 font-size: 13px; 651 font-size: 13px;
613 } 652 }
614 .aside #choice-text .content .spacing-letter .item-plus{ 653 .aside #choice-text .content .spacing-letter .item-plus{
615 border-right: 1px solid #8c8c8c; 654 border-right: 1px solid #8c8c8c;
616 } 655 }
617 .aside #choice-text .content .spacing-letter .item-minus{ 656 .aside #choice-text .content .spacing-letter .item-minus{
618 border-left: 1px solid #8c8c8c; 657 border-left: 1px solid #8c8c8c;
619 } 658 }
620 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { 659 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
621 padding: 5px 6px 1px 6px; 660 padding: 5px 6px 1px 6px;
622 cursor: pointer; 661 cursor: pointer;
623 } 662 }
624 /*Design Choice Illustration*/ 663 /*Design Choice Illustration*/
625 .aside #choice-illustration li .content { 664 .aside #choice-illustration li .content {
626 padding: 10px 10px; 665 padding: 10px 10px;
627 } 666 }
628 667
629 .aside #choice-illustration li .content select{ 668 .aside #choice-illustration li .content select{
630 width: 100%; 669 width: 100%;
631 } 670 }
632 671
633 .aside #choice-illustration li .content .illustration-list { 672 .aside #choice-illustration li .content .illustration-list {
634 width: 100%; 673 width: 100%;
635 border: #bbb solid 1px; 674 border: #bbb solid 1px;
636 background: #FFF; 675 background: #FFF;
637 margin-top: 5px; 676 margin-top: 5px;
638 min-height: 310px; 677 min-height: 310px;
639 padding-bottom: 20px; 678 padding-bottom: 20px;
640 } 679 }
641 680
642 .aside #choice-illustration li .content .illustration-list .illstration-item{ 681 .aside #choice-illustration li .content .illustration-list .illstration-item{
643 height: 60px; 682 height: 60px;
644 overflow: hidden; 683 overflow: hidden;
645 float: left; 684 float: left;
646 margin-left: 6px; 685 margin-left: 6px;
647 margin-top: 5px; 686 margin-top: 5px;
648 margin-bottom: 5px; 687 margin-bottom: 5px;
649 padding: 2px; 688 padding: 2px;
650 background: #e2e2e2; 689 background: #e2e2e2;
651 border: solid 2px #d7d7d7; 690 border: solid 2px #d7d7d7;
652 cursor: pointer; 691 cursor: pointer;
653 } 692 }
654 693
655 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 694 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
656 outline: 2px solid #ed1d24; 695 outline: 2px solid #ed1d24;
657 } 696 }
658 697
659 .aside #choice-illustration li .content .illustration-list .illstration-item img { 698 .aside #choice-illustration li .content .illustration-list .illstration-item img {
660 width: 50px; 699 width: 50px;
661 cursor: pointer; 700 cursor: pointer;
662 } 701 }
663 702
664 .illustration-list .footer-bar, .saved-list .footer-bar { 703 .illustration-list .footer-bar, .saved-list .footer-bar {
665 text-align: center; 704 text-align: center;
666 margin-top: 5px; 705 margin-top: 5px;
667 bottom: 10px; 706 bottom: 10px;
668 position: absolute; 707 position: absolute;
669 width: 100%; 708 width: 100%;
670 padding-right: 20px; 709 padding-right: 20px;
671 } 710 }
672 .footer-bar .footer-pagination { 711 .footer-bar .footer-pagination {
673 margin-right: 5px; 712 margin-right: 5px;
674 cursor: pointer; 713 cursor: pointer;
675 font-size: 9px; 714 font-size: 9px;
676 color: #FFF; 715 color: #FFF;
677 background: #666666; 716 background: #666666;
678 text-transform: uppercase; 717 text-transform: uppercase;
679 padding: 2px 5px; 718 padding: 2px 5px;
680 } 719 }
681 720
682 .footer-bar .footer-pagination:hover { 721 .footer-bar .footer-pagination:hover {
683 background: #999999; 722 background: #999999;
684 } 723 }
685 .tooltip-arrow, 724 .tooltip-arrow,
686 .red-tooltip + .tooltip > .tooltip-inner { 725 .red-tooltip + .tooltip > .tooltip-inner {
687 background-color: #FFF; 726 background-color: #FFF;
688 margin:0; 727 margin:0;
689 padding:0; 728 padding:0;
690 } 729 }
691 730
692 /* Insert image*/ 731 /* Insert image*/
693 #btn-choose-image { 732 #btn-choose-image {
694 background: #ff0f00; 733 background: #ff0f00;
695 cursor: pointer; 734 cursor: pointer;
696 margin: 10px 0px; 735 margin: 10px 0px;
697 padding: 0 10px; 736 padding: 0 10px;
698 color: #FFF; 737 color: #FFF;
699 font-size: 12px; 738 font-size: 12px;
700 } 739 }
701 740
702 #btn-choose-image:hover { 741 #btn-choose-image:hover {
703 background: #f8aeae; 742 background: #f8aeae;
704 } 743 }
705 744
706 .aside #choice-image li .content { 745 .aside #choice-image li .content {
707 margin: 0 10px; 746 margin: 0 10px;
708 padding: 10px 0; 747 padding: 10px 0;
709 } 748 }
710 749
711 .aside #choice-image li .content .small-text { 750 .aside #choice-image li .content .small-text {
712 font-size:10px; 751 font-size:10px;
713 margin-bottom: 10px; 752 margin-bottom: 10px;
714 } 753 }
715 754
716 .aside #choice-image { 755 .aside #choice-image {
717 font-size: 13px; 756 font-size: 13px;
718 } 757 }
719 758
720 .aside #imgLoader{ 759 .aside #imgLoader{
721 display: none; 760 display: none;
722 } 761 }
723 762
724 .aside #choice-image li .content .list-images { 763 .aside #choice-image li .content .list-images {
725 height: 300px; 764 height: 300px;
726 background: #FFF; 765 background: #FFF;
727 border: 1px solid #DDD; 766 border: 1px solid #DDD;
728 } 767 }
729 768
730 .aside #choice-image li .content .list-images .recent-img{ 769 .aside #choice-image li .content .list-images .recent-img{
731 height: 60px; 770 height: 60px;
732 overflow: hidden; 771 overflow: hidden;
733 float: left; 772 float: left;
734 margin-left: 6px; 773 margin-left: 6px;
735 margin-top: 5px; 774 margin-top: 5px;
736 margin-bottom: 5px; 775 margin-bottom: 5px;
737 padding: 2px; 776 padding: 2px;
738 background: #e2e2e2; 777 background: #e2e2e2;
739 border: solid 2px #d7d7d7; 778 border: solid 2px #d7d7d7;
740 cursor: pointer; 779 cursor: pointer;
741 } 780 }
742 781
743 .aside #choice-image li .content .list-images .recent-img:hover { 782 .aside #choice-image li .content .list-images .recent-img:hover {
744 outline: 2px solid #ed1d24; 783 outline: 2px solid #ed1d24;
745 } 784 }
746 785
747 .aside #choice-image li .content .list-images .recent-img img { 786 .aside #choice-image li .content .list-images .recent-img img {
748 width: 50px; 787 width: 50px;
749 cursor: pointer; 788 cursor: pointer;
750 } 789 }
751 790
752 /*Design content*/ 791 /*Design content*/
753 .tshirt-design-container{ 792 .tshirt-design-container{
754 793
755 } 794 }
756 .tshirt-design-container .design-content{ 795 .tshirt-design-container .design-content{
757 padding: 10px 0; 796 padding: 10px 0;
758 /*min-height: 580px;*/
759 } 797 }
760 .tshirt-design-container .design-content .content{ 798 .tshirt-design-container .design-content .content{
761 width: 100%; 799 width: 100%;
762 height: 100%; 800 height: 100%;
763 min-height: 600px; 801 min-height: 600px;
764 position: relative; 802 position: relative;
765 padding: 40px 40px; 803 padding: 40px 40px;
766 } 804 }
767 .tshirt-design-container .design-content .content .selection-design{ 805 .tshirt-design-container .design-content .content .selection-design{
768 border: 1px solid #ff0000; 806 border: 1px solid #ff0000;
769 } 807 }
770 .tshirt-design-container .agree-design{ 808 .tshirt-design-container .agree-design{
771 position: absolute; 809 position: absolute;
772 right: -16px; 810 right: -16px;
773 top: 40%; 811 top: 40%;
774 cursor: pointer; 812 cursor: pointer;
775 } 813 }
776 .tshirt-design-container .agree-design:hover{ 814 .tshirt-design-container .agree-design:hover{
777 opacity: 0.8; 815 opacity: 0.8;
778 } 816 }
779 .tshirt-design-container .trash-design{ 817 .tshirt-design-container .trash-design{
780 position: absolute; 818 position: absolute;
781 right: 5px; 819 right: 5px;
782 bottom: 0; 820 bottom: 0;
783 } 821 }
784 .tshirt-design-container .trash-design:hover{ 822 .tshirt-design-container .trash-design:hover{
785 opacity: 0.5; 823 opacity: 0.5;
786 } 824 }
787 825
788 .object-border{ 826 .object-border{
789 position: absolute; 827 position: absolute;
790 background-color: rgb(0, 108, 255); 828 background-color: rgb(0, 108, 255);
791 border: 0; 829 border: 0;
792 display:none; 830 display:none;
793 transform-origin: 0% 0%; 831 transform-origin: 0% 0%;
794 } 832 }
795 #object-border-top, #object-border-bottom{ 833 #object-border-top, #object-border-bottom{
796 height: 2px; 834 height: 2px;
797 } 835 }
798 #object-border-right, #object-border-left{ 836 #object-border-right, #object-border-left{
799 width: 2px; 837 width: 2px;
800 } 838 }
801 839
802 840
803 /*FOOTER*/ 841 /*FOOTER*/
804 footer{ 842 footer{
805 background-color: #333333; 843 background-color: #333333;
806 } 844 }
807 footer ul.nav-footer{ 845 footer ul.nav-footer{
808 padding-left: 0; 846 padding-left: 0;
809 list-style: none; 847 list-style: none;
810 } 848 }
811 footer ul.nav-footer li{ 849 footer ul.nav-footer li{
812 float: left; 850 float: left;
813 padding: 3px 10px; 851 padding: 3px 10px;
814 border-right: 1px dotted #ffffff; 852 border-right: 1px dotted #ffffff;
815 853
816 } 854 }
817 footer ul.nav-footer li a{ 855 footer ul.nav-footer li a{
818 color: #ffffff; 856 color: #ffffff;
819 font-size: 11px; 857 font-size: 11px;
820 } 858 }
821 /* Customize container */ 859 /* Customize container */
822 @media (min-width: 768px) { 860 @media (min-width: 768px) {
823 .container { 861 .container {
824 /*max-width: 730px;*/ 862 /*max-width: 730px;*/
825 } 863 }
826 } 864 }
827 865
828 /* Responsive: Portrait tablets and up */ 866 /* Responsive: Portrait tablets and up */
829 @media screen and (min-width: 768px) { 867 @media screen and (min-width: 768px) {
830 /* Remove the padding we set earlier */ 868 /* Remove the padding we set earlier */
831 869
832 } 870 }
833 871
834 @media (min-width: 1024px) { 872 @media (min-width: 1024px) {
835 #tshirt-design .modal-dialog{ 873 #tshirt-design .modal-dialog{
836 min-width: 1000px; 874 min-width: 1000px;
837 width: 1000px; 875 width: 1000px;
838 } 876 }
839 } 877 }
840 878
841 @media (max-width: 762px) { 879 @media (max-width: 762px) {
842 .modal-dialog{ 880 .modal-dialog{
843 margin: 0 0!important; 881 margin: 0 0!important;
844 } 882 }
845 #tshirt-design header .menu-nav{ 883 #tshirt-design header .menu-nav{
846 overflow-x: scroll!important; 884 overflow-x: scroll!important;
847 -webkit-overflow-scrolling: touch; 885 -webkit-overflow-scrolling: touch;
848 } 886 }
849 887
850 #tshirt-design header ul.nav { 888 #tshirt-design header ul.nav {
851 text-align: justify; 889 text-align: justify;
852 width: 680px; 890 width: 680px;
853 } 891 }
854 892
855 #tshirt-design header ul.nav li { 893 #tshirt-design header ul.nav li {
856 display: inline-block; /* 6 */ 894 display: inline-block; /* 6 */
857 } 895 }
858 896
859 .tshirt-design-container .design-content .content{ 897 .tshirt-design-container .design-content .content{
860 padding: 14px 14px; 898 padding: 14px 14px;
861 } 899 }
862 .tshirt-design-container .design-content{ 900 .tshirt-design-container .design-content{
863 padding: 0 0; 901 padding: 0 0;
864 } 902 }
865 } 903 }
866 904
867 905
868 906
869 #tshirt-design-saved .subframe-design { 907 #tshirt-design-saved .subframe-design {
870 width: 80%; 908 width: 80%;
871 margin: auto; 909 margin: auto;
872 margin-top: 100px; 910 margin-top: 100px;
873 border: 10px solid rgb(0, 0, 0); 911 border: 10px solid rgb(0, 0, 0);
874 border: 20px solid rgba(0, 0, 0, .5); 912 border: 20px solid rgba(0, 0, 0, .5);
875 -webkit-background-clip: padding-box; /* for Safari */ 913 -webkit-background-clip: padding-box; /* for Safari */
876 background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ 914 background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
877 background: #FFF; 915 background: #FFF;
878 } 916 }
879 917
880 #tshirt-design-saved .modal-content button.close { 918 #tshirt-design-saved .modal-content button.close {
881 margin-right: 103px; 919 margin-right: 103px;
882 font-size: 41px; 920 font-size: 41px;
883 margin-top: -8px; 921 margin-top: -8px;
884 } 922 }
885 923
886 #tshirt-design-saved .subframe-design .nav-tabs { 924 #tshirt-design-saved .subframe-design .nav-tabs {
887 background: rgba(0, 0, 0, .5); 925 background: rgba(0, 0, 0, .5);
888 border-bottom: 1px solid #F5F5F5; 926 border-bottom: 1px solid #F5F5F5;
889 } 927 }
890 928
891 #tshirt-design-saved .subframe-design .nav-tabs li a { 929 #tshirt-design-saved .subframe-design .nav-tabs li a {
892 text-decoration: none; 930 text-decoration: none;
893 background-color: #CCC; 931 background-color: #CCC;
894 cursor: pointer; 932 cursor: pointer;
895 margin-right: 10px; 933 margin-right: 10px;
896 padding: 2px 30px; 934 padding: 2px 30px;
897 color: #000; 935 color: #000;
898 font-weight: 600; 936 font-weight: 600;
899 border-bottom: 1px solid #F5F5F5 937 border-bottom: 1px solid #F5F5F5
900 } 938 }
901 939
902 #tshirt-design-saved .subframe-design .nav-tabs li.active a { 940 #tshirt-design-saved .subframe-design .nav-tabs li.active a {
903 background: #F5F5F5; 941 background: #F5F5F5;
904 color: #fe070f; 942 color: #fe070f;
905 } 943 }
906 944
907 #tshirt-design-saved .subframe-design .tab-content { 945 #tshirt-design-saved .subframe-design .tab-content {
908 background: #F5F5F5; 946 background: #F5F5F5;
909 width: 100%; 947 width: 100%;
910 min-height: 400px; 948 min-height: 400px;
911 } 949 }
912 950
913 #tshirt-design-saved .saved-list { 951 #tshirt-design-saved .saved-list {
914 width: 100%; 952 width: 100%;
915 border: #bbb solid 1px; 953 border: #bbb solid 1px;
916 background: #FFF; 954 background: #FFF;
917 margin-top: 0px; 955 margin-top: 0px;
918 min-height: 400px; 956 min-height: 400px;
919 padding: 10px; 957 padding: 10px;
920 } 958 }
921 959
922 #tshirt-design-saved .saved-list .saved-item{ 960 #tshirt-design-saved .saved-list .saved-item{
923 width: 100px; 961 width: 100px;
924 height: 100px; 962 height: 100px;
925 overflow: hidden; 963 overflow: hidden;
926 float: left; 964 float: left;
927 margin-left: 6px; 965 margin-left: 6px;
928 margin-top: 5px; 966 margin-top: 5px;
929 margin-bottom: 5px; 967 margin-bottom: 5px;
930 padding: 2px; 968 padding: 2px;
931 background: #e2e2e2; 969 background: #e2e2e2;
932 border: solid 2px #d7d7d7; 970 border: solid 2px #d7d7d7;
933 cursor: pointer; 971 cursor: pointer;
934 } 972 }
935 973
936 #tshirt-design-saved .saved-list .saved-item:hover { 974 #tshirt-design-saved .saved-list .saved-item:hover {
937 outline: 2px solid #ed1d24; 975 outline: 2px solid #ed1d24;
938 } 976 }
939 977
940 #tshirt-design-saved .saved-list .saved-item img { 978 #tshirt-design-saved .saved-list .saved-item img {
941 width: 100px; 979 width: 100px;
942 cursor: pointer; 980 cursor: pointer;
943 } 981 }
944 #tshirt-design-saved .saved-list .saved-item button { 982 #tshirt-design-saved .saved-list .saved-item button {
945 background: #ff0f00; 983 background: #ff0f00;
946 color: #FFF; 984 color: #FFF;
947 border: 0; 985 border: 0;
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 class="clearfix"> 3 <header class="clearfix">
4 <div class="col-sm-4 logo"> 4 <div class="col-sm-4 logo">
5 <img src="images/logo.png" alt="Logo Mobile World" /> 5 <img src="images/logo.png" alt="Logo Mobile World" />
6 </div> 6 </div>
7 <div class="col-sm-2"> 7 <div class="col-sm-2">
8 <ul class="social-share clearfix"> 8 <ul class="social-share clearfix">
9 <li> 9 <li>
10 <a href="#"> 10 <a href="#">
11 <i class="fa fa-facebook"></i> 11 <i class="fa fa-facebook"></i>
12 </a> 12 </a>
13 </li> 13 </li>
14 <li> 14 <li>
15 <a href="#"> 15 <a href="#">
16 <i class="fa fa-twitter"></i> 16 <i class="fa fa-twitter"></i>
17 </a> 17 </a>
18 </li> 18 </li>
19 </ul> 19 </ul>
20 </div> 20 </div>
21 <div class="col-sm-6 clearfix" style="padding-right: 0"> 21 <div class="col-sm-6 clearfix" style="padding-right: 0">
22 <div class="pull-left"> 22 <div class="pull-left">
23 <ul class="top-menu clearfix"> 23 <ul class="top-menu clearfix">
24 <li> 24 <li>
25 <a href="#">ABC</a> 25 <a href="#">はじめての方へ</a>
26 </li> 26 </li>
27 <li> 27 <li>
28 <a href="#">ABC</a> 28 <a href="#">料金表</a>
29 </li> 29 </li>
30 <li> 30 <li>
31 <a href="#">ABC</a> 31 <a href="#">新規会員登録</a>
32 </li> 32 </li>
33 </ul> 33 </ul>
34 <ul class="top-control clearfix"> 34 <ul class="top-control clearfix">
35 <li> 35 <li>
36 <div class="bt-yellow"> 36 <div class="bt-yellow">
37 <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN に戻る 37 <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN　デザイン作成
38 </div> 38 </div>
39 </li> 39 </li>
40 <li> 40 <li>
41 <div class="bt-yellow"> 41 <div class="bt-yellow">
42 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加工方法に戻る 42 <i class="fa fa-shopping-cart" aria-hidden="true"></i> ショッピングカート
43 </div> 43 </div>
44 </li> 44 </li>
45 </ul> 45 </ul>
46 </div> 46 </div>
47 <div class="pull-right"> 47 <div class="pull-right">
48 <div class="user-control"> 48 <div class="user-control">
49 <div> 49 <div>
50 方法に戻る 50 マイページ
51 </div> 51 </div>
52 <div> 52 <div class="login">
53 <i class="fa fa-lock" aria-hidden="true"></i> に戻る 53 <i class="fa fa-lock" aria-hidden="true"></i> ログイン
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 </header> 58 </header>
59 <nav class="clearfix"> 59 <nav class="clearfix">
60 <div class="col-sm-12"> 60 <div class="col-sm-12">
61 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> 61 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
62 <ul class="pull-right"> 62 <ul class="pull-right">
63 <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> 63
64 <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> 64
65 <li class="action">デザインする</li> 65 <li class="circle"><a href="#">商品に戻る</a></li>
66 <li class="line"></li>
67 <li class="circle"><a href="#">加工方法に戻る</a></li>
68 <li class="line line-action"></li>
69 <li class="circle action"><a href="#">デザインする</a></li>
66 </ul> 70 </ul>
67 </div> 71 </div>
68 </nav> 72 </nav>
69 <article class="clearfix"> 73 <article class="clearfix">
70 <aside class="col-sm-5"> 74 <aside class="col-sm-5">
71 <div class="step"> 75 <div class="clearfix row" style="position: relative">
72 <div class="title"> 76 <div class="step col-xs-6">
73 1. デザインを作る 77 <div class="title clearfix">
74 </div> 78 <span style="float: left;width: 28%"><img src="../images/stepicon1.png" alt="1" /></span> <span style="float: left;width: 72%; padding: 16px 0">デザインを作る</span>
75 <div class="step-box"> 79 </div>
76 <div class="tshirt-design clearfix"> 80 <div class="step-box">
77 <div class="icon"> 81 <div class="tshirt-design clearfix">
78 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> 82 <div class="icon">
83 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
84 </div>
85 <div class="name">
86 背中背中 (28x22)
87 </div>
88 <div class="action">
89 <button class="red" ng-click="modalTShirtDesign()">
90 デザインを作る
91 </button>
92 </div>
79 </div> 93 </div>
80 <div class="name">
81 背中背中 (28x22)
82 </div>
83 <div class="action">
84 <button class="red" ng-click="modalTShirtDesign()">
85 <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
86 </button>
87 </div>
88 </div> 94 </div>
89 </div> 95 </div>
90 </div>
91 96
92 <!-- BREAK DOWN--> 97 <!--&lt;!&ndash; BREAK DOWN&ndash;&gt;-->
93 <div class="text-center break-down"> 98 <div class="text-center break-left">
94 <img src="images/bg_step_arrow.gif" alt="arrow" /> 99 <img src="images/arrow1.png" alt="arrow" />
95 </div>
96
97 <!-- STEP 2-->
98 <div class="step">
99 <div class="title">
100 2.アイテムカラーを変更する
101 </div> 100 </div>
102 <div class="step-box clearfix"> 101
103 <div class="tshirt-color"> 102 <!-- STEP 2-->
104 <ul class="choice-color clearfix"> 103 <div class="step col-xs-6">
105 <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> 104 <div class="title clearfix">
106 <div ng-style="{'background-color' : color.code}"></div> 105 <span style="float: left;width: 28%"><img src="../images/stepicon2.png" alt="2" /></span><span style="float: left;width: 72%;padding: 6px 0"> アイテムカラーを変更する</span>
107 </li> 106 </div>
108 </ul> 107 <div class="step-box clearfix">
109 <div class="color-name" ng-bind="tShirtColorName"></div> 108 <div class="tshirt-color">
110 <div class="view-more"> 109 <ul class="choice-color clearfix">
111 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 110 <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
111 <div ng-style="{'background-color' : color.code}"></div>
112 </li>
113 </ul>
114 <div class="color-name" ng-bind="tShirtColorName"></div>
115 <div class="view-more">
116 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
117 </div>
112 </div> 118 </div>
113 </div> 119 </div>
114 </div> 120 </div>
115 </div> 121 </div>
116 122
123
117 <!-- BREAK DOWN--> 124 <!-- BREAK DOWN-->
118 <div class="text-center break-down"> 125 <div class="text-center break-down">
119 <img src="images/bg_step_arrow.gif" alt="arrow" /> 126 <img src="images/bg_step_arrow.gif" alt="arrow" />
120 </div> 127 </div>
121 128
122 <!-- STEP 3--> 129 <!-- STEP 3-->
123 <div class="step"> 130 <div class="step">
124 <div class="step-box clearfix"> 131 <div class="step-box clearfix">
125 <div class="tshirt-saveorder"> 132 <div class="tshirt-saveorder">
126 <div class="clearfix"> 133 <div class="clearfix">
127 <div class="action"> 134 <div class="action">
128 <button class="white"> 135 <button class="white">
129 <div class="text"> 136 <div class="text">
130 このデザインを保存する 137 このデザインを保存する
131 </div> 138 </div>
132 <div class="arrow"> 139 <div class="arrow">
133 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 140 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
134 </div> 141 </div>
135 </button> 142 </button>
136 </div> 143 </div>
137 <div class="action"> 144 <div class="action">
138 <button class="red"> 145 <button class="red">
139 <div class="text"> 146 <div class="text">
140 このデザインで注文する 147 このデザインで注文する
141 </div> 148 </div>
142 <div class="arrow clearfix"> 149 <div class="arrow clearfix">
143 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 150 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
144 </div> 151 </div>
145 </button> 152 </button>
146 </div> 153 </div>
147 </div> 154 </div>
148 <div class="notice"> 155
149 デザインを保存するには、ログインしてください
150 </div>
151 </div> 156 </div>
152 </div> 157 </div>
153 158
154 <!-- BREAL LINE--> 159 <!-- BREAL LINE-->
155 <div class="text-center break-line"> 160 <div class="text-center break-line">
156 <hr /> 161 <hr />
157 </div> 162 </div>
158 163
159 <!-- STEP 4--> 164 <!-- STEP 4-->
160 <div class="step"> 165 <div class="step">
161 <div class="title-notice"> 166 <div class="title-notice">
162 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> 167 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
163 </div> 168 </div>
164 <div class="step-box"> 169 <div class="step-box">
165 <div class="change-design"> 170 <div class="change-design">
166 <table> 171 <table>
167 <tr> 172 <tr>
168 <td class="text-center">商品</td> 173 <td class="text-center">商品</td>
169 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> 174 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
170 <td class="text-right"> 175 <td class="text-right">
171 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> 176 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
172 </td> 177 </td>
173 </tr> 178 </tr>
174 <tr> 179 <tr>
175 <td width="10%" class="text-center">加工方法</td> 180 <td width="10%" class="text-center">加工方法</td>
176 <td width="70%">シルク：胸中央 (27×27)</td> 181 <td width="70%">シルク：胸中央 (27×27)</td>
177 <td width="20%" class="text-right"> 182 <td width="20%" class="text-right">
178 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> 183 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
179 </td> 184 </td>
180 </tr> 185 </tr>
181 </table> 186 </table>
182 </div> 187 </div>
183 </div> 188 </div>
184 </div> 189 </div>
185 <!-- STEP 5- finish--> 190 <!-- STEP 5- finish-->
186 <div class="step"> 191 <div class="step">
187 <div class="finish-design"> 192 <div class="finish-design">
188 <button class="white"> 193 <button class="white">
189 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 194 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
190 </button> 195 </button>
191 </div> 196 </div>
192 197
193 </div> 198 </div>
194 </div> 199 </div>
195 </aside> 200 </aside>
196 <section id="tshirt-content" class="col-sm-7 text-center"> 201 <section id="tshirt-content" class="col-sm-7 text-center">
197 <div class="switch-border-design"> 202 <div class="switch-border-design">
198 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す 203 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
199 </div> 204 </div>
200 <div class="tshirt-image"> 205 <div class="tshirt-image">
201 <img ng-src="{{ tShirtImg }}" alt="" /> 206 <img ng-src="{{ tShirtImg }}" alt="" />
202 <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()"> 207 <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
203 <img ng-src="{{outputImage}}" ng-show="outputImage"/> 208 <img ng-src="{{outputImage}}" ng-show="outputImage"/>
204 </div> 209 </div>
205 </div> 210 </div>
206 <div class="tshirt-choice"> 211 <div class="tshirt-choice">
207 <ul> 212 <ul>
208 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> 213 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
209 <div>前</div> 214 <div>前</div>
210 <div class="image" ng-click="choiceTShirtBackFront('front')"> 215 <div class="image" ng-click="choiceTShirtBackFront('front')">
211 <img ng-src="{{ tShirtImgFront }}" alt="" /> 216 <img ng-src="{{ tShirtImgFront }}" alt="" />
212 </div> 217 </div>
213 218
214 </li> 219 </li>
215 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> 220 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
216 <div>後</div> 221 <div>後</div>
217 <div class="image" ng-click="choiceTShirtBackFront('back')"> 222 <div class="image" ng-click="choiceTShirtBackFront('back')">
218 <img ng-src="{{ tShirtImgBack }}" alt="" /> 223 <img ng-src="{{ tShirtImgBack }}" alt="" />
219 </div> 224 </div>
220 225
221 </li> 226 </li>
222 </ul> 227 </ul>
223 </div> 228 </div>
224 </section> 229 </section>
225 </article> 230 </article>