@appdirect/sfb-theme-plaza 0.0.1

package/header-footer/css/header-components/_icons.scss

@@ -0,0 +1,123 @@
+@font-face {
+	font-family: 'ad-icon-universal-header';
+	src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+ }
+
+ [class^="ad-icon-"], [class*=" ad-icon-"],
+ .ad-component_dropdown .ad-component_dropdown--trigger:after {
+	// use !important to prevent issues with browser extensions that change fonts
+	font-family: 'ad-icon-universal-header' !important;
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	// Better Font Rendering 
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.ad-icon {
+
+	&-close:before {
+		content: "\e900";
+	}
+
+	&-star:before {
+		content: "\e901";
+	}
+
+	&-cart:before {
+		content: "\e902";
+	}
+
+	&-close-medium:before {
+		content: "\e903";
+	}
+	
+	&-success:before {
+		content: "\e904";
+	}
+
+	&-add-to-cart:before {
+		content: "\e908";
+	}
+
+	&-home:before {
+		content: "\e909";
+	}
+
+	&-bar-graph:before {
+		content: "\e90a";
+	}
+
+	&-group:before {
+		content: "\e90b";
+	}
+
+	&-grid:before {
+		content: "\e90c";
+	}
+}
+
+.ad-icon-link {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--headerNavFontColor, $headerNavFontColor);
+	font-size: $nav-icon-font-size;
+	height: 100%;
+	text-decoration: none;
+	width: 100%;
+	&:hover{
+		text-decoration: none;
+	}
+}	
+
+.ad-universalnav-icons {
+	position:relative;
+	height: 100%;
+	width: $nav-icon-width;
+	margin-left: -1px;
+    display: inline-block;
+    vertical-align: top;
+    cursor: pointer;
+	border-left: none;
+	border-right: none;
+
+	&:hover {
+		background-color: var(--headerNavItemBgHover, $headerNavItemBgHover);
+		
+		.ad-icon-link, 
+		.ad-icon-add-to-cart {
+			color: var(--headerNavFontHoverColor, $headerNavFontHoverColor);
+		}
+	}
+
+	&:active {
+		.ad-icon-link {
+			color: var(--headerNavFontSelectedColor, $headerNavFontSelectedColor);
+		}
+    }
+
+	.js-link-active,
+	.js-link-active:hover {
+		background-color: var(--headerNavItemBgSelected, $headerNavItemBgSelected);
+		color: $headerNavFontSelectedColor;
+	}
+
+	.js-link-active:active {
+		background-color: var(--headerNavItemBgSelected, $headerNavItemBgSelected);
+		color: var(--headerNavFontSelectedColor, $headerNavFontSelectedColor);
+	}
+}
+
+.unav-cart-width {
+	width: $nav-icon-width-cart !important;
+		padding-left: 10px;
+		padding-right: 10px;
+}

package/header-footer/css/header-components/_mobile-menu.scss

