@appdirect/sfb-theme-plaza 0.0.44 → 0.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/assets/css/theme/definitions/_accessibility.scss +42 -0
  2. package/assets/css/theme/definitions/_mixins.scss +1 -0
  3. package/assets/css/theme/generic/_default.scss +28 -21
  4. package/content/layout/base.html +32 -22
  5. package/content/pages/bundle/bundle.html +0 -1
  6. package/content/pages/help/help.html +5 -4
  7. package/content/pages/home/home.html +4 -0
  8. package/content/pages/listing/listing.html +5 -1
  9. package/content/pages/profile/profile-editions.html +4 -0
  10. package/content/pages/profile/profile-features.html +4 -0
  11. package/content/pages/profile/profile-questions.html +5 -1
  12. package/content/pages/profile/profile-resources.html +5 -1
  13. package/content/pages/profile/profile-reviews.html +5 -1
  14. package/content/pages/profile/profile-standaloneDomains.html +3 -1
  15. package/content/pages/profile/profile-support.html +5 -1
  16. package/content/pages/profile/profile.html +4 -0
  17. package/design-properties.json +8 -8
  18. package/editor-properties.json +33 -46
  19. package/header-footer/css/footer/_INDEX.scss +1 -1
  20. package/header-footer/css/header-components/_MPLogo.scss +29 -16
  21. package/header-footer/css/header-components/_cart.scss +2 -2
  22. package/header-footer/css/header-components/_dropdown.scss +7 -7
  23. package/header-footer/css/header-components/_header.scss +17 -11
  24. package/header-footer/css/header-components/_icons.scss +18 -7
  25. package/header-footer/css/header-components/_notifications.scss +2 -0
  26. package/header-footer/css/header-components/_responsive.scss +2 -1
  27. package/header-footer/footer.html +0 -6
  28. package/package.json +1 -1
  29. package/settings.json +794 -4
  30. package/translations/en-us.yml +46 -1
package/assets/css/theme/definitions/_accessibility.scss ADDED
@@ -0,0 +1,42 @@
1
+ // Only display content to screen readers
2
+ //
3
+ // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
4
+ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
5
+
6
+ @mixin sr-only() {
7
+ position: absolute;
8
+ width: 1px;
9
+ height: 1px;
10
+ padding: 0;
11
+ margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
12
+ overflow: hidden;
13
+ clip: rect(0, 0, 0, 0);
14
+ white-space: nowrap;
15
+ border: 0;
16
+ }
17
+
18
+ // Use in conjunction with .sr-only to only display content when it's focused.
19
+ //
20
+ // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
21
+ //
22
+ // Credit: HTML5 Boilerplate
23
+
24
+ @mixin sr-only-focusable() {
25
+ &:active,
26
+ &:focus {
27
+ position: static;
28
+ width: auto;
29
+ height: auto;
30
+ overflow: visible;
31
+ clip: auto;
32
+ white-space: normal;
33
+ }
34
+ }
35
+
36
+ .sr-only {
37
+ @include sr-only();
38
+ }
39
+
40
+ .sr-only-focusable {
41
+ @include sr-only-focusable();
42
+ }
package/assets/css/theme/definitions/_mixins.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @import 'colors';
2
2
  @import 'typography';
3
3
  @import 'variables';
4
+ @import 'accessibility';
4
5
 
