TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 04cbb68af7c21a6a404358f333e1f47161917250

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

design text basic

Showing 4 changed files with 301 additions and 74 deletions Inline Diff

app/fonts/font_canvas/font-canvas.css
Diff comments   View file @ 04cbb68
1 @font-face { 1 @font-face {
2 font-family: 'gn_aki_iro_sesami_cookies'; 2 font-family: 'gn_aki_iro_sesami_cookies';
3 src: url(GN-Aki-iro_Sesami_Cookies.ttf); 3 src: url(GN-Aki-iro_Sesami_Cookies.ttf);
4 } 4 }
5 @font-face { 5 @font-face {
6 font-family: 'gn_fuyu_iro_script_bold'; 6 font-family: 'gn_fuyu_iro_script_bold';
7 src: url(GN-Fuyu-iro_Script_Bold.ttf); 7 src: url(GN-Fuyu-iro_Script_Bold.ttf);
8 } 8 }
9 @font-face {
10 font-family: 'gn_killgothic_u_kanana';
11 src: url(GN-KillGothic-U-KanaNA.ttf);
12 }
9 13
10 @font-face { 14 @font-face {
11 font-family: 'gn_aki_iro_sesami_cookies'; 15 font-family: 'gn_kin_iro_alphabet_cookies';
12 src: url(GN-Aki-iro_Sesami_Cookies.ttf); 16 src: url(GN-Kin-iro_Alphabet_Cookies.ttf);
13 } 17 }
14 @font-face { 18 @font-face {
15 font-family: 'gn_aki_iro_sesami_cookies'; 19 font-family: 'gn_kin_iro_sansserif';
16 src: url(GN-Aki-iro_Sesami_Cookies.ttf); 20 src: url(GN-Kin-iro_SansSerif.ttf);
17 } 21 }
18 @font-face { 22 @font-face {
19 font-family: 'gn_killgothic_u_kanana'; 23 font-family: 'gn_koharuiro_sunray';
20 src: url(GN-KillGothic-U-KanaNA.ttf); 24 src: url(GN-Koharuiro_Sunray.ttf);
25 }
26 @font-face {
27 font-family: 'gn_kyu_pin';
28 src: url(GN-Kyu-pin.ttf);
29 }
30 @font-face {
31 font-family: 'gn_natsu_iro_schedule';
32 src: url(GN-Natsu-iro-Schedule.ttf);
33 }
34 @font-face {
35 font-family: 'gn_natsuiro_schedule';
36 src: url(GN-Natsuiro_Schedule.ttf);
37 }
38 @font-face {
39 font-family: 'gnkana_kiniro_elegance';
40 src: url(GNKana-Kiniro_Elegance.ttf);
41 }
42 @font-face {
43 font-family: 'gnkana_kiniro_sansserif_l';
44 src: url(GNKana-Kiniro_SansSerif_L.ttf);
45 }
46 @font-face {
47 font-family: 'gnkana_kiniro_sansserif_st';
48 src: url(GNKana-Kiniro_SansSerif_ST.ttf);
49 }
50 @font-face {
51 font-family: 'gnkana_kon_iro_nightfall';
52 src: url(GNKana-Kon-iro_Nightfall.ttf);
53 }
54 @font-face {
55 font-family: 'ms_gothic';
56 src: url(MS-Gothic.ttf);
57 }
58 @font-face {
59 font-family: 'msmincho';
60 src: url(MSMINCHO.TTF);
61 }
62 @font-face {
63 font-family: 'ufonts_com_ms_pgothic';
64 src: url(ufonts.com_ms-pgothic.ttf);
21 } 65 }
22 66
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 04cbb68
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 3
4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { 4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 fabric.Object.prototype.transparentCorners = false; 6 fabric.Object.prototype.transparentCorners = false;
7 7
8 canvas.on('after:render', function() { 8 canvas.on('after:render', function() {
9 }); 9 });
10 canvas.on({ 10 canvas.on({
11 'object:added': onIllustrationAdded, 11 'object:added': onIllustrationAdded,
12 'object:moving': onIllustrationChange, 12 'object:moving': onIllustrationChange,
13 'object:scaling': onIllustrationChange, 13 'object:scaling': onIllustrationChange,
14 'object:rotating': onIllustrationChange, 14 'object:rotating': onIllustrationChange,
15 'object:selected': onIllustrationSelected, 15 'object:selected': onIllustrationSelected,
16 'object:modified': onIllustrationModifield, 16 'object:modified': onIllustrationModifield,
17 'selected:deselected' : onIllustrationOut, 17 'selected:deselected' : onIllustrationOut,
18 //'selected:out' : onIllustrationOut, 18 //'selected:out' : onIllustrationOut,
19 //'mouse:up' : onIllustrationOut, 19 //'mouse:up' : onIllustrationOut,
20 }); 20 });
21 21
22 var currentObj; 22 var currentObj;
23 var listObj = []; 23 var listObj = [];
24 var stateObj = []; 24 var stateObj = [];
25 var indexCurr = 0; 25 var indexCurr = 0;
26 var indexCurr2 = 0; 26 var indexCurr2 = 0;
27 var actionObj = false; 27 var actionObj = false;
28 var refreshObj = true; 28 var refreshObj = true;
29 29
30 function onIllustrationAdded(options){ 30 function onIllustrationAdded(options){
31 var object = options.target; 31 var object = options.target;
32 console.log('object:added'); 32 console.log('object:added');
33 33
34 if (actionObj === true) { 34 if (actionObj === true) {
35 stateObj = [stateObj[indexCurr2]]; 35 stateObj = [stateObj[indexCurr2]];
36 listObj = [listObj[indexCurr2]]; 36 listObj = [listObj[indexCurr2]];
37 37
38 actionObj = false; 38 actionObj = false;
39 console.log(stateObj); 39 console.log(stateObj);
40 indexCurr = 1; 40 indexCurr = 1;
41 } 41 }
42 object.saveState(); 42 object.saveState();
43 43
44 console.log(object.originalState); 44 console.log(object.originalState);
45 stateObj[indexCurr] = JSON.stringify(object.originalState); 45 stateObj[indexCurr] = JSON.stringify(object.originalState);
46 listObj[indexCurr] = object; 46 listObj[indexCurr] = object;
47 indexCurr++; 47 indexCurr++;
48 indexCurr2 = indexCurr - 1; 48 indexCurr2 = indexCurr - 1;
49 refreshObj = true; 49 refreshObj = true;
50 } 50 }
51 51
52 function onIllustrationModifield(options){ 52 function onIllustrationModifield(options){
53 var objOffset = canvas.getActiveObject().getBoundingRect(); 53 var objOffset = canvas.getActiveObject().getBoundingRect();
54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50; 54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
55 //console.log(objOffset,canvas.height,canvas.width); 55 //console.log(objOffset,canvas.height,canvas.width);
56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
57 if (confirm('削除してもよろしいですか')){ 57 if (confirm('削除してもよろしいですか')){
58 canvas.getActiveObject().remove(); 58 canvas.getActiveObject().remove();
59 }else{ 59 }else{
60 undoCanvas(); 60 undoCanvas();
61 return; 61 return;
62 } 62 }
63 } 63 }
64 64
65 var object = options.target; 65 var object = options.target;
66 console.log('object:modified'); 66 console.log('object:modified');
67 if (actionObj === true) { 67 if (actionObj === true) {
68 stateObj = [stateObj[indexCurr2]]; 68 stateObj = [stateObj[indexCurr2]];
69 listObj = [listObj[indexCurr2]]; 69 listObj = [listObj[indexCurr2]];
70 70
71 actionObj = false; 71 actionObj = false;
72 console.log(stateObj); 72 console.log(stateObj);
73 indexCurr = 1; 73 indexCurr = 1;
74 } 74 }
75 75
76 object.saveState(); 76 object.saveState();
77 77
78 stateObj[indexCurr] = JSON.stringify(object.originalState); 78 stateObj[indexCurr] = JSON.stringify(object.originalState);
79 listObj[indexCurr] = object; 79 listObj[indexCurr] = object;
80 indexCurr++; 80 indexCurr++;
81 indexCurr2 = indexCurr - 1; 81 indexCurr2 = indexCurr - 1;
82 console.log(stateObj); 82 console.log(stateObj);
83 refreshObj = true; 83 refreshObj = true;
84 } 84 }
85 85
86 function onIllustrationChange(options) { 86 function onIllustrationChange(options) {
87 // options.target.setCoords(); 87 // options.target.setCoords();
88 // canvas.forEachObject(function(obj) { 88 // canvas.forEachObject(function(obj) {
89 // if (obj === options.target) return; 89 // if (obj === options.target) return;
90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
91 // }); 91 // });
92 92
93 } 93 }
94 94
95 function onIllustrationOut() { 95 function onIllustrationOut() {
96 console.log('out object'); 96 console.log('out object');
97 } 97 }
98 98
99 function undoCanvas() { 99 function undoCanvas() {
100 if (indexCurr <= 0) { 100 if (indexCurr <= 0) {
101 indexCurr = 0; 101 indexCurr = 0;
102 return; 102 return;
103 } 103 }
104 104
105 if (refreshObj === true) { 105 if (refreshObj === true) {
106 indexCurr--; 106 indexCurr--;
107 refreshObj = false; 107 refreshObj = false;
108 } 108 }
109 109
110 console.log('undo'); 110 console.log('undo');
111 111
112 indexCurr2 = indexCurr - 1; 112 indexCurr2 = indexCurr - 1;
113 currentObj = listObj[indexCurr2]; 113 currentObj = listObj[indexCurr2];
114 if (currentObj){ 114 if (currentObj){
115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
116 } 116 }
117 117
118 indexCurr--; 118 indexCurr--;
119 currentObj.setCoords(); 119 currentObj.setCoords();
120 canvas.renderAll(); 120 canvas.renderAll();
121 actionObj = true; 121 actionObj = true;
122 } 122 }
123 123
124 function redoCanvas() { 124 function redoCanvas() {
125 actionObj = true; 125 actionObj = true;
126 if (indexCurr >= stateObj.length - 1) { 126 if (indexCurr >= stateObj.length - 1) {
127 return; 127 return;
128 } 128 }
129 129
130 console.log('redo'); 130 console.log('redo');
131 131
132 indexCurr2 = indexCurr + 1; 132 indexCurr2 = indexCurr + 1;
133 currentObj = listObj[indexCurr2]; 133 currentObj = listObj[indexCurr2];
134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
135 135
136 indexCurr++; 136 indexCurr++;
137 currentObj.setCoords(); 137 currentObj.setCoords();
138 canvas.renderAll(); 138 canvas.renderAll();
139 } 139 }
140 140
141 $scope.currentObject = null; 141 $scope.currentObject = null;
142 function onIllustrationSelected(options) { 142 function onIllustrationSelected(options) {
143 var object = options.target; 143 var object = options.target;
144 $scope.typeObject = object.type; 144 $scope.typeObject = object.type;
145 switch ($scope.typeObject) { 145 switch ($scope.typeObject) {
146 case 'i-text' : 146 case 'i-text' :
147 $('#input-design-text').focus();
148 $rootScope.isShowLeftPanel = 'text'; 147 $rootScope.isShowLeftPanel = 'text';
148 $('#input-design-text').focus(function() {
149
150 });
149 break; 151 break;
150 152
151 case 'path-group' : 153 case 'path-group' :
152 $rootScope.isShowLeftPanel = 'illustration'; 154 $rootScope.isShowLeftPanel = 'illustration';
153 break; 155 break;
154 156
155 default : 157 default :
156 $rootScope.isShowLeftPanel = 'default'; 158 $rootScope.isShowLeftPanel = 'default';
157 break; 159 break;
158 } 160 }
159 $rootScope.safeApply(); 161 $rootScope.safeApply();
160 } 162 }
161 163
162 // Illustration process 164 // Illustration process
163 $scope.changeIllustrationCategory = function(currentIllustration){ 165 $scope.changeIllustrationCategory = function(currentIllustration){
164 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 166 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
165 //console.log($scope.currentIllustrationCate); 167 //console.log($scope.currentIllustrationCate);
166 }; 168 };
167 169
168 $scope.insertSvg = function(item){ 170 $scope.insertSvg = function(item){
169 fabric.loadSVGFromURL(item.path, function(objects, options) { 171 fabric.loadSVGFromURL(item.path, function(objects, options) {
170 var shape = fabric.util.groupSVGElements(objects, options); 172 var shape = fabric.util.groupSVGElements(objects, options);
171 // shape.setFill('green'); 173 // shape.setFill('green');
172 canvas.add(shape.scale(0.6)); 174 canvas.add(shape.scale(0.6));
173 shape.set({ left: 150, top: 200 }).setCoords(); 175 shape.set({ left: 150, top: 200 }).setCoords();
174 canvas.renderAll(); 176 canvas.renderAll();
175 canvas.setActiveObject(shape); 177 canvas.setActiveObject(shape);
176 }); 178 });
177 }; 179 };
178 180
179 // color pattern 181 // color pattern
180 $scope.listColorPatterns = [ 182 $scope.listColorPatterns = [
181 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 183 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
182 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 184 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
183 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 185 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
184 '#333333' 186 '#333333'
185 ]; 187 ];
188 //Font
189 $scope.listFontFamily = [
190 {
191 name : 'GN Aki iro Sesami Cookies',
192 slug : 'gn_aki_iro_sesami_cookies',
193 },
194 {
195 name : 'GN-Fuyu-iro_Script_Bold',
196 slug : 'gn_fuyu_iro_script_bold'
197 },
198 {
199 name : 'GN Killgothic U Kanana',
200 slug : 'gn_killgothic_u_kanana'
201 },
202 {
203 name : 'GN-Kin-iro_Alphabet_Cookies',
204 slug : 'gn_kin_iro_alphabet_cookies'
205
206 },
207 {
208 name : 'GN-Kin-iro_SansSerif',
209 slug : 'gn_kin_iro_sansserif'
210
211 },
212 {
213 name : 'GN-Koharuiro_Sunray',
214 slug : 'gn_koharuiro_sunray'
215
216 },
217 {
218 name : 'GN-Kyu-pin',
219 slug : 'gn_kyu_pin'
220 },
221 {
222 name : 'gn_natsu_iro_schedule',
223 slug : 'gn_natsu_iro_schedule'
224
225 },
226 {
227 name : 'gnkana_kiniro_sansserif_l',
228 slug : 'gnkana_kiniro_sansserif_l'
229
230 },
231 {
232 name : 'gnkana_kiniro_sansserif_st',
233 slug : 'gnkana_kiniro_sansserif_st'
234 },
235 {
236 name : 'gnkana_kon_iro_nightfall',
237 slug : 'gnkana_kon_iro_nightfall'
238
239 },
240 {
241 name : 'ms_gothic',
242 slug : 'ms_gothic'
243
244 },
245 {
246 name : 'msmincho',
247 slug : 'msmincho'
248 },
249 {
250 name : 'ufonts_com_ms_pgothic',
251 slug : 'ufonts_com_ms_pgothic'
252 }
253 ];
186 254
187 $scope.changeColorPattern = function(color){ 255 $scope.changeColorPattern = function(color){
188 if (canvas.getActiveObject()){ 256 if (canvas.getActiveObject()){
189 canvas.getActiveObject().set("fill", color); 257 canvas.getActiveObject().set("fill", color);
190 canvas.renderAll(); 258 canvas.renderAll();
191 } 259 }
192 }; 260 };
193 261
194 // layer process 262 // layer process
195 $scope.layerProcess = function(mode){ 263 $scope.layerProcess = function(mode){
196 var activeObject = canvas.getActiveObject() 264 var activeObject = canvas.getActiveObject()
197 if (activeObject){ 265 if (activeObject){
198 switch (mode) { 266 switch (mode) {
199 case 1: 267 case 1:
200 activeObject.bringForward(); 268 activeObject.bringForward();
201 break; 269 break;
202 case 2: 270 case 2:
203 activeObject.sendBackwards(); 271 activeObject.sendBackwards();
204 break; 272 break;
205 case 3: 273 case 3:
206 activeObject.bringToFront(); 274 activeObject.bringToFront();
207 break; 275 break;
208 case 4: 276 case 4:
209 activeObject.sendToBack(); 277 activeObject.sendToBack();
210 break; 278 break;
211 } 279 }
212 canvas.renderAll(); 280 canvas.renderAll();
213 } 281 }
214 } 282 };
215 283
216 $scope.listFontFamily = [
217 {
218 name : 'GN-Aki-iro_Sesami_Cookies',
219 slug : 'gn_aki_iro_sesami_cookies',
220 },
221 {
222 name : 'Tahoma',
223 slug : 'tahoma',
224 },
225 {
226 name : 'GN-Fuyu-iro_Script_Bold',
227 slug : 'gn_fuyu_iro_script_bold'
228 },
229 {
230 name : 'GN Killgothic U Kanana',
231 slug : 'gn_killgothic_u_kanana'
232 284
233 }
234 ];
235 285
236 $scope.focusInputText = function() { 286 $scope.focusInputText = function() {
237 if($scope.typeObject != 'i-text') 287 if($scope.typeObject != 'i-text')
238 $scope.iText = new fabric.IText('', { 288 $scope.iText = new fabric.IText('', {
239 left: 150, 289 left: 150,
240 top: 200, 290 top: 200,
241 fontFamily: 'Arial', 291 fontFamily: 'Arial',
242 fontWeight: 'normal', 292 fontWeight: 'normal',
243 fontSize: 28, 293 fontSize: 28,
244 fill: 'black' 294 fill: 'black'
245 }); 295 });
246 }; 296 };
247 297
248 //Design text 298 //Design text
249 $scope.inputText = function(e) { 299 $scope.inputText = function(e) {
250 var iText = $scope.iText; 300 var iText = $scope.iText;
251 if(e != '') { 301 if(e != '') {
252 iText.text = e; 302 iText.text = e;
253 iText.set().setCoords(); 303 iText.set().setCoords();
254 canvas.add(iText); 304 canvas.add(iText);
255 canvas.renderAll(); 305 canvas.renderAll();
256 canvas.setActiveObject(iText); 306 canvas.setActiveObject(iText);
257 } 307 }
258 }; 308 };
259 $scope.setFontFamily = function(font) { 309 $scope.setFontFamily = function(font) {
260 if(canvas.getActiveObject()) { 310 if(canvas.getActiveObject()) {
261 var currentObject = canvas.getActiveObject(); 311 var currentObject = canvas.getActiveObject();
262 if(currentObject.type == 'i-text') { 312 if(currentObject.type == 'i-text') {
263 console.log(font);
264
265 currentObject.set('fontFamily', font); 313 currentObject.set('fontFamily', font);
266 currentObject.selectWord();
267
268 canvas.renderAll(); 314 canvas.renderAll();
269 // currentObject.getActiveObject();
270 canvas.setActiveObject(currentObject); 315 canvas.setActiveObject(currentObject);
271 } 316 }
1 /* Space out content a bit */ 1 /* Space out content a bit */
2 @import "../fonts/font.css"; 2 @import "../fonts/font.css";
3 @import "../fonts/font_canvas/font-canvas.css"; 3 @import "../fonts/font_canvas/font-canvas.css";
4 body { 4 body {
5 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 5 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
6 /*font-family: 'gn_aki_iro_sesami_cookies';*/ 6 /*font-family: 'gn_aki_iro_sesami_cookies';*/
7 } 7 }
8 8 /*Scroll bar style*/
9 ::-webkit-scrollbar {
10 -webkit-appearance: none;
11 width: 7px;
12 }
13 ::-webkit-scrollbar-thumb {
14 border-radius: 4px;
15 background-color: rgba(0,0,0,.5);
16 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
17 }
18 /*End scroll bar style*/
9 .padding-right-0{ 19 .padding-right-0{
10 padding-right: 0!important; 20 padding-right: 0!important;
11 } 21 }
12 .padding-left-0{ 22 .padding-left-0{
13 padding-left: 0!important; 23 padding-left: 0!important;
14 } 24 }
15 button.red{ 25 button.red{
16 color: #ffffff; 26 color: #ffffff;
17 background-color: #ff0000; 27 background-color: #ff0000;
18 border: 1px solid #ff0000; 28 border: 1px solid #ff0000;
19 29
20 } 30 }
21 button.white{ 31 button.white{
22 border: 1px solid #ff8080; 32 border: 1px solid #ff8080;
23 color: #ff8080; 33 color: #ff8080;
24 background-color: #ffffff; 34 background-color: #ffffff;
25 } 35 }
26 button.brown{ 36 button.brown{
27 background-color: #666666; 37 background-color: #666666;
28 border: 1px solid #666666; 38 border: 1px solid #666666;
29 color: #ffffff; 39 color: #ffffff;
30 border-radius: 5px; 40 border-radius: 5px;
31 } 41 }
32 button.black{ 42 button.black{
33 border: 1px solid #c9c9c9; 43 border: 1px solid #c9c9c9;
34 background-color: #343434; 44 background-color: #343434;
35 color: #ffffff; 45 color: #ffffff;
36 padding: 1px 6px; 46 padding: 1px 6px;
37 } 47 }
38 #tshirt-container{ 48 #tshirt-container{
39 border-left: 1px solid #dcdcdc; 49 border-left: 1px solid #dcdcdc;
40 border-right: 1px solid #dcdcdc; 50 border-right: 1px solid #dcdcdc;
41 } 51 }
42 /*HEADER*/ 52 /*HEADER*/
43 header{ 53 header{
44 border-bottom: 1px solid #dcdcdc; 54 border-bottom: 1px solid #dcdcdc;
45 } 55 }
46 header .logo{ 56 header .logo{
47 color: #ed1d24; 57 color: #ed1d24;
48 font-size: 30px; 58 font-size: 30px;
49 text-transform: uppercase; 59 text-transform: uppercase;
50 font-weight: bold; 60 font-weight: bold;
51 } 61 }
52 header .logo img{ 62 header .logo img{
53 width: 60px; 63 width: 60px;
54 } 64 }
55 /*NAVIGATION*/ 65 /*NAVIGATION*/
56 nav{ 66 nav{
57 border-bottom: 1px solid #dcdcdc; 67 border-bottom: 1px solid #dcdcdc;
58 padding: 10px 0; 68 padding: 10px 0;
59 } 69 }
60 nav h2{ 70 nav h2{
61 font-size: 27px; 71 font-size: 27px;
62 margin: 0 0; 72 margin: 0 0;
63 } 73 }
64 nav ul{ 74 nav ul{
65 list-style: none; 75 list-style: none;
66 padding-left: 0; 76 padding-left: 0;
67 margin-bottom: 0; 77 margin-bottom: 0;
68 78
69 } 79 }
70 nav ul li{ 80 nav ul li{
71 margin-left: 2px; 81 margin-left: 2px;
72 float: left; 82 float: left;
73 padding: 6px 12px; 83 padding: 6px 12px;
74 background-color: #999999; 84 background-color: #999999;
75 position: relative; 85 position: relative;
76 } 86 }
77 nav ul li i.fa{ 87 nav ul li i.fa{
78 position: absolute; 88 position: absolute;
79 color: #ffffff; 89 color: #ffffff;
80 font-size: 18px; 90 font-size: 18px;
81 right: -4px; 91 right: -4px;
82 top: 50%; 92 top: 50%;
83 transform: translateX(-50%) translateY(-50%); 93 transform: translateX(-50%) translateY(-50%);
84 -webkit-transform: translateX(-50%) translateY(-50%); 94 -webkit-transform: translateX(-50%) translateY(-50%);
85 } 95 }
86 nav ul li a{ 96 nav ul li a{
87 color: #ffffff; 97 color: #ffffff;
88 } 98 }
89 nav ul li:hover a{ 99 nav ul li:hover a{
90 text-decoration: none; 100 text-decoration: none;
91 color: #ffffff; 101 color: #ffffff;
92 } 102 }
93 nav ul li.action{ 103 nav ul li.action{
94 color: #ffffff; 104 color: #ffffff;
95 background-color: #ed1d24; 105 background-color: #ed1d24;
96 } 106 }
97 /*ASIDE*/ 107 /*ASIDE*/
98 aside{ 108 aside{
99 margin: 10px 0; 109 margin: 10px 0;
100 } 110 }
101 111
102 aside .break-down{ 112 aside .break-down{
103 padding: 0 0; 113 padding: 0 0;
104 } 114 }
105 aside .break-down i.fa{ 115 aside .break-down i.fa{
106 font-size: 35px; 116 font-size: 35px;
107 color: #ff0000; 117 color: #ff0000;
108 } 118 }
109 aside .break-line{ 119 aside .break-line{
110 height: 10px; 120 height: 10px;
111 } 121 }
112 aside .break-line hr{ 122 aside .break-line hr{
113 border-top: 1px dotted #cccccc; 123 border-top: 1px dotted #cccccc;
114 } 124 }
115 aside .step{ 125 aside .step{
116 margin: 0 0; 126 margin: 0 0;
117 } 127 }
118 aside .step .title{ 128 aside .step .title{
119 font-size: 15px; 129 font-size: 15px;
120 line-height: 16px; 130 line-height: 16px;
121 font-weight: bold; 131 font-weight: bold;
122 margin-bottom: 3px; 132 margin-bottom: 3px;
123 } 133 }
124 aside .step .title-notice{ 134 aside .step .title-notice{
125 font-size: 13px; 135 font-size: 13px;
126 line-height: 16px; 136 line-height: 16px;
127 margin-bottom: 3px; 137 margin-bottom: 3px;
128 } 138 }
129 aside .step .title-notice .require{ 139 aside .step .title-notice .require{
130 font-size: 10px; 140 font-size: 10px;
131 } 141 }
132 aside .step .step-box{ 142 aside .step .step-box{
133 border: 2px solid #dcdcdc; 143 border: 2px solid #dcdcdc;
134 font-size: 12px; 144 font-size: 12px;
135 145
136 } 146 }
137 /*Step 1*/ 147 /*Step 1*/
138 aside .step .step-box .tshirt-design{ 148 aside .step .step-box .tshirt-design{
139 border: 1px solid #cccccc; 149 border: 1px solid #cccccc;
140 background-color: #f5f5f5; 150 background-color: #f5f5f5;
141 margin: 10px 10px; 151 margin: 10px 10px;
142 } 152 }
143 aside .step .step-box .tshirt-design:hover{ 153 aside .step .step-box .tshirt-design:hover{
144 border: 1px solid #ff0000; 154 border: 1px solid #ff0000;
145 } 155 }
146 aside .step .step-box .tshirt-design button:hover{ 156 aside .step .step-box .tshirt-design button:hover{
147 background-color: #fa7b7b; 157 background-color: #fa7b7b;
148 border: 1px solid #fa7b7b; 158 border: 1px solid #fa7b7b;
149 } 159 }
150 aside .step .step-box .tshirt-design div{ 160 aside .step .step-box .tshirt-design div{
151 float: left; 161 float: left;
152 } 162 }
153 aside .step .step-box .tshirt-design .icon{ 163 aside .step .step-box .tshirt-design .icon{
154 padding: 4px 4px; 164 padding: 4px 4px;
155 border-right: 1px solid #cccccc; 165 border-right: 1px solid #cccccc;
156 166
157 } 167 }
158 aside .step .step-box .tshirt-design .icon img{ 168 aside .step .step-box .tshirt-design .icon img{
159 height: 50px; 169 height: 50px;
160 } 170 }
161 aside .step .step-box .tshirt-design .name{ 171 aside .step .step-box .tshirt-design .name{
162 padding: 10px 10px; 172 padding: 10px 10px;
163 173
164 } 174 }
165 aside .step .step-box .tshirt-design .action{ 175 aside .step .step-box .tshirt-design .action{
166 padding: 10px 10px; 176 padding: 10px 10px;
167 float: right; 177 float: right;
168 178
169 } 179 }
170 aside .step .step-box .tshirt-design .action button{ 180 aside .step .step-box .tshirt-design .action button{
171 padding: 8px 10px; 181 padding: 8px 10px;
172 } 182 }
173 /*Step 2*/ 183 /*Step 2*/
174 aside .step .step-box .tshirt-color{ 184 aside .step .step-box .tshirt-color{
175 padding: 6px 10px; 185 padding: 6px 10px;
176 position: relative; 186 position: relative;
177 } 187 }
178 aside .step .step-box .tshirt-color ul.choice-color{ 188 aside .step .step-box .tshirt-color ul.choice-color{
179 float: left; 189 float: left;
180 list-style: none; 190 list-style: none;
181 padding-left: 0; 191 padding-left: 0;
182 width: 100%; 192 width: 100%;
183 margin-bottom: 3px; 193 margin-bottom: 3px;
184 } 194 }
185 aside .step .step-box .tshirt-color ul.choice-color li{ 195 aside .step .step-box .tshirt-color ul.choice-color li{
186 margin: 0 10px 0 0; 196 margin: 0 10px 0 0;
187 border: 1px solid #cccccc; 197 border: 1px solid #cccccc;
188 padding: 2px 2px; 198 padding: 2px 2px;
189 float: left; 199 float: left;
190 cursor: pointer; 200 cursor: pointer;
191 } 201 }
192 aside .step .step-box .tshirt-color ul.choice-color li.action{ 202 aside .step .step-box .tshirt-color ul.choice-color li.action{
193 border: 1px solid #ff0000; 203 border: 1px solid #ff0000;
194 } 204 }
195 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 205 aside .step .step-box .tshirt-color ul.choice-color li:hover{
196 border: 1px solid #ff0000; 206 border: 1px solid #ff0000;
197 } 207 }
198 aside .step .step-box .tshirt-color ul.choice-color li div{ 208 aside .step .step-box .tshirt-color ul.choice-color li div{
199 height: 30px; 209 height: 30px;
200 width: 30px; 210 width: 30px;
201 } 211 }
202 212
203 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 213 aside .step .step-box .tshirt-color ul.choice-color li.white div{
204 background-color: #ece7e4; 214 background-color: #ece7e4;
205 } 215 }
206 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 216 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
207 background-color: #e7dfd0; 217 background-color: #e7dfd0;
208 } 218 }
209 aside .step .step-box .tshirt-color .color-name{ 219 aside .step .step-box .tshirt-color .color-name{
210 width: 100%; 220 width: 100%;
211 font-size: 10px; 221 font-size: 10px;
212 } 222 }
213 aside .step .step-box .tshirt-color .view-more{ 223 aside .step .step-box .tshirt-color .view-more{
214 position: absolute; 224 position: absolute;
215 bottom: 6px; 225 bottom: 6px;
216 right: 10px; 226 right: 10px;
217 } 227 }
218 /*Step 3*/ 228 /*Step 3*/
219 aside .step .step-box .tshirt-saveorder{ 229 aside .step .step-box .tshirt-saveorder{
220 padding: 10px 10px 6px 10px; 230 padding: 10px 10px 6px 10px;
221 } 231 }
222 aside .step .step-box .tshirt-saveorder .action{ 232 aside .step .step-box .tshirt-saveorder .action{
223 width: 50%; 233 width: 50%;
224 float: left; 234 float: left;
225 } 235 }
226 aside .step .step-box .tshirt-saveorder .action:first-child{ 236 aside .step .step-box .tshirt-saveorder .action:first-child{
227 padding-right: 5px; 237 padding-right: 5px;
228 } 238 }
229 aside .step .step-box .tshirt-saveorder .action:last-child{ 239 aside .step .step-box .tshirt-saveorder .action:last-child{
230 padding-left: 5px; 240 padding-left: 5px;
231 } 241 }
232 aside .step .step-box .tshirt-saveorder .action button{ 242 aside .step .step-box .tshirt-saveorder .action button{
233 padding: 8px 10px; 243 padding: 8px 10px;
234 244
235 } 245 }
236 aside .step .step-box .tshirt-saveorder .action button .text{ 246 aside .step .step-box .tshirt-saveorder .action button .text{
237 float: left; 247 float: left;
238 width: 80%; 248 width: 80%;
239 text-align: center; 249 text-align: center;
240 padding-left: 10px; 250 padding-left: 10px;
241 vertical-align: bottom; 251 vertical-align: bottom;
242 } 252 }
243 aside .step .step-box .tshirt-saveorder .action button .arrow{ 253 aside .step .step-box .tshirt-saveorder .action button .arrow{
244 float: left; 254 float: left;
245 width: 20%; 255 width: 20%;
246 height: 40px; 256 height: 40px;
247 position: relative; 257 position: relative;
248 } 258 }
249 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 259 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
250 position: absolute; 260 position: absolute;
251 top: 50%; 261 top: 50%;
252 right: -6px; 262 right: -6px;
253 transform: translateX(-50%) translateY(-50%); 263 transform: translateX(-50%) translateY(-50%);
254 -webkit-transform: translateX(-50%) translateY(-50%); 264 -webkit-transform: translateX(-50%) translateY(-50%);
255 } 265 }
256 aside .step .step-box .tshirt-saveorder .notice{ 266 aside .step .step-box .tshirt-saveorder .notice{
257 padding: 5px 0 0 0; 267 padding: 5px 0 0 0;
258 } 268 }
259 /*Step 4*/ 269 /*Step 4*/
260 aside .step .title-notice{ 270 aside .step .title-notice{
261 271
262 } 272 }
263 aside .step .step-box .change-design{ 273 aside .step .step-box .change-design{
264 padding: 4px 4px; 274 padding: 4px 4px;
265 } 275 }
266 aside .step .step-box .change-design table{ 276 aside .step .step-box .change-design table{
267 277
268 } 278 }
269 aside .step .step-box .change-design table tr{ 279 aside .step .step-box .change-design table tr{
270 border-bottom: 1px dotted #cccccc; 280 border-bottom: 1px dotted #cccccc;
271 } 281 }
272 aside .step .step-box .change-design table tr:last-child{ 282 aside .step .step-box .change-design table tr:last-child{
273 border-bottom: 0; 283 border-bottom: 0;
274 } 284 }
275 285
276 /*Step 5- finish*/ 286 /*Step 5- finish*/
277 aside .step .finish-design{ 287 aside .step .finish-design{
278 padding: 20px 0; 288 padding: 20px 0;
279 } 289 }
280 aside .step .finish-design button{ 290 aside .step .finish-design button{
281 width: 100%; 291 width: 100%;
282 padding: 8px 10px; 292 padding: 8px 10px;
283 } 293 }
284 294
285 /*DESIGN CONTENT*/ 295 /*DESIGN CONTENT*/
286 #tshirt-content{ 296 #tshirt-content{
287 position: relative; 297 position: relative;
288 } 298 }
289 #tshirt-content .switch-border-design{ 299 #tshirt-content .switch-border-design{
290 position: absolute; 300 position: absolute;
291 top: 5px; 301 top: 5px;
292 right: 10px; 302 right: 10px;
293 color: red; 303 color: red;
294 font-size: 11px; 304 font-size: 11px;
295 } 305 }
296 #tshirt-content .tshirt-image{ 306 #tshirt-content .tshirt-image{
297 padding: 20px 0 0 0; 307 padding: 20px 0 0 0;
298 } 308 }
299 #tshirt-content .tshirt-choice{ 309 #tshirt-content .tshirt-choice{
300 310
301 } 311 }
302 #tshirt-content .tshirt-choice ul{ 312 #tshirt-content .tshirt-choice ul{
303 list-style: none; 313 list-style: none;
304 padding-left: 0; 314 padding-left: 0;
305 display: table; 315 display: table;
306 margin: auto; 316 margin: auto;
307 } 317 }
308 #tshirt-content .tshirt-choice ul li{ 318 #tshirt-content .tshirt-choice ul li{
309 float: left; 319 float: left;
310 margin: 10px 10px; 320 margin: 10px 10px;
311 cursor: pointer; 321 cursor: pointer;
312 } 322 }
313 #tshirt-content .tshirt-choice ul li .image{ 323 #tshirt-content .tshirt-choice ul li .image{
314 border: 1px solid #cccccc; 324 border: 1px solid #cccccc;
315 padding: 3px 3px; 325 padding: 3px 3px;
316 } 326 }
317 #tshirt-content .tshirt-choice ul li.focus{ 327 #tshirt-content .tshirt-choice ul li.focus{
318 328
319 } 329 }
320 #tshirt-content .tshirt-choice ul li.focus .image{ 330 #tshirt-content .tshirt-choice ul li.focus .image{
321 border: 1px solid #ff0000; 331 border: 1px solid #ff0000;
322 } 332 }
323 #tshirt-content .tshirt-choice ul li .image img{ 333 #tshirt-content .tshirt-choice ul li .image img{
324 width: 50px; 334 width: 50px;
325 height: auto; 335 height: auto;
326 } 336 }
327 /*MODAL Design*/ 337 /*MODAL Design*/
328 #tshirt-design{ 338 #tshirt-design{
329 background-color: #666666; 339 background-color: #666666;
330 } 340 }
331 #tshirt-design .modal-dialog{ 341 #tshirt-design .modal-dialog{
332 width: 75%; 342 width: 75%;
333 margin: 0 auto; 343 margin: 0 auto;
334 } 344 }
335 #tshirt-design .modal-dialog .modal-content{ 345 #tshirt-design .modal-dialog .modal-content{
336 background-color: transparent; 346 background-color: transparent;
337 border-radius: 0; 347 border-radius: 0;
338 border: 0; 348 border: 0;
339 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 349 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
340 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 350 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
341 } 351 }
342 #tshirt-design .modal-dialog .modal-content .modal-header{ 352 #tshirt-design .modal-dialog .modal-content .modal-header{
343 padding: 0 0 10px 0; 353 padding: 0 0 10px 0;
344 border-bottom: 0; 354 border-bottom: 0;
345 border-shadow: none!important; 355 border-shadow: none!important;
346 } 356 }
347 #tshirt-design .modal-dialog .modal-content .modal-body{ 357 #tshirt-design .modal-dialog .modal-content .modal-body{
348 background-color: #f5f5f5; 358 background-color: #f5f5f5;
349 padding: 0 0; 359 padding: 0 0;
350 } 360 }
351 #tshirt-design header{ 361 #tshirt-design header{
352 border-bottom: 1px solid #cccccc; 362 border-bottom: 1px solid #cccccc;
353 background-color: #dddddd; 363 background-color: #dddddd;
354 } 364 }
355 #tshirt-design header ul.nav{ 365 #tshirt-design header ul.nav{
356 padding-left: 0; 366 padding-left: 0;
357 list-style: none; 367 list-style: none;
358 } 368 }
359 #tshirt-design header ul.nav li{ 369 #tshirt-design header ul.nav li{
360 float: left; 370 float: left;
361 padding: 8px 26px; 371 padding: 8px 26px;
362 border-right: 1px solid #cccccc; 372 border-right: 1px solid #cccccc;
363 font-size: 14px; 373 font-size: 14px;
364 cursor: pointer; 374 cursor: pointer;
365 } 375 }
366 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 376 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
367 background-color: red; 377 background-color: red;
368 color: #ffffff; 378 color: #ffffff;
369 } 379 }
370 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 380 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
371 color: #ffffff; 381 color: #ffffff;
372 } 382 }
373 #tshirt-design header ul.nav li i.fa{ 383 #tshirt-design header ul.nav li i.fa{
374 color: #fe070f; 384 color: #fe070f;
375 font-size: 20px; 385 font-size: 20px;
376 margin-right: 10px; 386 margin-right: 10px;
377 } 387 }
378 #tshirt-design header .action{ 388 #tshirt-design header .action{
379 389
380 } 390 }
381 #tshirt-design header .action button{ 391 #tshirt-design header .action button{
382 padding: 2px 10px; 392 padding: 2px 10px;
383 margin: 6px 10px; 393 margin: 6px 10px;
384 } 394 }
385 #tshirt-design header .action button:hover{ 395 #tshirt-design header .action button:hover{
386 background-color: red; 396 background-color: red;
387 color: #ffffff; 397 color: #ffffff;
388 } 398 }
389 399
390 /*Aside modal*/ 400 /*Aside modal*/
391 .aside{ 401 .aside{
392 } 402 }
393 403
394 .aside .box-design-option{ 404 .aside .box-design-option{
395 list-style: none; 405 list-style: none;
396 padding-left: 0; 406 padding-left: 0;
397 margin-top: 10px; 407 margin-top: 10px;
398 } 408 }
399 .aside .box-design-option li{ 409 .aside .box-design-option li{
400 410
401 } 411 }
402 .aside .box-design-option li{ 412 .aside .box-design-option li{
403 border: 1px solid #cdcdcd; 413 border: 1px solid #cdcdcd;
404 position: relative; 414 position: relative;
405 /*cursor: pointer;*/ 415 /*cursor: pointer;*/
406 } 416 }
407 .aside .box-design-option li .hover{ 417 .aside .box-design-option li .hover{
408 background-color: #fddad4; 418 background-color: #fddad4;
409 opacity: 0.6; 419 opacity: 0.6;
410 position: absolute; 420 position: absolute;
411 width: 100%; 421 width: 100%;
412 height: 100%; 422 height: 100%;
413 display: none; 423 display: none;
414 } 424 }
415 .aside .box-design-option li:hover .hover{ 425 .aside .box-design-option li:hover .hover{
416 display: block; 426 display: block;
417 } 427 }
418 428
419 .aside .box-design-option li .title{ 429 .aside .box-design-option li .title{
420 background: url("../images/bg1.png") repeat #cdcdcd; 430 background: url("../images/bg1.png") repeat #cdcdcd;
421 padding: 3px 10px; 431 padding: 3px 10px;
422 } 432 }
423 .aside .box-design-option li .title i.fa{ 433 .aside .box-design-option li .title i.fa{
424 color: #000000; 434 color: #000000;
425 } 435 }
426 436
427 .aside .box-design-option li .content{ 437 .aside .box-design-option li .content{
428 438
429 } 439 }
430 .aside .box-design-option li .content i.fa{ 440 .aside .box-design-option li .content i.fa{
431 font-size: 30px; 441 font-size: 30px;
432 color: #fe070f; 442 color: #fe070f;
433 margin: 8px 0; 443 margin: 8px 0;
434 } 444 }
435 .aside .box-design-option li .content .des{ 445 .aside .box-design-option li .content .des{
436 padding: 3px 10px 3px 0; 446 padding: 3px 10px 3px 0;
437 } 447 }
448 .aside .box-design-option li .content .color-patterns {
449 width: 100%;
450 border: #bbb solid 1px;
451 background: #FFF;
452 margin-top: 5px;
453 }
438 454
455 .aside .box-design-option li .content .color-patterns .color-pattern-item{
456 height: 20px;
457 float: left;
458 margin-left: 4px;
459 margin-top: 2px;
460 width: 20px;
461 cursor: pointer;
462 border: 1px solid #ddd;
463 }
464
465 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
466 outline: 1px solid #ed1d24;
467 }
468 .aside .box-design-option li .content .layer-item {
469 text-align: center;
470 border: 1px #ddd solid;
471 background: #FFF;
472 padding: 5px;
473 font-size: 12px;
474 cursor: pointer;
475 }
476
477 .aside .box-design-option li .content .layer-item:hover {
478 background: #ffcccc;
479 }
480
481
482 /*Design Text*/
483 .aside #choice-text{
484
485 }
486 .aside #choice-text .content{
487 padding: 10px 10px;
488 }
489 .aside #choice-text .content ul.font-family-box{
490 list-style: none;
491 margin: 10px 0;
492 padding-left: 0;
493 height: 180px;
494 width: 100%;
495 overflow-y: scroll;
496 border: 1px solid #c0c0c0;
497 }
498
499 .aside #choice-text .content .font-family-box li{
500 cursor: pointer;
501 padding: 4px 8px;
502 border: 0;
503 border-bottom: 1px solid #c0c0c0;
504 border-right: 1px solid #c0c0c0;
505 font-size: 16px;
506 }
507 .aside #choice-text .content .spacing-letter{
508
509 }
510 .aside #choice-text .content .spacing-letter .text-label{
511 font-size: 16px;
512 padding: 4px 0;
513 }
514 .aside #choice-text .content .spacing-letter .box{
515 border: 1px solid #8c8c8c;
516 box-shadow: 0 0 5px #888888;
517 background-color: #f0f0f0;
518 }
519 .aside #choice-text .content .spacing-letter .item{
520 float: left;
521 }
522
523 .aside #choice-text .content .spacing-letter .item i.fa{
524 font-size: 22px;
525 margin: 0 0;
526 color: #000000;
527 }
528 .aside #choice-text .content .spacing-letter .item-text{
529 padding: 6px 20px;
530 font-size: 12px;
531 }
532 .aside #choice-text .content .spacing-letter .item-plus{
533 border-right: 1px solid #8c8c8c;
534 }
535 .aside #choice-text .content .spacing-letter .item-minus{
536 border-left: 1px solid #8c8c8c;
537 }
538 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
539 padding: 5px 6px 1px 6px;
540 cursor: pointer;
541 }
439 /*Design Choice Illustration*/ 542 /*Design Choice Illustration*/
440 .aside #choice-illustration li .content { 543 .aside #choice-illustration li .content {
441 padding: 10px 10px; 544 padding: 10px 10px;
442 } 545 }
443 546
444 .aside #choice-illustration li .content select{ 547 .aside #choice-illustration li .content select{
445 width: 100%; 548 width: 100%;
446 } 549 }
447 550
448 .aside #choice-illustration li .content .illustration-list { 551 .aside #choice-illustration li .content .illustration-list {
449 width: 100%; 552 width: 100%;
450 border: #bbb solid 1px; 553 border: #bbb solid 1px;
451 background: #FFF; 554 background: #FFF;
452 margin-top: 5px; 555 margin-top: 5px;
453 } 556 }
454 557
455 .aside #choice-illustration li .content .illustration-list .illstration-item{ 558 .aside #choice-illustration li .content .illustration-list .illstration-item{
456 height: 60px; 559 height: 60px;
457 overflow: hidden; 560 overflow: hidden;
458 float: left; 561 float: left;
459 margin-left: 6px; 562 margin-left: 6px;
460 margin-top: 5px; 563 margin-top: 5px;
461 margin-bottom: 5px; 564 margin-bottom: 5px;
462 padding: 2px; 565 padding: 2px;
463 background: #e2e2e2; 566 background: #e2e2e2;
464 border: solid 2px #d7d7d7; 567 border: solid 2px #d7d7d7;
465 cursor: pointer; 568 cursor: pointer;
466 } 569 }
467 570
468 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 571 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
469 outline: 2px solid #ed1d24; 572 outline: 2px solid #ed1d24;
470 } 573 }
471 574
472 .aside #choice-illustration li .content .illustration-list .illstration-item img { 575 .aside #choice-illustration li .content .illustration-list .illstration-item img {
473 width: 50px; 576 width: 50px;
474 cursor: pointer; 577 cursor: pointer;
475 } 578 }
476 579
477 .aside #choice-illustration li .content .illustration-list .footer-bar { 580 .aside #choice-illustration li .content .illustration-list .footer-bar {
478 text-align: center; 581 text-align: center;
479 margin-top: 5px; 582 margin-top: 5px;
480 } 583 }
481 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { 584 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
482 margin-right: 5px; 585 margin-right: 5px;
483 cursor: pointer; 586 cursor: pointer;
484 font-size: 9px; 587 font-size: 9px;
485 color: #FFF; 588 color: #FFF;
486 background: #666666; 589 background: #666666;
487 text-transform: uppercase; 590 text-transform: uppercase;
488 padding: 2px 5px; 591 padding: 2px 5px;
489 } 592 }
490 593
491 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { 594 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
492 background: #999999; 595 background: #999999;
493 } 596 }
494 597
495 .aside #choice-illustration li .content .color-patterns {
496 width: 100%;
497 border: #bbb solid 1px;
498 background: #FFF;
499 margin-top: 5px;
500 }
501 598
502 .aside #choice-illustration li .content .color-patterns .color-pattern-item{
503 height: 20px;
504 float: left;
505 margin-left: 4px;
506 margin-top: 2px;
507 width: 20px;
508 cursor: pointer;
509 border: 1px solid #ddd;
510 }
511
512 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
513 outline: 1px solid #ed1d24;
514 }
515
516 .aside #choice-illustration li .content .layer-item {
517 text-align: center;
518 border: 1px #ddd solid;
519 background: #FFF;
520 padding: 5px;
521 font-size: 12px;
522 cursor: pointer;
523 }
524
525 .aside #choice-illustration li .content .layer-item:hover {
526 background: #ffcccc;
527 }
528 599
529 /*Design content*/ 600 /*Design content*/
530 .tshirt-design-container{ 601 .tshirt-design-container{
531 position: relative; 602 position: relative;
532 } 603 }
533 .tshirt-design-container .design-content{ 604 .tshirt-design-container .design-content{
534 padding: 10px 30px 10px 15px; 605 padding: 10px 30px 10px 15px;
535 } 606 }
536 .tshirt-design-container .design-content .content{ 607 .tshirt-design-container .design-content .content{
537 width: 100%; 608 width: 100%;
538 min-height: 650px; 609 min-height: 650px;
539 background-color: #f0efea; 610 background-color: #f0efea;
540 padding: 40px 40px; 611 padding: 40px 40px;
541 height: 100%; 612 height: 100%;
542 } 613 }
543 .tshirt-design-container .design-content .content .selection-design{ 614 .tshirt-design-container .design-content .content .selection-design{
544 border: 1px solid #ff0000; 615 border: 1px solid #ff0000;
545 width: 100%; 616 width: 100%;
546 height: 620px; 617 height: 620px;
547 } 618 }
548 .tshirt-design-container .agree-design{ 619 .tshirt-design-container .agree-design{
549 position: absolute; 620 position: absolute;
550 right: -16px; 621 right: -16px;
551 top: 40%; 622 top: 40%;
552 } 623 }
553 .tshirt-design-container .trash-design{ 624 .tshirt-design-container .trash-design{
554 position: absolute; 625 position: absolute;
555 right: 5px; 626 right: 5px;
556 bottom: 0; 627 bottom: 0;
557 } 628 }
558 629
app/views/design_part/text.html
Diff comments   View file @ 04cbb68
1 <li> 1 <li>
2 <div class="title"> 2 <div class="title">
3 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 3 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
4 Text 4 文字入力
5 </div> 5 </div>
6 <div class="content clearfix"> 6 <div class="content clearfix">
7 <div> 7 <div>
8 <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text"> 8 <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
9 </div> 9 </div>
10 <div> 10 <div>
11 <ul> 11 <ul class="font-family-box">
12 <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li> 12 <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>
13 </ul> 13 </ul>
14 </div> 14 </div>
15 <div> 15 <div>
16 <div></div> 16 <div>文字を変形する</div>
17 </div> 17 </div>
18 <div> 18 <div class="clearfix spacing-letter ">
19 <label>Letter Spacing</label> 19 <div class="pull-left text-label">
20 <div class="group"> 20 文字間隔 :
21 <i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i>
22 </div> 21 </div>
22 <div class="pull-right">
23 <div class="box clearfix">
24 <div class="item item-plus" ng-click="setLetterSpacingText('plus')">
25 <i class="fa fa-plus-square-o" aria-hidden="true"></i>
26 </div>
27 <div class="item item-text">
28 リセット
29 </div>
30 <div class="item item-minus" ng-click="setLetterSpacingText('minus')">
31 <i class="fa fa-minus-square-o" aria-hidden="true"></i>
32 </div>
33 </div>
34 </div>
35 </div>
36 </div>
37 </li>
38 <li>
39 <div class="title">
40 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
41 カラー変更
42 <!--<div class="pull-right">元の色に戻す</div>-->
43 </div>
44 <div class="content clearfix">
45 <div class="color-patterns">
46 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
47 </div>
48 <div class="clearfix"></div>
49 </div>
50 </div>
51 </li>
52
53 <li>
54 <div class="title">
55 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
56 重ね順変更
57 </div>
58 <div class="content clearfix">
59 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
60 <img src="images/layer-icon-1.png"/>
61 <div>前面へ</div>
62 </div>
63 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
64 <img src="images/layer-icon-2.png"/>
65 <div>背面へ</div>
66 </div>
67 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
68 <img src="images/layer-icon-3.png"/>
69 <div>最前面へ</div>
70 </div>
71 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
72 <img src="images/layer-icon-4.png"/>
73 <div>最前面へ</div>
23 </div> 74 </div>
24 </div> 75 </div>
25 </li> 76 </li>