Commit 836a597e57ecba44e2886203020c7f9c61a26dde
1 parent
a56541cf95
Exists in
master
and in
2 other branches
Commit package
Showing 2 changed files with 4 additions and 1 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', sans-serif; |
| 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 | } | 67 | } |
| 68 | nav ul li{ | 68 | nav ul li{ |
| 69 | margin-left: 2px; | 69 | margin-left: 2px; |
| 70 | float: left; | 70 | float: left; |
| 71 | padding: 6px 12px; | 71 | padding: 6px 12px; |
| 72 | background-color: #999999; | 72 | background-color: #999999; |
| 73 | position: relative; | 73 | position: relative; |
| 74 | } | 74 | } |
| 75 | nav ul li i.fa{ | 75 | nav ul li i.fa{ |
| 76 | position: absolute; | 76 | position: absolute; |
| 77 | color: #ffffff; | 77 | color: #ffffff; |
| 78 | font-size: 18px; | 78 | font-size: 18px; |
| 79 | right: -4px; | 79 | right: -4px; |
| 80 | top: 50%; | 80 | top: 50%; |
| 81 | transform: translateX(-50%) translateY(-50%); | 81 | transform: translateX(-50%) translateY(-50%); |
| 82 | -webkit-transform: translateX(-50%) translateY(-50%); | 82 | -webkit-transform: translateX(-50%) translateY(-50%); |
| 83 | } | 83 | } |
| 84 | nav ul li a{ | 84 | nav ul li a{ |
| 85 | color: #ffffff; | 85 | color: #ffffff; |
| 86 | } | 86 | } |
| 87 | nav ul li:hover a{ | 87 | nav ul li:hover a{ |
| 88 | text-decoration: none; | 88 | text-decoration: none; |
| 89 | color: #ffffff; | 89 | color: #ffffff; |
| 90 | } | 90 | } |
| 91 | nav ul li.action{ | 91 | nav ul li.action{ |
| 92 | color: #ffffff; | 92 | color: #ffffff; |
| 93 | background-color: #ed1d24; | 93 | background-color: #ed1d24; |
| 94 | } | 94 | } |
| 95 | /*ASIDE*/ | 95 | /*ASIDE*/ |
| 96 | aside{ | 96 | aside{ |
| 97 | margin: 10px 0; | 97 | margin: 10px 0; |
| 98 | } | 98 | } |
| 99 | 99 | ||
| 100 | aside .break-down{ | 100 | aside .break-down{ |
| 101 | padding: 0 0; | 101 | padding: 0 0; |
| 102 | } | 102 | } |
| 103 | aside .break-down i.fa{ | 103 | aside .break-down i.fa{ |
| 104 | font-size: 35px; | 104 | font-size: 35px; |
| 105 | color: #ff0000; | 105 | color: #ff0000; |
| 106 | } | 106 | } |
| 107 | aside .break-line{ | 107 | aside .break-line{ |
| 108 | height: 10px; | 108 | height: 10px; |
| 109 | } | 109 | } |
| 110 | aside .break-line hr{ | 110 | aside .break-line hr{ |
| 111 | border-top: 1px dotted #cccccc; | 111 | border-top: 1px dotted #cccccc; |
| 112 | } | 112 | } |
| 113 | aside .step{ | 113 | aside .step{ |
| 114 | margin: 0 0; | 114 | margin: 0 0; |
| 115 | } | 115 | } |
| 116 | aside .step .title{ | 116 | aside .step .title{ |
| 117 | font-size: 15px; | 117 | font-size: 15px; |
| 118 | line-height: 16px; | 118 | line-height: 16px; |
| 119 | font-weight: bold; | 119 | font-weight: bold; |
| 120 | margin-bottom: 3px; | 120 | margin-bottom: 3px; |
| 121 | } | 121 | } |
| 122 | aside .step .title-notice{ | 122 | aside .step .title-notice{ |
| 123 | font-size: 13px; | 123 | font-size: 13px; |
| 124 | line-height: 16px; | 124 | line-height: 16px; |
| 125 | margin-bottom: 3px; | 125 | margin-bottom: 3px; |
| 126 | } | 126 | } |
| 127 | aside .step .title-notice .require{ | 127 | aside .step .title-notice .require{ |
| 128 | font-size: 10px; | 128 | font-size: 10px; |
| 129 | } | 129 | } |
| 130 | aside .step .step-box{ | 130 | aside .step .step-box{ |
| 131 | border: 2px solid #dcdcdc; | 131 | border: 2px solid #dcdcdc; |
| 132 | font-size: 12px; | 132 | font-size: 12px; |
| 133 | 133 | ||
| 134 | } | 134 | } |
| 135 | /*Step 1*/ | 135 | /*Step 1*/ |
| 136 | aside .step .step-box .tshirt-design{ | 136 | aside .step .step-box .tshirt-design{ |
| 137 | border: 1px solid #cccccc; | 137 | border: 1px solid #cccccc; |
| 138 | background-color: #f5f5f5; | 138 | background-color: #f5f5f5; |
| 139 | margin: 10px 10px; | 139 | margin: 10px 10px; |
| 140 | } | 140 | } |
| 141 | aside .step .step-box .tshirt-design div{ | 141 | aside .step .step-box .tshirt-design div{ |
| 142 | float: left; | 142 | float: left; |
| 143 | } | 143 | } |
| 144 | aside .step .step-box .tshirt-design .icon{ | 144 | aside .step .step-box .tshirt-design .icon{ |
| 145 | padding: 4px 4px; | 145 | padding: 4px 4px; |
| 146 | border-right: 1px solid #cccccc; | 146 | border-right: 1px solid #cccccc; |
| 147 | 147 | ||
| 148 | } | 148 | } |
| 149 | aside .step .step-box .tshirt-design .icon img{ | 149 | aside .step .step-box .tshirt-design .icon img{ |
| 150 | height: 50px; | 150 | height: 50px; |
| 151 | } | 151 | } |
| 152 | aside .step .step-box .tshirt-design .name{ | 152 | aside .step .step-box .tshirt-design .name{ |
| 153 | padding: 10px 10px; | 153 | padding: 10px 10px; |
| 154 | 154 | ||
| 155 | } | 155 | } |
| 156 | aside .step .step-box .tshirt-design .action{ | 156 | aside .step .step-box .tshirt-design .action{ |
| 157 | padding: 10px 10px; | 157 | padding: 10px 10px; |
| 158 | float: right; | 158 | float: right; |
| 159 | 159 | ||
| 160 | } | 160 | } |
| 161 | aside .step .step-box .tshirt-design .action button{ | 161 | aside .step .step-box .tshirt-design .action button{ |
| 162 | padding: 8px 10px; | 162 | padding: 8px 10px; |
| 163 | } | 163 | } |
| 164 | /*Step 2*/ | 164 | /*Step 2*/ |
| 165 | aside .step .step-box .tshirt-color{ | 165 | aside .step .step-box .tshirt-color{ |
| 166 | padding: 6px 10px; | 166 | padding: 6px 10px; |
| 167 | position: relative; | 167 | position: relative; |
| 168 | } | 168 | } |
| 169 | aside .step .step-box .tshirt-color ul.choice-color{ | 169 | aside .step .step-box .tshirt-color ul.choice-color{ |
| 170 | float: left; | 170 | float: left; |
| 171 | list-style: none; | 171 | list-style: none; |
| 172 | padding-left: 0; | 172 | padding-left: 0; |
| 173 | width: 100%; | 173 | width: 100%; |
| 174 | margin-bottom: 3px; | 174 | margin-bottom: 3px; |
| 175 | } | 175 | } |
| 176 | aside .step .step-box .tshirt-color ul.choice-color li{ | 176 | aside .step .step-box .tshirt-color ul.choice-color li{ |
| 177 | margin: 0 10px 0 0; | 177 | margin: 0 10px 0 0; |
| 178 | border: 1px solid #cccccc; | 178 | border: 1px solid #cccccc; |
| 179 | padding: 2px 2px; | 179 | padding: 2px 2px; |
| 180 | float: left; | 180 | float: left; |
| 181 | } | 181 | } |
| 182 | aside .step .step-box .tshirt-color ul.choice-color li div{ | 182 | aside .step .step-box .tshirt-color ul.choice-color li div{ |
| 183 | height: 30px; | 183 | height: 30px; |
| 184 | width: 30px; | 184 | width: 30px; |
| 185 | } | 185 | } |
| 186 | 186 | ||
| 187 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ | 187 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ |
| 188 | background-color: #ece7e4; | 188 | background-color: #ece7e4; |
| 189 | } | 189 | } |
| 190 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ | 190 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ |
| 191 | background-color: #e7dfd0; | 191 | background-color: #e7dfd0; |
| 192 | } | 192 | } |
| 193 | aside .step .step-box .tshirt-color .color-name{ | 193 | aside .step .step-box .tshirt-color .color-name{ |
| 194 | width: 100%; | 194 | width: 100%; |
| 195 | font-size: 10px; | 195 | font-size: 10px; |
| 196 | } | 196 | } |
| 197 | aside .step .step-box .tshirt-color .view-more{ | 197 | aside .step .step-box .tshirt-color .view-more{ |
| 198 | position: absolute; | 198 | position: absolute; |
| 199 | bottom: 6px; | 199 | bottom: 6px; |
| 200 | right: 10px; | 200 | right: 10px; |
| 201 | } | 201 | } |
| 202 | /*Step 3*/ | 202 | /*Step 3*/ |
| 203 | aside .step .step-box .tshirt-saveorder{ | 203 | aside .step .step-box .tshirt-saveorder{ |
| 204 | padding: 10px 10px 6px 10px; | 204 | padding: 10px 10px 6px 10px; |
| 205 | } | 205 | } |
| 206 | aside .step .step-box .tshirt-saveorder .action{ | 206 | aside .step .step-box .tshirt-saveorder .action{ |
| 207 | width: 50%; | 207 | width: 50%; |
| 208 | float: left; | 208 | float: left; |
| 209 | } | 209 | } |
| 210 | aside .step .step-box .tshirt-saveorder .action:first-child{ | 210 | aside .step .step-box .tshirt-saveorder .action:first-child{ |
| 211 | padding-right: 5px; | 211 | padding-right: 5px; |
| 212 | } | 212 | } |
| 213 | aside .step .step-box .tshirt-saveorder .action:last-child{ | 213 | aside .step .step-box .tshirt-saveorder .action:last-child{ |
| 214 | padding-left: 5px; | 214 | padding-left: 5px; |
| 215 | } | 215 | } |
| 216 | aside .step .step-box .tshirt-saveorder .action button{ | 216 | aside .step .step-box .tshirt-saveorder .action button{ |
| 217 | padding: 8px 10px; | 217 | padding: 8px 10px; |
| 218 | 218 | ||
| 219 | } | 219 | } |
| 220 | aside .step .step-box .tshirt-saveorder .action button .text{ | 220 | aside .step .step-box .tshirt-saveorder .action button .text{ |
| 221 | float: left; | 221 | float: left; |
| 222 | width: 80%; | 222 | width: 80%; |
| 223 | text-align: center; | 223 | text-align: center; |
| 224 | padding-left: 10px; | 224 | padding-left: 10px; |
| 225 | vertical-align: bottom; | 225 | vertical-align: bottom; |
| 226 | } | 226 | } |
| 227 | aside .step .step-box .tshirt-saveorder .action button .arrow{ | 227 | aside .step .step-box .tshirt-saveorder .action button .arrow{ |
| 228 | float: left; | 228 | float: left; |
| 229 | width: 20%; | 229 | width: 20%; |
| 230 | height: 40px; | 230 | height: 40px; |
| 231 | position: relative; | 231 | position: relative; |
| 232 | } | 232 | } |
| 233 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ | 233 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ |
| 234 | position: absolute; | 234 | position: absolute; |
| 235 | top: 50%; | 235 | top: 50%; |
| 236 | right: -6px; | 236 | right: -6px; |
| 237 | transform: translateX(-50%) translateY(-50%); | 237 | transform: translateX(-50%) translateY(-50%); |
| 238 | -webkit-transform: translateX(-50%) translateY(-50%); | 238 | -webkit-transform: translateX(-50%) translateY(-50%); |
| 239 | } | 239 | } |
| 240 | aside .step .step-box .tshirt-saveorder .notice{ | 240 | aside .step .step-box .tshirt-saveorder .notice{ |
| 241 | padding: 5px 0 0 0; | 241 | padding: 5px 0 0 0; |
| 242 | } | 242 | } |
| 243 | /*Step 4*/ | 243 | /*Step 4*/ |
| 244 | aside .step .title-notice{ | 244 | aside .step .title-notice{ |
| 245 | 245 | ||
| 246 | } | 246 | } |
| 247 | aside .step .step-box .change-design{ | 247 | aside .step .step-box .change-design{ |
| 248 | padding: 4px 4px; | 248 | padding: 4px 4px; |
| 249 | } | 249 | } |
| 250 | aside .step .step-box .change-design table{ | 250 | aside .step .step-box .change-design table{ |
| 251 | 251 | ||
| 252 | } | 252 | } |
| 253 | aside .step .step-box .change-design table tr{ | 253 | aside .step .step-box .change-design table tr{ |
| 254 | border-bottom: 1px dotted #cccccc; | 254 | border-bottom: 1px dotted #cccccc; |
| 255 | } | 255 | } |
| 256 | aside .step .step-box .change-design table tr:last-child{ | 256 | aside .step .step-box .change-design table tr:last-child{ |
| 257 | border-bottom: 0; | 257 | border-bottom: 0; |
| 258 | } | 258 | } |
| 259 | 259 | ||
| 260 | /*Step 5- finish*/ | 260 | /*Step 5- finish*/ |
| 261 | aside .step .finish-design{ | 261 | aside .step .finish-design{ |
| 262 | padding: 20px 0; | 262 | padding: 20px 0; |
| 263 | } | 263 | } |
| 264 | aside .step .finish-design button{ | 264 | aside .step .finish-design button{ |
| 265 | width: 100%; | 265 | width: 100%; |
| 266 | padding: 8px 10px; | 266 | padding: 8px 10px; |
| 267 | } | 267 | } |
| 268 | 268 | ||
| 269 | /*DESIGN CONTENT*/ | 269 | /*DESIGN CONTENT*/ |
| 270 | #tshirt-content{ | 270 | #tshirt-content{ |
| 271 | position: relative; | 271 | position: relative; |
| 272 | } | 272 | } |
| 273 | #tshirt-content .switch-border-design{ | 273 | #tshirt-content .switch-border-design{ |
| 274 | position: absolute; | 274 | position: absolute; |
| 275 | top: 5px; | 275 | top: 5px; |
| 276 | right: 10px; | 276 | right: 10px; |
| 277 | color: red; | 277 | color: red; |
| 278 | font-size: 11px; | 278 | font-size: 11px; |
| 279 | } | 279 | } |
| 280 | #tshirt-content .tshirt-image{ | 280 | #tshirt-content .tshirt-image{ |
| 281 | padding: 20px 0 0 0; | 281 | padding: 20px 0 0 0; |
| 282 | } | 282 | } |
| 283 | #tshirt-content .tshirt-choice{ | 283 | #tshirt-content .tshirt-choice{ |
| 284 | 284 | ||
| 285 | } | 285 | } |
| 286 | #tshirt-content .tshirt-choice ul{ | 286 | #tshirt-content .tshirt-choice ul{ |
| 287 | list-style: none; | 287 | list-style: none; |
| 288 | padding-left: 0; | 288 | padding-left: 0; |
| 289 | display: table; | 289 | display: table; |
| 290 | margin: auto; | 290 | margin: auto; |
| 291 | } | 291 | } |
| 292 | #tshirt-content .tshirt-choice ul li{ | 292 | #tshirt-content .tshirt-choice ul li{ |
| 293 | float: left; | 293 | float: left; |
| 294 | 294 | ||
| 295 | margin: 10px 10px; | 295 | margin: 10px 10px; |
| 296 | } | 296 | } |
| 297 | #tshirt-content .tshirt-choice ul li .image{ | 297 | #tshirt-content .tshirt-choice ul li .image{ |
| 298 | border: 1px solid #cccccc; | 298 | border: 1px solid #cccccc; |
| 299 | padding: 3px 3px; | 299 | padding: 3px 3px; |
| 300 | } | 300 | } |
| 301 | #tshirt-content .tshirt-choice ul li.focus{ | 301 | #tshirt-content .tshirt-choice ul li.focus{ |
| 302 | 302 | ||
| 303 | } | 303 | } |
| 304 | #tshirt-content .tshirt-choice ul li.focus .image{ | 304 | #tshirt-content .tshirt-choice ul li.focus .image{ |
| 305 | border: 1px solid #ff0000; | 305 | border: 1px solid #ff0000; |
| 306 | } | 306 | } |
| 307 | /*MODAL Design*/ | 307 | /*MODAL Design*/ |
| 308 | #tshirt-design{ | 308 | #tshirt-design{ |
| 309 | background-color: #666666; | 309 | background-color: #666666; |
| 310 | } | 310 | } |
| 311 | #tshirt-design .modal-dialog{ | 311 | #tshirt-design .modal-dialog{ |
| 312 | width: 75%; | 312 | width: 75%; |
| 313 | margin: 0 auto; | 313 | margin: 0 auto; |
| 314 | } | 314 | } |
| 315 | #tshirt-design .modal-dialog .modal-content{ | 315 | #tshirt-design .modal-dialog .modal-content{ |
| 316 | background-color: transparent; | 316 | background-color: transparent; |
| 317 | border-radius: 0; | 317 | border-radius: 0; |
| 318 | border: 0; | 318 | border: 0; |
| 319 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 319 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
| 320 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 320 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
| 321 | } | 321 | } |
| 322 | #tshirt-design .modal-dialog .modal-content .modal-header{ | 322 | #tshirt-design .modal-dialog .modal-content .modal-header{ |
| 323 | padding: 0 0 10px 0; | 323 | padding: 0 0 10px 0; |
| 324 | border-bottom: 0; | 324 | border-bottom: 0; |
| 325 | border-shadow: none!important; | 325 | border-shadow: none!important; |
| 326 | } | 326 | } |
| 327 | #tshirt-design .modal-dialog .modal-content .modal-body{ | 327 | #tshirt-design .modal-dialog .modal-content .modal-body{ |
| 328 | background-color: #f5f5f5; | 328 | background-color: #f5f5f5; |
| 329 | padding: 0 0; | 329 | padding: 0 0; |
| 330 | } | 330 | } |
| 331 | #tshirt-design header{ | 331 | #tshirt-design header{ |
| 332 | border-bottom: 1px solid #cccccc; | 332 | border-bottom: 1px solid #cccccc; |
| 333 | background-color: #dddddd; | 333 | background-color: #dddddd; |
| 334 | } | 334 | } |
| 335 | #tshirt-design header ul.nav{ | 335 | #tshirt-design header ul.nav{ |
| 336 | padding-left: 0; | 336 | padding-left: 0; |
| 337 | list-style: none; | 337 | list-style: none; |
| 338 | } | 338 | } |
| 339 | #tshirt-design header ul.nav li{ | 339 | #tshirt-design header ul.nav li{ |
| 340 | float: left; | 340 | float: left; |
| 341 | padding: 8px 26px; | 341 | padding: 8px 26px; |
| 342 | border-right: 1px solid #cccccc; | 342 | border-right: 1px solid #cccccc; |
| 343 | font-size: 14px; | 343 | font-size: 14px; |
| 344 | cursor: pointer; | 344 | cursor: pointer; |
| 345 | } | 345 | } |
| 346 | #tshirt-design header ul.nav li:hover{ | 346 | #tshirt-design header ul.nav li:hover{ |
| 347 | background-color: red; | 347 | background-color: red; |
| 348 | color: #ffffff; | 348 | color: #ffffff; |
| 349 | } | 349 | } |
| 350 | #tshirt-design header ul.nav li:hover i.fa{ | 350 | #tshirt-design header ul.nav li:hover i.fa{ |
| 351 | color: #ffffff; | 351 | color: #ffffff; |
| 352 | } | 352 | } |
| 353 | #tshirt-design header ul.nav li i.fa{ | 353 | #tshirt-design header ul.nav li i.fa{ |
| 354 | color: #fe070f; | 354 | color: #fe070f; |
| 355 | font-size: 20px; | 355 | font-size: 20px; |
| 356 | margin-right: 10px; | 356 | margin-right: 10px; |
| 357 | } | 357 | } |
| 358 | #tshirt-design header .action{ | 358 | #tshirt-design header .action{ |
| 359 | 359 | ||
| 360 | } | 360 | } |
| 361 | #tshirt-design header .action button{ | 361 | #tshirt-design header .action button{ |
| 362 | padding: 2px 10px; | 362 | padding: 2px 10px; |
| 363 | margin: 6px 10px; | 363 | margin: 6px 10px; |
| 364 | } | 364 | } |
| 365 | #tshirt-design header .action button:hover{ | 365 | #tshirt-design header .action button:hover{ |
| 366 | background-color: red; | 366 | background-color: red; |
| 367 | color: #ffffff; | 367 | color: #ffffff; |
| 368 | } | 368 | } |
| 369 | 369 | ||
| 370 | /*Aside modal*/ | 370 | /*Aside modal*/ |
| 371 | .aside{ | 371 | .aside{ |
| 372 | } | 372 | } |
| 373 | .aside #choice-design-option{ | 373 | .aside #choice-design-option{ |
| 374 | list-style: none; | 374 | list-style: none; |
| 375 | padding-left: 0; | 375 | padding-left: 0; |
| 376 | margin-top: 10px; | 376 | margin-top: 10px; |
| 377 | 377 | ||
| 378 | } | 378 | } |
| 379 | .aside #choice-design-option li{ | 379 | .aside #choice-design-option li{ |
| 380 | border: 1px solid #cdcdcd; | 380 | border: 1px solid #cdcdcd; |
| 381 | position: relative; | 381 | position: relative; |
| 382 | cursor: pointer; | 382 | cursor: pointer; |
| 383 | } | 383 | } |
| 384 | .aside #choice-design-option li .hover{ | 384 | .aside #choice-design-option li .hover{ |
| 385 | background-color: #fddad4; | 385 | background-color: #fddad4; |
| 386 | opacity: 0.6; | 386 | opacity: 0.6; |
| 387 | position: absolute; | 387 | position: absolute; |
| 388 | width: 100%; | 388 | width: 100%; |
| 389 | height: 100%; | 389 | height: 100%; |
| 390 | display: none; | 390 | display: none; |
| 391 | } | 391 | } |
| 392 | .aside #choice-design-option li:hover .hover{ | 392 | .aside #choice-design-option li:hover .hover{ |
| 393 | display: block; | 393 | display: block; |
| 394 | } | 394 | } |
| 395 | 395 | ||
| 396 | .aside #choice-design-option li .title{ | 396 | .aside #choice-design-option li .title{ |
| 397 | background: url("../images/bg1.png") repeat #cdcdcd; | 397 | background: url("../images/bg1.png") repeat #cdcdcd; |
| 398 | padding: 3px 10px; | 398 | padding: 3px 10px; |
| 399 | } | 399 | } |
| 400 | .aside #choice-design-option li .title i.fa{ | 400 | .aside #choice-design-option li .title i.fa{ |
| 401 | color: #000000; | 401 | color: #000000; |
| 402 | } | 402 | } |
| 403 | 403 | ||
| 404 | .aside #choice-design-option li .content{ | 404 | .aside #choice-design-option li .content{ |
| 405 | 405 | ||
| 406 | } | 406 | } |
| 407 | .aside #choice-design-option li .content i.fa{ | 407 | .aside #choice-design-option li .content i.fa{ |
| 408 | font-size: 30px; | 408 | font-size: 30px; |
| 409 | color: #fe070f; | 409 | color: #fe070f; |
| 410 | margin: 8px 0; | 410 | margin: 8px 0; |
| 411 | } | 411 | } |
| 412 | .aside #choice-design-option li .content .des{ | 412 | .aside #choice-design-option li .content .des{ |
| 413 | padding: 3px 10px 3px 0; | 413 | padding: 3px 10px 3px 0; |
| 414 | } | 414 | } |
| 415 | 415 | ||
| 416 | /*Design content*/ | 416 | /*Design content*/ |
| 417 | .tshirt-design-container{ | 417 | .tshirt-design-container{ |
| 418 | position: relative; | 418 | position: relative; |
| 419 | } | 419 | } |
| 420 | .tshirt-design-container .design-content{ | 420 | .tshirt-design-container .design-content{ |
| 421 | padding: 10px 50px 10px 25px; | 421 | padding: 10px 50px 10px 25px; |
| 422 | } | 422 | } |
| 423 | .tshirt-design-container .design-content .content{ | 423 | .tshirt-design-container .design-content .content{ |
| 424 | width: 100%; | 424 | width: 100%; |
| 425 | min-height: 650px; | 425 | min-height: 650px; |
| 426 | background-color: #f0efea; | 426 | background-color: #f0efea; |
| 427 | padding: 40px 85px; | 427 | padding: 40px 85px; |
| 428 | height: 100%; | 428 | height: 100%; |
| 429 | } | 429 | } |
| 430 | .tshirt-design-container .design-content .content .selection-design{ | 430 | .tshirt-design-container .design-content .content .selection-design{ |
| 431 | border: 1px solid #ff0000; | 431 | border: 1px solid #ff0000; |
| 432 | width: 100%; | 432 | width: 100%; |
| 433 | height: 620px; | 433 | height: 620px; |
| 434 | } | 434 | } |
| 435 | .tshirt-design-container .agree-design{ | 435 | .tshirt-design-container .agree-design{ |
| 436 | position: absolute; | 436 | position: absolute; |
| 437 | right: -16px; | 437 | right: -16px; |
| 438 | top: 40%; | 438 | top: 40%; |
| 439 | } | 439 | } |
| 440 | .tshirt-design-container .trash-design{ | 440 | .tshirt-design-container .trash-design{ |
| 441 | position: absolute; | 441 | position: absolute; |
| 442 | right: 5px; | 442 | right: 5px; |
| 443 | bottom: 0; | 443 | bottom: 0; |
| 444 | } | 444 | } |
| 445 | 445 | ||
| 446 | 446 | ||
| 447 | /*FOOTER*/ | 447 | /*FOOTER*/ |
| 448 | footer{ | 448 | footer{ |
| 449 | background-color: #333333; | 449 | background-color: #333333; |
| 450 | } | 450 | } |
| 451 | footer ul.nav-footer{ | 451 | footer ul.nav-footer{ |
| 452 | padding-left: 0; | 452 | padding-left: 0; |
| 453 | list-style: none; | 453 | list-style: none; |
| 454 | } | 454 | } |
| 455 | footer ul.nav-footer li{ | 455 | footer ul.nav-footer li{ |
| 456 | float: left; | 456 | float: left; |
| 457 | padding: 3px 10px; | 457 | padding: 3px 10px; |
| 458 | border-right: 1px dotted #ffffff; | 458 | border-right: 1px dotted #ffffff; |
| 459 | 459 | ||
| 460 | } | 460 | } |
| 461 | footer ul.nav-footer li a{ | 461 | footer ul.nav-footer li a{ |
| 462 | color: #ffffff; | 462 | color: #ffffff; |
| 463 | font-size: 11px; | 463 | font-size: 11px; |
| 464 | } | 464 | } |
| 465 | /* Customize container */ | 465 | /* Customize container */ |
| 466 | @media (min-width: 768px) { | 466 | @media (min-width: 768px) { |
| 467 | .container { | 467 | .container { |
| 468 | /*max-width: 730px;*/ | 468 | /*max-width: 730px;*/ |
| 469 | } | 469 | } |
| 470 | } | 470 | } |
| 471 | 471 | ||
| 472 | /* Responsive: Portrait tablets and up */ | 472 | /* Responsive: Portrait tablets and up */ |
| 473 | @media screen and (min-width: 768px) { | 473 | @media screen and (min-width: 768px) { |
| 474 | /* Remove the padding we set earlier */ | 474 | /* Remove the padding we set earlier */ |
| 475 | 475 | ||
| 476 | } | 476 | } |
| 477 | 477 |
package.json
| 1 | { | 1 | { |
| 2 | "name": "tshats", | 2 | "name": "tshats", |
| 3 | "version": "0.0.0", | 3 | "version": "0.0.0", |
| 4 | "dependencies": { | 4 | "dependencies": { |
| 5 | "express": "^4.13.4", | 5 | "express": "^4.13.4", |
| 6 | "gzippo": "^0.2.0", | 6 | "gzippo": "^0.2.0", |
| 7 | "body-parser": "^1.14.2" | 7 | "body-parser": "^1.14.2" |
| 8 | }, | 8 | }, |
| 9 | "devDependencies": { | 9 | "devDependencies": { |
| 10 | "connect-livereload": "^0.6.0", | 10 | "connect-livereload": "^0.6.0", |
| 11 | "connect-modrewrite": "^0.8.5", | 11 | "connect-modrewrite": "^0.8.5", |
| 12 | "grunt": "~0.4.1", | 12 | "grunt": "~0.4.1", |
| 13 | "grunt-autoprefixer": "~0.4.0", | 13 | "grunt-autoprefixer": "~0.4.0", |
| 14 | "grunt-bower-install": "~0.7.0", | 14 | "grunt-bower-install": "~0.7.0", |
| 15 | "grunt-bower-requirejs": "~0.8.4", | 15 | "grunt-bower-requirejs": "~0.8.4", |
| 16 | "grunt-concurrent": "~0.4.1", | 16 | "grunt-concurrent": "~0.4.1", |
| 17 | "grunt-contrib-clean": "~0.5.0", | 17 | "grunt-contrib-clean": "~0.5.0", |
| 18 | "grunt-contrib-concat": "~0.3.0", | 18 | "grunt-contrib-concat": "~0.3.0", |
| 19 | "grunt-contrib-connect": "~0.5.0", | 19 | "grunt-contrib-connect": "~0.5.0", |
| 20 | "grunt-contrib-copy": "~0.4.1", | 20 | "grunt-contrib-copy": "~0.4.1", |
| 21 | "grunt-contrib-cssmin": "~0.7.0", | 21 | "grunt-contrib-cssmin": "~0.7.0", |
| 22 | "grunt-contrib-htmlmin": "~0.1.3", | 22 | "grunt-contrib-htmlmin": "~0.1.3", |
| 23 | "grunt-contrib-imagemin": "~0.3.0", | 23 | "grunt-contrib-imagemin": "~0.3.0", |
| 24 | "grunt-contrib-jshint": "~0.7.1", | 24 | "grunt-contrib-jshint": "~0.7.1", |
| 25 | "grunt-contrib-requirejs": "~0.4.1", | 25 | "grunt-contrib-requirejs": "~0.4.1", |
| 26 | "grunt-contrib-watch": "~0.5.2", | 26 | "grunt-contrib-watch": "~0.5.2", |
| 27 | "grunt-google-cdn": "~0.2.0", | 27 | "grunt-google-cdn": "~0.2.0", |
| 28 | "grunt-newer": "~0.5.4", | 28 | "grunt-newer": "~0.5.4", |
| 29 | "grunt-ngmin": "~0.0.2", | 29 | "grunt-ngmin": "~0.0.2", |
| 30 | "grunt-rev": "~0.1.0", | 30 | "grunt-rev": "~0.1.0", |
| 31 | "grunt-svgmin": "~0.2.0", | 31 | "grunt-svgmin": "~0.2.0", |
| 32 | "grunt-text-replace": "~0.3.11", | 32 | "grunt-text-replace": "~0.3.11", |
| 33 | "grunt-usemin": "~2.0.0", | 33 | "grunt-usemin": "~2.0.0", |
| 34 | "jshint-stylish": "~0.1.3", | 34 | "jshint-stylish": "~0.1.3", |
| 35 | "load-grunt-tasks": "~0.2.0", | 35 | "load-grunt-tasks": "~0.2.0", |
| 36 | "nodemon": "^1.11.0", | 36 | "nodemon": "^1.11.0", |
| 37 | "time-grunt": "~0.2.1" | 37 | "time-grunt": "~0.2.1" |
| 38 | }, | 38 | }, |
| 39 | "scripts": { | ||
| 40 | "postinstall": "./node_modules/bower/bin/bower install" | ||
| 41 | }, | ||
| 39 | "engines": { | 42 | "engines": { |
| 40 | "node": ">=0.10.0" | 43 | "node": ">=0.10.0" |
| 41 | } | 44 | } |
| 42 | } | 45 | } |
| 43 | 46 |