5
6
  @mixin html {
6
7
  @include default($genericFontSize);
package/assets/css/theme/generic/_default.scss CHANGED
@@ -1,17 +1,9 @@
1
1
  @import '../definitions/mixins';
2
2
 
3
- /*
4
- __html
5
- */
6
-
7
3
  html {
8
4
  @include html;
9
5
  }
10
6
 
11
- a, button {
12
- outline: 0;
13
- }
14
-
15
7
  .ad-uniheader {
16
8
  height: 52px;
17
9
  background: #2d2a27;
@@ -27,19 +19,14 @@ body {
27
19
  @include text-4;
28
20
  }
29
21
 
30
- #header-universal, #footer-universal {
31
- @include default($genericFontSize);
32
- }
33
-
34
- #footer-universal {
35
- position: absolute;
36
- bottom: 0;
37
- width: 100%;
38
- height: 12rem;
39
- }
22
+ .page-wrapper {
23
+ display: flex;
24
+ flex-direction: column;
25
+ min-height: 100vh;
40
26
 
41
- .main-region {
42
- padding-bottom: 12rem;
27
+ .main-footer {
28
+ margin-top: auto;
29
+ }
43
30
  }
44
31
 
45
32
  blockquote {
@@ -106,8 +93,11 @@ blockquote {
106
93
  .global-component-spacer {
107
94
  padding: 30px 0;
108
95
  }
96
+ .global-component-spacer-top {
97
+ padding-top: 30px;
98
+ }
109
99
  .global-component-spacer-bottom {
110
- padding: 0 0 30px 0;
100
+ padding-bottom: 30px;
111
101
  }
112
102
 
113
103
  .global-component-nospacer {
@@ -117,3 +107,20 @@ blockquote {
117
107
  .hidden {
118
108
  display: none !important;
119
109
  }
110
+
111
+ .skip-to-content {
112
+ position: absolute;
113
+ left: 0;
114
+ top: 0;
115
+
116
+ .skip-link {
117
+ &:focus {
118
+ position: relative;
119
+ padding: 5px 10px;
120
+ background-color: #fff;
121
+ color: #000;
122
+ border: 1px solid #000;
123
+ z-index: 9999;
124
+ }
125
+ }
126
+ }
package/content/layout/base.html CHANGED
@@ -42,31 +42,41 @@
42
42
  </head>
43
43
 
44
44
  <body data-page="{% block dataPage %}{% endblock %}">
45
- {% block header %}
46
- <div id="header-universal" role="heading" aria-level="1"></div>
47
- {% endblock %}
48
- <div class="main-region page_content page_content__condensed {% block mainRegionClass %}{% endblock %}" role="main">
49
- <div class="layout-default">
50
- <div class="container">
51
- <component name="SecondaryNav" id="SecondaryNav1"></component>
52
- </div>
53
- </div>
54
- {% block headContent %}{% endblock %}
55
- <div class="profile-content">
56
- {% block contentFullWidthContainer %}
57
- {% block contentFullWidth %}{% endblock %}
58
- {% endblock %}
59
- <div class="layout-default">
45
+ <div class="skip-to-content">
46
+ <a class="skip-link sr-only sr-only-focusable" href="#mainContent">{{i18n.skipToMain}}</a>
47
+ </div>
48
+ <div class="page-wrapper">
49
+ {% block header %}
50
+ <header class="main-header" id="mainHeader">
60
51
  <div class="container">
61
- {% block content %}{% endblock %}
52
+ <component name="Header" id="Header"></component>
53
+ </div>
54
+ </header>
55
+ {% endblock %}
56
+
57
+ <main id="mainContent" class="main-region page_content page_content__condensed {% block mainRegionClass %}{% endblock %}" role="main">
58
+ {% block mainTitle %}{% endblock %}
59
+ {% block headContent %}{% endblock %}
60
+ <div class="profile-content">
61
+ {% block contentFullWidthContainer %}
62
+ {% block contentFullWidth %}{% endblock %}
63
+ {% endblock %}
64
+ <div class="layout-default">
65
+ <div class="container">
66
+ {% block content %}{% endblock %}
67
+ </div>
62
68
  </div>
63
69
  </div>
64
- </div>
70
+ </main>
71
+
72
+ {% block footer %}
73
+ <footer class="main-footer" id="mainFooter">
74
+ <div class="container">
75
+ <component name="Footer" id="Footer"></component>
76
+ </div>
77
+ </footer>
78
+ {% endblock %}
65
79
  </div>
66
-
67
- {% block footer %}
68
- <div id="footer-universal" role="contentinfo"></div>
69
- {% endblock %}
70
- <component name="GlobalAlerts" id="GlobalAlerts"></component>
80
+ <component name="GlobalAlerts" id="GlobalAlerts" editorVisible="false"></component>
71
81
  </body>
72
82
  </html>
package/content/pages/bundle/bundle.html CHANGED
@@ -1,7 +1,6 @@
1
1
  {% extends "/layout/bundle.html" %}
2
2
 
3
3
  {% block bundleContent %}
4
- <component name="BundleTabsMenu" id="BundleTabsMenu"></component>
5
4
  <component name="BundleBanner" id="BundleBanner"></component>
6
5
  <component name="ProductBundleViewer" id="ProductBundleViewer"></component>
7
6
  <div class="product-bundle">
package/content/pages/help/help.html CHANGED
@@ -1,13 +1,14 @@
1
1
  {% extends "/layout/base.html" %}
2
2
 
3
+ {% block mainTitle %}
4
+ <h1 class="sr-only">{{i18n.frequentlyAskedQuestions}}</h1>
5
+ {% endblock %}
6
+
3
7
  {% block content %}
4
8
  <div class="global-component-spacer">
5
9
  <div class="row">
6
10
  <div class="col">
7
- <component
8
- name="Faq"
9
- id="Faq1">
10
- </component>
11
+ <component name="Faq" id="Faq1"></component>
11
12
  </div>
12
13
  </div>
13
14
  </div>
package/content/pages/home/home.html CHANGED
@@ -4,6 +4,10 @@
4
4
  {% endblock %}
5
5
  {% block dataPage %}home{% endblock %}
6
6
 
7
+ {% block mainTitle %}
8
+ <h1 class="sr-only">{{config.marketplaceName}}</h1>
9
+ {% endblock %}
10
+
7
11
  {% block content %}
8
12
  <PageOrderableContainer name="PageOrderableContainer" id="PageOrderableContainer1"></PageOrderableContainer>
9
13
  <component name="StickyButtonPageScroll" id="StickyButtonPageScroll"></component>
package/content/pages/listing/listing.html CHANGED
@@ -4,9 +4,13 @@
4
4
  <data type="navigator" />
5
5
  {% endblock %}
6
6
 
7
+ {% block mainTitle %}
8
+ <h1 class="sr-only">{{listingProducts.i18n.allApplications}}</h1>
9
+ {% endblock %}
10
+
7
11
  {% block content %}
8
12
  <div class="global-component-spacer js-listing">
9
- <component name="ProductListingControls" id="CategoryListingControls-ListingPage"></component>
13
+ <component name="ProductListingControls" id="CategoryListingControls-ListingPage" editorVisible="false"></component>
10
14
  <div class="row listing listing-page row--spaced">
11
15
  <div class="col-md-3 col-sm-12 category-sidebar js-sidebar">
12
16
  <component name="CategorySidebar" id="CategorySidebar-ListingPage"></component>
package/content/pages/profile/profile-editions.html CHANGED
@@ -6,6 +6,10 @@
6
6
  <data type="application-additional-content" value="recommendations,addonProducts,callToActionsEditions,questions" />
7
7
  {% endblock %}
8
8
 
9
+ {% block mainTitle %}
10
+ <h1 class="sr-only">{{application.summary.title}}</h1>
11
+ {% endblock %}
12
+
9
13
  {% block profileContent %}
10
14
  <component name="ProductPricing" id="ProductPricing1"></component>
11
15
  {% endblock %}
package/content/pages/profile/profile-features.html CHANGED
@@ -5,6 +5,10 @@
5
5
  <data type="application-additional-content" value="recommendations,relatedProducts,questions" />
6
6
  {% endblock %}
7
7
 
8
+ {% block mainTitle %}
9
+ <h1 class="sr-only">{{application.summary.title}}</h1>
10
+ {% endblock %}
11
+
8
12
  {% block profileContent %}
9
13
  <component name="FeatureDetails" id="FeatureDetails1"></component>
10
14
  {% endblock %}
package/content/pages/profile/profile-questions.html CHANGED
@@ -5,6 +5,10 @@
5
5
  <data type="application-additional-content" value="recommendations,relatedProducts,questions" />
6
6
  {% endblock %}
7
7
 
8
+ {% block mainTitle %}
9
+ <h1 class="sr-only">{{application.summary.title}}</h1>
10
+ {% endblock %}
11
+
8
12
  {% block profileContent %}
9
13
  <component name="ProductQuestions" id="ProductQuestions1"></component>
10
- {% endblock %}
14
+ {% endblock %}
package/content/pages/profile/profile-resources.html CHANGED
@@ -5,6 +5,10 @@
5
5
  <data type="application-additional-content" value="recommendations,relatedProducts,questions" />
6
6
  {% endblock %}
7
7
 
8
+ {% block mainTitle %}
9
+ <h1 class="sr-only">{{application.summary.title}}</h1>
10
+ {% endblock %}
11
+
8
12
  {% block profileContent %}
9
13
  <component name="ProductResources" id="ProductResources1"></component>
10
- {% endblock %}
14
+ {% endblock %}
package/content/pages/profile/profile-reviews.html CHANGED
@@ -5,6 +5,10 @@
5
5
  <data type="application-additional-content" value="recommendations,relatedProducts,questions" />
6
6
  {% endblock %}
7
7
 
8
+ {% block mainTitle %}
9
+ <h1 class="sr-only">{{application.summary.title}}</h1>
10
+ {% endblock %}
11
+
8
12
  {% block profileContent %}
9
13
  <component name="ProductReviews" id="ProductReviews1"></component>
10
- {% endblock %}
14
+ {% endblock %}
package/content/pages/profile/profile-standaloneDomains.html CHANGED
@@ -12,7 +12,9 @@
12
12
  {% endblock %}
13
13
 
14
14
  {% block profileContent %}
15
- <component name="DomainApp" id="DomainApp"></component>
15
+ <div class="global-component-spacer">
16
+ <component name="DomainApp" id="DomainApp"></component>
17
+ </div>
16
18
  {% endblock %}
17
19
 
18
20
  {% block belowProfileContent %}
package/content/pages/profile/profile-support.html CHANGED
@@ -6,6 +6,10 @@
6
6
  <data type="application-additional-content" value="questions" />
7
7
  {% endblock %}
8
8
 
9
+ {% block mainTitle %}
10
+ <h1 class="sr-only">{{application.summary.title}}</h1>
11
+ {% endblock %}
12
+
9
13
  {% block profileContent %}
10
14
  <component class="support-page" name="ProductAdditionalInfo" id="ProductAdditionalInfo1"></component>
11
- {% endblock %}
15
+ {% endblock %}
package/content/pages/profile/profile.html CHANGED
@@ -6,6 +6,10 @@
6
6
  <data type="application-additional-content" value="recommendations,relatedProducts,questions,answers,reviews" />
7
7
  {% endblock %}
8
8
 
9
+ {% block mainTitle %}
10
+ <h1 class="sr-only">{{application.summary.title}}</h1>
11
+ {% endblock %}
12
+
9
13
  {% block profileContentHeader %}
10
14
  <component name="ProductBanner" id="ProductBanner"></component>
11
15
  <component name="ProductTabMenu" id="ProductTabMenu"></component>
package/design-properties.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
- "headerNavBg": "#2d2a27",
3
- "headerNavBorderColor": "#242424",
4
- "headerNavItemBgHover": "#3e3b37",
5
- "headerNavItemBgSelected": "#24221e",
6
- "headerNavFontColor": "#999",
2
+ "headerNavBg": "#0076ce",
3
+ "headerNavBorderColor": "#0076ce",
4
+ "headerNavItemBgHover": "#1187df",
5
+ "headerNavItemBgSelected": "#006dc5",
6
+ "headerNavFontColor": "#ffffff",
7
7
  "headerNavFontHoverColor": "#d2d5d9",
8
- "headerNavFontSelectedColor": "#fff",
8
+ "headerNavFontSelectedColor": "#fcfdfd",
9
9
  "headerNavTooltipBg": "#2d2a27",
10
10
  "headerNavTooltipFontColor": "#fff",
11
- "headerNavDropdownFontColor": "#575757",
11
+ "headerNavDropdownFontColor": "#474747",
12
12
  "headerNavDropdownBg": "#fff",
13
13
  "headerNavDropdownBorderColor": "#eaeaea",
14
14
  "headerNavDropdownBorderColorHover": "#007b99",
15
- "headerNavDropdownBgHover": "#009abf",
15
+ "headerNavDropdownBgHover": "#0076ce30",
16
16
  "headerNavDropdownFontColorHover": "#fff",
17
17
  "headerNavDropdownMarginRight": "0"
18
18
  }
package/editor-properties.json CHANGED
@@ -5,53 +5,57 @@
5
5
  "iconName": "styles",
6
6
  "componentName": "Colors",
7
7
  "form": {
8
+ "description": {
9
+ "title": "uieditor.editorProperties.globalStyles.colors.description.title",
10
+ "type": "TEXT_BLOCK"
11
+ },
8
12
  "primaryColor": {
9
13
  "title": "uieditor.editorProperties.globalStyles.colors.primaryColor.title",
10
14
  "type": "COLORPICKER",
11
- "defaultValue": "#015575",
15
+ "defaultValue": "#0076ce",
12
16
  "caption": "uieditor.editorProperties.globalStyles.colors.primaryColor.caption"
13
17
  },
14
18
  "secondaryColor": {
15
19
  "title": "uieditor.editorProperties.globalStyles.colors.secondaryColor.title",
16
20
  "type": "COLORPICKER",
17
- "defaultValue": "#018FB7",
21
+ "defaultValue": "#f1f1f1",
18
22
  "caption": "uieditor.editorProperties.globalStyles.colors.secondaryColor.caption"
19
23
  },
20
24
  "emphasisColor": {
21
25
  "title": "uieditor.editorProperties.globalStyles.colors.emphasisColor.title",
22
26
  "type": "COLORPICKER",
23
- "defaultValue": "#6BB51F",
27
+ "defaultValue": "#00802b",
24
28
  "caption": "uieditor.editorProperties.globalStyles.colors.emphasisColor.caption"
25
29
  },
26
30
  "altEmphasisColor": {
27
31
  "title": "uieditor.editorProperties.globalStyles.colors.altEmphasisColor.title",
28
32
  "type": "COLORPICKER",
29
- "defaultValue": "#FB641B",
33
+ "defaultValue": "#d14600",
30
34
  "caption": "uieditor.editorProperties.globalStyles.colors.altEmphasisColor.caption"
31
35
  },
32
36
  "titleText": {
33
37
  "title": "uieditor.editorProperties.globalStyles.colors.titleText.title",
34
- "defaultValue": "#3E3E3E",
38
+ "defaultValue": "#474747",
35
39
  "type": "COLORPICKER"
36
40
  },
37
41
  "bodyText": {
38
42
  "title": "uieditor.editorProperties.globalStyles.colors.bodyText.title",
39
- "defaultValue": "#656565",
43
+ "defaultValue": "#474747",
40
44
  "type": "COLORPICKER"
41
45
  },
42
46
  "linkText": {
43
47
  "title": "uieditor.editorProperties.globalStyles.colors.linkText.title",
44
- "defaultValue": "#018FB7",
48
+ "defaultValue": "#0071c7",
45
49
  "type": "COLORPICKER"
46
50
  },
47
51
  "ratingStars": {
48
52
  "title": "uieditor.editorProperties.globalStyles.colors.ratingStars.title",
49
- "defaultValue": "#F6D019",
53
+ "defaultValue": "#f7d619",
50
54
  "type": "COLORPICKER"
51
55
  },
52
56
  "pageBackground": {
53
57
  "title": "uieditor.editorProperties.globalStyles.colors.pageBackground.title",
54
- "defaultValue": "#FFFFFF",
58
+ "defaultValue": "#fafafa",
55
59
  "type": "COLORPICKER"
56
60
  }
57
61
  }
@@ -74,28 +78,6 @@
74
78
  "placeholder": "uieditor.editorProperties.globalStyles.logo.logoImage.placeholder",
75
79
  "defaultValue": "",
76
80
  "caption": "uieditor.editorProperties.globalStyles.logo.logoImage.caption"
77
- },
78
- "logoHeight": {
79
- "title": "uieditor.editorProperties.globalStyles.logo.logoHeight.title",
80
- "type": "SLIDER",
81
- "defaultValue": "31px",
82
- "options": {
83
- "step": 1,
84
- "min": 31,
85
- "max": 47,
86
- "unit": "px"
87
- }
88
- },
89
- "logoContainerWidth": {
90
- "title": "uieditor.editorProperties.globalStyles.logo.logoContainerWidth.title",
91
- "type": "SLIDER",
92
- "defaultValue": "60px",
93
- "options": {
94
- "step": 1,
95
- "min": 31,
96
- "max": 150,
97
- "unit": "px"
98
- }
99
81
  }
100
82
  }
101
83
  },
@@ -208,36 +190,41 @@
208
190
  "auxiliaryBar" : {
209
191
  "label":"uieditor.menu.auxiliaryBar",
210
192
  "type":"navigation",
211
- "icon": "ellipsis"
193
+ "icon": "ellipsis",
194
+ "form": {
195
+ "type": "MENU_LINK"
196
+ }
212
197
  },
213
198
  "homeBar" : {
214
199
  "label":"uieditor.menu.homeBar",
215
200
  "type":"navigation",
216
- "icon": "universalNavHome"
201
+ "icon": "universalNavHome",
202
+ "form": {
203
+ "type": "MENU_LINK"
204
+ }
217
205
  },
218
206
  "navigationBar" : {
219
207
  "label":"uieditor.menu.navigationBar",
220
208
  "type":"navigation",
221
- "icon": "hamburger"
222
- },
223
- "categoryBar" : {
224
- "label":"uieditor.menu.categoryBar",
225
- "type":"navigation",
226
- "icon": "categories"
227
- },
228
- "footerBar" : {
229
- "label":"uieditor.menu.footerBar",
230
- "type":"navigation",
231
- "icon": "footer"
209
+ "icon": "hamburger",
210
+ "form": {
211
+ "type": "MENU_LINK"
212
+ }
232
213
  },
233
214
  "footer" : {
234
215
  "label":"uieditor.menu.footer",
235
216
  "type":"navigation",
236
217
  "icon": "footer",
237
218
  "form": {
238
- "menu": {
239
219
  "type": "MENU_LINK"
240
- }
220
+ }
221
+ },
222
+ "bottomBar" : {
223
+ "label":"uieditor.menu.bottomBar",
224
+ "type":"navigation",
225
+ "icon": "footer",
226
+ "form": {
227
+ "type": "MENU_LINK"
241
228
  }
242
229
  }
243
230
  }
