The repo for Purrform's main BigCommerce store.
Refactor SCSS styles and improve variable usage across components (#51)
authored by
Rogerio Romao
and committed by
GitHub
d1ed902b
711ccb33
+844
-941
+5
-1
Gruntfile.js
+5
-1
Gruntfile.js
···
1
-
module.exports = function (grunt) {
1
+
/**
2
+
* This is the Grunt configuration file for the project. It defines tasks for linting JavaScript and CSS files, as well as generating SVG sprites. The default task runs ESLint and SVG store tasks, it combines individual SVG files into a single SVG sprite sheet. Webpack doesn't do this natively, so Grunt handles it. Grunt is typically run as a pre-build step or during development when you need to regenerate the SVG sprite. The Stencil CLI internally invokes it at certain points, and it may also be wired into the watch process.
3
+
*/
4
+
5
+
module.exports = function gruntfile(grunt) {
2
6
require('time-grunt')(grunt);
3
7
require('load-grunt-config')(grunt);
4
8
-15
assets/js/theme/custom/calculatorDropdown.js
-15
assets/js/theme/custom/calculatorDropdown.js
···
1
-
export default function () {
2
-
$(() => {
3
-
const togglerActive = document.getElementById('toggler-active');
4
-
if (togglerActive) {
5
-
togglerActive.addEventListener('click', () => {
6
-
document
7
-
.getElementById('toggler-dropdown')
8
-
.classList.toggle('active');
9
-
document
10
-
.getElementById('toggler-dropdown-chevron')
11
-
.classList.toggle('open');
12
-
});
13
-
}
14
-
});
15
-
}
assets/js/theme/custom/common.js
assets/js/theme/custom/common.js
This is a binary file and will not be displayed.
+101
-79
assets/js/theme/custom/descriptionTabs.js
+101
-79
assets/js/theme/custom/descriptionTabs.js
···
1
-
import { forEach } from "lodash";
2
-
3
1
export default function () {
4
-
jQuery(document).ready(function () {
5
-
const descriptionOld = document.getElementsByClassName("description-v1");
6
-
if ($("#_product-description").length > 0) {
7
-
//If text is detected within the id _product-description element
8
-
if (
9
-
~document
10
-
.getElementById("_product-description")
11
-
.innerHTML.toString()
12
-
.indexOf("<!-- pagebreak -->")
13
-
) {
14
-
const breaks = $("#_product-description")
15
-
.html()
16
-
.trim()
17
-
.split("<!-- pagebreak -->");
18
-
console.log("description-v2");
19
-
document.getElementById("tab-description").innerHTML = breaks[0];
20
-
document.getElementById("tab-composition").innerHTML = breaks[1];
21
-
if (document.getElementById("tab-instructions")) {
22
-
document.getElementById("tab-instructions").innerHTML = breaks[1];
23
-
}
24
-
if (document.getElementById("tab-supplements-composition")) {
25
-
document.getElementById("tab-supplements-composition").innerHTML =
26
-
breaks[1];
27
-
}
28
-
document.getElementById("tab-constituents").innerHTML = breaks[2];
29
-
if (document.getElementById("tab-health-safety")) {
30
-
document.getElementById("tab-health-safety").innerHTML = breaks[2];
31
-
}
32
-
if (document.getElementById("tab-supplements-constituents")) {
33
-
document.getElementById("tab-supplements-constituents").innerHTML =
34
-
breaks[2];
35
-
}
36
-
if (document.getElementById("tab-supplements-instructions")) {
37
-
document.getElementById("tab-supplements-instructions").innerHTML =
38
-
breaks[3];
39
-
}
40
-
/*Mobile tabs content allocation*/
41
-
document.getElementById("tab-mobile-description").innerHTML = breaks[0];
42
-
document.getElementById("tab-mobile-composition").innerHTML = breaks[1];
43
-
if (document.getElementById("tab-mobile-instructions")) {
44
-
document.getElementById("tab-mobile-instructions").innerHTML =
45
-
breaks[1];
46
-
}
47
-
if (document.getElementById("tab-mobile-supplements-composition")) {
48
-
document.getElementById(
49
-
"tab-mobile-supplements-composition"
50
-
).innerHTML = breaks[1];
51
-
}
52
-
if (document.getElementById("tab-mobile-constituents")) {
53
-
document.getElementById("tab-mobile-constituents").innerHTML =
54
-
breaks[2];
55
-
}
56
-
if (document.getElementById("tab-mobile-health-safety")) {
57
-
document.getElementById("tab-mobile-health-safety").innerHTML =
58
-
breaks[2];
59
-
}
60
-
if (document.getElementById("tab-mobile-supplements-constituents")) {
61
-
document.getElementById(
62
-
"tab-mobile-supplements-constituents"
63
-
).innerHTML = breaks[2];
64
-
}
65
-
if (document.getElementById("tab-mobile-supplements-instructions")) {
66
-
document.getElementById(
67
-
"tab-mobile-supplements-instructions"
68
-
).innerHTML = breaks[3];
69
-
}
70
-
} else {
71
-
console.log("description-v1");
72
-
/*If no pagebreak is detected, the description-v1 elements are made visible and the old system is used to display description tab content.*/
73
-
for (var i = 0; i < descriptionOld.length; i++) {
74
-
// descriptionOld[i].style.display = "block";
75
-
console.log("test")
2
+
$(() => {
3
+
const descriptionOld =
4
+
document.getElementsByClassName('description-v1');
5
+
if ($('#_product-description').length > 0) {
6
+
// If text is detected within the id _product-description element
7
+
if (
8
+
document
9
+
.getElementById('_product-description')
10
+
.innerHTML.toString()
11
+
.indexOf('<!-- pagebreak -->') !== -1
12
+
) {
13
+
const breaks = $('#_product-description')
14
+
.html()
15
+
.trim()
16
+
.split('<!-- pagebreak -->');
17
+
console.log('description-v2');
18
+
document.getElementById('tab-description').innerHTML =
19
+
breaks[0];
20
+
document.getElementById('tab-composition').innerHTML =
21
+
breaks[1];
22
+
if (document.getElementById('tab-instructions')) {
23
+
document.getElementById('tab-instructions').innerHTML =
24
+
breaks[1];
25
+
}
26
+
if (document.getElementById('tab-supplements-composition')) {
27
+
document.getElementById(
28
+
'tab-supplements-composition',
29
+
).innerHTML = breaks[1];
30
+
}
31
+
document.getElementById('tab-constituents').innerHTML =
32
+
breaks[2];
33
+
if (document.getElementById('tab-health-safety')) {
34
+
document.getElementById('tab-health-safety').innerHTML =
35
+
breaks[2];
36
+
}
37
+
if (document.getElementById('tab-supplements-constituents')) {
38
+
document.getElementById(
39
+
'tab-supplements-constituents',
40
+
).innerHTML = breaks[2];
41
+
}
42
+
if (document.getElementById('tab-supplements-instructions')) {
43
+
document.getElementById(
44
+
'tab-supplements-instructions',
45
+
).innerHTML = breaks[3];
46
+
}
47
+
/* Mobile tabs content allocation */
48
+
document.getElementById('tab-mobile-description').innerHTML =
49
+
breaks[0];
50
+
document.getElementById('tab-mobile-composition').innerHTML =
51
+
breaks[1];
52
+
if (document.getElementById('tab-mobile-instructions')) {
53
+
document.getElementById(
54
+
'tab-mobile-instructions',
55
+
).innerHTML = breaks[1];
56
+
}
57
+
if (
58
+
document.getElementById(
59
+
'tab-mobile-supplements-composition',
60
+
)
61
+
) {
62
+
document.getElementById(
63
+
'tab-mobile-supplements-composition',
64
+
).innerHTML = breaks[1];
65
+
}
66
+
if (document.getElementById('tab-mobile-constituents')) {
67
+
document.getElementById(
68
+
'tab-mobile-constituents',
69
+
).innerHTML = breaks[2];
70
+
}
71
+
if (document.getElementById('tab-mobile-health-safety')) {
72
+
document.getElementById(
73
+
'tab-mobile-health-safety',
74
+
).innerHTML = breaks[2];
75
+
}
76
+
if (
77
+
document.getElementById(
78
+
'tab-mobile-supplements-constituents',
79
+
)
80
+
) {
81
+
document.getElementById(
82
+
'tab-mobile-supplements-constituents',
83
+
).innerHTML = breaks[2];
84
+
}
85
+
if (
86
+
document.getElementById(
87
+
'tab-mobile-supplements-instructions',
88
+
)
89
+
) {
90
+
document.getElementById(
91
+
'tab-mobile-supplements-instructions',
92
+
).innerHTML = breaks[3];
93
+
}
94
+
} else {
95
+
console.log('description-v1');
96
+
/* If no pagebreak is detected, the description-v1 elements are made visible and the old system is used to display description tab content. */
97
+
for (let i = 0; i < descriptionOld.length; i++) {
98
+
// descriptionOld[i].style.display = "block";
99
+
console.log('test');
100
+
}
101
+
}
76
102
}
77
-
}
78
-
79
-
forEach
80
-
}
81
-
});
103
+
});
82
104
}
+1
-3
assets/js/theme/global.js
+1
-3
assets/js/theme/global.js
···
3
3
4
4
import carousel from './common/carousel';
5
5
import './common/select-option-plugin';
6
-
import calculatorDropdown from './custom/calculatorDropdown';
7
6
import descriptionTabs from './custom/descriptionTabs';
8
7
import cartPreview from './global/cart-preview';
9
8
import privacyCookieNotification from './global/cookieNotification';
···
31
30
privacyCookieNotification();
32
31
svgInjector();
33
32
descriptionTabs();
34
-
calculatorDropdown();
35
33
36
34
$(() => {
37
35
function handleImageVisibility() {
···
96
94
// Find the related input with class "form-input--incrementTotal"
97
95
const incrementTotalInput = card.find(
98
96
// eslint-disable-next-line comma-dangle
99
-
'.form-input--incrementTotal'
97
+
'.form-input--incrementTotal',
100
98
);
101
99
102
100
// Update the value of the input with the HTML content of the span
+17
-93
assets/js/theme/product.js
+17
-93
assets/js/theme/product.js
···
1
1
/*
2
2
Import all product specific js
3
3
*/
4
-
import PageManager from './page-manager';
5
-
import Review from './product/reviews';
6
4
import collapsibleFactory from './common/collapsible';
7
5
import ProductDetails from './common/product-details';
8
-
import videoGallery from './product/video-gallery';
9
6
import { classifyForm } from './common/utils/form-utils';
10
7
import modalFactory from './global/modal';
8
+
import PageManager from './page-manager';
9
+
import Review from './product/reviews';
10
+
import videoGallery from './product/video-gallery';
11
11
12
12
export default class Product extends PageManager {
13
13
constructor(context) {
···
21
21
onReady() {
22
22
// Listen for foundation modal close events to sanitize URL after review.
23
23
$(document).on('close.fndtn.reveal', () => {
24
-
if (this.url.indexOf('#write_review') !== -1 && typeof window.history.replaceState === 'function') {
25
-
window.history.replaceState(null, document.title, window.location.pathname);
24
+
if (
25
+
this.url.indexOf('#write_review') !== -1 &&
26
+
typeof window.history.replaceState === 'function'
27
+
) {
28
+
window.history.replaceState(
29
+
null,
30
+
document.title,
31
+
window.location.pathname,
32
+
);
26
33
}
27
34
});
28
35
···
31
38
// Init collapsible
32
39
collapsibleFactory();
33
40
34
-
this.productDetails = new ProductDetails($('.productView'), this.context, window.BCData.product_attributes);
41
+
this.productDetails = new ProductDetails(
42
+
$('.productView'),
43
+
this.context,
44
+
window.BCData.product_attributes,
45
+
);
35
46
this.productDetails.setProductVariant();
36
47
37
48
videoGallery();
···
59
70
});
60
71
61
72
this.productReviewHandler();
62
-
63
-
$(document).ready(function() {
64
-
var content = $('.product-description').html();
65
-
66
-
var sections = content.split('<p><!-- pagebreak --></p>');
67
-
var accordionContainer = $('#accordion-container');
68
-
var compositionContent = '';
69
-
var analyticalContent = '';
70
-
var descriptionContent = '';
71
-
72
-
$.each(sections, function(index, section) {
73
-
var strongText = $(section).find('strong').first().text();
74
-
75
-
if (strongText.indexOf('COMPOSITION') !== -1) {
76
-
compositionContent = section.split('<strong>COMPOSITION:</strong>')[1];
77
-
} else if (section.indexOf('ANALYTICAL CONSTITUENTS') !== -1) {
78
-
analyticalContent = section.split('<strong>ANALYTICAL CONSTITUENTS:</strong>')[1];
79
-
} else {
80
-
descriptionContent += '<p>' + $(section).html() + '</p>';
81
-
}
82
-
});
83
-
84
-
var accordionSection = `
85
-
<ul class="descriptiontabs">
86
-
<li class="active" rel="descriptionContent"><span>Description</span></li>
87
-
<li rel="compositionContent"><span>Composition</span></li>
88
-
<li rel="analyticalContent"><span>Analytical Constituents</span></li>
89
-
</ul>
90
-
91
-
<div class="tab_container">
92
-
<div id="descriptionContent" class="tab_content">
93
-
<h2 class="tab_drawer_heading">Description</h2>
94
-
${descriptionContent}
95
-
</div>
96
-
97
-
<div id="compositionContent" class="tab_content">
98
-
<h2 class="tab_drawer_heading">COMPOSITION</h2>
99
-
<p>${compositionContent}</p>
100
-
</div>
101
-
102
-
<div id="analyticalContent" class="tab_content">
103
-
<h2 class="tab_drawer_heading">Analytical Constituents</h2>
104
-
${analyticalContent}
105
-
</div>
106
-
</div>
107
-
`;
108
-
109
-
accordionContainer.append(accordionSection);
110
-
111
-
$('.descriptiontabs li').click(function() {
112
-
var tabId = $(this).attr('rel');
113
-
114
-
$('.descriptiontabs li').removeClass('active');
115
-
$(this).addClass('active');
116
-
117
-
$('.tab_content').hide();
118
-
$('#' + tabId).show();
119
-
});
120
-
121
-
$('.tab_drawer_heading').click(function() {
122
-
var tabId = $(this).attr('rel');
123
-
124
-
$('.tab_drawer_heading').removeClass('d_active');
125
-
$(this).addClass('d_active');
126
-
127
-
$('.tab_content').hide();
128
-
$('#' + tabId).show();
129
-
});
130
-
131
-
// Show default tab
132
-
$('.descriptiontabs li:first').addClass('active');
133
-
$('.tab_content:first').show();
134
-
$('.tab_drawer_heading:first').addClass('d_active');
135
-
136
-
// Remove original content
137
-
$('.productView-description .product-description').remove();
138
-
$('.productView-description .productView-title').remove();
139
-
});
140
-
141
-
// FAQ accordion
142
-
$(document).ready(function() {
143
-
$(".heading").click(function() {
144
-
$(this).next(".contents").slideToggle();
145
-
$(this).toggleClass("active");
146
-
});
147
-
});
148
-
149
73
}
150
74
151
75
ariaDescribeReviewInputs($form) {
+3
-3
assets/scss/common/_focus-tooltip.scss
+3
-3
assets/scss/common/_focus-tooltip.scss
···
1
-
@mixin addFocusTooltip ($attr: title) {
1
+
@mixin addFocusTooltip($attr: title) {
2
2
&::before {
3
-
border-color: transparent transparent $focusTooltip-backgroundColor transparent;
3
+
border-color: transparent transparent $focusTooltip-backgroundColor;
4
4
border-style: solid;
5
5
border-width: remCalc(10px);
6
-
content: " ";
6
+
content: ' ';
7
7
position: absolute;
8
8
right: 0;
9
9
top: 50%;
+15
-19
assets/scss/components/citadel/cards/_cards.scss
+15
-19
assets/scss/components/citadel/cards/_cards.scss
···
1
1
// =============================================================================
2
2
// CARDS (CSS)
3
3
// =============================================================================
4
-
//
5
4
// 1. Allow users to click the anchor tag on the image in the figcaption empty
6
5
// space. This provides a much larger and simpler hit state for navigating
7
6
// to the product details page. (Does not work in IE10 or earlier).
8
7
// 2. Using translate3d to counter a chrome specific bug: When using a masonry
9
8
// styled layout via CSS column-count etc, transforms applied to descendants
10
9
// are made invisible, except for 3d transforms...
11
-
//
12
10
// -----------------------------------------------------------------------------
13
11
14
12
.card {
···
44
42
}
45
43
46
44
.card-img-container {
45
+
@include lazy-loaded-padding('productgallery_size');
47
46
48
-
@include lazy-loaded-padding("productgallery_size");
49
-
max-width: get-width(stencilString("productgallery_size"));
47
+
max-width: get-width(stencilString('productgallery_size'));
50
48
}
51
49
52
50
.card-figcaption {
···
54
52
margin: $card-figcaption-margin;
55
53
pointer-events: none; // 1
56
54
57
-
@include breakpoint("medium") {
55
+
@include breakpoint('medium') {
58
56
display: block;
59
57
}
60
58
}
···
67
65
68
66
.card-image {
69
67
@include lazy-loaded-img;
68
+
70
69
border: 0;
70
+
71
71
/* Object-fit polyfill */
72
-
font-family: "object-fit: contain;";
73
72
max-height: 100%;
74
73
object-fit: contain;
75
74
width: 100%;
···
125
124
.card-body {
126
125
text-align: center;
127
126
128
-
@include breakpoint("small") {
127
+
@include breakpoint('small') {
129
128
text-align: left;
130
129
}
131
130
}
132
131
133
-
134
-
//
135
132
// Alternate card
136
-
//
137
133
// Purpose: Used to give the card alternative styling
138
134
// -----------------------------------------------------------------------------
139
135
140
136
.card--alternate {
141
-
border: 3px solid stencilColor("card--alternate-borderColor");
137
+
border: 3px solid stencilColor('card--alternate-borderColor');
142
138
transition: all 0.15s ease;
143
139
144
140
.card-body {
145
-
background-color: stencilColor("card--alternate-backgroundColor");
146
-
padding: spacing("half");
141
+
background-color: stencilColor('card--alternate-backgroundColor');
142
+
padding: spacing('half');
147
143
transition: all 0.15s ease;
148
144
149
-
@include breakpoint("small") {
150
-
padding: spacing("single");
145
+
@include breakpoint('small') {
146
+
padding: spacing('single');
151
147
}
152
148
}
153
149
154
150
&:hover {
155
-
border-color: stencilColor("color-primary");
151
+
border-color: stencilColor('color-primary');
156
152
157
153
.card-body {
158
-
background-color: stencilColor("color-primary");
154
+
background-color: stencilColor('color-primary');
159
155
160
156
.card-text {
161
-
color: stencilColor("card--alternate-color--hover");
157
+
color: stencilColor('card--alternate-color--hover');
162
158
}
163
159
}
164
160
165
161
.card-title > a {
166
-
color: stencilColor("card--alternate-color--hover");
162
+
color: stencilColor('card--alternate-color--hover');
167
163
}
168
164
}
169
165
}
+62
-65
assets/scss/components/citadel/forms/_forms.scss
+62
-65
assets/scss/components/citadel/forms/_forms.scss
···
1
+
/* stylelint-disable selector-no-vendor-prefix -- vendor stuff, dont want to mess wit it */
1
2
// =============================================================================
2
3
// FORMS (CSS)
3
4
// =============================================================================
4
-
5
5
6
6
// Form variants
7
7
// -----------------------------------------------------------------------------
8
8
9
9
.form--hiddenLabels {
10
10
.form-label {
11
-
@include u-hidden("visually");
11
+
@include u-hidden('visually');
12
12
}
13
13
}
14
14
15
-
16
15
// Citadel inline messages
17
16
// -----------------------------------------------------------------------------
18
17
19
18
.form-inlineMessage {
20
19
display: block;
21
20
}
22
-
23
21
24
22
// Citadel field states
25
23
// -----------------------------------------------------------------------------
···
33
31
&::before {
34
32
background: $form-error-icon no-repeat;
35
33
background-size: $form-inlineMessage-backgroundSize;
36
-
content: "";
34
+
content: '';
37
35
display: inline-block;
38
36
height: $form-error-icon-height;
39
37
left: $form-error-icon-left;
···
46
44
}
47
45
48
46
.form-field--success {
49
-
.form-input[type="text"] {
47
+
.form-input[type='text'] {
50
48
padding-right: $form-success-input-paddingRight;
51
49
background: {
52
50
image: $form-success-icon;
···
55
53
}
56
54
}
57
55
58
-
.form-input[name="credit_card_number"] {
56
+
.form-input[name='credit_card_number'] {
59
57
background-position: right $form-success-icon-check-right center;
60
58
}
61
59
62
-
.form-input[name="cvv"] {
60
+
.form-input[name='cvv'] {
63
61
background-position: right $form-success-icon-check-right center;
64
62
}
65
63
}
66
-
67
64
68
65
// Citadel checkbox/radio positioning
69
66
// -----------------------------------------------------------------------------
···
102
99
103
100
.form-actions {
104
101
@include grid-row();
102
+
105
103
display: block;
106
104
text-align: center;
107
105
108
-
@include breakpoint("small") {
109
-
margin-top: spacing("single");
106
+
@include breakpoint('small') {
107
+
margin-top: spacing('single');
110
108
}
111
109
112
110
.button,
···
115
113
vertical-align: top;
116
114
width: 100%;
117
115
118
-
@include breakpoint("small") {
116
+
@include breakpoint('small') {
119
117
margin-bottom: 0;
120
118
width: auto;
121
119
}
···
123
121
+ .button,
124
122
+ input,
125
123
+ a {
126
-
margin-top: spacing("half");
124
+
margin-top: spacing('half');
127
125
128
-
@include breakpoint("small") {
129
-
margin: 0 0 0 spacing("half");
126
+
@include breakpoint('small') {
127
+
margin: 0 0 0 spacing('half');
130
128
}
131
129
}
132
130
}
···
134
132
135
133
// Stencil form additions
136
134
// -----------------------------------------------------------------------------
137
-
//
138
135
// 1. Order has been placed here so that if a form error is shown, it will
139
136
// appear before the button.
140
-
//
141
137
// -----------------------------------------------------------------------------
142
138
@mixin placeholder {
143
-
&::-webkit-input-placeholder {@content; }
144
-
&::-moz-placeholder {@content; }
145
-
&:-ms-input-placeholder {@content; }
139
+
&::-webkit-input-placeholder {
140
+
@content;
141
+
}
142
+
143
+
&::-moz-placeholder {
144
+
@content;
145
+
}
146
+
147
+
&:-ms-input-placeholder {
148
+
@content;
149
+
}
146
150
}
147
151
148
152
.form-label--alternate {
149
-
font-family: fontFamily("headingSans");
150
-
font-size: fontSize("smallest");
151
-
margin-bottom: spacing("half");
153
+
font-family: fontFamily('headingSans');
154
+
font-size: fontSize('smallest');
155
+
margin-bottom: spacing('half');
152
156
}
153
157
154
158
.form-select--date {
155
159
width: initial;
156
160
157
161
+ .form-select--date {
158
-
margin-left: spacing("quarter");
162
+
margin-left: spacing('quarter');
159
163
}
160
164
}
161
165
162
166
.form-select--small,
163
167
.form-select--date {
164
-
background-position: right spacing("third") top spacing("third");
168
+
background-position: right spacing('third') top spacing('third');
165
169
background-size: remCalc(18px);
166
170
font-size: $input-small-fontSize;
167
171
height: $input-small-height;
···
177
181
}
178
182
179
183
.form-file {
180
-
margin-bottom: spacing("third");
184
+
margin-bottom: spacing('third');
181
185
}
182
186
183
187
.form-fileDescription {
184
-
color: color("greys", "light");
185
-
font-size: fontSize("smallest");
188
+
color: color('greys', 'light');
189
+
font-size: fontSize('smallest');
186
190
}
187
191
188
192
.form-field-group {
189
193
border: $input-border-width $input-border-style $input-border-color;
190
194
border-radius: $input-border-radius;
191
-
padding: spacing("single");
195
+
padding: spacing('single');
192
196
}
193
197
194
198
// This component should live inside a .form-row
195
199
.form-column {
196
200
@include grid-column(12);
197
201
198
-
@include breakpoint("small") {
202
+
@include breakpoint('small') {
199
203
@include grid-column(6);
200
204
}
201
205
}
···
212
216
}
213
217
214
218
.form-input {
215
-
@include breakpoint("large") {
219
+
@include breakpoint('large') {
216
220
width: auto;
217
221
}
218
222
···
222
226
}
223
227
224
228
.button {
225
-
@include breakpoint("large") {
229
+
@include breakpoint('large') {
226
230
width: auto;
227
231
}
228
232
}
229
233
230
234
.form-inlineMessage {
231
-
margin-bottom: spacing("quarter");
235
+
margin-bottom: spacing('quarter');
232
236
233
-
@include breakpoint("large") {
237
+
@include breakpoint('large') {
234
238
margin-bottom: 0;
235
239
}
236
240
}
···
246
250
}
247
251
248
252
.form-prefixPostfix-button--postfix {
249
-
250
-
@include breakpoint("large") {
251
-
margin: 1em 0 spacing("half");
253
+
@include breakpoint('large') {
254
+
margin: 1em 0 spacing('half');
252
255
}
253
256
}
254
-
255
257
}
256
258
257
259
.form-prefixPostfix-button--postfix {
258
-
margin: spacing("half") 0 0;
260
+
margin: spacing('half') 0 0;
259
261
order: 1; // 1
260
262
261
-
@include breakpoint("large") {
262
-
margin: 0 0 0 spacing("half");
263
+
@include breakpoint('large') {
264
+
margin: 0 0 0 spacing('half');
263
265
order: 0; // 1
264
266
}
265
267
}
266
-
267
268
268
269
// Increment field
269
270
// -----------------------------------------------------------------------------
···
278
279
.form-input--incrementTotal {
279
280
border: 0;
280
281
display: inline-block;
281
-
font-size: fontSize("smaller");
282
-
font-weight: fontWeight("bold");
282
+
font-size: fontSize('smaller');
283
+
font-weight: fontWeight('bold');
283
284
height: auto;
284
285
padding: 0;
285
286
text-align: center;
···
291
292
}
292
293
}
293
294
294
-
295
295
// Stencil form options
296
296
// -----------------------------------------------------------------------------
297
-
//
298
297
// 1. Issue with FastClick JS library workaround: https://github.com/ftlabs/fastclick/issues/351
299
298
// 2. Resetting font due to inline-block whitespace issue.
300
299
// 3. Added for STENCIL-3384. Did not change directly on .form-option-variant to avoid 1.
301
300
// 4. Added for STRF-4031. Breaks 3 for small screens.
302
-
//
303
301
304
302
.form-option {
305
-
border: 1px solid stencilColor("input-border-color");
306
-
color: stencilColor("form-label-font-color");
303
+
border: 1px solid stencilColor('input-border-color');
304
+
color: stencilColor('form-label-font-color');
307
305
cursor: pointer;
308
306
display: inline-block;
309
307
font-size: 0; // 2
310
-
margin-bottom: spacing("third");
311
-
margin-right: spacing("third");
308
+
margin-bottom: spacing('third');
309
+
margin-right: spacing('third');
312
310
padding: 1px;
313
311
transition: all 0.15s ease;
314
312
315
313
&:hover {
316
-
border-color: stencilColor("input-border-color-active");
314
+
border-color: stencilColor('input-border-color-active');
317
315
}
318
316
319
317
.form-radio:checked + & {
320
-
border-color: stencilColor("checkRadio-color");
321
-
box-shadow: 0 0 0 1px stencilColor("checkRadio-color");
318
+
border-color: stencilColor('checkRadio-color');
319
+
box-shadow: 0 0 0 1px stencilColor('checkRadio-color');
322
320
}
323
321
}
324
322
···
326
324
display: inline-block;
327
325
font-size: $body-fontSize; // 2
328
326
min-width: remCalc(38px);
329
-
padding: 1px spacing("quarter");
327
+
padding: 1px spacing('quarter');
330
328
pointer-events: none; // 1
331
329
text-align: center;
332
330
}
···
334
332
.form-option-variant--color,
335
333
.form-option-variant--pattern {
336
334
@include square(22);
335
+
337
336
min-width: initial;
338
337
padding: 0;
339
338
340
-
@include breakpoint("small") { // 4
339
+
@include breakpoint('small') {
340
+
// 4
341
341
pointer-events: inherit; // 3
342
342
}
343
343
}
···
347
347
background-repeat: no-repeat;
348
348
}
349
349
350
-
351
350
// Form input (small)
352
351
// -----------------------------------------------------------------------------
353
352
.form-input--small {
···
356
355
line-height: 1rem;
357
356
padding: $input-small-padding;
358
357
}
359
-
360
358
361
359
// Form min/max input row
362
360
// -----------------------------------------------------------------------------
363
361
.form-minMaxRow {
364
362
@include clearfix();
363
+
365
364
margin-left: -$form-minMaxRow-column-gutter;
366
365
margin-right: -$form-minMaxRow-column-gutter;
367
366
368
367
.form-field {
369
368
@include grid-column(4);
369
+
370
370
margin-bottom: 0;
371
371
padding-left: $form-minMaxRow-column-gutter;
372
372
padding-right: $form-minMaxRow-column-gutter;
···
380
380
}
381
381
}
382
382
383
-
384
383
// Form row modifications
385
384
// -----------------------------------------------------------------------------
386
-
//
387
385
// 1. If there are more than 2 fields per form-row--half, clear the left of every
388
386
// odd one.
389
-
//
390
387
// -----------------------------------------------------------------------------
391
388
392
389
.form-row--half > .form-field:nth-child(odd) {
393
-
@include breakpoint("small") {
390
+
@include breakpoint('small') {
394
391
clear: left;
395
392
}
396
393
}
···
407
404
408
405
&::before {
409
406
background-color: $productOptions-strikethrough-color;
410
-
content: "";
407
+
content: '';
411
408
height: 2px;
412
409
left: -5px;
413
410
position: absolute;
···
419
416
}
420
417
}
421
418
422
-
[data-product-attribute="set-radio"],
423
-
[data-product-attribute="product-list"] {
419
+
[data-product-attribute='set-radio'],
420
+
[data-product-attribute='product-list'] {
424
421
.unavailable {
425
422
opacity: $productOptions-disable-opacity * 2;
426
423
text-decoration: line-through;
-1
assets/scss/components/citadel/icons/_icons.scss
-1
assets/scss/components/citadel/icons/_icons.scss
+2
-4
assets/scss/components/citadel/loading/_loading.scss
+2
-4
assets/scss/components/citadel/loading/_loading.scss
···
1
1
// =============================================================================
2
2
// LOADING (CSS)
3
3
// =============================================================================
4
-
//
5
4
// 1. If set to false, there is no outputted CSS for this component.
6
-
//
7
5
// -----------------------------------------------------------------------------
8
6
9
7
.loadingOverlay {
10
-
background-color: rgba(stencilColor("loadingOverlay-backgroundColor"), 0.9);
8
+
background-color: rgba(stencilColor('loadingOverlay-backgroundColor'), 0.9);
11
9
display: none;
12
-
z-index: zIndex("low");
10
+
z-index: zIndex('low');
13
11
}
+14
-20
assets/scss/components/foundation/accordion/_accordion.scss
+14
-20
assets/scss/components/foundation/accordion/_accordion.scss
···
2
2
// ACCORDION (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
.accordion {
7
6
border-radius: $accordion-borderRadius;
8
7
box-shadow: none;
···
21
20
}
22
21
23
22
.accordion-title {
24
-
color: stencilColor("color-textHeading");
25
-
font-family: "Montserrat", Arial, Helvetica, sans-serif;
23
+
color: stencilColor('color-textHeading');
24
+
font-family: Montserrat, Arial, Helvetica, sans-serif;
26
25
font-size: remCalc(15px);
27
26
margin: 0;
28
27
}
···
38
37
width: 100%;
39
38
}
40
39
41
-
42
40
// Accordion nav list
43
41
// -----------------------------------------------------------------------------
44
-
//
45
42
// Purpose: Used as navigation menu, for example: faceted search menu.
46
-
//
47
43
// -----------------------------------------------------------------------------
48
44
.accordion--navList {
49
-
@include breakpoint("medium") {
45
+
@include breakpoint('medium') {
50
46
border: 0;
51
47
}
52
48
53
49
.sidebarBlock + & {
54
-
@include breakpoint("medium") {
50
+
@include breakpoint('medium') {
55
51
margin-top: $accordion-navList-spacing;
56
52
}
57
53
}
58
54
59
55
.accordion-block {
60
-
@include breakpoint("medium") {
56
+
@include breakpoint('medium') {
61
57
margin-top: $accordion-navList-spacing;
62
58
}
63
59
}
···
65
61
.accordion-content {
66
62
padding: $accordion-navList-padding;
67
63
68
-
@include breakpoint("medium") {
64
+
@include breakpoint('medium') {
69
65
padding: 0;
70
66
}
71
67
}
72
68
73
69
.accordion-navigation {
74
-
@include breakpoint("medium") {
70
+
@include breakpoint('medium') {
75
71
background-position: right 0 top 50%;
76
72
border: 0;
77
-
margin-bottom: spacing("half") !important;
73
+
margin-bottom: spacing('half') !important;
78
74
padding: 0;
79
75
}
80
76
}
···
85
81
text-decoration: none;
86
82
text-transform: inherit;
87
83
88
-
@include breakpoint("medium") {
84
+
@include breakpoint('medium') {
89
85
padding: 0;
90
86
}
91
87
}
92
88
93
89
.accordion-indicator {
94
-
fill: color("greys", "light");
90
+
fill: color('greys', 'light');
95
91
}
96
92
}
97
93
98
-
99
94
// Accordion block
100
95
// -----------------------------------------------------------------------------
101
-
//
102
96
// Purpose: Child blocks of an accordion
103
-
//
104
97
// -----------------------------------------------------------------------------
105
98
.accordion-block:first-child {
106
99
margin-top: 0;
···
131
124
}
132
125
133
126
.facetedSearch-clearLink {
134
-
color: stencilColor("color-textSecondary");
127
+
color: stencilColor('color-textSecondary');
135
128
position: absolute;
136
129
right: 40px;
137
130
top: 50%;
138
131
transform: translateY(-50%);
139
-
@include breakpoint("medium") {
132
+
133
+
@include breakpoint('medium') {
140
134
right: 20px;
141
135
top: 3px;
142
136
transform: none;
143
137
}
144
138
145
139
&:hover {
146
-
color: stencilColor("color-textSecondary--hover");
140
+
color: stencilColor('color-textSecondary--hover');
147
141
}
148
142
}
+4
-4
assets/scss/components/foundation/global/_global.scss
+4
-4
assets/scss/components/foundation/global/_global.scss
···
1
1
// =============================================================================
2
2
// GLOBAL (CSS)
3
3
// =============================================================================
4
-
//
5
4
// 1. If set to false, there is no outputted CSS for this component.
6
5
// 2. Create offset for the fixed position header on smaller screens.
7
-
//
8
6
// -----------------------------------------------------------------------------
9
7
10
-
@if $exportCSS--global { // 1
8
+
@if $exportCSS--global {
9
+
// 1
11
10
12
11
html,
13
12
body {
···
16
15
17
16
body {
18
17
padding-top: $header-height; // 2
19
-
@include breakpoint("medium") {
18
+
19
+
@include breakpoint('medium') {
20
20
padding-top: 0;
21
21
}
22
22
}
+5
-5
assets/scss/components/foundation/inlineList/_inlineList.scss
+5
-5
assets/scss/components/foundation/inlineList/_inlineList.scss
···
2
2
// INLINE LIST (CSS)
3
3
// =============================================================================
4
4
// 1. It prevents from missing top outline on refine filters on focus;
5
-
//
6
5
// -----------------------------------------------------------------------------
7
6
8
-
ul.inlineList {
7
+
ul.inlineList {
9
8
@include clearfix; // 1
9
+
10
10
overflow: visible;
11
11
}
12
12
13
13
.inlineList--labels {
14
14
margin-bottom: 0;
15
-
margin-left: -1 * spacing("half");
15
+
margin-left: -1 * spacing('half');
16
16
17
17
> li {
18
-
margin-bottom: spacing("half");
19
-
margin-left: spacing("half");
18
+
margin-bottom: spacing('half');
19
+
margin-left: spacing('half');
20
20
}
21
21
}
+3
-6
assets/scss/components/foundation/lazyLoad/_lazyLoad.scss
+3
-6
assets/scss/components/foundation/lazyLoad/_lazyLoad.scss
···
1
1
@mixin lazy-loaded-img() {
2
-
bottom: 0;
3
-
left: 0;
2
+
inset: 0;
4
3
margin: auto;
5
4
position: absolute;
6
-
right: 0;
7
-
top: 0;
8
5
}
9
6
10
7
@mixin lazy-loaded-padding($size-param) {
11
8
&::after {
12
-
content: "";
9
+
content: '';
13
10
display: block;
14
11
height: 0;
15
12
padding-bottom: get-padding(stencilString($size-param));
···
19
16
20
17
@mixin cart-item-lazy-load-img-placeholder() {
21
18
&::after {
22
-
content: "";
19
+
content: '';
23
20
display: block;
24
21
height: 100%;
25
22
left: 0;
+17
-16
assets/scss/components/foundation/modal/_modal.scss
+17
-16
assets/scss/components/foundation/modal/_modal.scss
···
1
1
// =============================================================================
2
2
// MODAL (CSS)
3
-
//
4
-
// // 1. Fix for content shifted to top in modal window when bottom variant option selected
5
-
// // 2. Icon styles and icon animations moved from the removed "sweetalert2" library
3
+
// 1. Fix for content shifted to top in modal window when bottom variant option selected
4
+
// 2. Icon styles and icon animations moved from the removed "sweetalert2" library
6
5
// =============================================================================
7
6
8
7
.modal {
···
23
22
}
24
23
25
24
.modal--large {
26
-
@include breakpoint("large") {
25
+
@include breakpoint('large') {
27
26
width: $modal-width--large;
28
27
}
29
28
}
···
34
33
}
35
34
36
35
.modal-header-title {
37
-
font-size: fontSize("large");
36
+
font-size: fontSize('large');
38
37
text-align: center;
39
38
40
-
@include breakpoint("medium") {
41
-
font-size: fontSize("larger");
39
+
@include breakpoint('medium') {
40
+
font-size: fontSize('larger');
42
41
}
43
42
}
44
43
45
44
.modal-close {
46
45
@include square($reveal-close-height);
47
-
48
46
@include addFocusTooltip;
49
-
color: stencilColor("icon-color");
47
+
48
+
color: stencilColor('icon-color');
50
49
font-size: 26px;
51
50
line-height: remCalc($reveal-close-height);
52
51
padding: 0;
53
52
position: absolute;
54
53
text-align: center;
55
54
text-decoration: none;
56
-
z-index: zIndex("high");
55
+
z-index: zIndex('high');
57
56
58
-
@include breakpoint("medium") {
57
+
@include breakpoint('medium') {
59
58
font-size: 32px;
60
59
}
61
60
62
61
&:hover {
63
-
color: stencilColor("icon-color-hover");
62
+
color: stencilColor('icon-color-hover');
64
63
}
65
64
66
65
&::before {
···
87
86
padding: 40px 20px 20px;
88
87
text-align: center;
89
88
90
-
.alert-icon { // 2
89
+
.alert-icon {
90
+
// 2
91
91
border: 0.25em solid transparent;
92
92
border-radius: 50%;
93
93
box-sizing: content-box;
···
135
135
}
136
136
}
137
137
138
-
.warning-icon {
138
+
.warning-icon {
139
139
animation: animate-icon 0.5s;
140
140
border-color: #facea8;
141
141
color: #f8bb86;
···
181
181
opacity: 0;
182
182
}
183
183
184
-
//Icon animations
185
-
@keyframes animate-icon { // 2
184
+
// Icon animations
185
+
@keyframes animate-icon {
186
+
// 2
186
187
0% {
187
188
opacity: 0;
188
189
transform: rotateX(100deg);
+7
-11
assets/scss/components/foundation/pagination/_pagination.scss
+7
-11
assets/scss/components/foundation/pagination/_pagination.scss
···
2
2
// PAGINATION (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Pagination list items
7
6
// -----------------------------------------------------------------------------
8
-
//
9
7
// 1. Centred list via inline-block. Font-size: 0; to remove white-space.
10
8
// 2. Specificity overrides for Foundation's inadequate selectors.
11
-
//
12
9
// -----------------------------------------------------------------------------
13
10
14
11
.pagination-list {
15
12
@include clearfix;
16
13
17
14
font-size: 0; // 1
18
-
margin-bottom: spacing("single");
15
+
margin-bottom: spacing('single');
19
16
text-align: center;
20
17
21
-
.pagination-item { // 2
18
+
.pagination-item {
19
+
// 2
22
20
display: inline-block;
23
21
}
24
22
}
25
-
26
23
27
24
// Pagination list items
28
25
// -----------------------------------------------------------------------------
29
-
//
30
26
// 1. Specificity overrides for Foundation's inadequate selectors.
31
-
//
32
27
// -----------------------------------------------------------------------------
33
28
34
29
.pagination-item {
···
44
39
}
45
40
}
46
41
47
-
&.pagination-item--current { // 1
42
+
&.pagination-item--current {
43
+
// 1
48
44
border-color: $pagination-link-current-borderColor;
49
45
border-radius: $pagination-link-current-borderRadius;
50
46
margin: $pagination-link-current-margin;
51
47
}
52
48
53
49
&.pagination-item--previous, // 1
54
-
&.pagination-item--next { // 1
50
+
&.pagination-item--next {
51
+
// 1
55
52
56
53
> a {
57
54
color: $pagination-item-previousNext-color;
···
91
88
margin-right: -(remCalc(12px));
92
89
}
93
90
}
94
-
95
91
96
92
// Simple/small pagination (Next/Previous arrows are the only way to navigate)
97
93
// -----------------------------------------------------------------------------
+12
-15
assets/scss/components/foundation/tables/_tables.scss
+12
-15
assets/scss/components/foundation/tables/_tables.scss
···
2
2
// TABLES (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Stencil table component additions
7
6
// -----------------------------------------------------------------------------
8
7
···
23
22
}
24
23
25
24
.table-actions {
26
-
margin: spacing("single");
25
+
margin: spacing('single');
27
26
text-align: center;
28
27
29
28
.form {
···
36
35
margin-right: 0;
37
36
width: 100%;
38
37
39
-
@include breakpoint("small") {
38
+
@include breakpoint('small') {
40
39
display: inline-block;
41
40
margin-bottom: 0;
42
41
width: auto;
43
42
}
44
43
45
44
+ .button {
46
-
47
-
@include breakpoint("small") {
48
-
margin-left: spacing("quarter");
45
+
@include breakpoint('small') {
46
+
margin-left: spacing('quarter');
49
47
}
50
48
}
51
49
}
52
50
}
53
-
54
51
55
52
// Stencil table modifiers
56
53
// -----------------------------------------------------------------------------
57
54
58
55
.table--line {
59
-
border-color: container("borderColor");
56
+
border-color: container('borderColor');
60
57
border-width: 0 0 1px;
61
58
62
59
.table-thead {
63
-
background-color: stencilColor("body-bg");
64
-
border-color: container("borderColor");
60
+
background-color: stencilColor('body-bg');
61
+
border-color: container('borderColor');
65
62
border-width: 0 0 1px;
66
63
67
64
tr {
···
69
66
padding-left: 0;
70
67
padding-right: 0;
71
68
72
-
@include breakpoint("small") {
69
+
@include breakpoint('small') {
73
70
text-align: center;
74
71
75
72
&:first-child {
···
82
79
}
83
80
84
81
+ th {
85
-
padding-left: spacing("single");
82
+
padding-left: spacing('single');
86
83
}
87
84
}
88
85
}
89
86
}
90
87
91
88
tr {
92
-
border-color: container("border");
89
+
border-color: container('border');
93
90
94
91
td {
95
92
display: block;
96
93
padding-left: 0;
97
94
padding-right: 0;
98
95
99
-
@include breakpoint("small") {
96
+
@include breakpoint('small') {
100
97
text-align: center;
101
98
102
99
&:first-child {
···
109
106
}
110
107
111
108
+ td {
112
-
padding-left: spacing("single");
109
+
padding-left: spacing('single');
113
110
}
114
111
}
115
112
}
+11
-18
assets/scss/components/foundation/tabs/_tabs.scss
+11
-18
assets/scss/components/foundation/tabs/_tabs.scss
···
1
1
// =============================================================================
2
2
// TABS (CSS)
3
3
// =============================================================================
4
-
//
5
4
// Most of these styles deliberately reset Citadel's defaults for smaller
6
5
// screens since the styles in Stencil for smaller screens are more persistent
7
6
// across breakpoints.
8
-
//
9
7
// -----------------------------------------------------------------------------
10
8
11
9
.tab {
12
10
border-top: $tab-active-border;
13
11
float: none;
14
12
15
-
@include breakpoint("medium") {
13
+
@include breakpoint('medium') {
16
14
border-top-color: $tab-title-border-color;
17
15
float: left;
18
16
}
···
21
19
border-left-color: $tab-title-border-color;
22
20
border-right-color: $tab-title-border-color;
23
21
24
-
@include breakpoint("small") {
22
+
@include breakpoint('small') {
25
23
margin-bottom: $tab-title-border-bottom-offset;
26
24
}
27
25
28
-
@include breakpoint("medium") {
26
+
@include breakpoint('medium') {
29
27
border: $tab-active-border;
30
28
border-bottom: $tab-title-border;
31
29
}
···
33
31
}
34
32
35
33
.tab-title {
36
-
padding: spacing("half") + spacing("quarter") 0;
34
+
padding: spacing('half') + spacing('quarter') 0;
37
35
text-align: center;
38
36
text-decoration: $tab-title-text-decoration;
39
37
40
-
@include breakpoint("small") {
38
+
@include breakpoint('small') {
41
39
text-align: left;
42
40
}
43
41
44
-
@include breakpoint("medium") {
45
-
padding: spacing("half") spacing("single");
42
+
@include breakpoint('medium') {
43
+
padding: spacing('half') spacing('single');
46
44
}
47
45
48
-
@include breakpoint("large") {
46
+
@include breakpoint('large') {
49
47
padding: remCalc(11px) remCalc(18px);
50
48
}
51
49
}
52
50
53
51
.tab-content {
54
-
//
55
52
// State for when tab-content has js generated of calculated content, like carousel
56
-
//
57
53
// Purpose: The content being display: none, means any js calculated dimensions
58
54
// are incorrect as the elements inside the tab-content have no dimensions to grab.
59
55
// Carousel is a prime example. It needs widths to calculate the layout and slides
···
73
69
}
74
70
}
75
71
76
-
77
-
//
78
72
// Product review displays in tabs
79
-
//
80
73
// Purpose: Display product reviews within tabbed content on product pages.
81
74
// -----------------------------------------------------------------------------
82
75
.productReview {
83
-
@include breakpoint("small") {
76
+
@include breakpoint('small') {
84
77
width: grid-calc(6, $total-columns);
85
78
}
86
79
87
-
@include breakpoint("medium") {
80
+
@include breakpoint('medium') {
88
81
width: grid-calc(4, $total-columns);
89
82
}
90
83
91
-
@include breakpoint("large") {
84
+
@include breakpoint('large') {
92
85
width: grid-calc(6, $total-columns);
93
86
}
94
87
}
+85
-97
assets/scss/components/stencil/account/_account.scss
+85
-97
assets/scss/components/stencil/account/_account.scss
···
2
2
// ACCOUNT (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Account navigation
7
6
// -----------------------------------------------------------------------------
8
7
9
8
.navBar--account {
10
9
display: none;
11
10
12
-
@include breakpoint("medium") {
11
+
@include breakpoint('medium') {
13
12
display: block;
14
13
}
15
14
}
16
15
17
-
18
16
// Account headings
19
17
// -----------------------------------------------------------------------------
20
18
21
19
.account-heading {
22
-
border-bottom: container("border");
20
+
border-bottom: container('border');
23
21
margin: 0;
24
-
padding-bottom: spacing("base");
22
+
padding-bottom: spacing('base');
25
23
}
26
-
27
24
28
25
// Account list
29
26
// -----------------------------------------------------------------------------
···
34
31
}
35
32
36
33
.account-listItem {
37
-
border-bottom: container("border");
38
-
padding: spacing("single") 0;
34
+
border-bottom: container('border');
35
+
padding: spacing('single') 0;
39
36
position: relative;
40
37
41
38
img {
···
50
47
}
51
48
52
49
.account-listShipping {
53
-
border-bottom: container("border");
54
-
font-weight: fontWeight("bold");
55
-
padding: (spacing("single") + spacing("third")) 0;
50
+
border-bottom: container('border');
51
+
font-weight: fontWeight('bold');
52
+
padding: (spacing('single') + spacing('third')) 0;
56
53
57
54
.account-listShipping-title {
58
55
margin: 0;
···
68
65
}
69
66
70
67
.account-product-figure {
68
+
@include lazy-loaded-padding('productthumb_size');
71
69
72
-
@include lazy-loaded-padding("productthumb_size");
73
70
align-items: center;
74
71
display: flex;
75
72
flex-direction: column;
76
-
margin: 0 spacing("single") + spacing("third") 0 0;
73
+
margin: 0 spacing('single') + spacing('third') 0 0;
77
74
position: relative;
78
75
width: 70px;
79
76
}
···
83
80
height: remCalc(33px);
84
81
padding: 0;
85
82
position: absolute;
86
-
right: -(spacing("half"));
87
-
top: -(spacing("half"));
83
+
right: -(spacing('half'));
84
+
top: -(spacing('half'));
88
85
width: remCalc(33px);
89
86
z-index: 1;
90
87
91
88
.icon {
92
-
height: spacing("single");
93
-
margin-top: spacing("quarter");
94
-
width: spacing("single");
89
+
height: spacing('single');
90
+
margin-top: spacing('quarter');
91
+
width: spacing('single');
95
92
}
96
93
97
94
svg {
98
-
fill: color("whites", "bright");
95
+
fill: color('whites', 'bright');
99
96
}
100
97
}
101
98
102
99
.account-product-body {
103
100
overflow: hidden;
104
-
padding-bottom: spacing("double") + spacing("third");
101
+
padding-bottom: spacing('double') + spacing('third');
105
102
position: relative;
106
103
107
-
@include breakpoint("small") {
104
+
@include breakpoint('small') {
108
105
padding-bottom: 0;
109
106
}
110
107
111
108
.definitionList {
112
-
font-size: fontSize("smaller");
109
+
font-size: fontSize('smaller');
113
110
margin-bottom: 0;
114
111
}
115
112
}
116
113
117
114
.account-product-title {
118
-
margin: 0 0 spacing("eighth");
115
+
margin: 0 0 spacing('eighth');
119
116
text-transform: inherit;
120
117
121
118
> a {
···
123
120
}
124
121
125
122
+ .definitionList {
126
-
margin-top: spacing("half");
123
+
margin-top: spacing('half');
127
124
}
128
125
}
129
126
130
127
.account-product-subtitle {
131
-
color: color("greys", "light");
132
-
font-family: fontFamily("sans");
133
-
font-size: fontSize("smaller");
134
-
margin: -(spacing("eighth")) 0 spacing("base");
128
+
color: color('greys', 'light');
129
+
font-family: fontFamily('sans');
130
+
font-size: fontSize('smaller');
131
+
margin: -(spacing('eighth')) 0 spacing('base');
135
132
text-transform: inherit;
136
133
}
137
134
138
135
.account-product-price {
139
136
float: right;
140
-
font-size: fontSize("smaller");
137
+
font-size: fontSize('smaller');
141
138
}
142
139
143
140
.account-product-description + .definitionList {
144
-
margin: -(spacing("base") + spacing("quarter")) 0 spacing("single");
141
+
margin: -(spacing('base') + spacing('quarter')) 0 spacing('single');
145
142
}
146
143
147
144
.account-product-refundQty {
148
-
color: color("greys", "light");
145
+
color: color('greys', 'light');
149
146
margin-bottom: 0;
150
147
}
151
148
152
149
.account-product-details {
153
-
@include grid-row($behavior: "nest");
150
+
@include grid-row($behavior: 'nest');
154
151
}
155
152
156
153
.account-product-detail {
157
154
@include grid-column(12);
158
155
159
-
@include breakpoint("small") {
156
+
@include breakpoint('small') {
160
157
width: grid-calc(4, $total-columns);
161
158
}
162
159
163
-
@include breakpoint("large") {
160
+
@include breakpoint('large') {
164
161
width: grid-calc(3, $total-columns);
165
162
}
166
163
167
164
+ .account-product-detail {
168
-
margin-top: spacing("base");
165
+
margin-top: spacing('base');
169
166
170
-
@include breakpoint("small") {
167
+
@include breakpoint('small') {
171
168
margin-top: 0;
172
169
}
173
170
}
174
171
175
172
+ .account-product-detail--full {
176
-
177
-
@include breakpoint("small") {
178
-
margin-top: spacing("single");
173
+
@include breakpoint('small') {
174
+
margin-top: spacing('single');
179
175
}
180
176
}
181
177
}
182
178
183
179
.account-product-detail--large {
184
-
185
-
@include breakpoint("large") {
180
+
@include breakpoint('large') {
186
181
width: grid-calc(6, $total-columns);
187
182
}
188
183
}
···
192
187
}
193
188
194
189
.account-product-detail-heading {
195
-
color: stencilColor("color-textSecondary");
196
-
font-family: fontFamily("sans");
197
-
font-size: fontSize("tiny");
198
-
margin: 0 0 spacing("quarter");
190
+
color: stencilColor('color-textSecondary');
191
+
font-family: fontFamily('sans');
192
+
font-size: fontSize('tiny');
193
+
margin: 0 0 spacing('quarter');
199
194
}
200
-
201
195
202
196
// Vertically aligned product view
203
197
// -----------------------------------------------------------------------------
···
212
206
vertical-align: middle;
213
207
width: 2rem;
214
208
215
-
@include breakpoint("large") {
209
+
@include breakpoint('large') {
216
210
left: -2.5rem;
217
211
}
218
212
219
213
.form-label {
220
-
height: spacing("single");
214
+
height: spacing('single');
221
215
margin: 0;
222
216
padding: 0;
223
-
width: spacing("single");
217
+
width: spacing('single');
224
218
}
225
219
}
226
220
···
233
227
float: none;
234
228
margin-right: 0;
235
229
236
-
@include breakpoint("large") {
230
+
@include breakpoint('large') {
237
231
left: -2rem;
238
232
}
239
233
}
···
242
236
padding-left: 2rem;
243
237
vertical-align: middle;
244
238
245
-
@include breakpoint("large") {
239
+
@include breakpoint('large') {
246
240
padding-left: 0;
247
241
}
248
242
}
249
243
}
250
-
251
244
252
245
// Account product totals
253
246
// -----------------------------------------------------------------------------
254
247
255
248
.account-orderTotal {
256
249
float: right;
257
-
font-size: fontSize("smaller");
258
-
margin-top: -(spacing("single"));
250
+
font-size: fontSize('smaller');
251
+
margin-top: -(spacing('single'));
259
252
width: grid-calc(8, $total-columns);
260
253
}
261
254
262
255
.account-orderTotal-key,
263
256
.account-orderTotal-value {
264
257
margin: 0;
265
-
padding: spacing("single") 0;
258
+
padding: spacing('single') 0;
266
259
}
267
260
268
261
.account-orderTotal-key {
269
-
color: stencilColor("color-textSecondary");
262
+
color: stencilColor('color-textSecondary');
270
263
float: left;
271
-
font-weight: fontWeight("normal");
264
+
font-weight: fontWeight('normal');
272
265
273
266
&:last-of-type {
274
267
position: relative;
275
-
top: spacing("fifth");
268
+
top: spacing('fifth');
276
269
}
277
270
}
278
271
279
272
.account-orderTotal-value {
280
-
border-bottom: container("border");
273
+
border-bottom: container('border');
281
274
text-align: right;
282
275
283
276
&:last-child {
284
277
border-bottom: 0;
285
-
font-size: fontSize("small");
278
+
font-size: fontSize('small');
286
279
}
287
280
}
288
-
289
281
290
282
// Account status
291
283
// -----------------------------------------------------------------------------
···
295
287
left: 0;
296
288
position: absolute;
297
289
298
-
@include breakpoint("small") {
290
+
@include breakpoint('small') {
299
291
float: right;
300
292
position: inherit;
301
293
text-align: right;
···
303
295
}
304
296
305
297
.account-orderStatus-label {
306
-
background-color: stencilColor("label-backgroundColor");
307
-
color: stencilColor("label-color");
298
+
background-color: stencilColor('label-backgroundColor');
299
+
color: stencilColor('label-color');
308
300
display: inline-block;
309
-
font-size: fontSize("tiny");
310
-
line-height: lineHeight("smallest");
311
-
margin: 0 0 spacing("quarter");
312
-
padding: spacing("eighth") spacing("third");
301
+
font-size: fontSize('tiny');
302
+
line-height: lineHeight('smallest');
303
+
margin: 0 0 spacing('quarter');
304
+
padding: spacing('eighth') spacing('third');
313
305
}
314
306
315
307
.account-orderStatus-action {
316
-
color: stencilColor("color-textSecondary");
308
+
color: stencilColor('color-textSecondary');
317
309
display: inline-block;
318
-
font-size: fontSize("tiny");
310
+
font-size: fontSize('tiny');
319
311
font-style: italic;
320
-
letter-spacing: letterSpacing("large");
321
-
margin-left: spacing("half");
312
+
letter-spacing: letterSpacing('large');
313
+
margin-left: spacing('half');
322
314
text-align: right;
323
315
text-decoration: underline;
324
316
vertical-align: top;
325
317
326
-
@include breakpoint("small") {
318
+
@include breakpoint('small') {
327
319
display: block;
328
320
margin-left: 0;
329
321
}
330
322
331
323
&:hover {
332
-
color: stencilColor("color-textSecondary--hover");
324
+
color: stencilColor('color-textSecondary--hover');
333
325
}
334
326
}
335
327
336
-
337
328
// Account pagination & panel
338
329
// -----------------------------------------------------------------------------
339
330
340
331
.account {
341
332
.pagination {
342
-
color: color("greys", "light");
343
-
margin-top: spacing("double");
333
+
color: color('greys', 'light');
334
+
margin-top: spacing('double');
344
335
text-align: center;
345
336
}
346
337
}
347
-
348
338
349
339
// Account inbox
350
340
// -----------------------------------------------------------------------------
351
341
352
342
.account-message {
353
343
.is-read {
354
-
color: color("greys", "light");
344
+
color: color('greys', 'light');
355
345
}
356
346
}
357
-
358
347
359
348
// Sidebar blocks
360
349
// -----------------------------------------------------------------------------
361
350
362
351
.account-sidebar-block {
363
-
font-size: fontSize("smaller");
352
+
font-size: fontSize('smaller');
364
353
365
354
+ .account-sidebar-block {
366
-
margin-top: spacing("double");
355
+
margin-top: spacing('double');
367
356
}
368
357
369
358
.account-heading {
370
-
margin-bottom: spacing("single");
359
+
margin-bottom: spacing('single');
371
360
}
372
361
}
373
362
374
363
.account-order-address {
375
-
@include u-listBullets("none");
364
+
@include u-listBullets('none');
376
365
}
377
366
378
367
.account-reorder-form {
···
380
369
}
381
370
382
371
.order-payments-description {
383
-
color: stencilColor("color-primary");
384
-
font-weight: fontWeight("normal");
385
-
margin-top: spacing("single");
372
+
color: stencilColor('color-primary');
373
+
font-weight: fontWeight('normal');
374
+
margin-top: spacing('single');
386
375
}
387
-
388
376
389
377
// Product downloads
390
378
// -----------------------------------------------------------------------------
391
379
392
380
.account-downloads-summary {
393
-
border-bottom: container("border");
394
-
font-size: fontSize("smaller");
395
-
padding-bottom: spacing("single");
381
+
border-bottom: container('border');
382
+
font-size: fontSize('smaller');
383
+
padding-bottom: spacing('single');
396
384
}
397
385
398
386
.account-downloadsList {
399
-
@include u-listBullets("none");
387
+
@include u-listBullets('none');
400
388
}
401
389
402
390
.account-downloadsItem {
403
-
margin-bottom: spacing("single");
391
+
margin-bottom: spacing('single');
404
392
405
393
> :first-child {
406
394
margin-top: 0;
···
412
400
}
413
401
414
402
.account-downloadsItem-title {
415
-
color: stencilColor("color-textSecondary");
416
-
font-size: fontSize("smaller");
417
-
margin-bottom: spacing("eighth");
403
+
color: stencilColor('color-textSecondary');
404
+
font-size: fontSize('smaller');
405
+
margin-bottom: spacing('eighth');
418
406
text-transform: inherit;
419
407
}
420
408
···
423
411
}
424
412
425
413
.account-downloadsItem-availability {
426
-
color: stencilColor("color-textSecondary");
414
+
color: stencilColor('color-textSecondary');
427
415
}
+33
-38
assets/scss/components/stencil/addReturn/_addReturn.scss
+33
-38
assets/scss/components/stencil/addReturn/_addReturn.scss
···
2
2
// ADD RETURN REQUEST (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
.account--addReturn {
7
6
.table {
8
7
display: block;
9
-
margin-bottom: spacing("double");
8
+
margin-bottom: spacing('double');
10
9
11
-
@include breakpoint("small") {
10
+
@include breakpoint('small') {
12
11
display: table;
13
-
margin-bottom: spacing("double") * 2;
12
+
margin-bottom: spacing('double') * 2;
14
13
}
15
14
16
15
tr {
17
16
display: block;
18
-
padding: spacing("single") 0;
17
+
padding: spacing('single') 0;
19
18
20
-
@include breakpoint("small") {
19
+
@include breakpoint('small') {
21
20
display: table-row;
22
21
padding: 0;
23
22
}
···
28
27
display: block;
29
28
padding: 0;
30
29
31
-
@include breakpoint("small") {
30
+
@include breakpoint('small') {
32
31
display: table-cell;
33
-
padding-bottom: spacing("half");
34
-
padding-top: spacing("half");
32
+
padding-bottom: spacing('half');
33
+
padding-top: spacing('half');
35
34
}
36
35
37
36
+ th,
38
37
+ td {
39
38
padding-left: 0;
40
39
41
-
@include breakpoint("small") {
42
-
padding-left: spacing("single");
40
+
@include breakpoint('small') {
41
+
padding-left: spacing('single');
43
42
}
44
43
}
45
44
}
46
45
47
46
.return-itemTitle + .definitionList {
48
-
margin-top: spacing("eighth");
47
+
margin-top: spacing('eighth');
49
48
}
50
49
51
50
.return-itemPrice {
52
-
@include breakpoint("small") {
51
+
@include breakpoint('small') {
53
52
text-align: center;
54
53
}
55
54
}
56
55
57
56
.return-itemQuantity {
58
-
@include breakpoint("small") {
57
+
@include breakpoint('small') {
59
58
text-align: right;
60
59
}
61
60
}
···
64
63
.table-thead {
65
64
display: none;
66
65
67
-
@include breakpoint("small") {
66
+
@include breakpoint('small') {
68
67
display: table-header-group;
69
68
}
70
69
71
70
th {
72
-
font-size: fontSize("smaller");
71
+
font-size: fontSize('smaller');
73
72
}
74
73
75
74
th:first-child {
···
80
79
.table-tbody {
81
80
display: block;
82
81
83
-
@include breakpoint("small") {
82
+
@include breakpoint('small') {
84
83
display: table-row-group;
85
84
}
86
85
}
87
86
}
88
87
89
-
90
88
.return-itemName {
91
-
font-size: fontSize("smaller");
92
-
font-weight: fontWeight("bold");
89
+
font-size: fontSize('smaller');
90
+
font-weight: fontWeight('bold');
93
91
94
-
@include breakpoint("small") {
95
-
font-size: fontSize("base");
96
-
font-weight: fontWeight("normal");
92
+
@include breakpoint('small') {
93
+
font-size: fontSize('base');
94
+
font-weight: fontWeight('normal');
97
95
}
98
96
}
99
97
100
98
.return-itemPrice {
101
-
color: color("greys", "light");
102
-
margin-bottom: spacing("quarter");
99
+
color: color('greys', 'light');
100
+
margin-bottom: spacing('quarter');
103
101
104
-
@include breakpoint("small") {
102
+
@include breakpoint('small') {
105
103
color: inherit;
106
104
margin-bottom: 0;
107
105
text-align: center;
···
111
109
.return-itemQuantity {
112
110
.form-label {
113
111
display: inline;
114
-
margin-right: spacing("quarter");
112
+
margin-right: spacing('quarter');
115
113
116
-
@include breakpoint("small") {
117
-
@include u-hidden("visually");
114
+
@include breakpoint('small') {
115
+
@include u-hidden('visually');
118
116
}
119
117
}
120
118
}
121
119
120
+
.account--addReturn-row {
121
+
@include grid-row($behavior: 'nest');
122
122
123
-
124
-
125
-
126
-
127
-
.account--addReturn-row {
128
-
@include grid-row($behavior: "nest");
129
-
margin: 0 (-(spacing("base")));
123
+
margin: 0 (-(spacing('base')));
130
124
}
131
125
132
126
.account--addReturn-column {
133
127
@include grid-column(12);
134
-
padding: 0 spacing("base");
135
128
136
-
@include breakpoint("small") {
129
+
padding: 0 spacing('base');
130
+
131
+
@include breakpoint('small') {
137
132
width: grid-calc(6, $total-columns);
138
133
}
139
134
}
+27
-30
assets/scss/components/stencil/addressBox/_addressBox.scss
+27
-30
assets/scss/components/stencil/addressBox/_addressBox.scss
···
4
4
5
5
// Address layout
6
6
// -----------------------------------------------------------------------------
7
-
//
8
7
// 1. Using display: inline-block; to vertically align blocks.
9
8
// Font-size gets redefined under the .address block.
10
-
//
11
9
// -----------------------------------------------------------------------------
12
10
13
11
.addressList {
14
12
font-size: 0; // 1
15
13
list-style: none;
16
-
margin-left: -(spacing("half"));
17
-
margin-right: -(spacing("half"));
14
+
margin-left: -(spacing('half'));
15
+
margin-right: -(spacing('half'));
18
16
}
19
17
20
18
.address {
21
19
display: inline-block;
22
-
padding: 0 spacing("half");
20
+
padding: 0 spacing('half');
23
21
vertical-align: top;
24
22
width: 100%;
25
23
26
-
@include breakpoint("small") {
24
+
@include breakpoint('small') {
27
25
width: grid-calc(6, $total-columns);
28
26
}
29
27
30
-
@include breakpoint("large") {
28
+
@include breakpoint('large') {
31
29
width: grid-calc(4, $total-columns);
32
30
}
33
31
}
34
32
35
-
36
33
// Address
37
34
// -----------------------------------------------------------------------------
38
-
//
39
35
// 1. Redefine the font-size as we're removing white-space on the parent by
40
36
// reducing the size to 0.
41
37
// 2. Adding a min-height to improve the consistency of the address blocks.
42
38
// 3. On larger screens we position: absolute; the .form-actions so they're
43
39
// consistently in line. We need to adjust padding to accommodate this.
44
-
//
45
40
// -----------------------------------------------------------------------------
46
41
47
42
.panel--address {
48
-
font-size: fontSize("base"); // 1
43
+
font-size: fontSize('base'); // 1
49
44
position: relative;
50
45
51
46
.panel-body {
52
47
min-height: remCalc(250px); // 2
53
-
padding: spacing("single");
48
+
padding: spacing('single');
54
49
55
-
@include breakpoint("small") {
56
-
padding: spacing("single") spacing("single") (spacing("single") + spacing("double")); // 3
50
+
@include breakpoint('small') {
51
+
padding: spacing('single') spacing('single')
52
+
(spacing('single') + spacing('double')); // 3
57
53
}
58
54
}
59
55
60
56
.form-actions {
61
-
margin-bottom: -(spacing("half"));
62
-
margin-top: spacing("single");
57
+
margin-bottom: -(spacing('half'));
58
+
margin-top: spacing('single');
63
59
text-align: left;
64
60
65
-
@include breakpoint("small") { // 3
66
-
bottom: spacing("single");
61
+
@include breakpoint('small') {
62
+
// 3
63
+
bottom: spacing('single');
67
64
position: absolute;
68
65
width: auto;
69
66
}
70
67
71
68
.button {
72
-
margin-bottom: spacing("half");
69
+
margin-bottom: spacing('half');
73
70
74
71
+ .button {
75
72
margin-left: 0;
76
73
margin-top: 0;
77
74
78
-
@include breakpoint("small") {
79
-
margin-left: spacing("quarter");
75
+
@include breakpoint('small') {
76
+
margin-left: spacing('quarter');
80
77
}
81
78
}
82
79
}
···
84
81
}
85
82
86
83
.address-title {
87
-
margin: 0 0 spacing("half");
84
+
margin: 0 0 spacing('half');
88
85
text-transform: none;
89
86
}
90
87
91
88
.address-details {
92
89
list-style: none;
93
-
margin: 0 0 spacing("half");
90
+
margin: 0 0 spacing('half');
94
91
}
95
92
96
93
.address-details--postal {
97
-
font-size: fontSize("smaller");
94
+
font-size: fontSize('smaller');
98
95
}
99
96
100
97
.address-label,
101
98
.address-description {
102
99
display: inline-block;
103
-
font-size: fontSize("base");
100
+
font-size: fontSize('base');
104
101
margin: 0;
105
102
}
106
103
107
104
.address-label {
108
-
color: stencilColor("color-textSecondary");
109
-
font-weight: fontWeight("normal");
105
+
color: stencilColor('color-textSecondary');
106
+
font-weight: fontWeight('normal');
110
107
}
111
108
112
109
.panel--newAddress {
···
116
113
117
114
&:hover {
118
115
.address-title {
119
-
color: stencilColor("color-textLink--hover");
116
+
color: stencilColor('color-textLink--hover');
120
117
}
121
118
}
122
119
123
120
.panel-body {
124
121
background-color: transparent;
125
-
border: container("border");
122
+
border: container('border');
126
123
display: block;
127
124
}
128
125
···
140
137
}
141
138
142
139
.address-symbol {
143
-
font-size: fontSize("hero");
140
+
font-size: fontSize('hero');
144
141
line-height: 1;
145
142
}
+5
-6
assets/scss/components/stencil/applePay/_applePay.scss
+5
-6
assets/scss/components/stencil/applePay/_applePay.scss
···
8
8
max-height: remCalc(64px);
9
9
min-height: remCalc(32px);
10
10
min-width: 90px;
11
-
padding: spacing("single");
11
+
padding: spacing('single');
12
12
width: 160px;
13
-
@if stencilString("applePay-button") == "white" {
13
+
14
+
@if stencilString('applePay-button') == 'white' {
14
15
background-color: $applePay-white;
15
16
background-image: -webkit-named-image(apple-pay-logo-black);
16
-
}
17
-
@else if stencilString("applePay-button") == "white-border" {
17
+
} @else if stencilString('applePay-button') == 'white-border' {
18
18
background-color: $applePay-white;
19
19
background-image: -webkit-named-image(apple-pay-logo-black);
20
20
border: 0.5px solid $applePay-black;
21
-
}
22
-
@else {
21
+
} @else {
23
22
background-color: $applePay-black;
24
23
background-image: -webkit-named-image(apple-pay-logo-white);
25
24
}
+2
-7
assets/scss/components/stencil/blocker/_blocker.scss
+2
-7
assets/scss/components/stencil/blocker/_blocker.scss
···
1
1
// =============================================================================
2
2
// BLOCKER (CSS)
3
-
//
4
3
// Purpose: Position .blocker element above another element to prevent user event
5
4
// =============================================================================
6
-
7
5
8
6
.blocker {
9
7
background: rgba($body-bg, 0.5);
10
-
bottom: 0;
11
-
left: 0;
8
+
inset: 0;
12
9
position: absolute;
13
-
right: 0;
14
-
top: 0;
15
-
z-index: zIndex("highest");
10
+
z-index: zIndex('highest');
16
11
}
17
12
18
13
.blocker-container {
+13
-11
assets/scss/components/stencil/cart/_cart.scss
+13
-11
assets/scss/components/stencil/cart/_cart.scss
···
1
1
// =============================================================================
2
2
// CART (CSS)
3
3
// =============================================================================
4
-
//
5
4
// 1. Override server-generated inline-css
6
-
//
7
5
// -----------------------------------------------------------------------------
8
6
9
7
// Cart variables
···
11
9
12
10
$cart-item-spacing: spacing('single');
13
11
$cart-content-padding-right: 4px;
14
-
15
12
$cart-thumbnail-maxWidth: remCalc(100px);
16
13
$cart-thumbnail-height: remCalc(100px);
17
14
$cart-thumbnail-maxHeight: 14rem;
18
15
$cart-thumbnail-paddingVertical: 0.5rem;
19
-
20
16
$cart-item-label-offset: $cart-thumbnail-maxWidth + $cart-item-spacing;
21
17
$card-preview-zoom-bottom-offset: 6rem;
22
18
23
-
//
24
19
// Shared styles for additional checkout buttons
25
20
// -----------------------------------------------------------------------------
26
21
···
44
39
45
40
// Cart layout
46
41
// -----------------------------------------------------------------------------
47
-
//
48
42
// 1. On mobile and tablet we need to re-structure the table to appear more like
49
43
// a list, then visually show it as a table on larger screens only.
50
-
//
51
44
// 2. Hide the table headings on mobile and tablet, show them for larger screens.
52
-
//
53
45
// -----------------------------------------------------------------------------
54
46
55
47
.cart {
···
96
88
97
89
@include breakpoint('small') {
98
90
@include clearfix;
91
+
99
92
padding-left: grid-calc(3, $total-columns);
100
93
}
101
94
···
124
117
125
118
.cart-item-figure {
126
119
@include cart-item-lazy-load-img-placeholder;
120
+
127
121
float: left;
128
122
margin-bottom: $cart-item-spacing;
129
123
position: relative;
···
308
302
309
303
.cart-totals {
310
304
@include u-listBullets('none');
305
+
311
306
margin-bottom: $cart-item-spacing;
312
307
text-align: right;
313
308
width: 100%;
···
329
324
330
325
.cart-total {
331
326
@include clearfix;
327
+
332
328
border-bottom: 0;
333
329
334
330
@include breakpoint('medium') {
···
434
430
.coupon-form,
435
431
.cart-gift-certificate-form {
436
432
@include clearfix;
433
+
437
434
font-size: 0;
438
435
margin-bottom: spacing('base');
439
436
···
509
506
510
507
.cart-actions {
511
508
@include clearfix;
509
+
512
510
clear: both;
513
511
514
512
.button {
···
543
541
544
542
// Cart Preview
545
543
// -----------------------------------------------------------------------------
546
-
//
547
544
// 1. Need to vertically align a block of text
548
-
//
549
545
// -----------------------------------------------------------------------------
550
546
551
547
.previewCartWrapper {
···
555
551
556
552
.previewCartList {
557
553
@include u-listReset;
554
+
558
555
border-collapse: collapse;
559
556
display: table;
560
557
table-layout: fixed;
···
563
560
564
561
.previewCartItem {
565
562
@include grid-row;
563
+
566
564
display: table-row;
567
565
line-height: lineHeight('smaller');
568
566
···
579
577
580
578
.previewCartItem-image {
581
579
@include grid-column(4, $float: false);
582
-
583
580
@include lazy-loaded-padding('productthumb_size');
581
+
584
582
padding: 0;
585
583
position: relative;
586
584
text-align: center;
587
585
588
586
img {
589
587
@include lazy-loaded-img;
588
+
590
589
max-height: 90%;
591
590
}
592
591
···
603
602
604
603
.previewCartItem-content {
605
604
@include grid-column(8, $float: false);
605
+
606
606
padding-left: 0;
607
607
}
608
608
···
629
629
630
630
.previewCartAction {
631
631
@include grid-row;
632
+
632
633
border-top: container('border');
633
634
display: block;
634
635
···
682
683
683
684
.previewCart-additionalCheckoutButtons {
684
685
@extend %additionalCheckoutButtons;
686
+
685
687
padding-bottom: spacing('single');
686
688
padding-right: spacing('single');
687
689
}
+30
-36
assets/scss/components/stencil/compare/_compare.scss
+30
-36
assets/scss/components/stencil/compare/_compare.scss
···
2
2
// COMPARE (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Compare table layout
7
6
// -----------------------------------------------------------------------------
8
-
//
9
7
// 1. Foundation Magellan plugin.
10
-
//
11
8
// -----------------------------------------------------------------------------
12
9
13
10
.compareTable {
14
-
border-top: container("border");
11
+
border-top: container('border');
15
12
table-layout: fixed;
16
13
width: 100%;
17
14
}
···
22
19
+ .compareTable-row {
23
20
.compareTable-heading,
24
21
.compareTable-item {
25
-
border-top: container("border");
22
+
border-top: container('border');
26
23
}
27
24
28
25
.compareTable-heading:empty {
···
31
28
}
32
29
}
33
30
34
-
35
31
// Compare table headings
36
32
// -----------------------------------------------------------------------------
37
33
38
34
.compareTable-heading {
39
-
font-family: fontFamily("headingSans");
40
-
font-size: fontSize("smaller");
41
-
font-weight: fontWeight("normal");
42
-
padding: (spacing("base") + spacing("sixth")) spacing("base");
35
+
font-family: fontFamily('headingSans');
36
+
font-size: fontSize('smaller');
37
+
font-weight: fontWeight('normal');
38
+
padding: (spacing('base') + spacing('sixth')) spacing('base');
43
39
position: relative;
44
40
text-align: right;
45
41
width: 0;
46
42
47
-
@include breakpoint("medium") {
43
+
@include breakpoint('medium') {
48
44
width: grid-calc(3, $total-columns);
49
45
}
50
46
}
51
47
52
48
.compareTable-headingText {
53
49
position: absolute;
54
-
top: spacing("base") + spacing("sixth");
50
+
top: spacing('base') + spacing('sixth');
55
51
white-space: nowrap;
56
52
57
-
@include breakpoint("medium") {
53
+
@include breakpoint('medium') {
58
54
position: inherit;
59
55
top: inherit;
60
56
}
61
57
}
62
-
63
58
64
59
// Compare table item
65
60
// -----------------------------------------------------------------------------
66
61
67
62
.compareTable-item {
68
-
padding: (spacing("double") + spacing("sixth")) spacing("base") (spacing("base") + spacing("sixth"));
63
+
padding: (spacing('double') + spacing('sixth')) spacing('base')
64
+
(spacing('base') + spacing('sixth'));
69
65
70
-
@include breakpoint("medium") {
71
-
padding-top: spacing("base") + spacing("sixth");
66
+
@include breakpoint('medium') {
67
+
padding-top: spacing('base') + spacing('sixth');
72
68
}
73
69
}
74
-
75
70
76
71
// Remove product
77
72
// -----------------------------------------------------------------------------
78
73
79
74
.compareTable-removeProduct {
80
-
background-color: container("fill", "dark");
75
+
background-color: container('fill', 'dark');
81
76
border-radius: 50%;
82
-
height: spacing("single") + spacing("base");
77
+
height: spacing('single') + spacing('base');
83
78
position: absolute;
84
-
right: -(spacing("base"));
85
-
top: -(spacing("base"));
79
+
right: -(spacing('base'));
80
+
top: -(spacing('base'));
86
81
transition: background-color 0.15s ease;
87
-
width: spacing("single") + spacing("base");
82
+
width: spacing('single') + spacing('base');
88
83
89
84
.icon {
90
-
fill: stencilColor("icon-color");
91
-
height: spacing("single");
92
-
margin-top: spacing("third");
93
-
width: spacing("single");
85
+
fill: stencilColor('icon-color');
86
+
height: spacing('single');
87
+
margin-top: spacing('third');
88
+
width: spacing('single');
94
89
}
95
90
}
96
-
97
91
98
92
// Compare product card
99
93
// -----------------------------------------------------------------------------
100
94
101
95
.compareTable-product {
102
-
font-weight: fontWeight("normal");
103
-
padding: (spacing("single") + spacing("third")) spacing("base") (spacing("base") + spacing("sixth"));
96
+
font-weight: fontWeight('normal');
97
+
padding: (spacing('single') + spacing('third')) spacing('base')
98
+
(spacing('base') + spacing('sixth'));
104
99
105
100
.card {
106
101
margin-bottom: 0;
107
102
}
108
103
109
104
.card-body {
110
-
min-height: spacing("single") * 4;
111
-
padding-top: spacing("base");
105
+
min-height: spacing('single') * 4;
106
+
padding-top: spacing('base');
112
107
}
113
108
114
109
.card-figure {
···
116
111
}
117
112
}
118
113
119
-
120
114
// Compare action
121
115
// -----------------------------------------------------------------------------
122
116
123
117
.compareTable-action {
124
-
padding: 0 spacing("base") spacing("base");
118
+
padding: 0 spacing('base') spacing('base');
125
119
126
120
.button {
127
121
display: block;
128
-
padding-left: spacing("half");
129
-
padding-right: spacing("half");
122
+
padding-left: spacing('half');
123
+
padding-right: spacing('half');
130
124
width: 100%;
131
125
}
132
126
}
+3
-1
assets/scss/components/stencil/facetLabel/_facetLabel.scss
+3
-1
assets/scss/components/stencil/facetLabel/_facetLabel.scss
···
5
5
.facetLabel {
6
6
background: $facetLabel-backgroundColor;
7
7
border-radius: $facetLabel-borderRadius;
8
-
padding: spacing("eighth") spacing("third") spacing("eighth") (spacing("third") + spacing("eighth"));
8
+
padding: spacing('eighth') spacing('third') spacing('eighth')
9
+
(spacing('third') + spacing('eighth'));
9
10
text-decoration: none;
10
11
11
12
.icon {
12
13
@include square(12px);
14
+
13
15
display: inline-block;
14
16
fill: $facetLabel-removeIcon-color;
15
17
position: relative; // Vertical align the icon
+8
-15
assets/scss/components/stencil/facetedSearch/_facetedSearch.scss
+8
-15
assets/scss/components/stencil/facetedSearch/_facetedSearch.scss
···
2
2
// FACET SEARCH (CSS)
3
3
// =============================================================================
4
4
5
-
6
5
// Faceted search toggle
7
6
// -----------------------------------------------------------------------------
8
-
//
9
7
// 1. Do not show if viewport is over "medium" breakpoint
10
-
//
11
8
// -----------------------------------------------------------------------------
12
9
.facetedSearch-toggle {
13
10
@include grid-row;
11
+
14
12
border: $facetedSearch-toggle-border;
15
13
border-radius: $facetedSearch-toggle-borderRadius;
16
14
border-width: $facetedSearch-toggle-borderWidth;
···
18
16
margin-bottom: $facetedSearch-toggle-verticalSpacing;
19
17
padding: $facetedSearch-toggle-padding;
20
18
21
-
@include breakpoint("medium") {
19
+
@include breakpoint('medium') {
22
20
display: none !important; // 1
23
21
}
24
22
···
37
35
38
36
.facetedSearch-toggle-text {
39
37
@include grid-column(7);
38
+
40
39
padding: 0;
41
40
text-align: left;
42
41
}
43
42
44
43
.facetedSearch-toggle-indicator {
45
44
@include grid-column(5);
45
+
46
46
font-weight: bold;
47
47
padding: 0;
48
48
text-align: right;
49
49
}
50
-
51
50
52
51
// Faceted search nav list
53
52
// -----------------------------------------------------------------------------
54
-
//
55
53
// 1. Do not show if viewport is over "medium" breakpoint
56
-
//
57
54
// -----------------------------------------------------------------------------
58
55
.facetedSearch-navList {
59
56
display: none;
60
57
61
-
@include breakpoint("medium") {
58
+
@include breakpoint('medium') {
62
59
display: block !important; // 1
63
60
}
64
61
···
77
74
margin-top: $facetedSearch-toggle-verticalSpacing;
78
75
}
79
76
80
-
81
77
.facetedSearch-toggle + &.is-open,
82
78
.sidebarBlock + &.is-open {
83
79
margin-top: -1px;
84
80
85
-
@include breakpoint("medium") {
81
+
@include breakpoint('medium') {
86
82
margin-top: $facetedSearch-toggle-verticalSpacing;
87
83
}
88
84
}
89
85
90
86
.navList--inner {
91
-
margin-left: spacing("single");
87
+
margin-left: spacing('single');
92
88
}
93
89
}
94
90
···
101
97
column-gap: 20px;
102
98
}
103
99
104
-
105
100
// Faceted search refine filters
106
101
// -----------------------------------------------------------------------------
107
-
//
108
102
// 1. Only show if viewport is over "medium" breakpoint
109
-
//
110
103
// -----------------------------------------------------------------------------
111
104
.facetedSearch-refineFilters {
112
105
display: none;
113
106
114
-
@include breakpoint("medium") {
107
+
@include breakpoint('medium') {
115
108
display: block; // 1
116
109
}
117
110
}
+38
-36
assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
+38
-36
assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
···
1
1
// HERO CAROUSEL
2
2
// -----------------------------------------------------------------------------
3
-
//
4
3
// Purpose: Styles the hero carousel component, which basically adds extras to the
5
4
// vendor slick carousel, to specifically display hero images.
6
-
//
7
5
// 1. Use object-fit on the image tag to keep aspect ratio and cover the space
8
6
// created by the outer div. The JS will detect browsers that do not support
9
7
// object-fit and instead copy the image src to a the background-image of the
10
8
// wrapper div and add the compat-object-fit class.
11
-
//
12
9
// 3. Allows image to scale on large screens while preventing the top and bottom
13
10
// from becoming cut off.
14
11
// -----------------------------------------------------------------------------
15
12
16
13
.heroCarousel {
17
-
margin-bottom: (spacing("double") + spacing("single"));
18
-
margin-top: -(spacing("single")); // 3
14
+
margin-bottom: (spacing('double') + spacing('single'));
15
+
margin-top: -(spacing('single')); // 3
19
16
min-width: 100%;
20
17
width: 1px;
21
18
22
-
@include breakpoint("medium") {
23
-
margin-top: -(spacing("single") + spacing("base")); // 3
19
+
@include breakpoint('medium') {
20
+
margin-top: -(spacing('single') + spacing('base')); // 3
24
21
}
25
22
26
23
&.slick-initialized {
27
-
@include breakpoint("small") {
24
+
@include breakpoint('small') {
28
25
max-height: remCalc(400px);
29
26
}
30
27
31
-
@include breakpoint("medium") {
28
+
@include breakpoint('medium') {
32
29
max-height: remCalc(600px);
33
30
}
34
31
}
···
42
39
}
43
40
}
44
41
45
-
&:not(.slick-initialized) :not(.heroCarousel-slide--first).heroCarousel-slide {
42
+
&:not(.slick-initialized)
43
+
:not(.heroCarousel-slide--first).heroCarousel-slide {
46
44
display: none;
47
45
}
48
46
···
60
58
.slick-next {
61
59
right: 15px;
62
60
63
-
@include breakpoint("medium") {
61
+
@include breakpoint('medium') {
64
62
right: 25px;
65
63
}
66
64
}
···
68
66
.slick-prev {
69
67
left: 15px;
70
68
71
-
@include breakpoint("medium") {
69
+
@include breakpoint('medium') {
72
70
left: 25px;
73
71
}
74
72
}
75
73
76
74
.slick-dots {
77
-
bottom: spacing("third");
75
+
bottom: spacing('third');
78
76
79
-
@include breakpoint("medium") {
80
-
bottom: spacing("single");
77
+
@include breakpoint('medium') {
78
+
bottom: spacing('single');
81
79
}
82
80
83
81
li {
···
101
99
&.is-square-image-type,
102
100
&.is-vertical-image-type {
103
101
.heroCarousel-image-wrapper {
104
-
@include breakpoint("small") {
102
+
@include breakpoint('small') {
105
103
height: 56.25vw;
106
104
}
107
105
}
···
109
107
110
108
&.is-image-error {
111
109
.heroCarousel-image-wrapper {
112
-
background: url("../img/hero-carousel-image-load-error.svg") center center no-repeat;
113
-
background-size: contain;
110
+
background: url('../img/hero-carousel-image-load-error.svg')
111
+
center center no-repeat;
112
+
background-size: contain;
114
113
}
115
114
}
116
115
}
···
129
128
object-position: 50% 0%;
130
129
width: 100%;
131
130
132
-
@include breakpoint("small") {
131
+
@include breakpoint('small') {
133
132
object-position: 50% 50%;
134
133
}
135
134
}
···
140
139
object-position: 50% 50%;
141
140
}
142
141
143
-
&.compat-object-fit { // 1
142
+
&.compat-object-fit {
143
+
// 1
144
144
.heroCarousel-image {
145
145
height: 100%;
146
146
width: 100%;
···
148
148
}
149
149
}
150
150
151
-
&.compat-object-fit { // 1
151
+
&.compat-object-fit {
152
+
// 1
152
153
overflow: hidden;
153
154
154
155
.heroCarousel-image {
···
164
165
max-height: 100vh;
165
166
transition: height 0.3s ease;
166
167
167
-
@include breakpoint("small") {
168
+
@include breakpoint('small') {
168
169
max-height: remCalc(400px);
169
170
}
170
171
171
-
@include breakpoint("medium") {
172
+
@include breakpoint('medium') {
172
173
max-height: remCalc(600px);
173
174
}
174
175
}
···
176
177
177
178
.heroCarousel-content {
178
179
background-color: rgba($carousel-bgColor, 1);
179
-
padding: spacing("half") spacing("single") (spacing("double"));
180
+
padding: spacing('half') spacing('single') (spacing('double'));
180
181
text-align: center;
181
182
182
-
@include breakpoint("small") {
183
+
@include breakpoint('small') {
183
184
@include carouselOpaqueBackgrounds;
185
+
184
186
background-color: rgba($carousel-bgColor, 0.9);
185
187
left: 0;
186
188
margin: 0 auto;
187
189
max-height: 80%;
188
190
overflow: auto;
189
-
padding: spacing("single") * 1.5;
190
-
padding: spacing("single");
191
+
padding: spacing('single') * 1.5;
192
+
padding: spacing('single');
191
193
position: absolute;
192
194
right: 0;
193
195
top: 50%;
···
209
211
210
212
.heroCarousel-title {
211
213
color: $carousel-title-color;
212
-
font-size: fontSize("small");
214
+
font-size: fontSize('small');
213
215
margin: 0;
214
216
215
-
@include breakpoint("medium") {
216
-
font-size: fontSize("hero");
217
+
@include breakpoint('medium') {
218
+
font-size: fontSize('hero');
217
219
}
218
220
}
219
221
220
222
.heroCarousel-description {
221
223
color: $carousel-description-color;
222
-
font-size: fontSize("tiny");
224
+
font-size: fontSize('tiny');
223
225
margin: 0;
224
226
225
-
@include breakpoint("small") {
226
-
font-size: fontSize("smallest");
227
+
@include breakpoint('small') {
228
+
font-size: fontSize('smallest');
227
229
}
228
230
229
-
@include breakpoint("medium") {
230
-
font-size: fontSize("smaller");
231
+
@include breakpoint('medium') {
232
+
font-size: fontSize('smaller');
231
233
}
232
234
}
233
235
234
236
.heroCarousel-action {
235
-
margin: spacing("single") 0 0;
237
+
margin: spacing('single') 0 0;
236
238
}
+13
-2
assets/scss/custom/_variables.scss
+13
-2
assets/scss/custom/_variables.scss
···
1
1
/* Variables */
2
+
3
+
/* Breakpoints */
2
4
$tablet: 800px;
3
5
$tablet-m: 801px;
4
6
$mobile: 550px;
5
-
$color-f-w: #fff;
7
+
8
+
/* Colors */
9
+
$color-brand-primary: #687d6a;
10
+
$color-error: #721c24;
11
+
$color-grey-dark: #666;
12
+
$color-gray-dark: #666;
13
+
$color-grey-medium: #8f8f8f;
14
+
$color-gray-medium: #8f8f8f;
15
+
$color-grey-light: #ddd;
16
+
$color-gray-light: #ddd;
17
+
$color-white: #fff;
6
18
$color-f-b: #232524;
7
-
$color-p: #687d6a;
+72
-48
assets/scss/custom/components/_accountsReward.scss
+72
-48
assets/scss/custom/components/_accountsReward.scss
···
2
2
.account-content {
3
3
.reward-section {
4
4
padding: 20px 0;
5
-
border-bottom: 5px solid $color-p;
5
+
border-bottom: 5px solid $color-brand-primary;
6
+
6
7
&:not(:first-child) {
7
8
padding: 40px 0;
8
9
}
9
10
}
11
+
10
12
.reward-form {
11
13
display: grid;
12
14
grid-template-columns: 1fr 1fr;
13
15
gap: 20px;
16
+
14
17
button {
15
18
margin: 0;
16
19
grid-column: 1 / 3;
17
20
}
18
21
}
22
+
19
23
button {
20
24
margin-top: 20px;
25
+
21
26
@media (max-width: $tablet) {
22
27
width: 100%;
23
28
}
24
-
}
25
-
.disabled {
26
-
background-color: #a2a2a2 !important;
27
-
opacity: 0.8;
28
-
color: whitesmoke !important;
29
-
pointer-events: none;
29
+
30
+
&.disabled {
31
+
background-color: $color-gray-light;
32
+
opacity: 0.8;
33
+
color: $color-white;
34
+
pointer-events: none;
35
+
}
30
36
}
37
+
31
38
input:not([type='radio']),
32
39
select {
33
40
height: 48px;
34
41
border-radius: 32px;
35
-
font-family: 'Filson Pro';
36
42
font-size: 1rem;
37
43
line-height: 48px;
38
44
appearance: none;
39
-
background-color: white;
40
-
border: 1px solid #8f8f8f;
41
-
color: #666666;
45
+
background-color: $color-white;
46
+
border: 1px solid $color-gray-medium;
47
+
color: $color-gray-dark;
42
48
display: block;
43
49
font-family: inherit;
44
50
margin: 0;
45
-
padding: 0rem 1rem;
46
-
51
+
padding: 0 1rem;
47
52
transition: border-color 100ms ease-out;
48
53
width: 100%;
49
54
}
···
52
57
#loyalty-points-balance {
53
58
font-weight: bold;
54
59
}
60
+
55
61
.list-of-cats {
56
62
display: grid;
57
63
grid-template-columns: repeat(2, minmax(200px, 1fr));
58
64
gap: 20px;
59
65
padding: 20px;
66
+
60
67
@media (max-width: $tablet) {
61
68
grid-template-columns: 1fr;
62
69
}
70
+
63
71
.cat {
64
72
position: relative;
65
-
background-color: #fff;
66
-
border: 1px solid #ddd;
73
+
background-color: $color-white;
74
+
border: 1px solid $color-gray-light;
67
75
border-radius: 8px;
68
76
padding: 20px;
69
77
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
78
+
70
79
&.disabled {
71
-
background-color: #8f8f8f;
72
-
color: #666666;
80
+
background-color: $color-gray-medium;
81
+
color: $color-gray-dark;
73
82
}
83
+
74
84
.cat-header {
75
85
font-size: 20px;
76
86
font-weight: bold;
···
84
94
}
85
95
}
86
96
}
97
+
87
98
.account-footer {
88
99
text-align: center;
89
100
padding: 40px 0.75rem;
90
101
width: 100%;
91
102
float: left;
92
103
}
104
+
93
105
#previous-length,
94
106
#previous-friends-length {
95
107
margin-top: 1rem;
96
108
}
109
+
97
110
#previous-grid,
98
111
#previous-friends-grid {
99
-
border: 1px solid #ddd;
112
+
border: 1px solid $color-gray-light;
100
113
border-radius: 1rem;
101
114
padding: 20px;
102
115
display: none;
···
105
118
106
119
@media (max-width: $mobile) {
107
120
overflow: auto;
121
+
108
122
.previous-grid-title {
109
123
font-size: 0.9rem;
110
124
}
125
+
111
126
.previous-grid-item {
112
127
font-size: 0.7rem;
113
128
}
129
+
114
130
.previous-grid-item:nth-child(3) {
115
131
text-align: right;
116
132
}
117
133
}
118
134
}
135
+
119
136
.previous-grid-title {
120
137
font-size: 1.15rem;
121
138
font-weight: bold;
122
-
border-bottom: 1px solid #ddd;
139
+
border-bottom: 1px solid $color-gray-light;
123
140
}
124
141
125
142
.previous-grid-item {
126
143
font-size: 0.8rem;
127
144
padding: 0.75rem 0;
128
-
border-bottom: 1px solid #ddd;
145
+
border-bottom: 1px solid $color-gray-light;
129
146
}
130
147
}
131
148
132
149
.cat button {
133
-
border: 1px solid #8f8f8f;
150
+
border: 1px solid $color-gray-medium;
134
151
border-radius: 5px;
135
-
background-color: #687d6a;
136
-
color: white;
152
+
background-color: $color-brand-primary;
153
+
color: $color-white;
137
154
transition: all 0.2s;
138
-
}
139
-
.cat button:hover {
140
-
background-color: white;
141
-
color: #687d6a;
155
+
156
+
&:hover {
157
+
background-color: $color-white;
158
+
color: $color-brand-primary;
159
+
}
142
160
}
143
161
144
162
.cat-birthdays {
145
163
display: none;
146
164
}
165
+
147
166
.household-question {
148
167
display: none;
149
168
font-size: 1.3rem;
150
-
color: #687d6a;
151
-
}
152
-
.household-question button {
153
-
font-size: 1rem;
154
-
color: initial;
155
-
border: 1px solid #687d6a;
156
-
padding: 0.5rem 1rem;
157
-
margin: 0.5rem;
158
-
border-radius: 5px;
159
-
transition: background-color 0.2s, color 0.2s;
160
-
}
161
-
.household-question button:hover {
162
-
background-color: #687d6a;
163
-
color: white;
169
+
color: $color-brand-primary;
170
+
171
+
button {
172
+
font-size: 1rem;
173
+
color: initial;
174
+
border: 1px solid $color-brand-primary;
175
+
padding: 0.5rem 1rem;
176
+
margin: 0.5rem;
177
+
border-radius: 5px;
178
+
transition:
179
+
background-color 0.2s,
180
+
color 0.2s;
181
+
182
+
&:hover {
183
+
background-color: $color-brand-primary;
184
+
color: $color-white;
185
+
}
186
+
}
164
187
}
188
+
165
189
.birthday-error {
166
190
display: none;
167
-
color: red;
191
+
color: $color-error;
168
192
}
169
193
170
194
.add-cat-btn {
···
173
197
174
198
#change-slot-dialog {
175
199
border-radius: 0.5rem;
176
-
border-color: #687d6a;
200
+
border-color: $color-brand-primary;
177
201
padding-inline: 1.5rem;
178
202
}
179
203
···
189
213
190
214
#change-slot-dialog button {
191
215
margin-top: 1rem;
192
-
border: 1px solid #8f8f8f;
216
+
border: 1px solid $color-gray-medium;
193
217
border-radius: 5px;
194
-
background-color: #687d6a;
195
-
color: white;
218
+
background-color: $color-brand-primary;
219
+
color: $color-white;
196
220
transition: all 0.2s;
197
221
198
222
&:hover {
199
-
background-color: white;
200
-
color: #687d6a;
223
+
background-color: $color-white;
224
+
color: $color-brand-primary;
201
225
}
202
226
}
+154
-138
assets/scss/custom/components/_blogs.scss
+154
-138
assets/scss/custom/components/_blogs.scss
···
1
1
.blogs-subheading {
2
-
text-align: center;
3
-
width: 95%;
4
-
margin: auto;
2
+
text-align: center;
3
+
width: 95%;
4
+
margin: auto;
5
5
}
6
6
7
-
/*Blogs Page Grid*/
7
+
/* Blogs Page Grid */
8
8
9
9
.blogs-grid {
10
-
display: grid;
11
-
grid-template-columns: 1fr;
12
-
grid-gap: 1rem;
13
-
margin-top: 3rem;
14
-
margin-bottom: 3rem;
15
-
border: 1px solid transparent;
10
+
display: grid;
11
+
grid-template-columns: 1fr;
12
+
gap: 1rem;
13
+
margin-top: 3rem;
14
+
margin-bottom: 3rem;
15
+
border: 1px solid transparent;
16
16
17
-
.blog {
18
-
-webkit-box-shadow: 0px 0px 8px 0px #dcdcdc8c;
19
-
-moz-box-shadow: 0px 0px 8px 0px #dcdcdc8c;
20
-
box-shadow: 0px 0px 8px 0px #dcdcdc8c;
21
-
border: 1px solid #dcdcdc !important;
22
-
border-radius: 20px;
23
-
margin: 0 auto 0.5rem;
24
-
padding-top: 0;
25
-
padding-bottom: 2.5rem;
26
-
width: 95%;
27
-
a{
28
-
color: $body-color;
29
-
text-decoration: none;
30
-
}
31
-
.blog-small-image {
32
-
display: block !important;
33
-
width: 100%;
34
-
img {
35
-
width: 100%;
36
-
border-radius: 20px 20px 0 0;
37
-
}
38
-
}
17
+
.blog {
18
+
box-shadow: 0 0 8px 0 #dcdcdc8c;
19
+
border: 1px solid #dcdcdc !important;
20
+
border-radius: 20px;
21
+
margin: 0 auto 0.5rem;
22
+
padding-top: 0;
23
+
padding-bottom: 2.5rem;
24
+
width: 95%;
39
25
40
-
.blog-thumbnail {
41
-
display: none;
42
-
}
43
-
.blog-post-body {
44
-
width: 90%;
45
-
margin: auto;
46
-
.blog-title {
47
-
text-align: left;
48
-
font-weight: 700;
49
-
margin: 2rem 0 1rem;
50
-
font-size: 20px;
51
-
@include breakpoint("medium") {
52
-
font-size: 24px;
53
-
}
54
26
a {
55
-
color: $body-color;
27
+
color: $body-color;
28
+
text-decoration: none;
56
29
}
57
-
}
58
-
.blog-date {
59
-
display: none;
60
-
}
61
-
}
62
-
.blog-read-more {
63
-
margin-top: 2rem;
64
-
a {
65
-
font-weight: 700;
66
-
border-radius: 32px;
67
-
border: 1px solid $input-field;
68
-
width: fit-content;
69
-
padding: 14px;
70
-
transition: all 0.15s ease;
71
-
}
30
+
31
+
.blog-small-image {
32
+
display: block !important;
33
+
width: 100%;
34
+
35
+
img {
36
+
width: 100%;
37
+
border-radius: 20px 20px 0 0;
38
+
}
39
+
}
40
+
41
+
.blog-thumbnail {
42
+
display: none;
43
+
}
44
+
45
+
.blog-post-body {
46
+
width: 90%;
47
+
margin: auto;
48
+
49
+
.blog-title {
50
+
text-align: left;
51
+
font-weight: 700;
52
+
margin: 2rem 0 1rem;
53
+
font-size: 20px;
54
+
55
+
@include breakpoint('medium') {
56
+
font-size: 24px;
57
+
}
58
+
59
+
a {
60
+
color: $body-color;
61
+
}
62
+
}
63
+
64
+
.blog-date {
65
+
display: none;
66
+
}
67
+
}
72
68
73
-
&:hover{
74
-
a{
75
-
color: $headingColor;
69
+
.blog-read-more {
70
+
margin-top: 2rem;
71
+
72
+
a {
73
+
font-weight: 700;
74
+
border-radius: 32px;
75
+
border: 1px solid $input-field;
76
+
width: fit-content;
77
+
padding: 14px;
78
+
transition: all 0.15s ease;
79
+
}
80
+
81
+
&:hover {
82
+
a {
83
+
color: $headingColor;
84
+
}
85
+
}
76
86
}
77
-
}
87
+
88
+
@include breakpoint('medium') {
89
+
width: 100%;
90
+
}
78
91
}
79
92
80
-
@include breakpoint("medium") {
81
-
width: 100%;
93
+
@include breakpoint('medium') {
94
+
grid-template-columns: 1fr 1fr 1fr;
82
95
}
83
-
}
84
-
@include breakpoint("medium") {
85
-
grid-template-columns: 1fr 1fr 1fr;
86
-
}
87
96
}
88
97
89
-
/*Blog page*/
98
+
/* Blog page */
90
99
.blog-post-figure {
91
-
.blog-thumbnail {
92
-
display: none;
93
-
max-width: 99.4vw;
94
-
width: 99.4vw;
95
-
position: relative;
96
-
left: calc(-50vw + 50%);
97
-
img{
98
-
height: 400px;
99
-
width: 100%;
100
+
.blog-thumbnail {
101
+
display: none;
102
+
max-width: 99.4vw;
103
+
width: 99.4vw;
104
+
position: relative;
105
+
left: calc(-50vw + 50%);
106
+
107
+
img {
108
+
height: 400px;
109
+
width: 100%;
110
+
}
100
111
}
101
-
}
102
112
}
103
113
104
114
.blog {
105
-
margin-bottom: 3rem;
106
-
border: none;
115
+
margin-bottom: 3rem;
116
+
border: none;
107
117
108
-
.blog-small-image {
109
-
display: none;
110
-
}
118
+
.blog-small-image {
119
+
display: none;
120
+
}
111
121
112
-
.blog-date {
113
-
margin: 1.5rem auto;
114
-
}
115
-
.blog-title {
116
-
font-size: 36px;
117
-
@include breakpoint("medium") {
118
-
font-size: 48px;
122
+
.blog-date {
123
+
margin: 1.5rem auto;
119
124
}
120
-
a {
121
-
color: $headingColor;
122
-
font-weight: 700;
123
-
text-decoration: none;
124
-
}
125
-
}
126
-
.blog-post-body {
127
-
@include breakpoint("medium") {
128
-
width: 75%;
125
+
126
+
.blog-title {
127
+
font-size: 36px;
128
+
129
+
@include breakpoint('medium') {
130
+
font-size: 48px;
131
+
}
132
+
133
+
a {
134
+
color: $headingColor;
135
+
font-weight: 700;
136
+
text-decoration: none;
137
+
}
129
138
}
130
-
}
131
-
.socialLinks {
132
-
margin-top: 1.5rem;
133
-
text-align: left;
134
-
}
135
139
136
-
.tags {
137
-
padding-left: 0;
138
-
text-align: left;
139
-
margin-top: 1.5rem;
140
-
.tag {
141
-
margin-right: 10px;
142
-
a {
143
-
font-weight: 700;
144
-
border: 1px solid $headingColor;
145
-
color: $headingColor !important;
146
-
border-radius: 25px;
147
-
padding: 12px 16px;
148
-
text-decoration: none;
149
-
}
140
+
.blog-post-body {
141
+
@include breakpoint('medium') {
142
+
width: 75%;
143
+
}
150
144
}
151
-
}
145
+
146
+
.socialLinks {
147
+
margin-top: 1.5rem;
148
+
text-align: left;
152
149
153
-
.socialLinks {
154
-
li {
155
-
display: none;
150
+
li {
151
+
display: none;
152
+
153
+
.icon {
154
+
// margin-right: 10px;
155
+
svg {
156
+
fill: $headingColor;
157
+
width: 28px;
158
+
margin-right: 10px;
159
+
}
160
+
}
161
+
}
156
162
157
-
.icon {
158
-
// margin-right: 10px;
159
-
svg {
160
-
fill: $headingColor;
161
-
width: 28px;
162
-
margin-right: 10px;
163
+
.socialLinks-item--twitter,
164
+
.socialLinks-item--facebook {
165
+
display: inline-block;
163
166
}
164
-
}
165
167
}
166
-
.socialLinks-item--twitter,
167
-
.socialLinks-item--facebook {
168
-
display: inline-block;
168
+
169
+
.tags {
170
+
padding-left: 0;
171
+
text-align: left;
172
+
margin-top: 1.5rem;
173
+
174
+
.tag {
175
+
margin-right: 10px;
176
+
177
+
a {
178
+
font-weight: 700;
179
+
border: 1px solid $headingColor;
180
+
color: $headingColor !important;
181
+
border-radius: 25px;
182
+
padding: 12px 16px;
183
+
text-decoration: none;
184
+
}
185
+
}
169
186
}
170
-
}
171
187
}
172
188
173
189
/* #blogs-tags {
+4
-4
assets/scss/custom/components/widgets/_homepage_carousel.scss
+4
-4
assets/scss/custom/components/widgets/_homepage_carousel.scss
···
155
155
font-size: 36px;
156
156
line-height: 36px;
157
157
font-weight: 600;
158
-
color: $color-p;
158
+
color: $color-brand-primary;
159
159
font-family: 'Filson Pro', sans-serif;
160
160
161
161
@media only screen and (min-width: 651px) {
162
162
padding: 0;
163
163
text-align: left;
164
-
color: $color-f-w;
164
+
color: $color-white;
165
165
}
166
166
167
167
@media only screen and (min-width: 1251px) {
···
182
182
@media only screen and (min-width: 651px) {
183
183
padding: 0 0 1rem;
184
184
text-align: left;
185
-
color: $color-f-w;
185
+
color: $color-white;
186
186
font-size: 25px;
187
187
}
188
188
···
242
242
height: 12px;
243
243
width: 12px;
244
244
border-color: transparent;
245
-
background-color: $color-f-w;
245
+
background-color: $color-white;
246
246
247
247
&::before,
248
248
&::after {
+3
-3
assets/scss/custom/pages/_diet-builder.scss
+3
-3
assets/scss/custom/pages/_diet-builder.scss
···
743
743
font-weight: 700;
744
744
text-transform: uppercase;
745
745
letter-spacing: 0.05em;
746
-
color: $color-p;
746
+
color: $color-brand-primary;
747
747
margin-bottom: 12px;
748
748
}
749
749
···
776
776
777
777
.diet-builder-health__info-chevron {
778
778
font-size: 16px;
779
-
color: $color-p;
779
+
color: $color-brand-primary;
780
780
transition: transform 0.2s ease;
781
781
flex-shrink: 0;
782
782
}
···
791
791
.diet-builder-health__info-item--open {
792
792
.diet-builder-health__info-header {
793
793
background-color: rgba(104, 125, 106, 0.1);
794
-
color: $color-p;
794
+
color: $color-brand-primary;
795
795
}
796
796
797
797
.diet-builder-health__info-chevron {
+4
stylelint.config.js
+4
stylelint.config.js
···
7
7
reportNeedlessDisables: true,
8
8
9
9
rules: {
10
+
'alpha-value-notation': null,
10
11
'color-function-alias-notation': null,
11
12
'color-function-notation': null,
12
13
'declaration-no-important': true,
13
14
'function-url-no-scheme-relative': true,
15
+
'function-name-case': null,
14
16
'no-descending-specificity': null,
15
17
'no-unknown-animations': true,
16
18
'no-unknown-custom-media': true,
···
19
21
'selector-class-pattern': null,
20
22
'selector-id-pattern': null,
21
23
'scss/dollar-variable-pattern': null,
24
+
'scss/at-mixin-argumentless-call-parentheses': null,
25
+
'scss/percent-placeholder-pattern': null,
22
26
'keyframes-name-pattern': null,
23
27
},
24
28
};
+20
-14
templates/components/custom/calculator-toggler-mobile.html
+20
-14
templates/components/custom/calculator-toggler-mobile.html
···
2
2
<div class="inner">
3
3
<p id="toggler-active">
4
4
{{#if settings.request.absolute_path '===' '/rawsome-catculator/'}}
5
-
Rawsome Catculator {{else}} Dry Matter Basis Calculator
5
+
Rawsome Catculator
6
+
{{else}} Dry Matter Basis Calculator
6
7
{{/if}}
7
8
<span id="toggler-dropdown-chevron">
8
-
<svg
9
-
width="12"
10
-
height="9"
11
-
viewBox="0 0 12 9"
12
-
fill="none"
13
-
xmlns="http://www.w3.org/2000/svg"
14
-
>
15
-
<path
16
-
d="M1.41 0.840027L6 5.42003L10.59 0.840027L12 2.25003L6 8.25003L0 2.25003L1.41 0.840027Z"
17
-
fill="#5E5E5E"
18
-
/>
9
+
<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
10
+
<path d="M1.41 0.840027L6 5.42003L10.59 0.840027L12 2.25003L6 8.25003L0 2.25003L1.41 0.840027Z"
11
+
fill="#5E5E5E" />
19
12
</svg>
20
13
</span>
21
14
</p>
22
15
<div id="toggler-dropdown">
23
16
<p>
24
17
<a
25
-
href="{{#if settings.request.absolute_path '===' '/rawsome-catculator/'}} /dry-matter-basis-calculator/ {{else}} /rawsome-catculator/ {{/if}}"
26
-
>
18
+
href="{{#if settings.request.absolute_path '===' '/rawsome-catculator/'}} /dry-matter-basis-calculator/ {{else}} /rawsome-catculator/ {{/if}}">
27
19
{{#if settings.request.absolute_path '===' '/rawsome-catculator/'}}
28
20
Dry Matter Basis Calculator
29
21
{{else}}
···
34
26
</div>
35
27
</div>
36
28
</div>
29
+
30
+
<script>
31
+
const togglerActiveEl = document.getElementById('toggler-active');
32
+
if (togglerActiveEl) {
33
+
togglerActiveEl.addEventListener('click', () => {
34
+
document
35
+
.getElementById('toggler-dropdown')
36
+
.classList.toggle('active');
37
+
document
38
+
.getElementById('toggler-dropdown-chevron')
39
+
.classList.toggle('open');
40
+
});
41
+
}
42
+
</script>
+3
-15
templates/pages/custom/page/rawsome-catculator.html
+3
-15
templates/pages/custom/page/rawsome-catculator.html
···
1
1
{{#partial "page"}}
2
2
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
3
3
{{{region name="page_builder_content__above-toggler"}}}
4
-
{{>components/custom/calculator-toggler}}
5
-
{{>components/custom/calculator-toggler-mobile}}
6
4
{{{region name="page_builder_content__below-toggler"}}}
7
5
8
6
<div class="rawsome-catculator-page">
···
396
394
397
395
const weightInput = () => {
398
396
const weight_input = document.getElementById('weight_input');
399
-
const re = /^[1-9][0-9]?$/;
400
-
401
-
const nextButton = document.querySelector(
397
+
const nextButton = weight_input.parentElement.querySelector(
402
398
'.rawsome-button--primary'
403
399
);
404
-
405
-
if (weight_input.value && !re.test(weight_input.value)) {
406
-
nextButton.disabled = true;
407
-
} else if (weight_input.value && re.test(weight_input.value)) {
408
-
nextButton.disabled = false;
409
-
} else {
410
-
nextButton.disabled = true;
411
-
}
412
-
413
-
400
+
const value = parseFloat(weight_input.value);
414
401
402
+
nextButton.disabled = isNaN(value) || value <= 0;
415
403
};
416
404
417
405
const toKittenPageTwo = () => {
+26
-24
templates/pages/order-confirmation.html
+26
-24
templates/pages/order-confirmation.html
···
1
1
{{#partial "head"}}
2
-
{{{ checkout.checkout_head }}}
3
-
{{{ stylesheet '/assets/css/optimized-checkout.css' }}}
4
-
{{ getFontsCollection }}
2
+
{{{ checkout.checkout_head }}}
3
+
{{{ stylesheet '/assets/css/optimized-checkout.css' }}}
4
+
{{ getFontsCollection }}
5
5
6
-
<script type="text/javascript">
7
-
window.language = {{{langJson 'optimized_checkout'}}};
8
-
</script>
6
+
<script type="text/javascript">
7
+
window.language = {{ {langJson 'optimized_checkout' } }};
8
+
</script>
9
9
10
-
{{{head.scripts}}}
10
+
{{{head.scripts}}}
11
11
12
12
{{/partial}}
13
13
14
14
{{#partial "page"}}
15
-
<header class="checkoutHeader optimizedCheckout-header">
16
-
<div class="checkoutHeader-content">
17
-
<h1 class="is-srOnly">{{lang 'checkout.title'}}</h1>
18
-
<h2 class="checkoutHeader-heading">
19
-
<a class="checkoutHeader-link" href="{{urls.home}}">
20
-
{{#if checkout.header_image}}
21
-
<img alt="{{settings.store_logo.title}}" class="checkoutHeader-logo" id="logoImage" src="{{ checkout.header_image }}"/>
22
-
{{ else }}
23
-
<span class="header-logo-text">{{settings.store_logo.title}}</span>
24
-
{{/if}}
25
-
</a>
26
-
</h2>
27
-
</div>
28
-
</header>
15
+
<header class="checkoutHeader optimizedCheckout-header">
16
+
<div class="checkoutHeader-content">
17
+
<h1 class="is-srOnly">{{lang 'checkout.title'}}</h1>
18
+
<h2 class="checkoutHeader-heading">
19
+
<a class="checkoutHeader-link" href="{{urls.home}}">
20
+
{{#if checkout.header_image}}
21
+
<img
22
+
alt="{{settings.store_logo.title}}" class="checkoutHeader-logo" id="logoImage"
23
+
src="{{ checkout.header_image }}" />
24
+
{{ else }}
25
+
<span class="header-logo-text">{{settings.store_logo.title}}</span>
26
+
{{/if}}
27
+
</a>
28
+
</h2>
29
+
</div>
30
+
</header>
29
31
30
-
{{{ checkout.order_confirmation_content }}}
31
-
{{{ footer.scripts }}}
32
+
{{{ checkout.order_confirmation_content }}}
33
+
{{{ footer.scripts }}}
32
34
{{/partial}}
33
35
34
-
{{> layout/empty}}
36
+
{{> layout/empty}}