Commit c674a36080280e4de326cdc1ed548b83ce7434fa

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

fix delete effect

Showing 3 changed files with 8 additions and 5 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 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script> 44 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script>
45 <!--[if lt IE 9]> 45 <!--[if lt IE 9]>
46 <script src="bower_components/es5-shim/es5-shim.js"></script> 46 <script src="bower_components/es5-shim/es5-shim.js"></script>
47 <script src="bower_components/json3/lib/json3.min.js"></script> 47 <script src="bower_components/json3/lib/json3.min.js"></script>
48 <![endif]--> 48 <![endif]-->
49 <script type="text/javascript"> 49 <script type="text/javascript">
50 var VERSION = '24-11_07'; 50 var VERSION = '24-11_08';
51 var require = { 51 var require = {
52 urlArgs: "ver="+VERSION, 52 urlArgs: "ver="+VERSION,
53 }; 53 };
54 </script> 54 </script>
55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
56 </body> 56 </body>
57 </html> 57 </html>
58 58
app/scripts/controllers/tshirtdesign.js
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { 3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
4 4
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 //Set width and height canvas 6 //Set width and height canvas
7 function setSizeCanvas() { 7 function setSizeCanvas() {
8 var _modalWidth = $('.modal-dialog').width(); 8 var _modalWidth = $('.modal-dialog').width();
9 var _windowWidth = window.innerWidth; 9 var _windowWidth = window.innerWidth;
10 if(_windowWidth > 762) { 10 if(_windowWidth > 762) {
11 var _contentCanvasWidth = _modalWidth*8/12 - 100; 11 var _contentCanvasWidth = _modalWidth*8/12 - 100;
12 } else { 12 } else {
13 var _contentCanvasWidth = _windowWidth-70; 13 var _contentCanvasWidth = _windowWidth-70;
14 } 14 }
15 15
16 canvas.setWidth(_contentCanvasWidth); 16 canvas.setWidth(_contentCanvasWidth);
17 canvas.setHeight(650); 17 canvas.setHeight(650);
18 } 18 }
19 setSizeCanvas(); 19 setSizeCanvas();
20 //Window resize event 20 //Window resize event
21 $(window).resize(function () { 21 $(window).resize(function () {
22 setSizeCanvas(); 22 setSizeCanvas();
23 }); 23 });
24 24
25 25
26 //Custom control 26 //Custom control
27 fabric.Object.prototype.transparentCorners = true; 27 fabric.Object.prototype.transparentCorners = true;
28 fabric.Object.prototype.hasRotatingPoint = false; 28 fabric.Object.prototype.hasRotatingPoint = false;
29 // fabric.Object.prototype.selectable = false; 29 // fabric.Object.prototype.selectable = false;
30 30
31 // fabric.Canvas.prototype.__onMouseDown = function (e) { 31 // fabric.Canvas.prototype.__onMouseDown = function (e) {
32 // // return false; 32 // // return false;
33 // }; 33 // };
34 34
35 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 35 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
36 for(key in ctrVisible) { 36 for(key in ctrVisible) {
37 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 37 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
38 } 38 }
39 39
40 fabric.Object.prototype.customiseCornerIcons({ 40 fabric.Object.prototype.customiseCornerIcons({
41 settings: { 41 settings: {
42 borderColor: '#0000ff', 42 borderColor: '#0000ff',
43 cornerSize: 25, 43 cornerSize: 25,
44 cornerShape: 'circle', 44 cornerShape: 'circle',
45 cornerBackgroundColor: '#0171b4', 45 cornerBackgroundColor: '#0171b4',
46 cornerPadding: 6 46 cornerPadding: 6
47 }, 47 },
48 mt: { 48 mt: {
49 icon: 'images/control-icon/ok.png' 49 icon: 'images/control-icon/ok.png'
50 }, 50 },
51 br: { 51 br: {
52 icon: 'images/control-icon/resize.png' 52 icon: 'images/control-icon/resize.png'
53 }, 53 },
54 tr: { 54 tr: {
55 icon: 'images/control-icon/rotate.png' 55 icon: 'images/control-icon/rotate.png'
56 } 56 }
57 }); 57 });
58 58
59 fabric.Canvas.prototype.customiseControls({ 59 fabric.Canvas.prototype.customiseControls({
60 mt: { 60 mt: {
61 cursor: 'pointer', 61 cursor: 'pointer',
62 action: function(e, target) { 62 action: function(e, target) {
63 fabric.Object.prototype.selectable = false; 63 fabric.Object.prototype.selectable = false;
64 canvas.deactivateAll(); 64 canvas.deactivateAll();
65 delete currentObj; 65 delete currentObj;
66 $scope.designTextValue = ''; 66 $scope.designTextValue = '';
67 $timeout(function(){ 67 $timeout(function(){
68 fabric.Object.prototype.selectable = true; 68 fabric.Object.prototype.selectable = true;
69 },20); 69 },20);
70 } 70 }
71 }, 71 },
72 br: { 72 br: {
73 73
74 }, 74 },
75 tr: { 75 tr: {
76 action: 'rotate', 76 action: 'rotate',
77 cursor: 'crosshair' 77 cursor: 'crosshair'
78 } 78 }
79 }); 79 });
80 80
81 canvas.on('after:render', function() { 81 canvas.on('after:render', function() {
82 // console.log('after render'); 82 // console.log('after render');
83 }); 83 });
84 canvas.on({ 84 canvas.on({
85 'object:added' : onIllustrationAdded, 85 'object:added' : onIllustrationAdded,
86 'object:moving' : onIllustrationMoving, 86 'object:moving' : onIllustrationMoving,
87 'object:scaling' : onIllustrationChange, 87 'object:scaling' : onIllustrationChange,
88 'object:rotating' : onIllustrationChange, 88 'object:rotating' : onIllustrationChange,
89 'object:selected' : onObjectSelected, 89 'object:selected' : onObjectSelected,
90 'object:modified' : onIllustrationModifield, 90 'object:modified' : onIllustrationModifield,
91 'selection:cleared' : onObjectOut, 91 'selection:cleared' : onObjectOut,
92 }); 92 });
93 93
94 var currentObj; 94 var currentObj;
95 var listObj = []; 95 var listObj = [];
96 var stateObj = []; 96 var stateObj = [];
97 var indexCurr = 0; 97 var indexCurr = 0;
98 var indexCurr2 = 0; 98 var indexCurr2 = 0;
99 var actionObj = false; 99 var actionObj = false;
100 var refreshObj = true; 100 var refreshObj = true;
101 var spacingNum = 0; 101 var spacingNum = 0;
102 $scope.itemFont = 0; 102 $scope.itemFont = 0;
103 103
104 104
105 $scope.showDesignTab = function(tab){ 105 $scope.showDesignTab = function(tab){
106 canvas.deactivateAll().renderAll(); 106 canvas.deactivateAll().renderAll();
107 $rootScope.isShowLeftPanel = tab; 107 $rootScope.isShowLeftPanel = tab;
108 switch (tab) { 108 switch (tab) {
109 case 'illustration': { 109 case 'illustration': {
110 $scope.IllustrationList = $illustration.getAll(); 110 $scope.IllustrationList = $illustration.getAll();
111 $rootScope.outputImage = false; 111 $rootScope.outputImage = false;
112 $scope.illustrationSelectConfig = { 112 $scope.illustrationSelectConfig = {
113 allowClear:true 113 allowClear:true
114 }; 114 };
115 $timeout(function(){ 115 $timeout(function(){
116 $('.illstration-item').tooltip({ 116 $('.illstration-item').tooltip({
117 animated: 'fade', 117 animated: 'fade',
118 placement: 'bottom', 118 placement: 'bottom',
119 html: true 119 html: true
120 }); 120 });
121 // console.log('here'); 121 // console.log('here');
122 },1000); 122 },1000);
123 break; 123 break;
124 } 124 }
125 case 'text': { 125 case 'text': {
126 break; 126 break;
127 } 127 }
128 } 128 }
129 }; 129 };
130 $scope.showDesignTab('default'); 130 $scope.showDesignTab('default');
131 131
132 132
133 function onIllustrationAdded(options){ 133 function onIllustrationAdded(options){
134 var object = options.target; 134 var object = options.target;
135 // console.log('object:added'); 135 // console.log('object:added');
136 136
137 if (actionObj === true) { 137 if (actionObj === true) {
138 stateObj = [stateObj[indexCurr2]]; 138 stateObj = [stateObj[indexCurr2]];
139 listObj = [listObj[indexCurr2]]; 139 listObj = [listObj[indexCurr2]];
140 140
141 actionObj = false; 141 actionObj = false;
142 console.log(stateObj); 142 console.log(stateObj);
143 indexCurr = 1; 143 indexCurr = 1;
144 } 144 }
145 object.saveState(); 145 object.saveState();
146 146
147 console.log(object.originalState); 147 console.log(object.originalState);
148 stateObj[indexCurr] = JSON.stringify(object.originalState); 148 stateObj[indexCurr] = JSON.stringify(object.originalState);
149 listObj[indexCurr] = object; 149 listObj[indexCurr] = object;
150 indexCurr++; 150 indexCurr++;
151 indexCurr2 = indexCurr - 1; 151 indexCurr2 = indexCurr - 1;
152 refreshObj = true; 152 refreshObj = true;
153 } 153 }
154 154
155 function onIllustrationModifield(options){ 155 function onIllustrationModifield(options){
156 $('.object-border').hide(); 156 $('.object-border').hide();
157 // 157 //
158 var pointer = canvas.getPointer(options.e); 158 var pointer = canvas.getPointer(options.e);
159 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 159 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
160 canvas.getActiveObject().remove(); 160 canvas.getActiveObject().remove();
161 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 161 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
162 return; 162 return;
163 } 163 }
164 164
165 // 165 //
166 var objOffset = canvas.getActiveObject().getBoundingRect(); 166 var objOffset = canvas.getActiveObject().getBoundingRect();
167 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 167 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
168 //console.log(objOffset,canvas.height,canvas.width); 168 //console.log(objOffset,canvas.height,canvas.width);
169 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 169 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
170 if (confirm('削除してもよろしいですか')){ 170 if (confirm('削除してもよろしいですか')){
171 canvas.getActiveObject().remove(); 171 canvas.getActiveObject().remove();
172 }else{ 172 }else{
173 undoCanvas(); 173 undoCanvas();
174 return; 174 return;
175 } 175 }
176 } 176 }
177 177
178 var object = options.target; 178 var object = options.target;
179 // console.log('object:modified'); 179 // console.log('object:modified');
180 if (actionObj === true) { 180 if (actionObj === true) {
181 stateObj = [stateObj[indexCurr2]]; 181 stateObj = [stateObj[indexCurr2]];
182 listObj = [listObj[indexCurr2]]; 182 listObj = [listObj[indexCurr2]];
183 183
184 actionObj = false; 184 actionObj = false;
185 console.log(stateObj); 185 console.log(stateObj);
186 indexCurr = 1; 186 indexCurr = 1;
187 } 187 }
188 188
189 object.saveState(); 189 object.saveState();
190 190
191 stateObj[indexCurr] = JSON.stringify(object.originalState); 191 stateObj[indexCurr] = JSON.stringify(object.originalState);
192 listObj[indexCurr] = object; 192 listObj[indexCurr] = object;
193 indexCurr++; 193 indexCurr++;
194 indexCurr2 = indexCurr - 1; 194 indexCurr2 = indexCurr - 1;
195 refreshObj = true; 195 refreshObj = true;
196 } 196 }
197 197
198 function onIllustrationChange(options) { 198 function onIllustrationChange(options) {
199 // options.target.setCoords(); 199 // options.target.setCoords();
200 // canvas.forEachObject(function(obj) { 200 // canvas.forEachObject(function(obj) {
201 // if (obj === options.target) return; 201 // if (obj === options.target) return;
202 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 202 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
203 // }); 203 // });
204 } 204 }
205 205
206 function onIllustrationMoving(options) { 206 function onIllustrationMoving(options) {
207 var object = options.target; 207 var object = options.target;
208 var pointer = canvas.getPointer(options.e); 208 var pointer = canvas.getPointer(options.e);
209 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 209 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
210 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 210 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
211 }else{ 211 }else{
212 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 212 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
213 } 213 }
214 214
215 console.log(object.oCoords,object.originalState); 215 console.log(object.oCoords,object.originalState);
216 object.setCoords(); 216 object.setCoords();
217 var Coords = object.oCoords; 217 var Coords = object.oCoords;
218 var diffX = 55, diffY=50; 218 var diffX = 55, diffY=50;
219 $('#object-border-left').css({'height':object.originalState.height*object.scaleY, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 219 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
220 $('#object-border-right').css({'height':object.originalState.height*object.scaleY, top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 220 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
221 $('#object-border-top').css({'width':object.originalState.width*object.scaleX, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 221 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
222 $('#object-border-bottom').css({'width':object.originalState.width*object.scaleX, top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 222 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
223 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
224 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
223 $('.object-border').css({ 225 $('.object-border').css({
224 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 226 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
225 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 227 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
226 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 228 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
227 }); 229 });
228 $('.object-border').show(); 230 $('.object-border').show();
229 } 231 }
230 232
231 function onObjectOut() { 233 function onObjectOut() {
232 delete currentObj; 234 delete currentObj;
233 $scope.designTextValue = ''; 235 $scope.designTextValue = '';
234 } 236 }
235 237
236 function undoCanvas() { 238 function undoCanvas() {
237 if (indexCurr <= 0) { 239 if (indexCurr <= 0) {
238 indexCurr = 0; 240 indexCurr = 0;
239 return; 241 return;
240 } 242 }
241 243
242 if (refreshObj === true) { 244 if (refreshObj === true) {
243 indexCurr--; 245 indexCurr--;
244 refreshObj = false; 246 refreshObj = false;
245 } 247 }
246 248
247 console.log('undo'); 249 console.log('undo');
248 250
249 indexCurr2 = indexCurr - 1; 251 indexCurr2 = indexCurr - 1;
250 currentObj = listObj[indexCurr2]; 252 currentObj = listObj[indexCurr2];
251 if (currentObj){ 253 if (currentObj){
252 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 254 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
253 } 255 }
254 256
255 indexCurr--; 257 indexCurr--;
256 currentObj.setCoords(); 258 currentObj.setCoords();
257 canvas.renderAll(); 259 canvas.renderAll();
258 actionObj = true; 260 actionObj = true;
259 } 261 }
260 262
261 function redoCanvas() { 263 function redoCanvas() {
262 actionObj = true; 264 actionObj = true;
263 if (indexCurr >= stateObj.length - 1) { 265 if (indexCurr >= stateObj.length - 1) {
264 return; 266 return;
265 } 267 }
266 268
267 console.log('redo'); 269 console.log('redo');
268 270
269 indexCurr2 = indexCurr + 1; 271 indexCurr2 = indexCurr + 1;
270 currentObj = listObj[indexCurr2]; 272 currentObj = listObj[indexCurr2];
271 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 273 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
272 274
273 indexCurr++; 275 indexCurr++;
274 currentObj.setCoords(); 276 currentObj.setCoords();
275 canvas.renderAll(); 277 canvas.renderAll();
276 } 278 }
277 279
278 $scope.canvasClearAll = function(){ 280 $scope.canvasClearAll = function(){
279 if (confirm('配置されたすべての文字や画像を消去します')){ 281 if (confirm('配置されたすべての文字や画像を消去します')){
280 canvas.clear(); 282 canvas.clear();
281 } 283 }
282 } 284 }
283 285
284 function onObjectSelected(options) { 286 function onObjectSelected(options) {
285 var currentObj = options.target; 287 var currentObj = options.target;
286 288
287 289
288 $scope.typeObject = currentObj.type; 290 $scope.typeObject = currentObj.type;
289 switch ($scope.typeObject) { 291 switch ($scope.typeObject) {
290 case 'i-text' : 292 case 'i-text' :
291 $rootScope.isShowLeftPanel = 'text'; 293 $rootScope.isShowLeftPanel = 'text';
292 var text = currentObj.text; 294 var text = currentObj.text;
293 if(text != '') { 295 if(text != '') {
294 $scope.designText = text; 296 $scope.designText = text;
295 $scope.designTextValue = text; 297 $scope.designTextValue = text;
296 } 298 }
297 break; 299 break;
298 300
299 case 'path-group' : 301 case 'path-group' :
300 $rootScope.isShowLeftPanel = 'illustration'; 302 $rootScope.isShowLeftPanel = 'illustration';
301 break; 303 break;
302 304
303 case 'image': 305 case 'image':
304 $rootScope.isShowLeftPanel = 'image'; 306 $rootScope.isShowLeftPanel = 'image';
305 break; 307 break;
306 308
307 default : 309 default :
308 $rootScope.isShowLeftPanel = 'default'; 310 $rootScope.isShowLeftPanel = 'default';
309 break; 311 break;
310 } 312 }
311 $rootScope.safeApply(); 313 $rootScope.safeApply();
312 } 314 }
313 315
314 // Illustration process 316 // Illustration process
315 $scope.changeIllustrationCategory = function(currentIllustration){ 317 $scope.changeIllustrationCategory = function(currentIllustration){
316 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 318 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
317 //console.log($scope.currentIllustrationCate); 319 //console.log($scope.currentIllustrationCate);
318 }; 320 };
319 321
320 $scope.insertSvg = function(item){ 322 $scope.insertSvg = function(item){
321 fabric.loadSVGFromURL(item.path, function(objects, options) { 323 fabric.loadSVGFromURL(item.path, function(objects, options) {
322 var shape = fabric.util.groupSVGElements(objects, options); 324 var shape = fabric.util.groupSVGElements(objects, options);
323 //shape.setFill('green'); 325 //shape.setFill('green');
324 canvas.add(shape.scale(0.6)); 326 canvas.add(shape.scale(0.6));
325 shape.set({ left: 150, top: 200 }).setCoords(); 327 shape.set({ left: 150, top: 200 }).setCoords();
326 canvas.renderAll(); 328 canvas.renderAll();
327 canvas.setActiveObject(shape); 329 canvas.setActiveObject(shape);
328 }); 330 });
329 }; 331 };
330 332
331 // color pattern 333 // color pattern
332 $scope.listColorPatterns = [ 334 $scope.listColorPatterns = [
333 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 335 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
334 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 336 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
335 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 337 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
336 '#333333' 338 '#333333'
337 ]; 339 ];
338 340
339 $scope.changeColorPattern = function(color){ 341 $scope.changeColorPattern = function(color){
340 var obj = canvas.getActiveObject(); 342 var obj = canvas.getActiveObject();
341 if (!color){ 343 if (!color){
342 color = 'none'; 344 color = 'none';
343 } 345 }
344 if (obj instanceof fabric.PathGroup) { 346 if (obj instanceof fabric.PathGroup) {
345 obj.getObjects().forEach(function(o) { 347 obj.getObjects().forEach(function(o) {
346 o.fill = color; 348 o.fill = color;
347 }); 349 });
348 } 350 }
349 else { 351 else {
350 obj.fill = color; 352 obj.fill = color;
351 } 353 }
352 canvas.renderAll(); 354 canvas.renderAll();
353 // if (canvas.getActiveObject()){ 355 // if (canvas.getActiveObject()){
354 // canvas.getActiveObject().set("fill", color); 356 // canvas.getActiveObject().set("fill", color);
355 // canvas.renderAll(); 357 // canvas.renderAll();
356 // } 358 // }
357 }; 359 };
358 360
359 //Font 361 //Font
360 $scope.listFontFamily = [ 362 $scope.listFontFamily = [
361 { 363 {
362 name : 'GN Aki iro Sesami Cookies', 364 name : 'GN Aki iro Sesami Cookies',
363 slug : 'gn_aki_iro_sesami_cookies', 365 slug : 'gn_aki_iro_sesami_cookies',
364 }, 366 },
365 { 367 {
366 name : 'GN-Fuyu-iro_Script_Bold', 368 name : 'GN-Fuyu-iro_Script_Bold',
367 slug : 'gn_fuyu_iro_script_bold' 369 slug : 'gn_fuyu_iro_script_bold'
368 }, 370 },
369 { 371 {
370 name : 'GN Killgothic U Kanana', 372 name : 'GN Killgothic U Kanana',
371 slug : 'gn_killgothic_u_kanana' 373 slug : 'gn_killgothic_u_kanana'
372 }, 374 },
373 { 375 {
374 name : 'GN-Kin-iro_Alphabet_Cookies', 376 name : 'GN-Kin-iro_Alphabet_Cookies',
375 slug : 'gn_kin_iro_alphabet_cookies' 377 slug : 'gn_kin_iro_alphabet_cookies'
376 378
377 }, 379 },
378 { 380 {
379 name : 'GN-Kin-iro_SansSerif', 381 name : 'GN-Kin-iro_SansSerif',
380 slug : 'gn_kin_iro_sansserif' 382 slug : 'gn_kin_iro_sansserif'
381 383
382 }, 384 },
383 { 385 {
384 name : 'GN-Koharuiro_Sunray', 386 name : 'GN-Koharuiro_Sunray',
385 slug : 'gn_koharuiro_sunray' 387 slug : 'gn_koharuiro_sunray'
386 388
387 }, 389 },
388 { 390 {
389 name : 'GN-Kyu-pin', 391 name : 'GN-Kyu-pin',
390 slug : 'gn_kyu_pin' 392 slug : 'gn_kyu_pin'
391 }, 393 },
392 { 394 {
393 name : 'gn_natsu_iro_schedule', 395 name : 'gn_natsu_iro_schedule',
394 slug : 'gn_natsu_iro_schedule' 396 slug : 'gn_natsu_iro_schedule'
395 397
396 }, 398 },
397 { 399 {
398 name : 'gnkana_kiniro_sansserif_l', 400 name : 'gnkana_kiniro_sansserif_l',
399 slug : 'gnkana_kiniro_sansserif_l' 401 slug : 'gnkana_kiniro_sansserif_l'
400 402
401 }, 403 },
402 { 404 {
403 name : 'gnkana_kiniro_sansserif_st', 405 name : 'gnkana_kiniro_sansserif_st',
404 slug : 'gnkana_kiniro_sansserif_st' 406 slug : 'gnkana_kiniro_sansserif_st'
405 }, 407 },
406 { 408 {
407 name : 'gnkana_kon_iro_nightfall', 409 name : 'gnkana_kon_iro_nightfall',
408 slug : 'gnkana_kon_iro_nightfall' 410 slug : 'gnkana_kon_iro_nightfall'
409 411
410 }, 412 },
411 { 413 {
412 name : 'ms_gothic', 414 name : 'ms_gothic',
413 slug : 'ms_gothic' 415 slug : 'ms_gothic'
414 416
415 }, 417 },
416 { 418 {
417 name : 'msmincho', 419 name : 'msmincho',
418 slug : 'msmincho' 420 slug : 'msmincho'
419 }, 421 },
420 { 422 {
421 name : 'ufonts_com_ms_pgothic', 423 name : 'ufonts_com_ms_pgothic',
422 slug : 'ufonts_com_ms_pgothic' 424 slug : 'ufonts_com_ms_pgothic'
423 } 425 }
424 ]; 426 ];
425 427
426 // layer process 428 // layer process
427 $scope.layerProcess = function(mode) { 429 $scope.layerProcess = function(mode) {
428 // console.log('layerProcess'); 430 // console.log('layerProcess');
429 var activeObject = canvas.getActiveObject(); 431 var activeObject = canvas.getActiveObject();
430 432
431 console.log(activeObject); 433 console.log(activeObject);
432 434
433 if (activeObject){ 435 if (activeObject){
434 switch (mode) { 436 switch (mode) {
435 case 1: 437 case 1:
436 // canvas.bringForward(activeObject); 438 // canvas.bringForward(activeObject);
437 activeObject.bringForward(); 439 activeObject.bringForward();
438 break; 440 break;
439 case 2: 441 case 2:
440 // canvas.sendBackwards(activeObject); 442 // canvas.sendBackwards(activeObject);
441 activeObject.sendBackwards(); 443 activeObject.sendBackwards();
442 break; 444 break;
443 case 3: 445 case 3:
444 // canvas.bringToFront(activeObject); 446 // canvas.bringToFront(activeObject);
445 activeObject.bringToFront(); 447 activeObject.bringToFront();
446 break; 448 break;
447 case 4: 449 case 4:
448 // canvas.sendToBack(activeObject); 450 // canvas.sendToBack(activeObject);
449 activeObject.sendToBack(); 451 activeObject.sendToBack();
450 break; 452 break;
451 } 453 }
452 canvas.deactivateAll().renderAll(); 454 canvas.deactivateAll().renderAll();
453 } 455 }
454 }; 456 };
455 457
456 $scope.focusInputText = function(text) { 458 $scope.focusInputText = function(text) {
457 currentObj = canvas.getActiveObject(); 459 currentObj = canvas.getActiveObject();
458 if(typeof currentObj == 'undefined' || currentObj == null) { 460 if(typeof currentObj == 'undefined' || currentObj == null) {
459 $scope.iText = new fabric.IText('', { 461 $scope.iText = new fabric.IText('', {
460 left: 150, 462 left: 150,
461 top: 200, 463 top: 200,
462 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 464 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
463 fontWeight: 'normal', 465 fontWeight: 'normal',
464 textAlign: 'center', 466 textAlign: 'center',
465 fontSize: 28, 467 fontSize: 28,
466 fill: 'black' 468 fill: 'black'
467 }); 469 });
468 } else { 470 } else {
469 if(currentObj.type != 'i-text') { 471 if(currentObj.type != 'i-text') {
470 $scope.iText = new fabric.IText('', { 472 $scope.iText = new fabric.IText('', {
471 left: 150, 473 left: 150,
472 top: 200, 474 top: 200,
473 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 475 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
474 fontWeight: 'normal', 476 fontWeight: 'normal',
475 textAlign: 'center', 477 textAlign: 'center',
476 fontSize: 28, 478 fontSize: 28,
477 fill: 'black' 479 fill: 'black'
478 }); 480 });
479 } else{ 481 } else{
480 $scope.iText = currentObj; 482 $scope.iText = currentObj;
481 } 483 }
482 } 484 }
483 }; 485 };
484 486
485 //Design text 487 //Design text
486 $scope.inputText = function(e) { 488 $scope.inputText = function(e) {
487 if(typeof $scope.iText != "undefined") { 489 if(typeof $scope.iText != "undefined") {
488 var iText = $scope.iText; 490 var iText = $scope.iText;
489 iText.text = e; 491 iText.text = e;
490 canvas.add(iText); 492 canvas.add(iText);
491 canvas.renderAll(); 493 canvas.renderAll();
492 canvas.setActiveObject(iText); 494 canvas.setActiveObject(iText);
493 } 495 }
494 }; 496 };
495 $scope.setFontFamily = function(font,index) { 497 $scope.setFontFamily = function(font,index) {
496 $scope.itemFont = index; 498 $scope.itemFont = index;
497 if(canvas.getActiveObject()) { 499 if(canvas.getActiveObject()) {
498 var currentObj = canvas.getActiveObject(); 500 var currentObj = canvas.getActiveObject();
499 if(currentObj.type == 'i-text') { 501 if(currentObj.type == 'i-text') {
500 currentObj.set('fontFamily', font); 502 currentObj.set('fontFamily', font);
501 canvas.renderAll(); 503 canvas.renderAll();
502 canvas.setActiveObject(currentObj); 504 canvas.setActiveObject(currentObj);
503 } 505 }
504 506
505 } 507 }
506 }; 508 };
507 //Set letter spacing text 509 //Set letter spacing text
508 $scope.setLetterSpacingText = function(e) { 510 $scope.setLetterSpacingText = function(e) {
509 if(canvas.getActiveObject()) { 511 if(canvas.getActiveObject()) {
510 var currentObj = canvas.getActiveObject(); 512 var currentObj = canvas.getActiveObject();
511 if(currentObj.type == 'i-text') { 513 if(currentObj.type == 'i-text') {
512 if(e == 'plus') 514 if(e == 'plus')
513 spacingNum = spacingNum + 30; 515 spacingNum = spacingNum + 30;
514 else if (spacingNum >= -30){ 516 else if (spacingNum >= -30){
515 spacingNum = spacingNum - 30; 517 spacingNum = spacingNum - 30;
516 } 518 }
517 currentObj.set('charSpacing', spacingNum); 519 currentObj.set('charSpacing', spacingNum);
518 canvas.renderAll(); 520 canvas.renderAll();
519 canvas.setActiveObject(currentObj); 521 canvas.setActiveObject(currentObj);
520 } 522 }
521 } 523 }
522 }; 524 };
523 525
524 $scope.setLetterSpacingTextDefault = function() { 526 $scope.setLetterSpacingTextDefault = function() {
525 if(canvas.getActiveObject()) { 527 if(canvas.getActiveObject()) {
526 var currentObj = canvas.getActiveObject(); 528 var currentObj = canvas.getActiveObject();
527 if(currentObj.type == 'i-text') { 529 if(currentObj.type == 'i-text') {
528 spacingNum = 0; 530 spacingNum = 0;
529 currentObj.set('charSpacing', spacingNum); 531 currentObj.set('charSpacing', spacingNum);
530 canvas.renderAll(); 532 canvas.renderAll();
531 canvas.setActiveObject(currentObj); 533 canvas.setActiveObject(currentObj);
532 } 534 }
533 } 535 }
534 }; 536 };
535 537
536 538
537 /**** process insert image */ 539 /**** process insert image */
538 if (typeof($window.localStorage.recentImages) != 'undefined'){ 540 if (typeof($window.localStorage.recentImages) != 'undefined'){
539 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 541 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
540 }else{ 542 }else{
541 $scope.recentImages = {}; 543 $scope.recentImages = {};
542 } 544 }
543 545
544 var addToRecentImage = function(name, data){ 546 var addToRecentImage = function(name, data){
545 if (typeof($window.localStorage.recentImages) != 'undefined'){ 547 if (typeof($window.localStorage.recentImages) != 'undefined'){
546 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 548 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
547 }else{ 549 }else{
548 $scope.recentImages = {}; 550 $scope.recentImages = {};
549 } 551 }
550 552
551 if (typeof($scope.recentImages[name]) == 'undefined'){ 553 if (typeof($scope.recentImages[name]) == 'undefined'){
552 var ii=0; 554 var ii=0;
553 var II = 0; 555 var II = 0;
554 for(var item in $scope.recentImages){ 556 for(var item in $scope.recentImages){
555 if (II==0){ 557 if (II==0){
556 II = item; 558 II = item;
557 } 559 }
558 ii++; 560 ii++;
559 } 561 }
560 if (ii>16 && II!=0){ 562 if (ii>16 && II!=0){
561 delete $scope.recentImages[II]; 563 delete $scope.recentImages[II];
562 } 564 }
563 $scope.recentImages[name] = data; 565 $scope.recentImages[name] = data;
564 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 566 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
565 } 567 }
566 } 568 }
567 $scope.chooseImage = function(e){//console.log(e); 569 $scope.chooseImage = function(e){//console.log(e);
568 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 570 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
569 alert('アップロードできませんでした'); 571 alert('アップロードできませんでした');
570 return; 572 return;
571 } 573 }
572 var reader = new FileReader(); 574 var reader = new FileReader();
573 reader.onload = function (event) { 575 reader.onload = function (event) {
574 addToRecentImage ($('#imgLoader').val(), event.target.result); 576 addToRecentImage ($('#imgLoader').val(), event.target.result);
575 var imgObj = new Image();//console.log($('#imgLoader').val()); 577 var imgObj = new Image();//console.log($('#imgLoader').val());
576 imgObj.src = event.target.result; 578 imgObj.src = event.target.result;
577 imgObj.onload = function () { 579 imgObj.onload = function () {
578 // start fabricJS stuff 580 // start fabricJS stuff
579 581
580 var image = new fabric.Image(imgObj); 582 var image = new fabric.Image(imgObj);
581 image.set({ 583 image.set({
582 left: 50, 584 left: 50,
583 top: 50 585 top: 50
584 }); 586 });
585 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 587 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
586 image.scaleToWidth(200); 588 image.scaleToWidth(200);
587 canvas.add(image); 589 canvas.add(image);
588 } 590 }
589 } 591 }
590 reader.readAsDataURL(e.target.files[0]); 592 reader.readAsDataURL(e.target.files[0]);
591 } 593 }
592 594
593 $scope.insertRecentImage = function(data){ 595 $scope.insertRecentImage = function(data){
594 var imgObj = new Image(); 596 var imgObj = new Image();
595 imgObj.src = data; 597 imgObj.src = data;
596 imgObj.onload = function () { 598 imgObj.onload = function () {
597 // start fabricJS stuff 599 // start fabricJS stuff
598 600
599 var image = new fabric.Image(imgObj); 601 var image = new fabric.Image(imgObj);
600 image.set({ 602 image.set({
601 left: 50, 603 left: 50,
602 top: 50 604 top: 50
603 }); 605 });
604 image.scaleToWidth(200); 606 image.scaleToWidth(200);
605 canvas.add(image); 607 canvas.add(image);
606 } 608 }
607 } 609 }
608 610
609 //Traslation text 611 //Traslation text
610 $scope.rotateText = function(style) { 612 $scope.rotateText = function(style) {
611 if(canvas.getActiveObject()) { 613 if(canvas.getActiveObject()) {
612 var currentObj = canvas.getActiveObject(); 614 var currentObj = canvas.getActiveObject();
613 if(currentObj.type == 'i-text') { 615 if(currentObj.type == 'i-text') {
614 currentObj.set('rotate', Math.PI / 4); 616 currentObj.set('rotate', Math.PI / 4);
615 canvas.renderAll(); 617 canvas.renderAll();
616 canvas.setActiveObject(currentObj); 618 canvas.setActiveObject(currentObj);
617 } 619 }
618 } 620 }
619 }; 621 };
620 622
621 623
622 /* Process output */ 624 /* Process output */
623 $scope.outputDesign = function(){ 625 $scope.outputDesign = function(){
624 $rootScope.outputImage = canvas.toDataURL('png'); 626 $rootScope.outputImage = canvas.toDataURL('png');
625 // console.log(); 627 // console.log();
626 $('#tshirt-design').modal('hide'); 628 $('#tshirt-design').modal('hide');
627 } 629 }
628 }); 630 });
629 }); 631 });
630 632
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 html{ 4 html{
5 height:100%; 5 height:100%;
6 width:100%; 6 width:100%;
7 } 7 }
8 body { 8 body {
9 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 9 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
10 height:100%; 10 height:100%;
11 width:100%; 11 width:100%;
12 } 12 }
13 /*Scroll bar style*/ 13 /*Scroll bar style*/
14 ::-webkit-scrollbar { 14 ::-webkit-scrollbar {
15 -webkit-appearance: none; 15 -webkit-appearance: none;
16 width: 7px; 16 width: 7px;
17 } 17 }
18 ::-webkit-scrollbar-track { 18 ::-webkit-scrollbar-track {
19 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 19 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
20 } 20 }
21 21
22 ::-webkit-scrollbar-thumb { 22 ::-webkit-scrollbar-thumb {
23 border-radius: 4px; 23 border-radius: 4px;
24 background-color: rgba(0,0,0,.5); 24 background-color: rgba(0,0,0,.5);
25 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 25 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
26 } 26 }
27 /*End scroll bar style*/ 27 /*End scroll bar style*/
28 .padding-right-0{ 28 .padding-right-0{
29 padding-right: 0!important; 29 padding-right: 0!important;
30 } 30 }
31 .padding-left-0{ 31 .padding-left-0{
32 padding-left: 0!important; 32 padding-left: 0!important;
33 } 33 }
34 button.red{ 34 button.red{
35 color: #ffffff; 35 color: #ffffff;
36 background-color: #ff0000; 36 background-color: #ff0000;
37 border: 1px solid #ff0000; 37 border: 1px solid #ff0000;
38 38
39 } 39 }
40 button.white{ 40 button.white{
41 border: 1px solid #ff8080; 41 border: 1px solid #ff8080;
42 color: #ff8080; 42 color: #ff8080;
43 background-color: #ffffff; 43 background-color: #ffffff;
44 } 44 }
45 button.brown{ 45 button.brown{
46 background-color: #666666; 46 background-color: #666666;
47 border: 1px solid #666666; 47 border: 1px solid #666666;
48 color: #ffffff; 48 color: #ffffff;
49 border-radius: 5px; 49 border-radius: 5px;
50 } 50 }
51 button.black{ 51 button.black{
52 border: 1px solid #c9c9c9; 52 border: 1px solid #c9c9c9;
53 background-color: #343434; 53 background-color: #343434;
54 color: #ffffff; 54 color: #ffffff;
55 padding: 1px 6px; 55 padding: 1px 6px;
56 } 56 }
57 #tshirt-container{ 57 #tshirt-container{
58 border-left: 1px solid #dcdcdc; 58 border-left: 1px solid #dcdcdc;
59 border-right: 1px solid #dcdcdc; 59 border-right: 1px solid #dcdcdc;
60 } 60 }
61 /*HEADER*/ 61 /*HEADER*/
62 header{ 62 header{
63 border-bottom: 1px solid #dcdcdc; 63 border-bottom: 1px solid #dcdcdc;
64 } 64 }
65 header .logo{ 65 header .logo{
66 color: #ed1d24; 66 color: #ed1d24;
67 font-size: 30px; 67 font-size: 30px;
68 text-transform: uppercase; 68 text-transform: uppercase;
69 font-weight: bold; 69 font-weight: bold;
70 } 70 }
71 header .logo img{ 71 header .logo img{
72 width: 60px; 72 width: 60px;
73 } 73 }
74 /*NAVIGATION*/ 74 /*NAVIGATION*/
75 nav{ 75 nav{
76 border-bottom: 1px solid #dcdcdc; 76 border-bottom: 1px solid #dcdcdc;
77 padding: 10px 0; 77 padding: 10px 0;
78 } 78 }
79 nav h2{ 79 nav h2{
80 font-size: 27px; 80 font-size: 27px;
81 margin: 0 0; 81 margin: 0 0;
82 } 82 }
83 nav ul{ 83 nav ul{
84 list-style: none; 84 list-style: none;
85 padding-left: 0; 85 padding-left: 0;
86 margin-bottom: 0; 86 margin-bottom: 0;
87 87
88 } 88 }
89 nav ul li{ 89 nav ul li{
90 margin-left: 2px; 90 margin-left: 2px;
91 float: left; 91 float: left;
92 padding: 6px 12px; 92 padding: 6px 12px;
93 background-color: #999999; 93 background-color: #999999;
94 position: relative; 94 position: relative;
95 } 95 }
96 nav ul li i.fa{ 96 nav ul li i.fa{
97 position: absolute; 97 position: absolute;
98 color: #ffffff; 98 color: #ffffff;
99 font-size: 18px; 99 font-size: 18px;
100 right: -4px; 100 right: -4px;
101 top: 50%; 101 top: 50%;
102 transform: translateX(-50%) translateY(-50%); 102 transform: translateX(-50%) translateY(-50%);
103 -webkit-transform: translateX(-50%) translateY(-50%); 103 -webkit-transform: translateX(-50%) translateY(-50%);
104 } 104 }
105 nav ul li a{ 105 nav ul li a{
106 color: #ffffff; 106 color: #ffffff;
107 } 107 }
108 nav ul li:hover a{ 108 nav ul li:hover a{
109 text-decoration: none; 109 text-decoration: none;
110 color: #ffffff; 110 color: #ffffff;
111 } 111 }
112 nav ul li.action{ 112 nav ul li.action{
113 color: #ffffff; 113 color: #ffffff;
114 background-color: #ed1d24; 114 background-color: #ed1d24;
115 } 115 }
116 /*ASIDE*/ 116 /*ASIDE*/
117 aside{ 117 aside{
118 margin: 10px 0; 118 margin: 10px 0;
119 } 119 }
120 120
121 aside .break-down{ 121 aside .break-down{
122 padding: 0 0; 122 padding: 0 0;
123 } 123 }
124 aside .break-down i.fa{ 124 aside .break-down i.fa{
125 font-size: 35px; 125 font-size: 35px;
126 color: #ff0000; 126 color: #ff0000;
127 } 127 }
128 aside .break-line{ 128 aside .break-line{
129 height: 10px; 129 height: 10px;
130 } 130 }
131 aside .break-line hr{ 131 aside .break-line hr{
132 border-top: 1px dotted #cccccc; 132 border-top: 1px dotted #cccccc;
133 } 133 }
134 aside .step{ 134 aside .step{
135 margin: 0 0; 135 margin: 0 0;
136 } 136 }
137 aside .step .title{ 137 aside .step .title{
138 font-size: 15px; 138 font-size: 15px;
139 line-height: 16px; 139 line-height: 16px;
140 font-weight: bold; 140 font-weight: bold;
141 margin-bottom: 3px; 141 margin-bottom: 3px;
142 } 142 }
143 aside .step .title-notice{ 143 aside .step .title-notice{
144 font-size: 13px; 144 font-size: 13px;
145 line-height: 16px; 145 line-height: 16px;
146 margin-bottom: 3px; 146 margin-bottom: 3px;
147 } 147 }
148 aside .step .title-notice .require{ 148 aside .step .title-notice .require{
149 font-size: 10px; 149 font-size: 10px;
150 } 150 }
151 aside .step .step-box{ 151 aside .step .step-box{
152 border: 2px solid #dcdcdc; 152 border: 2px solid #dcdcdc;
153 font-size: 12px; 153 font-size: 12px;
154 154
155 } 155 }
156 /*Step 1*/ 156 /*Step 1*/
157 aside .step .step-box .tshirt-design{ 157 aside .step .step-box .tshirt-design{
158 border: 1px solid #cccccc; 158 border: 1px solid #cccccc;
159 background-color: #f5f5f5; 159 background-color: #f5f5f5;
160 margin: 10px 10px; 160 margin: 10px 10px;
161 } 161 }
162 aside .step .step-box .tshirt-design:hover{ 162 aside .step .step-box .tshirt-design:hover{
163 border: 1px solid #ff0000; 163 border: 1px solid #ff0000;
164 } 164 }
165 aside .step .step-box .tshirt-design button:hover{ 165 aside .step .step-box .tshirt-design button:hover{
166 background-color: #fa7b7b; 166 background-color: #fa7b7b;
167 border: 1px solid #fa7b7b; 167 border: 1px solid #fa7b7b;
168 } 168 }
169 aside .step .step-box .tshirt-design div{ 169 aside .step .step-box .tshirt-design div{
170 float: left; 170 float: left;
171 } 171 }
172 aside .step .step-box .tshirt-design .icon{ 172 aside .step .step-box .tshirt-design .icon{
173 padding: 4px 4px; 173 padding: 4px 4px;
174 border-right: 1px solid #cccccc; 174 border-right: 1px solid #cccccc;
175 175
176 } 176 }
177 aside .step .step-box .tshirt-design .icon img{ 177 aside .step .step-box .tshirt-design .icon img{
178 height: 50px; 178 height: 50px;
179 } 179 }
180 aside .step .step-box .tshirt-design .name{ 180 aside .step .step-box .tshirt-design .name{
181 padding: 10px 10px; 181 padding: 10px 10px;
182 182
183 } 183 }
184 aside .step .step-box .tshirt-design .action{ 184 aside .step .step-box .tshirt-design .action{
185 padding: 10px 10px; 185 padding: 10px 10px;
186 float: right; 186 float: right;
187 187
188 } 188 }
189 aside .step .step-box .tshirt-design .action button{ 189 aside .step .step-box .tshirt-design .action button{
190 padding: 8px 10px; 190 padding: 8px 10px;
191 } 191 }
192 /*Step 2*/ 192 /*Step 2*/
193 aside .step .step-box .tshirt-color{ 193 aside .step .step-box .tshirt-color{
194 padding: 6px 10px; 194 padding: 6px 10px;
195 position: relative; 195 position: relative;
196 } 196 }
197 aside .step .step-box .tshirt-color ul.choice-color{ 197 aside .step .step-box .tshirt-color ul.choice-color{
198 float: left; 198 float: left;
199 list-style: none; 199 list-style: none;
200 padding-left: 0; 200 padding-left: 0;
201 width: 100%; 201 width: 100%;
202 margin-bottom: 3px; 202 margin-bottom: 3px;
203 } 203 }
204 aside .step .step-box .tshirt-color ul.choice-color li{ 204 aside .step .step-box .tshirt-color ul.choice-color li{
205 margin: 0 10px 0 0; 205 margin: 0 10px 0 0;
206 border: 1px solid #cccccc; 206 border: 1px solid #cccccc;
207 padding: 2px 2px; 207 padding: 2px 2px;
208 float: left; 208 float: left;
209 cursor: pointer; 209 cursor: pointer;
210 } 210 }
211 aside .step .step-box .tshirt-color ul.choice-color li.action{ 211 aside .step .step-box .tshirt-color ul.choice-color li.action{
212 border: 1px solid #ff0000; 212 border: 1px solid #ff0000;
213 } 213 }
214 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 214 aside .step .step-box .tshirt-color ul.choice-color li:hover{
215 border: 1px solid #ff0000; 215 border: 1px solid #ff0000;
216 } 216 }
217 aside .step .step-box .tshirt-color ul.choice-color li div{ 217 aside .step .step-box .tshirt-color ul.choice-color li div{
218 height: 30px; 218 height: 30px;
219 width: 30px; 219 width: 30px;
220 } 220 }
221 221
222 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 222 aside .step .step-box .tshirt-color ul.choice-color li.white div{
223 background-color: #ece7e4; 223 background-color: #ece7e4;
224 } 224 }
225 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 225 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
226 background-color: #e7dfd0; 226 background-color: #e7dfd0;
227 } 227 }
228 aside .step .step-box .tshirt-color .color-name{ 228 aside .step .step-box .tshirt-color .color-name{
229 width: 100%; 229 width: 100%;
230 font-size: 10px; 230 font-size: 10px;
231 } 231 }
232 aside .step .step-box .tshirt-color .view-more{ 232 aside .step .step-box .tshirt-color .view-more{
233 position: absolute; 233 position: absolute;
234 bottom: 6px; 234 bottom: 6px;
235 right: 10px; 235 right: 10px;
236 } 236 }
237 /*Step 3*/ 237 /*Step 3*/
238 aside .step .step-box .tshirt-saveorder{ 238 aside .step .step-box .tshirt-saveorder{
239 padding: 10px 10px 6px 10px; 239 padding: 10px 10px 6px 10px;
240 } 240 }
241 aside .step .step-box .tshirt-saveorder .action{ 241 aside .step .step-box .tshirt-saveorder .action{
242 width: 50%; 242 width: 50%;
243 float: left; 243 float: left;
244 } 244 }
245 aside .step .step-box .tshirt-saveorder .action:first-child{ 245 aside .step .step-box .tshirt-saveorder .action:first-child{
246 padding-right: 5px; 246 padding-right: 5px;
247 } 247 }
248 aside .step .step-box .tshirt-saveorder .action:last-child{ 248 aside .step .step-box .tshirt-saveorder .action:last-child{
249 padding-left: 5px; 249 padding-left: 5px;
250 } 250 }
251 aside .step .step-box .tshirt-saveorder .action button{ 251 aside .step .step-box .tshirt-saveorder .action button{
252 padding: 8px 10px; 252 padding: 8px 10px;
253 253
254 } 254 }
255 aside .step .step-box .tshirt-saveorder .action button .text{ 255 aside .step .step-box .tshirt-saveorder .action button .text{
256 float: left; 256 float: left;
257 width: 80%; 257 width: 80%;
258 text-align: center; 258 text-align: center;
259 padding-left: 10px; 259 padding-left: 10px;
260 vertical-align: bottom; 260 vertical-align: bottom;
261 } 261 }
262 aside .step .step-box .tshirt-saveorder .action button .arrow{ 262 aside .step .step-box .tshirt-saveorder .action button .arrow{
263 float: left; 263 float: left;
264 width: 20%; 264 width: 20%;
265 height: 40px; 265 height: 40px;
266 position: relative; 266 position: relative;
267 } 267 }
268 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 268 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
269 position: absolute; 269 position: absolute;
270 top: 50%; 270 top: 50%;
271 right: -6px; 271 right: -6px;
272 transform: translateX(-50%) translateY(-50%); 272 transform: translateX(-50%) translateY(-50%);
273 -webkit-transform: translateX(-50%) translateY(-50%); 273 -webkit-transform: translateX(-50%) translateY(-50%);
274 } 274 }
275 aside .step .step-box .tshirt-saveorder .notice{ 275 aside .step .step-box .tshirt-saveorder .notice{
276 padding: 5px 0 0 0; 276 padding: 5px 0 0 0;
277 } 277 }
278 /*Step 4*/ 278 /*Step 4*/
279 aside .step .title-notice{ 279 aside .step .title-notice{
280 280
281 } 281 }
282 aside .step .step-box .change-design{ 282 aside .step .step-box .change-design{
283 padding: 4px 4px; 283 padding: 4px 4px;
284 } 284 }
285 aside .step .step-box .change-design table{ 285 aside .step .step-box .change-design table{
286 286
287 } 287 }
288 aside .step .step-box .change-design table tr{ 288 aside .step .step-box .change-design table tr{
289 border-bottom: 1px dotted #cccccc; 289 border-bottom: 1px dotted #cccccc;
290 } 290 }
291 aside .step .step-box .change-design table tr:last-child{ 291 aside .step .step-box .change-design table tr:last-child{
292 border-bottom: 0; 292 border-bottom: 0;
293 } 293 }
294 294
295 /*Step 5- finish*/ 295 /*Step 5- finish*/
296 aside .step .finish-design{ 296 aside .step .finish-design{
297 padding: 20px 0; 297 padding: 20px 0;
298 } 298 }
299 aside .step .finish-design button{ 299 aside .step .finish-design button{
300 width: 100%; 300 width: 100%;
301 padding: 8px 10px; 301 padding: 8px 10px;
302 } 302 }
303 303
304 /*DESIGN CONTENT*/ 304 /*DESIGN CONTENT*/
305 #tshirt-content{ 305 #tshirt-content{
306 position: relative; 306 position: relative;
307 } 307 }
308 #tshirt-content .switch-border-design{ 308 #tshirt-content .switch-border-design{
309 position: absolute; 309 position: absolute;
310 top: 5px; 310 top: 5px;
311 right: 10px; 311 right: 10px;
312 color: red; 312 color: red;
313 font-size: 11px; 313 font-size: 11px;
314 } 314 }
315 #tshirt-content .tshirt-image{ 315 #tshirt-content .tshirt-image{
316 padding: 20px 0 0 0; 316 padding: 20px 0 0 0;
317 position: relative; 317 position: relative;
318 height: 100%; 318 height: 100%;
319 width: 100%; 319 width: 100%;
320 } 320 }
321 321
322 #tshirt-content .tshirt-image img{ 322 #tshirt-content .tshirt-image img{
323 width: 100%; 323 width: 100%;
324 } 324 }
325 325
326 #preview-design { 326 #preview-design {
327 position: absolute; 327 position: absolute;
328 width: 190px; 328 width: 190px;
329 height: 200px; 329 height: 200px;
330 border: dashed 2px #DDD; 330 border: dashed 2px #DDD;
331 top: 180px; 331 top: 180px;
332 /*left: 200px;*/ 332 /*left: 200px;*/
333 cursor: pointer; 333 cursor: pointer;
334 } 334 }
335 335
336 #preview-design img { 336 #preview-design img {
337 width: 150px; 337 width: 150px;
338 } 338 }
339 339
340 #tshirt-content .tshirt-choice{ 340 #tshirt-content .tshirt-choice{
341 341
342 } 342 }
343 #tshirt-content .tshirt-choice ul{ 343 #tshirt-content .tshirt-choice ul{
344 list-style: none; 344 list-style: none;
345 padding-left: 0; 345 padding-left: 0;
346 display: table; 346 display: table;
347 margin: auto; 347 margin: auto;
348 } 348 }
349 #tshirt-content .tshirt-choice ul li{ 349 #tshirt-content .tshirt-choice ul li{
350 float: left; 350 float: left;
351 margin: 10px 10px; 351 margin: 10px 10px;
352 cursor: pointer; 352 cursor: pointer;
353 } 353 }
354 #tshirt-content .tshirt-choice ul li .image{ 354 #tshirt-content .tshirt-choice ul li .image{
355 border: 1px solid #cccccc; 355 border: 1px solid #cccccc;
356 padding: 3px 3px; 356 padding: 3px 3px;
357 } 357 }
358 #tshirt-content .tshirt-choice ul li.focus{ 358 #tshirt-content .tshirt-choice ul li.focus{
359 359
360 } 360 }
361 #tshirt-content .tshirt-choice ul li.focus .image{ 361 #tshirt-content .tshirt-choice ul li.focus .image{
362 border: 1px solid #ff0000; 362 border: 1px solid #ff0000;
363 } 363 }
364 #tshirt-content .tshirt-choice ul li .image img{ 364 #tshirt-content .tshirt-choice ul li .image img{
365 width: 50px; 365 width: 50px;
366 height: auto; 366 height: auto;
367 } 367 }
368 /*MODAL Design*/ 368 /*MODAL Design*/
369 #tshirt-design{ 369 #tshirt-design{
370 background-color: #666666; 370 background-color: #666666;
371 } 371 }
372 #tshirt-design .modal-dialog{ 372 #tshirt-design .modal-dialog{
373 /*width: 800px!important;*/ 373 /*width: 800px!important;*/
374 margin: 0 auto; 374 margin: 0 auto;
375 } 375 }
376 #tshirt-design .modal-dialog .modal-content{ 376 #tshirt-design .modal-dialog .modal-content{
377 background-color: transparent; 377 background-color: transparent;
378 border-radius: 0; 378 border-radius: 0;
379 border: 0; 379 border: 0;
380 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 380 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
381 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 381 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
382 } 382 }
383 #tshirt-design .modal-dialog .modal-content .modal-header{ 383 #tshirt-design .modal-dialog .modal-content .modal-header{
384 padding: 0 0 10px 0; 384 padding: 0 0 10px 0;
385 border-bottom: 0; 385 border-bottom: 0;
386 border-shadow: none!important; 386 border-shadow: none!important;
387 } 387 }
388 #tshirt-design .modal-dialog .modal-content .modal-body{ 388 #tshirt-design .modal-dialog .modal-content .modal-body{
389 background-color: #f5f5f5; 389 background-color: #f5f5f5;
390 padding: 0 0; 390 padding: 0 0;
391 } 391 }
392 #tshirt-design header{ 392 #tshirt-design header{
393 border-bottom: 1px solid #cccccc; 393 border-bottom: 1px solid #cccccc;
394 background-color: #dddddd; 394 background-color: #dddddd;
395 } 395 }
396 #tshirt-design header ul.nav{ 396 #tshirt-design header ul.nav{
397 padding-left: 0; 397 padding-left: 0;
398 list-style: none; 398 list-style: none;
399 } 399 }
400 #tshirt-design header ul.nav li{ 400 #tshirt-design header ul.nav li{
401 float: left; 401 float: left;
402 padding: 8px 26px; 402 padding: 8px 26px;
403 border-right: 1px solid #cccccc; 403 border-right: 1px solid #cccccc;
404 font-size: 14px; 404 font-size: 14px;
405 cursor: pointer; 405 cursor: pointer;
406 } 406 }
407 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 407 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
408 background-color: red; 408 background-color: red;
409 color: #ffffff; 409 color: #ffffff;
410 } 410 }
411 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 411 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
412 color: #ffffff; 412 color: #ffffff;
413 } 413 }
414 #tshirt-design header ul.nav li i.fa{ 414 #tshirt-design header ul.nav li i.fa{
415 color: #fe070f; 415 color: #fe070f;
416 font-size: 20px; 416 font-size: 20px;
417 margin-right: 10px; 417 margin-right: 10px;
418 } 418 }
419 #tshirt-design header .action{ 419 #tshirt-design header .action{
420 420
421 } 421 }
422 #tshirt-design header .action button{ 422 #tshirt-design header .action button{
423 padding: 2px 10px; 423 padding: 2px 10px;
424 margin: 6px 10px; 424 margin: 6px 10px;
425 } 425 }
426 #tshirt-design header .action button:hover{ 426 #tshirt-design header .action button:hover{
427 background-color: red; 427 background-color: red;
428 color: #ffffff; 428 color: #ffffff;
429 } 429 }
430 430
431 /*Aside modal*/ 431 /*Aside modal*/
432 .aside{ 432 .aside{
433 } 433 }
434 434
435 .aside .box-design-option{ 435 .aside .box-design-option{
436 list-style: none; 436 list-style: none;
437 padding-left: 0; 437 padding-left: 0;
438 margin-top: 10px; 438 margin-top: 10px;
439 } 439 }
440 440
441 .aside .box-design-option li{ 441 .aside .box-design-option li{
442 border: 1px solid #cdcdcd; 442 border: 1px solid #cdcdcd;
443 position: relative; 443 position: relative;
444 /*cursor: pointer;*/ 444 /*cursor: pointer;*/
445 margin-bottom: 10px; 445 margin-bottom: 10px;
446 } 446 }
447 .aside .box-design-option li .hover{ 447 .aside .box-design-option li .hover{
448 background-color: #fddad4; 448 background-color: #fddad4;
449 opacity: 0.6; 449 opacity: 0.6;
450 position: absolute; 450 position: absolute;
451 width: 100%; 451 width: 100%;
452 height: 100%; 452 height: 100%;
453 display: none; 453 display: none;
454 } 454 }
455 .aside .box-design-option li:hover .hover{ 455 .aside .box-design-option li:hover .hover{
456 display: block; 456 display: block;
457 } 457 }
458 458
459 .aside .box-design-option li .title{ 459 .aside .box-design-option li .title{
460 background: url("../images/bg1.png") repeat #cdcdcd; 460 background: url("../images/bg1.png") repeat #cdcdcd;
461 padding: 3px 10px; 461 padding: 3px 10px;
462 } 462 }
463 .aside .box-design-option li .title i.fa{ 463 .aside .box-design-option li .title i.fa{
464 color: #000000; 464 color: #000000;
465 } 465 }
466 466
467 .aside .box-design-option li .content{ 467 .aside .box-design-option li .content{
468 468
469 } 469 }
470 .aside .box-design-option li .content i.fa{ 470 .aside .box-design-option li .content i.fa{
471 font-size: 30px; 471 font-size: 30px;
472 color: #fe070f; 472 color: #fe070f;
473 margin: 8px 0; 473 margin: 8px 0;
474 } 474 }
475 .aside .box-design-option li .content .des{ 475 .aside .box-design-option li .content .des{
476 padding: 3px 10px 3px 0; 476 padding: 3px 10px 3px 0;
477 } 477 }
478 .aside .box-design-option li .content .color-patterns { 478 .aside .box-design-option li .content .color-patterns {
479 width: 100%; 479 width: 100%;
480 border: #bbb solid 1px; 480 border: #bbb solid 1px;
481 background: #FFF; 481 background: #FFF;
482 margin-top: 5px; 482 margin-top: 5px;
483 min-height: 65px; 483 min-height: 65px;
484 } 484 }
485 485
486 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 486 .aside .box-design-option li .content .color-patterns .color-pattern-item{
487 height: 20px; 487 height: 20px;
488 float: left; 488 float: left;
489 margin-left: 4px; 489 margin-left: 4px;
490 margin-top: 2px; 490 margin-top: 2px;
491 width: 20px; 491 width: 20px;
492 cursor: pointer; 492 cursor: pointer;
493 border: 1px solid #ddd; 493 border: 1px solid #ddd;
494 } 494 }
495 495
496 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { 496 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
497 outline: 1px solid #ed1d24; 497 outline: 1px solid #ed1d24;
498 } 498 }
499 499
500 .aside .box-design-option li .title .reset-color-patterns { 500 .aside .box-design-option li .title .reset-color-patterns {
501 cursor: pointer; 501 cursor: pointer;
502 } 502 }
503 503
504 .aside .box-design-option li .title .reset-color-patterns:hover { 504 .aside .box-design-option li .title .reset-color-patterns:hover {
505 opacity: 0.6; 505 opacity: 0.6;
506 } 506 }
507 507
508 .aside .box-design-option li .content .layer-item { 508 .aside .box-design-option li .content .layer-item {
509 text-align: center; 509 text-align: center;
510 border: 1px #ddd solid; 510 border: 1px #ddd solid;
511 background: #FFF; 511 background: #FFF;
512 padding: 5px; 512 padding: 5px;
513 font-size: 12px; 513 font-size: 12px;
514 cursor: pointer; 514 cursor: pointer;
515 } 515 }
516 516
517 .aside .box-design-option li .content .layer-item:hover { 517 .aside .box-design-option li .content .layer-item:hover {
518 background: #ffcccc; 518 background: #ffcccc;
519 } 519 }
520 520
521 521
522 /*Design Text*/ 522 /*Design Text*/
523 .aside #choice-text{ 523 .aside #choice-text{
524 524
525 } 525 }
526 .aside #choice-text .content{ 526 .aside #choice-text .content{
527 padding: 10px 10px; 527 padding: 10px 10px;
528 } 528 }
529 .aside #choice-text .content ul.font-family-box{ 529 .aside #choice-text .content ul.font-family-box{
530 list-style: none; 530 list-style: none;
531 margin: 10px 0; 531 margin: 10px 0;
532 padding-left: 0; 532 padding-left: 0;
533 height: 180px; 533 height: 180px;
534 width: 100%; 534 width: 100%;
535 overflow-y: scroll; 535 overflow-y: scroll;
536 border: 1px solid #c0c0c0; 536 border: 1px solid #c0c0c0;
537 } 537 }
538 538
539 .aside #choice-text .content .font-family-box li{ 539 .aside #choice-text .content .font-family-box li{
540 cursor: pointer; 540 cursor: pointer;
541 padding: 4px 8px; 541 padding: 4px 8px;
542 border: 0; 542 border: 0;
543 border-bottom: 1px solid #c0c0c0; 543 border-bottom: 1px solid #c0c0c0;
544 border-right: 1px solid #c0c0c0; 544 border-right: 1px solid #c0c0c0;
545 font-size: 16px; 545 font-size: 16px;
546 margin-bottom: 0; 546 margin-bottom: 0;
547 } 547 }
548 .aside #choice-text .content .font-family-box li.active{ 548 .aside #choice-text .content .font-family-box li.active{
549 border: 1px solid #fe070f; 549 border: 1px solid #fe070f;
550 } 550 }
551 .aside #choice-text .content .spacing-letter{ 551 .aside #choice-text .content .spacing-letter{
552 552
553 } 553 }
554 .aside #choice-text .content .spacing-letter .text-label{ 554 .aside #choice-text .content .spacing-letter .text-label{
555 font-size: 16px; 555 font-size: 16px;
556 padding: 4px 0; 556 padding: 4px 0;
557 } 557 }
558 .aside #choice-text .content .spacing-letter .box{ 558 .aside #choice-text .content .spacing-letter .box{
559 border: 1px solid #8c8c8c; 559 border: 1px solid #8c8c8c;
560 box-shadow: 0 0 5px #888888; 560 box-shadow: 0 0 5px #888888;
561 background-color: #f0f0f0; 561 background-color: #f0f0f0;
562 } 562 }
563 .aside #choice-text .content .spacing-letter .item{ 563 .aside #choice-text .content .spacing-letter .item{
564 float: left; 564 float: left;
565 } 565 }
566 .aside #choice-text .content .spacing-letter .item:hover{ 566 .aside #choice-text .content .spacing-letter .item:hover{
567 background-color: #fddad4; 567 background-color: #fddad4;
568 } 568 }
569 569
570 .aside #choice-text .content .spacing-letter .item i.fa{ 570 .aside #choice-text .content .spacing-letter .item i.fa{
571 font-size: 22px; 571 font-size: 22px;
572 margin: 0 0; 572 margin: 0 0;
573 color: #000000; 573 color: #000000;
574 } 574 }
575 .aside #choice-text .content .spacing-letter .item-text{ 575 .aside #choice-text .content .spacing-letter .item-text{
576 padding: 6px 20px; 576 padding: 6px 20px;
577 font-size: 13px; 577 font-size: 13px;
578 } 578 }
579 .aside #choice-text .content .spacing-letter .item-plus{ 579 .aside #choice-text .content .spacing-letter .item-plus{
580 border-right: 1px solid #8c8c8c; 580 border-right: 1px solid #8c8c8c;
581 } 581 }
582 .aside #choice-text .content .spacing-letter .item-minus{ 582 .aside #choice-text .content .spacing-letter .item-minus{
583 border-left: 1px solid #8c8c8c; 583 border-left: 1px solid #8c8c8c;
584 } 584 }
585 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { 585 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
586 padding: 5px 6px 1px 6px; 586 padding: 5px 6px 1px 6px;
587 cursor: pointer; 587 cursor: pointer;
588 } 588 }
589 /*Design Choice Illustration*/ 589 /*Design Choice Illustration*/
590 .aside #choice-illustration li .content { 590 .aside #choice-illustration li .content {
591 padding: 10px 10px; 591 padding: 10px 10px;
592 } 592 }
593 593
594 .aside #choice-illustration li .content select{ 594 .aside #choice-illustration li .content select{
595 width: 100%; 595 width: 100%;
596 } 596 }
597 597
598 .aside #choice-illustration li .content .illustration-list { 598 .aside #choice-illustration li .content .illustration-list {
599 width: 100%; 599 width: 100%;
600 border: #bbb solid 1px; 600 border: #bbb solid 1px;
601 background: #FFF; 601 background: #FFF;
602 margin-top: 5px; 602 margin-top: 5px;
603 min-height: 310px; 603 min-height: 310px;
604 padding-bottom: 20px; 604 padding-bottom: 20px;
605 } 605 }
606 606
607 .aside #choice-illustration li .content .illustration-list .illstration-item{ 607 .aside #choice-illustration li .content .illustration-list .illstration-item{
608 height: 60px; 608 height: 60px;
609 overflow: hidden; 609 overflow: hidden;
610 float: left; 610 float: left;
611 margin-left: 6px; 611 margin-left: 6px;
612 margin-top: 5px; 612 margin-top: 5px;
613 margin-bottom: 5px; 613 margin-bottom: 5px;
614 padding: 2px; 614 padding: 2px;
615 background: #e2e2e2; 615 background: #e2e2e2;
616 border: solid 2px #d7d7d7; 616 border: solid 2px #d7d7d7;
617 cursor: pointer; 617 cursor: pointer;
618 } 618 }
619 619
620 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 620 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
621 outline: 2px solid #ed1d24; 621 outline: 2px solid #ed1d24;
622 } 622 }
623 623
624 .aside #choice-illustration li .content .illustration-list .illstration-item img { 624 .aside #choice-illustration li .content .illustration-list .illstration-item img {
625 width: 50px; 625 width: 50px;
626 cursor: pointer; 626 cursor: pointer;
627 } 627 }
628 628
629 .aside #choice-illustration li .content .illustration-list .footer-bar { 629 .aside #choice-illustration li .content .illustration-list .footer-bar {
630 text-align: center; 630 text-align: center;
631 margin-top: 5px; 631 margin-top: 5px;
632 bottom: 10px; 632 bottom: 10px;
633 position: absolute; 633 position: absolute;
634 width: 100%; 634 width: 100%;
635 padding-right: 20px; 635 padding-right: 20px;
636 } 636 }
637 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { 637 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
638 margin-right: 5px; 638 margin-right: 5px;
639 cursor: pointer; 639 cursor: pointer;
640 font-size: 9px; 640 font-size: 9px;
641 color: #FFF; 641 color: #FFF;
642 background: #666666; 642 background: #666666;
643 text-transform: uppercase; 643 text-transform: uppercase;
644 padding: 2px 5px; 644 padding: 2px 5px;
645 } 645 }
646 646
647 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { 647 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
648 background: #999999; 648 background: #999999;
649 } 649 }
650 .tooltip-arrow, 650 .tooltip-arrow,
651 .red-tooltip + .tooltip > .tooltip-inner { 651 .red-tooltip + .tooltip > .tooltip-inner {
652 background-color: #FFF; 652 background-color: #FFF;
653 margin:0; 653 margin:0;
654 padding:0; 654 padding:0;
655 } 655 }
656 656
657 /* Insert image*/ 657 /* Insert image*/
658 #btn-choose-image { 658 #btn-choose-image {
659 background: #ff0f00; 659 background: #ff0f00;
660 cursor: pointer; 660 cursor: pointer;
661 margin: 10px 0px; 661 margin: 10px 0px;
662 padding: 0 10px; 662 padding: 0 10px;
663 color: #FFF; 663 color: #FFF;
664 font-size: 12px; 664 font-size: 12px;
665 } 665 }
666 666
667 #btn-choose-image:hover { 667 #btn-choose-image:hover {
668 background: #f8aeae; 668 background: #f8aeae;
669 } 669 }
670 670
671 .aside #choice-image li .content { 671 .aside #choice-image li .content {
672 margin: 0 10px; 672 margin: 0 10px;
673 padding: 10px 0; 673 padding: 10px 0;
674 } 674 }
675 675
676 .aside #choice-image li .content .small-text { 676 .aside #choice-image li .content .small-text {
677 font-size:10px; 677 font-size:10px;
678 margin-bottom: 10px; 678 margin-bottom: 10px;
679 } 679 }
680 680
681 .aside #choice-image { 681 .aside #choice-image {
682 font-size: 13px; 682 font-size: 13px;
683 } 683 }
684 684
685 .aside #imgLoader{ 685 .aside #imgLoader{
686 display: none; 686 display: none;
687 } 687 }
688 688
689 .aside #choice-image li .content .list-images { 689 .aside #choice-image li .content .list-images {
690 height: 300px; 690 height: 300px;
691 background: #FFF; 691 background: #FFF;
692 border: 1px solid #DDD; 692 border: 1px solid #DDD;
693 } 693 }
694 694
695 .aside #choice-image li .content .list-images .recent-img{ 695 .aside #choice-image li .content .list-images .recent-img{
696 height: 60px; 696 height: 60px;
697 overflow: hidden; 697 overflow: hidden;
698 float: left; 698 float: left;
699 margin-left: 6px; 699 margin-left: 6px;
700 margin-top: 5px; 700 margin-top: 5px;
701 margin-bottom: 5px; 701 margin-bottom: 5px;
702 padding: 2px; 702 padding: 2px;
703 background: #e2e2e2; 703 background: #e2e2e2;
704 border: solid 2px #d7d7d7; 704 border: solid 2px #d7d7d7;
705 cursor: pointer; 705 cursor: pointer;
706 } 706 }
707 707
708 .aside #choice-image li .content .list-images .recent-img:hover { 708 .aside #choice-image li .content .list-images .recent-img:hover {
709 outline: 2px solid #ed1d24; 709 outline: 2px solid #ed1d24;
710 } 710 }
711 711
712 .aside #choice-image li .content .list-images .recent-img img { 712 .aside #choice-image li .content .list-images .recent-img img {
713 width: 50px; 713 width: 50px;
714 cursor: pointer; 714 cursor: pointer;
715 } 715 }
716 716
717 /*Design content*/ 717 /*Design content*/
718 .tshirt-design-container{ 718 .tshirt-design-container{
719 position: relative; 719 position: relative;
720 } 720 }
721 .tshirt-design-container .design-content{ 721 .tshirt-design-container .design-content{
722 padding: 10px 0; 722 padding: 10px 0;
723 /*width: 100%;*/ 723 /*width: 100%;*/
724 } 724 }
725 .tshirt-design-container .design-content .content{ 725 .tshirt-design-container .design-content .content{
726 width: 100%; 726 width: 100%;
727 height: 100%; 727 height: 100%;
728 min-height: 650px; 728 min-height: 650px;
729 background-color: #f0efea; 729 background-color: #f0efea;
730 padding: 40px 40px; 730 padding: 40px 40px;
731 /*display: table-cell;*/ 731 /*display: table-cell;*/
732 } 732 }
733 .tshirt-design-container .design-content .content .selection-design{ 733 .tshirt-design-container .design-content .content .selection-design{
734 border: 1px solid #ff0000; 734 border: 1px solid #ff0000;
735 width: 100%; 735 width: 100%;
736 height: 620px; 736 height: 620px;
737 } 737 }
738 .tshirt-design-container .agree-design{ 738 .tshirt-design-container .agree-design{
739 position: absolute; 739 position: absolute;
740 right: -16px; 740 right: -16px;
741 top: 40%; 741 top: 40%;
742 cursor: pointer; 742 cursor: pointer;
743 } 743 }
744 .tshirt-design-container .agree-design:hover{ 744 .tshirt-design-container .agree-design:hover{
745 opacity: 0.8; 745 opacity: 0.8;
746 } 746 }
747 .tshirt-design-container .trash-design{ 747 .tshirt-design-container .trash-design{
748 position: absolute; 748 position: absolute;
749 right: 5px; 749 right: 5px;
750 bottom: 0; 750 bottom: 0;
751 } 751 }
752 .tshirt-design-container .trash-design:hover{ 752 .tshirt-design-container .trash-design:hover{
753 opacity: 0.5; 753 opacity: 0.5;
754 } 754 }
755 755
756 .object-border{ 756 .object-border{
757 position: absolute; 757 position: absolute;
758 background-color: rgb(0, 108, 255); 758 background-color: rgb(0, 108, 255);
759 border: 0; 759 border: 0;
760 display:none; 760 display:none;
761 transform-origin: 0% 0%;
761 } 762 }
762 #object-border-top, #object-border-bottom{ 763 #object-border-top, #object-border-bottom{
763 height: 2px; 764 height: 2px;
764 } 765 }
765 #object-border-right, #object-border-left{ 766 #object-border-right, #object-border-left{
766 width: 2px; 767 width: 2px;
767 } 768 }
768 769
769 770
770 /*FOOTER*/ 771 /*FOOTER*/
771 footer{ 772 footer{
772 background-color: #333333; 773 background-color: #333333;
773 } 774 }
774 footer ul.nav-footer{ 775 footer ul.nav-footer{
775 padding-left: 0; 776 padding-left: 0;
776 list-style: none; 777 list-style: none;
777 } 778 }
778 footer ul.nav-footer li{ 779 footer ul.nav-footer li{
779 float: left; 780 float: left;
780 padding: 3px 10px; 781 padding: 3px 10px;
781 border-right: 1px dotted #ffffff; 782 border-right: 1px dotted #ffffff;
782 783
783 } 784 }
784 footer ul.nav-footer li a{ 785 footer ul.nav-footer li a{
785 color: #ffffff; 786 color: #ffffff;
786 font-size: 11px; 787 font-size: 11px;
787 } 788 }
788 /* Customize container */ 789 /* Customize container */
789 @media (min-width: 768px) { 790 @media (min-width: 768px) {
790 .container { 791 .container {
791 /*max-width: 730px;*/ 792 /*max-width: 730px;*/
792 } 793 }
793 } 794 }
794 795
795 /* Responsive: Portrait tablets and up */ 796 /* Responsive: Portrait tablets and up */
796 @media screen and (min-width: 768px) { 797 @media screen and (min-width: 768px) {
797 /* Remove the padding we set earlier */ 798 /* Remove the padding we set earlier */
798 799
799 } 800 }
800 801
801 @media (min-width: 1024px) { 802 @media (min-width: 1024px) {
802 #tshirt-design .modal-dialog{ 803 #tshirt-design .modal-dialog{
803 min-width: 1000px; 804 min-width: 1000px;
804 width: 1000px; 805 width: 1000px;
805 } 806 }
806 } 807 }
807 808
808 @media (max-width: 1200px) { 809 @media (max-width: 1200px) {
809 #preview-design { 810 #preview-design {
810 left: 155px; 811 left: 155px;
811 } 812 }
812 } 813 }
813 814
814 @media (max-width: 990px) { 815 @media (max-width: 990px) {
815 #preview-design { 816 #preview-design {
816 /*left: 115px;*/ 817 /*left: 115px;*/
817 width: 110px; 818 width: 110px;
818 height: 160px; 819 height: 160px;
819 top: 110px; 820 top: 110px;
820 } 821 }
821 } 822 }
822 823
823 @media (max-width: 762px) { 824 @media (max-width: 762px) {
824 .modal-dialog{ 825 .modal-dialog{
825 /*width: 100%!important;*/ 826 /*width: 100%!important;*/
826 margin: 0 0!important; 827 margin: 0 0!important;
827 } 828 }
828 #tshirt-design header .menu-nav{ 829 #tshirt-design header .menu-nav{
829 overflow-x: scroll!important; 830 overflow-x: scroll!important;
830 -webkit-overflow-scrolling: touch; 831 -webkit-overflow-scrolling: touch;
831 } 832 }
832 833
833 #tshirt-design header ul.nav { 834 #tshirt-design header ul.nav {
834 text-align: justify; 835 text-align: justify;
835 width: 680px; 836 width: 680px;
836 837
837 } 838 }
838 839
839 #tshirt-design header ul.nav li { 840 #tshirt-design header ul.nav li {
840 display: inline-block; /* 6 */ 841 display: inline-block; /* 6 */
841 } 842 }
842 843
843 .tshirt-design-container .design-content .content{ 844 .tshirt-design-container .design-content .content{
844 padding: 14px 14px; 845 padding: 14px 14px;
845 } 846 }
846 .tshirt-design-container .design-content{ 847 .tshirt-design-container .design-content{
847 padding: 0 0; 848 padding: 0 0;
848 } 849 }
849 } 850 }