package/header-footer/css/footer/_INDEX.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  &__wrapper {
19
19
  margin-top: 0px;
20
20
  padding: 14px 24px;
21
- background-color: #eaeaea;
21
+ background-color: #fff;
22
22
  color: #575757;
23
23
  }
24
24
 
package/header-footer/css/header-components/_MPLogo.scss CHANGED
@@ -1,37 +1,50 @@
1
1
  .ad-uniheader__logo-container {
2
- height: $nav-height;
2
+ height: calc(#{$nav-height} + (2 * var(--headerNavPadding, 0px)));
3
3
  list-style: none;
4
4
 
5
5
  &--link {
6
- display: flex;
6
+ display: none;
7
+ }
8
+
9
+ &--image {
10
+ display: none;
11
+ }
12
+
13
+ // replace unav logo
14
+ #plaza-theme-logo{
15
+ display: flex !important;
7
16
  align-items: center;
8
17
  justify-content: center;
9
18
  cursor: pointer;
10
- text-decoration: none;
11
- height: 100%;
12
19
  padding: 0 $nav-item-padding-horizontal - 6px 0 0;
13
-
20
+
21
+ // FIXME: rename to logoSize MP-34926
22
+ width: var(--logoHeight, $nav-logo-height);
23
+ height: calc(#{$nav-height} + (2 * var(--headerNavPadding, 0px)));
24
+
14
25
  &:hover {
15
26
  background-color: transparent;
16
27
  color: transparent;
17
28
  text-decoration: none;
18
29
  }
19
- }
20
30
 
21
- &--image {
22
- background-image: var(--logoImage, url($logoImage));
23
- background-repeat: no-repeat;
24
- background-position: left center;
25
- background-size: auto 100%;
26
- display: block;
27
- height: var(--logoHeight, $nav-logo-height);
28
- min-width: 31px;
29
- max-width: 200px;
30
- width: var(--logoContainerWidth, $logoWidth); ;
31
+ img {
32
+ // match Logo.scss in sfb-theme-components
33
+ object-fit: contain;
34
+ object-position: center center;
35
+
36
+ min-width: 30px;
37
+ max-width: 100%;
38
+ max-height: 100px;
39
+ }
31
40
  }
32
41
  }
33
42
  .ad-sso-header {
34
43
  .ad-uniheader__logo-container--link {
35
44
  padding-left: 14px;
36
45
  }
46
+
47
+ #plaza-theme-logo {
48
+ padding-left: 14px;
49
+ }
37
50
  }
