Commit 19a110aefd30095fddbf17f340c1f8f9aceb6122
1 parent
862daa8a45
Exists in
master
and in
2 other branches
add css
Showing 2 changed files with 5 additions and 5 deletions Inline Diff
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 | body { | 3 | body { |
| 4 | font-family: 'Hiragino Kaku Gothic Pro'; | 4 | font-family: 'Hiragino Kaku Gothic Pro'; |
| 5 | 5 | ||
| 6 | } | 6 | } |
| 7 | .padding-right-0{ | 7 | .padding-right-0{ |
| 8 | padding-right: 0!important; | 8 | padding-right: 0!important; |
| 9 | } | 9 | } |
| 10 | .padding-left-0{ | 10 | .padding-left-0{ |
| 11 | padding-left: 0!important; | 11 | padding-left: 0!important; |
| 12 | } | 12 | } |
| 13 | button.red{ | 13 | button.red{ |
| 14 | color: #ffffff; | 14 | color: #ffffff; |
| 15 | background-color: #ff0000; | 15 | background-color: #ff0000; |
| 16 | border: 1px solid #ff0000; | 16 | border: 1px solid #ff0000; |
| 17 | 17 | ||
| 18 | } | 18 | } |
| 19 | button.white{ | 19 | button.white{ |
| 20 | border: 1px solid #ff8080; | 20 | border: 1px solid #ff8080; |
| 21 | color: #ff8080; | 21 | color: #ff8080; |
| 22 | background-color: #ffffff; | 22 | background-color: #ffffff; |
| 23 | } | 23 | } |
| 24 | button.brown{ | 24 | button.brown{ |
| 25 | background-color: #666666; | 25 | background-color: #666666; |
| 26 | border: 1px solid #666666; | 26 | border: 1px solid #666666; |
| 27 | color: #ffffff; | 27 | color: #ffffff; |
| 28 | border-radius: 5px; | 28 | border-radius: 5px; |
| 29 | } | 29 | } |
| 30 | button.black{ | 30 | button.black{ |
| 31 | border: 1px solid #c9c9c9; | 31 | border: 1px solid #c9c9c9; |
| 32 | background-color: #343434; | 32 | background-color: #343434; |
| 33 | color: #ffffff; | 33 | color: #ffffff; |
| 34 | padding: 1px 6px; | 34 | padding: 1px 6px; |
| 35 | } | 35 | } |
| 36 | #tshirt-container{ | 36 | #tshirt-container{ |
| 37 | border-left: 1px solid #dcdcdc; | 37 | border-left: 1px solid #dcdcdc; |
| 38 | border-right: 1px solid #dcdcdc; | 38 | border-right: 1px solid #dcdcdc; |
| 39 | } | 39 | } |
| 40 | /*HEADER*/ | 40 | /*HEADER*/ |
| 41 | header{ | 41 | header{ |
| 42 | border-bottom: 1px solid #dcdcdc; | 42 | border-bottom: 1px solid #dcdcdc; |
| 43 | } | 43 | } |
| 44 | header .logo{ | 44 | header .logo{ |
| 45 | color: #ed1d24; | 45 | color: #ed1d24; |
| 46 | font-size: 30px; | 46 | font-size: 30px; |
| 47 | text-transform: uppercase; | 47 | text-transform: uppercase; |
| 48 | font-weight: bold; | 48 | font-weight: bold; |
| 49 | } | 49 | } |
| 50 | header .logo img{ | 50 | header .logo img{ |
| 51 | width: 60px; | 51 | width: 60px; |
| 52 | } | 52 | } |
| 53 | /*NAVIGATION*/ | 53 | /*NAVIGATION*/ |
| 54 | nav{ | 54 | nav{ |
| 55 | border-bottom: 1px solid #dcdcdc; | 55 | border-bottom: 1px solid #dcdcdc; |
| 56 | padding: 10px 0; | 56 | padding: 10px 0; |
| 57 | } | 57 | } |
| 58 | nav h2{ | 58 | nav h2{ |
| 59 | font-size: 27px; | 59 | font-size: 27px; |
| 60 | margin: 0 0; | 60 | margin: 0 0; |
| 61 | } | 61 | } |
| 62 | nav ul{ | 62 | nav ul{ |
| 63 | list-style: none; | 63 | list-style: none; |
| 64 | padding-left: 0; | 64 | padding-left: 0; |
| 65 | margin-bottom: 0; | 65 | margin-bottom: 0; |
| 66 | } | 66 | } |
| 67 | nav ul li{ | 67 | nav ul li{ |
| 68 | margin-left: 2px; | 68 | margin-left: 2px; |
| 69 | float: left; | 69 | float: left; |
| 70 | padding: 6px 12px; | 70 | padding: 6px 12px; |
| 71 | background-color: #999999; | 71 | background-color: #999999; |
| 72 | } | 72 | } |
| 73 | nav ul li a{ | 73 | nav ul li a{ |
| 74 | color: #ffffff; | 74 | color: #ffffff; |
| 75 | } | 75 | } |
| 76 | nav ul li.action{ | 76 | nav ul li.action{ |
| 77 | color: #ffffff; | 77 | color: #ffffff; |
| 78 | background-color: #ed1d24; | 78 | background-color: #ed1d24; |
| 79 | } | 79 | } |
| 80 | /*ASIDE*/ | 80 | /*ASIDE*/ |
| 81 | aside{ | 81 | aside{ |
| 82 | margin: 10px 0; | 82 | margin: 10px 0; |
| 83 | } | 83 | } |
| 84 | 84 | ||
| 85 | aside .break-down{ | 85 | aside .break-down{ |
| 86 | padding: 0 0; | 86 | padding: 0 0; |
| 87 | } | 87 | } |
| 88 | aside .break-down i.fa{ | 88 | aside .break-down i.fa{ |
| 89 | font-size: 35px; | 89 | font-size: 35px; |
| 90 | color: #ff0000; | 90 | color: #ff0000; |
| 91 | } | 91 | } |
| 92 | aside .break-line{ | 92 | aside .break-line{ |
| 93 | 93 | height: 10px; | |
| 94 | } | 94 | } |
| 95 | aside .break-line hr{ | 95 | aside .break-line hr{ |
| 96 | border-top: 1px dotted #cccccc; | 96 | border-top: 1px dotted #cccccc; |
| 97 | } | 97 | } |
| 98 | aside .step{ | 98 | aside .step{ |
| 99 | margin: 0 0; | 99 | margin: 0 0; |
| 100 | } | 100 | } |
| 101 | aside .step .title{ | 101 | aside .step .title{ |
| 102 | font-size: 15px; | 102 | font-size: 15px; |
| 103 | line-height: 16px; | 103 | line-height: 16px; |
| 104 | font-weight: bold; | 104 | font-weight: bold; |
| 105 | margin-bottom: 3px; | 105 | margin-bottom: 3px; |
| 106 | } | 106 | } |
| 107 | aside .step .title-notice{ | 107 | aside .step .title-notice{ |
| 108 | font-size: 13px; | 108 | font-size: 13px; |
| 109 | line-height: 16px; | 109 | line-height: 16px; |
| 110 | margin-bottom: 3px; | 110 | margin-bottom: 3px; |
| 111 | } | 111 | } |
| 112 | aside .step .title-notice .require{ | 112 | aside .step .title-notice .require{ |
| 113 | font-size: 10px; | 113 | font-size: 10px; |
| 114 | } | 114 | } |
| 115 | aside .step .step-box{ | 115 | aside .step .step-box{ |
| 116 | border: 2px solid #dcdcdc; | 116 | border: 2px solid #dcdcdc; |
| 117 | font-size: 12px; | 117 | font-size: 12px; |
| 118 | 118 | ||
| 119 | } | 119 | } |
| 120 | /*Step 1*/ | 120 | /*Step 1*/ |
| 121 | aside .step .step-box .tshirt-design{ | 121 | aside .step .step-box .tshirt-design{ |
| 122 | border: 1px solid #cccccc; | 122 | border: 1px solid #cccccc; |
| 123 | background-color: #f5f5f5; | 123 | background-color: #f5f5f5; |
| 124 | margin: 10px 10px; | 124 | margin: 10px 10px; |
| 125 | } | 125 | } |
| 126 | aside .step .step-box .tshirt-design div{ | 126 | aside .step .step-box .tshirt-design div{ |
| 127 | float: left; | 127 | float: left; |
| 128 | } | 128 | } |
| 129 | aside .step .step-box .tshirt-design .icon{ | 129 | aside .step .step-box .tshirt-design .icon{ |
| 130 | padding: 4px 4px; | 130 | padding: 4px 4px; |
| 131 | border-right: 1px solid #cccccc; | 131 | border-right: 1px solid #cccccc; |
| 132 | 132 | ||
| 133 | } | 133 | } |
| 134 | aside .step .step-box .tshirt-design .icon img{ | 134 | aside .step .step-box .tshirt-design .icon img{ |
| 135 | height: 50px; | 135 | height: 50px; |
| 136 | } | 136 | } |
| 137 | aside .step .step-box .tshirt-design .name{ | 137 | aside .step .step-box .tshirt-design .name{ |
| 138 | padding: 10px 10px; | 138 | padding: 10px 10px; |
| 139 | 139 | ||
| 140 | } | 140 | } |
| 141 | aside .step .step-box .tshirt-design .action{ | 141 | aside .step .step-box .tshirt-design .action{ |
| 142 | padding: 10px 10px; | 142 | padding: 10px 10px; |
| 143 | float: right; | 143 | float: right; |
| 144 | 144 | ||
| 145 | } | 145 | } |
| 146 | aside .step .step-box .tshirt-design .action button{ | 146 | aside .step .step-box .tshirt-design .action button{ |
| 147 | padding: 8px 10px; | 147 | padding: 8px 10px; |
| 148 | } | 148 | } |
| 149 | /*Step 2*/ | 149 | /*Step 2*/ |
| 150 | aside .step .step-box .tshirt-color{ | 150 | aside .step .step-box .tshirt-color{ |
| 151 | padding: 6px 10px; | 151 | padding: 6px 10px; |
| 152 | position: relative; | 152 | position: relative; |
| 153 | } | 153 | } |
| 154 | aside .step .step-box .tshirt-color ul.choice-color{ | 154 | aside .step .step-box .tshirt-color ul.choice-color{ |
| 155 | float: left; | 155 | float: left; |
| 156 | list-style: none; | 156 | list-style: none; |
| 157 | padding-left: 0; | 157 | padding-left: 0; |
| 158 | width: 100%; | 158 | width: 100%; |
| 159 | margin-bottom: 3px; | 159 | margin-bottom: 3px; |
| 160 | } | 160 | } |
| 161 | aside .step .step-box .tshirt-color ul.choice-color li{ | 161 | aside .step .step-box .tshirt-color ul.choice-color li{ |
| 162 | margin: 0 10px 0 0; | 162 | margin: 0 10px 0 0; |
| 163 | border: 1px solid #cccccc; | 163 | border: 1px solid #cccccc; |
| 164 | padding: 2px 2px; | 164 | padding: 2px 2px; |
| 165 | float: left; | 165 | float: left; |
| 166 | } | 166 | } |
| 167 | aside .step .step-box .tshirt-color ul.choice-color li div{ | 167 | aside .step .step-box .tshirt-color ul.choice-color li div{ |
| 168 | height: 30px; | 168 | height: 30px; |
| 169 | width: 30px; | 169 | width: 30px; |
| 170 | } | 170 | } |
| 171 | 171 | ||
| 172 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ | 172 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ |
| 173 | background-color: #ece7e4; | 173 | background-color: #ece7e4; |
| 174 | } | 174 | } |
| 175 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ | 175 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ |
| 176 | background-color: #e7dfd0; | 176 | background-color: #e7dfd0; |
| 177 | } | 177 | } |
| 178 | aside .step .step-box .tshirt-color .color-name{ | 178 | aside .step .step-box .tshirt-color .color-name{ |
| 179 | width: 100%; | 179 | width: 100%; |
| 180 | font-size: 10px; | 180 | font-size: 10px; |
| 181 | } | 181 | } |
| 182 | aside .step .step-box .tshirt-color .view-more{ | 182 | aside .step .step-box .tshirt-color .view-more{ |
| 183 | position: absolute; | 183 | position: absolute; |
| 184 | bottom: 6px; | 184 | bottom: 6px; |
| 185 | right: 10px; | 185 | right: 10px; |
| 186 | } | 186 | } |
| 187 | /*Step 3*/ | 187 | /*Step 3*/ |
| 188 | aside .step .step-box .tshirt-saveorder{ | 188 | aside .step .step-box .tshirt-saveorder{ |
| 189 | padding: 10px 10px 6px 10px; | 189 | padding: 10px 10px 6px 10px; |
| 190 | } | 190 | } |
| 191 | aside .step .step-box .tshirt-saveorder .action{ | 191 | aside .step .step-box .tshirt-saveorder .action{ |
| 192 | width: 50%; | 192 | width: 50%; |
| 193 | float: left; | 193 | float: left; |
| 194 | } | 194 | } |
| 195 | aside .step .step-box .tshirt-saveorder .action:first-child{ | 195 | aside .step .step-box .tshirt-saveorder .action:first-child{ |
| 196 | padding-right: 5px; | 196 | padding-right: 5px; |
| 197 | } | 197 | } |
| 198 | aside .step .step-box .tshirt-saveorder .action:last-child{ | 198 | aside .step .step-box .tshirt-saveorder .action:last-child{ |
| 199 | padding-left: 5px; | 199 | padding-left: 5px; |
| 200 | } | 200 | } |
| 201 | aside .step .step-box .tshirt-saveorder .action button{ | 201 | aside .step .step-box .tshirt-saveorder .action button{ |
| 202 | padding: 8px 10px; | 202 | padding: 8px 10px; |
| 203 | 203 | ||
| 204 | } | 204 | } |
| 205 | aside .step .step-box .tshirt-saveorder .action button .text{ | 205 | aside .step .step-box .tshirt-saveorder .action button .text{ |
| 206 | float: left; | 206 | float: left; |
| 207 | width: 80%; | 207 | width: 80%; |
| 208 | text-align: center; | 208 | text-align: center; |
| 209 | padding-left: 10px; | 209 | padding-left: 10px; |
| 210 | vertical-align: bottom; | 210 | vertical-align: bottom; |
| 211 | } | 211 | } |
| 212 | aside .step .step-box .tshirt-saveorder .action button .arrow{ | 212 | aside .step .step-box .tshirt-saveorder .action button .arrow{ |
| 213 | float: left; | 213 | float: left; |
| 214 | width: 20%; | 214 | width: 20%; |
| 215 | height: 40px; | 215 | height: 40px; |
| 216 | position: relative; | 216 | position: relative; |
| 217 | } | 217 | } |
| 218 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ | 218 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ |
| 219 | position: absolute; | 219 | position: absolute; |
| 220 | top: 50%; | 220 | top: 50%; |
| 221 | right: -6px; | 221 | right: -6px; |
| 222 | transform: translateX(-50%) translateY(-50%); | 222 | transform: translateX(-50%) translateY(-50%); |
| 223 | -webkit-transform: translateX(-50%) translateY(-50%); | 223 | -webkit-transform: translateX(-50%) translateY(-50%); |
| 224 | } | 224 | } |
| 225 | aside .step .step-box .tshirt-saveorder .notice{ | 225 | aside .step .step-box .tshirt-saveorder .notice{ |
| 226 | padding: 5px 0 0 0; | 226 | padding: 5px 0 0 0; |
| 227 | } | 227 | } |
| 228 | /*Step 4*/ | 228 | /*Step 4*/ |
| 229 | aside .step .title-notice{ | 229 | aside .step .title-notice{ |
| 230 | 230 | ||
| 231 | } | 231 | } |
| 232 | aside .step .step-box .change-design{ | 232 | aside .step .step-box .change-design{ |
| 233 | padding: 4px 4px; | 233 | padding: 4px 4px; |
| 234 | } | 234 | } |
| 235 | aside .step .step-box .change-design table{ | 235 | aside .step .step-box .change-design table{ |
| 236 | 236 | ||
| 237 | } | 237 | } |
| 238 | aside .step .step-box .change-design table tr{ | 238 | aside .step .step-box .change-design table tr{ |
| 239 | border-bottom: 1px dotted #cccccc; | 239 | border-bottom: 1px dotted #cccccc; |
| 240 | } | 240 | } |
| 241 | aside .step .step-box .change-design table tr:last-child{ | 241 | aside .step .step-box .change-design table tr:last-child{ |
| 242 | border-bottom: 0; | 242 | border-bottom: 0; |
| 243 | } | 243 | } |
| 244 | 244 | ||
| 245 | /*Step 5- finish*/ | 245 | /*Step 5- finish*/ |
| 246 | aside .step .finish-design{ | 246 | aside .step .finish-design{ |
| 247 | padding: 20px 0; | 247 | padding: 20px 0; |
| 248 | } | 248 | } |
| 249 | aside .step .finish-design button{ | 249 | aside .step .finish-design button{ |
| 250 | width: 100%; | 250 | width: 100%; |
| 251 | padding: 8px 10px; | 251 | padding: 8px 10px; |
| 252 | } | 252 | } |
| 253 | 253 | ||
| 254 | /*DESIGN CONTENT*/ | 254 | /*DESIGN CONTENT*/ |
| 255 | #tshirt-content{ | 255 | #tshirt-content{ |
| 256 | position: relative; | 256 | position: relative; |
| 257 | } | 257 | } |
| 258 | #tshirt-content .switch-border-design{ | 258 | #tshirt-content .switch-border-design{ |
| 259 | position: absolute; | 259 | position: absolute; |
| 260 | top: 5px; | 260 | top: 5px; |
| 261 | right: 10px; | 261 | right: 10px; |
| 262 | color: red; | 262 | color: red; |
| 263 | font-size: 11px; | 263 | font-size: 11px; |
| 264 | } | 264 | } |
| 265 | #tshirt-content .tshirt-image{ | 265 | #tshirt-content .tshirt-image{ |
| 266 | padding: 20px 0; | 266 | padding: 20px 0 0 0; |
| 267 | } | 267 | } |
| 268 | #tshirt-content .tshirt-choice{ | 268 | #tshirt-content .tshirt-choice{ |
| 269 | 269 | ||
| 270 | } | 270 | } |
| 271 | #tshirt-content .tshirt-choice ul{ | 271 | #tshirt-content .tshirt-choice ul{ |
| 272 | list-style: none; | 272 | list-style: none; |
| 273 | padding-left: 0; | 273 | padding-left: 0; |
| 274 | display: table; | 274 | display: table; |
| 275 | margin: auto; | 275 | margin: auto; |
| 276 | } | 276 | } |
| 277 | #tshirt-content .tshirt-choice ul li{ | 277 | #tshirt-content .tshirt-choice ul li{ |
| 278 | float: left; | 278 | float: left; |
| 279 | 279 | ||
| 280 | margin: 10px 10px; | 280 | margin: 10px 10px; |
| 281 | } | 281 | } |
| 282 | #tshirt-content .tshirt-choice ul li .image{ | 282 | #tshirt-content .tshirt-choice ul li .image{ |
| 283 | border: 1px solid #cccccc; | 283 | border: 1px solid #cccccc; |
| 284 | padding: 3px 3px; | 284 | padding: 3px 3px; |
| 285 | } | 285 | } |
| 286 | #tshirt-content .tshirt-choice ul li.focus{ | 286 | #tshirt-content .tshirt-choice ul li.focus{ |
| 287 | 287 | ||
| 288 | } | 288 | } |
| 289 | #tshirt-content .tshirt-choice ul li.focus .image{ | 289 | #tshirt-content .tshirt-choice ul li.focus .image{ |
| 290 | border: 1px solid #ff0000; | 290 | border: 1px solid #ff0000; |
| 291 | } | 291 | } |
| 292 | /*MODAL Design*/ | 292 | /*MODAL Design*/ |
| 293 | #tshirt-design{ | 293 | #tshirt-design{ |
| 294 | background-color: #666666; | 294 | background-color: #666666; |
| 295 | } | 295 | } |
| 296 | #tshirt-design .modal-dialog{ | 296 | #tshirt-design .modal-dialog{ |
| 297 | width: 75%; | 297 | width: 75%; |
| 298 | margin: 0 auto; | 298 | margin: 0 auto; |
| 299 | } | 299 | } |
| 300 | #tshirt-design .modal-dialog .modal-content{ | 300 | #tshirt-design .modal-dialog .modal-content{ |
| 301 | background-color: transparent; | 301 | background-color: transparent; |
| 302 | border-radius: 0; | 302 | border-radius: 0; |
| 303 | border: 0; | 303 | border: 0; |
| 304 | 304 | ||
| 305 | } | 305 | } |
| 306 | #tshirt-design .modal-dialog .modal-content .modal-header{ | 306 | #tshirt-design .modal-dialog .modal-content .modal-header{ |
| 307 | padding: 0 0 10px 0; | 307 | padding: 0 0 10px 0; |
| 308 | border-bottom: 0; | 308 | border-bottom: 0; |
| 309 | border-shadow: none!important; | 309 | border-shadow: none!important; |
| 310 | } | 310 | } |
| 311 | #tshirt-design .modal-dialog .modal-content .modal-body{ | 311 | #tshirt-design .modal-dialog .modal-content .modal-body{ |
| 312 | background-color: #f5f5f5; | 312 | background-color: #f5f5f5; |
| 313 | padding: 0 0; | 313 | padding: 0 0; |
| 314 | } | 314 | } |
| 315 | #tshirt-design header{ | 315 | #tshirt-design header{ |
| 316 | border-bottom: 1px solid #cccccc; | 316 | border-bottom: 1px solid #cccccc; |
| 317 | background-color: #dddddd; | 317 | background-color: #dddddd; |
| 318 | } | 318 | } |
| 319 | #tshirt-design header ul.nav{ | 319 | #tshirt-design header ul.nav{ |
| 320 | padding-left: 0; | 320 | padding-left: 0; |
| 321 | list-style: none; | 321 | list-style: none; |
| 322 | } | 322 | } |
| 323 | #tshirt-design header ul.nav li{ | 323 | #tshirt-design header ul.nav li{ |
| 324 | float: left; | 324 | float: left; |
| 325 | padding: 8px 26px; | 325 | padding: 8px 26px; |
| 326 | border-right: 1px solid #cccccc; | 326 | border-right: 1px solid #cccccc; |
| 327 | font-size: 14px; | 327 | font-size: 14px; |
| 328 | cursor: pointer; | 328 | cursor: pointer; |
| 329 | } | 329 | } |
| 330 | #tshirt-design header ul.nav li:hover{ | 330 | #tshirt-design header ul.nav li:hover{ |
| 331 | background-color: red; | 331 | background-color: red; |
| 332 | color: #ffffff; | 332 | color: #ffffff; |
| 333 | } | 333 | } |
| 334 | #tshirt-design header ul.nav li:hover i.fa{ | 334 | #tshirt-design header ul.nav li:hover i.fa{ |
| 335 | color: #ffffff; | 335 | color: #ffffff; |
| 336 | } | 336 | } |
| 337 | #tshirt-design header ul.nav li i.fa{ | 337 | #tshirt-design header ul.nav li i.fa{ |
| 338 | color: #fe070f; | 338 | color: #fe070f; |
| 339 | font-size: 20px; | 339 | font-size: 20px; |
| 340 | margin-right: 10px; | 340 | margin-right: 10px; |
| 341 | } | 341 | } |
| 342 | #tshirt-design header .action{ | 342 | #tshirt-design header .action{ |
| 343 | 343 | ||
| 344 | } | 344 | } |
| 345 | #tshirt-design header .action button{ | 345 | #tshirt-design header .action button{ |
| 346 | padding: 3px 10px; | 346 | padding: 2px 10px; |
| 347 | margin: 7px 10px; | 347 | margin: 6px 10px; |
| 348 | } | 348 | } |
| 349 | #tshirt-design header .action button:hover{ | 349 | #tshirt-design header .action button:hover{ |
| 350 | background-color: red; | 350 | background-color: red; |
| 351 | color: #ffffff; | 351 | color: #ffffff; |
| 352 | } | 352 | } |
| 353 | 353 | ||
| 354 | /*Aside modal*/ | 354 | /*Aside modal*/ |
| 355 | .aside{ | 355 | .aside{ |
| 356 | } | 356 | } |
| 357 | .aside #choice-design-option{ | 357 | .aside #choice-design-option{ |
| 358 | list-style: none; | 358 | list-style: none; |
| 359 | padding-left: 0; | 359 | padding-left: 0; |
| 360 | margin-top: 10px; | 360 | margin-top: 10px; |
| 361 | 361 | ||
| 362 | } | 362 | } |
| 363 | .aside #choice-design-option li{ | 363 | .aside #choice-design-option li{ |
| 364 | border: 1px solid #cdcdcd; | 364 | border: 1px solid #cdcdcd; |
| 365 | } | 365 | } |
| 366 | .aside #choice-design-option li .hover{ | 366 | .aside #choice-design-option li .hover{ |
| 367 | background-color: #fddad4; | 367 | background-color: #fddad4; |
| 368 | opacity: 0.5; | 368 | opacity: 0.5; |
| 369 | display: none; | 369 | display: none; |
| 370 | } | 370 | } |
| 371 | .aside #choice-design-option li:hover .hover{ | 371 | .aside #choice-design-option li:hover .hover{ |
| 372 | display: block; | 372 | display: block; |
| 373 | } | 373 | } |
| 374 | 374 | ||
| 375 | .aside #choice-design-option li .title{ | 375 | .aside #choice-design-option li .title{ |
| 376 | background: url("../images/bg1.png") repeat #cdcdcd; | 376 | background: url("../images/bg1.png") repeat #cdcdcd; |
| 377 | padding: 3px 10px; | 377 | padding: 3px 10px; |
| 378 | } | 378 | } |
| 379 | .aside #choice-design-option li .title i.fa{ | 379 | .aside #choice-design-option li .title i.fa{ |
| 380 | color: #000000; | 380 | color: #000000; |
| 381 | } | 381 | } |
| 382 | 382 | ||
| 383 | .aside #choice-design-option li .content{ | 383 | .aside #choice-design-option li .content{ |
| 384 | 384 | ||
| 385 | } | 385 | } |
| 386 | .aside #choice-design-option li .content i.fa{ | 386 | .aside #choice-design-option li .content i.fa{ |
| 387 | font-size: 30px; | 387 | font-size: 30px; |
| 388 | color: #fe070f; | 388 | color: #fe070f; |
| 389 | margin: 8px 0; | 389 | margin: 8px 0; |
| 390 | } | 390 | } |
| 391 | .aside #choice-design-option li .content .des{ | 391 | .aside #choice-design-option li .content .des{ |
| 392 | padding: 3px 10px 3px 0; | 392 | padding: 3px 10px 3px 0; |
| 393 | } | 393 | } |
| 394 | 394 | ||
| 395 | /*Design content*/ | 395 | /*Design content*/ |
| 396 | .tshirt-design-container{ | 396 | .tshirt-design-container{ |
| 397 | position: relative; | 397 | position: relative; |
| 398 | } | 398 | } |
| 399 | .tshirt-design-container .design-content{ | 399 | .tshirt-design-container .design-content{ |
| 400 | padding: 10px 50px 10px 25px; | 400 | padding: 10px 50px 10px 25px; |
| 401 | } | 401 | } |
| 402 | .tshirt-design-container .design-content .content{ | 402 | .tshirt-design-container .design-content .content{ |
| 403 | width: 100%; | 403 | width: 100%; |
| 404 | min-height: 650px; | 404 | min-height: 650px; |
| 405 | background-color: #f0efea; | 405 | background-color: #f0efea; |
| 406 | padding: 40px 85px; | 406 | padding: 40px 85px; |
| 407 | height: 100%; | 407 | height: 100%; |
| 408 | } | 408 | } |
| 409 | .tshirt-design-container .design-content .content .selection-design{ | 409 | .tshirt-design-container .design-content .content .selection-design{ |
| 410 | border: 1px solid #ff0000; | 410 | border: 1px solid #ff0000; |
| 411 | width: 100%; | 411 | width: 100%; |
| 412 | height: 620px; | 412 | height: 620px; |
| 413 | } | 413 | } |
| 414 | .tshirt-design-container .agree-design{ | 414 | .tshirt-design-container .agree-design{ |
| 415 | position: absolute; | 415 | position: absolute; |
| 416 | right: -16px; | 416 | right: -16px; |
| 417 | top: 40%; | 417 | top: 40%; |
| 418 | } | 418 | } |
| 419 | .tshirt-design-container .trash-design{ | 419 | .tshirt-design-container .trash-design{ |
| 420 | position: absolute; | 420 | position: absolute; |
| 421 | right: 5px; | 421 | right: 5px; |
| 422 | bottom: 0; | 422 | bottom: 0; |
| 423 | } | 423 | } |
| 424 | /* Customize container */ | 424 | /* Customize container */ |
| 425 | @media (min-width: 768px) { | 425 | @media (min-width: 768px) { |
| 426 | .container { | 426 | .container { |
| 427 | /*max-width: 730px;*/ | 427 | /*max-width: 730px;*/ |
| 428 | } | 428 | } |
| 429 | } | 429 | } |
| 430 | 430 | ||
| 431 | /* Responsive: Portrait tablets and up */ | 431 | /* Responsive: Portrait tablets and up */ |
| 432 | @media screen and (min-width: 768px) { | 432 | @media screen and (min-width: 768px) { |
| 433 | /* Remove the padding we set earlier */ | 433 | /* Remove the padding we set earlier */ |
| 434 | 434 | ||
| 435 | } | 435 | } |
| 436 | 436 |
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/uniqlo_logo.png" alt="Logo Uniqlo" /> | 5 | <img src="images/uniqlo_logo.png" alt="Logo Uniqlo" /> |
| 6 | Uniqlo Customize | 6 | Uniqlo Customize |
| 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></li> | 13 | <li><a href="#">商品に戻る</a></li> |
| 14 | <li><a href="#">加工方法に戻る</a></li> | 14 | <li><a href="#">加工方法に戻る</a></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> | 19 | <article> |
| 20 | 20 | ||
| 21 | <aside class="col-sm-5"> | 21 | <aside class="col-sm-5"> |
| 22 | <div class="step"> | 22 | <div class="step"> |
| 23 | <div class="title"> | 23 | <div class="title"> |
| 24 | 1. デザインを作る | 24 | 1. デザインを作る |
| 25 | </div> | 25 | </div> |
| 26 | <div class="step-box"> | 26 | <div class="step-box"> |
| 27 | <div class="tshirt-design clearfix"> | 27 | <div class="tshirt-design clearfix"> |
| 28 | <div class="icon"> | 28 | <div class="icon"> |
| 29 | <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> | 29 | <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> |
| 30 | </div> | 30 | </div> |
| 31 | <div class="name"> | 31 | <div class="name"> |
| 32 | 背中背中 (28x22) | 32 | 背中背中 (28x22) |
| 33 | </div> | 33 | </div> |
| 34 | <div class="action"> | 34 | <div class="action"> |
| 35 | <button class="red" ng-click="modalTShirtDesign()"> | 35 | <button class="red" ng-click="modalTShirtDesign()"> |
| 36 | <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る | 36 | <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る |
| 37 | </button> | 37 | </button> |
| 38 | </div> | 38 | </div> |
| 39 | </div> | 39 | </div> |
| 40 | </div> | 40 | </div> |
| 41 | </div> | 41 | </div> |
| 42 | 42 | ||
| 43 | <!-- BREAK DOWN--> | 43 | <!-- BREAK DOWN--> |
| 44 | <div class="text-center break-down"> | 44 | <div class="text-center break-down"> |
| 45 | <img src="images/bg_step_arrow.gif" alt="arrow" /> | 45 | <img src="images/bg_step_arrow.gif" alt="arrow" /> |
| 46 | </div> | 46 | </div> |
| 47 | 47 | ||
| 48 | <!-- STEP 2--> | 48 | <!-- STEP 2--> |
| 49 | <div class="step"> | 49 | <div class="step"> |
| 50 | <div class="title"> | 50 | <div class="title"> |
| 51 | 2.アイテムカラーを変更する | 51 | 2.アイテムカラーを変更する |
| 52 | </div> | 52 | </div> |
| 53 | <div class="step-box clearfix"> | 53 | <div class="step-box clearfix"> |
| 54 | <div class="tshirt-color"> | 54 | <div class="tshirt-color"> |
| 55 | <ul class="choice-color clearfix"> | 55 | <ul class="choice-color clearfix"> |
| 56 | <li class="white"><div></div></li> | 56 | <li class="white"><div></div></li> |
| 57 | <li class="blue"><div></div></li> | 57 | <li class="blue"><div></div></li> |
| 58 | </ul> | 58 | </ul> |
| 59 | <div class="color-name"> | 59 | <div class="color-name"> |
| 60 | color: 00 WHITE | 60 | color: 00 WHITE |
| 61 | </div> | 61 | </div> |
| 62 | <div class="view-more"> | 62 | <div class="view-more"> |
| 63 | 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 63 | 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 64 | </div> | 64 | </div> |
| 65 | </div> | 65 | </div> |
| 66 | </div> | 66 | </div> |
| 67 | </div> | 67 | </div> |
| 68 | 68 | ||
| 69 | <!-- BREAK DOWN--> | 69 | <!-- BREAK DOWN--> |
| 70 | <div class="text-center break-down"> | 70 | <div class="text-center break-down"> |
| 71 | <img src="images/bg_step_arrow.gif" alt="arrow" /> | 71 | <img src="images/bg_step_arrow.gif" alt="arrow" /> |
| 72 | </div> | 72 | </div> |
| 73 | 73 | ||
| 74 | <!-- STEP 3--> | 74 | <!-- STEP 3--> |
| 75 | <div class="step"> | 75 | <div class="step"> |
| 76 | <div class="step-box clearfix"> | 76 | <div class="step-box clearfix"> |
| 77 | <div class="tshirt-saveorder"> | 77 | <div class="tshirt-saveorder"> |
| 78 | <div class="clearfix"> | 78 | <div class="clearfix"> |
| 79 | <div class="action"> | 79 | <div class="action"> |
| 80 | <button class="white"> | 80 | <button class="white"> |
| 81 | <div class="text"> | 81 | <div class="text"> |
| 82 | このデザインを保存する | 82 | このデザインを保存する |
| 83 | </div> | 83 | </div> |
| 84 | <div class="arrow"> | 84 | <div class="arrow"> |
| 85 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 85 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 86 | </div> | 86 | </div> |
| 87 | </button> | 87 | </button> |
| 88 | </div> | 88 | </div> |
| 89 | <div class="action"> | 89 | <div class="action"> |
| 90 | <button class="red"> | 90 | <button class="red"> |
| 91 | <div class="text"> | 91 | <div class="text"> |
| 92 | このデザインで注文する | 92 | このデザインで注文する |
| 93 | </div> | 93 | </div> |
| 94 | <div class="arrow clearfix"> | 94 | <div class="arrow clearfix"> |
| 95 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 95 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 96 | </div> | 96 | </div> |
| 97 | </button> | 97 | </button> |
| 98 | </div> | 98 | </div> |
| 99 | </div> | 99 | </div> |
| 100 | <div class="notice"> | 100 | <div class="notice"> |
| 101 | デザインを保存するには、ログインしてください | 101 | デザインを保存するには、ログインしてください |
| 102 | </div> | 102 | </div> |
| 103 | </div> | 103 | </div> |
| 104 | </div> | 104 | </div> |
| 105 | 105 | ||
| 106 | <!-- BREAL LINE--> | 106 | <!-- BREAL LINE--> |
| 107 | <div class="text-center break-line"> | 107 | <div class="text-center break-line"> |
| 108 | <hr /> | 108 | <hr /> |
| 109 | </div> | 109 | </div> |
| 110 | 110 | ||
| 111 | <!-- STEP 4--> | 111 | <!-- STEP 4--> |
| 112 | <div class="step"> | 112 | <div class="step"> |
| 113 | <div class="title-notice"> | 113 | <div class="title-notice"> |
| 114 | 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> | 114 | 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> |
| 115 | </div> | 115 | </div> |
| 116 | <div class="step-box"> | 116 | <div class="step-box"> |
| 117 | <div class="change-design"> | 117 | <div class="change-design"> |
| 118 | <table> | 118 | <table> |
| 119 | <tr> | 119 | <tr> |
| 120 | <td class="text-center">商品</td> | 120 | <td class="text-center">商品</td> |
| 121 | <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> | 121 | <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> |
| 122 | <td class="text-right"> | 122 | <td class="text-right"> |
| 123 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | 123 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> |
| 124 | </td> | 124 | </td> |
| 125 | </tr> | 125 | </tr> |
| 126 | <tr> | 126 | <tr> |
| 127 | <td width="10%" class="text-center">加工方法</td> | 127 | <td width="10%" class="text-center">加工方法</td> |
| 128 | <td width="70%">シルク：胸中央 (27×27)</td> | 128 | <td width="70%">シルク：胸中央 (27×27)</td> |
| 129 | <td width="20%" class="text-right"> | 129 | <td width="20%" class="text-right"> |
| 130 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | 130 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> |
| 131 | </td> | 131 | </td> |
| 132 | </tr> | 132 | </tr> |
| 133 | </table> | 133 | </table> |
| 134 | </div> | 134 | </div> |
| 135 | </div> | 135 | </div> |
| 136 | </div> | 136 | </div> |
| 137 | <!-- STEP 5- finish--> | 137 | <!-- STEP 5- finish--> |
| 138 | <div class="step"> | 138 | <div class="step"> |
| 139 | <div class="finish-design"> | 139 | <div class="finish-design"> |
| 140 | <button class="white"> | 140 | <button class="white"> |
| 141 | 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 141 | 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 142 | </button> | 142 | </button> |
| 143 | </div> | 143 | </div> |
| 144 | 144 | ||
| 145 | </div> | 145 | </div> |
| 146 | </div> | 146 | </div> |
| 147 | </aside> | 147 | </aside> |
| 148 | <section id="tshirt-content" class="col-sm-7 text-center"> | 148 | <section id="tshirt-content" class="col-sm-7 text-center"> |
| 149 | <div class="switch-border-design"> | 149 | <div class="switch-border-design"> |
| 150 | <i class="fa fa-square-o" aria-hidden="true"></i> 替えます | 150 | <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す |
| 151 | </div> | 151 | </div> |
| 152 | <div class="tshirt-image"> | 152 | <div class="tshirt-image"> |
| 153 | <img src="images/t-shirt/front.png" alt="" /> | 153 | <img src="images/t-shirt/front.png" alt="" /> |
| 154 | </div> | 154 | </div> |
| 155 | <div class="tshirt-choice"> | 155 | <div class="tshirt-choice"> |
| 156 | <ul> | 156 | <ul> |
| 157 | <li class="front focus"> | 157 | <li class="front focus"> |
| 158 | <div>前</div> | 158 | <div>前</div> |
| 159 | <div class="image"> | 159 | <div class="image"> |
| 160 | <img src="images/t-shirt_icon/tshirt1-front.png" alt="" /> | 160 | <img src="images/t-shirt_icon/tshirt1-front.png" alt="" /> |
| 161 | </div> | 161 | </div> |
| 162 | 162 | ||
| 163 | </li> | 163 | </li> |
| 164 | <li class="back"> | 164 | <li class="back"> |
| 165 | <div>後</div> | 165 | <div>後</div> |
| 166 | <div class="image"> | 166 | <div class="image"> |
| 167 | <img src="images/t-shirt_icon/tshirt1-back.png" alt="" /> | 167 | <img src="images/t-shirt_icon/tshirt1-back.png" alt="" /> |
| 168 | </div> | 168 | </div> |
| 169 | 169 | ||
| 170 | </li> | 170 | </li> |
| 171 | </ul> | 171 | </ul> |
| 172 | </div> | 172 | </div> |
| 173 | </section> | 173 | </section> |
| 174 | 174 | ||
| 175 | </article> | 175 | </article> |
| 176 | 176 | ||
| 177 | <!--MODAL CONTENT--> | 177 | <!--MODAL CONTENT--> |
| 178 | <div ng-include="'views/tshirt-design.html'"></div> | 178 | <div ng-include="'views/tshirt-design.html'"></div> |
| 179 | </div> | 179 | </div> |
| 180 | 180 | ||
| 181 | 181 | ||
| 182 | </div> | 182 | </div> |
| 183 | 183 |