ngohungcuong.windy@gmail.com / T-Shats Frontend

Download as
Browse Code ยป

Commit 010854c35d3c9e5a8da66dafc75ecc182774cd3d

Authored by TRUONG
1 parent a3d420e25d
Exists in master and in 1 other branch develop

fix responsive on preview design box.

Showing 2 changed files with 15 additions and 2 deletions Inline Diff

1 <!doctype html> 1 <!doctype html>
2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> 2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> 3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> 4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
5 <head> 5 <head>
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <title></title> 8 <title></title>
9 <meta name="description" content=""> 9 <meta name="description" content="">
10 <meta name="viewport" content="width=device-width"> 10 <meta name="viewport" content="width=device-width">
11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
12 <!-- build:css styles/vendor.css --> 12 <!-- build:css styles/vendor.css -->
13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> 14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
15 <link rel="stylesheet" href="bower_components/select2/select2.css"> 15 <link rel="stylesheet" href="bower_components/select2/select2.css">
16 <!-- bower:css --> 16 <!-- bower:css -->
17 <!-- endbower --> 17 <!-- endbower -->
18 <!-- endbuild --> 18 <!-- endbuild -->
19 <!-- build:css({.tmp,app}) styles/main.css --> 19 <!-- build:css({.tmp,app}) styles/main.css -->
20 <link rel="stylesheet" href="styles/main.css"> 20 <link rel="stylesheet" href="styles/main.css">
21 <!-- endbuild --> 21 <!-- endbuild -->
22 </head> 22 </head>
23 <body ng-app="tshatsApp"> 23 <body ng-app="tshatsApp">
24 <!--[if lt IE 7]> 24 <!--[if lt IE 7]>
25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26 <![endif]--> 26 <![endif]-->
27 27
28 <!-- Add your site or application content here --> 28 <!-- Add your site or application content here -->
29 <div class="container" ng-view></div> 29 <div class="container" ng-view></div>
30 30
31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
32 <script> 32 <script>
33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
37 37
38 ga('create', 'UA-XXXXX-X'); 38 ga('create', 'UA-XXXXX-X');
39 ga('send', 'pageview'); 39 ga('send', 'pageview');
40 </script> 40 </script>
41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> 42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
44 <!--[if lt IE 9]> 44 <!--[if lt IE 9]>
45 <script src="bower_components/es5-shim/es5-shim.js"></script> 45 <script src="bower_components/es5-shim/es5-shim.js"></script>
46 <script src="bower_components/json3/lib/json3.min.js"></script> 46 <script src="bower_components/json3/lib/json3.min.js"></script>
47 <![endif]--> 47 <![endif]-->
48 <script type="text/javascript"> 48 <script type="text/javascript">
49 var VERSION = '21-11_03'; 49 var VERSION = '21-11_04';
50 var require = { 50 var require = {
51 urlArgs: "ver="+VERSION, 51 urlArgs: "ver="+VERSION,
52 }; 52 };
53 </script> 53 </script>
54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
55 </body> 55 </body>
56 </html> 56 </html>
57 57
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 body { 4 body {
5 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 5 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
6 /*font-family: 'gn_aki_iro_sesami_cookies';*/ 6 /*font-family: 'gn_aki_iro_sesami_cookies';*/
7 } 7 }
8 /*Scroll bar style*/ 8 /*Scroll bar style*/
9 ::-webkit-scrollbar { 9 ::-webkit-scrollbar {
10 -webkit-appearance: none; 10 -webkit-appearance: none;
11 width: 7px; 11 width: 7px;
12 } 12 }
13 ::-webkit-scrollbar-thumb { 13 ::-webkit-scrollbar-thumb {
14 border-radius: 4px; 14 border-radius: 4px;
15 background-color: rgba(0,0,0,.5); 15 background-color: rgba(0,0,0,.5);
16 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 16 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
17 } 17 }
18 /*End scroll bar style*/ 18 /*End scroll bar style*/
19 .padding-right-0{ 19 .padding-right-0{
20 padding-right: 0!important; 20 padding-right: 0!important;
21 } 21 }
22 .padding-left-0{ 22 .padding-left-0{
23 padding-left: 0!important; 23 padding-left: 0!important;
24 } 24 }
25 button.red{ 25 button.red{
26 color: #ffffff; 26 color: #ffffff;
27 background-color: #ff0000; 27 background-color: #ff0000;
28 border: 1px solid #ff0000; 28 border: 1px solid #ff0000;
29 29
30 } 30 }
31 button.white{ 31 button.white{
32 border: 1px solid #ff8080; 32 border: 1px solid #ff8080;
33 color: #ff8080; 33 color: #ff8080;
34 background-color: #ffffff; 34 background-color: #ffffff;
35 } 35 }
36 button.brown{ 36 button.brown{
37 background-color: #666666; 37 background-color: #666666;
38 border: 1px solid #666666; 38 border: 1px solid #666666;
39 color: #ffffff; 39 color: #ffffff;
40 border-radius: 5px; 40 border-radius: 5px;
41 } 41 }
42 button.black{ 42 button.black{
43 border: 1px solid #c9c9c9; 43 border: 1px solid #c9c9c9;
44 background-color: #343434; 44 background-color: #343434;
45 color: #ffffff; 45 color: #ffffff;
46 padding: 1px 6px; 46 padding: 1px 6px;
47 } 47 }
48 #tshirt-container{ 48 #tshirt-container{
49 border-left: 1px solid #dcdcdc; 49 border-left: 1px solid #dcdcdc;
50 border-right: 1px solid #dcdcdc; 50 border-right: 1px solid #dcdcdc;
51 } 51 }
52 /*HEADER*/ 52 /*HEADER*/
53 header{ 53 header{
54 border-bottom: 1px solid #dcdcdc; 54 border-bottom: 1px solid #dcdcdc;
55 } 55 }
56 header .logo{ 56 header .logo{
57 color: #ed1d24; 57 color: #ed1d24;
58 font-size: 30px; 58 font-size: 30px;
59 text-transform: uppercase; 59 text-transform: uppercase;
60 font-weight: bold; 60 font-weight: bold;
61 } 61 }
62 header .logo img{ 62 header .logo img{
63 width: 60px; 63 width: 60px;
64 } 64 }
65 /*NAVIGATION*/ 65 /*NAVIGATION*/
66 nav{ 66 nav{
67 border-bottom: 1px solid #dcdcdc; 67 border-bottom: 1px solid #dcdcdc;
68 padding: 10px 0; 68 padding: 10px 0;
69 } 69 }
70 nav h2{ 70 nav h2{
71 font-size: 27px; 71 font-size: 27px;
72 margin: 0 0; 72 margin: 0 0;
73 } 73 }
74 nav ul{ 74 nav ul{
75 list-style: none; 75 list-style: none;
76 padding-left: 0; 76 padding-left: 0;
77 margin-bottom: 0; 77 margin-bottom: 0;
78 78
79 } 79 }
80 nav ul li{ 80 nav ul li{
81 margin-left: 2px; 81 margin-left: 2px;
82 float: left; 82 float: left;
83 padding: 6px 12px; 83 padding: 6px 12px;
84 background-color: #999999; 84 background-color: #999999;
85 position: relative; 85 position: relative;
86 } 86 }
87 nav ul li i.fa{ 87 nav ul li i.fa{
88 position: absolute; 88 position: absolute;
89 color: #ffffff; 89 color: #ffffff;
90 font-size: 18px; 90 font-size: 18px;
91 right: -4px; 91 right: -4px;
92 top: 50%; 92 top: 50%;
93 transform: translateX(-50%) translateY(-50%); 93 transform: translateX(-50%) translateY(-50%);
94 -webkit-transform: translateX(-50%) translateY(-50%); 94 -webkit-transform: translateX(-50%) translateY(-50%);
95 } 95 }
96 nav ul li a{ 96 nav ul li a{
97 color: #ffffff; 97 color: #ffffff;
98 } 98 }
99 nav ul li:hover a{ 99 nav ul li:hover a{
100 text-decoration: none; 100 text-decoration: none;
101 color: #ffffff; 101 color: #ffffff;
102 } 102 }
103 nav ul li.action{ 103 nav ul li.action{
104 color: #ffffff; 104 color: #ffffff;
105 background-color: #ed1d24; 105 background-color: #ed1d24;
106 } 106 }
107 /*ASIDE*/ 107 /*ASIDE*/
108 aside{ 108 aside{
109 margin: 10px 0; 109 margin: 10px 0;
110 } 110 }
111 111
112 aside .break-down{ 112 aside .break-down{
113 padding: 0 0; 113 padding: 0 0;
114 } 114 }
115 aside .break-down i.fa{ 115 aside .break-down i.fa{
116 font-size: 35px; 116 font-size: 35px;
117 color: #ff0000; 117 color: #ff0000;
118 } 118 }
119 aside .break-line{ 119 aside .break-line{
120 height: 10px; 120 height: 10px;
121 } 121 }
122 aside .break-line hr{ 122 aside .break-line hr{
123 border-top: 1px dotted #cccccc; 123 border-top: 1px dotted #cccccc;
124 } 124 }
125 aside .step{ 125 aside .step{
126 margin: 0 0; 126 margin: 0 0;
127 } 127 }
128 aside .step .title{ 128 aside .step .title{
129 font-size: 15px; 129 font-size: 15px;
130 line-height: 16px; 130 line-height: 16px;
131 font-weight: bold; 131 font-weight: bold;
132 margin-bottom: 3px; 132 margin-bottom: 3px;
133 } 133 }
134 aside .step .title-notice{ 134 aside .step .title-notice{
135 font-size: 13px; 135 font-size: 13px;
136 line-height: 16px; 136 line-height: 16px;
137 margin-bottom: 3px; 137 margin-bottom: 3px;
138 } 138 }
139 aside .step .title-notice .require{ 139 aside .step .title-notice .require{
140 font-size: 10px; 140 font-size: 10px;
141 } 141 }
142 aside .step .step-box{ 142 aside .step .step-box{
143 border: 2px solid #dcdcdc; 143 border: 2px solid #dcdcdc;
144 font-size: 12px; 144 font-size: 12px;
145 145
146 } 146 }
147 /*Step 1*/ 147 /*Step 1*/
148 aside .step .step-box .tshirt-design{ 148 aside .step .step-box .tshirt-design{
149 border: 1px solid #cccccc; 149 border: 1px solid #cccccc;
150 background-color: #f5f5f5; 150 background-color: #f5f5f5;
151 margin: 10px 10px; 151 margin: 10px 10px;
152 } 152 }
153 aside .step .step-box .tshirt-design:hover{ 153 aside .step .step-box .tshirt-design:hover{
154 border: 1px solid #ff0000; 154 border: 1px solid #ff0000;
155 } 155 }
156 aside .step .step-box .tshirt-design button:hover{ 156 aside .step .step-box .tshirt-design button:hover{
157 background-color: #fa7b7b; 157 background-color: #fa7b7b;
158 border: 1px solid #fa7b7b; 158 border: 1px solid #fa7b7b;
159 } 159 }
160 aside .step .step-box .tshirt-design div{ 160 aside .step .step-box .tshirt-design div{
161 float: left; 161 float: left;
162 } 162 }
163 aside .step .step-box .tshirt-design .icon{ 163 aside .step .step-box .tshirt-design .icon{
164 padding: 4px 4px; 164 padding: 4px 4px;
165 border-right: 1px solid #cccccc; 165 border-right: 1px solid #cccccc;
166 166
167 } 167 }
168 aside .step .step-box .tshirt-design .icon img{ 168 aside .step .step-box .tshirt-design .icon img{
169 height: 50px; 169 height: 50px;
170 } 170 }
171 aside .step .step-box .tshirt-design .name{ 171 aside .step .step-box .tshirt-design .name{
172 padding: 10px 10px; 172 padding: 10px 10px;
173 173
174 } 174 }
175 aside .step .step-box .tshirt-design .action{ 175 aside .step .step-box .tshirt-design .action{
176 padding: 10px 10px; 176 padding: 10px 10px;
177 float: right; 177 float: right;
178 178
179 } 179 }
180 aside .step .step-box .tshirt-design .action button{ 180 aside .step .step-box .tshirt-design .action button{
181 padding: 8px 10px; 181 padding: 8px 10px;
182 } 182 }
183 /*Step 2*/ 183 /*Step 2*/
184 aside .step .step-box .tshirt-color{ 184 aside .step .step-box .tshirt-color{
185 padding: 6px 10px; 185 padding: 6px 10px;
186 position: relative; 186 position: relative;
187 } 187 }
188 aside .step .step-box .tshirt-color ul.choice-color{ 188 aside .step .step-box .tshirt-color ul.choice-color{
189 float: left; 189 float: left;
190 list-style: none; 190 list-style: none;
191 padding-left: 0; 191 padding-left: 0;
192 width: 100%; 192 width: 100%;
193 margin-bottom: 3px; 193 margin-bottom: 3px;
194 } 194 }
195 aside .step .step-box .tshirt-color ul.choice-color li{ 195 aside .step .step-box .tshirt-color ul.choice-color li{
196 margin: 0 10px 0 0; 196 margin: 0 10px 0 0;
197 border: 1px solid #cccccc; 197 border: 1px solid #cccccc;
198 padding: 2px 2px; 198 padding: 2px 2px;
199 float: left; 199 float: left;
200 cursor: pointer; 200 cursor: pointer;
201 } 201 }
202 aside .step .step-box .tshirt-color ul.choice-color li.action{ 202 aside .step .step-box .tshirt-color ul.choice-color li.action{
203 border: 1px solid #ff0000; 203 border: 1px solid #ff0000;
204 } 204 }
205 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 205 aside .step .step-box .tshirt-color ul.choice-color li:hover{
206 border: 1px solid #ff0000; 206 border: 1px solid #ff0000;
207 } 207 }
208 aside .step .step-box .tshirt-color ul.choice-color li div{ 208 aside .step .step-box .tshirt-color ul.choice-color li div{
209 height: 30px; 209 height: 30px;
210 width: 30px; 210 width: 30px;
211 } 211 }
212 212
213 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 213 aside .step .step-box .tshirt-color ul.choice-color li.white div{
214 background-color: #ece7e4; 214 background-color: #ece7e4;
215 } 215 }
216 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 216 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
217 background-color: #e7dfd0; 217 background-color: #e7dfd0;
218 } 218 }
219 aside .step .step-box .tshirt-color .color-name{ 219 aside .step .step-box .tshirt-color .color-name{
220 width: 100%; 220 width: 100%;
221 font-size: 10px; 221 font-size: 10px;
222 } 222 }
223 aside .step .step-box .tshirt-color .view-more{ 223 aside .step .step-box .tshirt-color .view-more{
224 position: absolute; 224 position: absolute;
225 bottom: 6px; 225 bottom: 6px;
226 right: 10px; 226 right: 10px;
227 } 227 }
228 /*Step 3*/ 228 /*Step 3*/
229 aside .step .step-box .tshirt-saveorder{ 229 aside .step .step-box .tshirt-saveorder{
230 padding: 10px 10px 6px 10px; 230 padding: 10px 10px 6px 10px;
231 } 231 }
232 aside .step .step-box .tshirt-saveorder .action{ 232 aside .step .step-box .tshirt-saveorder .action{
233 width: 50%; 233 width: 50%;
234 float: left; 234 float: left;
235 } 235 }
236 aside .step .step-box .tshirt-saveorder .action:first-child{ 236 aside .step .step-box .tshirt-saveorder .action:first-child{
237 padding-right: 5px; 237 padding-right: 5px;
238 } 238 }
239 aside .step .step-box .tshirt-saveorder .action:last-child{ 239 aside .step .step-box .tshirt-saveorder .action:last-child{
240 padding-left: 5px; 240 padding-left: 5px;
241 } 241 }
242 aside .step .step-box .tshirt-saveorder .action button{ 242 aside .step .step-box .tshirt-saveorder .action button{
243 padding: 8px 10px; 243 padding: 8px 10px;
244 244
245 } 245 }
246 aside .step .step-box .tshirt-saveorder .action button .text{ 246 aside .step .step-box .tshirt-saveorder .action button .text{
247 float: left; 247 float: left;
248 width: 80%; 248 width: 80%;
249 text-align: center; 249 text-align: center;
250 padding-left: 10px; 250 padding-left: 10px;
251 vertical-align: bottom; 251 vertical-align: bottom;
252 } 252 }
253 aside .step .step-box .tshirt-saveorder .action button .arrow{ 253 aside .step .step-box .tshirt-saveorder .action button .arrow{
254 float: left; 254 float: left;
255 width: 20%; 255 width: 20%;
256 height: 40px; 256 height: 40px;
257 position: relative; 257 position: relative;
258 } 258 }
259 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 259 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
260 position: absolute; 260 position: absolute;
261 top: 50%; 261 top: 50%;
262 right: -6px; 262 right: -6px;
263 transform: translateX(-50%) translateY(-50%); 263 transform: translateX(-50%) translateY(-50%);
264 -webkit-transform: translateX(-50%) translateY(-50%); 264 -webkit-transform: translateX(-50%) translateY(-50%);
265 } 265 }
266 aside .step .step-box .tshirt-saveorder .notice{ 266 aside .step .step-box .tshirt-saveorder .notice{
267 padding: 5px 0 0 0; 267 padding: 5px 0 0 0;
268 } 268 }
269 /*Step 4*/ 269 /*Step 4*/
270 aside .step .title-notice{ 270 aside .step .title-notice{
271 271
272 } 272 }
273 aside .step .step-box .change-design{ 273 aside .step .step-box .change-design{
274 padding: 4px 4px; 274 padding: 4px 4px;
275 } 275 }
276 aside .step .step-box .change-design table{ 276 aside .step .step-box .change-design table{
277 277
278 } 278 }
279 aside .step .step-box .change-design table tr{ 279 aside .step .step-box .change-design table tr{
280 border-bottom: 1px dotted #cccccc; 280 border-bottom: 1px dotted #cccccc;
281 } 281 }
282 aside .step .step-box .change-design table tr:last-child{ 282 aside .step .step-box .change-design table tr:last-child{
283 border-bottom: 0; 283 border-bottom: 0;
284 } 284 }
285 285
286 /*Step 5- finish*/ 286 /*Step 5- finish*/
287 aside .step .finish-design{ 287 aside .step .finish-design{
288 padding: 20px 0; 288 padding: 20px 0;
289 } 289 }
290 aside .step .finish-design button{ 290 aside .step .finish-design button{
291 width: 100%; 291 width: 100%;
292 padding: 8px 10px; 292 padding: 8px 10px;
293 } 293 }
294 294
295 /*DESIGN CONTENT*/ 295 /*DESIGN CONTENT*/
296 #tshirt-content{ 296 #tshirt-content{
297 position: relative; 297 position: relative;
298 } 298 }
299 #tshirt-content .switch-border-design{ 299 #tshirt-content .switch-border-design{
300 position: absolute; 300 position: absolute;
301 top: 5px; 301 top: 5px;
302 right: 10px; 302 right: 10px;
303 color: red; 303 color: red;
304 font-size: 11px; 304 font-size: 11px;
305 } 305 }
306 #tshirt-content .tshirt-image{ 306 #tshirt-content .tshirt-image{
307 padding: 20px 0 0 0; 307 padding: 20px 0 0 0;
308 } 308 }
309 309
310 #tshirt-content .tshirt-image img{
311 width: 100%;
312 }
313
310 #preview-design { 314 #preview-design {
311 position: absolute; 315 position: absolute;
312 width: 150px; 316 width: 150px;
313 height: 182px; 317 height: 182px;
314 border: dashed 2px #DDD; 318 border: dashed 2px #DDD;
315 bottom: 180px; 319 bottom: 180px;
316 left: 200px; 320 left: 200px;
317 } 321 }
318 322
319 #preview-design img { 323 #preview-design img {
320 width: 150px; 324 width: 150px;
321 } 325 }
322 326
323 #tshirt-content .tshirt-choice{ 327 #tshirt-content .tshirt-choice{
324 328
325 } 329 }
326 #tshirt-content .tshirt-choice ul{ 330 #tshirt-content .tshirt-choice ul{
327 list-style: none; 331 list-style: none;
328 padding-left: 0; 332 padding-left: 0;
329 display: table; 333 display: table;
330 margin: auto; 334 margin: auto;
331 } 335 }
332 #tshirt-content .tshirt-choice ul li{ 336 #tshirt-content .tshirt-choice ul li{
333 float: left; 337 float: left;
334 margin: 10px 10px; 338 margin: 10px 10px;
335 cursor: pointer; 339 cursor: pointer;
336 } 340 }
337 #tshirt-content .tshirt-choice ul li .image{ 341 #tshirt-content .tshirt-choice ul li .image{
338 border: 1px solid #cccccc; 342 border: 1px solid #cccccc;
339 padding: 3px 3px; 343 padding: 3px 3px;
340 } 344 }
341 #tshirt-content .tshirt-choice ul li.focus{ 345 #tshirt-content .tshirt-choice ul li.focus{
342 346
343 } 347 }
344 #tshirt-content .tshirt-choice ul li.focus .image{ 348 #tshirt-content .tshirt-choice ul li.focus .image{
345 border: 1px solid #ff0000; 349 border: 1px solid #ff0000;
346 } 350 }
347 #tshirt-content .tshirt-choice ul li .image img{ 351 #tshirt-content .tshirt-choice ul li .image img{
348 width: 50px; 352 width: 50px;
349 height: auto; 353 height: auto;
350 } 354 }
351 /*MODAL Design*/ 355 /*MODAL Design*/
352 #tshirt-design{ 356 #tshirt-design{
353 background-color: #666666; 357 background-color: #666666;
354 } 358 }
355 #tshirt-design .modal-dialog{ 359 #tshirt-design .modal-dialog{
356 width: 75%; 360 width: 75%;
357 margin: 0 auto; 361 margin: 0 auto;
358 } 362 }
359 #tshirt-design .modal-dialog .modal-content{ 363 #tshirt-design .modal-dialog .modal-content{
360 background-color: transparent; 364 background-color: transparent;
361 border-radius: 0; 365 border-radius: 0;
362 border: 0; 366 border: 0;
363 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 367 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
364 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 368 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
365 } 369 }
366 #tshirt-design .modal-dialog .modal-content .modal-header{ 370 #tshirt-design .modal-dialog .modal-content .modal-header{
367 padding: 0 0 10px 0; 371 padding: 0 0 10px 0;
368 border-bottom: 0; 372 border-bottom: 0;
369 border-shadow: none!important; 373 border-shadow: none!important;
370 } 374 }
371 #tshirt-design .modal-dialog .modal-content .modal-body{ 375 #tshirt-design .modal-dialog .modal-content .modal-body{
372 background-color: #f5f5f5; 376 background-color: #f5f5f5;
373 padding: 0 0; 377 padding: 0 0;
374 } 378 }
375 #tshirt-design header{ 379 #tshirt-design header{
376 border-bottom: 1px solid #cccccc; 380 border-bottom: 1px solid #cccccc;
377 background-color: #dddddd; 381 background-color: #dddddd;
378 } 382 }
379 #tshirt-design header ul.nav{ 383 #tshirt-design header ul.nav{
380 padding-left: 0; 384 padding-left: 0;
381 list-style: none; 385 list-style: none;
382 } 386 }
383 #tshirt-design header ul.nav li{ 387 #tshirt-design header ul.nav li{
384 float: left; 388 float: left;
385 padding: 8px 26px; 389 padding: 8px 26px;
386 border-right: 1px solid #cccccc; 390 border-right: 1px solid #cccccc;
387 font-size: 14px; 391 font-size: 14px;
388 cursor: pointer; 392 cursor: pointer;
389 } 393 }
390 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 394 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
391 background-color: red; 395 background-color: red;
392 color: #ffffff; 396 color: #ffffff;
393 } 397 }
394 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 398 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
395 color: #ffffff; 399 color: #ffffff;
396 } 400 }
397 #tshirt-design header ul.nav li i.fa{ 401 #tshirt-design header ul.nav li i.fa{
398 color: #fe070f; 402 color: #fe070f;
399 font-size: 20px; 403 font-size: 20px;
400 margin-right: 10px; 404 margin-right: 10px;
401 } 405 }
402 #tshirt-design header .action{ 406 #tshirt-design header .action{
403 407
404 } 408 }
405 #tshirt-design header .action button{ 409 #tshirt-design header .action button{
406 padding: 2px 10px; 410 padding: 2px 10px;
407 margin: 6px 10px; 411 margin: 6px 10px;
408 } 412 }
409 #tshirt-design header .action button:hover{ 413 #tshirt-design header .action button:hover{
410 background-color: red; 414 background-color: red;
411 color: #ffffff; 415 color: #ffffff;
412 } 416 }
413 417
414 /*Aside modal*/ 418 /*Aside modal*/
415 .aside{ 419 .aside{
416 } 420 }
417 421
418 .aside .box-design-option{ 422 .aside .box-design-option{
419 list-style: none; 423 list-style: none;
420 padding-left: 0; 424 padding-left: 0;
421 margin-top: 10px; 425 margin-top: 10px;
422 } 426 }
423 427
424 .aside .box-design-option li{ 428 .aside .box-design-option li{
425 border: 1px solid #cdcdcd; 429 border: 1px solid #cdcdcd;
426 position: relative; 430 position: relative;
427 /*cursor: pointer;*/ 431 /*cursor: pointer;*/
428 margin-bottom: 10px; 432 margin-bottom: 10px;
429 } 433 }
430 .aside .box-design-option li .hover{ 434 .aside .box-design-option li .hover{
431 background-color: #fddad4; 435 background-color: #fddad4;
432 opacity: 0.6; 436 opacity: 0.6;
433 position: absolute; 437 position: absolute;
434 width: 100%; 438 width: 100%;
435 height: 100%; 439 height: 100%;
436 display: none; 440 display: none;
437 } 441 }
438 .aside .box-design-option li:hover .hover{ 442 .aside .box-design-option li:hover .hover{
439 display: block; 443 display: block;
440 } 444 }
441 445
442 .aside .box-design-option li .title{ 446 .aside .box-design-option li .title{
443 background: url("../images/bg1.png") repeat #cdcdcd; 447 background: url("../images/bg1.png") repeat #cdcdcd;
444 padding: 3px 10px; 448 padding: 3px 10px;
445 } 449 }
446 .aside .box-design-option li .title i.fa{ 450 .aside .box-design-option li .title i.fa{
447 color: #000000; 451 color: #000000;
448 } 452 }
449 453
450 .aside .box-design-option li .content{ 454 .aside .box-design-option li .content{
451 455
452 } 456 }
453 .aside .box-design-option li .content i.fa{ 457 .aside .box-design-option li .content i.fa{
454 font-size: 30px; 458 font-size: 30px;
455 color: #fe070f; 459 color: #fe070f;
456 margin: 8px 0; 460 margin: 8px 0;
457 } 461 }
458 .aside .box-design-option li .content .des{ 462 .aside .box-design-option li .content .des{
459 padding: 3px 10px 3px 0; 463 padding: 3px 10px 3px 0;
460 } 464 }
461 .aside .box-design-option li .content .color-patterns { 465 .aside .box-design-option li .content .color-patterns {
462 width: 100%; 466 width: 100%;
463 border: #bbb solid 1px; 467 border: #bbb solid 1px;
464 background: #FFF; 468 background: #FFF;
465 margin-top: 5px; 469 margin-top: 5px;
466 min-height: 65px; 470 min-height: 65px;
467 } 471 }
468 472
469 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 473 .aside .box-design-option li .content .color-patterns .color-pattern-item{
470 height: 20px; 474 height: 20px;
471 float: left; 475 float: left;
472 margin-left: 4px; 476 margin-left: 4px;
473 margin-top: 2px; 477 margin-top: 2px;
474 width: 20px; 478 width: 20px;
475 cursor: pointer; 479 cursor: pointer;
476 border: 1px solid #ddd; 480 border: 1px solid #ddd;
477 } 481 }
478 482
479 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { 483 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
480 outline: 1px solid #ed1d24; 484 outline: 1px solid #ed1d24;
481 } 485 }
482 486
483 .aside .box-design-option li .title .reset-color-patterns { 487 .aside .box-design-option li .title .reset-color-patterns {
484 cursor: pointer; 488 cursor: pointer;
485 } 489 }
486 490
487 .aside .box-design-option li .title .reset-color-patterns:hover { 491 .aside .box-design-option li .title .reset-color-patterns:hover {
488 opacity: 0.6; 492 opacity: 0.6;
489 } 493 }
490 494
491 .aside .box-design-option li .content .layer-item { 495 .aside .box-design-option li .content .layer-item {
492 text-align: center; 496 text-align: center;
493 border: 1px #ddd solid; 497 border: 1px #ddd solid;
494 background: #FFF; 498 background: #FFF;
495 padding: 5px; 499 padding: 5px;
496 font-size: 12px; 500 font-size: 12px;
497 cursor: pointer; 501 cursor: pointer;
498 } 502 }
499 503
500 .aside .box-design-option li .content .layer-item:hover { 504 .aside .box-design-option li .content .layer-item:hover {
501 background: #ffcccc; 505 background: #ffcccc;
502 } 506 }
503 507
504 508
505 /*Design Text*/ 509 /*Design Text*/
506 .aside #choice-text{ 510 .aside #choice-text{
507 511
508 } 512 }
509 .aside #choice-text .content{ 513 .aside #choice-text .content{
510 padding: 10px 10px; 514 padding: 10px 10px;
511 } 515 }
512 .aside #choice-text .content ul.font-family-box{ 516 .aside #choice-text .content ul.font-family-box{
513 list-style: none; 517 list-style: none;
514 margin: 10px 0; 518 margin: 10px 0;
515 padding-left: 0; 519 padding-left: 0;
516 height: 180px; 520 height: 180px;
517 width: 100%; 521 width: 100%;
518 overflow-y: scroll; 522 overflow-y: scroll;
519 border: 1px solid #c0c0c0; 523 border: 1px solid #c0c0c0;
520 } 524 }
521 525
522 .aside #choice-text .content .font-family-box li{ 526 .aside #choice-text .content .font-family-box li{
523 cursor: pointer; 527 cursor: pointer;
524 padding: 4px 8px; 528 padding: 4px 8px;
525 border: 0; 529 border: 0;
526 border-bottom: 1px solid #c0c0c0; 530 border-bottom: 1px solid #c0c0c0;
527 border-right: 1px solid #c0c0c0; 531 border-right: 1px solid #c0c0c0;
528 font-size: 16px; 532 font-size: 16px;
529 } 533 }
530 .aside #choice-text .content .spacing-letter{ 534 .aside #choice-text .content .spacing-letter{
531 535
532 } 536 }
533 .aside #choice-text .content .spacing-letter .text-label{ 537 .aside #choice-text .content .spacing-letter .text-label{
534 font-size: 16px; 538 font-size: 16px;
535 padding: 4px 0; 539 padding: 4px 0;
536 } 540 }
537 .aside #choice-text .content .spacing-letter .box{ 541 .aside #choice-text .content .spacing-letter .box{
538 border: 1px solid #8c8c8c; 542 border: 1px solid #8c8c8c;
539 box-shadow: 0 0 5px #888888; 543 box-shadow: 0 0 5px #888888;
540 background-color: #f0f0f0; 544 background-color: #f0f0f0;
541 } 545 }
542 .aside #choice-text .content .spacing-letter .item{ 546 .aside #choice-text .content .spacing-letter .item{
543 float: left; 547 float: left;
544 } 548 }
545 549
546 .aside #choice-text .content .spacing-letter .item i.fa{ 550 .aside #choice-text .content .spacing-letter .item i.fa{
547 font-size: 22px; 551 font-size: 22px;
548 margin: 0 0; 552 margin: 0 0;
549 color: #000000; 553 color: #000000;
550 } 554 }
551 .aside #choice-text .content .spacing-letter .item-text{ 555 .aside #choice-text .content .spacing-letter .item-text{
552 padding: 6px 20px; 556 padding: 6px 20px;
553 font-size: 12px; 557 font-size: 12px;
554 } 558 }
555 .aside #choice-text .content .spacing-letter .item-plus{ 559 .aside #choice-text .content .spacing-letter .item-plus{
556 border-right: 1px solid #8c8c8c; 560 border-right: 1px solid #8c8c8c;
557 } 561 }
558 .aside #choice-text .content .spacing-letter .item-minus{ 562 .aside #choice-text .content .spacing-letter .item-minus{
559 border-left: 1px solid #8c8c8c; 563 border-left: 1px solid #8c8c8c;
560 } 564 }
561 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { 565 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
562 padding: 5px 6px 1px 6px; 566 padding: 5px 6px 1px 6px;
563 cursor: pointer; 567 cursor: pointer;
564 } 568 }
565 /*Design Choice Illustration*/ 569 /*Design Choice Illustration*/
566 .aside #choice-illustration li .content { 570 .aside #choice-illustration li .content {
567 padding: 10px 10px; 571 padding: 10px 10px;
568 } 572 }
569 573
570 .aside #choice-illustration li .content select{ 574 .aside #choice-illustration li .content select{
571 width: 100%; 575 width: 100%;
572 } 576 }
573 577
574 .aside #choice-illustration li .content .illustration-list { 578 .aside #choice-illustration li .content .illustration-list {
575 width: 100%; 579 width: 100%;
576 border: #bbb solid 1px; 580 border: #bbb solid 1px;
577 background: #FFF; 581 background: #FFF;
578 margin-top: 5px; 582 margin-top: 5px;
579 min-height: 310px; 583 min-height: 310px;
580 padding-bottom: 20px; 584 padding-bottom: 20px;
581 } 585 }
582 586
583 .aside #choice-illustration li .content .illustration-list .illstration-item{ 587 .aside #choice-illustration li .content .illustration-list .illstration-item{
584 height: 60px; 588 height: 60px;
585 overflow: hidden; 589 overflow: hidden;
586 float: left; 590 float: left;
587 margin-left: 6px; 591 margin-left: 6px;
588 margin-top: 5px; 592 margin-top: 5px;
589 margin-bottom: 5px; 593 margin-bottom: 5px;
590 padding: 2px; 594 padding: 2px;
591 background: #e2e2e2; 595 background: #e2e2e2;
592 border: solid 2px #d7d7d7; 596 border: solid 2px #d7d7d7;
593 cursor: pointer; 597 cursor: pointer;
594 } 598 }
595 599
596 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 600 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
597 outline: 2px solid #ed1d24; 601 outline: 2px solid #ed1d24;
598 } 602 }
599 603
600 .aside #choice-illustration li .content .illustration-list .illstration-item img { 604 .aside #choice-illustration li .content .illustration-list .illstration-item img {
601 width: 50px; 605 width: 50px;
602 cursor: pointer; 606 cursor: pointer;
603 } 607 }
604 608
605 .aside #choice-illustration li .content .illustration-list .footer-bar { 609 .aside #choice-illustration li .content .illustration-list .footer-bar {
606 text-align: center; 610 text-align: center;
607 margin-top: 5px; 611 margin-top: 5px;
608 bottom: 10px; 612 bottom: 10px;
609 position: absolute; 613 position: absolute;
610 width: 100%; 614 width: 100%;
611 padding-right: 20px; 615 padding-right: 20px;
612 } 616 }
613 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { 617 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
614 margin-right: 5px; 618 margin-right: 5px;
615 cursor: pointer; 619 cursor: pointer;
616 font-size: 9px; 620 font-size: 9px;
617 color: #FFF; 621 color: #FFF;
618 background: #666666; 622 background: #666666;
619 text-transform: uppercase; 623 text-transform: uppercase;
620 padding: 2px 5px; 624 padding: 2px 5px;
621 } 625 }
622 626
623 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { 627 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
624 background: #999999; 628 background: #999999;
625 } 629 }
626 .tooltip-arrow, 630 .tooltip-arrow,
627 .red-tooltip + .tooltip > .tooltip-inner { 631 .red-tooltip + .tooltip > .tooltip-inner {
628 background-color: #FFF; 632 background-color: #FFF;
629 margin:0; 633 margin:0;
630 padding:0; 634 padding:0;
631 } 635 }
632 636
633 /* Insert image*/ 637 /* Insert image*/
634 #btn-choose-image { 638 #btn-choose-image {
635 background: #ff0f00; 639 background: #ff0f00;
636 cursor: pointer; 640 cursor: pointer;
637 margin: 10px 0px; 641 margin: 10px 0px;
638 padding: 0 10px; 642 padding: 0 10px;
639 color: #FFF; 643 color: #FFF;
640 font-size: 12px; 644 font-size: 12px;
641 } 645 }
642 646
643 #btn-choose-image:hover { 647 #btn-choose-image:hover {
644 background: #f8aeae; 648 background: #f8aeae;
645 } 649 }
646 650
647 .aside #choice-image li .content { 651 .aside #choice-image li .content {
648 margin: 0 10px; 652 margin: 0 10px;
649 padding: 10px 0; 653 padding: 10px 0;
650 } 654 }
651 655
652 .aside #choice-image li .content .small-text { 656 .aside #choice-image li .content .small-text {
653 font-size:10px; 657 font-size:10px;
654 margin-bottom: 10px; 658 margin-bottom: 10px;
655 } 659 }
656 660
657 .aside #choice-image { 661 .aside #choice-image {
658 font-size: 13px; 662 font-size: 13px;
659 } 663 }
660 664
661 .aside #imgLoader{ 665 .aside #imgLoader{
662 display: none; 666 display: none;
663 } 667 }
664 668
665 .aside #choice-image li .content .list-images { 669 .aside #choice-image li .content .list-images {
666 height: 300px; 670 height: 300px;
667 background: #FFF; 671 background: #FFF;
668 border: 1px solid #DDD; 672 border: 1px solid #DDD;
669 } 673 }
670 674
671 /*Design content*/ 675 /*Design content*/
672 .tshirt-design-container{ 676 .tshirt-design-container{
673 position: relative; 677 position: relative;
674 } 678 }
675 .tshirt-design-container .design-content{ 679 .tshirt-design-container .design-content{
676 padding: 10px 30px 10px 15px; 680 padding: 10px 30px 10px 15px;
677 } 681 }
678 .tshirt-design-container .design-content .content{ 682 .tshirt-design-container .design-content .content{
679 width: 100%; 683 width: 100%;
680 min-height: 650px; 684 min-height: 650px;
681 background-color: #f0efea; 685 background-color: #f0efea;
682 padding: 40px 40px; 686 padding: 40px 40px;
683 height: 100%; 687 height: 100%;
684 } 688 }
685 .tshirt-design-container .design-content .content .selection-design{ 689 .tshirt-design-container .design-content .content .selection-design{
686 border: 1px solid #ff0000; 690 border: 1px solid #ff0000;
687 width: 100%; 691 width: 100%;
688 height: 620px; 692 height: 620px;
689 } 693 }
690 .tshirt-design-container .agree-design{ 694 .tshirt-design-container .agree-design{
691 position: absolute; 695 position: absolute;
692 right: -16px; 696 right: -16px;
693 top: 40%; 697 top: 40%;
694 cursor: pointer; 698 cursor: pointer;
695 } 699 }
696 .tshirt-design-container .agree-design:hover{ 700 .tshirt-design-container .agree-design:hover{
697 opacity: 0.8; 701 opacity: 0.8;
698 } 702 }
699 .tshirt-design-container .trash-design{ 703 .tshirt-design-container .trash-design{
700 position: absolute; 704 position: absolute;
701 right: 5px; 705 right: 5px;
702 bottom: 0; 706 bottom: 0;
703 } 707 }
704 .tshirt-design-container .trash-design:hover{ 708 .tshirt-design-container .trash-design:hover{
705 opacity: 0.5; 709 opacity: 0.5;
706 } 710 }
707 711
708 712
709 713
710 /*FOOTER*/ 714 /*FOOTER*/
711 footer{ 715 footer{
712 background-color: #333333; 716 background-color: #333333;
713 } 717 }
714 footer ul.nav-footer{ 718 footer ul.nav-footer{
715 padding-left: 0; 719 padding-left: 0;
716 list-style: none; 720 list-style: none;
717 } 721 }
718 footer ul.nav-footer li{ 722 footer ul.nav-footer li{
719 float: left; 723 float: left;
720 padding: 3px 10px; 724 padding: 3px 10px;
721 border-right: 1px dotted #ffffff; 725 border-right: 1px dotted #ffffff;
722 726
723 } 727 }
724 footer ul.nav-footer li a{ 728 footer ul.nav-footer li a{
725 color: #ffffff; 729 color: #ffffff;
726 font-size: 11px; 730 font-size: 11px;
727 } 731 }
728 /* Customize container */ 732 /* Customize container */
729 @media (min-width: 768px) { 733 @media (min-width: 768px) {
730 .container { 734 .container {
731 /*max-width: 730px;*/ 735 /*max-width: 730px;*/
732 } 736 }
733 } 737 }
734 738
735 /* Responsive: Portrait tablets and up */ 739 /* Responsive: Portrait tablets and up */
736 @media screen and (min-width: 768px) { 740 @media screen and (min-width: 768px) {
737 /* Remove the padding we set earlier */ 741 /* Remove the padding we set earlier */
738 742
739 } 743 }
740 744
741 @media (min-width: 1024px) { 745 @media (min-width: 1024px) {
742 #tshirt-design .modal-dialog{ 746 #tshirt-design .modal-dialog{
743 min-width: 1000px; 747 min-width: 1000px;
744 } 748 }
745 } 749 }
746 750
747 @media (max-width: 1200px) { 751 @media (max-width: 1200px) {
748 #preview-design { 752 #preview-design {
749 left: 160px; 753 left: 155px;
754 }
755 }
756
757 @media (max-width: 990px) {
758 #preview-design {
759 left: 115px;
760 width: 120px;
761 height: 162px;
762 bottom: 150px;
750 } 763 }
751 } 764 }