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.

Refactor SCSS styles for account, calculators, and diet builder pages; update color variables for consistency and improve layout responsiveness. Modify HTML structure in rawsome catculator for better accessibility and cleaner code.

Rogerio Romao 33fdbbc6 b0337dec

+970 -825
+314 -284
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 400 } 398 401 399 - .navPages-list { 400 - //display: -webkit-box !important; 401 - } 402 - 403 402 .navUser-section, 404 403 .navPages-list { 405 404 display: flex; ··· 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 633 637 - 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 } ··· 1088 1114 min-height: 540px; 1089 1115 } 1090 1116 1091 - &.slick-initialized { 1092 - // max-height: none !important; 1093 - } 1094 - 1095 1117 @media only screen and (max-width: 800px) { 1096 1118 .heroCarousel-image-wrapper { 1097 1119 height: auto; ··· 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 + 1260 1261 .product { 1261 1262 @media only screen and (max-width: 800px) { 1262 1263 padding: 0; ··· 1272 1273 .product-info { 1273 1274 .text { 1274 1275 width: 100%; 1276 + 1275 1277 @include breakpoint('medium') { 1276 1278 padding-right: 60px; 1277 1279 } 1278 1280 } 1281 + 1279 1282 h2 { 1280 1283 font-size: 28px; 1284 + 1281 1285 @include breakpoint('medium') { 1282 1286 font-size: 40px; 1283 1287 } 1284 1288 } 1289 + 1285 1290 h3 { 1286 1291 font-size: 24px; 1292 + 1287 1293 @include breakpoint('medium') { 1288 1294 font-size: 32px; 1289 1295 } ··· 1300 1306 } 1301 1307 1302 1308 .bundle-card { 1303 - /*padding-top: 2rem;*/ 1304 - 1305 1309 @media only screen and (max-width: 800px) { 1306 1310 grid-template-columns: 1fr; 1307 1311 } ··· 1321 1325 margin: auto; 1322 1326 align-items: center; 1323 1327 } 1328 + 1324 1329 img { 1325 1330 @media only screen and (max-width: 580px) { 1326 1331 max-width: 94px; 1327 1332 } 1333 + 1328 1334 @include breakpoint('medium') { 1329 1335 max-width: 120px; 1330 1336 } 1337 + 1331 1338 @include breakpoint('medium') { 1332 1339 max-width: 100%; 1333 1340 } ··· 1336 1343 .text { 1337 1344 width: 100%; 1338 1345 padding-left: 1rem; 1346 + 1339 1347 @include breakpoint('medium') { 1340 1348 padding: 0; 1341 1349 } 1350 + 1342 1351 p { 1343 1352 color: $white-color; 1344 1353 margin: 0; ··· 1350 1359 line-height: 1.2em; 1351 1360 grid-area: heading; 1352 1361 margin: 0; 1362 + 1353 1363 @include breakpoint('medium') { 1354 1364 margin-top: 2rem; 1355 1365 font-size: 32px; ··· 1378 1388 } 1379 1389 } 1380 1390 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 1391 .section { 1395 1392 padding: 2rem 0; 1393 + overflow: hidden; 1394 + 1396 1395 @include breakpoint('medium') { 1397 1396 padding: 3rem 0; 1398 1397 } 1399 - overflow: hidden; 1400 1398 1401 1399 &.imageBg { 1402 1400 padding: 0; 1403 1401 position: relative; 1402 + 1404 1403 @include breakpoint('medium') { 1405 1404 height: 450px; 1406 1405 } 1407 1406 } 1408 1407 1409 1408 .textOver { 1409 + margin: auto; 1410 + 1410 1411 @include breakpoint('medium') { 1411 1412 height: 100%; 1412 1413 } 1413 - margin: auto; 1414 1414 } 1415 1415 1416 1416 .imageOver { ··· 1421 1421 max-width: 100%; 1422 1422 width: auto !important; 1423 1423 position: absolute; 1424 - left: 0; 1425 - right: auto; 1424 + inset: 0 auto auto 0; 1426 1425 min-width: 100%; 1427 1426 min-height: 100%; 1428 - bottom: auto; 1429 - top: 0; 1430 1427 margin: auto !important; 1431 1428 } 1432 1429 } 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 1430 } 1459 1431 1460 1432 [aria-label='Breadcrumb'] { ··· 1463 1435 text-align: left; 1464 1436 padding: 1.5rem 0; 1465 1437 margin-bottom: 0; 1438 + 1466 1439 .breadcrumb { 1467 1440 a { 1468 1441 color: $body-color; 1469 1442 } 1470 1443 1471 1444 &::before { 1472 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/breadcrumb-label.png) 1445 + background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/breadcrumb-label.png') 1473 1446 center no-repeat; 1474 1447 width: 9px; 1475 1448 height: 9px; ··· 1480 1453 } 1481 1454 } 1482 1455 1483 - /****************************category description****************/ 1456 + /*************************** category description ***************/ 1484 1457 .category-description { 1485 1458 border-bottom: 4px solid $light-BgColor; 1486 1459 margin-bottom: 1rem; 1487 1460 padding-bottom: 1rem; 1488 - // border: 1px solid red; 1489 1461 1490 1462 .page-heading { 1491 1463 text-align: left; ··· 1493 1465 1494 1466 #cat-description-box { 1495 1467 overflow: hidden; 1468 + 1496 1469 p { 1497 1470 height: 45px; 1498 1471 } ··· 1519 1492 1520 1493 .selected-facets--desktop { 1521 1494 display: none; 1495 + 1522 1496 @include breakpoint('medium') { 1523 1497 display: block; 1524 1498 } ··· 1527 1501 .selected-facets--mobile { 1528 1502 display: block; 1529 1503 padding: 0.5rem 0 1.5rem; 1504 + 1530 1505 h2 { 1531 1506 display: none; 1532 1507 } 1508 + 1533 1509 @include breakpoint('medium') { 1534 1510 display: none; 1535 1511 } 1536 1512 } 1513 + 1537 1514 .facetedSearch-refineFilters { 1538 1515 display: block; 1539 1516 } ··· 1555 1532 1556 1533 .accordion-block { 1557 1534 margin: 0; 1535 + font-family: 'Filson Pro', sans-serif; 1536 + 1558 1537 .accordion-nav-clear-holder { 1559 1538 .facetedSearch-clearLink { 1560 1539 margin-right: 1rem; 1540 + 1561 1541 button { 1562 1542 padding-left: 0.5rem; 1563 1543 } 1544 + 1564 1545 @include breakpoint('medium') { 1565 1546 margin-top: 5px; 1566 1547 } 1567 1548 } 1568 1549 } 1550 + 1569 1551 ul { 1570 1552 padding-left: 0; 1571 1553 } ··· 1573 1555 @media only screen and (min-width: 801px) { 1574 1556 margin-top: 1rem; 1575 1557 } 1576 - 1577 - font-family: 'Filson Pro'; 1578 1558 } 1579 1559 1580 1560 .accordion-navigation { 1581 - border-bottom: 2px solid $input-field !important; 1582 1561 border-top: none; 1562 + padding: 0.5rem 0; 1563 + border-bottom: 2px solid $nav-hover-text; 1564 + 1583 1565 &.is-open { 1584 1566 border-bottom: 2px solid $headingColor !important; 1585 1567 } 1568 + 1586 1569 &:last-child { 1587 1570 border-radius: 0; 1588 1571 } 1572 + 1589 1573 .accordion-title { 1590 1574 color: $body-color; 1591 1575 font-size: 16px; 1592 - font-family: 'Filson Pro'; 1576 + font-family: 'Filson Pro', sans-serif; 1593 1577 padding: 0 0.5rem; 1594 1578 } 1579 + 1595 1580 .accordion-indicator { 1596 1581 margin-right: 0.5rem; 1597 1582 fill: $nav-hover-text; 1598 1583 } 1599 - padding: 0.5rem 0 0.5rem; 1600 - border-bottom: 2px solid $nav-hover-text; 1601 1584 } 1602 1585 1603 1586 .accordion-content { ··· 1620 1603 } 1621 1604 } 1622 1605 1623 - /************************ Listings********************/ 1606 + /************************ Listings *******************/ 1624 1607 1625 1608 .search-nav { 1626 1609 padding-bottom: 2rem; ··· 1629 1612 &.navBar--sub { 1630 1613 margin-bottom: 3rem; 1631 1614 } 1615 + 1632 1616 a { 1633 1617 &[aria-selected='true'] { 1634 1618 color: $headingColor; ··· 1664 1648 display: flex; 1665 1649 align-items: center; 1666 1650 justify-content: space-between; 1667 - &:before, 1668 - &:after { 1651 + 1652 + &::before, 1653 + &::after { 1669 1654 display: none; 1670 1655 } 1656 + 1671 1657 .form-label, 1672 1658 .form-select { 1673 1659 font-size: 1rem; 1674 1660 color: $input-field-text; 1661 + 1675 1662 @media only screen and (min-width: 801px) { 1676 1663 font-size: 14px; 1677 1664 } ··· 1680 1667 .form-label { 1681 1668 font-weight: 400; 1682 1669 } 1670 + 1683 1671 .form-select { 1684 1672 font-weight: 700; 1685 1673 } ··· 1694 1682 line-height: normal; 1695 1683 margin-right: -4px; 1696 1684 width: 75%; 1685 + 1697 1686 * { 1698 1687 color: #000; 1699 1688 } 1689 + 1700 1690 @include breakpoint('medium') { 1701 1691 width: auto; 1702 1692 } ··· 1712 1702 padding: 0.563rem 1.2rem; 1713 1703 background-color: $nav-hover-text; 1714 1704 color: $white-color; 1705 + 1715 1706 &:first-of-type { 1716 1707 text-decoration: none; 1717 1708 padding-right: 0; 1709 + 1718 1710 &::after { 1719 1711 content: ''; 1720 1712 width: 24px; 1721 1713 height: 24px; 1722 1714 position: relative; 1723 1715 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; 1716 + 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 1717 float: right; 1726 1718 background-repeat: no-repeat; 1727 1719 } 1720 + 1728 1721 .filters-toggle { 1729 1722 &::before { 1730 1723 font-weight: 700; 1731 1724 content: 'Show Filters'; 1732 1725 } 1733 1726 } 1727 + 1734 1728 &.is-open { 1735 1729 background-color: $body-color; 1730 + 1736 1731 &::after { 1737 1732 width: 34px; 1738 1733 transform: rotate(180deg); 1739 1734 } 1735 + 1740 1736 .filters-toggle { 1741 1737 &::before { 1742 1738 content: 'Close Filters'; ··· 1756 1752 } 1757 1753 } 1758 1754 1759 - /**********************Preview Modle**************/ 1755 + /********************* Preview Modal *************/ 1760 1756 1761 1757 #previewModal { 1762 - //max-width: 720px; 1763 1758 width: 100%; 1764 1759 border-radius: 20px; 1765 1760 ··· 1767 1762 width: 50%; 1768 1763 } 1769 1764 } 1765 + 1770 1766 .modal { 1771 1767 .productView { 1772 1768 width: 50%; 1773 1769 margin: auto; 1774 1770 text-align: center; 1771 + 1775 1772 .productView-details { 1776 1773 width: 100%; 1777 1774 padding-bottom: 2rem; ··· 1781 1778 text-align: left; 1782 1779 } 1783 1780 } 1781 + 1784 1782 .modal-header { 1785 1783 border-bottom: 1px solid $body-color; 1786 1784 width: 90%; 1787 1785 margin: auto; 1788 1786 padding-left: 0; 1787 + 1789 1788 .modal-header-title { 1790 1789 font-size: 18px; 1791 1790 font-weight: 700; ··· 1793 1792 text-align: left; 1794 1793 } 1795 1794 } 1795 + 1796 1796 .modal-body { 1797 1797 padding: 1rem; 1798 1798 } 1799 + 1799 1800 .previewCart { 1800 1801 margin: 0; 1801 1802 max-width: 100%; ··· 1805 1806 float: none; 1806 1807 min-height: auto; 1807 1808 } 1809 + 1808 1810 .productView-img-container { 1809 1811 margin: 0; 1810 1812 max-width: 100%; 1813 + 1811 1814 &::after { 1812 1815 padding-bottom: 0; 1813 1816 } ··· 1818 1821 height: 100px; 1819 1822 } 1820 1823 } 1824 + 1821 1825 .productView-title { 1822 1826 font-size: 16px; 1823 1827 line-height: 1.2rem; 1824 1828 color: $body-color; 1825 1829 margin: 0; 1826 - font-family: 'Filson Pro'; 1830 + font-family: 'Filson Pro', sans-serif; 1827 1831 } 1832 + 1828 1833 .productView-brand { 1829 1834 display: none; 1830 1835 } 1836 + 1831 1837 .productView-price { 1832 1838 font-size: 14px; 1833 1839 ··· 1836 1842 margin-bottom: 0; 1837 1843 } 1838 1844 } 1845 + 1839 1846 .previewCartCheckout { 1840 1847 background-color: transparent; 1841 1848 border: 1px solid $gold-color; ··· 1849 1856 .d-flex { 1850 1857 padding-bottom: 1rem; 1851 1858 } 1859 + 1852 1860 .button { 1853 1861 margin: 0 0.2rem; 1854 1862 padding-left: 1rem; 1855 1863 padding-right: 1rem; 1856 1864 } 1865 + 1857 1866 .button--blank { 1858 1867 background-color: transparent !important; 1859 1868 border: none !important; 1860 1869 color: $body-color; 1861 1870 } 1871 + 1862 1872 .previewCartCheckout-subtotal { 1863 - margin: 0 0 1rem 0; 1873 + margin: 0 0 1rem; 1874 + 1864 1875 .previewCartCheckout-price { 1865 1876 font-size: 18px; 1866 1877 } 1867 1878 } 1879 + 1868 1880 p { 1869 1881 margin-bottom: 1rem; 1870 1882 } 1883 + 1871 1884 .previewCartCheckout-continue-shopping { 1872 1885 margin: 0; 1886 + 1873 1887 a { 1874 1888 text-decoration: underline; 1875 1889 color: $body-color; ··· 1886 1900 height: 51.2px; 1887 1901 display: grid !important; 1888 1902 grid-template-columns: 1fr 2fr 1fr; 1903 + 1889 1904 input::-webkit-outer-spin-button, 1890 1905 input::-webkit-inner-spin-button { 1891 - -webkit-appearance: none !important; 1906 + appearance: none !important; 1892 1907 margin: 0 !important; 1893 1908 } 1909 + 1894 1910 .form-input { 1895 1911 width: 100%; 1896 1912 background-color: transparent; 1913 + 1897 1914 &[type='number'] { 1898 1915 width: 100%; 1899 - -webkit-appearance: none !important; 1900 - -moz-appearance: none !important; 1901 - -moz-appearance: textfield !important; 1902 1916 margin: 0; 1903 1917 appearance: none !important; 1904 1918 } 1905 1919 } 1920 + 1906 1921 .button { 1907 1922 border: 0; 1908 1923 padding: 0; ··· 1916 1931 } 1917 1932 } 1918 1933 1919 - /***********************Cart******************/ 1934 + /********************** Cart ******************/ 1920 1935 .page-type-cart { 1921 1936 .page-heading { 1922 1937 color: $body-color; 1923 1938 font-size: 40px; 1924 1939 } 1940 + 1925 1941 .cart-total-label, 1926 1942 .shipping-estimate-show, 1927 1943 .gift-certificate-add, ··· 1929 1945 .cart-item-brand { 1930 1946 color: $body-color; 1931 1947 } 1932 - //Date Picker 1948 + 1949 + // Date Picker 1933 1950 .cart-totals { 1934 1951 .cart-total { 1935 1952 &.datepicker { ··· 1941 1958 1942 1959 .login { 1943 1960 max-width: 100%; 1961 + 1944 1962 .new-customer { 1945 1963 .panel { 1946 1964 background-color: $light-BgColor; 1947 1965 border-radius: 8px; 1948 1966 } 1967 + 1949 1968 .panel-header, 1950 1969 .panel-body { 1951 1970 background-color: transparent; 1971 + 1952 1972 .panel-title { 1953 1973 font-weight: 700; 1954 1974 font-size: 32px; 1955 1975 line-height: 36px; 1956 1976 color: $body-color; 1957 1977 } 1978 + 1958 1979 .new-customer-fact-list { 1959 1980 margin-left: 0; 1960 1981 } 1961 1982 } 1962 1983 } 1984 + 1963 1985 .form-actions { 1964 1986 text-align: left; 1965 1987 vertical-align: center; 1988 + 1966 1989 a { 1967 1990 line-height: 48px; 1968 1991 margin: 0; 1969 1992 } 1993 + 1970 1994 .button--primary { 1971 1995 float: right; 1972 1996 } ··· 1975 1999 1976 2000 .page-type-forgotpassword { 1977 2001 text-align: center; 2002 + 1978 2003 .page-heading { 1979 2004 text-align: center; 1980 2005 } 1981 2006 } 1982 - /*****************Account Nav Bar ************/ 1983 - body { 1984 - color: $body-color; 1985 - } 2007 + 2008 + /**************** Account Nav Bar ************/ 2009 + 1986 2010 .navBar--sub { 1987 2011 margin-bottom: 2rem; 1988 2012 } 2013 + 1989 2014 .account-body { 1990 2015 .addressList { 1991 - display: flex; 1992 - align-items: stretch; 1993 2016 .address { 1994 2017 padding-bottom: 2rem; 1995 2018 } 2019 + 1996 2020 .panel-body { 1997 2021 background-color: #f3f2f2; 1998 2022 margin-bottom: 0; 2023 + 1999 2024 .address-title { 2000 2025 font-size: 24px; 2001 2026 color: $body-color; 2002 2027 } 2003 2028 } 2029 + 2004 2030 .panel--newAddress, 2005 2031 .panel-body { 2006 2032 height: 100%; 2007 2033 } 2034 + 2008 2035 .secondary { 2009 2036 background-color: $white-color; 2010 2037 } ··· 2019 2046 justify-content: space-between; 2020 2047 align-content: center; 2021 2048 z-index: 1; 2049 + 2022 2050 .badge-text { 2023 2051 height: fit-content; 2024 2052 border-radius: 8px; ··· 2029 2057 font-size: 10px; 2030 2058 text-transform: capitalize; 2031 2059 background-color: $text-color; 2060 + 2032 2061 &.bestseller { 2033 2062 background-color: #b07c83; 2034 2063 } 2064 + 2035 2065 &.new { 2036 2066 background-color: #63b1bc; 2037 2067 } ··· 2079 2109 2080 2110 /* Preloader & Error */ 2081 2111 .mapplic-element.mapplic-loading { 2082 - background: url(images/loader.gif) no-repeat center; 2112 + background: url('images/loader.gif') no-repeat center; 2083 2113 } 2114 + 2084 2115 .mapplic-element.mapplic-error { 2085 - background: url(images/error-icon.png) no-repeat center; 2116 + background: url('images/error-icon.png') no-repeat center; 2086 2117 } 2087 2118 2088 2119 /* Map container */ 2089 2120 .mapplic-container { 2090 - display: inline-block; 2091 2121 position: relative; 2092 2122 width: 70%; 2093 2123 height: 100%; 2124 + float: right; 2094 2125 } 2095 2126 2096 2127 .mapplic-map { ··· 2113 2144 position: absolute; 2114 2145 width: 100%; 2115 2146 height: 100%; 2116 - -webkit-user-select: none; 2117 - -moz-user-select: none; 2118 - -ms-user-select: none; 2119 2147 user-select: none; 2120 2148 } 2149 + 2121 2150 /* IE Fix END */ 2122 2151 2123 2152 .mapplic-map.mapplic-zoomable .mapplic-map-image { 2124 - cursor: url(images/openhand.cur), default; 2153 + cursor: url('images/openhand.cur'), default; 2125 2154 } 2126 2155 2127 2156 .mapplic-map.mapplic-zoomable.mapplic-dragging .mapplic-map-image { 2128 - cursor: url(images/closedhand.cur), move; 2157 + cursor: url('images/closedhand.cur'), move; 2129 2158 } 2130 2159 2131 2160 /* Pin types */ 2132 2161 .mapplic-pin { 2133 - background-image: url(images/pin.png); 2162 + background-image: url('images/pin.png'); 2134 2163 background-size: 18px 24px; 2135 2164 background-repeat: no-repeat; 2136 2165 background-position: center; ··· 2141 2170 margin-left: -9px; 2142 2171 position: absolute; 2143 2172 transform-origin: 50% 100%; 2144 - 2145 - -webkit-user-select: none; 2146 - -moz-user-select: none; 2147 - -ms-user-select: none; 2148 2173 user-select: none; 2149 2174 } 2150 2175 ··· 2170 2195 transform-origin: 50% 100%; 2171 2196 } 2172 2197 2173 - .mapplic-pin.pin-classic:before { 2198 + .mapplic-pin.pin-classic::before { 2174 2199 border-style: solid; 2175 - border-width: 9px 8px 0 8px; 2200 + border-width: 9px 8px 0; 2176 2201 border-color: inherit; 2177 2202 border-right-color: transparent; 2178 2203 border-bottom-color: transparent; ··· 2184 2209 left: 2px; 2185 2210 } 2186 2211 2187 - .mapplic-pin:before { 2212 + .mapplic-pin::before { 2188 2213 box-sizing: content-box !important; 2189 2214 } 2190 2215 ··· 2200 2225 transform-origin: 50% 50%; 2201 2226 } 2202 2227 2203 - .mapplic-pin.pin-marker:before { 2228 + .mapplic-pin.pin-marker::before { 2204 2229 border-color: inherit; 2205 2230 border-style: solid; 2206 2231 border-width: 6px; ··· 2228 2253 transform-origin: 50% 50%; 2229 2254 } 2230 2255 2231 - .mapplic-pin.pin-disk:before { 2256 + .mapplic-pin.pin-disk::before { 2232 2257 border-color: inherit; 2233 2258 border-style: solid; 2234 2259 border-width: 3px; ··· 2256 2281 transform-origin: 8px 20px; 2257 2282 } 2258 2283 2259 - .mapplic-pin.pin-ribbon:after { 2284 + .mapplic-pin.pin-ribbon::after { 2260 2285 border-style: solid; 2261 2286 border-width: 0 8px 4px 0; 2262 2287 border-color: transparent rgba(0, 0, 0, 0.5) transparent transparent; ··· 2264 2289 display: block; 2265 2290 position: absolute; 2266 2291 top: 16px; 2267 - left: 0px; 2292 + left: 0; 2268 2293 } 2269 2294 2270 - .mapplic-pin.pin-ribbon:before { 2295 + .mapplic-pin.pin-ribbon::before { 2271 2296 border-style: solid; 2272 2297 border-width: 0 8px 4px 0; 2273 2298 border-color: inherit; ··· 2278 2303 display: block; 2279 2304 position: absolute; 2280 2305 top: 16px; 2281 - left: 0px; 2306 + left: 0; 2282 2307 } 2283 2308 2284 2309 .mapplic-pin.pin-dot { ··· 2295 2320 transform-origin: -4px 8px; 2296 2321 } 2297 2322 2298 - .mapplic-pin.pin-dot:before { 2323 + .mapplic-pin.pin-dot::before { 2299 2324 border-color: inherit; 2300 2325 border-style: solid; 2301 2326 border-width: 3px; 2302 2327 border-radius: 12px; 2303 2328 content: ''; 2304 2329 display: block; 2305 - width: 0px; 2306 - height: 0px; 2330 + width: 0; 2331 + height: 0; 2307 2332 position: absolute; 2308 2333 top: 5px; 2309 2334 left: -7px; ··· 2324 2349 } 2325 2350 2326 2351 .mapplic-pin.orange { 2327 - background-image: url(images/pin-orange.png); 2352 + background-image: url('images/pin-orange.png'); 2328 2353 } 2354 + 2329 2355 .mapplic-pin.yellow { 2330 - background-image: url(images/pin-yellow.png); 2356 + background-image: url('images/pin-yellow.png'); 2331 2357 } 2358 + 2332 2359 .mapplic-pin.green { 2333 - background-image: url(images/pin-green.png); 2360 + background-image: url('images/pin-green.png'); 2334 2361 } 2362 + 2335 2363 .mapplic-pin.blue { 2336 - background-image: url(images/pin-blue.png); 2364 + background-image: url('images/pin-blue.png'); 2337 2365 } 2366 + 2338 2367 .mapplic-pin.purple { 2339 - background-image: url(images/pin-purple.png); 2368 + background-image: url('images/pin-purple.png'); 2340 2369 } 2341 2370 2342 2371 .mapplic-pin.circular { ··· 2413 2442 height: 40px; 2414 2443 } 2415 2444 2416 - .mapplic-pin.pin-pulse:before { 2445 + .mapplic-pin.pin-pulse::before { 2417 2446 content: ''; 2418 2447 border: 2px solid #888; 2419 2448 border-radius: 30px; ··· 2429 2458 box-sizing: content-box; 2430 2459 } 2431 2460 2432 - @-webkit-keyframes pulsate { 2461 + @keyframes pulsate { 2433 2462 0% { 2434 - -webkit-transform: scale(1, 1); 2463 + transform: scale(1, 1); 2435 2464 opacity: 0; 2436 2465 } 2466 + 2437 2467 25% { 2438 2468 opacity: 0.5; 2439 2469 } 2470 + 2440 2471 50% { 2441 - -webkit-transform: scale(1.6, 1.6); 2472 + transform: scale(1.6, 1.6); 2442 2473 opacity: 0; 2443 2474 } 2444 2475 } ··· 2453 2484 opacity: 0.5; 2454 2485 overflow: hidden; 2455 2486 transition: opacity 0.4s; 2456 - 2457 - -webkit-user-select: none; 2458 - -moz-user-select: none; 2459 - -ms-user-select: none; 2460 2487 user-select: none; 2461 2488 } 2462 2489 2463 2490 .mapplic-minimap-layer { 2464 2491 line-height: 0; 2465 2492 } 2493 + 2466 2494 .mapplic-minimap img { 2467 2495 width: 100%; 2468 2496 } ··· 2485 2513 2486 2514 .mapplic-minimap-background { 2487 2515 width: 140px !important; 2488 - -webkit-filter: blur(2px); 2516 + filter: blur(2px); 2489 2517 } 2490 2518 2491 2519 /* UI Buttons */ ··· 2574 2602 .mapplic-fullscreen .mapplic-container { 2575 2603 width: 80%; 2576 2604 } 2605 + 2577 2606 .mapplic-fullscreen .mapplic-sidebar { 2578 2607 width: 20%; 2579 2608 } ··· 2604 2633 font-size: 13px; 2605 2634 font-weight: 600; 2606 2635 outline: none; 2607 - -webkit-appearance: none; 2636 + appearance: none; 2608 2637 } 2609 2638 2610 2639 .mapplic-levels a { ··· 2651 2680 pointer-events: auto; 2652 2681 } 2653 2682 2654 - .mapplic-container { 2655 - float: right; 2656 - } 2657 - 2658 2683 /* Right sidebar */ 2659 2684 .mapplic-sidebar-right .mapplic-container { 2660 2685 float: left; 2661 2686 } 2687 + 2662 2688 .mapplic-sidebar-right .mapplic-sidebar { 2663 2689 float: right; 2664 2690 padding: 92px 12px 12px 0; ··· 2734 2760 .mapplic-sidebar-nosearch { 2735 2761 padding-top: 56px; 2736 2762 } 2763 + 2737 2764 .mapplic-sidebar-nosearch .mapplic-filter { 2738 2765 margin-top: -44px; 2739 2766 height: 44px; ··· 2792 2819 -webkit-overflow-scrolling: touch; 2793 2820 } 2794 2821 2795 - .mapplic-list-container:before { 2822 + .mapplic-list-container::before { 2796 2823 display: block; 2797 2824 content: ''; 2798 2825 background-color: #fff; ··· 2881 2908 } 2882 2909 2883 2910 .mapplic-thumbnail { 2884 - border-radius: 0px; 2911 + border-radius: 0; 2885 2912 box-shadow: none !important; 2886 2913 margin-right: 10px; 2887 2914 float: left; ··· 2933 2960 background-color 0.1s; 2934 2961 } 2935 2962 2936 - .mapplic-list-location > a:after { 2963 + .mapplic-list-location > a::after { 2937 2964 content: ''; 2938 2965 display: block; 2939 2966 clear: both; ··· 2964 2991 .mapplic-tooltip { 2965 2992 display: none; 2966 2993 position: absolute; 2967 - -webkit-transition: margin 0.1s; 2968 - -moz-transition: margin 0.1s; 2969 2994 transition: margin 0.1s; 2970 2995 transform-origin: 0 0; 2971 2996 padding-bottom: 30px; 2972 2997 pointer-events: none; 2973 2998 } 2974 2999 2975 - .mapplic-tooltip:after { 3000 + .mapplic-tooltip::after { 2976 3001 content: ''; 2977 - border-color: #fff transparent transparent transparent !important; 3002 + border-color: #fff transparent transparent !important; 2978 3003 border-style: solid; 2979 - border-width: 8px 7px 0 7px; 3004 + border-width: 8px 7px 0; 2980 3005 width: 0; 2981 3006 height: 0; 2982 3007 position: absolute; ··· 3080 3105 color: #fff !important; 3081 3106 font-size: 14px; 3082 3107 font-weight: 600; 3083 - display: inline-block; 3084 3108 float: right; 3085 3109 margin-top: 4px; 3086 3110 padding: 4px 8px; ··· 3111 3135 width: 8px; 3112 3136 height: 8px; 3113 3137 opacity: 0.5; 3114 - -webkit-transition: opacity 0.2s; 3115 - -moz-transition: opacity 0.2s; 3116 3138 transition: opacity 0.2s; 3117 3139 } 3118 3140 ··· 3137 3159 margin: 20px auto; 3138 3160 } 3139 3161 3140 - .mapplic-lightbox:after { 3162 + .mapplic-lightbox::after { 3141 3163 content: ''; 3142 3164 display: block; 3143 3165 clear: both; ··· 3150 3172 .mfp-bg { 3151 3173 z-index: 99981 !important; 3152 3174 } 3175 + 3153 3176 .mfp-wrap { 3154 3177 z-index: 99982 !important; 3155 3178 } 3179 + 3156 3180 .mfp-content { 3157 3181 z-index: 99983 !important; 3158 3182 } ··· 3160 3184 /* Lightbox animation */ 3161 3185 .mfp-fade.mfp-bg { 3162 3186 opacity: 0; 3163 - -webkit-transition: all 0.15s ease-out; 3164 - -moz-transition: all 0.15s ease-out; 3165 3187 transition: all 0.15s ease-out; 3166 3188 } 3167 3189 3168 3190 .mfp-fade.mfp-bg.mfp-ready { 3169 3191 opacity: 0.8; 3170 3192 } 3193 + 3171 3194 .mfp-fade.mfp-bg.mfp-removing { 3172 3195 opacity: 0; 3173 3196 } 3174 3197 3175 3198 .mfp-fade.mfp-wrap .mfp-content { 3176 3199 opacity: 0; 3177 - -webkit-transition: all 0.15s ease-out; 3178 - -moz-transition: all 0.15s ease-out; 3179 3200 transition: all 0.15s ease-out; 3180 3201 } 3181 3202 3182 3203 .mfp-fade.mfp-wrap.mfp-ready .mfp-content { 3183 3204 opacity: 1; 3184 3205 } 3206 + 3185 3207 .mfp-fade.mfp-wrap.mfp-removing .mfp-content { 3186 3208 opacity: 0; 3187 3209 } ··· 3209 3231 transition: 0.2s; 3210 3232 } 3211 3233 3212 - .mapplic-toggle:before { 3234 + .mapplic-toggle::before { 3213 3235 background-color: #fff; 3214 3236 border: 1px solid #e4e4e4; 3215 3237 border-radius: 50%; ··· 3226 3248 .mapplic-toggle > input { 3227 3249 display: none; 3228 3250 } 3251 + 3229 3252 .mapplic-toggle > input:checked + span { 3230 3253 transform: scale(0.7); 3231 3254 } ··· 3233 3256 .mapplic-list-category { 3234 3257 position: relative; 3235 3258 } 3259 + 3236 3260 .mapplic-list-category .mapplic-toggle { 3237 3261 position: absolute; 3238 3262 right: 20px; ··· 3258 3282 margin: 6px 0; 3259 3283 padding-left: 28px; 3260 3284 white-space: nowrap; 3261 - -webkit-user-select: none; 3262 - -moz-user-select: none; 3263 - -khtml-user-select: none; 3264 - -ms-user-select: none; 3285 + user-select: none; 3265 3286 } 3266 3287 3267 3288 .mapplic-legend-key { ··· 3288 3309 } 3289 3310 3290 3311 .mapplic-portrait .mapplic-sidebar { 3291 - padding: 92px 12px 12px 12px !important; 3312 + padding: 92px 12px 12px !important; 3292 3313 } 3293 3314 3294 3315 .mapplic-portrait .mapplic-tooltip { ··· 3312 3333 (min-resolution: 192dpi), 3313 3334 (min-resolution: 2dppx) { 3314 3335 .mapplic-pin { 3315 - background-image: url(images/pin@2x.png); 3336 + background-image: url('images/pin@2x.png'); 3316 3337 } 3338 + 3317 3339 .mapplic-pin.orange { 3318 - background-image: url(images/pin-orange@2x.png); 3340 + background-image: url('images/pin-orange@2x.png'); 3319 3341 } 3342 + 3320 3343 .mapplic-pin.yellow { 3321 - background-image: url(images/pin-yellow@2x.png); 3344 + background-image: url('images/pin-yellow@2x.png'); 3322 3345 } 3346 + 3323 3347 .mapplic-pin.green { 3324 - background-image: url(images/pin-green@2x.png); 3348 + background-image: url('images/pin-green@2x.png'); 3325 3349 } 3350 + 3326 3351 .mapplic-pin.blue { 3327 - background-image: url(images/pin-blue@2x.png); 3352 + background-image: url('images/pin-blue@2x.png'); 3328 3353 } 3354 + 3329 3355 .mapplic-pin.purple { 3330 - background-image: url(images/pin-purple@2x.png); 3356 + background-image: url('images/pin-purple@2x.png'); 3331 3357 } 3332 3358 } 3333 3359 ··· 3344 3370 .mapplic-clickable:not(g), 3345 3371 g.mapplic-clickable > * { 3346 3372 cursor: pointer; 3347 - -webkit-transition: opacity 0.2s; 3348 - -moz-transition: opacity 0.2s; 3349 3373 transition: opacity 0.2s; 3374 + opacity: 0.9; 3350 3375 } 3351 3376 3352 3377 .mapplic-map-image *[id^='nopointer'] { ··· 3372 3397 } 3373 3398 3374 3399 /* SKINS */ 3400 + 3375 3401 /* mapplic-booking */ 3376 3402 .mapplic-booking .mapplic-active, 3377 3403 .mapplic-booking .mapplic-active > * { ··· 3390 3416 background-color: #333; 3391 3417 } 3392 3418 3393 - .mapplic-dark .mapplic-tooltip:after { 3394 - border-color: #333 transparent transparent transparent !important; 3419 + .mapplic-dark .mapplic-tooltip::after { 3420 + border-color: #333 transparent transparent !important; 3395 3421 } 3396 3422 3397 3423 .mapplic-dark .mapplic-tooltip-title { ··· 3409 3435 } 3410 3436 3411 3437 /* INTERACTIVE ELEMENTS */ 3412 - /* clickable elements */ 3413 - .mapplic-clickable:not(g), 3414 - g.mapplic-clickable > * { 3415 - opacity: 0.9; 3416 - /*fill: #b7a6bd*/ 3417 - } 3418 3438 3419 3439 /* hovered elements */ 3420 3440 .mapplic-clickable:not(g):hover, ··· 3472 3492 .mapplic-image, 3473 3493 .mapplic-tooltip { 3474 3494 max-width: 300px !important; 3475 - } /* tooltip width */ 3476 - .mapplic-tooltip-content { 3477 - max-height: 160px; 3478 - } /* tooltip height*/ 3495 + } 3479 3496 3480 3497 /* example custom pin */ 3481 3498 .mapplic-pin.my-new-pin { 3482 3499 /* 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 */ 3500 + background-image: url('images/my-new-pin.png'); /* define the path to image file */ 3484 3501 background-size: 20px 30px; 3485 3502 width: 20px; 3486 3503 height: 30px; ··· 3488 3505 margin-top: -15px; /* defining the pin's origin */ 3489 3506 } 3490 3507 3491 - /****************Quick Add To Cart ***************/ 3508 + /*************** Quick Add To Cart ***************/ 3492 3509 3493 3510 .card { 3511 + position: relative; 3512 + 3494 3513 .card-button { 3495 3514 .form { 3496 3515 @media only screen and (max-width: 599px) { ··· 3498 3517 } 3499 3518 } 3500 3519 } 3501 - position: relative; 3520 + 3502 3521 .quick-cart { 3503 3522 padding: 15px; 3504 3523 cursor: pointer; 3505 - background: url(https://cdn11.bigcommerce.com/s-s1ehwzabjj/images/stencil/original/image-manager/pluse-icon.png) 3524 + background: url('https://cdn11.bigcommerce.com/s-s1ehwzabjj/images/stencil/original/image-manager/pluse-icon.png') 3506 3525 center right no-repeat; 3507 3526 padding-right: 30px; 3508 3527 font-weight: 700; 3509 3528 color: #232524; 3529 + 3510 3530 @media only screen and (max-width: 599px) { 3511 3531 display: block; 3512 3532 padding-left: 10px; ··· 3524 3544 width: 100%; 3525 3545 left: 0; 3526 3546 bottom: 0; 3547 + 3527 3548 @media only screen and (min-width: 600px) { 3528 3549 padding: 15px; 3529 3550 } 3551 + 3530 3552 .add-quantity { 3531 3553 display: flex; 3532 3554 flex-wrap: wrap; 3533 3555 margin-top: 10px; 3556 + 3534 3557 span { 3535 3558 width: 25%; 3536 3559 display: block; 3537 3560 padding: 7px 0; 3538 3561 text-align: center; 3539 3562 cursor: pointer; 3540 - 3541 3563 border-radius: 5px; 3542 3564 font-size: 13px; 3565 + 3543 3566 @media only screen and (min-width: 600px) { 3544 3567 padding: 10px 0; 3545 3568 width: 20%; 3546 3569 font-size: 16px; 3547 3570 } 3571 + 3548 3572 &:hover, 3549 3573 &.active { 3550 3574 background-color: #546153; ··· 3552 3576 } 3553 3577 } 3554 3578 } 3579 + 3555 3580 .add-to-cart-wrapper { 3556 3581 @media only screen and (min-width: 600px) { 3557 3582 display: flex; 3558 3583 } 3584 + 3559 3585 .form-field--increments { 3560 3586 @media only screen and (min-width: 600px) { 3561 3587 margin-right: 10px; 3562 3588 } 3563 3589 } 3564 3590 } 3591 + 3565 3592 .button--primary { 3566 3593 padding-left: 0; 3567 3594 padding-right: 0; 3568 3595 min-width: 70px; 3569 3596 margin: 0 !important; 3570 3597 } 3598 + 3571 3599 .form-increment { 3572 3600 display: block !important; 3573 3601 text-align: left; 3574 3602 margin: 0; 3575 3603 background-color: #fff; 3576 3604 width: auto; 3605 + 3577 3606 @media only screen and (max-width: 599px) { 3578 3607 height: auto; 3579 3608 } 3580 - .form-input { 3581 - } 3609 + 3582 3610 .form-input--incrementTotal { 3583 3611 text-align: left; 3584 3612 padding: 5px 15px; 3585 3613 margin-right: 0; 3586 3614 width: 100%; 3615 + 3587 3616 @media only screen and (max-width: 599px) { 3588 3617 font-weight: 400; 3589 3618 font-size: 14px; ··· 3593 3622 } 3594 3623 } 3595 3624 } 3625 + 3596 3626 .add-to-cart-buttons { 3597 3627 .form-action { 3598 3628 .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;
+21 -40
assets/scss/custom/components/_cards.scss
··· 1 1 .card { 2 - border: 1px solid $white; 3 - min-width: 205px !important; 2 + min-width: 205px; 4 3 overflow: hidden; 5 4 padding: 0.5rem; 6 5 border-radius: 10px; ··· 11 10 } 12 11 13 12 &:hover { 14 - border: 1px solid $gold-color; 13 + border: 1px solid $color-gold; 15 14 box-shadow: 16 15 0 2px 2px 0 rgba(0, 0, 0, 0.1), 17 16 0 3px 10px 0 rgba(0, 0, 0, 0.05); 18 17 19 18 .card-button { 20 19 .button--secondary { 21 - background-color: $secondary-color !important; 20 + background-color: $color-gold-light; 22 21 } 23 22 24 23 .add-to-cart { 25 - background-color: $nav-hover-text !important; 26 - color: $white-color !important; 24 + background-color: $color-brand-primary; 25 + color: $color-white; 27 26 28 27 svg { 29 28 path { 30 - fill: white !important; 29 + fill: $color-white; 31 30 } 32 31 } 33 32 } ··· 57 56 grid-template-rows: auto 85px auto; 58 57 59 58 .card-text { 60 - color: $text-color; 59 + color: $color-brand-dark; 61 60 font-weight: 700; 62 61 63 62 span { 64 - color: $body-color; 63 + color: $color-text; 65 64 } 66 65 } 67 66 ··· 78 77 margin-bottom: 0; 79 78 80 79 a { 81 - color: $text-color; 80 + color: $color-brand-dark; 82 81 } 83 82 } 84 83 ··· 111 110 .card-figcaption-button { 112 111 margin-top: 1rem; 113 112 padding: 1rem 2.2rem 1rem 0.7rem; 114 - color: $white-color; 115 - background-color: $nav-hover-text; 113 + color: $color-white; 114 + background-color: $color-brand-primary; 116 115 117 116 @include breakpoint('medium') { 118 117 margin-top: 0; 119 118 background-color: transparent; 120 119 transition: all 0.15s ease; 121 - color: $body-color; 120 + color: $color-text; 122 121 123 122 &:hover { 124 - background-color: $nav-hover-text; 125 - color: $white-color; 123 + background-color: $color-brand-primary; 124 + color: $color-white; 126 125 } 127 126 } 128 127 } ··· 135 134 .button--secondary { 136 135 background-color: transparent; 137 136 transition: all 0.15s ease; 138 - color: $body-color; 137 + color: $color-text; 139 138 height: 75px; 140 139 } 141 140 ··· 149 148 margin-top: 1rem; 150 149 margin-bottom: 0; 151 150 padding: 1rem 1.5rem; 152 - background-color: $nav-hover-text; 153 - color: $white-color; 151 + background-color: $color-brand-primary; 152 + color: $color-white; 154 153 155 154 svg { 156 155 path { 157 - fill: white; 156 + fill: $color-white; 158 157 } 159 158 } 160 159 161 160 @include breakpoint('medium') { 162 161 margin-top: 0; 163 162 background-color: transparent; 164 - color: $body-color; 163 + color: $color-text; 165 164 166 165 svg { 167 166 path { 168 - fill: #bd9b60; 167 + fill: $color-gold; 169 168 } 170 169 } 171 170 } ··· 183 182 184 183 h2 { 185 184 font-family: 'Filson Pro', sans-serif; 186 - color: $headingColor; 185 + color: $color-brand-primary; 187 186 font-weight: 700; 188 187 font-size: 28px; 189 188 190 189 @include breakpoint('medium') { 191 190 font-size: 40px; 192 191 } 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 192 } 212 193 }
+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
+1 -1
config.json
··· 1 1 { 2 - "name": "diet-builder remove data preview", 2 + "name": "performance 2", 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