Commit 0136530e3c6af7db3441f90b2946d319da581c73
1 parent
21f9ba3164
Exists in
master
and in
1 other branch
Commit code
Showing 5 changed files with 57 additions and 33 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, $routeParams) { | 3 | app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) { |
| 4 | //Define and init var | 4 | //Define and init var |
| 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 | var currentTShirtKey = 0; | 11 | var currentTShirtKey = 0; |
| 12 | var placeTShirt; | 12 | var placeTShirtKey = ''; |
| 13 | var tShirtColorFirstKey = 0; | 13 | var tShirtColorFirstKey = 0; |
| 14 | $scope.tShirtChoiceBackFrontKey = 'front'; | 14 | $scope.tShirtChoiceBackFrontKey = 'front'; |
| 15 | $scope.tShirtColorKey = tShirtColorFirstKey; | 15 | $scope.tShirtColorKey = tShirtColorFirstKey; |
| 16 | 16 | ||
| 17 | /** | 17 | /** |
| 18 | * Get param route | 18 | * Get param route |
| 19 | * @type {any} | 19 | * @type {any} |
| 20 | * @private | 20 | * @private |
| 21 | */ | 21 | */ |
| 22 | var _routeParams = $routeParams; | 22 | var _routeParams = $routeParams; |
| 23 | if(typeof _routeParams.tShirt != 'undefined') | 23 | if(typeof _routeParams.tShirt != 'undefined') |
| 24 | currentTShirtKey = _routeParams.tShirt - 1; | 24 | currentTShirtKey = _routeParams.tShirt - 1; |
| 25 | if(typeof _routeParams.place != 'undefined') | 25 | if(typeof _routeParams.place != 'undefined') |
| 26 | placeTShirt = _routeParams.place; | 26 | placeTShirtKey = _routeParams.place; |
| 27 | console.log(placeTShirtKey); | ||
| 27 | 28 | ||
| 28 | 29 | ||
| 29 | /** | 30 | /** |
| 30 | * Get all info TShirt | 31 | * Get all info TShirt |
| 31 | * @param: id | 32 | * @param: id |
| 32 | * @return: object | 33 | * @return: object |
| 33 | */ | 34 | */ |
| 35 | $scope.placeTshirt = $t_shirt.getTShirtPlace(currentTShirtKey, placeTShirtKey); | ||
| 36 | console.log($scope.placeTshirt); | ||
| 34 | $scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey); | 37 | $scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey); |
| 35 | $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; | 38 | $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; |
| 36 | $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; | 39 | $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; |
| 37 | $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; | 40 | $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; |
| 38 | $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; | 41 | $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; |
| 39 | $scope.tShirtImg = $scope.tShirtImgFront; | 42 | $scope.tShirtImg = $scope.tShirtImgFront; |
| 40 | 43 | ||
| 41 | /** | 44 | /** |
| 42 | * Set preview size and position | 45 | * Set preview size and position |
| 43 | */ | 46 | */ |
| 44 | function setSizePreViewDesign() { | 47 | function setSizePreViewDesign() { |
| 45 | var _widthPreviewDesign = $('#preview-design').width(); | 48 | var _widthPreviewDesign = $('#preview-design').width(); |
| 46 | var _widthTShirtImage = $('.tshirt-image').width(); | 49 | var _widthTShirtImage = $('.tshirt-image').width(); |
| 47 | var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2); | 50 | var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2); |
| 48 | $('#preview-design').css({left: leftReviewDesign}); | 51 | $('#preview-design').css({left: leftReviewDesign}); |
| 49 | } | 52 | } |
| 50 | setSizePreViewDesign(); | 53 | setSizePreViewDesign(); |
| 51 | $(window).resize(function () { | 54 | $(window).resize(function () { |
| 52 | setSizePreViewDesign(); | 55 | setSizePreViewDesign(); |
| 53 | }); | 56 | }); |
| 54 | /** | 57 | /** |
| 55 | * Choice color t-shirt | 58 | * Choice color t-shirt |
| 56 | * @param key | 59 | * @param key |
| 57 | */ | 60 | */ |
| 58 | $scope.choiceTShirtColor = function(key) { | 61 | $scope.choiceTShirtColor = function(key) { |
| 59 | $scope.tShirtColorKey = key; | 62 | $scope.tShirtColorKey = key; |
| 60 | var tShirtColor = $scope.tShirtColor[key]; | 63 | var tShirtColor = $scope.tShirtColor[key]; |
| 61 | $rootScope.tShirtColorCode = tShirtColor.code; | 64 | $rootScope.tShirtColorCode = tShirtColor.code; |
| 62 | $scope.tShirtColorName = tShirtColor.name; | 65 | $scope.tShirtColorName = tShirtColor.name; |
| 63 | $scope.tShirtImgFront = tShirtColor.img.front; | 66 | $scope.tShirtImgFront = tShirtColor.img.front; |
| 64 | $scope.tShirtImgBack = tShirtColor.img.back; | 67 | $scope.tShirtImgBack = tShirtColor.img.back; |
| 65 | if($scope.tShirtChoiceBackFrontKey == 'front') { | 68 | if($scope.tShirtChoiceBackFrontKey == 'front') { |
| 66 | $scope.tShirtImg = $scope.tShirtImgFront; | 69 | $scope.tShirtImg = $scope.tShirtImgFront; |
| 67 | } else { | 70 | } else { |
| 68 | $scope.tShirtImg = $scope.tShirtImgBack; | 71 | $scope.tShirtImg = $scope.tShirtImgBack; |
| 69 | } | 72 | } |
| 70 | }; | 73 | }; |
| 71 | /** | 74 | /** |
| 72 | * Choice back or front t-shirt | 75 | * Choice back or front t-shirt |
| 73 | * @param choice | 76 | * @param choice |
| 74 | */ | 77 | */ |
| 75 | $scope.choiceTShirtBackFront = function(choice) { | 78 | $scope.choiceTShirtBackFront = function(choice) { |
| 76 | if(choice == 'front') { | 79 | if(choice == 'front') { |
| 77 | $scope.tShirtImg = $scope.tShirtImgFront; | 80 | $scope.tShirtImg = $scope.tShirtImgFront; |
| 78 | } else { | 81 | } else { |
| 79 | $scope.tShirtImg = $scope.tShirtImgBack; | 82 | $scope.tShirtImg = $scope.tShirtImgBack; |
| 80 | } | 83 | } |
| 81 | $scope.tShirtChoiceBackFrontKey = choice; | 84 | $scope.tShirtChoiceBackFrontKey = choice; |
| 82 | }; | 85 | }; |
| 83 | 86 | ||
| 84 | //safeApply | 87 | //safeApply |
| 85 | $rootScope.safeApply = function(fn) { | 88 | $rootScope.safeApply = function(fn) { |
| 86 | var phase = this.$root.$$phase; | 89 | var phase = this.$root.$$phase; |
| 87 | if(phase == '$apply' || phase == '$digest') { | 90 | if(phase == '$apply' || phase == '$digest') { |
| 88 | if(fn && (typeof(fn) === 'function')) { | 91 | if(fn && (typeof(fn) === 'function')) { |
| 89 | fn(); | 92 | fn(); |
| 90 | } | 93 | } |
| 91 | } else { | 94 | } else { |
| 92 | this.$apply(fn); | 95 | this.$apply(fn); |
| 93 | } | 96 | } |
| 94 | }; | 97 | }; |
| 95 | /** | 98 | /** |
| 96 | * Open modal design | 99 | * Open modal design |
| 97 | */ | 100 | */ |
| 98 | $scope.modalTShirtDesign = function() { | 101 | $scope.modalTShirtDesign = function() { |
| 99 | $('#tshirt-design').modal( | 102 | $('#tshirt-design').modal( |
| 100 | { | 103 | { |
| 101 | backdrop: 'static', | 104 | backdrop: 'static', |
| 102 | keyboard: false | 105 | keyboard: false |
| 103 | } | 106 | } |
| 104 | ); | 107 | ); |
| 105 | 108 | ||
| 106 | }; | 109 | }; |
| 107 | /** | 110 | /** |
| 108 | * Close modal design | 111 | * Close modal design |
| 109 | */ | 112 | */ |
| 110 | $scope.modalClose = function(){ | 113 | $scope.modalClose = function(){ |
| 111 | $('#tshirt-design').modal('hide'); | 114 | $('#tshirt-design').modal('hide'); |
| 112 | }; | 115 | }; |
| 113 | }); | 116 | }); |
| 114 | }); | 117 | }); |
| 115 | 118 |
app/scripts/services/tshirt.js
| 1 | define(['app'], function (app) { | 1 | define(['app'], function (app) { |
| 2 | 'use strict'; | 2 | 'use strict'; |
| 3 | 3 | ||
| 4 | app.factory('$t_shirt', function ($http, $rootScope) { | 4 | app.factory('$t_shirt', function ($http, $rootScope) { |
| 5 | var DATA = [ | 5 | var DATA = [ |
| 6 | { | 6 | { |
| 7 | info: { | 7 | info: { |
| 8 | name: 'T-Shirt 1', | 8 | name: 'T-Shirt 1', |
| 9 | description: '', | 9 | description: '', |
| 10 | price: '', | 10 | price: '', |
| 11 | gender: '', | 11 | gender: '', |
| 12 | image: '' | 12 | image: '' |
| 13 | }, | 13 | }, |
| 14 | place_design: { | 14 | place_design: { |
| 15 | 'place_1' : { | 15 | place_1 : { |
| 16 | 'face' : 'front', | 16 | 'face' : 'front', |
| 17 | 'place' : 't_shirt_p_1' | 17 | 'place' : 't_shirt_p_1' |
| 18 | }, | 18 | }, |
| 19 | 'place_2' : { | 19 | place_2 : { |
| 20 | 'face' : 'front', | 20 | 'face' : 'back', |
| 21 | 'place' : 't_shirt_p_2' | 21 | 'place' : 't_shirt_p_2' |
| 22 | }, | 22 | }, |
| 23 | 'place_3' : { | 23 | place_3 : { |
| 24 | 'face' : 'front', | 24 | 'face' : 'front', |
| 25 | 'place' : 't_shirt_p_3' | 25 | 'place' : 't_shirt_p_3' |
| 26 | } | 26 | } |
| 27 | }, | 27 | }, |
| 28 | color: [ | 28 | color: [ |
| 29 | { | 29 | { |
| 30 | name: 'color: 2E GRAY', | 30 | name: 'color: 2E GRAY', |
| 31 | code: '#d0d0cd', | 31 | code: '#d0d0cd', |
| 32 | img: { | 32 | img: { |
| 33 | front: 'images/t-shirt/1/gray/front.png', | 33 | front: 'images/t-shirt/1/gray/front.png', |
| 34 | back: 'images/t-shirt/1/gray/back.png' | 34 | back: 'images/t-shirt/1/gray/back.png' |
| 35 | }, | 35 | }, |
| 36 | }, | 36 | }, |
| 37 | { | 37 | { |
| 38 | name: 'color: 00 BLACK', | 38 | name: 'color: 00 BLACK', |
| 39 | code: '#23282e', | 39 | code: '#23282e', |
| 40 | img: { | 40 | img: { |
| 41 | front: 'images/t-shirt/1/black/front.png', | 41 | front: 'images/t-shirt/1/black/front.png', |
| 42 | back: 'images/t-shirt/1/black/back.png' | 42 | back: 'images/t-shirt/1/black/back.png' |
| 43 | }, | 43 | }, |
| 44 | }, | 44 | }, |
| 45 | { | 45 | { |
| 46 | name: 'color: 3B ORANGE', | 46 | name: 'color: 3B ORANGE', |
| 47 | code: '#e2583b', | 47 | code: '#e2583b', |
| 48 | img: { | 48 | img: { |
| 49 | front: 'images/t-shirt/1/orange/front.png', | 49 | front: 'images/t-shirt/1/orange/front.png', |
| 50 | back: 'images/t-shirt/1/orange/back.png' | 50 | back: 'images/t-shirt/1/orange/back.png' |
| 51 | }, | 51 | }, |
| 52 | } | 52 | } |
| 53 | ] | 53 | ] |
| 54 | }, | 54 | }, |
| 55 | { | 55 | { |
| 56 | info: { | 56 | info: { |
| 57 | name: 'T-Shirt 2', | 57 | name: 'T-Shirt 2', |
| 58 | description: '', | 58 | description: '', |
| 59 | price: '', | 59 | price: '', |
| 60 | gender: '', | 60 | gender: '', |
| 61 | image: '' | 61 | image: '' |
| 62 | }, | 62 | }, |
| 63 | place_design: {}, | 63 | place_design: { |
| 64 | place_1 : { | ||
| 65 | 'face' : 'front', | ||
| 66 | 'place' : 't_shirt_p_1' | ||
| 67 | }, | ||
| 68 | place_2 : { | ||
| 69 | 'face' : 'front', | ||
| 70 | 'place' : 't_shirt_p_2' | ||
| 71 | } | ||
| 72 | }, | ||
| 64 | color: [ | 73 | color: [ |
| 65 | { | 74 | { |
| 66 | name: 'color:03 GRAY', | 75 | name: 'color:03 GRAY', |
| 67 | code: '#b2b4b2', | 76 | code: '#b2b4b2', |
| 68 | img: { | 77 | img: { |
| 69 | front: 'images/t-shirt/2/gray/front.png', | 78 | front: 'images/t-shirt/2/gray/front.png', |
| 70 | back: 'images/t-shirt/2/gray/back.png' | 79 | back: 'images/t-shirt/2/gray/back.png' |
| 71 | }, | 80 | }, |
| 72 | }, | 81 | }, |
| 73 | { | 82 | { |
| 74 | name: 'color:08 DARK GRAY', | 83 | name: 'color:08 DARK GRAY', |
| 75 | code: '#37383d', | 84 | code: '#37383d', |
| 76 | img: { | 85 | img: { |
| 77 | front: 'images/t-shirt/2/darkgray/front.png', | 86 | front: 'images/t-shirt/2/darkgray/front.png', |
| 78 | back: 'images/t-shirt/2/darkgray/back.png' | 87 | back: 'images/t-shirt/2/darkgray/back.png' |
| 79 | }, | 88 | }, |
| 80 | }, | 89 | }, |
| 81 | { | 90 | { |
| 82 | name: 'color:09 BLACK', | 91 | name: 'color:09 BLACK', |
| 83 | code: '#292929', | 92 | code: '#292929', |
| 84 | img: { | 93 | img: { |
| 85 | front: 'images/t-shirt/2/black/front.png', | 94 | front: 'images/t-shirt/2/black/front.png', |
| 86 | back: 'images/t-shirt/2/black/back.png' | 95 | back: 'images/t-shirt/2/black/back.png' |
| 87 | }, | 96 | }, |
| 88 | }, | 97 | }, |
| 89 | { | 98 | { |
| 90 | name: 'color:12 PINK', | 99 | name: 'color:12 PINK', |
| 91 | code: '#ca6965', | 100 | code: '#ca6965', |
| 92 | img: { | 101 | img: { |
| 93 | front: 'images/t-shirt/2/pink/front.png', | 102 | front: 'images/t-shirt/2/pink/front.png', |
| 94 | back: 'images/t-shirt/2/pink/back.png' | 103 | back: 'images/t-shirt/2/pink/back.png' |
| 95 | }, | 104 | }, |
| 96 | }, | 105 | }, |
| 97 | { | 106 | { |
| 98 | name: 'color:18 WINE', | 107 | name: 'color:18 WINE', |
| 99 | code: '#661e2e', | 108 | code: '#661e2e', |
| 100 | img: { | 109 | img: { |
| 101 | front: 'images/t-shirt/2/wine/front.png', | 110 | front: 'images/t-shirt/2/wine/front.png', |
| 102 | back: 'images/t-shirt/2/wine/back.png' | 111 | back: 'images/t-shirt/2/wine/back.png' |
| 103 | }, | 112 | }, |
| 104 | }, | 113 | }, |
| 105 | { | 114 | { |
| 106 | name: 'color:26 ORANGE', | 115 | name: 'color:26 ORANGE', |
| 107 | code: '#bf6037', | 116 | code: '#bf6037', |
| 108 | img: { | 117 | img: { |
| 109 | front: 'images/t-shirt/2/orange/front.png', | 118 | front: 'images/t-shirt/2/orange/front.png', |
| 110 | back: 'images/t-shirt/2/orange/back.png' | 119 | back: 'images/t-shirt/2/orange/back.png' |
| 111 | }, | 120 | }, |
| 112 | }, | 121 | }, |
| 113 | { | 122 | { |
| 114 | name: 'color:57 OLIVE', | 123 | name: 'color:57 OLIVE', |
| 115 | code: '#4c442e', | 124 | code: '#4c442e', |
| 116 | img: { | 125 | img: { |
| 117 | front: 'images/t-shirt/2/olive/front.png', | 126 | front: 'images/t-shirt/2/olive/front.png', |
| 118 | back: 'images/t-shirt/2/olive/back.png' | 127 | back: 'images/t-shirt/2/olive/back.png' |
| 119 | }, | 128 | }, |
| 120 | }, | 129 | }, |
| 121 | { | 130 | { |
| 122 | name: 'color:58 DARK GREEN', | 131 | name: 'color:58 DARK GREEN', |
| 123 | code: '#204344', | 132 | code: '#204344', |
| 124 | img: { | 133 | img: { |
| 125 | front: 'images/t-shirt/2/darkgreen/front.png', | 134 | front: 'images/t-shirt/2/darkgreen/front.png', |
| 126 | back: 'images/t-shirt/2/darkgreen/back.png' | 135 | back: 'images/t-shirt/2/darkgreen/back.png' |
| 127 | }, | 136 | }, |
| 128 | }, | 137 | }, |
| 129 | { | 138 | { |
| 130 | name: 'color:69 NAVY', | 139 | name: 'color:69 NAVY', |
| 131 | code: '#2a2d3c', | 140 | code: '#2a2d3c', |
| 132 | img: { | 141 | img: { |
| 133 | front: 'images/t-shirt/2/navi/front.png', | 142 | front: 'images/t-shirt/2/navi/front.png', |
| 134 | back: 'images/t-shirt/2/navi/back.png' | 143 | back: 'images/t-shirt/2/navi/back.png' |
| 135 | }, | 144 | }, |
| 136 | } | 145 | } |
| 137 | ] | 146 | ] |
| 138 | } | 147 | } |
| 139 | ]; | 148 | ]; |
| 140 | 149 | ||
| 141 | return { | 150 | return { |
| 142 | getTShirtColor : function(key) { | 151 | getTShirtColor : function(key) { |
| 143 | if (typeof DATA[key] == 'undefined'){ | 152 | if (typeof DATA[key] == 'undefined'){ |
| 144 | return []; | 153 | return []; |
| 145 | } | 154 | } |
| 146 | return DATA[key]['color']; | 155 | return DATA[key]['color']; |
| 147 | }, | 156 | }, |
| 148 | getTShirtPlace : function(key, place) { | 157 | getTShirtPlace : function(key, place) { |
| 149 | if(typeof DATA[key].place_design.place == 'undefined' || typeof DATA[key].place_design.place == 'null') | 158 | if(typeof DATA[key].place_design[place] == 'undefined' || typeof DATA[key].place_design[place] == 'null') |
| 150 | return []; | 159 | return []; |
| 151 | 160 | ||
| 152 | return DATA[key].place_design.place; | 161 | return DATA[key].place_design[place]; |
| 153 | }, | 162 | }, |
| 154 | 163 | ||
| 155 | getAll: function(){ | 164 | getAll: function(){ |
| 156 | return DATA; | 165 | return DATA; |
| 157 | }, | 166 | }, |
| 158 | getList: function(category){ | 167 | getList: function(category){ |
| 159 | if (typeof DATA[category] == 'undefined'){ | 168 | if (typeof DATA[category] == 'undefined'){ |
| 160 | return []; | 169 | return []; |
| 161 | } | 170 | } |
| 162 | return DATA[category]; | 171 | return DATA[category]; |
| 163 | } | 172 | } |
| 164 | }; | 173 | }; |
| 165 | }); | 174 | }); |
| 166 | }); | 175 | }); |
| 167 | 176 |
app/styles/main.css
| 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 | @import "placedesign.css"; | ||
| 4 | html{ | 5 | html{ |
| 5 | height:100%; | 6 | height:100%; |
| 6 | width:100%; | 7 | width:100%; |
| 7 | } | 8 | } |
| 8 | body { | 9 | body { |
| 9 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; | 10 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; |
| 10 | height:100%; | 11 | height:100%; |
| 11 | width:100%; | 12 | width:100%; |
| 12 | } | 13 | } |
| 13 | /*Scroll bar style*/ | 14 | /*Scroll bar style*/ |
| 14 | ::-webkit-scrollbar { | 15 | ::-webkit-scrollbar { |
| 15 | -webkit-appearance: none; | 16 | -webkit-appearance: none; |
| 16 | width: 7px; | 17 | width: 7px; |
| 17 | } | 18 | } |
| 18 | ::-webkit-scrollbar-track { | 19 | ::-webkit-scrollbar-track { |
| 19 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | 20 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); |
| 20 | } | 21 | } |
| 21 | 22 | ||
| 22 | ::-webkit-scrollbar-thumb { | 23 | ::-webkit-scrollbar-thumb { |
| 23 | border-radius: 4px; | 24 | border-radius: 4px; |
| 24 | background-color: rgba(0,0,0,.5); | 25 | background-color: rgba(0,0,0,.5); |
| 25 | -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); | 26 | -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); |
| 26 | } | 27 | } |
| 27 | /*End scroll bar style*/ | 28 | /*End scroll bar style*/ |
| 28 | .padding-right-0{ | 29 | .padding-right-0{ |
| 29 | padding-right: 0!important; | 30 | padding-right: 0!important; |
| 30 | } | 31 | } |
| 31 | .padding-left-0{ | 32 | .padding-left-0{ |
| 32 | padding-left: 0!important; | 33 | padding-left: 0!important; |
| 33 | } | 34 | } |
| 34 | button.red{ | 35 | button.red{ |
| 35 | color: #ffffff; | 36 | color: #ffffff; |
| 36 | background-color: #ff0000; | 37 | background-color: #ff0000; |
| 37 | border: 1px solid #ff0000; | 38 | border: 1px solid #ff0000; |
| 38 | 39 | ||
| 39 | } | 40 | } |
| 40 | button.white{ | 41 | button.white{ |
| 41 | border: 1px solid #ff8080; | 42 | border: 1px solid #ff8080; |
| 42 | color: #ff8080; | 43 | color: #ff8080; |
| 43 | background-color: #ffffff; | 44 | background-color: #ffffff; |
| 44 | } | 45 | } |
| 45 | button.brown{ | 46 | button.brown{ |
| 46 | background-color: #666666; | 47 | background-color: #666666; |
| 47 | border: 1px solid #666666; | 48 | border: 1px solid #666666; |
| 48 | color: #ffffff; | 49 | color: #ffffff; |
| 49 | border-radius: 5px; | 50 | border-radius: 5px; |
| 50 | } | 51 | } |
| 51 | button.black{ | 52 | button.black{ |
| 52 | border: 1px solid #c9c9c9; | 53 | border: 1px solid #c9c9c9; |
| 53 | background-color: #343434; | 54 | background-color: #343434; |
| 54 | color: #ffffff; | 55 | color: #ffffff; |
| 55 | padding: 1px 6px; | 56 | padding: 1px 6px; |
| 56 | } | 57 | } |
| 57 | #tshirt-container{ | 58 | #tshirt-container{ |
| 58 | border-left: 1px solid #dcdcdc; | 59 | border-left: 1px solid #dcdcdc; |
| 59 | border-right: 1px solid #dcdcdc; | 60 | border-right: 1px solid #dcdcdc; |
| 60 | } | 61 | } |
| 61 | /*HEADER*/ | 62 | /*HEADER*/ |
| 62 | header{ | 63 | header{ |
| 63 | border-bottom: 1px solid #dcdcdc; | 64 | border-bottom: 1px solid #dcdcdc; |
| 64 | } | 65 | } |
| 65 | header .logo{ | 66 | header .logo{ |
| 66 | color: #ed1d24; | 67 | color: #ed1d24; |
| 67 | font-size: 30px; | 68 | font-size: 30px; |
| 68 | text-transform: uppercase; | 69 | text-transform: uppercase; |
| 69 | font-weight: bold; | 70 | font-weight: bold; |
| 70 | } | 71 | } |
| 71 | header .logo img{ | 72 | header .logo img{ |
| 72 | width: 60px; | 73 | width: 60px; |
| 73 | } | 74 | } |
| 74 | /*NAVIGATION*/ | 75 | /*NAVIGATION*/ |
| 75 | nav{ | 76 | nav{ |
| 76 | border-bottom: 1px solid #dcdcdc; | 77 | border-bottom: 1px solid #dcdcdc; |
| 77 | padding: 10px 0; | 78 | padding: 10px 0; |
| 78 | } | 79 | } |
| 79 | nav h2{ | 80 | nav h2{ |
| 80 | font-size: 27px; | 81 | font-size: 27px; |
| 81 | margin: 0 0; | 82 | margin: 0 0; |
| 82 | } | 83 | } |
| 83 | nav ul{ | 84 | nav ul{ |
| 84 | list-style: none; | 85 | list-style: none; |
| 85 | padding-left: 0; | 86 | padding-left: 0; |
| 86 | margin-bottom: 0; | 87 | margin-bottom: 0; |
| 87 | 88 | ||
| 88 | } | 89 | } |
| 89 | nav ul li{ | 90 | nav ul li{ |
| 90 | margin-left: 2px; | 91 | margin-left: 2px; |
| 91 | float: left; | 92 | float: left; |
| 92 | padding: 6px 12px; | 93 | padding: 6px 12px; |
| 93 | background-color: #999999; | 94 | background-color: #999999; |
| 94 | position: relative; | 95 | position: relative; |
| 95 | } | 96 | } |
| 96 | nav ul li i.fa{ | 97 | nav ul li i.fa{ |
| 97 | position: absolute; | 98 | position: absolute; |
| 98 | color: #ffffff; | 99 | color: #ffffff; |
| 99 | font-size: 18px; | 100 | font-size: 18px; |
| 100 | right: -4px; | 101 | right: -4px; |
| 101 | top: 50%; | 102 | top: 50%; |
| 102 | transform: translateX(-50%) translateY(-50%); | 103 | transform: translateX(-50%) translateY(-50%); |
| 103 | -webkit-transform: translateX(-50%) translateY(-50%); | 104 | -webkit-transform: translateX(-50%) translateY(-50%); |
| 104 | } | 105 | } |
| 105 | nav ul li a{ | 106 | nav ul li a{ |
| 106 | color: #ffffff; | 107 | color: #ffffff; |
| 107 | } | 108 | } |
| 108 | nav ul li:hover a{ | 109 | nav ul li:hover a{ |
| 109 | text-decoration: none; | 110 | text-decoration: none; |
| 110 | color: #ffffff; | 111 | color: #ffffff; |
| 111 | } | 112 | } |
| 112 | nav ul li.action{ | 113 | nav ul li.action{ |
| 113 | color: #ffffff; | 114 | color: #ffffff; |
| 114 | background-color: #ed1d24; | 115 | background-color: #ed1d24; |
| 115 | } | 116 | } |
| 116 | /*ASIDE*/ | 117 | /*ASIDE*/ |
| 117 | aside{ | 118 | aside{ |
| 118 | margin: 10px 0; | 119 | margin: 10px 0; |
| 119 | } | 120 | } |
| 120 | 121 | ||
| 121 | aside .break-down{ | 122 | aside .break-down{ |
| 122 | padding: 0 0; | 123 | padding: 0 0; |
| 123 | } | 124 | } |
| 124 | aside .break-down i.fa{ | 125 | aside .break-down i.fa{ |
| 125 | font-size: 35px; | 126 | font-size: 35px; |
| 126 | color: #ff0000; | 127 | color: #ff0000; |
| 127 | } | 128 | } |
| 128 | aside .break-line{ | 129 | aside .break-line{ |
| 129 | height: 10px; | 130 | height: 10px; |
| 130 | } | 131 | } |
| 131 | aside .break-line hr{ | 132 | aside .break-line hr{ |
| 132 | border-top: 1px dotted #cccccc; | 133 | border-top: 1px dotted #cccccc; |
| 133 | } | 134 | } |
| 134 | aside .step{ | 135 | aside .step{ |
| 135 | margin: 0 0; | 136 | margin: 0 0; |
| 136 | } | 137 | } |
| 137 | aside .step .title{ | 138 | aside .step .title{ |
| 138 | font-size: 15px; | 139 | font-size: 15px; |
| 139 | line-height: 16px; | 140 | line-height: 16px; |
| 140 | font-weight: bold; | 141 | font-weight: bold; |
| 141 | margin-bottom: 3px; | 142 | margin-bottom: 3px; |
| 142 | } | 143 | } |
| 143 | aside .step .title-notice{ | 144 | aside .step .title-notice{ |
| 144 | font-size: 13px; | 145 | font-size: 13px; |
| 145 | line-height: 16px; | 146 | line-height: 16px; |
| 146 | margin-bottom: 3px; | 147 | margin-bottom: 3px; |
| 147 | } | 148 | } |
| 148 | aside .step .title-notice .require{ | 149 | aside .step .title-notice .require{ |
| 149 | font-size: 10px; | 150 | font-size: 10px; |
| 150 | } | 151 | } |
| 151 | aside .step .step-box{ | 152 | aside .step .step-box{ |
| 152 | border: 2px solid #dcdcdc; | 153 | border: 2px solid #dcdcdc; |
| 153 | font-size: 12px; | 154 | font-size: 12px; |
| 154 | 155 | ||
| 155 | } | 156 | } |
| 156 | /*Step 1*/ | 157 | /*Step 1*/ |
| 157 | aside .step .step-box .tshirt-design{ | 158 | aside .step .step-box .tshirt-design{ |
| 158 | border: 1px solid #cccccc; | 159 | border: 1px solid #cccccc; |
| 159 | background-color: #f5f5f5; | 160 | background-color: #f5f5f5; |
| 160 | margin: 10px 10px; | 161 | margin: 10px 10px; |
| 161 | } | 162 | } |
| 162 | aside .step .step-box .tshirt-design:hover{ | 163 | aside .step .step-box .tshirt-design:hover{ |
| 163 | border: 1px solid #ff0000; | 164 | border: 1px solid #ff0000; |
| 164 | } | 165 | } |
| 165 | aside .step .step-box .tshirt-design button:hover{ | 166 | aside .step .step-box .tshirt-design button:hover{ |
| 166 | background-color: #fa7b7b; | 167 | background-color: #fa7b7b; |
| 167 | border: 1px solid #fa7b7b; | 168 | border: 1px solid #fa7b7b; |
| 168 | } | 169 | } |
| 169 | aside .step .step-box .tshirt-design div{ | 170 | aside .step .step-box .tshirt-design div{ |
| 170 | float: left; | 171 | float: left; |
| 171 | } | 172 | } |
| 172 | aside .step .step-box .tshirt-design .icon{ | 173 | aside .step .step-box .tshirt-design .icon{ |
| 173 | padding: 4px 4px; | 174 | padding: 4px 4px; |
| 174 | border-right: 1px solid #cccccc; | 175 | border-right: 1px solid #cccccc; |
| 175 | 176 | ||
| 176 | } | 177 | } |
| 177 | aside .step .step-box .tshirt-design .icon img{ | 178 | aside .step .step-box .tshirt-design .icon img{ |
| 178 | height: 50px; | 179 | height: 50px; |
| 179 | } | 180 | } |
| 180 | aside .step .step-box .tshirt-design .name{ | 181 | aside .step .step-box .tshirt-design .name{ |
| 181 | padding: 10px 10px; | 182 | padding: 10px 10px; |
| 182 | 183 | ||
| 183 | } | 184 | } |
| 184 | aside .step .step-box .tshirt-design .action{ | 185 | aside .step .step-box .tshirt-design .action{ |
| 185 | padding: 10px 10px; | 186 | padding: 10px 10px; |
| 186 | float: right; | 187 | float: right; |
| 187 | 188 | ||
| 188 | } | 189 | } |
| 189 | aside .step .step-box .tshirt-design .action button{ | 190 | aside .step .step-box .tshirt-design .action button{ |
| 190 | padding: 8px 10px; | 191 | padding: 8px 10px; |
| 191 | } | 192 | } |
| 192 | /*Step 2*/ | 193 | /*Step 2*/ |
| 193 | aside .step .step-box .tshirt-color{ | 194 | aside .step .step-box .tshirt-color{ |
| 194 | padding: 6px 10px; | 195 | padding: 6px 10px; |
| 195 | position: relative; | 196 | position: relative; |
| 196 | } | 197 | } |
| 197 | aside .step .step-box .tshirt-color ul.choice-color{ | 198 | aside .step .step-box .tshirt-color ul.choice-color{ |
| 198 | float: left; | 199 | float: left; |
| 199 | list-style: none; | 200 | list-style: none; |
| 200 | padding-left: 0; | 201 | padding-left: 0; |
| 201 | width: 100%; | 202 | width: 100%; |
| 202 | margin-bottom: 3px; | 203 | margin-bottom: 3px; |
| 203 | } | 204 | } |
| 204 | aside .step .step-box .tshirt-color ul.choice-color li{ | 205 | aside .step .step-box .tshirt-color ul.choice-color li{ |
| 205 | margin: 0 8px 4px 0; | 206 | margin: 0 8px 4px 0; |
| 206 | border: 1px solid #cccccc; | 207 | border: 1px solid #cccccc; |
| 207 | padding: 2px 2px; | 208 | padding: 2px 2px; |
| 208 | float: left; | 209 | float: left; |
| 209 | cursor: pointer; | 210 | cursor: pointer; |
| 210 | } | 211 | } |
| 211 | aside .step .step-box .tshirt-color ul.choice-color li.action{ | 212 | aside .step .step-box .tshirt-color ul.choice-color li.action{ |
| 212 | border: 1px solid #ff0000; | 213 | border: 1px solid #ff0000; |
| 213 | } | 214 | } |
| 214 | aside .step .step-box .tshirt-color ul.choice-color li:hover{ | 215 | aside .step .step-box .tshirt-color ul.choice-color li:hover{ |
| 215 | border: 1px solid #ff0000; | 216 | border: 1px solid #ff0000; |
| 216 | } | 217 | } |
| 217 | aside .step .step-box .tshirt-color ul.choice-color li div{ | 218 | aside .step .step-box .tshirt-color ul.choice-color li div{ |
| 218 | height: 30px; | 219 | height: 30px; |
| 219 | width: 30px; | 220 | width: 30px; |
| 220 | } | 221 | } |
| 221 | 222 | ||
| 222 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ | 223 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ |
| 223 | background-color: #ece7e4; | 224 | background-color: #ece7e4; |
| 224 | } | 225 | } |
| 225 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ | 226 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ |
| 226 | background-color: #e7dfd0; | 227 | background-color: #e7dfd0; |
| 227 | } | 228 | } |
| 228 | aside .step .step-box .tshirt-color .color-name{ | 229 | aside .step .step-box .tshirt-color .color-name{ |
| 229 | width: 100%; | 230 | width: 100%; |
| 230 | font-size: 10px; | 231 | font-size: 10px; |
| 231 | } | 232 | } |
| 232 | aside .step .step-box .tshirt-color .view-more{ | 233 | aside .step .step-box .tshirt-color .view-more{ |
| 233 | position: absolute; | 234 | position: absolute; |
| 234 | bottom: 6px; | 235 | bottom: 6px; |
| 235 | right: 10px; | 236 | right: 10px; |
| 236 | } | 237 | } |
| 237 | /*Step 3*/ | 238 | /*Step 3*/ |
| 238 | aside .step .step-box .tshirt-saveorder{ | 239 | aside .step .step-box .tshirt-saveorder{ |
| 239 | padding: 10px 10px 6px 10px; | 240 | padding: 10px 10px 6px 10px; |
| 240 | } | 241 | } |
| 241 | aside .step .step-box .tshirt-saveorder .action{ | 242 | aside .step .step-box .tshirt-saveorder .action{ |
| 242 | width: 50%; | 243 | width: 50%; |
| 243 | float: left; | 244 | float: left; |
| 244 | } | 245 | } |
| 245 | aside .step .step-box .tshirt-saveorder .action:first-child{ | 246 | aside .step .step-box .tshirt-saveorder .action:first-child{ |
| 246 | padding-right: 5px; | 247 | padding-right: 5px; |
| 247 | } | 248 | } |
| 248 | aside .step .step-box .tshirt-saveorder .action:last-child{ | 249 | aside .step .step-box .tshirt-saveorder .action:last-child{ |
| 249 | padding-left: 5px; | 250 | padding-left: 5px; |
| 250 | } | 251 | } |
| 251 | aside .step .step-box .tshirt-saveorder .action button{ | 252 | aside .step .step-box .tshirt-saveorder .action button{ |
| 252 | padding: 8px 10px; | 253 | padding: 8px 10px; |
| 253 | 254 | ||
| 254 | } | 255 | } |
| 255 | aside .step .step-box .tshirt-saveorder .action button .text{ | 256 | aside .step .step-box .tshirt-saveorder .action button .text{ |
| 256 | float: left; | 257 | float: left; |
| 257 | width: 80%; | 258 | width: 80%; |
| 258 | text-align: center; | 259 | text-align: center; |
| 259 | padding-left: 10px; | 260 | padding-left: 10px; |
| 260 | vertical-align: bottom; | 261 | vertical-align: bottom; |
| 261 | } | 262 | } |
| 262 | aside .step .step-box .tshirt-saveorder .action button .arrow{ | 263 | aside .step .step-box .tshirt-saveorder .action button .arrow{ |
| 263 | float: left; | 264 | float: left; |
| 264 | width: 20%; | 265 | width: 20%; |
| 265 | height: 40px; | 266 | height: 40px; |
| 266 | position: relative; | 267 | position: relative; |
| 267 | } | 268 | } |
| 268 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ | 269 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ |
| 269 | position: absolute; | 270 | position: absolute; |
| 270 | top: 50%; | 271 | top: 50%; |
| 271 | right: -6px; | 272 | right: -6px; |
| 272 | transform: translateX(-50%) translateY(-50%); | 273 | transform: translateX(-50%) translateY(-50%); |
| 273 | -webkit-transform: translateX(-50%) translateY(-50%); | 274 | -webkit-transform: translateX(-50%) translateY(-50%); |
| 274 | } | 275 | } |
| 275 | aside .step .step-box .tshirt-saveorder .notice{ | 276 | aside .step .step-box .tshirt-saveorder .notice{ |
| 276 | padding: 5px 0 0 0; | 277 | padding: 5px 0 0 0; |
| 277 | } | 278 | } |
| 278 | /*Step 4*/ | 279 | /*Step 4*/ |
| 279 | aside .step .title-notice{ | 280 | aside .step .title-notice{ |
| 280 | 281 | ||
| 281 | } | 282 | } |
| 282 | aside .step .step-box .change-design{ | 283 | aside .step .step-box .change-design{ |
| 283 | padding: 4px 4px; | 284 | padding: 4px 4px; |
| 284 | } | 285 | } |
| 285 | aside .step .step-box .change-design table{ | 286 | aside .step .step-box .change-design table{ |
| 286 | 287 | ||
| 287 | } | 288 | } |
| 288 | aside .step .step-box .change-design table tr{ | 289 | aside .step .step-box .change-design table tr{ |
| 289 | border-bottom: 1px dotted #cccccc; | 290 | border-bottom: 1px dotted #cccccc; |
| 290 | } | 291 | } |
| 291 | aside .step .step-box .change-design table tr:last-child{ | 292 | aside .step .step-box .change-design table tr:last-child{ |
| 292 | border-bottom: 0; | 293 | border-bottom: 0; |
| 293 | } | 294 | } |
| 294 | 295 | ||
| 295 | /*Step 5- finish*/ | 296 | /*Step 5- finish*/ |
| 296 | aside .step .finish-design{ | 297 | aside .step .finish-design{ |
| 297 | padding: 20px 0; | 298 | padding: 20px 0; |
| 298 | } | 299 | } |
| 299 | aside .step .finish-design button{ | 300 | aside .step .finish-design button{ |
| 300 | width: 100%; | 301 | width: 100%; |
| 301 | padding: 8px 10px; | 302 | padding: 8px 10px; |
| 302 | } | 303 | } |
| 303 | 304 | ||
| 304 | /*DESIGN CONTENT*/ | 305 | /*DESIGN CONTENT*/ |
| 305 | #tshirt-content{ | 306 | #tshirt-content{ |
| 306 | position: relative; | 307 | position: relative; |
| 307 | } | 308 | } |
| 308 | #tshirt-content .switch-border-design{ | 309 | #tshirt-content .switch-border-design{ |
| 309 | position: absolute; | 310 | position: absolute; |
| 310 | top: 5px; | 311 | top: 5px; |
| 311 | right: 10px; | 312 | right: 10px; |
| 312 | color: red; | 313 | color: red; |
| 313 | font-size: 11px; | 314 | font-size: 11px; |
| 314 | } | 315 | } |
| 315 | #tshirt-content .tshirt-image{ | 316 | #tshirt-content .tshirt-image{ |
| 316 | padding: 20px 0 0 0; | 317 | padding: 20px 0 0 0; |
| 317 | position: relative; | 318 | position: relative; |
| 318 | height: 100%; | 319 | height: 100%; |
| 319 | width: 100%; | 320 | width: 100%; |
| 320 | } | 321 | } |
| 321 | 322 | ||
| 322 | #tshirt-content .tshirt-image img{ | 323 | #tshirt-content .tshirt-image img{ |
| 323 | width: 100%; | 324 | width: 100%; |
| 324 | } | 325 | } |
| 325 | 326 | ||
| 326 | #preview-design { | ||
| 327 | position: absolute; | ||
| 328 | width: 190px; | ||
| 329 | height: 200px; | ||
| 330 | border: dashed 2px #DDD; | ||
| 331 | top: 180px; | ||
| 332 | /*left: 200px;*/ | ||
| 333 | cursor: pointer; | ||
| 334 | } | ||
| 335 | |||
| 336 | #preview-design img { | ||
| 337 | width: 150px; | ||
| 338 | } | ||
| 339 | |||
| 340 | #tshirt-content .tshirt-choice{ | 327 | #tshirt-content .tshirt-choice{ |
| 341 | 328 | ||
| 342 | } | 329 | } |
| 343 | #tshirt-content .tshirt-choice ul{ | 330 | #tshirt-content .tshirt-choice ul{ |
| 344 | list-style: none; | 331 | list-style: none; |
| 345 | padding-left: 0; | 332 | padding-left: 0; |
| 346 | display: table; | 333 | display: table; |
| 347 | margin: auto; | 334 | margin: auto; |
| 348 | } | 335 | } |
| 349 | #tshirt-content .tshirt-choice ul li{ | 336 | #tshirt-content .tshirt-choice ul li{ |
| 350 | float: left; | 337 | float: left; |
| 351 | margin: 10px 10px; | 338 | margin: 10px 10px; |
| 352 | cursor: pointer; | 339 | cursor: pointer; |
| 353 | } | 340 | } |
| 354 | #tshirt-content .tshirt-choice ul li .image{ | 341 | #tshirt-content .tshirt-choice ul li .image{ |
| 355 | border: 1px solid #cccccc; | 342 | border: 1px solid #cccccc; |
| 356 | padding: 3px 3px; | 343 | padding: 3px 3px; |
| 357 | } | 344 | } |
| 358 | #tshirt-content .tshirt-choice ul li.focus{ | 345 | #tshirt-content .tshirt-choice ul li.focus{ |
| 359 | 346 | ||
| 360 | } | 347 | } |
| 361 | #tshirt-content .tshirt-choice ul li.focus .image{ | 348 | #tshirt-content .tshirt-choice ul li.focus .image{ |
| 362 | border: 1px solid #ff0000; | 349 | border: 1px solid #ff0000; |
| 363 | } | 350 | } |
| 364 | #tshirt-content .tshirt-choice ul li .image img{ | 351 | #tshirt-content .tshirt-choice ul li .image img{ |
| 365 | width: 50px; | 352 | width: 50px; |
| 366 | height: auto; | 353 | height: auto; |
| 367 | } | 354 | } |
| 368 | /*MODAL Design*/ | 355 | /*MODAL Design*/ |
| 369 | #tshirt-design{ | 356 | #tshirt-design{ |
| 370 | background-color: #666666; | 357 | background-color: #666666; |
| 371 | } | 358 | } |
| 372 | #tshirt-design .modal-dialog{ | 359 | #tshirt-design .modal-dialog{ |
| 373 | /*width: 800px!important;*/ | 360 | /*width: 800px!important;*/ |
| 374 | margin: 0 auto; | 361 | margin: 0 auto; |
| 375 | } | 362 | } |
| 376 | #tshirt-design .modal-dialog .modal-content{ | 363 | #tshirt-design .modal-dialog .modal-content{ |
| 377 | background-color: transparent; | 364 | background-color: transparent; |
| 378 | border-radius: 0; | 365 | border-radius: 0; |
| 379 | border: 0; | 366 | border: 0; |
| 380 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 367 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
| 381 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 368 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
| 382 | } | 369 | } |
| 383 | #tshirt-design .modal-dialog .modal-content .modal-header{ | 370 | #tshirt-design .modal-dialog .modal-content .modal-header{ |
| 384 | padding: 0 0 10px 0; | 371 | padding: 0 0 10px 0; |
| 385 | border-bottom: 0; | 372 | border-bottom: 0; |
| 386 | border-shadow: none!important; | 373 | border-shadow: none!important; |
| 387 | } | 374 | } |
| 388 | #tshirt-design .modal-dialog .modal-content .modal-body{ | 375 | #tshirt-design .modal-dialog .modal-content .modal-body{ |
| 389 | background-color: #f5f5f5; | 376 | background-color: #f5f5f5; |
| 390 | padding: 0 0; | 377 | padding: 0 0; |
| 391 | } | 378 | } |
| 392 | #tshirt-design header{ | 379 | #tshirt-design header{ |
| 393 | border-bottom: 1px solid #cccccc; | 380 | border-bottom: 1px solid #cccccc; |
| 394 | background-color: #dddddd; | 381 | background-color: #dddddd; |
| 395 | } | 382 | } |
| 396 | #tshirt-design header ul.nav{ | 383 | #tshirt-design header ul.nav{ |
| 397 | padding-left: 0; | 384 | padding-left: 0; |
| 398 | list-style: none; | 385 | list-style: none; |
| 399 | } | 386 | } |
| 400 | #tshirt-design header ul.nav li{ | 387 | #tshirt-design header ul.nav li{ |
| 401 | float: left; | 388 | float: left; |
| 402 | padding: 8px 26px; | 389 | padding: 8px 26px; |
| 403 | border-right: 1px solid #cccccc; | 390 | border-right: 1px solid #cccccc; |
| 404 | font-size: 14px; | 391 | font-size: 14px; |
| 405 | cursor: pointer; | 392 | cursor: pointer; |
| 406 | } | 393 | } |
| 407 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ | 394 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ |
| 408 | background-color: red; | 395 | background-color: red; |
| 409 | color: #ffffff; | 396 | color: #ffffff; |
| 410 | } | 397 | } |
| 411 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ | 398 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ |
| 412 | color: #ffffff; | 399 | color: #ffffff; |
| 413 | } | 400 | } |
| 414 | #tshirt-design header ul.nav li i.fa{ | 401 | #tshirt-design header ul.nav li i.fa{ |
| 415 | color: #fe070f; | 402 | color: #fe070f; |
| 416 | font-size: 20px; | 403 | font-size: 20px; |
| 417 | margin-right: 10px; | 404 | margin-right: 10px; |
| 418 | } | 405 | } |
| 419 | #tshirt-design header .action{ | 406 | #tshirt-design header .action{ |
| 420 | 407 | ||
| 421 | } | 408 | } |
| 422 | #tshirt-design header .action button{ | 409 | #tshirt-design header .action button{ |
| 423 | padding: 2px 10px; | 410 | padding: 2px 10px; |
| 424 | margin: 6px 10px; | 411 | margin: 6px 10px; |
| 425 | } | 412 | } |
| 426 | #tshirt-design header .action button:hover{ | 413 | #tshirt-design header .action button:hover{ |
| 427 | background-color: red; | 414 | background-color: red; |
| 428 | color: #ffffff; | 415 | color: #ffffff; |
| 429 | } | 416 | } |
| 430 | 417 | ||
| 431 | /*Aside modal*/ | 418 | /*Aside modal*/ |
| 432 | .aside{ | 419 | .aside{ |
| 433 | } | 420 | } |
| 434 | 421 | ||
| 435 | .aside .box-design-option{ | 422 | .aside .box-design-option{ |
| 436 | list-style: none; | 423 | list-style: none; |
| 437 | padding-left: 0; | 424 | padding-left: 0; |
| 438 | margin-top: 10px; | 425 | margin-top: 10px; |
| 439 | } | 426 | } |
| 440 | 427 | ||
| 441 | .aside .box-design-option li{ | 428 | .aside .box-design-option li{ |
| 442 | border: 1px solid #cdcdcd; | 429 | border: 1px solid #cdcdcd; |
| 443 | position: relative; | 430 | position: relative; |
| 444 | /*cursor: pointer;*/ | 431 | /*cursor: pointer;*/ |
| 445 | margin-bottom: 10px; | 432 | margin-bottom: 10px; |
| 446 | } | 433 | } |
| 447 | .aside .box-design-option li .hover{ | 434 | .aside .box-design-option li .hover{ |
| 448 | background-color: #fddad4; | 435 | background-color: #fddad4; |
| 449 | opacity: 0.6; | 436 | opacity: 0.6; |
| 450 | position: absolute; | 437 | position: absolute; |
| 451 | width: 100%; | 438 | width: 100%; |
| 452 | height: 100%; | 439 | height: 100%; |
| 453 | display: none; | 440 | display: none; |
| 454 | } | 441 | } |
| 455 | .aside .box-design-option li:hover .hover{ | 442 | .aside .box-design-option li:hover .hover{ |
| 456 | display: block; | 443 | display: block; |
| 457 | } | 444 | } |
| 458 | 445 | ||
| 459 | .aside .box-design-option li .title{ | 446 | .aside .box-design-option li .title{ |
| 460 | background: url("../images/bg1.png") repeat #cdcdcd; | 447 | background: url("../images/bg1.png") repeat #cdcdcd; |
| 461 | padding: 3px 10px; | 448 | padding: 3px 10px; |
| 462 | } | 449 | } |
| 463 | .aside .box-design-option li .title i.fa{ | 450 | .aside .box-design-option li .title i.fa{ |
| 464 | color: #000000; | 451 | color: #000000; |
| 465 | } | 452 | } |
| 466 | 453 | ||
| 467 | .aside .box-design-option li .content{ | 454 | .aside .box-design-option li .content{ |
| 468 | 455 | ||
| 469 | } | 456 | } |
| 470 | .aside .box-design-option li .content i.fa{ | 457 | .aside .box-design-option li .content i.fa{ |
| 471 | font-size: 30px; | 458 | font-size: 30px; |
| 472 | color: #fe070f; | 459 | color: #fe070f; |
| 473 | margin: 8px 0; | 460 | margin: 8px 0; |
| 474 | } | 461 | } |
| 475 | .aside .box-design-option li .content .des{ | 462 | .aside .box-design-option li .content .des{ |
| 476 | padding: 3px 10px 3px 0; | 463 | padding: 3px 10px 3px 0; |
| 477 | } | 464 | } |
| 478 | .aside .box-design-option li .content .color-patterns { | 465 | .aside .box-design-option li .content .color-patterns { |
| 479 | width: 100%; | 466 | width: 100%; |
| 480 | border: #bbb solid 1px; | 467 | border: #bbb solid 1px; |
| 481 | background: #FFF; | 468 | background: #FFF; |
| 482 | margin-top: 5px; | 469 | margin-top: 5px; |
| 483 | min-height: 65px; | 470 | min-height: 65px; |
| 484 | } | 471 | } |
| 485 | 472 | ||
| 486 | .aside .box-design-option li .content .color-patterns .color-pattern-item{ | 473 | .aside .box-design-option li .content .color-patterns .color-pattern-item{ |
| 487 | height: 20px; | 474 | height: 20px; |
| 488 | float: left; | 475 | float: left; |
| 489 | margin-left: 4px; | 476 | margin-left: 4px; |
| 490 | margin-top: 2px; | 477 | margin-top: 2px; |
| 491 | width: 20px; | 478 | width: 20px; |
| 492 | cursor: pointer; | 479 | cursor: pointer; |
| 493 | border: 1px solid #ddd; | 480 | border: 1px solid #ddd; |
| 494 | } | 481 | } |
| 495 | 482 | ||
| 496 | .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { | 483 | .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { |
| 497 | outline: 1px solid #ed1d24; | 484 | outline: 1px solid #ed1d24; |
| 498 | } | 485 | } |
| 499 | 486 | ||
| 500 | .aside .box-design-option li .title .reset-color-patterns { | 487 | .aside .box-design-option li .title .reset-color-patterns { |
| 501 | cursor: pointer; | 488 | cursor: pointer; |
| 502 | } | 489 | } |
| 503 | 490 | ||
| 504 | .aside .box-design-option li .title .reset-color-patterns:hover { | 491 | .aside .box-design-option li .title .reset-color-patterns:hover { |
| 505 | opacity: 0.6; | 492 | opacity: 0.6; |
| 506 | } | 493 | } |
| 507 | 494 | ||
| 508 | .aside .box-design-option li .content .layer-item { | 495 | .aside .box-design-option li .content .layer-item { |
| 509 | text-align: center; | 496 | text-align: center; |
| 510 | border: 1px #ddd solid; | 497 | border: 1px #ddd solid; |
| 511 | background: #FFF; | 498 | background: #FFF; |
| 512 | padding: 5px; | 499 | padding: 5px; |
| 513 | font-size: 12px; | 500 | font-size: 12px; |
| 514 | cursor: pointer; | 501 | cursor: pointer; |
| 515 | } | 502 | } |
| 516 | 503 | ||
| 517 | .aside .box-design-option li .content .layer-item:hover { | 504 | .aside .box-design-option li .content .layer-item:hover { |
| 518 | background: #ffcccc; | 505 | background: #ffcccc; |
| 519 | } | 506 | } |
| 520 | 507 | ||
| 521 | 508 | ||
| 522 | /*Design Text*/ | 509 | /*Design Text*/ |
| 523 | .aside #choice-text{ | 510 | .aside #choice-text{ |
| 524 | 511 | ||
| 525 | } | 512 | } |
| 526 | .aside #choice-text .content{ | 513 | .aside #choice-text .content{ |
| 527 | padding: 10px 10px; | 514 | padding: 10px 10px; |
| 528 | } | 515 | } |
| 529 | .aside #choice-text .content ul.font-family-box{ | 516 | .aside #choice-text .content ul.font-family-box{ |
| 530 | list-style: none; | 517 | list-style: none; |
| 531 | margin: 10px 0; | 518 | margin: 10px 0; |
| 532 | padding-left: 0; | 519 | padding-left: 0; |
| 533 | height: 180px; | 520 | height: 180px; |
| 534 | width: 100%; | 521 | width: 100%; |
| 535 | overflow-y: scroll; | 522 | overflow-y: scroll; |
| 536 | border: 1px solid #c0c0c0; | 523 | border: 1px solid #c0c0c0; |
| 537 | } | 524 | } |
| 538 | 525 | ||
| 539 | .aside #choice-text .content .font-family-box li{ | 526 | .aside #choice-text .content .font-family-box li{ |
| 540 | cursor: pointer; | 527 | cursor: pointer; |
| 541 | padding: 4px 8px; | 528 | padding: 4px 8px; |
| 542 | border: 0; | 529 | border: 0; |
| 543 | border-bottom: 1px solid #c0c0c0; | 530 | border-bottom: 1px solid #c0c0c0; |
| 544 | border-right: 1px solid #c0c0c0; | 531 | border-right: 1px solid #c0c0c0; |
| 545 | font-size: 16px; | 532 | font-size: 16px; |
| 546 | margin-bottom: 0; | 533 | margin-bottom: 0; |
| 547 | } | 534 | } |
| 548 | .aside #choice-text .content .font-family-box li.active{ | 535 | .aside #choice-text .content .font-family-box li.active{ |
| 549 | border: 1px solid #fe070f; | 536 | border: 1px solid #fe070f; |
| 550 | } | 537 | } |
| 551 | .aside #choice-text .content .spacing-letter{ | 538 | .aside #choice-text .content .spacing-letter{ |
| 552 | 539 | ||
| 553 | } | 540 | } |
| 554 | .aside #choice-text .content .spacing-letter .text-label{ | 541 | .aside #choice-text .content .spacing-letter .text-label{ |
| 555 | font-size: 16px; | 542 | font-size: 16px; |
| 556 | padding: 4px 0; | 543 | padding: 4px 0; |
| 557 | } | 544 | } |
| 558 | .aside #choice-text .content .spacing-letter .box{ | 545 | .aside #choice-text .content .spacing-letter .box{ |
| 559 | border: 1px solid #8c8c8c; | 546 | border: 1px solid #8c8c8c; |
| 560 | box-shadow: 0 0 5px #888888; | 547 | box-shadow: 0 0 5px #888888; |
| 561 | background-color: #f0f0f0; | 548 | background-color: #f0f0f0; |
| 562 | } | 549 | } |
| 563 | .aside #choice-text .content .spacing-letter .item{ | 550 | .aside #choice-text .content .spacing-letter .item{ |
| 564 | float: left; | 551 | float: left; |
| 565 | } | 552 | } |
| 566 | .aside #choice-text .content .spacing-letter .item:hover{ | 553 | .aside #choice-text .content .spacing-letter .item:hover{ |
| 567 | background-color: #fddad4; | 554 | background-color: #fddad4; |
| 568 | } | 555 | } |
| 569 | 556 | ||
| 570 | .aside #choice-text .content .spacing-letter .item i.fa{ | 557 | .aside #choice-text .content .spacing-letter .item i.fa{ |
| 571 | font-size: 22px; | 558 | font-size: 22px; |
| 572 | margin: 0 0; | 559 | margin: 0 0; |
| 573 | color: #000000; | 560 | color: #000000; |
| 574 | } | 561 | } |
| 575 | .aside #choice-text .content .spacing-letter .item-text{ | 562 | .aside #choice-text .content .spacing-letter .item-text{ |
| 576 | padding: 6px 20px; | 563 | padding: 6px 20px; |
| 577 | font-size: 13px; | 564 | font-size: 13px; |
| 578 | } | 565 | } |
| 579 | .aside #choice-text .content .spacing-letter .item-plus{ | 566 | .aside #choice-text .content .spacing-letter .item-plus{ |
| 580 | border-right: 1px solid #8c8c8c; | 567 | border-right: 1px solid #8c8c8c; |
| 581 | } | 568 | } |
| 582 | .aside #choice-text .content .spacing-letter .item-minus{ | 569 | .aside #choice-text .content .spacing-letter .item-minus{ |
| 583 | border-left: 1px solid #8c8c8c; | 570 | border-left: 1px solid #8c8c8c; |
| 584 | } | 571 | } |
| 585 | .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { | 572 | .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { |
| 586 | padding: 5px 6px 1px 6px; | 573 | padding: 5px 6px 1px 6px; |
| 587 | cursor: pointer; | 574 | cursor: pointer; |
| 588 | } | 575 | } |
| 589 | /*Design Choice Illustration*/ | 576 | /*Design Choice Illustration*/ |
| 590 | .aside #choice-illustration li .content { | 577 | .aside #choice-illustration li .content { |
| 591 | padding: 10px 10px; | 578 | padding: 10px 10px; |
| 592 | } | 579 | } |
| 593 | 580 | ||
| 594 | .aside #choice-illustration li .content select{ | 581 | .aside #choice-illustration li .content select{ |
| 595 | width: 100%; | 582 | width: 100%; |
| 596 | } | 583 | } |
| 597 | 584 | ||
| 598 | .aside #choice-illustration li .content .illustration-list { | 585 | .aside #choice-illustration li .content .illustration-list { |
| 599 | width: 100%; | 586 | width: 100%; |
| 600 | border: #bbb solid 1px; | 587 | border: #bbb solid 1px; |
| 601 | background: #FFF; | 588 | background: #FFF; |
| 602 | margin-top: 5px; | 589 | margin-top: 5px; |
| 603 | min-height: 310px; | 590 | min-height: 310px; |
| 604 | padding-bottom: 20px; | 591 | padding-bottom: 20px; |
| 605 | } | 592 | } |
| 606 | 593 | ||
| 607 | .aside #choice-illustration li .content .illustration-list .illstration-item{ | 594 | .aside #choice-illustration li .content .illustration-list .illstration-item{ |
| 608 | height: 60px; | 595 | height: 60px; |
| 609 | overflow: hidden; | 596 | overflow: hidden; |
| 610 | float: left; | 597 | float: left; |
| 611 | margin-left: 6px; | 598 | margin-left: 6px; |
| 612 | margin-top: 5px; | 599 | margin-top: 5px; |
| 613 | margin-bottom: 5px; | 600 | margin-bottom: 5px; |
| 614 | padding: 2px; | 601 | padding: 2px; |
| 615 | background: #e2e2e2; | 602 | background: #e2e2e2; |
| 616 | border: solid 2px #d7d7d7; | 603 | border: solid 2px #d7d7d7; |
| 617 | cursor: pointer; | 604 | cursor: pointer; |
| 618 | } | 605 | } |
| 619 | 606 | ||
| 620 | .aside #choice-illustration li .content .illustration-list .illstration-item:hover { | 607 | .aside #choice-illustration li .content .illustration-list .illstration-item:hover { |
| 621 | outline: 2px solid #ed1d24; | 608 | outline: 2px solid #ed1d24; |
| 622 | } | 609 | } |
| 623 | 610 | ||
| 624 | .aside #choice-illustration li .content .illustration-list .illstration-item img { | 611 | .aside #choice-illustration li .content .illustration-list .illstration-item img { |
| 625 | width: 50px; | 612 | width: 50px; |
| 626 | cursor: pointer; | 613 | cursor: pointer; |
| 627 | } | 614 | } |
| 628 | 615 | ||
| 629 | .aside #choice-illustration li .content .illustration-list .footer-bar { | 616 | .aside #choice-illustration li .content .illustration-list .footer-bar { |
| 630 | text-align: center; | 617 | text-align: center; |
| 631 | margin-top: 5px; | 618 | margin-top: 5px; |
| 632 | bottom: 10px; | 619 | bottom: 10px; |
| 633 | position: absolute; | 620 | position: absolute; |
| 634 | width: 100%; | 621 | width: 100%; |
| 635 | padding-right: 20px; | 622 | padding-right: 20px; |
| 636 | } | 623 | } |
| 637 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { | 624 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { |
| 638 | margin-right: 5px; | 625 | margin-right: 5px; |
| 639 | cursor: pointer; | 626 | cursor: pointer; |
| 640 | font-size: 9px; | 627 | font-size: 9px; |
| 641 | color: #FFF; | 628 | color: #FFF; |
| 642 | background: #666666; | 629 | background: #666666; |
| 643 | text-transform: uppercase; | 630 | text-transform: uppercase; |
| 644 | padding: 2px 5px; | 631 | padding: 2px 5px; |
| 645 | } | 632 | } |
| 646 | 633 | ||
| 647 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { | 634 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { |
| 648 | background: #999999; | 635 | background: #999999; |
| 649 | } | 636 | } |
| 650 | .tooltip-arrow, | 637 | .tooltip-arrow, |
| 651 | .red-tooltip + .tooltip > .tooltip-inner { | 638 | .red-tooltip + .tooltip > .tooltip-inner { |
| 652 | background-color: #FFF; | 639 | background-color: #FFF; |
| 653 | margin:0; | 640 | margin:0; |
| 654 | padding:0; | 641 | padding:0; |
| 655 | } | 642 | } |
| 656 | 643 | ||
| 657 | /* Insert image*/ | 644 | /* Insert image*/ |
| 658 | #btn-choose-image { | 645 | #btn-choose-image { |
| 659 | background: #ff0f00; | 646 | background: #ff0f00; |
| 660 | cursor: pointer; | 647 | cursor: pointer; |
| 661 | margin: 10px 0px; | 648 | margin: 10px 0px; |
| 662 | padding: 0 10px; | 649 | padding: 0 10px; |
| 663 | color: #FFF; | 650 | color: #FFF; |
| 664 | font-size: 12px; | 651 | font-size: 12px; |
| 665 | } | 652 | } |
| 666 | 653 | ||
| 667 | #btn-choose-image:hover { | 654 | #btn-choose-image:hover { |
| 668 | background: #f8aeae; | 655 | background: #f8aeae; |
| 669 | } | 656 | } |
| 670 | 657 | ||
| 671 | .aside #choice-image li .content { | 658 | .aside #choice-image li .content { |
| 672 | margin: 0 10px; | 659 | margin: 0 10px; |
| 673 | padding: 10px 0; | 660 | padding: 10px 0; |
| 674 | } | 661 | } |
| 675 | 662 | ||
| 676 | .aside #choice-image li .content .small-text { | 663 | .aside #choice-image li .content .small-text { |
| 677 | font-size:10px; | 664 | font-size:10px; |
| 678 | margin-bottom: 10px; | 665 | margin-bottom: 10px; |
| 679 | } | 666 | } |
| 680 | 667 | ||
| 681 | .aside #choice-image { | 668 | .aside #choice-image { |
| 682 | font-size: 13px; | 669 | font-size: 13px; |
| 683 | } | 670 | } |
| 684 | 671 | ||
| 685 | .aside #imgLoader{ | 672 | .aside #imgLoader{ |
| 686 | display: none; | 673 | display: none; |
| 687 | } | 674 | } |
| 688 | 675 | ||
| 689 | .aside #choice-image li .content .list-images { | 676 | .aside #choice-image li .content .list-images { |
| 690 | height: 300px; | 677 | height: 300px; |
| 691 | background: #FFF; | 678 | background: #FFF; |
| 692 | border: 1px solid #DDD; | 679 | border: 1px solid #DDD; |
| 693 | } | 680 | } |
| 694 | 681 | ||
| 695 | .aside #choice-image li .content .list-images .recent-img{ | 682 | .aside #choice-image li .content .list-images .recent-img{ |
| 696 | height: 60px; | 683 | height: 60px; |
| 697 | overflow: hidden; | 684 | overflow: hidden; |
| 698 | float: left; | 685 | float: left; |
| 699 | margin-left: 6px; | 686 | margin-left: 6px; |
| 700 | margin-top: 5px; | 687 | margin-top: 5px; |
| 701 | margin-bottom: 5px; | 688 | margin-bottom: 5px; |
| 702 | padding: 2px; | 689 | padding: 2px; |
| 703 | background: #e2e2e2; | 690 | background: #e2e2e2; |
| 704 | border: solid 2px #d7d7d7; | 691 | border: solid 2px #d7d7d7; |
| 705 | cursor: pointer; | 692 | cursor: pointer; |
| 706 | } | 693 | } |
| 707 | 694 | ||
| 708 | .aside #choice-image li .content .list-images .recent-img:hover { | 695 | .aside #choice-image li .content .list-images .recent-img:hover { |
| 709 | outline: 2px solid #ed1d24; | 696 | outline: 2px solid #ed1d24; |
| 710 | } | 697 | } |
| 711 | 698 | ||
| 712 | .aside #choice-image li .content .list-images .recent-img img { | 699 | .aside #choice-image li .content .list-images .recent-img img { |
| 713 | width: 50px; | 700 | width: 50px; |
| 714 | cursor: pointer; | 701 | cursor: pointer; |
| 715 | } | 702 | } |
| 716 | 703 | ||
| 717 | /*Design content*/ | 704 | /*Design content*/ |
| 718 | .tshirt-design-container{ | 705 | .tshirt-design-container{ |
| 719 | position: relative; | 706 | position: relative; |
| 720 | } | 707 | } |
| 721 | .tshirt-design-container .design-content{ | 708 | .tshirt-design-container .design-content{ |
| 722 | padding: 10px 0; | 709 | padding: 10px 0; |
| 723 | /*width: 100%;*/ | 710 | /*width: 100%;*/ |
| 724 | } | 711 | } |
| 725 | .tshirt-design-container .design-content .content{ | 712 | .tshirt-design-container .design-content .content{ |
| 726 | width: 100%; | 713 | width: 100%; |
| 727 | height: 100%; | 714 | height: 100%; |
| 728 | min-height: 650px; | 715 | min-height: 650px; |
| 729 | background-color: #f0efea; | 716 | background-color: #f0efea; |
| 730 | padding: 40px 40px; | 717 | padding: 40px 40px; |
| 731 | /*display: table-cell;*/ | 718 | /*display: table-cell;*/ |
| 732 | } | 719 | } |
| 733 | .tshirt-design-container .design-content .content .selection-design{ | 720 | .tshirt-design-container .design-content .content .selection-design{ |
| 734 | border: 1px solid #ff0000; | 721 | border: 1px solid #ff0000; |
| 735 | width: 100%; | 722 | width: 100%; |
| 736 | height: 620px; | 723 | height: 620px; |
| 737 | } | 724 | } |
| 738 | .tshirt-design-container .agree-design{ | 725 | .tshirt-design-container .agree-design{ |
| 739 | position: absolute; | 726 | position: absolute; |
| 740 | right: -16px; | 727 | right: -16px; |
| 741 | top: 40%; | 728 | top: 40%; |
| 742 | cursor: pointer; | 729 | cursor: pointer; |
| 743 | } | 730 | } |
| 744 | .tshirt-design-container .agree-design:hover{ | 731 | .tshirt-design-container .agree-design:hover{ |
| 745 | opacity: 0.8; | 732 | opacity: 0.8; |
| 746 | } | 733 | } |
| 747 | .tshirt-design-container .trash-design{ | 734 | .tshirt-design-container .trash-design{ |
| 748 | position: absolute; | 735 | position: absolute; |
| 749 | right: 5px; | 736 | right: 5px; |
| 750 | bottom: 0; | 737 | bottom: 0; |
| 751 | } | 738 | } |
| 752 | .tshirt-design-container .trash-design:hover{ | 739 | .tshirt-design-container .trash-design:hover{ |
| 753 | opacity: 0.5; | 740 | opacity: 0.5; |
| 754 | } | 741 | } |
| 755 | 742 | ||
| 756 | .object-border{ | 743 | .object-border{ |
| 757 | position: absolute; | 744 | position: absolute; |
| 758 | background-color: rgb(0, 108, 255); | 745 | background-color: rgb(0, 108, 255); |
| 759 | border: 0; | 746 | border: 0; |
| 760 | display:none; | 747 | display:none; |
| 761 | transform-origin: 0% 0%; | 748 | transform-origin: 0% 0%; |
| 762 | } | 749 | } |
| 763 | #object-border-top, #object-border-bottom{ | 750 | #object-border-top, #object-border-bottom{ |
| 764 | height: 2px; | 751 | height: 2px; |
| 765 | } | 752 | } |
| 766 | #object-border-right, #object-border-left{ | 753 | #object-border-right, #object-border-left{ |
| 767 | width: 2px; | 754 | width: 2px; |
| 768 | } | 755 | } |
| 769 | 756 | ||
| 770 | 757 | ||
| 771 | /*FOOTER*/ | 758 | /*FOOTER*/ |
| 772 | footer{ | 759 | footer{ |
| 773 | background-color: #333333; | 760 | background-color: #333333; |
| 774 | } | 761 | } |
| 775 | footer ul.nav-footer{ | 762 | footer ul.nav-footer{ |
| 776 | padding-left: 0; | 763 | padding-left: 0; |
| 777 | list-style: none; | 764 | list-style: none; |
| 778 | } | 765 | } |
| 779 | footer ul.nav-footer li{ | 766 | footer ul.nav-footer li{ |
| 780 | float: left; | 767 | float: left; |
| 781 | padding: 3px 10px; | 768 | padding: 3px 10px; |
| 782 | border-right: 1px dotted #ffffff; | 769 | border-right: 1px dotted #ffffff; |
| 783 | 770 | ||
| 784 | } | 771 | } |
| 785 | footer ul.nav-footer li a{ | 772 | footer ul.nav-footer li a{ |
| 786 | color: #ffffff; | 773 | color: #ffffff; |
| 787 | font-size: 11px; | 774 | font-size: 11px; |
| 788 | } | 775 | } |
| 789 | /* Customize container */ | 776 | /* Customize container */ |
| 790 | @media (min-width: 768px) { | 777 | @media (min-width: 768px) { |
| 791 | .container { | 778 | .container { |
| 792 | /*max-width: 730px;*/ | 779 | /*max-width: 730px;*/ |
| 793 | } | 780 | } |
| 794 | } | 781 | } |
| 795 | 782 | ||
| 796 | /* Responsive: Portrait tablets and up */ | 783 | /* Responsive: Portrait tablets and up */ |
| 797 | @media screen and (min-width: 768px) { | 784 | @media screen and (min-width: 768px) { |
| 798 | /* Remove the padding we set earlier */ | 785 | /* Remove the padding we set earlier */ |
| 799 | 786 | ||
| 800 | } | 787 | } |
| 801 | 788 | ||
| 802 | @media (min-width: 1024px) { | 789 | @media (min-width: 1024px) { |
| 803 | #tshirt-design .modal-dialog{ | 790 | #tshirt-design .modal-dialog{ |
| 804 | min-width: 1000px; | 791 | min-width: 1000px; |
| 805 | width: 1000px; | 792 | width: 1000px; |
| 806 | } | 793 | } |
| 807 | } | 794 | } |
| 808 | 795 | ||
| 809 | @media (max-width: 1200px) { | 796 | @media (max-width: 1200px) { |
| 810 | #preview-design { | 797 | |
| 811 | left: 155px; | ||
| 812 | } | ||
| 813 | } | 798 | } |
| 814 | 799 | ||
| 815 | @media (max-width: 990px) { | 800 | @media (max-width: 990px) { |
| 816 | #preview-design { | 801 | |
| 817 | /*left: 115px;*/ | ||
| 818 | width: 110px; | ||
| 819 | height: 160px; | ||
| 820 | top: 110px; | ||
| 821 | } | ||
| 822 | } | 802 | } |
| 823 | @media (max-width: 762px) and (min-width: 600px) { | 803 | @media (max-width: 762px) and (min-width: 600px) { |
| 824 | 804 | ||
| 825 | } | 805 | } |
| 826 | @media (max-width: 762px) { | 806 | @media (max-width: 762px) { |
| 827 | .modal-dialog{ | 807 | .modal-dialog{ |
| 828 | margin: 0 0!important; | 808 | margin: 0 0!important; |
| 829 | } | 809 | } |
| 830 | #tshirt-design header .menu-nav{ | 810 | #tshirt-design header .menu-nav{ |
| 831 | overflow-x: scroll!important; | 811 | overflow-x: scroll!important; |
| 832 | -webkit-overflow-scrolling: touch; | 812 | -webkit-overflow-scrolling: touch; |
| 833 | } | 813 | } |
| 834 | 814 | ||
| 835 | #tshirt-design header ul.nav { | 815 | #tshirt-design header ul.nav { |
| 836 | text-align: justify; | 816 | text-align: justify; |
| 837 | width: 680px; | 817 | width: 680px; |
| 838 | } | 818 | } |
| 839 | 819 | ||
| 840 | #tshirt-design header ul.nav li { | 820 | #tshirt-design header ul.nav li { |
| 841 | display: inline-block; /* 6 */ | 821 | display: inline-block; /* 6 */ |
| 842 | } | 822 | } |
| 843 | 823 | ||
| 844 | .tshirt-design-container .design-content .content{ | 824 | .tshirt-design-container .design-content .content{ |
| 845 | padding: 14px 14px; | 825 | padding: 14px 14px; |
| 846 | } | 826 | } |
| 847 | .tshirt-design-container .design-content{ | 827 | .tshirt-design-container .design-content{ |
| 848 | padding: 0 0; | 828 | padding: 0 0; |
| 849 | } | 829 | } |
app/styles/placedesign.css
| File was created | 1 | #preview-design { | |
| 2 | position: absolute; | ||
| 3 | width: 190px; | ||
| 4 | height: 200px; | ||
| 5 | border: dashed 2px #DDD; | ||
| 6 | top: 180px; | ||
| 7 | /*left: 200px;*/ | ||
| 8 | cursor: pointer; | ||
| 9 | } | ||
| 10 | |||
| 11 | #preview-design img { | ||
| 12 | width: 150px; | ||
| 13 | } | ||
| 14 | |||
| 15 | @media (max-width: 1200px) { | ||
| 16 | #preview-design { | ||
| 17 | left: 155px; | ||
| 18 | } | ||
| 19 | } | ||
| 20 | |||
| 21 | @media (max-width: 990px) { | ||
| 22 | #preview-design { | ||
| 23 | /*left: 115px;*/ | ||
| 24 | width: 110px; | ||
| 25 | height: 160px; | ||
| 26 | top: 110px; | ||
| 27 | } | ||
| 28 | } | ||
| 29 | |||
| 30 | .t_shirt_p_1{ | ||
| 31 | |||
| 32 | } |
app/views/main.html
| 1 | <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> | 1 | <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> |
| 2 | <div class="row"> | 2 | <div class="row"> |
| 3 | <header> | 3 | <header> |
| 4 | <div class="logo"> | 4 | <div class="logo"> |
| 5 | <img src="images/logo_mobile_world.png" alt="Logo Mobile World" /> | 5 | <img src="images/logo_mobile_world.png" alt="Logo Mobile World" /> |
| 6 | MOBILE WORLD | 6 | MOBILE WORLD |
| 7 | </div> | 7 | </div> |
| 8 | </header> | 8 | </header> |
| 9 | <nav class="clearfix"> | 9 | <nav class="clearfix"> |
| 10 | <div class="col-sm-12"> | 10 | <div class="col-sm-12"> |
| 11 | <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> | 11 | <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> |
| 12 | <ul class="pull-right"> | 12 | <ul class="pull-right"> |
| 13 | <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> | 13 | <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> |
| 14 | <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> | 14 | <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> |
| 15 | <li class="action">デザインする</li> | 15 | <li class="action">デザインする</li> |
| 16 | </ul> | 16 | </ul> |
| 17 | </div> | 17 | </div> |
| 18 | </nav> | 18 | </nav> |
| 19 | <article class="clearfix"> | 19 | <article class="clearfix"> |
| 20 | <aside class="col-sm-5"> | 20 | <aside class="col-sm-5"> |
| 21 | <div class="step"> | 21 | <div class="step"> |
| 22 | <div class="title"> | 22 | <div class="title"> |
| 23 | 1. デザインを作る | 23 | 1. デザインを作る |
| 24 | </div> | 24 | </div> |
| 25 | <div class="step-box"> | 25 | <div class="step-box"> |
| 26 | <div class="tshirt-design clearfix"> | 26 | <div class="tshirt-design clearfix"> |
| 27 | <div class="icon"> | 27 | <div class="icon"> |
| 28 | <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> | 28 | <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> |
| 29 | </div> | 29 | </div> |
| 30 | <div class="name"> | 30 | <div class="name"> |
| 31 | 背中背中 (28x22) | 31 | 背中背中 (28x22) |
| 32 | </div> | 32 | </div> |
| 33 | <div class="action"> | 33 | <div class="action"> |
| 34 | <button class="red" ng-click="modalTShirtDesign()"> | 34 | <button class="red" ng-click="modalTShirtDesign()"> |
| 35 | <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る | 35 | <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る |
| 36 | </button> | 36 | </button> |
| 37 | </div> | 37 | </div> |
| 38 | </div> | 38 | </div> |
| 39 | </div> | 39 | </div> |
| 40 | </div> | 40 | </div> |
| 41 | 41 | ||
| 42 | <!-- BREAK DOWN--> | 42 | <!-- BREAK DOWN--> |
| 43 | <div class="text-center break-down"> | 43 | <div class="text-center break-down"> |
| 44 | <img src="images/bg_step_arrow.gif" alt="arrow" /> | 44 | <img src="images/bg_step_arrow.gif" alt="arrow" /> |
| 45 | </div> | 45 | </div> |
| 46 | 46 | ||
| 47 | <!-- STEP 2--> | 47 | <!-- STEP 2--> |
| 48 | <div class="step"> | 48 | <div class="step"> |
| 49 | <div class="title"> | 49 | <div class="title"> |
| 50 | 2.アイテムカラーを変更する | 50 | 2.アイテムカラーを変更する |
| 51 | </div> | 51 | </div> |
| 52 | <div class="step-box clearfix"> | 52 | <div class="step-box clearfix"> |
| 53 | <div class="tshirt-color"> | 53 | <div class="tshirt-color"> |
| 54 | <ul class="choice-color clearfix"> | 54 | <ul class="choice-color clearfix"> |
| 55 | <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> | 55 | <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> |
| 56 | <div ng-style="{'background-color' : color.code}"></div> | 56 | <div ng-style="{'background-color' : color.code}"></div> |
| 57 | </li> | 57 | </li> |
| 58 | </ul> | 58 | </ul> |
| 59 | <div class="color-name" ng-bind="tShirtColorName"></div> | 59 | <div class="color-name" ng-bind="tShirtColorName"></div> |
| 60 | <div class="view-more"> | 60 | <div class="view-more"> |
| 61 | 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 61 | 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 62 | </div> | 62 | </div> |
| 63 | </div> | 63 | </div> |
| 64 | </div> | 64 | </div> |
| 65 | </div> | 65 | </div> |
| 66 | 66 | ||
| 67 | <!-- BREAK DOWN--> | 67 | <!-- BREAK DOWN--> |
| 68 | <div class="text-center break-down"> | 68 | <div class="text-center break-down"> |
| 69 | <img src="images/bg_step_arrow.gif" alt="arrow" /> | 69 | <img src="images/bg_step_arrow.gif" alt="arrow" /> |
| 70 | </div> | 70 | </div> |
| 71 | 71 | ||
| 72 | <!-- STEP 3--> | 72 | <!-- STEP 3--> |
| 73 | <div class="step"> | 73 | <div class="step"> |
| 74 | <div class="step-box clearfix"> | 74 | <div class="step-box clearfix"> |
| 75 | <div class="tshirt-saveorder"> | 75 | <div class="tshirt-saveorder"> |
| 76 | <div class="clearfix"> | 76 | <div class="clearfix"> |
| 77 | <div class="action"> | 77 | <div class="action"> |
| 78 | <button class="white"> | 78 | <button class="white"> |
| 79 | <div class="text"> | 79 | <div class="text"> |
| 80 | このデザインを保存する | 80 | このデザインを保存する |
| 81 | </div> | 81 | </div> |
| 82 | <div class="arrow"> | 82 | <div class="arrow"> |
| 83 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 83 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 84 | </div> | 84 | </div> |
| 85 | </button> | 85 | </button> |
| 86 | </div> | 86 | </div> |
| 87 | <div class="action"> | 87 | <div class="action"> |
| 88 | <button class="red"> | 88 | <button class="red"> |
| 89 | <div class="text"> | 89 | <div class="text"> |
| 90 | このデザインで注文する | 90 | このデザインで注文する |
| 91 | </div> | 91 | </div> |
| 92 | <div class="arrow clearfix"> | 92 | <div class="arrow clearfix"> |
| 93 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 93 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 94 | </div> | 94 | </div> |
| 95 | </button> | 95 | </button> |
| 96 | </div> | 96 | </div> |
| 97 | </div> | 97 | </div> |
| 98 | <div class="notice"> | 98 | <div class="notice"> |
| 99 | デザインを保存するには、ログインしてください | 99 | デザインを保存するには、ログインしてください |
| 100 | </div> | 100 | </div> |
| 101 | </div> | 101 | </div> |
| 102 | </div> | 102 | </div> |
| 103 | 103 | ||
| 104 | <!-- BREAL LINE--> | 104 | <!-- BREAL LINE--> |
| 105 | <div class="text-center break-line"> | 105 | <div class="text-center break-line"> |
| 106 | <hr /> | 106 | <hr /> |
| 107 | </div> | 107 | </div> |
| 108 | 108 | ||
| 109 | <!-- STEP 4--> | 109 | <!-- STEP 4--> |
| 110 | <div class="step"> | 110 | <div class="step"> |
| 111 | <div class="title-notice"> | 111 | <div class="title-notice"> |
| 112 | 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> | 112 | 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> |
| 113 | </div> | 113 | </div> |
| 114 | <div class="step-box"> | 114 | <div class="step-box"> |
| 115 | <div class="change-design"> | 115 | <div class="change-design"> |
| 116 | <table> | 116 | <table> |
| 117 | <tr> | 117 | <tr> |
| 118 | <td class="text-center">商品</td> | 118 | <td class="text-center">商品</td> |
| 119 | <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> | 119 | <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> |
| 120 | <td class="text-right"> | 120 | <td class="text-right"> |
| 121 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | 121 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> |
| 122 | </td> | 122 | </td> |
| 123 | </tr> | 123 | </tr> |
| 124 | <tr> | 124 | <tr> |
| 125 | <td width="10%" class="text-center">加工方法</td> | 125 | <td width="10%" class="text-center">加工方法</td> |
| 126 | <td width="70%">シルク：胸中央 (27×27)</td> | 126 | <td width="70%">シルク：胸中央 (27×27)</td> |
| 127 | <td width="20%" class="text-right"> | 127 | <td width="20%" class="text-right"> |
| 128 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | 128 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> |
| 129 | </td> | 129 | </td> |
| 130 | </tr> | 130 | </tr> |
| 131 | </table> | 131 | </table> |
| 132 | </div> | 132 | </div> |
| 133 | </div> | 133 | </div> |
| 134 | </div> | 134 | </div> |
| 135 | <!-- STEP 5- finish--> | 135 | <!-- STEP 5- finish--> |
| 136 | <div class="step"> | 136 | <div class="step"> |
| 137 | <div class="finish-design"> | 137 | <div class="finish-design"> |
| 138 | <button class="white"> | 138 | <button class="white"> |
| 139 | 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 139 | 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 140 | </button> | 140 | </button> |
| 141 | </div> | 141 | </div> |
| 142 | 142 | ||
| 143 | </div> | 143 | </div> |
| 144 | </div> | 144 | </div> |
| 145 | </aside> | 145 | </aside> |
| 146 | <section id="tshirt-content" class="col-sm-7 text-center"> | 146 | <section id="tshirt-content" class="col-sm-7 text-center"> |
| 147 | <div class="switch-border-design"> | 147 | <div class="switch-border-design"> |
| 148 | <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す | 148 | <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す |
| 149 | </div> | 149 | </div> |
| 150 | <div class="tshirt-image"> | 150 | <div class="tshirt-image"> |
| 151 | <img ng-src="{{ tShirtImg }}" alt="" /> | 151 | <img ng-src="{{ tShirtImg }}" alt="" /> |
| 152 | <div id="preview-design" ng-click="modalTShirtDesign()"> | 152 | <div id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" class="{{ placeTshirt.place }}" ng-click="modalTShirtDesign()"> |
| 153 | <img ng-src="{{outputImage}}" ng-show="outputImage"/> | 153 | <img ng-src="{{outputImage}}" ng-show="outputImage"/> |
| 154 | </div> | 154 | </div> |
| 155 | </div> | 155 | </div> |
| 156 | <div class="tshirt-choice"> | 156 | <div class="tshirt-choice"> |
| 157 | <ul> | 157 | <ul> |
| 158 | <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> | 158 | <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> |
| 159 | <div>前</div> | 159 | <div>前</div> |
| 160 | <div class="image" ng-click="choiceTShirtBackFront('front')"> | 160 | <div class="image" ng-click="choiceTShirtBackFront('front')"> |
| 161 | <img ng-src="{{ tShirtImgFront }}" alt="" /> | 161 | <img ng-src="{{ tShirtImgFront }}" alt="" /> |
| 162 | </div> | 162 | </div> |
| 163 | 163 | ||
| 164 | </li> | 164 | </li> |
| 165 | <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> | 165 | <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> |
| 166 | <div>後</div> | 166 | <div>後</div> |
| 167 | <div class="image" ng-click="choiceTShirtBackFront('back')"> | 167 | <div class="image" ng-click="choiceTShirtBackFront('back')"> |
| 168 | <img ng-src="{{ tShirtImgBack }}" alt="" /> | 168 | <img ng-src="{{ tShirtImgBack }}" alt="" /> |
| 169 | </div> | 169 | </div> |
| 170 | 170 | ||
| 171 | </li> | 171 | </li> |
| 172 | </ul> | 172 | </ul> |
| 173 | </div> | 173 | </div> |
| 174 | </section> | 174 | </section> |
| 175 | </article> | 175 | </article> |
| 176 | <footer class="clearfix"> | 176 | <footer class="clearfix"> |
| 177 | <ul class="nav-footer"> | 177 | <ul class="nav-footer"> |
| 178 | <li><a href="#">店舗検索</a></li> | 178 | <li><a href="#">店舗検索</a></li> |
| 179 | <li><a href="#">お客様窓口</a></li> | 179 | <li><a href="#">お客様窓口</a></li> |
| 180 | <li><a href="#">企業情報</a></li> | 180 | <li><a href="#">企業情報</a></li> |
| 181 | <li><a href="#">採用情報</a></li> | 181 | <li><a href="#">採用情報</a></li> |
| 182 | <li><a href="#">プライバシーポリシー</a></li> | 182 | <li><a href="#">プライバシーポリシー</a></li> |
| 183 | </ul> | 183 | </ul> |
| 184 | </footer> | 184 | </footer> |
| 185 | 185 | ||
| 186 | <!--MODAL CONTENT--> | 186 | <!--MODAL CONTENT--> |
| 187 | <div ng-include="designFrameView"></div> | 187 | <div ng-include="designFrameView"></div> |
| 188 | </div> | 188 | </div> |
| 189 | 189 | ||
| 190 | 190 | ||
| 191 | </div> | 191 | </div> |
| 192 | 192 |