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

Download as
Browse Code ยป

Commit a3d420e25db6866e789e885a0d71cbc1534255ca

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

fix responsive on preview design box

Showing 2 changed files with 8 additions and 1 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_02'; 49 var VERSION = '21-11_03';
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 #preview-design { 310 #preview-design {
311 position: absolute; 311 position: absolute;
312 width: 150px; 312 width: 150px;
313 height: 182px; 313 height: 182px;
314 border: dashed 2px #DDD; 314 border: dashed 2px #DDD;
315 bottom: 180px; 315 bottom: 180px;
316 left: 200px; 316 left: 200px;
317 } 317 }
318
318 #preview-design img { 319 #preview-design img {
319 width: 150px; 320 width: 150px;
320 } 321 }
321 322
322 #tshirt-content .tshirt-choice{ 323 #tshirt-content .tshirt-choice{
323 324
324 } 325 }
325 #tshirt-content .tshirt-choice ul{ 326 #tshirt-content .tshirt-choice ul{
326 list-style: none; 327 list-style: none;
327 padding-left: 0; 328 padding-left: 0;
328 display: table; 329 display: table;
329 margin: auto; 330 margin: auto;
330 } 331 }
331 #tshirt-content .tshirt-choice ul li{ 332 #tshirt-content .tshirt-choice ul li{
332 float: left; 333 float: left;
333 margin: 10px 10px; 334 margin: 10px 10px;
334 cursor: pointer; 335 cursor: pointer;
335 } 336 }
336 #tshirt-content .tshirt-choice ul li .image{ 337 #tshirt-content .tshirt-choice ul li .image{
337 border: 1px solid #cccccc; 338 border: 1px solid #cccccc;
338 padding: 3px 3px; 339 padding: 3px 3px;
339 } 340 }
340 #tshirt-content .tshirt-choice ul li.focus{ 341 #tshirt-content .tshirt-choice ul li.focus{
341 342
342 } 343 }
343 #tshirt-content .tshirt-choice ul li.focus .image{ 344 #tshirt-content .tshirt-choice ul li.focus .image{
344 border: 1px solid #ff0000; 345 border: 1px solid #ff0000;
345 } 346 }
346 #tshirt-content .tshirt-choice ul li .image img{ 347 #tshirt-content .tshirt-choice ul li .image img{
347 width: 50px; 348 width: 50px;
348 height: auto; 349 height: auto;
349 } 350 }
350 /*MODAL Design*/ 351 /*MODAL Design*/
351 #tshirt-design{ 352 #tshirt-design{
352 background-color: #666666; 353 background-color: #666666;
353 } 354 }
354 #tshirt-design .modal-dialog{ 355 #tshirt-design .modal-dialog{
355 width: 75%; 356 width: 75%;
356 margin: 0 auto; 357 margin: 0 auto;
357 } 358 }
358 #tshirt-design .modal-dialog .modal-content{ 359 #tshirt-design .modal-dialog .modal-content{
359 background-color: transparent; 360 background-color: transparent;
360 border-radius: 0; 361 border-radius: 0;
361 border: 0; 362 border: 0;
362 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 363 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
363 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 364 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
364 } 365 }
365 #tshirt-design .modal-dialog .modal-content .modal-header{ 366 #tshirt-design .modal-dialog .modal-content .modal-header{
366 padding: 0 0 10px 0; 367 padding: 0 0 10px 0;
367 border-bottom: 0; 368 border-bottom: 0;
368 border-shadow: none!important; 369 border-shadow: none!important;
369 } 370 }
370 #tshirt-design .modal-dialog .modal-content .modal-body{ 371 #tshirt-design .modal-dialog .modal-content .modal-body{
371 background-color: #f5f5f5; 372 background-color: #f5f5f5;
372 padding: 0 0; 373 padding: 0 0;
373 } 374 }
374 #tshirt-design header{ 375 #tshirt-design header{
375 border-bottom: 1px solid #cccccc; 376 border-bottom: 1px solid #cccccc;
376 background-color: #dddddd; 377 background-color: #dddddd;
377 } 378 }
378 #tshirt-design header ul.nav{ 379 #tshirt-design header ul.nav{
379 padding-left: 0; 380 padding-left: 0;
380 list-style: none; 381 list-style: none;
381 } 382 }
382 #tshirt-design header ul.nav li{ 383 #tshirt-design header ul.nav li{
383 float: left; 384 float: left;
384 padding: 8px 26px; 385 padding: 8px 26px;
385 border-right: 1px solid #cccccc; 386 border-right: 1px solid #cccccc;
386 font-size: 14px; 387 font-size: 14px;
387 cursor: pointer; 388 cursor: pointer;
388 } 389 }
389 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 390 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
390 background-color: red; 391 background-color: red;
391 color: #ffffff; 392 color: #ffffff;
392 } 393 }
393 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 394 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
394 color: #ffffff; 395 color: #ffffff;
395 } 396 }
396 #tshirt-design header ul.nav li i.fa{ 397 #tshirt-design header ul.nav li i.fa{
397 color: #fe070f; 398 color: #fe070f;
398 font-size: 20px; 399 font-size: 20px;
399 margin-right: 10px; 400 margin-right: 10px;
400 } 401 }
401 #tshirt-design header .action{ 402 #tshirt-design header .action{
402 403
403 } 404 }
404 #tshirt-design header .action button{ 405 #tshirt-design header .action button{
405 padding: 2px 10px; 406 padding: 2px 10px;
406 margin: 6px 10px; 407 margin: 6px 10px;
407 } 408 }
408 #tshirt-design header .action button:hover{ 409 #tshirt-design header .action button:hover{
409 background-color: red; 410 background-color: red;
410 color: #ffffff; 411 color: #ffffff;
411 } 412 }
412 413
413 /*Aside modal*/ 414 /*Aside modal*/
414 .aside{ 415 .aside{
415 } 416 }
416 417
417 .aside .box-design-option{ 418 .aside .box-design-option{
418 list-style: none; 419 list-style: none;
419 padding-left: 0; 420 padding-left: 0;
420 margin-top: 10px; 421 margin-top: 10px;
421 } 422 }
422 423
423 .aside .box-design-option li{ 424 .aside .box-design-option li{
424 border: 1px solid #cdcdcd; 425 border: 1px solid #cdcdcd;
425 position: relative; 426 position: relative;
426 /*cursor: pointer;*/ 427 /*cursor: pointer;*/
427 margin-bottom: 10px; 428 margin-bottom: 10px;
428 } 429 }
429 .aside .box-design-option li .hover{ 430 .aside .box-design-option li .hover{
430 background-color: #fddad4; 431 background-color: #fddad4;
431 opacity: 0.6; 432 opacity: 0.6;
432 position: absolute; 433 position: absolute;
433 width: 100%; 434 width: 100%;
434 height: 100%; 435 height: 100%;
435 display: none; 436 display: none;
436 } 437 }
437 .aside .box-design-option li:hover .hover{ 438 .aside .box-design-option li:hover .hover{
438 display: block; 439 display: block;
439 } 440 }
440 441
441 .aside .box-design-option li .title{ 442 .aside .box-design-option li .title{
442 background: url("../images/bg1.png") repeat #cdcdcd; 443 background: url("../images/bg1.png") repeat #cdcdcd;
443 padding: 3px 10px; 444 padding: 3px 10px;
444 } 445 }
445 .aside .box-design-option li .title i.fa{ 446 .aside .box-design-option li .title i.fa{
446 color: #000000; 447 color: #000000;
447 } 448 }
448 449
449 .aside .box-design-option li .content{ 450 .aside .box-design-option li .content{
450 451
451 } 452 }
452 .aside .box-design-option li .content i.fa{ 453 .aside .box-design-option li .content i.fa{
453 font-size: 30px; 454 font-size: 30px;
454 color: #fe070f; 455 color: #fe070f;
455 margin: 8px 0; 456 margin: 8px 0;
456 } 457 }
457 .aside .box-design-option li .content .des{ 458 .aside .box-design-option li .content .des{
458 padding: 3px 10px 3px 0; 459 padding: 3px 10px 3px 0;
459 } 460 }
460 .aside .box-design-option li .content .color-patterns { 461 .aside .box-design-option li .content .color-patterns {
461 width: 100%; 462 width: 100%;
462 border: #bbb solid 1px; 463 border: #bbb solid 1px;
463 background: #FFF; 464 background: #FFF;
464 margin-top: 5px; 465 margin-top: 5px;
465 min-height: 65px; 466 min-height: 65px;
466 } 467 }
467 468
468 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 469 .aside .box-design-option li .content .color-patterns .color-pattern-item{
469 height: 20px; 470 height: 20px;
470 float: left; 471 float: left;
471 margin-left: 4px; 472 margin-left: 4px;
472 margin-top: 2px; 473 margin-top: 2px;
473 width: 20px; 474 width: 20px;
474 cursor: pointer; 475 cursor: pointer;
475 border: 1px solid #ddd; 476 border: 1px solid #ddd;
476 } 477 }
477 478
478 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { 479 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
479 outline: 1px solid #ed1d24; 480 outline: 1px solid #ed1d24;
480 } 481 }
481 482
482 .aside .box-design-option li .title .reset-color-patterns { 483 .aside .box-design-option li .title .reset-color-patterns {
483 cursor: pointer; 484 cursor: pointer;
484 } 485 }
485 486
486 .aside .box-design-option li .title .reset-color-patterns:hover { 487 .aside .box-design-option li .title .reset-color-patterns:hover {
487 opacity: 0.6; 488 opacity: 0.6;
488 } 489 }
489 490
490 .aside .box-design-option li .content .layer-item { 491 .aside .box-design-option li .content .layer-item {
491 text-align: center; 492 text-align: center;
492 border: 1px #ddd solid; 493 border: 1px #ddd solid;
493 background: #FFF; 494 background: #FFF;
494 padding: 5px; 495 padding: 5px;
495 font-size: 12px; 496 font-size: 12px;
496 cursor: pointer; 497 cursor: pointer;
497 } 498 }
498 499
499 .aside .box-design-option li .content .layer-item:hover { 500 .aside .box-design-option li .content .layer-item:hover {
500 background: #ffcccc; 501 background: #ffcccc;
501 } 502 }
502 503
503 504
504 /*Design Text*/ 505 /*Design Text*/
505 .aside #choice-text{ 506 .aside #choice-text{
506 507
507 } 508 }
508 .aside #choice-text .content{ 509 .aside #choice-text .content{
509 padding: 10px 10px; 510 padding: 10px 10px;
510 } 511 }
511 .aside #choice-text .content ul.font-family-box{ 512 .aside #choice-text .content ul.font-family-box{
512 list-style: none; 513 list-style: none;
513 margin: 10px 0; 514 margin: 10px 0;
514 padding-left: 0; 515 padding-left: 0;
515 height: 180px; 516 height: 180px;
516 width: 100%; 517 width: 100%;
517 overflow-y: scroll; 518 overflow-y: scroll;
518 border: 1px solid #c0c0c0; 519 border: 1px solid #c0c0c0;
519 } 520 }
520 521
521 .aside #choice-text .content .font-family-box li{ 522 .aside #choice-text .content .font-family-box li{
522 cursor: pointer; 523 cursor: pointer;
523 padding: 4px 8px; 524 padding: 4px 8px;
524 border: 0; 525 border: 0;
525 border-bottom: 1px solid #c0c0c0; 526 border-bottom: 1px solid #c0c0c0;
526 border-right: 1px solid #c0c0c0; 527 border-right: 1px solid #c0c0c0;
527 font-size: 16px; 528 font-size: 16px;
528 } 529 }
529 .aside #choice-text .content .spacing-letter{ 530 .aside #choice-text .content .spacing-letter{
530 531
531 } 532 }
532 .aside #choice-text .content .spacing-letter .text-label{ 533 .aside #choice-text .content .spacing-letter .text-label{
533 font-size: 16px; 534 font-size: 16px;
534 padding: 4px 0; 535 padding: 4px 0;
535 } 536 }
536 .aside #choice-text .content .spacing-letter .box{ 537 .aside #choice-text .content .spacing-letter .box{
537 border: 1px solid #8c8c8c; 538 border: 1px solid #8c8c8c;
538 box-shadow: 0 0 5px #888888; 539 box-shadow: 0 0 5px #888888;
539 background-color: #f0f0f0; 540 background-color: #f0f0f0;
540 } 541 }
541 .aside #choice-text .content .spacing-letter .item{ 542 .aside #choice-text .content .spacing-letter .item{
542 float: left; 543 float: left;
543 } 544 }
544 545
545 .aside #choice-text .content .spacing-letter .item i.fa{ 546 .aside #choice-text .content .spacing-letter .item i.fa{
546 font-size: 22px; 547 font-size: 22px;
547 margin: 0 0; 548 margin: 0 0;
548 color: #000000; 549 color: #000000;
549 } 550 }
550 .aside #choice-text .content .spacing-letter .item-text{ 551 .aside #choice-text .content .spacing-letter .item-text{
551 padding: 6px 20px; 552 padding: 6px 20px;
552 font-size: 12px; 553 font-size: 12px;
553 } 554 }
554 .aside #choice-text .content .spacing-letter .item-plus{ 555 .aside #choice-text .content .spacing-letter .item-plus{
555 border-right: 1px solid #8c8c8c; 556 border-right: 1px solid #8c8c8c;
556 } 557 }
557 .aside #choice-text .content .spacing-letter .item-minus{ 558 .aside #choice-text .content .spacing-letter .item-minus{
558 border-left: 1px solid #8c8c8c; 559 border-left: 1px solid #8c8c8c;
559 } 560 }
560 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { 561 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
561 padding: 5px 6px 1px 6px; 562 padding: 5px 6px 1px 6px;
562 cursor: pointer; 563 cursor: pointer;
563 } 564 }
564 /*Design Choice Illustration*/ 565 /*Design Choice Illustration*/
565 .aside #choice-illustration li .content { 566 .aside #choice-illustration li .content {
566 padding: 10px 10px; 567 padding: 10px 10px;
567 } 568 }
568 569
569 .aside #choice-illustration li .content select{ 570 .aside #choice-illustration li .content select{
570 width: 100%; 571 width: 100%;
571 } 572 }
572 573
573 .aside #choice-illustration li .content .illustration-list { 574 .aside #choice-illustration li .content .illustration-list {
574 width: 100%; 575 width: 100%;
575 border: #bbb solid 1px; 576 border: #bbb solid 1px;
576 background: #FFF; 577 background: #FFF;
577 margin-top: 5px; 578 margin-top: 5px;
578 min-height: 310px; 579 min-height: 310px;
579 padding-bottom: 20px; 580 padding-bottom: 20px;
580 } 581 }
581 582
582 .aside #choice-illustration li .content .illustration-list .illstration-item{ 583 .aside #choice-illustration li .content .illustration-list .illstration-item{
583 height: 60px; 584 height: 60px;
584 overflow: hidden; 585 overflow: hidden;
585 float: left; 586 float: left;
586 margin-left: 6px; 587 margin-left: 6px;
587 margin-top: 5px; 588 margin-top: 5px;
588 margin-bottom: 5px; 589 margin-bottom: 5px;
589 padding: 2px; 590 padding: 2px;
590 background: #e2e2e2; 591 background: #e2e2e2;
591 border: solid 2px #d7d7d7; 592 border: solid 2px #d7d7d7;
592 cursor: pointer; 593 cursor: pointer;
593 } 594 }
594 595
595 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 596 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
596 outline: 2px solid #ed1d24; 597 outline: 2px solid #ed1d24;
597 } 598 }
598 599
599 .aside #choice-illustration li .content .illustration-list .illstration-item img { 600 .aside #choice-illustration li .content .illustration-list .illstration-item img {
600 width: 50px; 601 width: 50px;
601 cursor: pointer; 602 cursor: pointer;
602 } 603 }
603 604
604 .aside #choice-illustration li .content .illustration-list .footer-bar { 605 .aside #choice-illustration li .content .illustration-list .footer-bar {
605 text-align: center; 606 text-align: center;
606 margin-top: 5px; 607 margin-top: 5px;
607 bottom: 10px; 608 bottom: 10px;
608 position: absolute; 609 position: absolute;
609 width: 100%; 610 width: 100%;
610 padding-right: 20px; 611 padding-right: 20px;
611 } 612 }
612 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { 613 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
613 margin-right: 5px; 614 margin-right: 5px;
614 cursor: pointer; 615 cursor: pointer;
615 font-size: 9px; 616 font-size: 9px;
616 color: #FFF; 617 color: #FFF;
617 background: #666666; 618 background: #666666;
618 text-transform: uppercase; 619 text-transform: uppercase;
619 padding: 2px 5px; 620 padding: 2px 5px;
620 } 621 }
621 622
622 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { 623 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
623 background: #999999; 624 background: #999999;
624 } 625 }
625 .tooltip-arrow, 626 .tooltip-arrow,
626 .red-tooltip + .tooltip > .tooltip-inner { 627 .red-tooltip + .tooltip > .tooltip-inner {
627 background-color: #FFF; 628 background-color: #FFF;
628 margin:0; 629 margin:0;
629 padding:0; 630 padding:0;
630 } 631 }
631 632
632 /* Insert image*/ 633 /* Insert image*/
633 #btn-choose-image { 634 #btn-choose-image {
634 background: #ff0f00; 635 background: #ff0f00;
635 cursor: pointer; 636 cursor: pointer;
636 margin: 10px 0px; 637 margin: 10px 0px;
637 padding: 0 10px; 638 padding: 0 10px;
638 color: #FFF; 639 color: #FFF;
639 font-size: 12px; 640 font-size: 12px;
640 } 641 }
641 642
642 #btn-choose-image:hover { 643 #btn-choose-image:hover {
643 background: #f8aeae; 644 background: #f8aeae;
644 } 645 }
645 646
646 .aside #choice-image li .content { 647 .aside #choice-image li .content {
647 margin: 0 10px; 648 margin: 0 10px;
648 padding: 10px 0; 649 padding: 10px 0;
649 } 650 }
650 651
651 .aside #choice-image li .content .small-text { 652 .aside #choice-image li .content .small-text {
652 font-size:10px; 653 font-size:10px;
653 margin-bottom: 10px; 654 margin-bottom: 10px;
654 } 655 }
655 656
656 .aside #choice-image { 657 .aside #choice-image {
657 font-size: 13px; 658 font-size: 13px;
658 } 659 }
659 660
660 .aside #imgLoader{ 661 .aside #imgLoader{
661 display: none; 662 display: none;
662 } 663 }
663 664
664 .aside #choice-image li .content .list-images { 665 .aside #choice-image li .content .list-images {
665 height: 300px; 666 height: 300px;
666 background: #FFF; 667 background: #FFF;
667 border: 1px solid #DDD; 668 border: 1px solid #DDD;
668 } 669 }
669 670
670 /*Design content*/ 671 /*Design content*/
671 .tshirt-design-container{ 672 .tshirt-design-container{
672 position: relative; 673 position: relative;
673 } 674 }
674 .tshirt-design-container .design-content{ 675 .tshirt-design-container .design-content{
675 padding: 10px 30px 10px 15px; 676 padding: 10px 30px 10px 15px;
676 } 677 }
677 .tshirt-design-container .design-content .content{ 678 .tshirt-design-container .design-content .content{
678 width: 100%; 679 width: 100%;
679 min-height: 650px; 680 min-height: 650px;
680 background-color: #f0efea; 681 background-color: #f0efea;
681 padding: 40px 40px; 682 padding: 40px 40px;
682 height: 100%; 683 height: 100%;
683 } 684 }
684 .tshirt-design-container .design-content .content .selection-design{ 685 .tshirt-design-container .design-content .content .selection-design{
685 border: 1px solid #ff0000; 686 border: 1px solid #ff0000;
686 width: 100%; 687 width: 100%;
687 height: 620px; 688 height: 620px;
688 } 689 }
689 .tshirt-design-container .agree-design{ 690 .tshirt-design-container .agree-design{
690 position: absolute; 691 position: absolute;
691 right: -16px; 692 right: -16px;
692 top: 40%; 693 top: 40%;
693 cursor: pointer; 694 cursor: pointer;
694 } 695 }
695 .tshirt-design-container .agree-design:hover{ 696 .tshirt-design-container .agree-design:hover{
696 opacity: 0.8; 697 opacity: 0.8;
697 } 698 }
698 .tshirt-design-container .trash-design{ 699 .tshirt-design-container .trash-design{
699 position: absolute; 700 position: absolute;
700 right: 5px; 701 right: 5px;
701 bottom: 0; 702 bottom: 0;
702 } 703 }
703 .tshirt-design-container .trash-design:hover{ 704 .tshirt-design-container .trash-design:hover{
704 opacity: 0.5; 705 opacity: 0.5;
705 } 706 }
706 707
707 708
708 709
709 /*FOOTER*/ 710 /*FOOTER*/
710 footer{ 711 footer{
711 background-color: #333333; 712 background-color: #333333;
712 } 713 }
713 footer ul.nav-footer{ 714 footer ul.nav-footer{
714 padding-left: 0; 715 padding-left: 0;
715 list-style: none; 716 list-style: none;
716 } 717 }
717 footer ul.nav-footer li{ 718 footer ul.nav-footer li{
718 float: left; 719 float: left;
719 padding: 3px 10px; 720 padding: 3px 10px;
720 border-right: 1px dotted #ffffff; 721 border-right: 1px dotted #ffffff;
721 722
722 } 723 }
723 footer ul.nav-footer li a{ 724 footer ul.nav-footer li a{
724 color: #ffffff; 725 color: #ffffff;
725 font-size: 11px; 726 font-size: 11px;
726 } 727 }
727 /* Customize container */ 728 /* Customize container */
728 @media (min-width: 768px) { 729 @media (min-width: 768px) {
729 .container { 730 .container {
730 /*max-width: 730px;*/ 731 /*max-width: 730px;*/
731 } 732 }
732 } 733 }
733 734
734 /* Responsive: Portrait tablets and up */ 735 /* Responsive: Portrait tablets and up */
735 @media screen and (min-width: 768px) { 736 @media screen and (min-width: 768px) {
736 /* Remove the padding we set earlier */ 737 /* Remove the padding we set earlier */
737 738
738 } 739 }
739 740
740 @media (min-width: 1024px) { 741 @media (min-width: 1024px) {
741 #tshirt-design .modal-dialog{ 742 #tshirt-design .modal-dialog{
742 min-width: 1000px; 743 min-width: 1000px;
744 }
745 }
746
747 @media (max-width: 1200px) {
748 #preview-design {
749 left: 160px;
743 } 750 }
744 } 751 }