@@ -0,0 +1,46 @@
+
+.unav-icon-mobile {
+    display: none;
+}
+
+.unav-icon-mobile {
+    position: static;
+    .closeIcon {
+        margin-left: 2px;
+    }
+    .ad-component_list {
+        overflow-y: scroll;
+        .ad-component--link {
+            padding-top: 15px;
+            padding-bottom: 15px;
+            &-user {
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+        }
+    }
+}
+.ad-component_dropdown-react{
+    .ad-component_list-full {
+        margin-top: 1px;
+        border-radius: 0px;
+        box-shadow:none;
+        right:0;
+        left:0;
+        width: 100%;
+
+        .ad-component_list-item:last-child, .ad-component_list-item:first-child {
+            .ad-component--link {
+                border-top-left-radius: 0px;
+                border-top-right-radius: 0px;
+                border-bottom-left-radius: 0px;
+                border-bottom-right-radius: 0px;
+            }
+        }
+    }
+}
+.ad-icon-link {
+    &.ad-component_dropdown--trigger:after {
+        display:none;
+    }
+}

package/header-footer/css/header-components/_myapps-dropdown.scss

@@ -0,0 +1,111 @@
+.ad-component__myapps {
+
+    .ad-component_list {
+        background: $headerNavDropdownBg;
+        background-clip: padding-box;
+        border-radius: 4px;
+        box-sizing: content-box;
+        left: 0;
+        margin: 4px 0 0 -50px;
+        margin-right: $headerNavDropdownMarginRight;
+        padding: 15px 15px 55px 15px;
+        position: absolute;
+        width: 250px;
+        
+        &--top-hover-shim {
+            height: 10px;
+            left: 0;
+            margin-top: -7px;
+            position: absolute;
+            top: 0; 
+            width: 100%;
+        }
+    }
+}
+
+.ad-stack-apps {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    
+    &--item {
+        float: left;
+        width: $myapps-dropdown-app-tile-width;
+        height: $myapps-dropdown-app-tile-height;
+        box-sizing: border-box;
+        padding: $myapps-dropdown-app-padding;
+        margin-bottom: $myapps-dropdown-app-margin-bottom;
+        text-align: center;
+        text-decoration:none;
+        color:#333;
+
+        &:hover {
+            border: $myapps-dropdown-app-hover-border;
+            padding: $myapps-dropdown-app-hover-padding;
+            border-radius: $myapps-dropdown-app-radius;
+            text-decoration:none;
+        }
+
+        &-text {
+            text-align: center;
+            overflow: hidden;
+            white-space: nowrap;
+            font-size: $myapps-dropdown-app-font-size;
+            text-overflow: ellipsis;
+        }
+        
+        &-button {
+            position: absolute;
+            bottom: 0; 
+            left: 0;
+            width: 100%;
+
+            a {
+                background: $myapps-dropdown-app-see-all-cta-bg;
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+                color:$myapps-dropdown-app-see-all-cta-color;
+                display: block;
+                font-size: $myapps-dropdown-app-see-all-cta-font-size;
+                height: $myapps-dropdown-app-see-all-cta-container-height;
+                line-height: $myapps-dropdown-app-see-all-cta-container-height;
+                text-align: center;
+                text-decoration: none;
+
+                &:hover {
+                    background: $myapps-dropdown-app-see-all-cta-hover-bg;
+                    color: $myapps-dropdown-app-see-all-cta-hover-color;
+                }
+            }
+        }
+
+        &-img {
+            display: block;
+            width: auto;
+            margin: auto;
+            max-width: $myapps-dropdown-app-img-max-width;
+            max-height: $myapps-dropdown-app-img-max-height;
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+
+            &-container {
+                position: relative;
+                height: $myapps-dropdown-app-img-container-height;
+                margin-bottom: 6px;
+            }
+        }
+
+        .ad-icon-star {
+            font-size: $myapps-dropdown-app-img-placeholder-font-size;
+            color: $myapps-dropdown-app-img-placeholder-color;
+            position: absolute;
+            top: 8px;
+            left: 20px;
+        }
+    }
+}

package/header-footer/css/header-components/_notifications.scss

@@ -0,0 +1,50 @@
+.ad-home-notification, .ad-team-notification {
+	background: $notifications-bg;
+	border-radius: $notifications-border-radius;
+	color: $notifications-font-color;
+	display: none;
+	font-family: $notifications-font-family;
+	font-size: $notifications-font-size;
+	font-weight: $notifications-font-weight;
+	height: $notifications-height;
+	line-height: 13px;
+	min-width: $notifications-min-width;
+	padding: $notifications-padding-vertical $notifications-padding-horizontal;
+	text-align: center;
+	position: absolute;
+	right: 9px;
+	top: 30px;
+	box-sizing: content-box;
+
+	&.ad-is-active {
+		display: block;
+	}
+}
+
+.ad-cart-notification {
+	color: $notifications-font-color;
+	display: none;
+	font-family: $notifications-font-family;
+	font-size: $notifications-cart-font-size;
+	font-weight: $notifications-cart-font-weight;
+	height: $notifications-cart-height;
+	width: $notifications-cart-width;
+	line-height: 13px;
+	position: absolute;
+	right: 40px;
+	top: 8px;
+	border-radius: 2px;
+	background-color: #35A800;
+
+	&.ad-is-active {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		// pull cart number badge closer to icon, based on padding from theme
+		top: calc(max(var(--headerNavPadding, 20px) - 40px, var(--logoHeight) - 20px)/2);
+	}
+
+	.ad-home-notification-count {
+		margin-bottom: 1px;
+	}
+}

package/header-footer/css/header-components/_responsive.scss

@@ -0,0 +1,78 @@
+@media ( max-width: 1330px ) {
+    .container-header {
+        max-width: 100%;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    .adb-layout-default {
+        width: 100%;
+        padding-left: 0;
+        padding-right: 0;
+        max-width:100%;
+    }
+    .ad-component_list--item.user-dropdown {
+        display: none;
+    }
+    .ad-universalnav-icons {
+        display:none;
+    }
+    .ad-component__myapps, .ad-component__cart { 
+        display: block;
+        .ad-universalnav-icons {
+            display:block;
+        }
+    }
+    .unav-icon-mobile { display:block; }
+}
+
+@media only screen and (max-width: 767px) {
+    .adb-layout-default {
+        width: 100%;
+        max-width:100%;
+    }
+    .ad-universalnav-icons {
+        display:none;
+        right: 50px;
+    }
+    .unav-icon-mobile {
+        display:block;
+    }
+    .ad-component_dropdown{
+        &.manage-dropdown, &.user-dropdown {
+            display:none;
+        }
+    }
+    .ad-uniheader__container {
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+    .ad-uniheader__container--section, .adsearch-universal {
+        flex: 0 0 100%; 
+    }
+
+    .adsearch-universal {
+        padding: 10px 0 0 0;
+        border-top: 1px solid var(--headerNavBorderColor, $headerNavBorderColor);
+        .appdirectUniversalSearch{
+            padding: 0 15px 0 15px;
+            max-width: 100%;
+        }
+        #adsearch {
+            max-width: 100%!important;
+        }
+    }
+    .ad-uniheader {
+        &--logged-out, &--logged-in {
+            height: 104px;
+        }
+    }
+    .ad-component_dropdown-react .ad-component_list-full {
+        top: 104px;
+    }
+    .ad-uniheader__container--section-right {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+}

package/header-footer/css/header-components/_search-bar.scss

@@ -0,0 +1,17 @@
+.adsearch-universal {
+	border: 0;
+    z-index: 1;
+    display: flex;
+    width: 100%;
+    flex: 1;
+    line-height: 22px;
+    position: relative;
+	z-index: 4;
+    justify-content: center;
+    padding: 0 20px;
+}
+
+.appdirectUniversalSearch {
+	max-width: 600px;
+	width: 100%;
+}

package/header-footer/css/header-components/_tooltips.scss

@@ -0,0 +1,60 @@
+[data-adu-tooltip] {
+    position: relative;
+    z-index: 4;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: -6px;
+        left: 50%;
+        opacity: 0;
+        transform: translateX(-50%);
+        border-width: 4px 5px 0 5px;
+        border-style: solid;
+        border-color: $headerNavTooltipBg transparent transparent transparent;
+        z-index: 100;
+    }
+
+    &::after {
+        content: attr(data-adu-tooltip);
+        position: absolute;
+        left: 50%;
+        opacity: 0;
+        top: -6px;
+        transform: translateX(-50%)   translateY(-100%);
+        background: $headerNavTooltipBg;
+        text-align: center;
+        color: $headerNavTooltipFontColor;
+        padding: 6px 2px;
+        font-size: 12px;
+        line-height: 14px;
+        min-width: 90px;
+        border-radius: 3px;
+        pointer-events: none;
+    }
+
+    &:hover::after {
+        opacity: 0.9;
+    }
+
+    &:hover::before {
+        opacity: 0.9;
+    }
+
+    &::before {
+        top: 100%;
+        margin-top: 8px;
+        transform: translateX(-50%) translatey(-100%) rotate(-180deg)
+    }
+
+    &::after {
+        top: 100%;
+        margin-top: 8px;
+        transform: translateX(-50%) translateY(0%);
+    }
+}
+ 
+.ad-dropdown-active[data-adu-tooltip]:hover::after, 
+.ad-dropdown-active[data-adu-tooltip]:hover::before {
+    opacity: 0;
+}

package/header-footer/css/header-index.scss

@@ -0,0 +1,4 @@
+@import 'settings/INDEX';
+@import 'header-components/INDEX';
+@import 'footer/INDEX';
+

package/header-footer/css/settings/_INDEX.scss

@@ -0,0 +1,3 @@
+@import 'static-variables';
+@import 'custom-variables';
+@import 'font-icons';

package/header-footer/css/settings/_custom-variables.scss

@@ -0,0 +1,70 @@
+// Custom variables for theming of the Universal Header
+$nav-height: 52px;
+$nav-font-family: 'Helvetica Neue', Arial, sans-serif;
+$nav-item-font-size: 15px;
+$nav-item-padding-horizontal: 20px;
+
+$nav-logo-height: 31px;
+$nav-logo-padding-vertical: 0;
+$nav-logo-padding-horizontal: 14px;
+
+$dropdown-container-border-radius: 3px;
+$dropdown-container-box-shadow: 0 3px 10px 0 rgba(45,45,45,.125);
+$dropdown-container-margin-top: 4px;
+$dropdown-container-min-width: 192px;
+$dropdown-container-item-padding-top: 10px;
+$dropdown-container-item-padding-right: 30px;
+$dropdown-container-item-padding-bottom: 10px;
+$dropdown-container-item-padding-left: 10px;
+$dropdown-container-item-font-size: 14px;
+$dropdown-container-item-text-transform: capitalize;
+
+$profile-img-width: 24px;
+$profile-img-height: $profile-img-width;
+$profile-img-margin-right: 10px;
+$profile-img-border-radius: 2px;
+
+$nav-icon-font-size: 22px;
+$nav-icon-width: 52px;
+$nav-icon-width-cart: auto;
+
+$myapps-dropdown-app-tile-width: 83px;
+$myapps-dropdown-app-tile-height: 82px;
+$myapps-dropdown-app-padding: 10px;
+$myapps-dropdown-app-radius: 3px;
+$myapps-dropdown-app-margin-bottom: 5px;
+$myapps-dropdown-app-font-size: 12px;
+
+$myapps-dropdown-app-hover-border-color: #e0dfdf;
+$myapps-dropdown-app-hover-border: 1px;
+$myapps-dropdown-app-hover-border: $myapps-dropdown-app-hover-border solid #e0dfdf;
+$myapps-dropdown-app-hover-padding: ($myapps-dropdown-app-padding - 1px);
+
+$myapps-dropdown-app-img-container-height: 40px;
+$myapps-dropdown-app-img-max-width: 80%;
+$myapps-dropdown-app-img-max-height: $myapps-dropdown-app-img-max-width;
+
+$myapps-dropdown-app-img-placeholder-font-size: 23px;
+$myapps-dropdown-app-img-placeholder-color: #7a7a7a;
+
+$myapps-dropdown-app-see-all-cta-bg: #f3f3f3;
+$myapps-dropdown-app-see-all-cta-color: #737373;
+$myapps-dropdown-app-see-all-cta-font-size: 14px;
+$myapps-dropdown-app-see-all-cta-container-height: 40px;
+$myapps-dropdown-app-see-all-cta-hover-bg: #efefef;
+$myapps-dropdown-app-see-all-cta-hover-color: #575757;
+
+$notifications-bg: #009abf;
+$notifications-font-color: #ffffff;
+$notifications-font-family: 'Helvetica Neue', Arial, sans-serif;
+$notifications-cart-font-size: 11px;
+$notifications-cart-font-weight: 500;
+$notifications-cart-width: 17px;
+$notifications-cart-height: 17px;
+$notifications-font-size: 10px;
+$notifications-font-weight: 600;
+$notifications-min-width: 8px;
+$notifications-height: 14px;
+$notifications-border-radius: 3px;
+$notifications-padding-horizontal: 3px;
+$notifications-padding-vertical: 0;

package/header-footer/css/settings/_font-icons.scss

@@ -0,0 +1,53 @@
+@font-face {
+	font-family: 'ad-icon-universal-header';
+	src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="ad-icon-"], [class*=" ad-icon-"],
+.ad-component_dropdown .ad-component_dropdown--trigger:after {
+	// use !important to prevent issues with browser extensions that change fonts
+	font-family: 'ad-icon-universal-header' !important;
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	// Better Font Rendering 
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.ad-icon {
+
+	&-star:before {
+		content: "\e900";
+	}
+
+	&-cart:before {
+		content: "\e901";
+	}
+
+	&-add-to-cart:before {
+		content: "\e908";
+	}
+
+	&-home:before {
+		content: "\e909";
+	}
+
+	&-bar-graph:before {
+		content: "\e90a";
+	}
+
+	&-group:before {
+		content: "\e90b";
+	}
+
+	&-grid:before {
+		content: "\e90c";
+	}
+}

package/header-footer/css/settings/_static-variables.scss

@@ -0,0 +1,24 @@
+// --------------------- 
+// /!\ DO NOT MODIFY /!\
+// --------------------- 
+// This is a default -> sass variable for the client-facing variables 
+// that can be modified in the styles tab of the theme customizer.
+
+$headerNavBg: '${headerNavBg}';
+$headerNavBorderColor: '${headerNavBorderColor}';
+$headerNavItemBgHover: '${headerNavItemBgHover}';
+$headerNavItemBgSelected: '${headerNavItemBgSelected}';
+$headerNavFontColor: '${headerNavFontColor}';
+$headerNavFontHoverColor: '${headerNavFontHoverColor}';
+$headerNavFontSelectedColor: '${headerNavFontSelectedColor}';
+$headerNavTooltipBg: '${headerNavTooltipBg}';
+$headerNavTooltipFontColor: '${headerNavTooltipFontColor}';
+$headerNavDropdownFontColor: '${headerNavDropdownFontColor}';
+$headerNavDropdownBg: '${headerNavDropdownBg}';
+$headerNavDropdownBorderColor: '${headerNavDropdownBorderColor}';
+$headerNavDropdownBorderColorHover: '${headerNavDropdownBorderColorHover}';
+$headerNavDropdownBgHover: '${headerNavDropdownBgHover}';
+$headerNavDropdownFontColorHover: '${headerNavDropdownFontColorHover}';
+$headerNavDropdownMarginRight: '${headerNavDropdownMarginRight}';
+$logoImage: '${logoImage}';
+$logoWidth: '${logoWidth}';