Commit 360081503c102b4ec25b9ccbc6da5c8b4b12e252

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

Fix reponsive

Showing 3 changed files with 32 additions and 23 deletions Inline Diff

app/scripts/controllers/main.js
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 'use strict'; 2 'use strict';
3 app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt) { 3 app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt) {
4 // console.log($('nav').width()); 4 // console.log($('nav').width());
5 $rootScope.API_URL = 'http://domain.com'; 5 $rootScope.API_URL = 'http://domain.com';
6 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; 6 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
7 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; 7 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
8 $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; 8 $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION;
9 $scope.designPartText = 'views/design_part/text.html?ver='+VERSION; 9 $scope.designPartText = 'views/design_part/text.html?ver='+VERSION;
10 $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION; 10 $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION;
11 11
12 //Action T-Shirt choice color and Back or Front 12 //Action T-Shirt choice color and Back or Front
13 $scope.tShirtColor = $t_shirt.getTShirtColor(0); 13 $scope.tShirtColor = $t_shirt.getTShirtColor(0);
14 //Set color name default 14 //Set color name default
15 var tShirtColorFirstKey = 0; 15 var tShirtColorFirstKey = 0;
16 $scope.tShirtChoiceBackFrontKey = 'front'; 16 $scope.tShirtChoiceBackFrontKey = 'front';
17 $scope.tShirtColorKey = tShirtColorFirstKey; 17 $scope.tShirtColorKey = tShirtColorFirstKey;
18 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; 18 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
19 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; 19 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
20 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; 20 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
21 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; 21 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
22 $scope.tShirtImg = $scope.tShirtImgFront; 22 $scope.tShirtImg = $scope.tShirtImgFront;
23 23
24 //review design set position 24 //review design set position
25 var _widthPreviewDesign = $('#preview-design').width(); 25 function setSizePreViewDesign() {
26 var _widthTShirtImage = $('.tshirt-image').width(); 26 var _widthPreviewDesign = $('#preview-design').width();
27 console.log(_widthTShirtImage); 27 var _widthTShirtImage = $('.tshirt-image').width();
28 console.log(_widthPreviewDesign); 28 var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2);
29 // $('#preview-design').css({width: _widthTShirtImage/2 - 60}); 29 $('#preview-design').css({left: leftReviewDesign});
30 var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2 - 10); 30 }
31 $('#preview-design').css({left: leftReviewDesign}); 31 setSizePreViewDesign();
32 32 //event resize window
33 $(window).resize(function () {
34 setSizePreViewDesign();
35 });
33 36
34 $scope.choiceTShirtColor = function(key) { 37 $scope.choiceTShirtColor = function(key) {
35 $scope.tShirtColorKey = key; 38 $scope.tShirtColorKey = key;
36 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code; 39 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
37 $scope.tShirtColorName = $scope.tShirtColor[key].name; 40 $scope.tShirtColorName = $scope.tShirtColor[key].name;
38 $scope.tShirtImgFront = $scope.tShirtColor[key].img.front; 41 $scope.tShirtImgFront = $scope.tShirtColor[key].img.front;
39 $scope.tShirtImgBack = $scope.tShirtColor[key].img.back; 42 $scope.tShirtImgBack = $scope.tShirtColor[key].img.back;
40 if($scope.tShirtChoiceBackFrontKey == 'front') { 43 if($scope.tShirtChoiceBackFrontKey == 'front') {
41 $scope.tShirtImg = $scope.tShirtImgFront; 44 $scope.tShirtImg = $scope.tShirtImgFront;
42 } else { 45 } else {
43 $scope.tShirtImg = $scope.tShirtImgBack; 46 $scope.tShirtImg = $scope.tShirtImgBack;
44 } 47 }
45 }; 48 };
46 $scope.choiceTShirtBackFront = function(choice) { 49 $scope.choiceTShirtBackFront = function(choice) {
47 if(choice == 'front') { 50 if(choice == 'front') {
48 $scope.tShirtImg = $scope.tShirtImgFront; 51 $scope.tShirtImg = $scope.tShirtImgFront;
49 } else { 52 } else {
50 $scope.tShirtImg = $scope.tShirtImgBack; 53 $scope.tShirtImg = $scope.tShirtImgBack;
51 } 54 }
52 $scope.tShirtChoiceBackFrontKey = choice; 55 $scope.tShirtChoiceBackFrontKey = choice;
53 }; 56 };
54 57
55 58
56 59
57 60
58 //safeApply 61 //safeApply
59 $rootScope.safeApply = function(fn) { 62 $rootScope.safeApply = function(fn) {
60 var phase = this.$root.$$phase; 63 var phase = this.$root.$$phase;
61 if(phase == '$apply' || phase == '$digest') { 64 if(phase == '$apply' || phase == '$digest') {
62 if(fn && (typeof(fn) === 'function')) { 65 if(fn && (typeof(fn) === 'function')) {
63 fn(); 66 fn();
64 } 67 }
65 } else { 68 } else {
66 this.$apply(fn); 69 this.$apply(fn);
67 } 70 }
68 }; 71 };
69 72
70 $scope.modalTShirtDesign = function() { 73 $scope.modalTShirtDesign = function() {
71 $('#tshirt-design').modal( 74 $('#tshirt-design').modal(
72 { 75 {
73 backdrop: 'static', 76 backdrop: 'static',
74 keyboard: false 77 keyboard: false
75 } 78 }
76 ); 79 );
77 80
78 }; 81 };
79 $scope.modalClose = function(){ 82 $scope.modalClose = function(){
80 $('#tshirt-design').modal('hide'); 83 $('#tshirt-design').modal('hide');
81 }; 84 };
82 }); 85 });
83 }); 86 });
84 87
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 var _modalWidth = $('.modal-dialog').width(); 7 function setSizeCanvas() {
8 var _windowWidth = window.innerWidth; 8 var _modalWidth = $('.modal-dialog').width();
9 if(_windowWidth > 762) { 9 var _windowWidth = window.innerWidth;
10 var _contentCanvasWidth = _modalWidth*8/12 - 100; 10 if(_windowWidth > 762) {
11 } else { 11 var _contentCanvasWidth = _modalWidth*8/12 - 100;
12 var _contentCanvasWidth = _windowWidth-70; 12 } else {
13 var _contentCanvasWidth = _windowWidth-70;
14 }
15
16 canvas.setWidth(_contentCanvasWidth);
17 canvas.setHeight(650);
13 } 18 }
19 setSizeCanvas();
20 //Window resize event
21 $(window).resize(function () {
22 setSizeCanvas();
23 });
14 24
15 console.log(canvas); 25
16 canvas.setWidth(_contentCanvasWidth);
17 canvas.setHeight(650);
18 canvas._onMouseDown = function () {
19 alert('in mouse up');
20 };
21 //Custom control 26 //Custom control
22 fabric.Object.prototype.transparentCorners = true; 27 fabric.Object.prototype.transparentCorners = true;
23 fabric.Object.prototype.hasRotatingPoint = false; 28 fabric.Object.prototype.hasRotatingPoint = false;
24 // fabric.Object.prototype.selectable = false; 29 // fabric.Object.prototype.selectable = false;
25 30
26 // fabric.Canvas.prototype.__onMouseDown = function (e) { 31 // fabric.Canvas.prototype.__onMouseDown = function (e) {
27 // // return false; 32 // // return false;
28 // }; 33 // };
29 34
30 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};
31 for(key in ctrVisible) { 36 for(key in ctrVisible) {
32 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 37 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
33 } 38 }
34 39
35 fabric.Object.prototype.customiseCornerIcons({ 40 fabric.Object.prototype.customiseCornerIcons({
36 settings: { 41 settings: {
37 borderColor: '#0000ff', 42 borderColor: '#0000ff',
38 cornerSize: 25, 43 cornerSize: 25,
39 cornerShape: 'circle', 44 cornerShape: 'circle',
40 cornerBackgroundColor: '#0171b4', 45 cornerBackgroundColor: '#0171b4',
41 cornerPadding: 6 46 cornerPadding: 6
42 }, 47 },
43 mt: { 48 mt: {
44 icon: 'images/control-icon/ok.png' 49 icon: 'images/control-icon/ok.png'
45 }, 50 },
46 br: { 51 br: {
47 icon: 'images/control-icon/resize.png' 52 icon: 'images/control-icon/resize.png'
48 }, 53 },
49 tr: { 54 tr: {
50 icon: 'images/control-icon/rotate.png' 55 icon: 'images/control-icon/rotate.png'
51 } 56 }
52 }); 57 });
53 58
54 fabric.Canvas.prototype.customiseControls({ 59 fabric.Canvas.prototype.customiseControls({
55 mt: { 60 mt: {
56 cursor: 'pointer', 61 cursor: 'pointer',
57 action: function(e, target) { 62 action: function(e, target) {
58 fabric.Object.prototype.selectable = false; 63 fabric.Object.prototype.selectable = false;
59 canvas.deactivateAll(); 64 canvas.deactivateAll();
65 delete currentObj;
66 $scope.designTextValue = '';
60 $timeout(function(){ 67 $timeout(function(){
61 fabric.Object.prototype.selectable = true; 68 fabric.Object.prototype.selectable = true;
62 },20); 69 },20);
63 } 70 }
64 }, 71 },
65 br: { 72 br: {
66 73
67 }, 74 },
68 tr: { 75 tr: {
69 action: 'rotate', 76 action: 'rotate',
70 cursor: 'crosshair' 77 cursor: 'crosshair'
71 } 78 }
72 }); 79 });
73 80
74 canvas.on('after:render', function() { 81 canvas.on('after:render', function() {
75 // console.log('after render'); 82 // console.log('after render');
76 }); 83 });
77 canvas.on({ 84 canvas.on({
78 'object:added' : onIllustrationAdded, 85 'object:added' : onIllustrationAdded,
79 'object:moving' : onIllustrationMoving, 86 'object:moving' : onIllustrationMoving,
80 'object:scaling' : onIllustrationChange, 87 'object:scaling' : onIllustrationChange,
81 'object:rotating' : onIllustrationChange, 88 'object:rotating' : onIllustrationChange,
82 'object:selected' : onObjectSelected, 89 'object:selected' : onObjectSelected,
83 'object:modified' : onIllustrationModifield, 90 'object:modified' : onIllustrationModifield,
84 'selection:cleared' : onObjectOut, 91 'selection:cleared' : onObjectOut,
85 }); 92 });
86 93
87 var currentObj; 94 var currentObj;
88 var listObj = []; 95 var listObj = [];
89 var stateObj = []; 96 var stateObj = [];
90 var indexCurr = 0; 97 var indexCurr = 0;
91 var indexCurr2 = 0; 98 var indexCurr2 = 0;
92 var actionObj = false; 99 var actionObj = false;
93 var refreshObj = true; 100 var refreshObj = true;
94 var spacingNum = 0; 101 var spacingNum = 0;
95 $scope.itemFont = 0; 102 $scope.itemFont = 0;
96 103
97 104
98 $scope.showDesignTab = function(tab){ 105 $scope.showDesignTab = function(tab){
99 canvas.deactivateAll().renderAll(); 106 canvas.deactivateAll().renderAll();
100 $rootScope.isShowLeftPanel = tab; 107 $rootScope.isShowLeftPanel = tab;
101 switch (tab) { 108 switch (tab) {
102 case 'illustration': { 109 case 'illustration': {
103 $scope.IllustrationList = $illustration.getAll(); 110 $scope.IllustrationList = $illustration.getAll();
104 $rootScope.outputImage = false; 111 $rootScope.outputImage = false;
105 $scope.illustrationSelectConfig = { 112 $scope.illustrationSelectConfig = {
106 allowClear:true 113 allowClear:true
107 }; 114 };
108 $timeout(function(){ 115 $timeout(function(){
109 $('.illstration-item').tooltip({ 116 $('.illstration-item').tooltip({
110 animated: 'fade', 117 animated: 'fade',
111 placement: 'bottom', 118 placement: 'bottom',
112 html: true 119 html: true
113 }); 120 });
114 // console.log('here'); 121 // console.log('here');
115 },1000); 122 },1000);
116 break; 123 break;
117 } 124 }
118 case 'text': { 125 case 'text': {
119 break; 126 break;
120 } 127 }
121 } 128 }
122 }; 129 };
123 $scope.showDesignTab('default'); 130 $scope.showDesignTab('default');
124 131
125 132
126 function onIllustrationAdded(options){ 133 function onIllustrationAdded(options){
127 var object = options.target; 134 var object = options.target;
128 // console.log('object:added'); 135 // console.log('object:added');
129 136
130 if (actionObj === true) { 137 if (actionObj === true) {
131 stateObj = [stateObj[indexCurr2]]; 138 stateObj = [stateObj[indexCurr2]];
132 listObj = [listObj[indexCurr2]]; 139 listObj = [listObj[indexCurr2]];
133 140
134 actionObj = false; 141 actionObj = false;
135 console.log(stateObj); 142 console.log(stateObj);
136 indexCurr = 1; 143 indexCurr = 1;
137 } 144 }
138 object.saveState(); 145 object.saveState();
139 146
140 console.log(object.originalState); 147 console.log(object.originalState);
141 stateObj[indexCurr] = JSON.stringify(object.originalState); 148 stateObj[indexCurr] = JSON.stringify(object.originalState);
142 listObj[indexCurr] = object; 149 listObj[indexCurr] = object;
143 indexCurr++; 150 indexCurr++;
144 indexCurr2 = indexCurr - 1; 151 indexCurr2 = indexCurr - 1;
145 refreshObj = true; 152 refreshObj = true;
146 } 153 }
147 154
148 function onIllustrationModifield(options){ 155 function onIllustrationModifield(options){
149 $('.object-border').hide(); 156 $('.object-border').hide();
150 // 157 //
151 var pointer = canvas.getPointer(options.e); 158 var pointer = canvas.getPointer(options.e);
152 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){
153 canvas.getActiveObject().remove(); 160 canvas.getActiveObject().remove();
154 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 161 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
155 return; 162 return;
156 } 163 }
157 164
158 // 165 //
159 var objOffset = canvas.getActiveObject().getBoundingRect(); 166 var objOffset = canvas.getActiveObject().getBoundingRect();
160 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 167 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
161 //console.log(objOffset,canvas.height,canvas.width); 168 //console.log(objOffset,canvas.height,canvas.width);
162 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){
163 if (confirm('ๅ‰Š้™คใ—ใฆใ‚‚ใ‚ˆใ‚ใ—ใ„ใงใ™ใ‹')){ 170 if (confirm('ๅ‰Š้™คใ—ใฆใ‚‚ใ‚ˆใ‚ใ—ใ„ใงใ™ใ‹')){
164 canvas.getActiveObject().remove(); 171 canvas.getActiveObject().remove();
165 }else{ 172 }else{
166 undoCanvas(); 173 undoCanvas();
167 return; 174 return;
168 } 175 }
169 } 176 }
170 177
171 var object = options.target; 178 var object = options.target;
172 // console.log('object:modified'); 179 // console.log('object:modified');
173 if (actionObj === true) { 180 if (actionObj === true) {
174 stateObj = [stateObj[indexCurr2]]; 181 stateObj = [stateObj[indexCurr2]];
175 listObj = [listObj[indexCurr2]]; 182 listObj = [listObj[indexCurr2]];
176 183
177 actionObj = false; 184 actionObj = false;
178 console.log(stateObj); 185 console.log(stateObj);
179 indexCurr = 1; 186 indexCurr = 1;
180 } 187 }
181 188
182 object.saveState(); 189 object.saveState();
183 190
184 stateObj[indexCurr] = JSON.stringify(object.originalState); 191 stateObj[indexCurr] = JSON.stringify(object.originalState);
185 listObj[indexCurr] = object; 192 listObj[indexCurr] = object;
186 indexCurr++; 193 indexCurr++;
187 indexCurr2 = indexCurr - 1; 194 indexCurr2 = indexCurr - 1;
188 // console.log(stateObj);
189 refreshObj = true; 195 refreshObj = true;
190 } 196 }
191 197
192 function onIllustrationChange(options) { 198 function onIllustrationChange(options) {
193 // options.target.setCoords(); 199 // options.target.setCoords();
194 // canvas.forEachObject(function(obj) { 200 // canvas.forEachObject(function(obj) {
195 // if (obj === options.target) return; 201 // if (obj === options.target) return;
196 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 202 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
197 // }); 203 // });
198 } 204 }
199 205
200 function onIllustrationMoving(options) { 206 function onIllustrationMoving(options) {
201 var object = options.target; 207 var object = options.target;
202 var pointer = canvas.getPointer(options.e); 208 var pointer = canvas.getPointer(options.e);
203 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){
204 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 210 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
205 }else{ 211 }else{
206 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 212 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
207 } 213 }
208 214
209 console.log(object.oCoords,object.originalState); 215 console.log(object.oCoords,object.originalState);
210 object.setCoords(); 216 object.setCoords();
211 var Coords = object.oCoords; 217 var Coords = object.oCoords;
212 var diffX = 55, diffY=50; 218 var diffX = 55, diffY=50;
213 $('#object-border-left').css({'height':object.originalState.height*object.scaleY, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 219 $('#object-border-left').css({'height':object.originalState.height*object.scaleY, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
214 $('#object-border-right').css({'height':object.originalState.height*object.scaleY, top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 220 $('#object-border-right').css({'height':object.originalState.height*object.scaleY, top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
215 $('#object-border-top').css({'width':object.originalState.width*object.scaleX, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 221 $('#object-border-top').css({'width':object.originalState.width*object.scaleX, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
216 $('#object-border-bottom').css({'width':object.originalState.width*object.scaleX, top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 222 $('#object-border-bottom').css({'width':object.originalState.width*object.scaleX, top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
217 $('.object-border').css({ 223 $('.object-border').css({
218 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 224 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
219 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 225 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
220 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 226 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
221 }); 227 });
222 $('.object-border').show(); 228 $('.object-border').show();
223 } 229 }
224 230
225 function onObjectOut() { 231 function onObjectOut() {
226 delete currentObj; 232 delete currentObj;
227 $scope.designTextValue = ''; 233 $scope.designTextValue = '';
228 } 234 }
229 235
230 function undoCanvas() { 236 function undoCanvas() {
231 if (indexCurr <= 0) { 237 if (indexCurr <= 0) {
232 indexCurr = 0; 238 indexCurr = 0;
233 return; 239 return;
234 } 240 }
235 241
236 if (refreshObj === true) { 242 if (refreshObj === true) {
237 indexCurr--; 243 indexCurr--;
238 refreshObj = false; 244 refreshObj = false;
239 } 245 }
240 246
241 console.log('undo'); 247 console.log('undo');
242 248
243 indexCurr2 = indexCurr - 1; 249 indexCurr2 = indexCurr - 1;
244 currentObj = listObj[indexCurr2]; 250 currentObj = listObj[indexCurr2];
245 if (currentObj){ 251 if (currentObj){
246 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 252 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
247 } 253 }
248 254
249 indexCurr--; 255 indexCurr--;
250 currentObj.setCoords(); 256 currentObj.setCoords();
251 canvas.renderAll(); 257 canvas.renderAll();
252 actionObj = true; 258 actionObj = true;
253 } 259 }
254 260
255 function redoCanvas() { 261 function redoCanvas() {
256 actionObj = true; 262 actionObj = true;
257 if (indexCurr >= stateObj.length - 1) { 263 if (indexCurr >= stateObj.length - 1) {
258 return; 264 return;
259 } 265 }
260 266
261 console.log('redo'); 267 console.log('redo');
262 268
263 indexCurr2 = indexCurr + 1; 269 indexCurr2 = indexCurr + 1;
264 currentObj = listObj[indexCurr2]; 270 currentObj = listObj[indexCurr2];
265 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 271 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
266 272
267 indexCurr++; 273 indexCurr++;
268 currentObj.setCoords(); 274 currentObj.setCoords();
269 canvas.renderAll(); 275 canvas.renderAll();
270 } 276 }
271 277
272 $scope.canvasClearAll = function(){ 278 $scope.canvasClearAll = function(){
273 if (confirm('้…็ฝฎใ•ใ‚ŒใŸใ™ในใฆใฎๆ–‡ๅญ—ใ‚„็”ปๅƒใ‚’ๆถˆๅŽปใ—ใพใ™')){ 279 if (confirm('้…็ฝฎใ•ใ‚ŒใŸใ™ในใฆใฎๆ–‡ๅญ—ใ‚„็”ปๅƒใ‚’ๆถˆๅŽปใ—ใพใ™')){
274 canvas.clear(); 280 canvas.clear();
275 } 281 }
276 } 282 }
277 283
278 function onObjectSelected(options) { 284 function onObjectSelected(options) {
279 var currentObj = options.target; 285 var currentObj = options.target;
280 286
281 287
282 $scope.typeObject = currentObj.type; 288 $scope.typeObject = currentObj.type;
283 switch ($scope.typeObject) { 289 switch ($scope.typeObject) {
284 case 'i-text' : 290 case 'i-text' :
285 $rootScope.isShowLeftPanel = 'text'; 291 $rootScope.isShowLeftPanel = 'text';
286 var text = currentObj.text; 292 var text = currentObj.text;
287 if(text != '') { 293 if(text != '') {
288 $scope.designText = text; 294 $scope.designText = text;
289 $scope.designTextValue = text; 295 $scope.designTextValue = text;
290 } 296 }
291 break; 297 break;
292 298
293 case 'path-group' : 299 case 'path-group' :
294 $rootScope.isShowLeftPanel = 'illustration'; 300 $rootScope.isShowLeftPanel = 'illustration';
295 break; 301 break;
296 302
297 case 'image': 303 case 'image':
298 $rootScope.isShowLeftPanel = 'image'; 304 $rootScope.isShowLeftPanel = 'image';
299 break; 305 break;
300 306
301 default : 307 default :
302 $rootScope.isShowLeftPanel = 'default'; 308 $rootScope.isShowLeftPanel = 'default';
303 break; 309 break;
304 } 310 }
305 $rootScope.safeApply(); 311 $rootScope.safeApply();
306 } 312 }
307 313
308 // Illustration process 314 // Illustration process
309 $scope.changeIllustrationCategory = function(currentIllustration){ 315 $scope.changeIllustrationCategory = function(currentIllustration){
310 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 316 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
311 //console.log($scope.currentIllustrationCate); 317 //console.log($scope.currentIllustrationCate);
312 }; 318 };
313 319
314 $scope.insertSvg = function(item){ 320 $scope.insertSvg = function(item){
315 fabric.loadSVGFromURL(item.path, function(objects, options) { 321 fabric.loadSVGFromURL(item.path, function(objects, options) {
316 var shape = fabric.util.groupSVGElements(objects, options); 322 var shape = fabric.util.groupSVGElements(objects, options);
317 //shape.setFill('green'); 323 //shape.setFill('green');
318 canvas.add(shape.scale(0.6)); 324 canvas.add(shape.scale(0.6));
319 shape.set({ left: 150, top: 200 }).setCoords(); 325 shape.set({ left: 150, top: 200 }).setCoords();
320 canvas.renderAll(); 326 canvas.renderAll();
321 canvas.setActiveObject(shape); 327 canvas.setActiveObject(shape);
322 }); 328 });
323 }; 329 };
324 330
325 // color pattern 331 // color pattern
326 $scope.listColorPatterns = [ 332 $scope.listColorPatterns = [
327 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 333 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
328 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 334 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
329 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 335 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
330 '#333333' 336 '#333333'
331 ]; 337 ];
332 338
333 $scope.changeColorPattern = function(color){ 339 $scope.changeColorPattern = function(color){
334 var obj = canvas.getActiveObject(); 340 var obj = canvas.getActiveObject();
335 if (!color){ 341 if (!color){
336 color = 'none'; 342 color = 'none';
337 } 343 }
338 if (obj instanceof fabric.PathGroup) { 344 if (obj instanceof fabric.PathGroup) {
339 obj.getObjects().forEach(function(o) { 345 obj.getObjects().forEach(function(o) {
340 o.fill = color; 346 o.fill = color;
341 }); 347 });
342 } 348 }
343 else { 349 else {
344 obj.fill = color; 350 obj.fill = color;
345 } 351 }
346 canvas.renderAll(); 352 canvas.renderAll();
347 // if (canvas.getActiveObject()){ 353 // if (canvas.getActiveObject()){
348 // canvas.getActiveObject().set("fill", color); 354 // canvas.getActiveObject().set("fill", color);
349 // canvas.renderAll(); 355 // canvas.renderAll();
350 // } 356 // }
351 }; 357 };
352 358
353 //Font 359 //Font
354 $scope.listFontFamily = [ 360 $scope.listFontFamily = [
355 { 361 {
356 name : 'GN Aki iro Sesami Cookies', 362 name : 'GN Aki iro Sesami Cookies',
357 slug : 'gn_aki_iro_sesami_cookies', 363 slug : 'gn_aki_iro_sesami_cookies',
358 }, 364 },
359 { 365 {
360 name : 'GN-Fuyu-iro_Script_Bold', 366 name : 'GN-Fuyu-iro_Script_Bold',
361 slug : 'gn_fuyu_iro_script_bold' 367 slug : 'gn_fuyu_iro_script_bold'
362 }, 368 },
363 { 369 {
364 name : 'GN Killgothic U Kanana', 370 name : 'GN Killgothic U Kanana',
365 slug : 'gn_killgothic_u_kanana' 371 slug : 'gn_killgothic_u_kanana'
366 }, 372 },
367 { 373 {
368 name : 'GN-Kin-iro_Alphabet_Cookies', 374 name : 'GN-Kin-iro_Alphabet_Cookies',
369 slug : 'gn_kin_iro_alphabet_cookies' 375 slug : 'gn_kin_iro_alphabet_cookies'
370 376
371 }, 377 },
372 { 378 {
373 name : 'GN-Kin-iro_SansSerif', 379 name : 'GN-Kin-iro_SansSerif',
374 slug : 'gn_kin_iro_sansserif' 380 slug : 'gn_kin_iro_sansserif'
375 381
376 }, 382 },
377 { 383 {
378 name : 'GN-Koharuiro_Sunray', 384 name : 'GN-Koharuiro_Sunray',
379 slug : 'gn_koharuiro_sunray' 385 slug : 'gn_koharuiro_sunray'
380 386
381 }, 387 },
382 { 388 {
383 name : 'GN-Kyu-pin', 389 name : 'GN-Kyu-pin',
384 slug : 'gn_kyu_pin' 390 slug : 'gn_kyu_pin'
385 }, 391 },
386 { 392 {
387 name : 'gn_natsu_iro_schedule', 393 name : 'gn_natsu_iro_schedule',
388 slug : 'gn_natsu_iro_schedule' 394 slug : 'gn_natsu_iro_schedule'
389 395
390 }, 396 },
391 { 397 {
392 name : 'gnkana_kiniro_sansserif_l', 398 name : 'gnkana_kiniro_sansserif_l',
393 slug : 'gnkana_kiniro_sansserif_l' 399 slug : 'gnkana_kiniro_sansserif_l'
394 400
395 }, 401 },
396 { 402 {
397 name : 'gnkana_kiniro_sansserif_st', 403 name : 'gnkana_kiniro_sansserif_st',
398 slug : 'gnkana_kiniro_sansserif_st' 404 slug : 'gnkana_kiniro_sansserif_st'
399 }, 405 },
400 { 406 {
401 name : 'gnkana_kon_iro_nightfall', 407 name : 'gnkana_kon_iro_nightfall',
402 slug : 'gnkana_kon_iro_nightfall' 408 slug : 'gnkana_kon_iro_nightfall'
403 409
404 }, 410 },
405 { 411 {
406 name : 'ms_gothic', 412 name : 'ms_gothic',
407 slug : 'ms_gothic' 413 slug : 'ms_gothic'
408 414
409 }, 415 },
410 { 416 {
411 name : 'msmincho', 417 name : 'msmincho',
412 slug : 'msmincho' 418 slug : 'msmincho'
413 }, 419 },
414 { 420 {
415 name : 'ufonts_com_ms_pgothic', 421 name : 'ufonts_com_ms_pgothic',
416 slug : 'ufonts_com_ms_pgothic' 422 slug : 'ufonts_com_ms_pgothic'
417 } 423 }
418 ]; 424 ];
419 425
420 // layer process 426 // layer process
421 $scope.layerProcess = function(mode) { 427 $scope.layerProcess = function(mode) {
422 // console.log('layerProcess'); 428 // console.log('layerProcess');
423 var activeObject = canvas.getActiveObject(); 429 var activeObject = canvas.getActiveObject();
424 430
425 console.log(activeObject); 431 console.log(activeObject);
426 432
427 if (activeObject){ 433 if (activeObject){
428 switch (mode) { 434 switch (mode) {
429 case 1: 435 case 1:
430 // canvas.bringForward(activeObject); 436 // canvas.bringForward(activeObject);
431 activeObject.bringForward(); 437 activeObject.bringForward();
432 break; 438 break;
433 case 2: 439 case 2:
434 // canvas.sendBackwards(activeObject); 440 // canvas.sendBackwards(activeObject);
435 activeObject.sendBackwards(); 441 activeObject.sendBackwards();
436 break; 442 break;
437 case 3: 443 case 3:
438 // canvas.bringToFront(activeObject); 444 // canvas.bringToFront(activeObject);
439 activeObject.bringToFront(); 445 activeObject.bringToFront();
440 break; 446 break;
441 case 4: 447 case 4:
442 // canvas.sendToBack(activeObject); 448 // canvas.sendToBack(activeObject);
443 activeObject.sendToBack(); 449 activeObject.sendToBack();
444 break; 450 break;
445 } 451 }
446 canvas.deactivateAll().renderAll(); 452 canvas.deactivateAll().renderAll();
447 } 453 }
448 }; 454 };
449 455
450 $scope.focusInputText = function(text) { 456 $scope.focusInputText = function(text) {
451 currentObj = canvas.getActiveObject(); 457 currentObj = canvas.getActiveObject();
452 if(typeof currentObj == 'undefined' || currentObj == null) { 458 if(typeof currentObj == 'undefined' || currentObj == null) {
453 $scope.iText = new fabric.IText('', { 459 $scope.iText = new fabric.IText('', {
454 left: 150, 460 left: 150,
455 top: 200, 461 top: 200,
456 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 462 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
457 fontWeight: 'normal', 463 fontWeight: 'normal',
458 textAlign: 'center', 464 textAlign: 'center',
459 fontSize: 28, 465 fontSize: 28,
460 fill: 'black' 466 fill: 'black'
461 }); 467 });
462 } else { 468 } else {
463 if(currentObj.type != 'i-text') { 469 if(currentObj.type != 'i-text') {
464 $scope.iText = new fabric.IText('', { 470 $scope.iText = new fabric.IText('', {
465 left: 150, 471 left: 150,
466 top: 200, 472 top: 200,
467 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 473 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
468 fontWeight: 'normal', 474 fontWeight: 'normal',
469 textAlign: 'center', 475 textAlign: 'center',
470 fontSize: 28, 476 fontSize: 28,
471 fill: 'black' 477 fill: 'black'
472 }); 478 });
473 } else{ 479 } else{
474 $scope.iText = currentObj; 480 $scope.iText = currentObj;
475 } 481 }
476 } 482 }
477 }; 483 };
478 484
479 //Design text 485 //Design text
480 $scope.inputText = function(e) { 486 $scope.inputText = function(e) {
481 if(typeof $scope.iText != "undefined") { 487 if(typeof $scope.iText != "undefined") {
482 var iText = $scope.iText; 488 var iText = $scope.iText;
483 iText.text = e; 489 iText.text = e;
484 canvas.add(iText); 490 canvas.add(iText);
485 canvas.renderAll(); 491 canvas.renderAll();
486 canvas.setActiveObject(iText); 492 canvas.setActiveObject(iText);
487 } 493 }
488 }; 494 };
489 $scope.setFontFamily = function(font,index) { 495 $scope.setFontFamily = function(font,index) {
490 $scope.itemFont = index; 496 $scope.itemFont = index;
491 if(canvas.getActiveObject()) { 497 if(canvas.getActiveObject()) {
492 var currentObj = canvas.getActiveObject(); 498 var currentObj = canvas.getActiveObject();
493 if(currentObj.type == 'i-text') { 499 if(currentObj.type == 'i-text') {
494 currentObj.set('fontFamily', font); 500 currentObj.set('fontFamily', font);
495 canvas.renderAll(); 501 canvas.renderAll();
496 canvas.setActiveObject(currentObj); 502 canvas.setActiveObject(currentObj);
497 } 503 }
498 504
499 } 505 }
500 }; 506 };
501 //Set letter spacing text 507 //Set letter spacing text
502 $scope.setLetterSpacingText = function(e) { 508 $scope.setLetterSpacingText = function(e) {
503 if(canvas.getActiveObject()) { 509 if(canvas.getActiveObject()) {
504 var currentObj = canvas.getActiveObject(); 510 var currentObj = canvas.getActiveObject();
505 if(currentObj.type == 'i-text') { 511 if(currentObj.type == 'i-text') {
506 if(e == 'plus') 512 if(e == 'plus')
507 spacingNum = spacingNum + 30; 513 spacingNum = spacingNum + 30;
508 else if (spacingNum >= -30){ 514 else if (spacingNum >= -30){
509 spacingNum = spacingNum - 30; 515 spacingNum = spacingNum - 30;
510 } 516 }
511 currentObj.set('charSpacing', spacingNum); 517 currentObj.set('charSpacing', spacingNum);
512 canvas.renderAll(); 518 canvas.renderAll();
513 canvas.setActiveObject(currentObj); 519 canvas.setActiveObject(currentObj);
514 } 520 }
515 } 521 }
516 }; 522 };
517 523
518 $scope.setLetterSpacingTextDefault = function() { 524 $scope.setLetterSpacingTextDefault = function() {
519 if(canvas.getActiveObject()) { 525 if(canvas.getActiveObject()) {
520 var currentObj = canvas.getActiveObject(); 526 var currentObj = canvas.getActiveObject();
521 if(currentObj.type == 'i-text') { 527 if(currentObj.type == 'i-text') {
522 spacingNum = 0; 528 spacingNum = 0;
523 currentObj.set('charSpacing', spacingNum); 529 currentObj.set('charSpacing', spacingNum);
524 canvas.renderAll(); 530 canvas.renderAll();
525 canvas.setActiveObject(currentObj); 531 canvas.setActiveObject(currentObj);
526 } 532 }
527 } 533 }
528 }; 534 };
529 535
530 536
531 /**** process insert image */ 537 /**** process insert image */
532 if (typeof($window.localStorage.recentImages) != 'undefined'){ 538 if (typeof($window.localStorage.recentImages) != 'undefined'){
533 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 539 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
534 }else{ 540 }else{
535 $scope.recentImages = {}; 541 $scope.recentImages = {};
536 } 542 }
537 543
538 var addToRecentImage = function(name, data){ 544 var addToRecentImage = function(name, data){
539 if (typeof($window.localStorage.recentImages) != 'undefined'){ 545 if (typeof($window.localStorage.recentImages) != 'undefined'){
540 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 546 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
541 }else{ 547 }else{
542 $scope.recentImages = {}; 548 $scope.recentImages = {};
543 } 549 }
544 550
545 if (typeof($scope.recentImages[name]) == 'undefined'){ 551 if (typeof($scope.recentImages[name]) == 'undefined'){
546 var ii=0; 552 var ii=0;
547 var II = 0; 553 var II = 0;
548 for(var item in $scope.recentImages){ 554 for(var item in $scope.recentImages){
549 if (II==0){ 555 if (II==0){
550 II = item; 556 II = item;
551 } 557 }
552 ii++; 558 ii++;
553 } 559 }
554 if (ii>16 && II!=0){ 560 if (ii>16 && II!=0){
555 delete $scope.recentImages[II]; 561 delete $scope.recentImages[II];
556 } 562 }
557 $scope.recentImages[name] = data; 563 $scope.recentImages[name] = data;
558 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 564 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
559 } 565 }
560 } 566 }
561 $scope.chooseImage = function(e){//console.log(e); 567 $scope.chooseImage = function(e){//console.log(e);
562 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 568 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
563 alert('ใ‚ขใƒƒใƒ—ใƒญใƒผใƒ‰ใงใใพใ›ใ‚“ใงใ—ใŸ'); 569 alert('ใ‚ขใƒƒใƒ—ใƒญใƒผใƒ‰ใงใใพใ›ใ‚“ใงใ—ใŸ');
564 return; 570 return;
565 } 571 }
566 var reader = new FileReader(); 572 var reader = new FileReader();
567 reader.onload = function (event) { 573 reader.onload = function (event) {
568 addToRecentImage ($('#imgLoader').val(), event.target.result); 574 addToRecentImage ($('#imgLoader').val(), event.target.result);
569 var imgObj = new Image();//console.log($('#imgLoader').val()); 575 var imgObj = new Image();//console.log($('#imgLoader').val());
570 imgObj.src = event.target.result; 576 imgObj.src = event.target.result;
571 imgObj.onload = function () { 577 imgObj.onload = function () {
572 // start fabricJS stuff 578 // start fabricJS stuff
573 579
574 var image = new fabric.Image(imgObj); 580 var image = new fabric.Image(imgObj);
575 image.set({ 581 image.set({
576 left: 50, 582 left: 50,
577 top: 50 583 top: 50
578 }); 584 });
579 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 585 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
580 image.scaleToWidth(200); 586 image.scaleToWidth(200);
581 canvas.add(image); 587 canvas.add(image);
582 } 588 }
583 } 589 }
584 reader.readAsDataURL(e.target.files[0]); 590 reader.readAsDataURL(e.target.files[0]);
585 } 591 }
586 592
587 $scope.insertRecentImage = function(data){ 593 $scope.insertRecentImage = function(data){
588 var imgObj = new Image(); 594 var imgObj = new Image();
589 imgObj.src = data; 595 imgObj.src = data;
590 imgObj.onload = function () { 596 imgObj.onload = function () {
591 // start fabricJS stuff 597 // start fabricJS stuff
592 598
593 var image = new fabric.Image(imgObj); 599 var image = new fabric.Image(imgObj);
594 image.set({ 600 image.set({
595 left: 50, 601 left: 50,
596 top: 50 602 top: 50
597 }); 603 });
598 image.scaleToWidth(200); 604 image.scaleToWidth(200);
599 canvas.add(image); 605 canvas.add(image);
600 } 606 }
601 } 607 }
602 608
603 //Traslation text 609 //Traslation text
604 $scope.rotateText = function(style) { 610 $scope.rotateText = function(style) {
605 if(canvas.getActiveObject()) { 611 if(canvas.getActiveObject()) {
606 var currentObj = canvas.getActiveObject(); 612 var currentObj = canvas.getActiveObject();
607 if(currentObj.type == 'i-text') { 613 if(currentObj.type == 'i-text') {
608 currentObj.set('rotate', Math.PI / 4); 614 currentObj.set('rotate', Math.PI / 4);
609 canvas.renderAll(); 615 canvas.renderAll();
610 canvas.setActiveObject(currentObj); 616 canvas.setActiveObject(currentObj);
611 } 617 }
612 } 618 }
613 }; 619 };
614 620
615 621
616 /* Process output */ 622 /* Process output */
617 $scope.outputDesign = function(){ 623 $scope.outputDesign = function(){
618 $rootScope.outputImage = canvas.toDataURL('png'); 624 $rootScope.outputImage = canvas.toDataURL('png');
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 } 761 }
762 #object-border-top, #object-border-bottom{ 762 #object-border-top, #object-border-bottom{
763 height: 2px; 763 height: 2px;
764 } 764 }
765 #object-border-right, #object-border-left{ 765 #object-border-right, #object-border-left{
766 width: 2px; 766 width: 2px;
767 } 767 }
768 768
769 769
770 /*FOOTER*/ 770 /*FOOTER*/
771 footer{ 771 footer{
772 background-color: #333333; 772 background-color: #333333;
773 } 773 }
774 footer ul.nav-footer{ 774 footer ul.nav-footer{
775 padding-left: 0; 775 padding-left: 0;
776 list-style: none; 776 list-style: none;
777 } 777 }
778 footer ul.nav-footer li{ 778 footer ul.nav-footer li{
779 float: left; 779 float: left;
780 padding: 3px 10px; 780 padding: 3px 10px;
781 border-right: 1px dotted #ffffff; 781 border-right: 1px dotted #ffffff;
782 782
783 } 783 }
784 footer ul.nav-footer li a{ 784 footer ul.nav-footer li a{
785 color: #ffffff; 785 color: #ffffff;
786 font-size: 11px; 786 font-size: 11px;
787 } 787 }
788 /* Customize container */ 788 /* Customize container */
789 @media (min-width: 768px) { 789 @media (min-width: 768px) {
790 .container { 790 .container {
791 /*max-width: 730px;*/ 791 /*max-width: 730px;*/
792 } 792 }
793 } 793 }
794 794
795 /* Responsive: Portrait tablets and up */ 795 /* Responsive: Portrait tablets and up */
796 @media screen and (min-width: 768px) { 796 @media screen and (min-width: 768px) {
797 /* Remove the padding we set earlier */ 797 /* Remove the padding we set earlier */
798 798
799 } 799 }
800 800
801 @media (min-width: 1024px) { 801 @media (min-width: 1024px) {
802 #tshirt-design .modal-dialog{ 802 #tshirt-design .modal-dialog{
803 min-width: 1000px; 803 min-width: 1000px;
804 width: 1000px; 804 width: 1000px;
805 } 805 }
806 } 806 }
807 807
808 @media (max-width: 1200px) { 808 @media (max-width: 1200px) {
809 #preview-design { 809 #preview-design {
810 left: 155px; 810 left: 155px;
811 } 811 }
812 } 812 }
813 813
814 @media (max-width: 990px) { 814 @media (max-width: 990px) {
815 #preview-design { 815 #preview-design {
816 /*left: 115px;*/ 816 /*left: 115px;*/
817 width: 110px; 817 width: 110px;
818 height: 200px; 818 height: 160px;
819 top: 100px; 819 top: 110px;
820 } 820 }
821 } 821 }
822 822
823 @media (max-width: 762px) { 823 @media (max-width: 762px) {
824 .modal-dialog{ 824 .modal-dialog{
825 /*width: 100%!important;*/ 825 /*width: 100%!important;*/
826 margin: 0 0!important; 826 margin: 0 0!important;
827 } 827 }
828 #tshirt-design header .menu-nav{ 828 #tshirt-design header .menu-nav{
829 overflow-x: scroll!important; 829 overflow-x: scroll!important;
830 -webkit-overflow-scrolling: touch; 830 -webkit-overflow-scrolling: touch;
831 } 831 }
832 832
833 #tshirt-design header ul.nav { 833 #tshirt-design header ul.nav {
834 text-align: justify; 834 text-align: justify;
835 width: 680px; 835 width: 680px;
836 836
837 } 837 }
838 838
839 #tshirt-design header ul.nav li { 839 #tshirt-design header ul.nav li {
840 display: inline-block; /* 6 */ 840 display: inline-block; /* 6 */
841 } 841 }
842 842
843 .tshirt-design-container .design-content .content{ 843 .tshirt-design-container .design-content .content{
844 padding: 14px 14px; 844 padding: 14px 14px;
845 } 845 }
846 .tshirt-design-container .design-content{ 846 .tshirt-design-container .design-content{
847 padding: 0 0; 847 padding: 0 0;
848 } 848 }
849 } 849 }