The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: focus styles (#53)

authored by

Rogerio Romao and committed by
GitHub
afeca697 b6d943da

+522 -549
+2 -1
.gitignore
··· 26 26 secrets.stencil.json 27 27 widget/node_modules 28 28 29 - scripts 29 + scripts 30 + cdn-dependencies-audit.md
assets/js/custom.js

This is a binary file and will not be displayed.

+27 -29
assets/js/theme/global/modal.js
··· 1 - import foundation from './foundation'; 2 1 import * as focusTrap from 'focus-trap'; 2 + import foundation from './foundation'; 3 3 4 4 const bodyActiveClass = 'has-activeModal'; 5 5 const loadingOverlayClass = 'loadingOverlay'; ··· 41 41 function wrapModalBody(content) { 42 42 const $modalBody = $('<div>'); 43 43 44 - $modalBody 45 - .addClass(modalBodyClass) 46 - .html(content); 44 + $modalBody.addClass(modalBodyClass).html(content); 47 45 48 46 return $modalBody; 49 47 } ··· 98 96 * @param {string} [options.size] 99 97 */ 100 98 export class Modal { 101 - constructor($modal, { 102 - size = null, 103 - } = {}) { 99 + constructor($modal, { size = null } = {}) { 104 100 this.$modal = $modal; 105 101 this.$content = createModalContent(this.$modal); 106 102 this.$overlay = createLoadingOverlay(this.$modal); ··· 119 115 120 116 /* STRF-2471 - Multiple Wish Lists - prevents double-firing 121 117 * of foundation.dropdown click.fndtn.dropdown event */ 122 - this.$modal.on('click', '.dropdown-menu-button', e => { 118 + this.$modal.on('click', '.dropdown-menu-button', (e) => { 123 119 e.stopPropagation(); 124 120 }); 125 121 } ··· 158 154 this.$modal.on(ModalEvents.opened, this.onModalOpened); 159 155 } 160 156 161 - open({ 162 - size, 163 - pending = true, 164 - clearContent = true, 165 - } = {}) { 157 + open({ size, pending = true, clearContent = true } = {}) { 166 158 this.pending = pending; 167 159 168 160 if (size) { ··· 200 192 } 201 193 202 194 setupFocusTrap() { 203 - if (!this.$preModalFocusedEl) this.$preModalFocusedEl = $(document.activeElement); 195 + if (!this.$preModalFocusedEl) { 196 + this.$preModalFocusedEl = $(document.activeElement); 197 + } 204 198 205 199 if (!this.focusTrap) { 206 200 this.focusTrap = focusTrap.createFocusTrap(this.$modal[0], { ··· 208 202 returnFocusOnDeactivate: false, 209 203 allowOutsideClick: true, 210 204 fallbackFocus: () => { 211 - const fallbackNode = this.$preModalFocusedEl && this.$preModalFocusedEl.length 212 - ? this.$preModalFocusedEl[0] 213 - : $('[data-header-logo-link]')[0]; 205 + const fallbackNode = 206 + this.$preModalFocusedEl && 207 + this.$preModalFocusedEl.length 208 + ? this.$preModalFocusedEl[0] 209 + : $('[data-header-logo-link]')[0]; 214 210 215 211 return fallbackNode; 216 212 }, ··· 224 220 onModalClose() { 225 221 $('body').removeClass(bodyActiveClass); 226 222 227 - // this.clearContent(); 223 + // this.clearContent(); 228 224 } 229 225 230 226 onModalClosed() { ··· 264 260 export default function modalFactory(selector = '[data-reveal]', options = {}) { 265 261 const $modals = $(selector, options.$context); 266 262 267 - return $modals.map((index, element) => { 268 - const $modal = $(element); 269 - const instanceKey = 'modalInstance'; 270 - const cachedModal = $modal.data(instanceKey); 263 + return $modals 264 + .map((index, element) => { 265 + const $modal = $(element); 266 + const instanceKey = 'modalInstance'; 267 + const cachedModal = $modal.data(instanceKey); 271 268 272 - if (cachedModal instanceof Modal) { 273 - return cachedModal; 274 - } 269 + if (cachedModal instanceof Modal) { 270 + return cachedModal; 271 + } 275 272 276 - const modal = new Modal($modal, options); 273 + const modal = new Modal($modal, options); 277 274 278 - $modal.data(instanceKey, modal); 275 + $modal.data(instanceKey, modal); 279 276 280 - return modal; 281 - }).toArray(); 277 + return modal; 278 + }) 279 + .toArray(); 282 280 } 283 281 284 282 /*
+10 -8
assets/scss/components/stencil/_login.scss
··· 3 3 // ============================================================================= 4 4 5 5 .login { 6 - margin: spacing("double") auto spacing("double")*2; 6 + margin: spacing('double') auto spacing('double') * 2; 7 7 max-width: remCalc(900px); 8 8 } 9 9 10 10 .login-row { 11 11 @include grid-row(); 12 - @include breakpoint("medium") { 13 - margin-top: spacing("double")*2; 12 + 13 + @include breakpoint('medium') { 14 + margin-top: spacing('double') * 2; 14 15 } 15 16 } 16 17 17 18 .login-form { 18 19 @include grid-column(12); 19 20 20 - @include breakpoint("medium") { 21 + @include breakpoint('medium') { 21 22 @include grid-column(6); 22 23 23 - margin-top: spacing("double"); 24 + margin-top: spacing('double'); 24 25 } 25 26 } 26 27 27 28 .new-customer { 28 29 @include grid-column(12); 29 - @include breakpoint("medium") { 30 + 31 + @include breakpoint('medium') { 30 32 @include grid-column(6); 31 33 } 32 34 } ··· 36 38 } 37 39 38 40 .new-customer-fact-list { 39 - margin-left: spacing("double"); 41 + margin-left: spacing('double'); 40 42 } 41 43 42 44 .new-customer-fact { 43 - padding-left: spacing("half"); 45 + padding-left: spacing('half'); 44 46 }
+1 -3
assets/scss/components/stencil/heroCarousel/_component.scss
··· 1 1 // HERO CAROUSEL 2 2 // ----------------------------------------------------------------------------- 3 - // 4 3 // Purpose: Imports the dependencies of the hero carousel component 5 - // 6 4 // ----------------------------------------------------------------------------- 7 5 8 - @import "heroCarousel"; 6 + @import 'heroCarousel';
+19 -18
assets/scss/components/stencil/previewCart/_previewCart.scss
··· 1 1 // ============================================================================= 2 2 // PREVIEW CART (CSS) 3 3 // ============================================================================= 4 - // 5 4 // 1. Override server-generated inline-css 6 - // 7 5 // ----------------------------------------------------------------------------- 8 6 9 7 .previewCart { 10 8 @include grid-row; 11 9 12 - @include breakpoint("medium") { 10 + @include breakpoint('medium') { 13 11 .productView { 14 12 @include grid-column(9); 13 + 15 14 display: flex; 16 15 margin: 0; 17 16 padding-bottom: 0; ··· 20 19 21 20 .productView-image { 22 21 @include grid-column(7); 22 + 23 23 display: flex; 24 24 flex-direction: column; 25 25 } ··· 41 41 } 42 42 43 43 .previewCartCheckout { 44 - background: container("fill", "dark"); 45 - padding: spacing("base"); 44 + background: container('fill', 'dark'); 45 + padding: spacing('base'); 46 46 text-align: center; 47 47 48 - @include breakpoint("medium") { 49 - @include grid-column(3, $float:right); 50 - padding: spacing("single"); 48 + @include breakpoint('medium') { 49 + @include grid-column(3, $float: right); 50 + 51 + padding: spacing('single'); 51 52 } 52 53 53 54 .button { ··· 56 57 width: 100%; 57 58 58 59 + p { 59 - margin-top: spacing("half"); 60 + margin-top: spacing('half'); 60 61 } 61 62 62 63 &:not(:last-child) { 63 - margin-bottom: spacing("half"); 64 + margin-bottom: spacing('half'); 64 65 } 65 66 } 66 67 } 67 68 68 69 .previewCartCheckout-price { 69 70 display: block; 70 - font-size: fontSize("largest"); 71 + font-size: fontSize('largest'); 71 72 font-weight: bold; 72 73 text-align: center; 73 74 } 74 75 75 76 .previewCartCheckout-subtotal { 76 77 display: block; 77 - margin-bottom: spacing("single"); 78 - margin-top: spacing("single"); 78 + margin-bottom: spacing('single'); 79 + margin-top: spacing('single'); 79 80 } 80 81 81 82 .previewCartCheckout-acceleratedCheckoutButtons { ··· 85 86 .previewCartCheckout-additionalCheckoutButtons { 86 87 p { 87 88 float: none !important; // 1 88 - margin: spacing("third") 0; 89 + margin: spacing('third') 0; 89 90 } 90 91 91 92 .CheckoutButton { 92 - margin-bottom: spacing("base"); 93 + margin-bottom: spacing('base'); 93 94 94 95 &:first-child { 95 - margin-top: spacing("single"); 96 + margin-top: spacing('single'); 96 97 } 97 98 98 99 &:last-child { 99 - margin-bottom: spacing("single"); 100 + margin-bottom: spacing('single'); 100 101 } 101 102 } 102 103 } ··· 105 106 display: none; 106 107 text-align: center; 107 108 108 - @include breakpoint("medium") { 109 + @include breakpoint('medium') { 109 110 display: block; 110 111 } 111 112 }
+7 -10
assets/scss/components/stencil/productCarousel/_productCarousel.scss
··· 1 1 // PRODUCT CAROUSEL 2 2 // ----------------------------------------------------------------------------- 3 - // 4 3 // Purpose: Styles the product carousel component, which basically adds extras to the 5 4 // vendor slick carousel, to specifically display product 6 - // 7 5 // 1. If there's no JS layout the products out based on the grid. 8 - // 9 6 // ----------------------------------------------------------------------------- 10 7 11 8 .productCarousel { 12 - @include grid-row( 13 - $behavior: nest 14 - ); // 1 9 + @include grid-row($behavior: nest); // 1 10 + 15 11 min-width: 100%; 16 12 position: relative; 17 13 width: 1px; 18 14 } 19 15 20 - .productCarousel-slide { // 1 16 + .productCarousel-slide { 17 + // 1 21 18 @include grid-column(6); 22 19 23 - @include breakpoint("small") { 20 + @include breakpoint('small') { 24 21 width: grid-calc(4, $total-columns); 25 22 } 26 23 27 - @include breakpoint("medium") { 24 + @include breakpoint('medium') { 28 25 width: grid-calc(3, $total-columns); 29 26 } 30 27 31 - @include breakpoint("large") { 28 + @include breakpoint('large') { 32 29 width: grid-calc(2, $total-columns); 33 30 } 34 31
+11 -12
assets/scss/components/stencil/productReviews/_productReviews.scss
··· 2 2 // PRODUCT REVIEWS (CSS) 3 3 // ============================================================================= 4 4 5 - 6 5 // Review list 7 - // 8 6 // 1. Kill extra display inline-block spacing 9 7 // ----------------------------------------------------------------------------- 10 8 11 9 .productReviews-list { 12 - @include u-listBullets("none"); 13 - @include grid-row($behavior: "nest"); 10 + @include u-listBullets('none'); 11 + @include grid-row($behavior: 'nest'); 12 + 14 13 font-size: 0; // 1 15 14 } 16 - 17 15 18 16 // Review item 19 17 // ----------------------------------------------------------------------------- 20 18 21 19 .productReview { 22 20 @include grid-column(12); 21 + 23 22 display: inline-block; 24 23 float: none; 25 - font-size: fontSize("base"); 24 + font-size: fontSize('base'); 26 25 vertical-align: top; 27 26 28 - @include breakpoint("medium") { 27 + @include breakpoint('medium') { 29 28 width: grid-calc(6, $total-columns); 30 29 } 31 30 32 - @include breakpoint("large") { 31 + @include breakpoint('large') { 33 32 width: grid-calc(4, $total-columns); 34 33 } 35 34 } ··· 40 39 } 41 40 42 41 .productReview-author { 43 - color: stencilColor("color-textSecondary"); 44 - margin-bottom: spacing("base"); 42 + color: stencilColor('color-textSecondary'); 43 + margin-bottom: spacing('base'); 45 44 } 46 45 47 46 .productReview-rating { 48 47 display: inline-block; 49 - margin-bottom: spacing("quarter"); 48 + margin-bottom: spacing('quarter'); 50 49 } 51 50 52 51 .productReview-ratingNumber { 53 - @include u-hidden("visually"); 52 + @include u-hidden('visually'); 54 53 }
+76 -89
assets/scss/components/stencil/productView/_productView.scss
··· 2 2 // PRODUCT VIEW (CSS) 3 3 // ============================================================================= 4 4 5 - 6 5 // Container 7 6 // ----------------------------------------------------------------------------- 8 7 9 8 .productView { 10 - padding-top: spacing("base"); 9 + padding-top: spacing('base'); 11 10 } 12 11 13 - 14 12 // Images 15 13 // ----------------------------------------------------------------------------- 16 14 17 15 .productView-images { 18 - margin-bottom: spacing("double"); 16 + margin-bottom: spacing('double'); 19 17 } 20 18 21 19 .productView-image { ··· 25 23 margin: auto; 26 24 position: relative; 27 25 28 - @include breakpoint("medium") { 26 + @include breakpoint('medium') { 29 27 min-height: 366px; 30 28 min-width: inherit; 31 29 } 32 30 33 31 + .productView-thumbnails { 34 - margin-top: spacing("half"); 32 + margin-top: spacing('half'); 35 33 } 36 34 37 35 @media (min-width: $screen-xxsmall) and (max-width: $screen-medium) { ··· 40 38 } 41 39 42 40 .productView-img-container { 41 + @include lazy-loaded-padding('product_size'); 43 42 44 - @include lazy-loaded-padding("product_size"); 45 43 margin: auto; 46 - max-width: get-width(stencilString("product_size")); 44 + max-width: get-width(stencilString('product_size')); 47 45 position: relative; 48 46 width: 100%; 49 47 50 48 img { 51 49 @include lazy-loaded-img; 52 - /* Object-fit polyfill */ 53 - font-family: "object-fit: contain;"; 50 + 54 51 height: 100%; 55 52 object-fit: contain; 56 53 width: 100%; ··· 58 55 } 59 56 60 57 .productView-thumbnails { 61 - @include u-listBullets("none"); 62 - @include grid-row($behavior: "nest"); 58 + @include u-listBullets('none'); 59 + @include grid-row($behavior: 'nest'); 63 60 64 - margin-left: -(spacing("quarter")); 65 - margin-right: -(spacing("quarter")); 61 + margin-left: -(spacing('quarter')); 62 + margin-right: -(spacing('quarter')); 66 63 67 64 &[data-slick] { 68 65 opacity: 0; ··· 87 84 88 85 img { 89 86 @include lazy-loaded-img; 90 - /* Object-fit polyfill */ 91 - font-family: "object-fit: contain;"; 87 + 92 88 margin: 0; 93 89 object-fit: contain; 94 90 position: relative; 95 - width: get-width(stencilString("productview_thumb_size")); 91 + width: get-width(stencilString('productview_thumb_size')); 96 92 } 97 93 } 98 94 99 95 .productView-thumbnail { 100 96 @include grid-column(3); 101 - padding: spacing("quarter"); 97 + 98 + padding: spacing('quarter'); 102 99 text-align: center; 103 100 104 - @include breakpoint("large") { 101 + @include breakpoint('large') { 105 102 width: 20%; 106 103 } 107 104 } 108 105 109 106 .productView-thumbnail-link { 110 - border: container("border"); 107 + border: container('border'); 111 108 box-sizing: content-box; 112 109 display: flex; 113 110 height: 67px; ··· 115 112 max-width: 75px; 116 113 padding: 2px; 117 114 position: relative; 118 - // width: 100%; 119 115 120 116 &:hover, 121 117 &.is-active { 122 - border-color: color("greys", "darker"); 118 + border-color: color('greys', 'darker'); 123 119 } 124 120 } 125 121 126 - 127 122 // Details 128 123 // ----------------------------------------------------------------------------- 129 124 130 125 .productView-details { 131 - padding-bottom: spacing("single") + spacing("third"); 126 + padding-bottom: spacing('single') + spacing('third'); 132 127 } 133 - 134 128 135 129 // Details - Product details 136 130 // ----------------------------------------------------------------------------- 137 131 138 132 .productView-product { 139 - @include breakpoint("medium") { 140 - border-bottom: container("border"); 141 - padding-bottom: spacing("single") + spacing("third"); 133 + @include breakpoint('medium') { 134 + border-bottom: container('border'); 135 + padding-bottom: spacing('single') + spacing('third'); 142 136 } 143 137 144 138 > :last-child { ··· 147 141 } 148 142 149 143 .productView-title { 150 - font-size: fontSize("small"); 151 - margin: -(spacing("half")) 0 spacing("quarter"); 144 + font-size: fontSize('small'); 145 + margin: -(spacing('half')) 0 spacing('quarter'); 152 146 153 - @include breakpoint("medium") { 154 - margin-top: spacing("single"); 147 + @include breakpoint('medium') { 148 + margin-top: spacing('single'); 155 149 } 156 150 157 - @include breakpoint("large") { 158 - font-size: fontSize("largest"); 151 + @include breakpoint('large') { 152 + font-size: fontSize('largest'); 159 153 } 160 154 } 161 155 162 156 .productView-brand { 163 157 color: $productView-brand-link-color; 164 - font-size: fontSize("smaller"); 165 - margin: 0 0 spacing("half"); 158 + font-size: fontSize('smaller'); 159 + margin: 0 0 spacing('half'); 166 160 167 - @include breakpoint("large") { 168 - font-size: fontSize("small"); 169 - margin: -(spacing("eighth")) 0 spacing("base"); 161 + @include breakpoint('large') { 162 + font-size: fontSize('small'); 163 + margin: -(spacing('eighth')) 0 spacing('base'); 170 164 } 171 165 172 166 a { ··· 182 176 // ----------------------------------------------------------------------------- 183 177 184 178 .productView-price { 185 - font-size: fontSize("smaller"); 186 - margin-bottom: spacing("third"); 179 + font-size: fontSize('smaller'); 180 + margin-bottom: spacing('third'); 187 181 188 - @include breakpoint("medium") { 189 - font-size: fontSize("larger"); 190 - margin-bottom: spacing("base"); 182 + @include breakpoint('medium') { 183 + font-size: fontSize('larger'); 184 + margin-bottom: spacing('base'); 191 185 } 192 186 193 187 .price-section--saving { 194 - font-size: fontSize("smaller"); 188 + font-size: fontSize('smaller'); 195 189 } 196 190 197 191 abbr { ··· 202 196 } 203 197 204 198 .productView-reviewLink { 205 - color: stencilColor("color-textSecondary"); 199 + color: stencilColor('color-textSecondary'); 206 200 display: inline-block; 207 - margin-left: spacing("quarter"); 201 + margin-left: spacing('quarter'); 208 202 vertical-align: middle; 209 203 210 204 &:hover { 211 - color: stencilColor("color-textSecondary--hover"); 205 + color: stencilColor('color-textSecondary--hover'); 212 206 } 213 207 214 208 &--new { ··· 216 210 } 217 211 } 218 212 219 - 220 213 // Details - Product Information 221 214 // ----------------------------------------------------------------------------- 222 215 223 216 .productView-info { 224 217 @include clearfix; 225 - margin-top: spacing("half"); 218 + 219 + margin-top: spacing('half'); 226 220 227 - @include breakpoint("small") { 221 + @include breakpoint('small') { 228 222 margin-top: 0; 229 223 } 230 224 231 225 > :first-child { 232 - 233 - @include breakpoint("small") { 234 - margin-top: spacing("single"); 226 + @include breakpoint('small') { 227 + margin-top: spacing('single'); 235 228 } 236 229 } 237 230 ··· 244 237 .productView-info-value { 245 238 float: left; 246 239 247 - @include breakpoint("small") { 240 + @include breakpoint('small') { 248 241 float: none; 249 242 } 250 243 } 251 244 252 245 .productView-info-name { 253 246 clear: both; 254 - margin-bottom: spacing("eighth"); 255 - margin-right: spacing("quarter"); 247 + margin-bottom: spacing('eighth'); 248 + margin-right: spacing('quarter'); 256 249 257 - @include breakpoint("small") { 258 - font-family: fontFamily("headingSans"); 259 - font-size: fontSize("smallest"); 260 - font-weight: fontWeight("normal"); 250 + @include breakpoint('small') { 251 + font-family: fontFamily('headingSans'); 252 + font-size: fontSize('smallest'); 253 + font-weight: fontWeight('normal'); 261 254 } 262 255 } 263 256 264 257 .productView-info-value { 265 - margin-bottom: spacing("quarter"); 258 + margin-bottom: spacing('quarter'); 266 259 267 - @include breakpoint("small") { 268 - margin-bottom: spacing("base"); 260 + @include breakpoint('small') { 261 + margin-bottom: spacing('base'); 269 262 } 270 263 } 271 - 272 264 273 265 // Details - Product options 274 266 // ----------------------------------------------------------------------------- 275 - // 276 267 // 1. Align the product options list item radios vertically. 277 268 // 2. Resetting font due to inline-block whitespace issue. 278 269 // 3. File upload button does not properly display in IE if font-size is 0 279 - // 280 270 // ----------------------------------------------------------------------------- 281 271 282 272 .productView-options { 283 273 @include clearfix; 284 - margin-bottom: spacing("single"); 274 + 275 + margin-bottom: spacing('single'); 285 276 text-align: center; 286 277 287 - @include breakpoint("small") { 278 + @include breakpoint('small') { 288 279 text-align: left; 289 280 } 290 281 291 - .form-input[type="number"] { 292 - @include breakpoint("small") { 282 + .form-input[type='number'] { 283 + @include breakpoint('small') { 293 284 width: grid-calc(2, $total-columns); 294 285 } 295 286 } ··· 302 293 } 303 294 } 304 295 305 - input[type="file"] { 306 - font-size: fontSize("smallest"); // 3 296 + input[type='file'] { 297 + font-size: fontSize('smallest'); // 3 307 298 } 308 299 309 300 .form-field { ··· 316 307 317 308 > .form-checkbox + .form-label { 318 309 display: inline-block; 319 - margin-left: spacing("single"); 310 + margin-left: spacing('single'); 320 311 width: auto; 321 312 322 - @include breakpoint("small") { 313 + @include breakpoint('small') { 323 314 margin-left: 0; 324 315 width: 100%; 325 316 } ··· 341 332 margin-bottom: 1rem; 342 333 width: 100%; 343 334 344 - @include breakpoint("small") { 335 + @include breakpoint('small') { 345 336 padding: 0 remCalc(10); 346 337 width: 50%; 347 338 } 348 339 349 - @include breakpoint("medium") { 350 - padding-right: spacing("half"); 340 + @include breakpoint('medium') { 341 + padding-right: spacing('half'); 351 342 width: 50%; 352 343 } 353 344 354 - @include breakpoint("large") { 345 + @include breakpoint('large') { 355 346 display: inline-block; 356 347 margin-top: 1rem; 357 - padding-right: spacing("half"); 348 + padding-right: spacing('half'); 358 349 width: 50%; 359 350 } 360 351 ··· 365 356 } 366 357 367 358 .add-to-cart-wallet-buttons { 368 - margin-top: spacing("half"); 359 + margin-top: spacing('half'); 369 360 370 361 div[data-smart-button-container-id] { 371 362 line-height: 0; ··· 378 369 } 379 370 380 371 button.show-more-button { 381 - color: stencilColor("color-textSecondary"); 372 + color: stencilColor('color-textSecondary'); 382 373 display: block; 383 - margin-top: spacing("quarter"); 384 - padding: spacing("quarter") 0; 374 + margin-top: spacing('quarter'); 375 + padding: spacing('quarter') 0; 385 376 text-align: center; 386 377 text-decoration: underline; 387 - vertical-align: middle; 388 378 width: 100%; 389 379 390 380 &:hover { 391 - color: stencilColor("color-textSecondary--hover"); 381 + color: stencilColor('color-textSecondary--hover'); 392 382 } 393 383 } 394 384 } 395 385 } 396 - 397 386 398 387 // Product list (with images) 399 388 // ----------------------------------------------------------------------------- ··· 433 422 padding-left: $productOptions-list-item-content-paddingLeft; 434 423 } 435 424 436 - 437 425 // Share products 438 426 // ----------------------------------------------------------------------------- 439 427 440 428 .shareProduct { 441 429 text-align: center; 442 430 } 443 - 444 431 445 432 // EasyZoom settings for zoomable product image 446 433 // -----------------------------------------------------------------------------
+3 -5
assets/scss/components/stencil/rating/_rating.scss
··· 4 4 5 5 .icon--ratingEmpty { 6 6 svg { 7 - fill: stencilColor("icon-ratingEmpty"); 7 + fill: stencilColor('icon-ratingEmpty'); 8 8 } 9 9 } 10 10 11 11 .icon--ratingFull { 12 12 svg { 13 - fill: stencilColor("icon-ratingFull"); 13 + fill: stencilColor('icon-ratingFull'); 14 14 } 15 15 } 16 16 17 - 18 17 // Small rating 19 18 // ----------------------------------------------------------------------------- 20 - // 21 19 // 1. Vertically aligns stars to container. Icons are off by default. 22 20 // Icons are all vertically aligned to middle, however middle is not middle, 23 21 // and therefore need to be adjusted to actually sit at middle. 24 - // 25 22 // ----------------------------------------------------------------------------- 26 23 27 24 .rating--small { ··· 29 26 30 27 .icon { 31 28 @include square(14px); 29 + 32 30 margin-top: -3px; // 1 33 31 } 34 32 }
+4 -4
assets/scss/components/stencil/ribbon/_ribbon.scss
··· 1 1 // ============================================================================= 2 2 // RIBBON (CSS) 3 3 // ============================================================================= 4 - // 5 4 // 1. A ribbon needs a container set to relative in order to position itself. 6 5 // 2. Top right text badge. Shows "On sale" as an example. 7 - // 8 6 // ----------------------------------------------------------------------------- 9 7 10 - .has-ribbon { // 1 8 + .has-ribbon { 9 + // 1 11 10 position: relative; 12 11 } 13 12 14 - .ribbon { // 2 13 + .ribbon { 14 + // 2 15 15 background-color: $ribbon-backgroundColor; 16 16 color: $ribbon-color; 17 17 cursor: $ribbon-cursor;
+19 -17
assets/scss/components/stencil/search/_search.scss
··· 3 3 // ============================================================================= 4 4 5 5 .search-suggestion { 6 - margin-bottom: spacing("single") + spacing("third"); 6 + margin-bottom: spacing('single') + spacing('third'); 7 7 8 8 > :last-child { 9 9 margin-bottom: 0; ··· 16 16 } 17 17 18 18 .advancedSearch-form { 19 - margin-bottom: spacing("double"); 19 + margin-bottom: spacing('double'); 20 20 21 21 .form-row { 22 - margin-bottom: -(spacing("single")); 22 + margin-bottom: -(spacing('single')); 23 23 } 24 24 } 25 25 26 26 .quickSearchResults { 27 - margin-top: spacing("single"); 27 + margin-top: spacing('single'); 28 28 29 - @include breakpoint("medium") { 29 + @include breakpoint('medium') { 30 30 margin-top: 0; 31 31 } 32 32 33 33 .modal-close { 34 34 display: none; 35 35 36 - @include breakpoint("medium") { 36 + @include breakpoint('medium') { 37 37 display: block; 38 38 } 39 39 } ··· 44 44 } 45 45 46 46 .advancedSearch-title { 47 - margin: 0 0 spacing("single"); 47 + margin: 0 0 spacing('single'); 48 48 text-transform: inherit; 49 49 } 50 50 ··· 54 54 55 55 input { 56 56 display: block; 57 - padding-left: spacing("single"); 57 + padding-left: spacing('single'); 58 58 59 - @include breakpoint("small") { 59 + @include breakpoint('small') { 60 60 display: inline; 61 61 width: 6rem; 62 62 } 63 63 } 64 64 65 65 span { 66 - @include breakpoint("small") { 66 + @include breakpoint('small') { 67 67 display: inline; 68 - padding-left: spacing("single"); 69 - padding-right: spacing("single"); 68 + padding-left: spacing('single'); 69 + padding-right: spacing('single'); 70 70 } 71 71 } 72 72 } 73 73 } 74 74 75 75 .category-suggestion-list { 76 - @include grid-row($behavior: "nest"); 76 + @include grid-row($behavior: 'nest'); 77 + 77 78 list-style-type: none; 78 79 } 79 80 80 81 .category-suggestion { 81 82 @include grid-column(4); 82 - font-size: fontSize("smaller"); 83 + 84 + font-size: fontSize('smaller'); 83 85 } 84 86 85 87 .search-refine { 86 - margin-left: spacing("single"); 88 + margin-left: spacing('single'); 87 89 } 88 90 89 91 .quickSearchMessage { 90 - font-size: fontSize("largest"); 91 - margin: spacing("single") 0 0; 92 + font-size: fontSize('largest'); 93 + margin: spacing('single') 0 0; 92 94 text-align: center; 93 95 } 94 96
+13 -12
assets/scss/components/stencil/socialLinks/_socialLinks.scss
··· 1 1 // ============================================================================= 2 2 // SOCIAL LINKS (CSS) 3 3 // ============================================================================= 4 - // 5 4 // 1. Removing the whitespace generated by display:inline-block; 6 5 // 2. Need to increase specificity for margin settings to overcome resets by u-listReset. 7 - // 8 6 // ----------------------------------------------------------------------------- 9 7 .socialLinks { 10 8 @include clearfix; 11 9 @include u-listReset; // 2 12 - line-height: lineHeight("largest"); 10 + 11 + line-height: lineHeight('largest'); 13 12 14 - .icon { // 1 13 + .icon { 14 + // 1 15 15 @include square($socialLinks-iconSize); 16 + 16 17 margin: 0; 17 18 text-decoration: none; 18 19 19 20 &:hover { 20 21 svg { 21 - fill: stencilColor("icon-color-hover"); 22 + fill: stencilColor('icon-color-hover'); 22 23 } 23 24 } 24 25 25 26 svg { 26 - fill: stencilColor("icon-color"); 27 + fill: stencilColor('icon-color'); 27 28 transition: all 0.15s ease; 28 29 } 29 30 } ··· 41 42 display: inline-block; 42 43 font-size: 0; // 1 43 44 44 - .socialLinks & { // 2 45 - margin-bottom: spacing("quarter"); 46 - margin-right: spacing("half"); 45 + .socialLinks & { 46 + // 2 47 + margin-bottom: spacing('quarter'); 48 + margin-right: spacing('half'); 47 49 48 50 &:last-child { 49 51 margin-right: 0; ··· 52 54 53 55 .socialLinks__link { 54 56 @include addFocusTooltip; 57 + 55 58 height: 2rem; 56 59 position: relative; 57 60 ··· 59 62 &:focus::after { 60 63 left: 0; 61 64 right: auto; 62 - z-index: zIndex("low"); 65 + z-index: zIndex('low'); 63 66 } 64 67 } 65 68 } 66 69 67 - 68 - // 69 70 // Alternate social link styles 70 71 // ----------------------------------------------------------------------------- 71 72
+2 -3
assets/scss/components/stencil/tags/_tags.scss
··· 1 1 // ============================================================================= 2 2 // TAGS (CSS) 3 3 // ============================================================================= 4 - // 5 4 // 1. Set to 0 so that the tags can be centred with an unknown width. 6 - // 7 5 // ----------------------------------------------------------------------------- 8 6 9 7 .tags { 10 - @include u-listBullets("none"); 8 + @include u-listBullets('none'); 9 + 11 10 font-size: 0; // 1 12 11 text-align: center; 13 12 }
+2 -4
assets/scss/components/stencil/textTruncate/_textTruncate.scss
··· 2 2 // TEXT TRUNCATE (CSS) 3 3 // ============================================================================= 4 4 5 - 6 5 // Text Truncate 7 6 // ----------------------------------------------------------------------------- 8 - // 9 7 // ----------------------------------------------------------------------------- 10 8 .textTruncate { 11 - padding-bottom: spacing("single"); 9 + padding-bottom: spacing('single'); 12 10 position: relative; 13 11 transition: max-height 100ms ease-out; 14 12 } ··· 23 21 } 24 22 25 23 .textTruncate-viewMore { 26 - background-color: stencilColor("body-bg"); 24 + background-color: stencilColor('body-bg'); 27 25 bottom: 0; 28 26 padding-top: 10px; 29 27 position: absolute;
+10 -6
assets/scss/components/stencil/videoGallery/_videoGallery.scss
··· 4 4 5 5 .videoGallery-main { 6 6 @include flex-video-container(); 7 + 7 8 margin-bottom: $videoGallery-spacing; 8 9 } 9 10 10 11 .videoGallery-list { 11 - @include u-listBullets("none"); 12 - @include grid-row($behavior: "nest"); 12 + @include u-listBullets('none'); 13 + @include grid-row($behavior: 'nest'); 14 + 13 15 font-size: 0; 14 16 } 15 17 16 18 .videoGallery-item { 17 19 @include grid-column(12); 20 + 18 21 display: inline-block; 19 22 float: none; 20 23 vertical-align: top; 21 24 22 - @include breakpoint("medium") { 25 + @include breakpoint('medium') { 23 26 width: grid-calc(6, $total-columns); 24 27 } 25 28 } 26 29 27 30 .video { 28 31 @include media; 32 + 29 33 display: block; 30 34 margin-bottom: $videoGallery-spacing; 31 35 opacity: 0.4; 32 36 text-decoration: none; 33 37 transition: opacity 100ms ease-out; 34 38 35 - @include breakpoint("medium") { 39 + @include breakpoint('medium') { 36 40 margin-bottom: $videoGallery-spacing; 37 41 } 38 42 39 43 &:hover, 40 44 &.is-active { 41 - color: color("greys", "darker"); 45 + color: color('greys', 'darker'); 42 46 opacity: 1; 43 47 } 44 48 } ··· 54 58 } 55 59 56 60 .video-description { 57 - font-size: fontSize("base"); 61 + font-size: fontSize('base'); 58 62 margin-bottom: 0; 59 63 }
+5 -9
assets/scss/components/stencil/writeReview/_writeReview.scss
··· 3 3 // ============================================================================= 4 4 5 5 .writeReview-productDetails { 6 - 7 - @include breakpoint("medium") { 6 + @include breakpoint('medium') { 8 7 @include grid-column(6); 9 8 } 10 9 11 10 .product-brand { 12 - color: color("greys", "light"); 11 + color: color('greys', 'light'); 13 12 margin: 0; 14 13 } 15 14 ··· 18 17 } 19 18 } 20 19 21 - 22 20 .writeReview-form { 23 - 24 - @include breakpoint("medium") { 21 + @include breakpoint('medium') { 25 22 @include grid-column(6); 26 23 } 27 24 } 28 25 29 26 .writeReview-productImage-container { 27 + @include lazy-loaded-padding('product_size'); 30 28 31 - @include lazy-loaded-padding("product_size"); 32 29 position: relative; 33 30 34 31 img { 35 32 @include lazy-loaded-img; 36 - /* Object-fit polyfill */ 37 - font-family: "object-fit: contain;"; 33 + 38 34 height: 100%; 39 35 object-fit: contain; 40 36 }
+22 -36
assets/scss/components/vendor/slick/_slick.scss
··· 1 1 // SLICK 2 2 // ----------------------------------------------------------------------------- 3 - // 4 3 // Purpose: These are the styles for the base Slick carousel 5 - // 6 4 // ----------------------------------------------------------------------------- 7 5 8 - 9 - // 10 6 // Next and Previous buttons for all carousels 11 - // 12 7 // Purpose: Override the plugin to give some Stencil styling to the js generated mark-up 13 - // 14 8 // 1. Set the background again because the plugin sets the full background property on hover 15 9 // 2. Prevent screen flicker when CSS transition is applied 16 - // 17 10 // ----------------------------------------------------------------------------- 18 11 19 12 .slick-next, 20 13 .slick-prev { 21 14 @include carouselOpaqueBackgrounds($slick-arrow-bgColor); 15 + 22 16 border: 1px solid $slick-arrow-borderColor; 23 17 height: remCalc(61px); 24 18 margin-top: -(remCalc(15px)); ··· 38 32 &:hover, 39 33 &:focus { 40 34 @include carouselOpaqueBackgrounds($slick-arrow-bgColor); // 1 35 + 41 36 background-position: 50%; 42 37 background-repeat: no-repeat; 43 38 background-size: 100%; ··· 47 42 .slick-next { 48 43 right: $slick-arrows-offset; 49 44 50 - @include breakpoint("large") { 51 - right: -(spacing("double") + spacing("quarter")); 45 + @include breakpoint('large') { 46 + right: -(spacing('double') + spacing('quarter')); 52 47 } 53 48 54 49 &::before { 55 - @include carousel-arrow-color( $slick-arrow-color, "next"); 50 + @include carousel-arrow-color($slick-arrow-color, 'next'); 56 51 } 57 52 58 53 &:hover { 59 54 &::before { 60 - @include carousel-arrow-color( $slick-arrow-color-hover, "next"); 55 + @include carousel-arrow-color($slick-arrow-color-hover, 'next'); 61 56 } 62 57 } 63 58 } ··· 65 60 .slick-prev { 66 61 left: $slick-arrows-offset; 67 62 68 - @include breakpoint("large") { 69 - left: -(spacing("double") + spacing("quarter")); 63 + @include breakpoint('large') { 64 + left: -(spacing('double') + spacing('quarter')); 70 65 } 71 66 72 67 &::before { 73 - @include carousel-arrow-color( $slick-arrow-color, "prev"); 68 + @include carousel-arrow-color($slick-arrow-color, 'prev'); 74 69 } 75 70 76 71 &:hover { 77 72 &::before { 78 - @include carousel-arrow-color( $slick-arrow-color-hover, "prev"); 73 + @include carousel-arrow-color($slick-arrow-color-hover, 'prev'); 79 74 } 80 75 } 81 76 } ··· 85 80 width: 100%; 86 81 } 87 82 88 - 89 - // 90 83 // Carousel dots 91 - // 92 84 // Purpose: Stencil overrides for the js generated carousel dots 93 - // 94 85 // 2. Nesting depth due to plugin css 95 86 // ----------------------------------------------------------------------------- 96 87 97 - .slick-dots { // 2 88 + .slick-dots { 89 + // 2 98 90 margin: 0; 99 91 100 92 li { 101 93 @include square(32px); 94 + 102 95 margin: 0; 103 96 padding: remCalc(5px); 104 97 105 98 button, 106 99 button::before { 107 100 @include square(15px); 101 + 108 102 border-radius: 50%; 109 103 } 110 104 ··· 137 131 } 138 132 } 139 133 } 140 - 141 134 } 142 135 143 - // 144 136 // Stencil override for product detail page thumbnail dots. 145 137 // ----------------------------------------------------------------------------- 146 138 .productView .slick-dots { 147 139 position: relative; 148 140 } 149 141 150 - 151 - // 152 142 // disabled carousel elements 153 143 // ----------------------------------------------------------------------------- 154 144 .slick-disabled { ··· 156 146 opacity: 0.1; 157 147 } 158 148 159 - 160 - // 161 149 // Slick track 162 150 // ----------------------------------------------------------------------------- 163 151 .slick-track { ··· 165 153 perspective: 1000px; // 2 166 154 } 167 155 168 - // 169 156 // iOS Safari fix https://github.com/kenwheeler/slick/issues/2834#issuecomment-389590661 170 157 // ----------------------------------------------------------------------------- 171 158 div.slick-slider { ··· 174 161 *width: 100%; 175 162 } 176 163 177 - // 178 164 // iOS Safari fix https://github.com/kenwheeler/slick/issues/2156 179 165 // ----------------------------------------------------------------------------- 180 166 .slick-slide .card-image, ··· 182 168 -webkit-touch-callout: default; 183 169 } 184 170 185 - // 186 171 // Carousel tooltips for buttons and bullets 187 172 // ----------------------------------------------------------------------------- 188 173 189 174 .carousel-tooltip { 190 175 @include addFocusTooltip($attr: aria-label); 176 + 191 177 display: none; 192 178 height: 1px; 193 179 margin-top: 10px; 194 180 position: relative; 195 181 196 - @include breakpoint("small") { 182 + @include breakpoint('small') { 197 183 display: block; 198 184 } 199 185 ··· 250 236 } 251 237 } 252 238 253 - // 254 239 // Carousel Play/Pause button 255 240 // ----------------------------------------------------------------------------- 256 241 257 242 .carousel-play-pause-button { 258 243 @include carouselOpaqueBackgrounds($slick-play-pause-button-bgColor); 244 + 259 245 border: 1px solid $slick-play-pause-button-borderColor; 260 - bottom: spacing("third"); 246 + bottom: spacing('third'); 261 247 color: $slick-play-pause-button-color; 262 248 display: none; 263 249 font-size: 14px; ··· 272 258 text-overflow: ellipsis; 273 259 transition: color 100ms ease-out; 274 260 white-space: nowrap; 275 - z-index: zIndex("lowest"); 261 + z-index: zIndex('lowest'); 276 262 277 - @include breakpoint("small") { 263 + @include breakpoint('small') { 278 264 font-size: 18px; 279 265 max-width: 150px; 280 266 } 281 267 282 - @include breakpoint("medium") { 283 - bottom: spacing("single"); 268 + @include breakpoint('medium') { 269 + bottom: spacing('single'); 284 270 left: 25px; 285 271 } 286 272
+21 -39
assets/scss/custom/components/_cards.scss
··· 5 5 padding: 0.5rem; 6 6 border-radius: 10px; 7 7 margin-bottom: 25px; 8 + 8 9 * { 9 - font-family: 'Filson Pro'; 10 + font-family: 'Filson Pro', sans-serif; 10 11 } 11 12 12 13 &:hover { 13 14 border: 1px solid $gold-color; 14 - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 15 + box-shadow: 16 + 0 2px 2px 0 rgba(0, 0, 0, 0.1), 15 17 0 3px 10px 0 rgba(0, 0, 0, 0.05); 16 18 17 - /* .card-figcaption-button { 18 - border-color: $secondary-color; 19 - background-color: $secondary-color; 20 - 21 - &.add-to-cart { 22 - background-color: $nav-hover-text; 23 - color: $white-color; 24 - } 25 - }*/ 26 - 27 19 .card-button { 28 20 .button--secondary { 29 21 background-color: $secondary-color !important; 30 22 } 23 + 31 24 .add-to-cart { 32 25 background-color: $nav-hover-text !important; 33 26 color: $white-color !important; 27 + 34 28 svg { 35 29 path { 36 30 fill: white !important; ··· 43 37 .card-figure { 44 38 overflow: hidden; 45 39 position: relative; 40 + 46 41 .card-img-container { 47 - &:after { 42 + &::after { 48 43 padding-bottom: 70%; 49 44 } 50 45 ··· 61 56 display: grid; 62 57 grid-template-rows: auto 85px auto; 63 58 64 - // @include breakpoint('medium') { 65 - // grid-template-rows: auto 55px auto; 66 - // } 67 - 68 59 .card-text { 69 60 color: $text-color; 70 61 font-weight: 700; ··· 85 76 86 77 .card-title { 87 78 margin-bottom: 0; 79 + 88 80 a { 89 81 color: $text-color; 90 82 } 91 83 } 92 84 93 85 .custom-fields { 94 - //height: 5rem; 95 - // border: 1px solid; 96 86 margin-bottom: 0; 97 87 font-size: 14px; 98 88 height: 3.8rem; 89 + 99 90 @include breakpoint('medium') { 100 91 height: 2.5rem; 101 92 } ··· 110 101 margin-top: 1rem; 111 102 align-items: center; 112 103 justify-content: center; 113 - grid-gap: 0.5rem; 104 + gap: 0.5rem; 114 105 } 115 106 116 107 .form-field--increments { ··· 122 113 padding: 1rem 2.2rem 1rem 0.7rem; 123 114 color: $white-color; 124 115 background-color: $nav-hover-text; 125 - svg { 126 - // fill: red; 127 - } 116 + 128 117 @include breakpoint('medium') { 129 118 margin-top: 0; 130 119 background-color: transparent; 131 120 transition: all 0.15s ease; 132 121 color: $body-color; 122 + 133 123 &:hover { 134 124 background-color: $nav-hover-text; 135 125 color: $white-color; ··· 141 131 .card-button { 142 132 width: 100%; 143 133 margin-top: 1rem; 134 + 144 135 .button--secondary { 145 - // background-color: $secondary-color; 146 136 background-color: transparent; 147 137 transition: all 0.15s ease; 148 138 color: $body-color; 149 - // border: 1px solid $input-field; 150 139 height: 75px; 151 - 152 - // @include breakpoint('medium') { 153 - // color: $body-color; 154 - // &:hover { 155 - // background-color: $gold-color !important; 156 - // color: $white-color !important; 157 - // } 158 - // } 159 140 } 141 + 160 142 .add-to-cart { 161 143 border: 0; 162 144 display: flex; 163 - grid-gap: 10px; 145 + gap: 10px; 164 146 align-items: center; 165 147 justify-content: center; 166 148 text-align: center; ··· 169 151 padding: 1rem 1.5rem; 170 152 background-color: $nav-hover-text; 171 153 color: $white-color; 154 + 172 155 svg { 173 - // stroke: $white-color; 174 156 path { 175 157 fill: white; 176 158 } 177 159 } 178 - /* background-image: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/-right-icon.png); 179 - background-position: 94% center; 180 - background-repeat: no-repeat;*/ 181 160 182 161 @include breakpoint('medium') { 183 162 margin-top: 0; 184 163 background-color: transparent; 185 164 color: $body-color; 165 + 186 166 svg { 187 167 path { 188 168 fill: #bd9b60; ··· 202 182 } 203 183 204 184 h2 { 205 - font-family: 'Filson Pro'; 185 + font-family: 'Filson Pro', sans-serif; 206 186 color: $headingColor; 207 187 font-weight: 700; 208 188 font-size: 28px; 189 + 209 190 @include breakpoint('medium') { 210 191 font-size: 40px; 211 192 } 212 193 } 194 + 213 195 .slick-list { 214 196 .card { 215 197 .card-body {
+19 -10
assets/scss/tools/_theme_focus.scss
··· 1 + /* stylelint-disable declaration-no-important -- something overrides it if not using important, still debugging where it comes from */ 1 2 // ============================================================================= 2 3 // THEME FOCUS (global) 3 4 // ============================================================================= 4 5 5 - $outline-width: 2px; 6 - $outline-style: solid; 7 - $outline-color: #0f7fff; 8 - $outline-offset: 1px; 6 + $outline-width: 2px; 7 + $outline-style: solid; 8 + $outline-color: #333; 9 + $outline-offset: 2px; 9 10 10 11 input, 11 12 button, ··· 13 14 select, 14 15 details, 15 16 [href], 16 - [tabindex]:not([tabindex="-1"]), 17 - [contenteditable="true"] { 18 - &:focus { 17 + [tabindex]:not([tabindex='-1']), 18 + [contenteditable='true'] { 19 + &:focus:not(:focus-visible) { 20 + outline: none; 21 + } 22 + 23 + &:focus-visible { 19 24 outline: $outline-width $outline-style $outline-color !important; 20 - outline-offset: $outline-offset !important; 25 + outline-offset: $outline-offset; 21 26 } 22 27 } 23 28 24 29 label { 25 - input:focus + & { 30 + input:focus:not(:focus-visible) + & { 31 + outline: none; 32 + } 33 + 34 + input:focus-visible + & { 26 35 outline: $outline-width $outline-style $outline-color !important; 27 - outline-offset: $outline-offset !important; 36 + outline-offset: $outline-offset; 28 37 } 29 38 }
+1 -1
config.json
··· 1 1 { 2 - "name": "cleanup description & blogs", 2 + "name": "fix focus styles", 3 3 "version": "6.10.0", 4 4 "template_engine": "handlebars_v4", 5 5 "meta": {
+1
stylelint.config.js
··· 20 20 'media-feature-range-notation': null, 21 21 'selector-class-pattern': null, 22 22 'selector-id-pattern': null, 23 + 'scss/at-mixin-pattern': null, 23 24 'scss/dollar-variable-pattern': null, 24 25 'scss/at-mixin-argumentless-call-parentheses': null, 25 26 'scss/percent-placeholder-pattern': null,
+1 -11
templates/components/common/header.html
··· 1 - 2 - <!-- UIkit CSS --> 3 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/css/uikit.min.css" /> 1 + <!-- This gives us our font, Filson Pro --> 4 2 <link rel="stylesheet" href="https://use.typekit.net/drc3iaj.css"> 5 3 6 - <!-- UIkit JS --> 7 - <script src="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/js/uikit.min.js"></script> 8 - <script src="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/js/uikit-icons.min.js"></script> 9 - 10 4 <!-- CALL MOST RECENT JQUERY LIBRARY --> 11 5 <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script> 12 6 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 13 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 14 8 15 - <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> 16 9 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"> 17 - 18 - 19 - <script src="{{cdn 'assets/js/custom.js'}}"></script> 20 10 21 11 22 12 <a href="#main-content" class="skip-to-main-link">{{lang 'header.skip_to_main'}}</a>
+246 -222
templates/pages/cart.html
··· 2 2 cart: true 3 3 --- 4 4 {{inject 'cancelButtonText' (lang 'common.cancel')}} {{#partial "page"}} 5 - {{inject 'invalidEntryMessage' (lang 'cart.invalid_entry_message')}} 6 - {{inject 'cartId' cart_id}} 5 + {{inject 'invalidEntryMessage' (lang 'cart.invalid_entry_message')}} 6 + {{inject 'cartId' cart_id}} 7 7 8 - <script type="module"> 9 - const jsContext = JSON.parse({{jsContext}}); 10 - const cheetahCentreProductId = 639; 11 - const variantPrices = { 12 - 718: 0.50, 13 - 719: 1.00, 14 - 720: 2.00 15 - }; 8 + <script type="module"> 9 + const jsContext = JSON.parse({{ jsContext }}); 10 + const cheetahCentreProductId = 639; 11 + const variantPrices = { 12 + 718: 0.50, 13 + 719: 1.00, 14 + 720: 2.00 15 + }; 16 16 17 - try { 18 - const charityProduct = await fetch('/graphql', { 19 - method: 'POST', 20 - credentials: 'same-origin', 21 - headers: { 22 - 'Content-Type': 'application/json', 23 - 'Authorization': 'Bearer {{ settings.storefront_api.token }}' 24 - }, 25 - body: JSON.stringify({ 26 - query: ` 17 + try { 18 + const charityProduct = await fetch('/graphql', { 19 + method: 'POST', 20 + credentials: 'same-origin', 21 + headers: { 22 + 'Content-Type': 'application/json', 23 + 'Authorization': 'Bearer {{ settings.storefront_api.token }}' 24 + }, 25 + body: JSON.stringify({ 26 + query: ` 27 27 query site { 28 28 site { 29 29 product(entityId: ${cheetahCentreProductId}) { ··· 58 58 ` 59 59 }) 60 60 }) 61 - .then(response => response.json()) 62 - .then(data => data.data.site.product); 61 + .then(response => response.json()) 62 + .then(data => data.data.site.product); 63 63 64 - if (charityProduct) { 65 - const charitySection = document.querySelector('.charity-product'); 64 + if (charityProduct) { 65 + const charitySection = document.querySelector('.charity-product'); 66 66 67 - const charityTitle = charitySection.querySelector('h4'); 68 - charityTitle.textContent = charityProduct.name; 67 + const charityTitle = charitySection.querySelector('h4'); 68 + charityTitle.textContent = charityProduct.name; 69 69 70 - const charityImage = charitySection.querySelector('img'); 71 - // charityImage.src = charityProduct.images.edges[0].node.url; 70 + const charityImage = charitySection.querySelector('img'); 71 + // charityImage.src = charityProduct.images.edges[0].node.url; 72 72 73 - const charityList = charitySection.querySelector('ul'); 74 - charityProduct.variants.edges.forEach((variant, i) => { 75 - const listItem = document.createElement('li'); 76 - if (i === 0) { 77 - listItem.classList.add('selected'); 78 - } 79 - listItem.dataset.variantId = variant.node.entityId; 80 - const price = variantPrices[variant.node.entityId]; 81 - listItem.textContent = `£${price.toFixed(2)}`; 82 - listItem.addEventListener('click', () => { 83 - const selected = charityList.querySelector('.selected'); 84 - if (selected) { 85 - selected.classList.remove('selected'); 73 + const charityList = charitySection.querySelector('ul'); 74 + charityProduct.variants.edges.forEach((variant, i) => { 75 + const listItem = document.createElement('li'); 76 + if (i === 0) { 77 + listItem.classList.add('selected'); 86 78 } 87 - listItem.classList.add('selected'); 79 + listItem.dataset.variantId = variant.node.entityId; 80 + const price = variantPrices[variant.node.entityId]; 81 + listItem.textContent = `£${price.toFixed(2)}`; 82 + listItem.addEventListener('click', () => { 83 + const selected = charityList.querySelector('.selected'); 84 + if (selected) { 85 + selected.classList.remove('selected'); 86 + } 87 + listItem.classList.add('selected'); 88 + }); 89 + charityList.appendChild(listItem); 88 90 }); 89 - charityList.appendChild(listItem); 90 - }); 91 91 92 - charitySection.style.display = 'block'; 93 - const addToCartButton = document.getElementById('add-charity-product'); 94 - addToCartButton.addEventListener('click', async () => { 95 - const selectedVariant = charityList.querySelector('.selected'); 96 - const variantId = Number(selectedVariant.dataset.variantId); 92 + charitySection.style.display = 'block'; 93 + const addToCartButton = document.getElementById('add-charity-product'); 94 + addToCartButton.addEventListener('click', async () => { 95 + const selectedVariant = charityList.querySelector('.selected'); 96 + const variantId = Number(selectedVariant.dataset.variantId); 97 97 98 - addToCartButton.disabled = true; 99 - addToCartButton.style.cursor = 'not-allowed'; 100 - addToCartButton.textContent = 'Adding...'; 98 + addToCartButton.disabled = true; 99 + addToCartButton.style.cursor = 'not-allowed'; 100 + addToCartButton.textContent = 'Adding...'; 101 101 102 - const mutation = ` 102 + const mutation = ` 103 103 mutation addCartLineItems($addCartLineItemsInput: AddCartLineItemsInput!) { 104 104 cart { 105 105 addCartLineItems(input: $addCartLineItemsInput) { ··· 111 111 } 112 112 `; 113 113 114 - const variables = { 115 - addCartLineItemsInput: { 116 - cartEntityId: jsContext.cartId, 117 - data: { 118 - lineItems: [ 119 - { 120 - quantity: 1, 121 - productEntityId: cheetahCentreProductId, 122 - variantEntityId: variantId 114 + const variables = { 115 + addCartLineItemsInput: { 116 + cartEntityId: jsContext.cartId, 117 + data: { 118 + lineItems: [ 119 + { 120 + quantity: 1, 121 + productEntityId: cheetahCentreProductId, 122 + variantEntityId: variantId 123 + } 124 + ] 125 + } 123 126 } 124 - ] 125 - } 127 + }; 128 + 129 + const response = await fetch('/graphql', { 130 + method: 'POST', 131 + credentials: 'same-origin', 132 + headers: { 133 + 'Content-Type': 'application/json', 134 + 'Authorization': 'Bearer {{ settings.storefront_api.token }}' 135 + }, 136 + body: JSON.stringify({ 137 + query: mutation, 138 + variables 139 + }) 140 + }); 141 + 142 + if (response.ok) { 143 + window.location.reload(); 144 + } else { 145 + addToCartButton.disabled = false; 146 + addToCartButton.style.cursor = 'pointer'; 147 + addToCartButton.textContent = 'Add to Cart'; 148 + console.error('Error adding charity product to cart', response); 126 149 } 127 - }; 128 - 129 - const response = await fetch('/graphql', { 130 - method: 'POST', 131 - credentials: 'same-origin', 132 - headers: { 133 - 'Content-Type': 'application/json', 134 - 'Authorization': 'Bearer {{ settings.storefront_api.token }}' 135 - }, 136 - body: JSON.stringify({ 137 - query: mutation, 138 - variables 139 - }) 140 150 }); 151 + } 152 + } catch (e) { 153 + console.error('Error getting charity product data', e); 154 + } 155 + </script> 141 156 142 - if (response.ok) { 143 - window.location.reload(); 144 - } else { 145 - addToCartButton.disabled = false; 146 - addToCartButton.style.cursor = 'pointer'; 147 - addToCartButton.textContent = 'Add to Cart'; 148 - console.error('Error adding charity product to cart', response); 149 - } 150 - }); 151 - } 152 - } catch (e) { 153 - console.error('Error getting charity product data', e); 154 - } 155 - </script> 157 + <div class="container" style="padding: 0;"> 158 + <div class="page"> 156 159 157 - <div class="container" style="padding: 0;"> 158 - <div class="page"> 160 + <main style='color: #687D6A;' class="page-content" data-item-size="{{cart.items.length}}" data-cart 161 + data-id="{{cart_id}}" data-customer-grp-id="{{customer_group_id}}"> 162 + {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} 159 163 160 - <main style='color: #687D6A;' class="page-content" data-item-size="{{cart.items.length}}" data-cart data-id="{{cart_id}}" data-customer-grp-id="{{customer_group_id}}"> 161 - {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} 164 + {{> components/cart/page-title}} 162 165 163 - {{> components/cart/page-title}} 166 + <section class="charity-product"> 167 + <h4></h4> 168 + <div class="charity-container"> 169 + <div class="left"> 170 + <img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cheetah-centre-logo-bw-1739357472050.png?t=1739357472" 171 + alt="Ann Van Dyk Cheetah Centre logo" width="200"> 172 + <a href="/cheetah-sanctuary-donation">Learn more</a> 173 + </div> 174 + <div class="right"> 175 + <ul class="charity-variants"></ul> 176 + <button id="add-charity-product">Add to Cart</button> 177 + </div> 178 + </div> 179 + </section> 164 180 165 - <section class="charity-product"> 166 - <h4></h4> 167 - <div class="charity-container"> 168 - <div class="left"> 169 - <img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cheetah-centre-logo-bw-1739357472050.png?t=1739357472" alt="Ann Van Dyk Cheetah Centre logo" width="200"> 170 - <a href="/cheetah-sanctuary-donation">Learn more</a> 171 - </div> 172 - <div class="right"> 173 - <ul class="charity-variants"></ul> 174 - <button id="add-charity-product">Add to Cart</button> 181 + <div data-cart-status> 182 + {{> components/cart/status-messages}} 175 183 </div> 176 - </div> 177 - </section> 178 184 179 - <div data-cart-status> 180 - {{> components/cart/status-messages}} 181 - </div> 182 - 183 - {{#if cart.items.length}} 185 + {{#if cart.items.length}} 184 186 185 - <div class="loadingOverlay"></div> 187 + <div class="loadingOverlay"></div> 186 188 187 - <div data-cart-content> 188 - {{> components/cart/content}} 189 - </div> 189 + <div data-cart-content> 190 + {{> components/cart/content}} 191 + </div> 190 192 191 - <div data-cart-totals class="cart-totals-container cart-content-padding-right"> 192 - {{> components/cart/totals}} 193 - </div> 193 + <div data-cart-totals class="cart-totals-container cart-content-padding-right"> 194 + {{> components/cart/totals}} 195 + </div> 194 196 195 197 196 - {{#if cart.show_primary_checkout_button}} 197 - <div class="cart-actions"> 198 + {{#if cart.show_primary_checkout_button}} 199 + <div class="cart-actions"> 198 200 199 - <a class="button button--secondary" href="/all/"> 200 - <i class="icon" aria-hidden="true"> 201 - <svg> 202 - <use href="#icon-chevron-left"></use> 203 - </svg> 204 - </i> 205 - {{lang 'cart.added_to_cart.continue_shopping'}} 206 - </a> 207 - <a 208 - id="do_checkout" 209 - class="button button--primary ui-state-disabled" 210 - href="{{urls.checkout.single_address}}" 211 - title="{{lang 'cart.checkout.title'}}" 212 - data-primary-checkout-now-action 213 - > 214 - {{lang 'cart.checkout.button'}} 215 - </a> 216 - {{#if cart.show_multiple_address_shipping}} 217 - <a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}"> 218 - {{lang 'cart.preview.checkout_multiple'}} 219 - </a> 201 + <a class="button button--secondary" href="/all/"> 202 + <i class="icon" aria-hidden="true"> 203 + <svg> 204 + <use href="#icon-chevron-left"></use> 205 + </svg> 206 + </i> 207 + {{lang 'cart.added_to_cart.continue_shopping'}} 208 + </a> 209 + <a id="do_checkout" class="button button--primary ui-state-disabled" 210 + href="{{urls.checkout.single_address}}" title="{{lang 'cart.checkout.title'}}" 211 + data-primary-checkout-now-action> 212 + {{lang 'cart.checkout.button'}} 213 + </a> 214 + {{#if cart.show_multiple_address_shipping}} 215 + <a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}"> 216 + {{lang 'cart.preview.checkout_multiple'}} 217 + </a> 218 + {{/if}} 219 + </div> 220 + {{else}} 221 + <div class="cart-actions"> 222 + <a class="button" href="{{urls.home}}" 223 + title="{{lang 'cart.continue_shopping'}}">{{lang 'cart.continue_shopping'}}</a> 224 + </div> 220 225 {{/if}} 221 - </div> 222 - {{else}} 223 - <div class="cart-actions"> 224 - <a class="button" href="{{urls.home}}" title="{{lang 'cart.continue_shopping'}}">{{lang 'cart.continue_shopping'}}</a> 225 - </div> 226 - {{/if}} 227 226 228 - {{#if cart.additional_checkout_buttons}} 229 - <div class="cart-additionalCheckoutButtons"> 230 - {{#each cart.additional_checkout_buttons}} 231 - {{{this}}} 232 - {{/each}} 233 - </div> 234 - {{/if}} 235 - {{else}} 236 - <h3>{{lang 'cart.checkout.empty_cart'}}</h3> 237 - {{{ remote_api_scripts }}} 238 - {{/if}} 227 + {{#if cart.additional_checkout_buttons}} 228 + <div class="cart-additionalCheckoutButtons"> 229 + {{#each cart.additional_checkout_buttons}} 230 + {{{this}}} 231 + {{/each}} 232 + </div> 233 + {{/if}} 234 + {{else}} 235 + <h3>{{lang 'cart.checkout.empty_cart'}}</h3> 236 + {{{ remote_api_scripts }}} 237 + {{/if}} 239 238 240 - </main> 241 - <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script> 239 + </main> 240 + <script src="https://code.jquery.com/jquery-3.6.2.min.js" 241 + integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script> 242 242 243 - <div class="modal fade" id="redeem_point" tabindex="-1" aria-labelledby="redeem_point" style="display: none;" aria-hidden="true"> 244 - <div class="modal-dialog"> 245 - <div class="modal-content swal2-content"> 246 - <div class="swal2-icon swal2-warning swal2-icon-show" style="display: flex;"> 247 - <div class="swal2-icon-content">!</div> 243 + <div class="modal fade" id="redeem_point" tabindex="-1" aria-labelledby="redeem_point" 244 + style="display: none;" aria-hidden="true"> 245 + <div class="modal-dialog"> 246 + <div class="modal-content swal2-content"> 247 + <div class="swal2-icon swal2-warning swal2-icon-show" style="display: flex;"> 248 + <div class="swal2-icon-content">!</div> 249 + </div> 250 + <h4 style="text-align:center;margin-bottom:5px;" id="swal2-title"> 251 + </h2> 252 + <button type="button" class="swal2-close" 253 + onclick="document.getElementById('redeem_point').style.display='none';">x</button> 254 + <div id="swal2-content" class="swal2-html-container uk-margin-small-bottom" 255 + style="display: block;">Enter the points to redeem:</div> 256 + <input type="number" class="uk-input uk-text-center" id="redeem" name="redeem" min="" max="" 257 + value="" style="max-width:200px;"> 248 258 </div> 249 - <h4 style="text-align:center;margin-bottom:5px;" id="swal2-title"></h2> 250 - <button type="button" class="swal2-close" onclick="document.getElementById('redeem_point').style.display='none';">x</button> 251 - <div id="swal2-content" class="swal2-html-container uk-margin-small-bottom" style="display: block;">Enter the points to redeem:</div> 252 - <input type="number" class="uk-input uk-text-center" id="redeem" name="redeem" min="" max="" value="" style="max-width:200px;"> 253 - </div> 254 - <div class="swal2-footer"> 255 - <span style="display:none;" id="total_point"></span> 256 - <a onclick="redeem_loyalty()" style="background-color: #BD9B60 !important; border-color: #BD9B60 !important; border-radius: 50px;font-weight: 500;font-size: 16px;" class="button button--primary">Redeem point &nbsp;</a> 257 - <a onclick="document.getElementById('redeem_point').style.display='none';" style="background-color: #FFF !important; border-color: #BD9B60 !important; border-radius: 50px;font-weight: 500;font-size: 16px;color: #BD9B60;" class="button button--primary">Cancel</a> 259 + <div class="swal2-footer"> 260 + <span style="display:none;" id="total_point"></span> 261 + <a onclick="redeem_loyalty()" 262 + style="background-color: #BD9B60 !important; border-color: #BD9B60 !important; border-radius: 50px;font-weight: 500;font-size: 16px;" 263 + class="button button--primary">Redeem point &nbsp;</a> 264 + <a onclick="document.getElementById('redeem_point').style.display='none';" 265 + style="background-color: #FFF !important; border-color: #BD9B60 !important; border-radius: 50px;font-weight: 500;font-size: 16px;color: #BD9B60;" 266 + class="button button--primary">Cancel</a> 267 + </div> 258 268 </div> 259 269 </div> 260 - </div> 261 270 262 - <div class="modal fade" id="newsletter-box" tabindex="-1" aria-labelledby="redeem_point" style="text-align:center;display: none;box-shadow:0px 0px 39px 9px rgb(0 0 0 / 20%);border-radius:50px" aria-hidden="true"> 263 - <div class="modal-dialog"> 264 - <div class="modal-header swal2-header" style="background: #687d6a;"> 265 - <h2 style="color: #fff;">Claim your free shipping now</h2> 266 - <button type="button" class="swal2-close" onclick="close_nl_box();">x</button> 267 - </div> 268 - <div class="modal-content swal2-content"> 269 - <div class="nl_success_wrapper" style="height: 96px;display:none"> 270 - <div class="coupon-message" style="font-size: 18px;padding: 40px 0;"></div> 271 - <input id="nl_continue" class="button button--primary form-prefixPostfix-button--postfix" type="button" value="Continue"> 271 + <div class="modal fade" id="newsletter-box" tabindex="-1" aria-labelledby="redeem_point" 272 + style="text-align:center;display: none;box-shadow:0px 0px 39px 9px rgb(0 0 0 / 20%);border-radius:50px" 273 + aria-hidden="true"> 274 + <div class="modal-dialog"> 275 + <div class="modal-header swal2-header" style="background: #687d6a;"> 276 + <h2 style="color: #fff;">Claim your free shipping now</h2> 277 + <button type="button" class="swal2-close" onclick="close_nl_box();">x</button> 272 278 </div> 273 - <div class="newsletter-wrapper" style="margin: 0 auto;width: 100%;padding: 25px;"> 274 - <div class=""> 275 - <div class="" style="margin-bottom: 25px;">Subscribe to our newsletter to get free shipping! </div> 276 - </div> 279 + <div class="modal-content swal2-content"> 280 + <div class="nl_success_wrapper" style="height: 96px;display:none"> 281 + <div class="coupon-message" style="font-size: 18px;padding: 40px 0;"></div> 282 + <input id="nl_continue" class="button button--primary form-prefixPostfix-button--postfix" 283 + type="button" value="Continue"> 284 + </div> 285 + <div class="newsletter-wrapper" style="margin: 0 auto;width: 100%;padding: 25px;"> 286 + <div class=""> 287 + <div class="" style="margin-bottom: 25px;">Subscribe to our newsletter to get free 288 + shipping! </div> 289 + </div> 277 290 278 - <div class="form-section"> 279 - <form class="form" id="nl_form" style="margin: 0 auto;"> 280 - <input type="hidden" name="action" value="subscribe"> 281 - <input type="hidden" name="nl_first_name" value="bc"> 282 - <input type="hidden" name="authenticity_token" value="e0e91a6b4d5210710b76058e35a23605d327844d2838f440cf0501174cda7753"> 283 - <input type="hidden" name="check" value="1"> 284 - <input class="form-input" id="nl_email" name="nl_email" type="email" value="" placeholder="Your email address" style="border: 1px solid #687d6a;"> 285 - <input id="nl_cta" class="button button--primary form-prefixPostfix-button--postfix" type="button" value="Join Now"> 291 + <div class="form-section"> 292 + <form class="form" id="nl_form" style="margin: 0 auto;"> 293 + <input type="hidden" name="action" value="subscribe"> 294 + <input type="hidden" name="nl_first_name" value="bc"> 295 + <input type="hidden" name="authenticity_token" 296 + value="e0e91a6b4d5210710b76058e35a23605d327844d2838f440cf0501174cda7753"> 297 + <input type="hidden" name="check" value="1"> 298 + <input class="form-input" id="nl_email" name="nl_email" type="email" value="" 299 + placeholder="Your email address" style="border: 1px solid #687d6a;"> 300 + <input id="nl_cta" class="button button--primary form-prefixPostfix-button--postfix" 301 + type="button" value="Join Now"> 286 302 287 - </form> 288 - <p id="response_api" style="text-align: center;font-size:1.1rem;font-weight:400;color:#bd9b60;"></p> 289 - </div> 303 + </form> 304 + <p id="response_api" 305 + style="text-align: center;font-size:1.1rem;font-weight:400;color:#bd9b60;"></p> 306 + </div> 307 + </div> 290 308 </div> 291 - </div> 292 - <div class="swal2-footer" style="margin-bottom:25px;"> 293 - <div class="foot_data" style="width: 100%;margin: 0 auto;text-align: center;"> 294 - <div class="gdpr-field"> 295 - <input type="checkbox" id="gdpr_checkbox" name="gdpr_checkbox" class="gdpr-checkbox"> 296 - <span class="wcb-gdpr-message">I agree to the <a href="terms-conditions" target="_blank">Terms &amp; Conditions</a> and <a href="privacy-policy" target="_blank">Privacy Policy</a>.</span> 309 + <div class="swal2-footer" style="margin-bottom:25px;"> 310 + <div class="foot_data" style="width: 100%;margin: 0 auto;text-align: center;"> 311 + <div class="gdpr-field"> 312 + <input type="checkbox" id="gdpr_checkbox" name="gdpr_checkbox" class="gdpr-checkbox"> 313 + <span class="wcb-gdpr-message">I agree to the <a href="terms-conditions" 314 + target="_blank">Terms &amp; Conditions</a> and <a href="privacy-policy" 315 + target="_blank">Privacy Policy</a>.</span> 316 + </div> 317 + <div class="footer-text">No spam email &amp; you can unsubscribe at anytime. Maximum order 318 + £100</div> 319 + </div> 297 320 </div> 298 - <div class="footer-text">No spam email &amp; you can unsubscribe at anytime. Maximum order £100</div> 299 - </div> 300 321 </div> 301 322 </div> 302 323 </div> 303 324 </div> 304 - </div> 305 - <div style="display:none" id="gift_wrap" class="coupon-box-small-icon-wrap coupon-box-small-icon-position-bottom-left coupon-box-small-icon-hidden-mobile"> 306 - <div class="coupon-box-small-icon-container"> 307 - <span id="gift_close" class="coupon-box-small-icon-close button_close_icons-cancel" title="Do not show again"></span> 308 - <span id="gift_box" class="coupon-box-small-icon giftbox-gifbox-with-ribbon-on-top"></span> 325 + <div style="display:none" id="gift_wrap" 326 + class="coupon-box-small-icon-wrap coupon-box-small-icon-position-bottom-left coupon-box-small-icon-hidden-mobile"> 327 + <div class="coupon-box-small-icon-container"> 328 + <span id="gift_close" class="coupon-box-small-icon-close button_close_icons-cancel" 329 + title="Do not show again"></span> 330 + <span id="gift_box" class="coupon-box-small-icon giftbox-gifbox-with-ribbon-on-top"></span> 331 + </div> 309 332 </div> 310 - </div> 311 333 {{/partial}} 312 334 {{> layout/base}} 313 335 314 336 <style> 337 + button.cart-remove { 338 + display: flex; 339 + } 340 + 315 341 .charity-product { 316 342 display: none; 317 343 max-width: 420px; ··· 325 351 } 326 352 327 353 .charity-product h4 { 328 - color:#687D6A; 354 + color: #687D6A; 329 355 font-weight: 500; 330 356 } 331 357 ··· 335 361 align-items: center; 336 362 } 337 363 338 - .charity-container .left, 339 - .charity-container .right { 364 + .charity-container .left, 365 + .charity-container .right { 340 366 display: flex; 341 367 flex-direction: column; 342 368 } 343 369 344 370 .charity-container .left { 345 - flex: 1; 371 + flex: 1; 346 372 } 347 373 348 374 .charity-container .right { ··· 391 417 #add-charity-product:hover { 392 418 background-color: #5c6e5d; 393 419 } 394 - 395 - 396 420 </style>