rogerioromao.dev / purrform-frontend
The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

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

Performance cleanup (#58)

authored by

Rogerio Romao and committed by
GitHub 0c2797b6 b0337dec

+984 -833
+1
.gitignore
··· 28 28 29 29 scripts 30 30 cdn-dependencies-audit.md 31 + .playwright-mcp/
+313 -289
assets/scss/custom.scss
··· 23 23 } 24 24 25 25 $body-color: #232524; 26 - $white-color: #ffffff; 26 + $white-color: #fff; 27 27 $text-color: #546153; 28 28 $secondary-color: #ffedcd; 29 29 $nav-hover: #ffedcd; ··· 42 42 .textWhite { 43 43 color: $white-color; 44 44 } 45 + 45 46 .form-label { 46 47 font-weight: 700; 47 48 color: $body-color; 48 49 } 50 + 49 51 .overlay { 50 52 position: absolute; 51 53 left: 0; ··· 56 58 } 57 59 58 60 body { 59 - font-family: 'Filson Pro'; 61 + font-family: 'Filson Pro', sans-serif; 62 + color: $body-color; 60 63 } 61 64 62 65 h1, ··· 65 68 h4, 66 69 h5, 67 70 h6 { 68 - font-family: 'Filson Pro'; 71 + font-family: 'Filson Pro', sans-serif; 69 72 font-weight: 600; 70 73 line-height: 1.2em; 71 74 color: $headingColor; ··· 75 78 text-align: left; 76 79 font-size: 32px; 77 80 margin-bottom: 2rem; 78 - font-family: 'Filson Pro'; 81 + font-family: 'Filson Pro', sans-serif; 79 82 color: $headingColor; 80 83 font-weight: 700; 84 + 85 + &.page-heading--account { 86 + text-align: center; 87 + } 88 + 81 89 @include breakpoint('medium') { 82 90 font-size: 40px; 83 91 } ··· 86 94 h1.page-heading { 87 95 text-transform: capitalize; 88 96 margin-bottom: 1rem; 89 - font-family: 'Filson Pro'; 97 + font-family: 'Filson Pro', sans-serif; 90 98 font-size: 38px; 91 99 color: $headingColor; 92 100 font-weight: 700; 101 + 93 102 @include breakpoint('medium') { 94 103 font-size: 48px; 95 104 } ··· 110 119 margin-bottom: 0; 111 120 } 112 121 } 113 - .section { 114 - padding: 3rem 0; 115 - } 122 + 116 123 .text-center { 117 124 text-align: center; 118 125 } ··· 121 128 .form-select { 122 129 height: 48px; 123 130 border-radius: 32px; 124 - font-family: 'Filson Pro'; 131 + font-family: 'Filson Pro', sans-serif; 125 132 font-size: 1rem; 126 133 line-height: 48px; 127 134 padding-top: 0; ··· 190 197 } 191 198 192 199 .col5 { 193 - width: 41.66666667%; 200 + width: 41.667%; 194 201 } 195 202 196 203 .col7 { 197 - width: 58.33333333%; 204 + width: 58.333%; 198 205 } 199 206 200 207 .col8 { ··· 240 247 } 241 248 } 242 249 } 250 + 243 251 #dropdown-overlay { 244 252 position: absolute; 245 253 display: none; 246 254 width: 100%; 247 255 height: 100%; 248 - top: 0; 249 - left: 0; 250 - right: 0; 251 - bottom: 0; 256 + inset: 0; 252 257 background-color: rgba(51, 51, 51, 0.7); 253 258 z-index: 70; 259 + 254 260 &.active { 255 261 @media only screen and (min-width: 800px) { 256 262 display: block; 257 263 } 258 264 } 259 265 } 266 + 260 267 .container { 261 268 max-width: 1280px; 262 269 padding: 0 15px; ··· 267 274 font-weight: 700; 268 275 border: 1px solid $input-field; 269 276 height: auto; 270 - font-family: 'Filson Pro'; 271 - line-height: normal; 277 + font-family: 'Filson Pro', sans-serif; 272 278 padding: 1rem 1.5rem; 273 279 line-height: 1.2rem; 274 280 font-size: 1rem; 275 281 text-decoration: none !important; 282 + 276 283 @include breakpoint('small') { 277 284 padding: 1rem 2.5rem; 278 285 } 286 + 279 287 &.button--primary { 280 288 border: 1px solid $nav-hover-text !important; 281 289 background-color: $nav-hover-text !important; 282 290 color: $white-color !important; 291 + 283 292 &:hover { 284 293 background-color: white !important; 285 294 color: $headingColor !important; 286 295 border: 1px solid $nav-hover-text !important; 296 + 287 297 p { 288 298 color: $headingColor !important; 289 299 } ··· 295 305 color: $body-color; 296 306 border: 0; 297 307 transition: all 0.15s ease; 308 + 298 309 &:hover { 299 310 color: $white-color; 300 311 background-color: $gold-color; 312 + 301 313 svg { 302 314 fill: $white-color; 303 315 } 304 316 } 305 317 } 318 + 306 319 &.button--blank { 307 320 border: 0; 308 321 border-radius: 0; ··· 344 357 .navUser-item--account { 345 358 display: block !important; 346 359 border-right: 1px solid $white-color; 360 + 347 361 svg { 348 362 display: block !important; 349 363 } ··· 356 370 position: static; 357 371 transform: none; 358 372 359 - // padding-right: 10px; 360 - 361 373 @include breakpoint('medium') { 362 374 padding: 1rem 15px; 363 375 } 364 376 365 - #navPages-support { 366 - @include breakpoint('medium') { 367 - // width: 166px; 368 - // padding: 1.5rem 0 0!important; 369 - // left: auto; 370 - .navPage-subMenu-item { 371 - // float: none; 372 - // width: auto; 373 - } 374 - } 375 - } 376 377 .container { 377 378 padding: 0; 378 379 } ··· 388 389 .header-logo { 389 390 margin: 0; 390 391 max-height: 42px; 392 + 391 393 .header-logo__link { 392 394 width: 100%; 395 + 393 396 @include breakpoint('medium') { 394 397 width: auto; 395 398 } 396 399 } 397 - } 398 - 399 - .navPages-list { 400 - //display: -webkit-box !important; 401 400 } 402 401 403 402 .navUser-section, ··· 416 415 color: $white-color; 417 416 418 417 &.navUser-item--contact { 419 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/need-help.png) 418 + background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/need-help.png') 420 419 left center no-repeat; 421 420 padding: 1rem 0 1rem 34px; 422 421 ··· 424 423 padding-bottom: 0; 425 424 padding-top: 0; 426 425 } 426 + 427 427 span { 428 428 font-weight: 400; 429 429 } 430 + 430 431 .navUser-action { 431 432 display: inline-block; 432 433 font-weight: 700; ··· 435 436 } 436 437 437 438 &.navUser-item--search { 438 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/search.png) 439 + background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/search.png') 439 440 left center no-repeat; 440 441 } 441 442 442 443 &.navUser-item--account { 443 - padding: 1rem 0 1rem 34px; 444 444 display: block !important; 445 - 446 445 z-index: 9; 447 446 padding: 1rem 1rem 0.5rem 34px; 448 447 height: 100%; 448 + 449 449 a, 450 450 .navUser-or { 451 451 display: none; 452 + 452 453 &.icon-container { 453 454 position: fixed; 454 455 display: inline-block; ··· 459 460 } 460 461 } 461 462 } 463 + 462 464 @include breakpoint('medium') { 463 - padding-bottom: 0; 464 - padding-top: 0; 465 465 border-right: none; 466 466 padding: 0 0 10px 34px; 467 + 467 468 a, 468 469 .navUser-or { 469 470 display: inline-block; 471 + 470 472 &.icon-container { 471 473 position: relative; 472 474 top: 7px; 473 475 left: 15px; 474 476 } 475 477 } 478 + 476 479 .logout-icon { 477 480 margin-left: 2rem; 478 481 position: relative; ··· 492 495 fill: none; 493 496 stroke: none; 494 497 } 498 + 495 499 @include breakpoint('medium') { 496 500 font-weight: 400; 497 501 } ··· 506 510 display: flex; 507 511 align-items: center; 508 512 width: 65px; 513 + 509 514 @include breakpoint('medium') { 510 515 width: auto; 511 516 } ··· 514 519 font-size: 16px; 515 520 font-weight: 400; 516 521 } 522 + 517 523 p { 518 524 margin-bottom: 0; 519 525 margin-top: 0; 520 526 } 527 + 521 528 a { 522 529 background-color: transparent; 523 530 border-radius: 30px; ··· 532 539 background-color: $white-color; 533 540 display: flex; 534 541 } 542 + 535 543 span { 536 544 padding: 0 0.2rem; 537 545 } ··· 552 560 font-size: 16px; 553 561 } 554 562 } 563 + 555 564 .countPill--positive { 556 565 display: inline-block; 557 566 } 567 + 558 568 svg { 559 569 width: 20px; 560 570 height: 18px; 561 571 stroke: $white-color; 562 572 overflow: visible; 573 + 563 574 @include breakpoint('medium') { 564 575 stroke: none; 565 576 } 566 577 } 578 + 567 579 .cart-contents { 568 580 display: none; 581 + 569 582 @include breakpoint('medium') { 570 583 display: inline; 571 584 } ··· 587 600 588 601 .form { 589 602 width: auto; 590 - // margin-bottom: 3rem; 591 603 } 592 604 593 605 .form-input { ··· 597 609 max-width: 560px; 598 610 padding-left: 2.5rem; 599 611 background: $white-color 600 - url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/drop-search-icon.png?) 612 + url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/drop-search-icon.png?') 601 613 15px center no-repeat; 602 614 color: $input-field-text; 603 615 } 604 616 } 605 617 } 606 618 607 - .mobileMenu-toggle { 608 - position: static; 609 - } 610 - 611 - /*********************navPages-container ***********************/ 619 + /******************** navPages-container ***********************/ 612 620 .navPages-container { 613 621 background-color: $text-color; 614 622 ··· 622 630 623 631 .navPages-quickSearch { 624 632 background-color: $light-BgColor; 625 - // position: relative; 626 - /*svg{ 627 - 628 - fill: #C7C7C7 !important; 629 - stroke: #C7C7C7 !important; 630 - position: absolute; 631 - top: 25px; 632 - left: 4rem; 633 - z-index: 20; 634 - fill: #C7C7C7 !important; 635 - stroke: #C7C7C7 !important; 636 - 637 633 638 - }*/ 639 634 .container { 640 - /*display: flex; 641 - align-items: center; 642 - justify-content: center; */ 643 635 padding: 1rem 0 0; 636 + 644 637 .form { 645 638 width: 90%; 646 639 margin: auto; 647 - .form-input { 648 - // padding-left: 3rem; 649 - //background-color: white; 650 - /*background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/mobile-quicksearch-background.png) 651 - 5% center no-repeat;*/ 652 - } 653 640 } 654 641 } 655 642 } ··· 657 644 .navPages { 658 645 background-color: $text-color; 659 646 padding: 0; 647 + 660 648 @include breakpoint('medium') { 661 649 background-color: transparent; 662 650 padding: 0; ··· 670 658 &.navPages-list--fullwidth { 671 659 background-color: $headingColor; 672 660 padding: 0; 661 + 673 662 .navPages-item { 674 663 a { 675 664 text-decoration: none; 676 665 color: $white-color; 666 + 677 667 &::after { 678 668 content: '+'; 679 669 } 670 + 680 671 &.is-open { 681 672 color: $headingColor; 682 673 background-color: $white-color; 683 674 border-bottom: 1px solid #e5e5e4; 675 + 684 676 &::after { 685 677 content: '-'; 686 678 } 687 679 } 688 680 } 681 + 689 682 .navPage-subMenu { 690 683 background-color: $white-color; 691 684 margin-top: -6px; 685 + 692 686 &#navPages-knowledge { 693 687 border-top: 1px solid #e5e5e4; 694 688 border-bottom: 1px solid transparent; 695 689 } 690 + 696 691 .navPage-subMenu-item { 697 692 padding: 0; 693 + 698 694 &:not(:last-of-type) { 699 695 border-bottom: 1px solid #e5e5e4; 700 696 } 701 697 702 698 a { 703 699 color: $headingColor; 700 + 704 701 &::after { 705 702 content: none; 706 703 } ··· 710 707 711 708 &.navPages-item--account { 712 709 background-color: $secondary-color; 710 + 713 711 a { 714 712 color: $body-color; 713 + 715 714 &.is-open { 716 715 color: $secondary-color; 717 716 background-color: black !important; ··· 721 720 722 721 &.navPages-item---logout { 723 722 background-color: $text-color; 723 + 724 724 a { 725 725 &::after { 726 726 content: none; ··· 757 757 758 758 .navPages-item { 759 759 font-weight: 700; 760 + 760 761 &.navPages-item--support { 761 762 display: none; 763 + 762 764 .navPage-subMenu-item { 763 765 width: 100% !important; 764 766 } 767 + 765 768 @include breakpoint('medium') { 766 769 display: block; 767 770 ··· 772 775 } 773 776 } 774 777 } 778 + 775 779 .navPage-subMenu-list { 776 780 display: grid; 777 781 grid-template-columns: repeat(4, 1fr); 782 + 778 783 &::before, 779 784 &::after { 780 785 content: none; 781 786 } 782 787 } 783 788 } 789 + 784 790 a { 785 791 text-decoration: none; 786 792 } 793 + 787 794 .navPages-action-moreIcon { 788 795 margin: 0; 796 + 789 797 @include breakpoint('medium') { 790 798 margin: 0 0 0 0.75rem; 791 799 } 792 800 } 801 + 793 802 @include breakpoint('medium') { 794 803 margin: 0; 795 804 padding: 0; 796 805 } 806 + 797 807 &.navUser-item--account { 798 808 display: block !important; 799 809 z-index: 999; 800 810 padding-left: 40px; 801 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/account.png) 811 + background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/account.png') 802 812 10px center no-repeat; 813 + 803 814 a, 804 815 .navUser-or { 805 816 display: inline-block; 806 817 } 818 + 807 819 a { 808 820 &::after { 809 821 display: none; ··· 821 833 height: 36px; 822 834 object-fit: cover; 823 835 border-radius: 50%; 824 - border: 1px solid currentColor; 836 + border: 1px solid currentcolor; 825 837 margin-right: 0.25rem; 826 838 } 827 839 ··· 832 844 } 833 845 } 834 846 } 847 + 835 848 &.is-open, 836 849 &:hover { 837 850 background-color: $nav-hover; ··· 859 872 .navPage-subMenu-list { 860 873 display: flex; 861 874 justify-content: space-between; 875 + 862 876 .navPage-subMenu-item { 863 877 width: 20%; 878 + 864 879 .navPages-action { 865 880 display: flex; 866 881 align-items: center; ··· 875 890 height: 42px; 876 891 object-fit: cover; 877 892 border-radius: 50%; 878 - border: 1px solid currentColor; 893 + border: 1px solid currentcolor; 879 894 } 880 895 } 881 896 882 - .navPage-subMenu-action { 883 - } 884 - 885 897 .navPage-childList { 886 898 .navPage-childList-item { 887 899 .navPages-action { ··· 898 910 } 899 911 } 900 912 901 - /********************** Cart DropDown*****************/ 913 + /********************** Cart DropDown ****************/ 902 914 .previewCartWrapper { 903 915 .previewCart { 904 916 .previewCartList { 905 917 .previewCartItem { 906 - //background-color: red; 907 918 &:last-of-type { 908 919 border-bottom: 1px solid $body-color; 909 920 } 921 + 910 922 div { 911 923 padding: 1rem 0; 912 924 } 925 + 913 926 .previewCartItem-name { 914 927 a { 915 928 padding-left: 0; ··· 932 945 padding: 0.6rem; 933 946 display: flex; 934 947 flex-direction: row-reverse; 948 + 935 949 .previewCartAction-checkout, 936 950 .previewCartAction-viewCart { 937 951 padding: 0.2rem; ··· 955 969 /****************************** mobileMenu toggle *****************/ 956 970 957 971 .mobileMenu-toggle { 972 + position: static; 958 973 border-right: 1px solid $white-color; 974 + 959 975 .mobileMenu-toggleIcon { 960 976 background-color: $white-color; 961 977 ··· 970 986 971 987 &.is-open { 972 988 background-color: $gold-color; 989 + 973 990 .mobileMenu-toggleIcon::before, 974 991 .mobileMenu-toggleIcon::after { 975 992 background-color: $white-color; ··· 1026 1043 padding: 0 0.5rem; 1027 1044 display: grid; 1028 1045 column-gap: 0.5rem; 1046 + grid-template-columns: 1fr 1fr; 1047 + 1029 1048 &::before { 1030 1049 display: none; 1031 1050 } 1032 - grid-template-columns: 1fr 1fr; 1051 + 1033 1052 @include breakpoint('medium') { 1034 1053 grid-template-columns: 1fr 1fr 1fr 1fr; 1035 1054 } 1055 + 1036 1056 .product { 1037 - width: 99%; //49%; 1057 + width: 99%; 1038 1058 margin: auto; 1039 - @include breakpoint('medium') { 1040 - // width: 25%; 1041 - } 1042 - //margin: 0; 1059 + 1043 1060 &:nth-child(even) { 1044 1061 float: right; 1062 + 1045 1063 @include breakpoint('medium') { 1046 1064 float: none; 1047 1065 } 1048 1066 } 1067 + 1049 1068 .card { 1050 1069 padding: 0; 1070 + 1051 1071 .card-body { 1052 1072 background-color: $white-color !important; 1053 1073 grid-template-rows: auto 95px auto; 1054 - 1055 - @include breakpoint('medium') { 1056 - } 1057 1074 } 1058 1075 } 1059 1076 } ··· 1071 1088 background-color: #000; 1072 1089 opacity: 0.7; 1073 1090 translate: 0 -3rem; 1091 + width: 40px; 1092 + height: 40px; 1093 + border-radius: 50%; 1094 + padding: 0; 1095 + 1074 1096 @include breakpoint('medium') { 1075 1097 translate: 0 0; 1076 1098 } 1077 1099 1078 1100 &::before { 1101 + width: 14px; 1102 + height: 24px; 1103 + margin: 8px auto 0; 1079 1104 opacity: 1; 1105 + 1080 1106 @media only screen and (max-width: 801px) { 1081 1107 height: 20px !important; 1082 - margin: 2px auto 0px !important; 1108 + margin: 2px auto 0 !important; 1083 1109 } 1084 1110 } 1085 1111 } 1086 1112 1087 1113 @include breakpoint('medium') { 1088 1114 min-height: 540px; 1089 - } 1090 - 1091 - &.slick-initialized { 1092 - // max-height: none !important; 1093 1115 } 1094 1116 1095 1117 @media only screen and (max-width: 800px) { ··· 1109 1131 1110 1132 .heroCarousel-slide { 1111 1133 .heroCarousel-image-wrapper { 1112 - max-height: auto; // 40.5rem; 1134 + max-height: auto; 1113 1135 1114 1136 @include breakpoint('medium') { 1115 1137 max-height: 55.5rem; ··· 1125 1147 max-width: 100%; 1126 1148 width: auto !important; 1127 1149 position: absolute; 1128 - left: 0; 1129 - right: auto; 1150 + inset: 0 auto auto 0; 1130 1151 min-width: 100%; 1131 1152 min-height: 100%; 1132 - bottom: auto; 1133 - top: 0; 1134 1153 margin: auto !important; 1135 1154 } 1136 1155 } ··· 1146 1165 } 1147 1166 } 1148 1167 1149 - .slick-arrow { 1150 - width: 40px; 1151 - height: 40px; 1152 - border-radius: 50%; 1153 - padding: 0; 1154 - 1155 - &::before { 1156 - width: 14px; 1157 - height: 24px; 1158 - margin: 8px auto 0; 1159 - } 1160 - } 1161 - 1162 1168 @include breakpoint('medium') { 1163 1169 max-height: 55.5rem !important; 1164 1170 } ··· 1172 1178 1173 1179 .heroCarousel-content { 1174 1180 background-color: transparent; 1175 - text-align: left; 1176 1181 max-width: 1280px; 1177 1182 width: auto; 1178 1183 position: static; ··· 1214 1219 } 1215 1220 } 1216 1221 1217 - /*****************************Trusted by section**************************/ 1222 + /**************************** Trusted by section *************************/ 1218 1223 .trusted-by-section { 1219 1224 background-color: $light-BgColor; 1220 1225 display: flex; ··· 1225 1230 1226 1231 h2 { 1227 1232 font-size: 32px; 1228 - 1229 1233 text-align: center; 1230 1234 width: 100%; 1231 1235 margin: 0 0 1rem; ··· 1247 1251 1248 1252 h2 { 1249 1253 text-align: center; 1250 - 1251 - @include breakpoint('medium') { 1252 - /*text-align: left;*/ 1253 - } 1254 1254 } 1255 1255 } 1256 1256 1257 1257 /************************** Card ************************/ 1258 1258 .productGrid { 1259 1259 padding-left: 0; 1260 - .product { 1261 - @media only screen and (max-width: 800px) { 1262 - padding: 0; 1263 - } 1264 - } 1265 1260 } 1266 1261 1267 1262 /************************** bundle product section ************************/ ··· 1272 1267 .product-info { 1273 1268 .text { 1274 1269 width: 100%; 1270 + 1275 1271 @include breakpoint('medium') { 1276 1272 padding-right: 60px; 1277 1273 } 1278 1274 } 1275 + 1279 1276 h2 { 1280 1277 font-size: 28px; 1278 + 1281 1279 @include breakpoint('medium') { 1282 1280 font-size: 40px; 1283 1281 } 1284 1282 } 1283 + 1285 1284 h3 { 1286 1285 font-size: 24px; 1286 + 1287 1287 @include breakpoint('medium') { 1288 1288 font-size: 32px; 1289 1289 } ··· 1300 1300 } 1301 1301 1302 1302 .bundle-card { 1303 - /*padding-top: 2rem;*/ 1304 - 1305 1303 @media only screen and (max-width: 800px) { 1306 1304 grid-template-columns: 1fr; 1307 1305 } ··· 1321 1319 margin: auto; 1322 1320 align-items: center; 1323 1321 } 1322 + 1324 1323 img { 1325 1324 @media only screen and (max-width: 580px) { 1326 1325 max-width: 94px; 1327 1326 } 1327 + 1328 1328 @include breakpoint('medium') { 1329 1329 max-width: 120px; 1330 1330 } 1331 + 1331 1332 @include breakpoint('medium') { 1332 1333 max-width: 100%; 1333 1334 } ··· 1336 1337 .text { 1337 1338 width: 100%; 1338 1339 padding-left: 1rem; 1340 + 1339 1341 @include breakpoint('medium') { 1340 1342 padding: 0; 1341 1343 } 1344 + 1342 1345 p { 1343 1346 color: $white-color; 1344 1347 margin: 0; ··· 1350 1353 line-height: 1.2em; 1351 1354 grid-area: heading; 1352 1355 margin: 0; 1356 + 1353 1357 @include breakpoint('medium') { 1354 1358 margin-top: 2rem; 1355 1359 font-size: 32px; ··· 1378 1382 } 1379 1383 } 1380 1384 1381 - /*#text-imagecontent-v2-4f442dfd-d8a9-412a-b8aa-ca8d00183589 { 1382 - @media only screen and (min-width: 801px) { 1383 - width: 90%; 1384 - } 1385 - 1386 - h2 { 1387 - text-align: center; 1388 - } 1389 - .button { 1390 - width: 100% !important; 1391 - } 1392 - } */ 1393 - 1394 1385 .section { 1395 1386 padding: 2rem 0; 1387 + overflow: hidden; 1388 + 1396 1389 @include breakpoint('medium') { 1397 1390 padding: 3rem 0; 1398 1391 } 1399 - overflow: hidden; 1400 1392 1401 1393 &.imageBg { 1402 1394 padding: 0; 1403 1395 position: relative; 1396 + 1404 1397 @include breakpoint('medium') { 1405 1398 height: 450px; 1406 1399 } 1407 1400 } 1408 1401 1409 1402 .textOver { 1403 + margin: auto; 1404 + 1410 1405 @include breakpoint('medium') { 1411 1406 height: 100%; 1412 1407 } 1413 - margin: auto; 1414 1408 } 1415 1409 1416 1410 .imageOver { ··· 1421 1415 max-width: 100%; 1422 1416 width: auto !important; 1423 1417 position: absolute; 1424 - left: 0; 1425 - right: auto; 1418 + inset: 0 auto auto 0; 1426 1419 min-width: 100%; 1427 1420 min-height: 100%; 1428 - bottom: auto; 1429 - top: 0; 1430 1421 margin: auto !important; 1431 1422 } 1432 1423 } 1433 - 1434 - /* &.review-section { 1435 - background-color: $text-color; 1436 - padding: 3rem 0; 1437 - 1438 - .review-block { 1439 - padding: 2rem; 1440 - border-radius: 24px; 1441 - border: 1px solid $gold-color; 1442 - 1443 - p { 1444 - color: $white-color; 1445 - text-align: center; 1446 - font-weight: 700; 1447 - } 1448 - 1449 - .stars { 1450 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/star-review.png?) left top repeat; 1451 - width: 100px; 1452 - height: 21px; 1453 - display: block; 1454 - margin: 0 auto 1rem; 1455 - } 1456 - } 1457 - } */ 1458 1424 } 1459 1425 1460 1426 [aria-label='Breadcrumb'] { ··· 1463 1429 text-align: left; 1464 1430 padding: 1.5rem 0; 1465 1431 margin-bottom: 0; 1432 + 1466 1433 .breadcrumb { 1467 1434 a { 1468 1435 color: $body-color; 1469 1436 } 1470 1437 1471 1438 &::before { 1472 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/breadcrumb-label.png) 1439 + background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/breadcrumb-label.png') 1473 1440 center no-repeat; 1474 1441 width: 9px; 1475 1442 height: 9px; ··· 1480 1447 } 1481 1448 } 1482 1449 1483 - /****************************category description****************/ 1450 + /*************************** category description ***************/ 1484 1451 .category-description { 1485 1452 border-bottom: 4px solid $light-BgColor; 1486 1453 margin-bottom: 1rem; 1487 1454 padding-bottom: 1rem; 1488 - // border: 1px solid red; 1489 1455 1490 1456 .page-heading { 1491 1457 text-align: left; ··· 1493 1459 1494 1460 #cat-description-box { 1495 1461 overflow: hidden; 1462 + 1496 1463 p { 1497 1464 height: 45px; 1498 1465 } ··· 1519 1486 1520 1487 .selected-facets--desktop { 1521 1488 display: none; 1489 + 1522 1490 @include breakpoint('medium') { 1523 1491 display: block; 1524 1492 } ··· 1527 1495 .selected-facets--mobile { 1528 1496 display: block; 1529 1497 padding: 0.5rem 0 1.5rem; 1498 + 1530 1499 h2 { 1531 1500 display: none; 1532 1501 } 1502 + 1533 1503 @include breakpoint('medium') { 1534 1504 display: none; 1535 1505 } 1536 1506 } 1507 + 1537 1508 .facetedSearch-refineFilters { 1538 1509 display: block; 1539 1510 } ··· 1555 1526 1556 1527 .accordion-block { 1557 1528 margin: 0; 1529 + font-family: 'Filson Pro', sans-serif; 1530 + 1558 1531 .accordion-nav-clear-holder { 1559 1532 .facetedSearch-clearLink { 1560 1533 margin-right: 1rem; 1534 + 1561 1535 button { 1562 1536 padding-left: 0.5rem; 1563 1537 } 1538 + 1564 1539 @include breakpoint('medium') { 1565 1540 margin-top: 5px; 1566 1541 } 1567 1542 } 1568 1543 } 1544 + 1569 1545 ul { 1570 1546 padding-left: 0; 1571 1547 } ··· 1573 1549 @media only screen and (min-width: 801px) { 1574 1550 margin-top: 1rem; 1575 1551 } 1576 - 1577 - font-family: 'Filson Pro'; 1578 1552 } 1579 1553 1580 1554 .accordion-navigation { 1581 - border-bottom: 2px solid $input-field !important; 1582 1555 border-top: none; 1556 + padding: 0.5rem 0; 1557 + border-bottom: 2px solid $nav-hover-text; 1558 + 1583 1559 &.is-open { 1584 1560 border-bottom: 2px solid $headingColor !important; 1585 1561 } 1562 + 1586 1563 &:last-child { 1587 1564 border-radius: 0; 1588 1565 } 1566 + 1589 1567 .accordion-title { 1590 1568 color: $body-color; 1591 1569 font-size: 16px; 1592 - font-family: 'Filson Pro'; 1570 + font-family: 'Filson Pro', sans-serif; 1593 1571 padding: 0 0.5rem; 1594 1572 } 1573 + 1595 1574 .accordion-indicator { 1596 1575 margin-right: 0.5rem; 1597 1576 fill: $nav-hover-text; 1598 1577 } 1599 - padding: 0.5rem 0 0.5rem; 1600 - border-bottom: 2px solid $nav-hover-text; 1601 1578 } 1602 1579 1603 1580 .accordion-content { ··· 1620 1597 } 1621 1598 } 1622 1599 1623 - /************************ Listings********************/ 1600 + /************************ Listings *******************/ 1624 1601 1625 1602 .search-nav { 1626 1603 padding-bottom: 2rem; ··· 1629 1606 &.navBar--sub { 1630 1607 margin-bottom: 3rem; 1631 1608 } 1609 + 1632 1610 a { 1633 1611 &[aria-selected='true'] { 1634 1612 color: $headingColor; ··· 1664 1642 display: flex; 1665 1643 align-items: center; 1666 1644 justify-content: space-between; 1667 - &:before, 1668 - &:after { 1645 + 1646 + &::before, 1647 + &::after { 1669 1648 display: none; 1670 1649 } 1650 + 1671 1651 .form-label, 1672 1652 .form-select { 1673 1653 font-size: 1rem; 1674 1654 color: $input-field-text; 1655 + 1675 1656 @media only screen and (min-width: 801px) { 1676 1657 font-size: 14px; 1677 1658 } ··· 1680 1661 .form-label { 1681 1662 font-weight: 400; 1682 1663 } 1664 + 1683 1665 .form-select { 1684 1666 font-weight: 700; 1685 1667 } ··· 1694 1676 line-height: normal; 1695 1677 margin-right: -4px; 1696 1678 width: 75%; 1679 + 1697 1680 * { 1698 1681 color: #000; 1699 1682 } 1683 + 1700 1684 @include breakpoint('medium') { 1701 1685 width: auto; 1702 1686 } ··· 1712 1696 padding: 0.563rem 1.2rem; 1713 1697 background-color: $nav-hover-text; 1714 1698 color: $white-color; 1699 + 1715 1700 &:first-of-type { 1716 1701 text-decoration: none; 1717 1702 padding-right: 0; 1703 + 1718 1704 &::after { 1719 1705 content: ''; 1720 1706 width: 24px; 1721 1707 height: 24px; 1722 1708 position: relative; 1723 1709 right: 10px; 1724 - background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="white" /%3E%3C/svg%3E'); //$select-backgroundImage; 1710 + background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="white" /%3E%3C/svg%3E'); 1725 1711 float: right; 1726 1712 background-repeat: no-repeat; 1727 1713 } 1714 + 1728 1715 .filters-toggle { 1729 1716 &::before { 1730 1717 font-weight: 700; 1731 1718 content: 'Show Filters'; 1732 1719 } 1733 1720 } 1721 + 1734 1722 &.is-open { 1735 1723 background-color: $body-color; 1724 + 1736 1725 &::after { 1737 1726 width: 34px; 1738 1727 transform: rotate(180deg); 1739 1728 } 1729 + 1740 1730 .filters-toggle { 1741 1731 &::before { 1742 1732 content: 'Close Filters'; ··· 1756 1746 } 1757 1747 } 1758 1748 1759 - /**********************Preview Modle**************/ 1749 + /********************* Preview Modal *************/ 1760 1750 1761 1751 #previewModal { 1762 - //max-width: 720px; 1763 1752 width: 100%; 1764 1753 border-radius: 20px; 1765 1754 ··· 1767 1756 width: 50%; 1768 1757 } 1769 1758 } 1759 + 1770 1760 .modal { 1771 1761 .productView { 1772 1762 width: 50%; 1773 1763 margin: auto; 1774 1764 text-align: center; 1765 + 1775 1766 .productView-details { 1776 1767 width: 100%; 1777 1768 padding-bottom: 2rem; ··· 1781 1772 text-align: left; 1782 1773 } 1783 1774 } 1775 + 1784 1776 .modal-header { 1785 1777 border-bottom: 1px solid $body-color; 1786 1778 width: 90%; 1787 1779 margin: auto; 1788 1780 padding-left: 0; 1781 + 1789 1782 .modal-header-title { 1790 1783 font-size: 18px; 1791 1784 font-weight: 700; ··· 1793 1786 text-align: left; 1794 1787 } 1795 1788 } 1789 + 1796 1790 .modal-body { 1797 1791 padding: 1rem; 1798 1792 } 1793 + 1799 1794 .previewCart { 1800 1795 margin: 0; 1801 1796 max-width: 100%; ··· 1805 1800 float: none; 1806 1801 min-height: auto; 1807 1802 } 1803 + 1808 1804 .productView-img-container { 1809 1805 margin: 0; 1810 1806 max-width: 100%; 1807 + 1811 1808 &::after { 1812 1809 padding-bottom: 0; 1813 1810 } ··· 1818 1815 height: 100px; 1819 1816 } 1820 1817 } 1818 + 1821 1819 .productView-title { 1822 1820 font-size: 16px; 1823 1821 line-height: 1.2rem; 1824 1822 color: $body-color; 1825 1823 margin: 0; 1826 - font-family: 'Filson Pro'; 1824 + font-family: 'Filson Pro', sans-serif; 1827 1825 } 1826 + 1828 1827 .productView-brand { 1829 1828 display: none; 1830 1829 } 1830 + 1831 1831 .productView-price { 1832 1832 font-size: 14px; 1833 1833 ··· 1836 1836 margin-bottom: 0; 1837 1837 } 1838 1838 } 1839 + 1839 1840 .previewCartCheckout { 1840 1841 background-color: transparent; 1841 1842 border: 1px solid $gold-color; ··· 1849 1850 .d-flex { 1850 1851 padding-bottom: 1rem; 1851 1852 } 1853 + 1852 1854 .button { 1853 1855 margin: 0 0.2rem; 1854 1856 padding-left: 1rem; 1855 1857 padding-right: 1rem; 1856 1858 } 1859 + 1857 1860 .button--blank { 1858 1861 background-color: transparent !important; 1859 1862 border: none !important; 1860 1863 color: $body-color; 1861 1864 } 1865 + 1862 1866 .previewCartCheckout-subtotal { 1863 - margin: 0 0 1rem 0; 1867 + margin: 0 0 1rem; 1868 + 1864 1869 .previewCartCheckout-price { 1865 1870 font-size: 18px; 1866 1871 } 1867 1872 } 1873 + 1868 1874 p { 1869 1875 margin-bottom: 1rem; 1870 1876 } 1877 + 1871 1878 .previewCartCheckout-continue-shopping { 1872 1879 margin: 0; 1880 + 1873 1881 a { 1874 1882 text-decoration: underline; 1875 1883 color: $body-color; ··· 1886 1894 height: 51.2px; 1887 1895 display: grid !important; 1888 1896 grid-template-columns: 1fr 2fr 1fr; 1897 + 1889 1898 input::-webkit-outer-spin-button, 1890 1899 input::-webkit-inner-spin-button { 1891 - -webkit-appearance: none !important; 1900 + appearance: none !important; 1892 1901 margin: 0 !important; 1893 1902 } 1903 + 1894 1904 .form-input { 1895 1905 width: 100%; 1896 1906 background-color: transparent; 1907 + 1897 1908 &[type='number'] { 1898 1909 width: 100%; 1899 - -webkit-appearance: none !important; 1900 - -moz-appearance: none !important; 1901 - -moz-appearance: textfield !important; 1902 1910 margin: 0; 1903 1911 appearance: none !important; 1904 1912 } 1905 1913 } 1914 + 1906 1915 .button { 1907 1916 border: 0; 1908 1917 padding: 0; ··· 1916 1925 } 1917 1926 } 1918 1927 1919 - /***********************Cart******************/ 1928 + /********************** Cart ******************/ 1920 1929 .page-type-cart { 1921 1930 .page-heading { 1922 1931 color: $body-color; 1923 1932 font-size: 40px; 1924 1933 } 1934 + 1925 1935 .cart-total-label, 1926 1936 .shipping-estimate-show, 1927 1937 .gift-certificate-add, ··· 1929 1939 .cart-item-brand { 1930 1940 color: $body-color; 1931 1941 } 1932 - //Date Picker 1942 + 1943 + // Date Picker 1933 1944 .cart-totals { 1934 1945 .cart-total { 1935 1946 &.datepicker { ··· 1941 1952 1942 1953 .login { 1943 1954 max-width: 100%; 1955 + 1944 1956 .new-customer { 1945 1957 .panel { 1946 1958 background-color: $light-BgColor; 1947 1959 border-radius: 8px; 1948 1960 } 1961 + 1949 1962 .panel-header, 1950 1963 .panel-body { 1951 1964 background-color: transparent; 1965 + 1952 1966 .panel-title { 1953 1967 font-weight: 700; 1954 1968 font-size: 32px; 1955 1969 line-height: 36px; 1956 1970 color: $body-color; 1957 1971 } 1972 + 1958 1973 .new-customer-fact-list { 1959 1974 margin-left: 0; 1960 1975 } 1961 1976 } 1962 1977 } 1978 + 1963 1979 .form-actions { 1964 1980 text-align: left; 1965 1981 vertical-align: center; 1982 + 1966 1983 a { 1967 1984 line-height: 48px; 1968 1985 margin: 0; 1969 1986 } 1987 + 1970 1988 .button--primary { 1971 1989 float: right; 1972 1990 } ··· 1975 1993 1976 1994 .page-type-forgotpassword { 1977 1995 text-align: center; 1996 + 1978 1997 .page-heading { 1979 1998 text-align: center; 1980 1999 } 1981 2000 } 1982 - /*****************Account Nav Bar ************/ 1983 - body { 1984 - color: $body-color; 1985 - } 2001 + 2002 + /**************** Account Nav Bar ************/ 2003 + 1986 2004 .navBar--sub { 1987 2005 margin-bottom: 2rem; 1988 2006 } 2007 + 1989 2008 .account-body { 1990 2009 .addressList { 1991 - display: flex; 1992 - align-items: stretch; 1993 2010 .address { 1994 2011 padding-bottom: 2rem; 1995 2012 } 2013 + 1996 2014 .panel-body { 1997 2015 background-color: #f3f2f2; 1998 2016 margin-bottom: 0; 2017 + 1999 2018 .address-title { 2000 2019 font-size: 24px; 2001 2020 color: $body-color; 2002 2021 } 2003 2022 } 2023 + 2004 2024 .panel--newAddress, 2005 2025 .panel-body { 2006 2026 height: 100%; 2007 2027 } 2028 + 2008 2029 .secondary { 2009 2030 background-color: $white-color; 2010 2031 } ··· 2019 2040 justify-content: space-between; 2020 2041 align-content: center; 2021 2042 z-index: 1; 2043 + 2022 2044 .badge-text { 2023 2045 height: fit-content; 2024 2046 border-radius: 8px; ··· 2029 2051 font-size: 10px; 2030 2052 text-transform: capitalize; 2031 2053 background-color: $text-color; 2054 + 2032 2055 &.bestseller { 2033 2056 background-color: #b07c83; 2034 2057 } 2058 + 2035 2059 &.new { 2036 2060 background-color: #63b1bc; 2037 2061 } ··· 2079 2103 2080 2104 /* Preloader & Error */ 2081 2105 .mapplic-element.mapplic-loading { 2082 - background: url(images/loader.gif) no-repeat center; 2106 + background: url('images/loader.gif') no-repeat center; 2083 2107 } 2108 + 2084 2109 .mapplic-element.mapplic-error { 2085 - background: url(images/error-icon.png) no-repeat center; 2110 + background: url('images/error-icon.png') no-repeat center; 2086 2111 } 2087 2112 2088 2113 /* Map container */ 2089 2114 .mapplic-container { 2090 - display: inline-block; 2091 2115 position: relative; 2092 2116 width: 70%; 2093 2117 height: 100%; 2118 + float: right; 2094 2119 } 2095 2120 2096 2121 .mapplic-map { ··· 2113 2138 position: absolute; 2114 2139 width: 100%; 2115 2140 height: 100%; 2116 - -webkit-user-select: none; 2117 - -moz-user-select: none; 2118 - -ms-user-select: none; 2119 2141 user-select: none; 2120 2142 } 2143 + 2121 2144 /* IE Fix END */ 2122 2145 2123 2146 .mapplic-map.mapplic-zoomable .mapplic-map-image { 2124 - cursor: url(images/openhand.cur), default; 2147 + cursor: url('images/openhand.cur'), default; 2125 2148 } 2126 2149 2127 2150 .mapplic-map.mapplic-zoomable.mapplic-dragging .mapplic-map-image { 2128 - cursor: url(images/closedhand.cur), move; 2151 + cursor: url('images/closedhand.cur'), move; 2129 2152 } 2130 2153 2131 2154 /* Pin types */ 2132 2155 .mapplic-pin { 2133 - background-image: url(images/pin.png); 2156 + background-image: url('images/pin.png'); 2134 2157 background-size: 18px 24px; 2135 2158 background-repeat: no-repeat; 2136 2159 background-position: center; ··· 2141 2164 margin-left: -9px; 2142 2165 position: absolute; 2143 2166 transform-origin: 50% 100%; 2144 - 2145 - -webkit-user-select: none; 2146 - -moz-user-select: none; 2147 - -ms-user-select: none; 2148 2167 user-select: none; 2149 2168 } 2150 2169 ··· 2170 2189 transform-origin: 50% 100%; 2171 2190 } 2172 2191 2173 - .mapplic-pin.pin-classic:before { 2192 + .mapplic-pin.pin-classic::before { 2174 2193 border-style: solid; 2175 - border-width: 9px 8px 0 8px; 2194 + border-width: 9px 8px 0; 2176 2195 border-color: inherit; 2177 2196 border-right-color: transparent; 2178 2197 border-bottom-color: transparent; ··· 2184 2203 left: 2px; 2185 2204 } 2186 2205 2187 - .mapplic-pin:before { 2206 + .mapplic-pin::before { 2188 2207 box-sizing: content-box !important; 2189 2208 } 2190 2209 ··· 2200 2219 transform-origin: 50% 50%; 2201 2220 } 2202 2221 2203 - .mapplic-pin.pin-marker:before { 2222 + .mapplic-pin.pin-marker::before { 2204 2223 border-color: inherit; 2205 2224 border-style: solid; 2206 2225 border-width: 6px; ··· 2228 2247 transform-origin: 50% 50%; 2229 2248 } 2230 2249 2231 - .mapplic-pin.pin-disk:before { 2250 + .mapplic-pin.pin-disk::before { 2232 2251 border-color: inherit; 2233 2252 border-style: solid; 2234 2253 border-width: 3px; ··· 2256 2275 transform-origin: 8px 20px; 2257 2276 } 2258 2277 2259 - .mapplic-pin.pin-ribbon:after { 2278 + .mapplic-pin.pin-ribbon::after { 2260 2279 border-style: solid; 2261 2280 border-width: 0 8px 4px 0; 2262 2281 border-color: transparent rgba(0, 0, 0, 0.5) transparent transparent; ··· 2264 2283 display: block; 2265 2284 position: absolute; 2266 2285 top: 16px; 2267 - left: 0px; 2286 + left: 0; 2268 2287 } 2269 2288 2270 - .mapplic-pin.pin-ribbon:before { 2289 + .mapplic-pin.pin-ribbon::before { 2271 2290 border-style: solid; 2272 2291 border-width: 0 8px 4px 0; 2273 2292 border-color: inherit; ··· 2278 2297 display: block; 2279 2298 position: absolute; 2280 2299 top: 16px; 2281 - left: 0px; 2300 + left: 0; 2282 2301 } 2283 2302 2284 2303 .mapplic-pin.pin-dot { ··· 2295 2314 transform-origin: -4px 8px; 2296 2315 } 2297 2316 2298 - .mapplic-pin.pin-dot:before { 2317 + .mapplic-pin.pin-dot::before { 2299 2318 border-color: inherit; 2300 2319 border-style: solid; 2301 2320 border-width: 3px; 2302 2321 border-radius: 12px; 2303 2322 content: ''; 2304 2323 display: block; 2305 - width: 0px; 2306 - height: 0px; 2324 + width: 0; 2325 + height: 0; 2307 2326 position: absolute; 2308 2327 top: 5px; 2309 2328 left: -7px; ··· 2324 2343 } 2325 2344 2326 2345 .mapplic-pin.orange { 2327 - background-image: url(images/pin-orange.png); 2346 + background-image: url('images/pin-orange.png'); 2328 2347 } 2348 + 2329 2349 .mapplic-pin.yellow { 2330 - background-image: url(images/pin-yellow.png); 2350 + background-image: url('images/pin-yellow.png'); 2331 2351 } 2352 + 2332 2353 .mapplic-pin.green { 2333 - background-image: url(images/pin-green.png); 2354 + background-image: url('images/pin-green.png'); 2334 2355 } 2356 + 2335 2357 .mapplic-pin.blue { 2336 - background-image: url(images/pin-blue.png); 2358 + background-image: url('images/pin-blue.png'); 2337 2359 } 2360 + 2338 2361 .mapplic-pin.purple { 2339 - background-image: url(images/pin-purple.png); 2362 + background-image: url('images/pin-purple.png'); 2340 2363 } 2341 2364 2342 2365 .mapplic-pin.circular { ··· 2413 2436 height: 40px; 2414 2437 } 2415 2438 2416 - .mapplic-pin.pin-pulse:before { 2439 + .mapplic-pin.pin-pulse::before { 2417 2440 content: ''; 2418 2441 border: 2px solid #888; 2419 2442 border-radius: 30px; ··· 2429 2452 box-sizing: content-box; 2430 2453 } 2431 2454 2432 - @-webkit-keyframes pulsate { 2455 + @keyframes pulsate { 2433 2456 0% { 2434 - -webkit-transform: scale(1, 1); 2457 + transform: scale(1, 1); 2435 2458 opacity: 0; 2436 2459 } 2460 + 2437 2461 25% { 2438 2462 opacity: 0.5; 2439 2463 } 2464 + 2440 2465 50% { 2441 - -webkit-transform: scale(1.6, 1.6); 2466 + transform: scale(1.6, 1.6); 2442 2467 opacity: 0; 2443 2468 } 2444 2469 } ··· 2453 2478 opacity: 0.5; 2454 2479 overflow: hidden; 2455 2480 transition: opacity 0.4s; 2456 - 2457 - -webkit-user-select: none; 2458 - -moz-user-select: none; 2459 - -ms-user-select: none; 2460 2481 user-select: none; 2461 2482 } 2462 2483 2463 2484 .mapplic-minimap-layer { 2464 2485 line-height: 0; 2465 2486 } 2487 + 2466 2488 .mapplic-minimap img { 2467 2489 width: 100%; 2468 2490 } ··· 2485 2507 2486 2508 .mapplic-minimap-background { 2487 2509 width: 140px !important; 2488 - -webkit-filter: blur(2px); 2510 + filter: blur(2px); 2489 2511 } 2490 2512 2491 2513 /* UI Buttons */ ··· 2574 2596 .mapplic-fullscreen .mapplic-container { 2575 2597 width: 80%; 2576 2598 } 2599 + 2577 2600 .mapplic-fullscreen .mapplic-sidebar { 2578 2601 width: 20%; 2579 2602 } ··· 2604 2627 font-size: 13px; 2605 2628 font-weight: 600; 2606 2629 outline: none; 2607 - -webkit-appearance: none; 2630 + appearance: none; 2608 2631 } 2609 2632 2610 2633 .mapplic-levels a { ··· 2651 2674 pointer-events: auto; 2652 2675 } 2653 2676 2654 - .mapplic-container { 2655 - float: right; 2656 - } 2657 - 2658 2677 /* Right sidebar */ 2659 2678 .mapplic-sidebar-right .mapplic-container { 2660 2679 float: left; 2661 2680 } 2681 + 2662 2682 .mapplic-sidebar-right .mapplic-sidebar { 2663 2683 float: right; 2664 2684 padding: 92px 12px 12px 0; ··· 2734 2754 .mapplic-sidebar-nosearch { 2735 2755 padding-top: 56px; 2736 2756 } 2757 + 2737 2758 .mapplic-sidebar-nosearch .mapplic-filter { 2738 2759 margin-top: -44px; 2739 2760 height: 44px; ··· 2792 2813 -webkit-overflow-scrolling: touch; 2793 2814 } 2794 2815 2795 - .mapplic-list-container:before { 2816 + .mapplic-list-container::before { 2796 2817 display: block; 2797 2818 content: ''; 2798 2819 background-color: #fff; ··· 2881 2902 } 2882 2903 2883 2904 .mapplic-thumbnail { 2884 - border-radius: 0px; 2905 + border-radius: 0; 2885 2906 box-shadow: none !important; 2886 2907 margin-right: 10px; 2887 2908 float: left; ··· 2933 2954 background-color 0.1s; 2934 2955 } 2935 2956 2936 - .mapplic-list-location > a:after { 2957 + .mapplic-list-location > a::after { 2937 2958 content: ''; 2938 2959 display: block; 2939 2960 clear: both; ··· 2964 2985 .mapplic-tooltip { 2965 2986 display: none; 2966 2987 position: absolute; 2967 - -webkit-transition: margin 0.1s; 2968 - -moz-transition: margin 0.1s; 2969 2988 transition: margin 0.1s; 2970 2989 transform-origin: 0 0; 2971 2990 padding-bottom: 30px; 2972 2991 pointer-events: none; 2973 2992 } 2974 2993 2975 - .mapplic-tooltip:after { 2994 + .mapplic-tooltip::after { 2976 2995 content: ''; 2977 - border-color: #fff transparent transparent transparent !important; 2996 + border-color: #fff transparent transparent !important; 2978 2997 border-style: solid; 2979 - border-width: 8px 7px 0 7px; 2998 + border-width: 8px 7px 0; 2980 2999 width: 0; 2981 3000 height: 0; 2982 3001 position: absolute; ··· 3080 3099 color: #fff !important; 3081 3100 font-size: 14px; 3082 3101 font-weight: 600; 3083 - display: inline-block; 3084 3102 float: right; 3085 3103 margin-top: 4px; 3086 3104 padding: 4px 8px; ··· 3111 3129 width: 8px; 3112 3130 height: 8px; 3113 3131 opacity: 0.5; 3114 - -webkit-transition: opacity 0.2s; 3115 - -moz-transition: opacity 0.2s; 3116 3132 transition: opacity 0.2s; 3117 3133 } 3118 3134 ··· 3137 3153 margin: 20px auto; 3138 3154 } 3139 3155 3140 - .mapplic-lightbox:after { 3156 + .mapplic-lightbox::after { 3141 3157 content: ''; 3142 3158 display: block; 3143 3159 clear: both; ··· 3150 3166 .mfp-bg { 3151 3167 z-index: 99981 !important; 3152 3168 } 3169 + 3153 3170 .mfp-wrap { 3154 3171 z-index: 99982 !important; 3155 3172 } 3173 + 3156 3174 .mfp-content { 3157 3175 z-index: 99983 !important; 3158 3176 } ··· 3160 3178 /* Lightbox animation */ 3161 3179 .mfp-fade.mfp-bg { 3162 3180 opacity: 0; 3163 - -webkit-transition: all 0.15s ease-out; 3164 - -moz-transition: all 0.15s ease-out; 3165 3181 transition: all 0.15s ease-out; 3166 3182 } 3167 3183 3168 3184 .mfp-fade.mfp-bg.mfp-ready { 3169 3185 opacity: 0.8; 3170 3186 } 3187 + 3171 3188 .mfp-fade.mfp-bg.mfp-removing { 3172 3189 opacity: 0; 3173 3190 } 3174 3191 3175 3192 .mfp-fade.mfp-wrap .mfp-content { 3176 3193 opacity: 0; 3177 - -webkit-transition: all 0.15s ease-out; 3178 - -moz-transition: all 0.15s ease-out; 3179 3194 transition: all 0.15s ease-out; 3180 3195 } 3181 3196 3182 3197 .mfp-fade.mfp-wrap.mfp-ready .mfp-content { 3183 3198 opacity: 1; 3184 3199 } 3200 + 3185 3201 .mfp-fade.mfp-wrap.mfp-removing .mfp-content { 3186 3202 opacity: 0; 3187 3203 } ··· 3209 3225 transition: 0.2s; 3210 3226 } 3211 3227 3212 - .mapplic-toggle:before { 3228 + .mapplic-toggle::before { 3213 3229 background-color: #fff; 3214 3230 border: 1px solid #e4e4e4; 3215 3231 border-radius: 50%; ··· 3226 3242 .mapplic-toggle > input { 3227 3243 display: none; 3228 3244 } 3245 + 3229 3246 .mapplic-toggle > input:checked + span { 3230 3247 transform: scale(0.7); 3231 3248 } ··· 3233 3250 .mapplic-list-category { 3234 3251 position: relative; 3235 3252 } 3253 + 3236 3254 .mapplic-list-category .mapplic-toggle { 3237 3255 position: absolute; 3238 3256 right: 20px; ··· 3258 3276 margin: 6px 0; 3259 3277 padding-left: 28px; 3260 3278 white-space: nowrap; 3261 - -webkit-user-select: none; 3262 - -moz-user-select: none; 3263 - -khtml-user-select: none; 3264 - -ms-user-select: none; 3279 + user-select: none; 3265 3280 } 3266 3281 3267 3282 .mapplic-legend-key { ··· 3288 3303 } 3289 3304 3290 3305 .mapplic-portrait .mapplic-sidebar { 3291 - padding: 92px 12px 12px 12px !important; 3306 + padding: 92px 12px 12px !important; 3292 3307 } 3293 3308 3294 3309 .mapplic-portrait .mapplic-tooltip { ··· 3312 3327 (min-resolution: 192dpi), 3313 3328 (min-resolution: 2dppx) { 3314 3329 .mapplic-pin { 3315 - background-image: url(images/pin@2x.png); 3330 + background-image: url('images/pin@2x.png'); 3316 3331 } 3332 + 3317 3333 .mapplic-pin.orange { 3318 - background-image: url(images/pin-orange@2x.png); 3334 + background-image: url('images/pin-orange@2x.png'); 3319 3335 } 3336 + 3320 3337 .mapplic-pin.yellow { 3321 - background-image: url(images/pin-yellow@2x.png); 3338 + background-image: url('images/pin-yellow@2x.png'); 3322 3339 } 3340 + 3323 3341 .mapplic-pin.green { 3324 - background-image: url(images/pin-green@2x.png); 3342 + background-image: url('images/pin-green@2x.png'); 3325 3343 } 3344 + 3326 3345 .mapplic-pin.blue { 3327 - background-image: url(images/pin-blue@2x.png); 3346 + background-image: url('images/pin-blue@2x.png'); 3328 3347 } 3348 + 3329 3349 .mapplic-pin.purple { 3330 - background-image: url(images/pin-purple@2x.png); 3350 + background-image: url('images/pin-purple@2x.png'); 3331 3351 } 3332 3352 } 3333 3353 ··· 3344 3364 .mapplic-clickable:not(g), 3345 3365 g.mapplic-clickable > * { 3346 3366 cursor: pointer; 3347 - -webkit-transition: opacity 0.2s; 3348 - -moz-transition: opacity 0.2s; 3349 3367 transition: opacity 0.2s; 3368 + opacity: 0.9; 3350 3369 } 3351 3370 3352 3371 .mapplic-map-image *[id^='nopointer'] { ··· 3372 3391 } 3373 3392 3374 3393 /* SKINS */ 3394 + 3375 3395 /* mapplic-booking */ 3376 3396 .mapplic-booking .mapplic-active, 3377 3397 .mapplic-booking .mapplic-active > * { ··· 3390 3410 background-color: #333; 3391 3411 } 3392 3412 3393 - .mapplic-dark .mapplic-tooltip:after { 3394 - border-color: #333 transparent transparent transparent !important; 3413 + .mapplic-dark .mapplic-tooltip::after { 3414 + border-color: #333 transparent transparent !important; 3395 3415 } 3396 3416 3397 3417 .mapplic-dark .mapplic-tooltip-title { ··· 3409 3429 } 3410 3430 3411 3431 /* INTERACTIVE ELEMENTS */ 3412 - /* clickable elements */ 3413 - .mapplic-clickable:not(g), 3414 - g.mapplic-clickable > * { 3415 - opacity: 0.9; 3416 - /*fill: #b7a6bd*/ 3417 - } 3418 3432 3419 3433 /* hovered elements */ 3420 3434 .mapplic-clickable:not(g):hover, ··· 3472 3486 .mapplic-image, 3473 3487 .mapplic-tooltip { 3474 3488 max-width: 300px !important; 3475 - } /* tooltip width */ 3476 - .mapplic-tooltip-content { 3477 - max-height: 160px; 3478 - } /* tooltip height*/ 3489 + } 3479 3490 3480 3491 /* example custom pin */ 3481 3492 .mapplic-pin.my-new-pin { 3482 3493 /* replace 'my-new-pin' with the name of your pin */ 3483 - background-image: url(images/my-new-pin.png); /* define the path to image file */ 3494 + background-image: url('images/my-new-pin.png'); /* define the path to image file */ 3484 3495 background-size: 20px 30px; 3485 3496 width: 20px; 3486 3497 height: 30px; ··· 3488 3499 margin-top: -15px; /* defining the pin's origin */ 3489 3500 } 3490 3501 3491 - /****************Quick Add To Cart ***************/ 3502 + /*************** Quick Add To Cart ***************/ 3492 3503 3493 3504 .card { 3505 + position: relative; 3506 + 3494 3507 .card-button { 3495 3508 .form { 3496 3509 @media only screen and (max-width: 599px) { ··· 3498 3511 } 3499 3512 } 3500 3513 } 3501 - position: relative; 3514 + 3502 3515 .quick-cart { 3503 3516 padding: 15px; 3504 3517 cursor: pointer; 3505 - background: url(https://cdn11.bigcommerce.com/s-s1ehwzabjj/images/stencil/original/image-manager/pluse-icon.png) 3518 + background: url('https://cdn11.bigcommerce.com/s-s1ehwzabjj/images/stencil/original/image-manager/pluse-icon.png') 3506 3519 center right no-repeat; 3507 3520 padding-right: 30px; 3508 3521 font-weight: 700; 3509 3522 color: #232524; 3523 + 3510 3524 @media only screen and (max-width: 599px) { 3511 3525 display: block; 3512 3526 padding-left: 10px; ··· 3524 3538 width: 100%; 3525 3539 left: 0; 3526 3540 bottom: 0; 3541 + 3527 3542 @media only screen and (min-width: 600px) { 3528 3543 padding: 15px; 3529 3544 } 3545 + 3530 3546 .add-quantity { 3531 3547 display: flex; 3532 3548 flex-wrap: wrap; 3533 3549 margin-top: 10px; 3550 + 3534 3551 span { 3535 3552 width: 25%; 3536 3553 display: block; 3537 3554 padding: 7px 0; 3538 3555 text-align: center; 3539 3556 cursor: pointer; 3540 - 3541 3557 border-radius: 5px; 3542 3558 font-size: 13px; 3559 + 3543 3560 @media only screen and (min-width: 600px) { 3544 3561 padding: 10px 0; 3545 3562 width: 20%; 3546 3563 font-size: 16px; 3547 3564 } 3565 + 3548 3566 &:hover, 3549 3567 &.active { 3550 3568 background-color: #546153; ··· 3552 3570 } 3553 3571 } 3554 3572 } 3573 + 3555 3574 .add-to-cart-wrapper { 3556 3575 @media only screen and (min-width: 600px) { 3557 3576 display: flex; 3558 3577 } 3578 + 3559 3579 .form-field--increments { 3560 3580 @media only screen and (min-width: 600px) { 3561 3581 margin-right: 10px; 3562 3582 } 3563 3583 } 3564 3584 } 3585 + 3565 3586 .button--primary { 3566 3587 padding-left: 0; 3567 3588 padding-right: 0; 3568 3589 min-width: 70px; 3569 3590 margin: 0 !important; 3570 3591 } 3592 + 3571 3593 .form-increment { 3572 3594 display: block !important; 3573 3595 text-align: left; 3574 3596 margin: 0; 3575 3597 background-color: #fff; 3576 3598 width: auto; 3599 + 3577 3600 @media only screen and (max-width: 599px) { 3578 3601 height: auto; 3579 3602 } 3580 - .form-input { 3581 - } 3603 + 3582 3604 .form-input--incrementTotal { 3583 3605 text-align: left; 3584 3606 padding: 5px 15px; 3585 3607 margin-right: 0; 3586 3608 width: 100%; 3609 + 3587 3610 @media only screen and (max-width: 599px) { 3588 3611 font-weight: 400; 3589 3612 font-size: 14px; ··· 3593 3616 } 3594 3617 } 3595 3618 } 3619 + 3596 3620 .add-to-cart-buttons { 3597 3621 .form-action { 3598 3622 .button--primary {
+6 -1
assets/scss/custom/_variables.scss
··· 7 7 8 8 /* Colors */ 9 9 $color-brand-primary: #687d6a; 10 + $color-brand-dark: #546153; 10 11 $color-error: #721c24; 12 + $color-gold: #bd9b60; 13 + $color-gold-light: #ffedcd; 11 14 $color-gray-darkest: #232524; 12 15 $color-gray-darkest: #232524; 13 16 $color-grey-dark: #666; ··· 16 19 $color-gray-medium: #8f8f8f; 17 20 $color-grey-light: #ddd; 18 21 $color-gray-light: #ddd; 22 + $color-grey-lightest: #f3f2f2; 23 + $color-gray-lightest: #f3f2f2; 19 24 $color-white: #fff; 20 - $color-f-b: #232524; 25 + $color-text: #232524;
+24 -40
assets/scss/custom/components/_cards.scss
··· 1 1 .card { 2 - border: 1px solid $white; 3 - min-width: 205px !important; 4 2 overflow: hidden; 5 3 padding: 0.5rem; 6 4 border-radius: 10px; 7 5 margin-bottom: 25px; 8 6 7 + @include breakpoint('small') { 8 + min-width: 205px; 9 + } 10 + 9 11 * { 10 12 font-family: 'Filson Pro', sans-serif; 11 13 } 12 14 13 15 &:hover { 14 - border: 1px solid $gold-color; 16 + border: 1px solid $color-gold; 15 17 box-shadow: 16 18 0 2px 2px 0 rgba(0, 0, 0, 0.1), 17 19 0 3px 10px 0 rgba(0, 0, 0, 0.05); 18 20 19 21 .card-button { 20 22 .button--secondary { 21 - background-color: $secondary-color !important; 23 + background-color: $color-gold-light; 22 24 } 23 25 24 26 .add-to-cart { 25 - background-color: $nav-hover-text !important; 26 - color: $white-color !important; 27 + background-color: $color-brand-primary; 28 + color: $color-white; 27 29 28 30 svg { 29 31 path { 30 - fill: white !important; 32 + fill: $color-white; 31 33 } 32 34 } 33 35 } ··· 57 59 grid-template-rows: auto 85px auto; 58 60 59 61 .card-text { 60 - color: $text-color; 62 + color: $color-brand-dark; 61 63 font-weight: 700; 62 64 63 65 span { 64 - color: $body-color; 66 + color: $color-text; 65 67 } 66 68 } 67 69 ··· 78 80 margin-bottom: 0; 79 81 80 82 a { 81 - color: $text-color; 83 + color: $color-brand-dark; 82 84 } 83 85 } 84 86 ··· 111 113 .card-figcaption-button { 112 114 margin-top: 1rem; 113 115 padding: 1rem 2.2rem 1rem 0.7rem; 114 - color: $white-color; 115 - background-color: $nav-hover-text; 116 + color: $color-white; 117 + background-color: $color-brand-primary; 116 118 117 119 @include breakpoint('medium') { 118 120 margin-top: 0; 119 121 background-color: transparent; 120 122 transition: all 0.15s ease; 121 - color: $body-color; 123 + color: $color-text; 122 124 123 125 &:hover { 124 - background-color: $nav-hover-text; 125 - color: $white-color; 126 + background-color: $color-brand-primary; 127 + color: $color-white; 126 128 } 127 129 } 128 130 } ··· 135 137 .button--secondary { 136 138 background-color: transparent; 137 139 transition: all 0.15s ease; 138 - color: $body-color; 140 + color: $color-text; 139 141 height: 75px; 140 142 } 141 143 ··· 149 151 margin-top: 1rem; 150 152 margin-bottom: 0; 151 153 padding: 1rem 1.5rem; 152 - background-color: $nav-hover-text; 153 - color: $white-color; 154 + background-color: $color-brand-primary; 155 + color: $color-white; 154 156 155 157 svg { 156 158 path { 157 - fill: white; 159 + fill: $color-white; 158 160 } 159 161 } 160 162 161 163 @include breakpoint('medium') { 162 164 margin-top: 0; 163 165 background-color: transparent; 164 - color: $body-color; 166 + color: $color-text; 165 167 166 168 svg { 167 169 path { 168 - fill: #bd9b60; 170 + fill: $color-gold; 169 171 } 170 172 } 171 173 } ··· 183 185 184 186 h2 { 185 187 font-family: 'Filson Pro', sans-serif; 186 - color: $headingColor; 188 + color: $color-brand-primary; 187 189 font-weight: 700; 188 190 font-size: 28px; 189 191 190 192 @include breakpoint('medium') { 191 193 font-size: 40px; 192 194 } 193 - } 194 - 195 - .slick-list { 196 - .card { 197 - .card-body { 198 - grid-template-rows: auto 105px auto !important; 199 - 200 - @include breakpoint('medium') { 201 - grid-template-rows: auto 75px auto !important; 202 - } 203 - } 204 - } 205 - } 206 - } 207 - 208 - .slick-list { 209 - .price-section { 210 - margin-top: 0.5rem; 211 195 } 212 196 }
+12 -10
assets/scss/custom/components/_pagination.scss
··· 1 1 .pagination-list { 2 - text-align: center; 3 - .pagination-item--current { 4 - border: none; 5 - a { 6 - color: #232524; 7 - font-weight: 700; 2 + text-align: center; 3 + 4 + .pagination-item--current { 5 + border: none; 6 + 7 + a { 8 + color: $color-text; 9 + font-weight: 700; 10 + } 8 11 } 9 - } 10 12 11 - @include breakpoint("medium") { 12 - text-align: right; 13 - } 13 + @include breakpoint('medium') { 14 + text-align: right; 15 + } 14 16 }
+36 -25
assets/scss/custom/components/_productCarousel.scss
··· 5 5 .slick-arrow { 6 6 background-color: transparent; 7 7 8 - &:before { 8 + &::before { 9 9 transform: scale(1, 2.5); 10 10 } 11 11 } 12 12 13 13 .slick-disabled { 14 - opacity: 1 !important; 15 - &:before { 16 - opacity: 1 !important; 14 + opacity: 1; 15 + 16 + &::before { 17 + opacity: 1; 17 18 } 18 19 } 19 20 20 21 .slick-prev { 21 - &:before { 22 - color: $gold-color; 22 + &::before { 23 + color: $color-gold; 23 24 content: '<'; 24 25 background-image: none; 25 - /*position: relative; 26 - left: 5px;*/ 27 26 } 28 27 } 28 + 29 29 .slick-next { 30 - &:before { 31 - color: $gold-color; 30 + &::before { 31 + color: $color-gold; 32 32 content: '>'; 33 33 background-image: none; 34 34 } 35 35 } 36 + 36 37 .slick-list { 37 38 .productCarousel-slide { 38 39 .card { 39 40 .card-body { 40 41 grid-template-rows: auto 95px auto; 42 + 41 43 .form-increment { 42 - width: 100% !important; 43 - max-width: 100% !important; 44 + width: 100%; 45 + max-width: 100%; 46 + 44 47 .form-increment { 45 48 margin: auto; 46 49 } ··· 55 58 .similar-by-views { 56 59 margin-bottom: 4rem; 57 60 overflow: visible; 61 + 58 62 .productCarousel { 59 63 margin: auto; 60 64 61 65 .slick-arrow { 62 66 background-color: transparent; 67 + 63 68 @media only screen and (min-width: 1200px) { 64 69 // background-color: red; 65 70 } 66 - &:before { 71 + 72 + &::before { 67 73 transform: scale(1, 2.5); 68 74 } 69 75 } 70 76 71 77 .slick-disabled { 72 - opacity: 1 !important; 73 - &:before { 74 - opacity: 1 !important; 78 + opacity: 1; 79 + 80 + &::before { 81 + opacity: 1; 75 82 } 76 83 } 77 84 78 85 .slick-prev { 79 - &:before { 86 + &::before { 80 87 color: $gold-color; 81 88 content: '<'; 82 89 background-image: none; 83 - /*position: relative; 84 - left: 5px;*/ 85 90 } 86 91 } 92 + 87 93 .slick-next { 88 - &:before { 94 + &::before { 89 95 color: $gold-color; 90 96 content: '>'; 91 97 background-image: none; 92 98 } 93 99 } 100 + 94 101 .slick-list { 95 102 margin-bottom: 2rem; 103 + 96 104 .productCarousel-slide { 97 105 .card { 98 106 .card-body { 99 107 grid-template-rows: auto 95px auto; 108 + 100 109 .add-to-cart { 101 110 padding: 1rem 0.5rem; 111 + 102 112 @include breakpoint('medium') { 103 113 padding: 1rem 1.5rem; 104 114 } 105 115 } 116 + 106 117 .form-increment { 107 - // display: none; 108 - // margin-top: 6px; 109 - width: 100% !important; 110 - max-width: 100% !important; 118 + width: 100%; 119 + max-width: 100%; 120 + 111 121 .form-increment { 112 122 margin: auto; 113 123 } ··· 120 130 121 131 .slick-dots { 122 132 margin-bottom: 10px; 133 + 123 134 li button { 124 - border: 1px solid grey; 135 + border: 1px solid $color-gray-medium; 125 136 } 126 137 } 127 138 }
+1 -1
assets/scss/custom/components/widgets/_homepage_carousel.scss
··· 177 177 font-size: 1rem; 178 178 font-weight: 400; 179 179 margin: 0; 180 - color: $color-f-b; 180 + color: $color-text; 181 181 182 182 @media only screen and (min-width: 651px) { 183 183 padding: 0 0 1rem;
+49 -26
assets/scss/custom/layouts/_footer.scss
··· 1 1 .footer { 2 - background-color: $headingColor; 2 + background-color: $color-brand-primary; 3 3 padding-bottom: 0; 4 - // margin-top: 2rem; 5 4 border: 0; 6 5 7 6 .main-container { ··· 10 9 } 11 10 12 11 .footer-info { 13 - justify-content: space-between !important; 12 + justify-content: space-between; 14 13 padding: 0; 15 14 margin: 0 auto 1.5rem; 16 15 width: 100%; 16 + 17 17 .footer-info-col { 18 18 &.col3 { 19 19 padding: 0; ··· 21 21 22 22 &.col3-desktop { 23 23 display: none; 24 + 24 25 @include breakpoint('medium') { 25 26 display: block; 26 27 } 27 28 } 28 29 } 30 + 29 31 .footer-info-col, 30 32 .footer-info-heading { 31 - color: $white-color; 33 + color: $color-white; 32 34 font-size: 18px; 35 + 33 36 .footer-info-list { 34 37 padding-left: 0; 35 38 display: grid; 36 - grid-column-gap: 0; 37 - grid-row-gap: 0.2rem; 39 + gap: 0.2rem 0; 38 40 grid-template-columns: 1fr 1fr; 41 + 39 42 .empty-right, 40 43 .empty-left { 41 44 display: none; 42 45 } 46 + 43 47 @include breakpoint('medium') { 44 48 margin: auto; 45 - grid-row-gap: 0.7rem; 49 + gap: 0.7rem 0; 46 50 } 51 + 47 52 li { 48 53 position: relative; 49 54 height: 45px; ··· 51 56 @include breakpoint('medium') { 52 57 height: auto; 53 58 } 59 + 54 60 a { 55 - color: $white-color; 61 + color: $color-white; 56 62 } 57 63 58 64 &.col3-mobile { 59 65 display: block; 66 + 60 67 h3 { 61 68 margin: auto; 62 69 } 70 + 63 71 address { 64 72 a { 65 73 padding-left: 27px; 66 74 font-size: 15px; 67 75 } 68 76 } 77 + 69 78 &.mobile-footer-address { 70 79 strong { 71 80 margin: 0; 72 81 } 82 + 73 83 a { 74 84 display: none; 75 85 } 76 86 } 87 + 77 88 @include breakpoint('medium') { 78 89 display: none; 79 90 } 80 91 } 81 92 } 82 93 } 94 + 83 95 address { 84 96 font-style: normal; 97 + 85 98 a { 86 99 display: inline-block; 87 - border: 1px solid $gold-color; 100 + border: 1px solid $color-gold; 88 101 padding: 8px 5px; 89 102 padding-left: 27px; 90 103 border-radius: 10px; 91 - color: $secondary-color !important; 92 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/ph-phone-call.png) 104 + color: $color-gold-light; 105 + background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/ph-phone-call.png') 93 106 2px center no-repeat; 94 107 95 108 @include breakpoint('medium') { 96 109 padding: 8px 12px; 97 110 padding-left: 40px; 98 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/ph-phone-call.png) 111 + background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/ph-phone-call.png') 99 112 10px center no-repeat; 100 113 } 101 114 } ··· 104 117 display: block; 105 118 margin-top: 1rem; 106 119 font-weight: 400; 120 + 107 121 @include breakpoint('medium') { 108 122 font-weight: 700; 109 123 } ··· 112 126 113 127 &.newsletterSubscription { 114 128 margin-top: 4.5rem; 129 + 115 130 .footer-info-heading { 116 131 width: 100%; 132 + 117 133 @include breakpoint('medium') { 118 134 width: 90%; 119 135 } 120 136 } 137 + 121 138 p { 122 139 display: none; 123 140 } 141 + 124 142 @include breakpoint('medium') { 125 143 margin-top: 0; 126 144 } 127 145 } 128 146 } 147 + 129 148 @include breakpoint('medium') { 130 149 width: 100%; 131 150 } 132 151 } 133 152 134 153 .footer-pages { 135 - // flex: 70%; 136 154 margin-left: 0; 137 155 margin-bottom: 1.5rem; 156 + 138 157 ul { 139 - grid-row-gap: 0.3rem; 158 + gap: 0.3rem 0; 140 159 display: grid; 141 160 142 161 @media only screen and (max-width: 801px) { 143 162 grid-template-columns: 50% 50%; 144 - 145 163 column-width: 100px; 146 164 column-gap: 10px; 147 - 148 - /* grid-auto-flow: column; 149 - grid-template-rows: repeat(15, auto);*/ 150 165 } 151 166 152 167 li { 153 - width: 100% !important; 168 + width: 100%; 154 169 } 155 170 156 171 @include breakpoint('medium') { ··· 168 183 169 184 .form-input { 170 185 border-radius: 32px; 171 - padding: 14px, 0px, 14px, 16px; 186 + padding: 14px 0 14px 16px; 172 187 font-size: 14px; 173 188 } 174 189 175 190 h3 { 176 191 width: 100%; 177 192 margin-bottom: 1.5rem; 193 + 178 194 @include breakpoint('medium') { 179 195 width: 75%; 180 196 } ··· 182 198 183 199 .socialLinks { 184 200 display: flex; 185 - grid-gap: 0.6rem; 201 + gap: 0.6rem; 186 202 justify-content: center; 187 203 position: relative; 188 204 bottom: 25px; 205 + 189 206 .icon { 190 207 height: 28px; 191 208 width: 28px; 209 + 192 210 svg { 193 - fill: $white-color; 211 + fill: $color-white; 194 212 transform: scale(1.2, 1.2); 195 213 } 196 214 } 215 + 197 216 @include breakpoint('medium') { 198 217 justify-content: flex-start; 199 218 } ··· 207 226 } 208 227 209 228 .footer-bottom { 210 - background-color: $white-color; 211 - 229 + background-color: $color-white; 212 230 padding: 0.5rem 0; 213 231 214 232 .container { ··· 218 236 .footer-copyright { 219 237 padding-top: 0.5rem; 220 238 } 239 + 221 240 ul { 222 241 padding-top: 0.5rem; 242 + 223 243 li { 224 244 margin: auto; 225 245 } ··· 227 247 li:nth-of-type(2) { 228 248 display: none; 229 249 } 250 + 230 251 li:nth-of-type(3) { 231 252 display: none; 232 253 } ··· 235 256 li:nth-of-type(2) { 236 257 display: block; 237 258 } 259 + 238 260 li:nth-of-type(3) { 239 261 display: block; 240 262 } ··· 247 269 } 248 270 249 271 .powered-by { 250 - color: $input-field-text; 272 + color: $color-gray-dark; 251 273 font-size: 14px; 252 274 } 253 275 ··· 261 283 font-size: 14px; 262 284 263 285 a { 264 - color: $input-field-text; 286 + color: $color-gray-dark; 265 287 } 266 288 } 267 289 } ··· 269 291 .footer-payment-icons { 270 292 margin: 0; 271 293 display: none; 294 + 272 295 .footer-payment-icon { 273 296 width: 58px; 274 297 height: 40px;
+340 -301
assets/scss/custom/pages/_account.scss
··· 1 1 .account { 2 - .account-body { 3 - width: 100%; 4 - margin: auto; 5 - } 2 + .account-body { 3 + width: 100%; 4 + margin: auto; 5 + } 6 6 } 7 7 8 8 .page-heading--account { 9 - color: $headingColor; 10 - font-weight: 700; 11 - font-size: 36px; 12 - text-align: center !important; 13 - padding-bottom: 1.5rem; 14 - font-family: "Filson Pro"; 15 - @include breakpoint("medium") { 16 - font-size: 48px; 17 - } 9 + color: $color-brand-primary; 10 + font-weight: 700; 11 + font-size: 36px; 12 + text-align: center; 13 + padding-bottom: 1.5rem; 14 + font-family: 'Filson Pro', sans-serif; 15 + 16 + @include breakpoint('medium') { 17 + font-size: 48px; 18 + } 18 19 } 19 20 20 21 .navBar--account { 21 - .navBar-item { 22 - &.is-active { 23 - padding: 0 0.4rem; 24 - border-bottom: 2px solid $nav-hover-text; 25 - a { 26 - font-weight: 700; 27 - } 22 + .navBar-item { 23 + &.is-active { 24 + padding: 0 0.4rem; 25 + border-bottom: 2px solid $color-brand-primary; 26 + 27 + a { 28 + font-weight: 700; 29 + } 30 + } 31 + 32 + a { 33 + text-decoration: none; 34 + } 28 35 } 29 - a { 30 - text-decoration: none; 31 - } 32 - } 33 36 } 34 37 35 - /***B2C orders***/ 38 + /** B2C orders **/ 36 39 37 40 .account-list--orders { 38 - padding-left: 0; 39 - width: 100%; 40 - .account-listItem { 41 - border-bottom: 1px solid #dbdada; 42 - padding: 1.5rem 0 0.5rem; 41 + padding-left: 0; 42 + width: 100%; 43 43 44 - .account-product-figure { 45 - display: none; 46 - } 47 - .account-product-body { 48 - padding-bottom: 0; 44 + .account-listItem { 45 + border-bottom: 1px solid $color-gray-light; 46 + padding: 1.5rem 0 0.5rem; 49 47 50 - .account-product-title { 51 - font-weight: 700; 52 - color: $body-color; 53 - font-size: 20px; 54 - a { 55 - color: $body-color; 48 + .account-product-figure { 49 + display: none; 56 50 } 57 51 58 - @include breakpoint("medium") { 59 - font-size: 24px; 60 - } 61 - } 62 - .account-orderStatus { 63 - float: right; 64 - position: static; 65 - .account-orderStatus-label { 66 - color: $body-color; 67 - font-size: 12px; 68 - font-weight: 700; 69 - background-color: $light-BgColor; 70 - padding: 8px; 71 - } 72 - } 73 - .account-product-detail { 74 - width: fit-content; 75 - margin-right: 1.5rem; 76 - .account-product-detail-heading { 77 - font-size: 16px; 78 - color: $body-color; 79 - } 80 - span { 81 - font-weight: 700; 82 - } 83 - & + .account-product-detail { 84 - margin-top: 0; 52 + .account-product-body { 53 + padding-bottom: 0; 54 + 55 + .account-product-title { 56 + font-weight: 700; 57 + color: $color-text; 58 + font-size: 20px; 59 + 60 + a { 61 + color: $color-text; 62 + } 63 + 64 + @include breakpoint('medium') { 65 + font-size: 24px; 66 + } 67 + } 68 + 69 + .account-orderStatus { 70 + float: right; 71 + position: static; 72 + 73 + .account-orderStatus-label { 74 + color: $color-text; 75 + font-size: 12px; 76 + font-weight: 700; 77 + background-color: $color-gray-lightest; 78 + padding: 8px; 79 + } 80 + } 81 + 82 + .account-product-detail { 83 + width: fit-content; 84 + margin-right: 1.5rem; 85 + 86 + .account-product-detail-heading { 87 + font-size: 16px; 88 + color: $color-text; 89 + } 90 + 91 + span { 92 + font-weight: 700; 93 + } 94 + 95 + & + .account-product-detail { 96 + margin-top: 0; 97 + } 98 + } 85 99 } 86 - } 87 100 } 88 - } 89 101 } 90 102 91 103 .account--order-details { 92 - .page-heading { 93 - color: $headingColor; 94 - font-weight: 700; 95 - font-size: 24px; 96 - @include breakpoint("medium") { 97 - font-size: 32px; 104 + .page-heading { 105 + color: $color-brand-primary; 106 + font-weight: 700; 107 + font-size: 24px; 108 + 109 + @include breakpoint('medium') { 110 + font-size: 32px; 111 + } 112 + } 113 + 114 + .back-link { 115 + font-size: 18px; 116 + 117 + a { 118 + color: $color-text; 119 + } 98 120 } 99 - } 100 - .back-link { 101 - font-size: 18px; 102 - a { 103 - color: $body-color; 121 + 122 + .account-sidebar, 123 + .account-content { 124 + float: none; 125 + position: static; 104 126 } 105 - } 106 127 107 - .account-sidebar, 108 - .account-content { 109 - float: none; 110 - position: static; 111 - } 128 + .account-heading { 129 + font-size: 18px; 130 + font-weight: 700; 131 + color: $color-brand-primary; 132 + border-color: $color-gold; 133 + } 112 134 113 - .account-heading { 114 - font-size: 18px; 115 - font-weight: 700; 116 - color: $headingColor; 117 - border-color: $gold-color; 118 - } 135 + .account-sidebar { 136 + width: 100%; 137 + padding: 0; 138 + display: grid; 139 + grid-template-columns: 1fr; 140 + column-gap: 30px; 119 141 120 - .account-sidebar { 121 - width: 100%; 122 - padding: 0; 123 - display: grid; 124 - grid-template-columns: 1fr; 125 - column-gap: 30px; 142 + @include breakpoint('medium') { 143 + grid-template-columns: 1fr 1fr 1fr; 144 + } 126 145 127 - @include breakpoint("medium") { 128 - grid-template-columns: 1fr 1fr 1fr; 129 - } 146 + .account-sidebar-block { 147 + font-size: 16px; 130 148 131 - .account-sidebar-block { 132 - font-size: 16px; 133 - & + .account-sidebar-block { 134 - margin-top: 0; 135 - } 149 + & + .account-sidebar-block { 150 + margin-top: 0; 151 + } 136 152 137 - ul { 138 - padding-left: 0; 139 - } 153 + ul { 154 + padding-left: 0; 155 + } 140 156 141 - .definitionList-key { 142 - color: $body-color; 143 - width: 150px; 157 + .definitionList-key { 158 + color: $color-text; 159 + width: 150px; 144 160 145 - &:not(:first-of-type) { 146 - margin-top: 0.5rem; 147 - } 148 - } 161 + &:not(:first-of-type) { 162 + margin-top: 0.5rem; 163 + } 164 + } 149 165 150 - .definitionList-value { 151 - &:not(:first-of-type) { 152 - margin-top: 0.5rem; 166 + .definitionList-value { 167 + &:not(:first-of-type) { 168 + margin-top: 0.5rem; 169 + } 170 + } 153 171 } 154 - } 155 172 } 156 - } 157 173 158 - .account-content { 159 - padding: 0; 160 - width: 100%; 174 + .account-content { 175 + padding: 0; 176 + width: 100%; 161 177 162 - .account-list { 163 - padding-left: 0; 164 - .account-listItem { 165 - border-bottom: 1px solid #dbdada; 178 + .account-list { 179 + padding-left: 0; 166 180 167 - display: flex; 181 + .account-listItem { 182 + border-bottom: 1px solid $color-gray-light; 183 + display: flex; 168 184 169 - .account-product-checkItem { 170 - left: 0; 171 - .form-checkbox { 172 - & + .form-label::before { 173 - border-radius: 0; 185 + .account-product-checkItem { 186 + left: 0; 187 + 188 + .form-checkbox { 189 + & + .form-label::before { 190 + border-radius: 0; 191 + } 192 + } 193 + } 194 + 195 + .account-product-figure { 196 + position: static; 197 + 198 + &::before, 199 + &::after { 200 + display: none; 201 + } 202 + } 203 + 204 + .account-product-body { 205 + padding-bottom: 0; 206 + padding-left: 0; 207 + 208 + p { 209 + margin: 0.3rem 0; 210 + } 211 + 212 + @include breakpoint('medium') { 213 + padding-left: 1rem; 214 + } 215 + } 174 216 } 175 - } 176 217 } 177 218 178 - .account-product-figure { 179 - position: static; 180 - &::before, 181 - &::after { 182 - display: none; 183 - } 219 + .account-orderTotal { 220 + width: 100%; 221 + font-size: 16px; 222 + margin-top: 1rem; 223 + display: block; 224 + 225 + @include breakpoint('medium') { 226 + width: 40%; 227 + } 228 + 229 + dt, 230 + dd { 231 + color: $color-text; 232 + font-weight: 400; 233 + font-size: 16px; 234 + padding: 0.5rem 0; 235 + } 236 + 237 + .account-orderTotal-key { 238 + &.key--grand { 239 + font-size: 20px; 240 + font-weight: 700; 241 + } 242 + } 243 + 244 + .account-orderTotal-value { 245 + &:last-of-type { 246 + border-bottom: none; 247 + } 248 + 249 + &.value--grand { 250 + font-size: 20px; 251 + font-weight: 700; 252 + } 253 + } 184 254 } 185 255 186 - .account-product-body { 187 - padding-bottom: 0; 188 - padding-left: 0rem; 256 + .order-actions { 257 + width: 100%; 258 + display: flex; 259 + justify-content: space-between; 189 260 190 - p { 191 - margin: 0.3rem 0; 192 - } 261 + .account-reorder-form { 262 + margin-left: 0; 193 263 194 - @include breakpoint("medium") { 195 - padding-left: 1rem; 196 - } 264 + @include breakpoint('medium') { 265 + margin-left: 11rem; 266 + } 267 + } 268 + 269 + @include breakpoint('medium') { 270 + justify-content: flex-end; 271 + } 197 272 } 198 - } 199 273 } 274 + } 200 275 201 - .account-orderTotal { 202 - width: 100%; 203 - font-size: 16px; 204 - margin-top: 1rem; 205 - display: block; 206 - @include breakpoint("medium") { 207 - width: 40%; 208 - } 276 + /** Messages **/ 209 277 210 - dt, 211 - dd { 212 - color: $body-color; 213 - font-weight: 400; 214 - font-size: 16px; 215 - padding: 0.5rem 0; 216 - } 278 + .account-list--messages { 279 + padding-left: 0; 217 280 218 - .account-orderTotal-key { 219 - &.key--grand { 220 - font-size: 20px; 221 - font-weight: 700; 222 - } 223 - } 281 + .account-listItem { 282 + padding: 2.5rem 0; 224 283 225 - .account-orderTotal-value { 226 - &:last-of-type { 227 - border-bottom: none; 284 + @include breakpoint('medium') { 285 + padding: 1.5rem 0; 228 286 } 229 287 230 - &.value--grand { 231 - font-size: 20px; 232 - font-weight: 700; 288 + .account-message { 289 + .account-orderStatus { 290 + font-weight: 700; 291 + } 292 + 293 + .is-read { 294 + color: $color-text; 295 + } 233 296 } 234 - } 235 297 } 236 - 237 - .order-actions { 238 - width: 100%; 239 - display: flex; 240 - justify-content: space-between; 298 + } 241 299 242 - .account-reorder-form { 243 - margin-left: 0; 244 - @include breakpoint("medium") { 245 - margin-left: 11rem; 246 - } 247 - } 300 + .form--messages { 301 + width: 100%; 248 302 249 - @include breakpoint("medium") { 250 - justify-content: flex-end; 251 - } 303 + small { 304 + color: $color-error; 252 305 } 253 - } 254 - } 255 306 256 - /***Messages***/ 307 + .form-actions { 308 + display: flex; 257 309 258 - .account-list--messages { 259 - padding-left: 0; 310 + .button { 311 + margin-top: 0; 260 312 261 - .account-listItem { 262 - padding: 2.5rem 0; 313 + & + .button { 314 + margin-left: 10px; 315 + } 316 + } 263 317 264 - @include breakpoint("medium") { 265 - padding: 1.5rem 0; 266 - } 267 - .account-message { 268 - .account-orderStatus { 269 - font-weight: 700; 270 - // margin-bottom: 0.5rem; 271 - } 272 - .is-read { 273 - color: $body-color; 274 - } 318 + @include breakpoint('medium') { 319 + text-align: left; 320 + display: block; 321 + } 275 322 } 276 - } 277 - } 278 323 279 - .form--messages { 280 - width: 100%; 281 - small { 282 - color: #d21d01; 283 - } 284 - .form-actions { 285 - display: flex; 286 - .button { 287 - margin-top: 0; 288 - & + .button { 289 - margin-left: 10px; 290 - } 291 - } 292 - @include breakpoint("medium") { 293 - text-align: left; 294 - display: block; 324 + @include breakpoint('medium') { 325 + width: 50%; 295 326 } 296 - } 297 - @include breakpoint("medium") { 298 - width: 50%; 299 - } 300 327 } 301 328 302 - /***B2C addresses***/ 329 + /** B2C addresses **/ 303 330 304 331 .addressList { 305 - display: grid !important; 306 - grid-template-columns: 1fr; 307 - padding: 0; 308 - @include breakpoint("medium") { 309 - grid-template-columns: 1fr 1fr; 310 - } 311 - 312 - .address { 313 - margin: auto; 332 + display: grid; 333 + grid-template-columns: 1fr; 334 + padding: 0; 314 335 315 - @include breakpoint("medium") { 316 - width: 100%; 336 + @include breakpoint('medium') { 337 + grid-template-columns: 1fr 1fr; 317 338 } 318 339 319 - .panel-body { 320 - border-radius: 8px; 321 - .address-title { 322 - font-size: 20px; 323 - font-weight: 700; 324 - @include breakpoint("medium") { 325 - font-size: 24px; 326 - } 327 - } 328 - .address-details { 329 - padding: 0; 330 - } 331 - .form-actions { 332 - display: flex; 333 - justify-content: start; 340 + .address { 341 + margin: auto; 334 342 335 - @include breakpoint("medium") { 343 + @include breakpoint('medium') { 344 + width: 100%; 336 345 } 337 346 338 - * { 339 - top: 5px; 340 - } 341 - .button { 342 - margin-right: 10px; 347 + .panel-body { 348 + border-radius: 8px; 349 + 350 + .address-title { 351 + font-size: 20px; 352 + font-weight: 700; 353 + 354 + @include breakpoint('medium') { 355 + font-size: 24px; 356 + } 357 + } 358 + 359 + .address-details { 360 + padding: 0; 361 + } 362 + 363 + .form-actions { 364 + display: flex; 365 + justify-content: start; 366 + 367 + * { 368 + top: 5px; 369 + } 370 + 371 + .button { 372 + margin-right: 10px; 373 + } 374 + } 343 375 } 344 - } 345 376 } 346 - } 347 377 348 - .address--new { 349 - .panel { 350 - .panel-body { 351 - background-color: white; 352 - border: 1px solid $nav-hover-text; 353 - .address-symbol { 354 - color: black; 355 - font-size: 23px; 356 - } 357 - .address-title { 358 - font-size: 16px; 359 - font-weight: 700; 360 - text-align: center; 378 + .address--new { 379 + .panel { 380 + .panel-body { 381 + background-color: $color-white; 382 + border: 1px solid $color-brand-primary; 383 + 384 + .address-symbol { 385 + color: $color-text; 386 + font-size: 23px; 387 + } 388 + 389 + .address-title { 390 + font-size: 16px; 391 + font-weight: 700; 392 + text-align: center; 393 + } 394 + } 361 395 } 362 - } 363 396 } 364 - } 365 397 } 366 398 367 - /***Edit account***/ 399 + /** Edit account **/ 368 400 369 401 .form--edit-account { 370 - #FormField_26, #FormField_27, #FormField_28, #FormField_31, #FormField_35 { 371 - display: none; 372 - } 373 - 374 - .form-actions { 375 - display: flex; 376 - justify-content: space-between; 377 - .button { 378 - margin-top: 0.75rem; 379 - width: 47%; 380 - @include breakpoint("medium") { 381 - width: fit-content; 382 - } 402 + #FormField_26, 403 + #FormField_27, 404 + #FormField_28, 405 + #FormField_31, 406 + #FormField_35 { 407 + display: none; 383 408 } 384 - @include breakpoint("medium") { 385 - justify-content: center; 409 + 410 + .form-actions { 411 + display: flex; 412 + justify-content: space-between; 413 + 414 + .button { 415 + margin-top: 0.75rem; 416 + width: 47%; 417 + 418 + @include breakpoint('medium') { 419 + width: fit-content; 420 + } 421 + } 422 + 423 + @include breakpoint('medium') { 424 + justify-content: center; 425 + } 386 426 } 387 - } 388 427 }
+176 -122
assets/scss/custom/pages/_calculators.scss
··· 1 - .calculator-heading { 2 - margin: auto; 3 - text-align: center; 4 - margin-bottom: 2rem; 5 - h1 { 6 - font-family: 'Filson Pro', sans-serif; 7 - font-weight: 700; 8 - font-size: 36px; 9 - margin-bottom: 1rem; 10 - @include breakpoint('medium') { 11 - font-size: 48px; 1 + .rawsome-catculator-page { 2 + font-family: 'Filson Pro', sans-serif; 3 + 4 + .calculator-heading { 5 + margin: auto; 6 + text-align: center; 7 + margin-bottom: 2rem; 8 + 9 + h1 { 10 + font-weight: 700; 11 + font-size: 36px; 12 + margin-bottom: 1rem; 13 + 14 + @include breakpoint('medium') { 15 + font-size: 48px; 16 + } 12 17 } 13 - } 14 - p { 15 - font-size: 18px; 16 - } 17 - } 18 18 19 - .calculator-toggler { 20 - margin: 0 auto 2rem; 21 - width: 100%; 22 - justify-content: space-between; 23 - display: none; 24 - 25 - p { 26 - padding: 12px; 27 - text-align: center; 28 - margin-bottom: 0; 29 - margin-top: 0; 30 - a { 31 - color: $body-color; 19 + p { 20 + font-size: 18px; 32 21 } 33 22 } 34 - p.active { 35 - border-bottom: 2px solid $headingColor; 36 - font-weight: 700; 37 - } 38 - @include breakpoint('medium') { 39 - width: 35%; 40 - display: flex; 41 - } 42 - } 43 23 44 - .calculator-toggler-mobile { 45 - background-color: $light-BgColor; 46 - display: block; 47 - width: 100vw; 48 - position: relative; 49 - left: calc(-50vw + 50%); 50 - padding: 1rem 0; 24 + .calculator-toggler { 25 + margin: 0 auto 2rem; 26 + width: 100%; 27 + justify-content: space-between; 28 + display: none; 51 29 52 - .inner { 53 - margin: auto; 54 - width: 92%; 55 30 p { 56 - padding: 0.5rem 0.8rem; 57 - margin-bottom: 0.2rem; 31 + padding: 12px; 32 + text-align: center; 33 + margin-bottom: 0; 34 + margin-top: 0; 35 + 58 36 a { 59 37 color: $body-color; 60 38 } 61 39 } 62 40 63 - p#toggler-active { 64 - background-color: $white-color; 65 - border-radius: 30px; 66 - span { 67 - float: right; 68 - &.open { 69 - rotate: 180deg; 41 + p.active { 42 + border-bottom: 2px solid $headingColor; 43 + font-weight: 700; 44 + } 45 + 46 + @include breakpoint('medium') { 47 + width: 35%; 48 + display: flex; 49 + } 50 + } 51 + 52 + .calculator-toggler-mobile { 53 + background-color: $light-BgColor; 54 + display: block; 55 + width: 100vw; 56 + position: relative; 57 + left: calc(-50vw + 50%); 58 + padding: 1rem 0; 59 + 60 + .inner { 61 + margin: auto; 62 + width: 92%; 63 + 64 + p { 65 + padding: 0.5rem 0.8rem; 66 + margin-bottom: 0.2rem; 67 + 68 + a { 69 + color: $body-color; 70 + } 71 + } 72 + 73 + p#toggler-active { 74 + background-color: $white-color; 75 + border-radius: 30px; 76 + 77 + span { 78 + float: right; 79 + 80 + &.open { 81 + rotate: 180deg; 82 + } 83 + } 84 + } 85 + 86 + #toggler-dropdown { 87 + display: none; 88 + 89 + &.active { 90 + display: block; 70 91 } 71 92 } 72 93 } 73 94 74 - #toggler-dropdown { 95 + @include breakpoint('medium') { 75 96 display: none; 76 - &.active { 77 - display: block; 78 - } 79 97 } 80 98 } 81 - 82 - @include breakpoint('medium') { 83 - display: none; 84 - } 85 99 } 86 100 87 - //.rawsome-catculator-page { 88 101 .rawsome-button--primary { 89 102 transition: all 0.2s ease; 90 - border: 2px solid $headingColor !important; 103 + border: 2px solid $headingColor; 91 104 color: #fff; 92 105 font-size: 18px; 93 106 font-weight: bold; 94 - margin: 20px 0px 0px 141px; 107 + margin: 20px 0 0 141px; 95 108 text-align: center; 96 109 display: block; 97 110 width: 165px; 98 111 height: 3.5rem; 99 112 background-color: #687d6a; 100 - border-color: black; 101 113 border-radius: 45px; 114 + 102 115 &:hover { 103 - background-color: white !important; 104 - color: $headingColor !important; 116 + background-color: white; 117 + color: $headingColor; 118 + 105 119 p { 106 - color: $headingColor !important; 120 + color: $headingColor; 107 121 } 108 122 } 109 123 } ··· 122 136 123 137 &:hover { 124 138 color: $headingColor; 139 + border-color: black; 125 140 } 126 141 } 127 142 128 - .rawsome-info-table h1 { 129 - font-family: 'Filson Pro', sans-serif; 130 - } 131 - 132 143 .cat_weight_cal { 133 144 margin-top: 35px; 134 145 display: block; 146 + 135 147 img { 136 - width: 80% !important; 137 - height: auto !important; 138 - margin: auto !important; 148 + width: 80%; 149 + height: auto; 150 + margin: auto; 139 151 display: block; 152 + 140 153 @include breakpoint('medium') { 141 - width: 100% !important; 154 + width: 100%; 142 155 } 143 156 } 157 + 144 158 div { 145 159 justify-content: center; 160 + 146 161 .cat_weight_p { 147 - margin: 5rem 0 0.5rem !important; 148 - color: black !important; 162 + margin: 5rem 0 0.5rem; 163 + color: black; 149 164 font-weight: 700; 150 165 text-transform: uppercase; 166 + 151 167 @include breakpoint('medium') { 152 - margin: 0 0 0.5rem !important; 168 + margin: 0 0 0.5rem; 153 169 } 154 170 } 171 + 155 172 #weight_input { 156 - margin: 0.5rem 0 1rem !important; 157 - width: 100% !important; 158 - border: 2px solid $input-field !important; 173 + margin: 0.5rem 0 1rem; 174 + width: 100%; 175 + border: 2px solid $input-field; 159 176 padding-left: 15px; 177 + font-size: 18px; 178 + color: #687d6a; 179 + border-radius: 45px; 180 + height: 3.5rem; 160 181 } 161 182 162 183 div { 163 184 display: flex; 164 185 justify-content: space-between; 165 - grid-gap: 10px; 186 + gap: 10px; 187 + 166 188 button { 167 - margin: 0 !important; 168 - width: 50% !important; 189 + margin: 0; 190 + width: 50%; 169 191 } 170 192 } 171 193 } 194 + 172 195 @include breakpoint('medium') { 173 196 display: grid; 174 197 grid-template-columns: 1fr 1fr; ··· 179 202 } 180 203 181 204 .cat_spayed { 182 - display: block !important; 205 + display: block; 183 206 margin-top: 35px; 207 + 184 208 .rawsome-button--secondary { 185 - margin: 20px 0px 0px 96px; 209 + margin: 20px 0 0 96px; 186 210 187 211 @include breakpoint('medium') { 188 - margin: 40px 0px 0px 26px; 212 + margin: 40px 0 0 26px; 189 213 } 190 214 } 191 215 ··· 193 217 display: flex !important; 194 218 flex-direction: row; 195 219 align-items: center; 196 - //justify-content: center; 197 220 } 198 221 } 199 222 ··· 202 225 margin-top: 35px; 203 226 204 227 .rawsome-button--primary { 205 - margin: 20px auto 0px auto; 228 + margin: 20px auto 0; 229 + 206 230 @include breakpoint('medium') { 207 - margin: 20px 0px 0px 141px; 231 + margin: 20px 0 0 141px; 208 232 } 209 233 } 210 234 211 235 .rawsome-button--secondary { 212 - margin: 20px 0px 0px 96px; 236 + margin: 20px 0 0 96px; 213 237 214 238 @include breakpoint('medium') { 215 - margin: 20px 0px 0px 26px !important; 239 + margin: 20px 0 0 26px !important; 216 240 } 217 241 } 242 + 218 243 @include breakpoint('medium') { 219 244 display: flex !important; 220 245 flex-direction: row; 221 246 align-items: center; 222 - //justify-content: center; 223 247 } 224 248 } 225 249 226 250 .cat_active { 227 251 display: block !important; 252 + 228 253 img { 229 254 margin: 0 !important; 230 255 } 231 256 232 257 .rawsome-button--primary { 233 - margin: 10px auto 10px; 258 + margin: 10px auto; 234 259 235 260 @include breakpoint('medium') { 236 - margin: 20px 0px 0px 26px; 261 + margin: 20px 0 0 26px; 237 262 } 238 263 } 239 264 ··· 241 266 margin: 10px auto 0 !important; 242 267 243 268 @include breakpoint('medium') { 244 - margin: 20px 0px 0px 26px !important; 269 + margin: 20px 0 0 26px !important; 245 270 } 246 271 } 247 272 ··· 252 277 justify-content: center; 253 278 } 254 279 } 280 + 255 281 .recom_daily_amount_heading { 256 282 background-color: $headingColor; 257 283 color: $white-color; ··· 264 290 position: relative; 265 291 left: calc(-50vw + 50%); 266 292 } 293 + 267 294 .recom_daily_amount { 268 295 width: 99.4vw; 269 296 position: relative; 270 297 left: calc(-50vw + 50%); 271 298 background-color: $headingColor; 272 299 padding: 1rem 1rem 3rem; 300 + 273 301 .rda_account_btn_container { 274 302 margin: 1.5rem auto 0; 275 303 width: 95%; 304 + 276 305 .rda_account_btn { 277 306 margin: auto; 278 307 width: fit-content; ··· 297 326 width: 95%; 298 327 margin: auto; 299 328 border-radius: 15px; 329 + 300 330 p { 301 331 padding: 7px 15px; 332 + 302 333 span { 303 334 float: right; 304 335 margin: 0; 336 + 305 337 @include breakpoint('medium') { 306 338 float: none; 307 339 margin-left: 70px; ··· 347 379 position: absolute; 348 380 width: 30px; 349 381 height: 30px; 350 - // top: 0; 351 382 right: 0; 352 383 left: 0; 353 384 margin: auto; ··· 356 387 border-radius: 50%; 357 388 animation: button-loading-spinner 1s ease infinite; 358 389 } 390 + 359 391 .cta--loading { 360 392 opacity: 0.2; 361 393 pointer-events: none; 362 394 } 395 + 363 396 @keyframes button-loading-spinner { 364 397 from { 365 398 transform: rotate(0turn); ··· 372 405 373 406 .catculator-row { 374 407 width: 100%; 408 + 375 409 .catculator-col { 376 410 width: 100%; 377 411 display: flex; 378 412 align-items: center; 379 413 justify-content: center; 414 + 380 415 @include breakpoint('large') { 381 416 display: block; 382 417 } 383 418 } 419 + 384 420 button { 385 421 margin-left: 1.5rem; 386 422 width: 80%; 387 423 height: 3.5rem; 388 - border-color: black; 389 424 border-radius: 40px; 390 425 background-color: #687d6a; 391 426 text-align: center; 392 427 } 393 428 394 - @include breakpoint('medium') { 395 - } 396 - 397 429 @include breakpoint('large') { 398 430 display: flex; 399 431 flex-direction: row; 432 + 400 433 button { 401 434 margin-right: 95px; 402 435 margin-left: 0; ··· 418 451 grid-template-columns: auto; 419 452 margin: auto; 420 453 width: 92%; 454 + 421 455 div { 422 456 text-align: center; 423 457 margin-bottom: 2rem; 424 458 display: flex; 425 459 align-items: center; 426 460 justify-content: center; 461 + 427 462 div { 428 463 display: block; 429 464 padding-left: 20px; 465 + 430 466 @include breakpoint('medium') { 431 - padding-left: 0px; 467 + padding-left: 0; 432 468 } 433 469 } 434 470 435 471 img { 436 472 width: 30%; 473 + 437 474 @include breakpoint('medium') { 438 475 height: 120px; 439 476 width: auto; 440 477 } 441 478 } 479 + 442 480 h1 { 443 481 margin: 3rem auto 0.5rem; 444 482 } 483 + 445 484 p { 446 485 margin-bottom: 1rem; 447 486 } ··· 461 500 width: 99.4vw; 462 501 } 463 502 } 464 - //} 465 503 466 504 #show_RDA { 467 505 padding: 0; 468 506 position: static; 507 + 469 508 .modal-header { 470 509 padding-left: 2.25rem; 471 - padding-right: 3.03571rem; 510 + padding-right: 3.0357rem; 472 511 border-bottom: none; 473 512 474 513 .swal2-close { ··· 514 553 .swal2-content { 515 554 margin: auto; 516 555 width: 100%; 556 + 517 557 @include breakpoint('medium') { 518 558 width: 80%; 519 559 } 520 560 521 561 #swal2-content-pouches, 522 562 #swal2-content_tubs { 523 - display: grid !important; //flex !important; 524 - /* align-items: center; 525 - justify-content: center; 526 - flex-direction: row; */ 563 + display: grid !important; 527 564 grid-template-columns: 1fr 1fr; 528 - grid-gap: 13px; 529 - // border: 1px solid red; 565 + gap: 13px; 530 566 531 567 @include breakpoint('medium') { 532 568 grid-template-columns: 1fr 1fr 1fr 1fr; ··· 537 573 padding: 15px 10px; 538 574 border-radius: 20px; 539 575 background-color: $white-color; 576 + 540 577 .image_wrap { 541 578 img { 542 579 width: auto; 543 580 height: auto; 544 581 } 545 582 } 583 + 546 584 .content_wrap { 547 585 margin: 0.5rem auto 1rem; 586 + 548 587 p { 549 588 text-align: center; 550 - //height: 35px; 551 589 } 552 590 } 553 591 ··· 555 593 margin: 0 auto; 556 594 width: 100%; 557 595 font-size: 16px; 558 - // padding: 0 50px; 596 + 559 597 @include breakpoint('medium') { 560 598 font-size: 18px; 561 - // width: fit-content; 562 599 } 563 600 } 564 601 ··· 576 613 border-radius: 20px; 577 614 padding: 30px 30px 20px; 578 615 margin-top: 20px; 616 + 579 617 h3 { 580 618 color: white; 581 619 font-weight: 700; 582 620 font-size: 24px; 583 621 margin: 0 0 1rem; 584 622 } 623 + 585 624 p { 586 625 color: white; 587 626 font-weight: 700; ··· 593 632 #dry-matter-container { 594 633 padding-top: 2rem; 595 634 display: grid; 596 - grid-gap: 20px; 635 + gap: 20px; 597 636 grid-template-columns: 1fr; 598 637 } 599 638 ··· 613 652 order: -1; 614 653 border: 1px solid #dcdcdc; 615 654 border-radius: 40px; 616 - -webkit-box-shadow: 1px 1px 8px 2px rgba(220, 220, 220, 1); 617 - -moz-box-shadow: 1px 1px 8px 2px rgba(220, 220, 220, 1); 618 655 box-shadow: 1px 1px 8px 2px rgba(220, 220, 220, 1); 619 656 padding: 0 20px 20px; 657 + 620 658 @include breakpoint('medium') { 621 659 padding: 0 30px 20px; 622 660 } 623 661 624 662 .percent-calculator { 625 663 display: block; 664 + 626 665 div { 627 666 position: relative; 667 + 628 668 input { 629 669 margin-top: 0.5rem; 630 670 } 671 + 631 672 #calcBtn { 632 673 width: 100%; 633 674 transition: all 0.2s ease; 634 675 border: 2px solid $headingColor !important; 676 + 635 677 &:hover { 636 678 background-color: white !important; 679 + 637 680 p { 638 681 color: $headingColor !important; 639 682 } 640 683 } 684 + 641 685 @include breakpoint('medium') { 642 686 position: absolute; 643 687 bottom: 0; 644 688 left: 0; 645 689 } 646 690 } 691 + 647 692 @include breakpoint('medium') { 648 693 padding: 0 0.7rem 0 0; 649 694 } 650 695 } 696 + 651 697 @include breakpoint('medium') { 652 698 display: grid; 653 699 max-width: 100%; 654 700 grid-template-columns: 35% 35% 30%; 701 + 655 702 p { 656 703 margin-bottom: 0.5rem; 657 704 } 705 + 658 706 input { 659 707 width: 100%; 660 708 } ··· 673 721 .dry-matter-info-table { 674 722 display: grid; 675 723 grid-template-columns: auto; 676 - // border: 1px solid red; 677 724 margin: auto; 678 725 width: 92%; 726 + 679 727 p { 680 728 margin-bottom: 1rem; 681 729 } 730 + 682 731 strong { 683 732 font-size: 24px; 684 733 } 734 + 685 735 table { 686 736 width: 100%; 737 + 687 738 th { 688 739 font-weight: 700; 689 740 text-align: left; 690 741 color: #687d6a; 691 742 padding: 0.5rem 55px 0.5rem 0; 692 743 } 744 + 693 745 td { 694 746 padding: 0.5rem 55px 0.5rem 0; 695 747 border-bottom: 1px solid #dbdada; 696 748 } 697 749 } 750 + 698 751 @include breakpoint('medium') { 699 752 width: 81%; 700 753 grid-template-columns: auto auto auto; ··· 710 763 #dry-matter-container { 711 764 grid-template-columns: 1fr 1fr; 712 765 } 766 + 713 767 .dmc2 { 714 768 order: 2; 715 769 }
+4 -4
assets/scss/custom/pages/_diet-builder.scss
··· 765 765 cursor: pointer; 766 766 font-size: 14px; 767 767 font-weight: 600; 768 - color: $color-f-b; 768 + color: $color-text; 769 769 text-align: left; 770 770 transition: background-color 0.15s ease; 771 771 ··· 806 806 807 807 .diet-builder-health__info-explanation { 808 808 font-size: 13px; 809 - color: $color-f-b; 809 + color: $color-text; 810 810 margin-bottom: 10px; 811 811 line-height: 1.5; 812 812 } 813 813 814 814 .diet-builder-health__info-recommended { 815 815 font-size: 13px; 816 - color: $color-f-b; 816 + color: $color-text; 817 817 line-height: 1.5; 818 818 margin-bottom: 0; 819 819 820 820 strong { 821 - color: $color-f-b; 821 + color: $color-text; 822 822 } 823 823 } 824 824
+11 -3
assets/scss/layouts/products/_productGrid.scss
··· 16 16 margin-bottom: spacing('single'); 17 17 18 18 .product { 19 - @include grid-column(6, $float: none); 19 + @include grid-column(12, $float: none); 20 20 display: inline-block; 21 21 font-size: fontSize('base'); // 1 22 22 vertical-align: top; 23 23 24 24 @include breakpoint('small') { 25 + width: grid-calc(6, $total-columns); 26 + } 27 + 28 + @media (min-width: 900px) { 25 29 width: grid-calc(4, $total-columns); 26 30 } 27 31 28 - @include breakpoint('medium') { 32 + @include breakpoint('large') { 29 33 width: grid-calc(3, $total-columns); 30 34 } 31 35 } ··· 42 46 .productGrid { 43 47 .product { 44 48 // 1 45 - @include breakpoint('small') { 49 + @media (min-width: 900px) { 46 50 width: grid-calc(4, $total-columns); 51 + } 52 + 53 + @include breakpoint('large') { 54 + width: grid-calc(3, $total-columns); 47 55 } 48 56 } 49 57 }
+1 -1
config.json
··· 1 1 { 2 - "name": "diet-builder remove data preview", 2 + "name": "fix product cards", 3 3 "version": "6.10.0", 4 4 "template_engine": "handlebars_v4", 5 5 "meta": {
+10 -10
templates/pages/custom/page/rawsome-catculator.html
··· 410 410 How much does your cat weigh? 411 411 </p> 412 412 <div class="cat_weight_cal"> 413 - <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 413 + <img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 414 414 <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 415 415 <p class="cat_weight_p" >kg</p> 416 - <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' style=' margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 416 + <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()'/> 417 417 <div> 418 418 <button class="rawsome-button--secondary" onclick='toPageOne()'>Back</button> 419 - <button class="rawsome-button--primary" onclick='weight(1)' disabled style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 419 + <button class="rawsome-button--primary" onclick='weight(1)' disabled >Next</button> 420 420 </div> 421 421 </div> 422 422 ··· 434 434 How much does your cat weigh? 435 435 </p> 436 436 <div class="cat_weight_cal" > 437 - <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 437 + <img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 438 438 <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 439 439 <p class="cat_weight_p" >kg</p> 440 - <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' style=' margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 440 + <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' /> 441 441 <div> 442 442 <button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button> 443 - <button class="rawsome-button--primary" disabled onclick='weight(2)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 443 + <button class="rawsome-button--primary" disabled onclick='weight(2)' >Next</button> 444 444 </div> 445 445 </div> 446 446 ··· 746 746 let catculator = document.getElementById('catculator'); 747 747 catculator.innerHTML = ` 748 748 <div id='catculator' style='width: 100%'> 749 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; ;'> 749 + <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 750 750 How much does your cat weigh? 751 751 </p> 752 752 <div class="cat_weight_cal" > 753 - <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 753 + <img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 754 754 <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 755 755 <p class="cat_weight_p" >kg</p> 756 - <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' style='margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 756 + <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' /> 757 757 <div> 758 758 <button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button> 759 - <button class="rawsome-button--primary" onclick='weight(3)' disabled style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; ; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 759 + <button class="rawsome-button--primary" onclick='weight(3)' disabled >Next</button> 760 760 </div> 761 761 </div> 762 762