package/header-footer/css/header-components/_cart.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  .ad-icon-add-to-cart {
14
14
  margin-bottom: 3px;
15
15
  margin-right: 5px;
16
- color: #ffffff;
16
+ color: var(--headerNavFontColor, $headerNavFontColor);
17
17
  }
18
18
 
19
19
  .ad-component__cart {
@@ -28,7 +28,7 @@
28
28
  display: none;
29
29
  font-family: "Helvetica Neue", Arial, sans-serif;
30
30
  height: 18px;
31
- font-size: 15px;
31
+ font-size: calc(#{var(--bodyBaseSize, $nav-item-font-size)} + #{var(--headerNavItemFontSizeOffset, 0px)});
32
32
  font-weight: 500;
33
33
  letter-spacing: 0;
34
34
  line-height: 18px;
package/header-footer/css/header-components/_dropdown.scss CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  // Styling the links within the dropdown containers
66
66
  .ad-component--link {
67
- color: $headerNavDropdownFontColor;
67
+ color: var(--headerNavDropdownFontColor, $headerNavDropdownFontColor);
68
68
  padding-top: $dropdown-container-item-padding-top;
69
69
  padding-right: $dropdown-container-item-padding-right;
70
70
  padding-bottom: $dropdown-container-item-padding-bottom;
@@ -72,15 +72,15 @@
72
72
  display: block;
73
73
  text-transform: $dropdown-container-item-text-transform;
74
74
  text-decoration: none;
75
- font-size: $dropdown-container-item-font-size;
75
+ font-size: calc(#{var(--bodyBaseSize, $dropdown-container-item-font-size)} + #{var(--headerNavItemFontSizeOffset, 0px)});
76
76
  line-height: $dropdown-container-item-font-size;
77
77
  text-align: left;
78
78
 
79
79
  &:hover {
80
- box-shadow: 0 0 0 1px $headerNavDropdownBorderColorHover;
80
+ box-shadow: none;
81
81
  position: relative;
82
- background-color: $headerNavDropdownBgHover;
83
- color: $headerNavDropdownFontColorHover;
82
+ background-color: var(--headerNavDropdownBgHover, $headerNavDropdownBgHover);
83
+ color: var(--headerNavDropdownFontColor, $headerNavDropdownFontColor);
84
84
  }
85
85
  &-icon-first {
86
86
  padding-left: 35px;
@@ -100,8 +100,8 @@
100
100
  .ad-component_dropdown.js-dropdown-active, .ad-component_dropdown-react.js-dropdown-active {
101
101
 
102
102
  > .ad-component_dropdown--trigger {
103
- background: $headerNavItemBgSelected;
104
- color: $headerNavFontHoverColor;
103
+ background: var(--headerNavItemBgSelected, $headerNavItemBgSelected);
104
+ color: var(--headerNavFontHoverColor, $headerNavFontHoverColor);
105
105
  }
106
106
 
107
107
  .ad-component_list {