Fix/ripple sass settings (#593)

* Added fixes for sass settings * Fixed second logo vertical alignment issue * [ripple-sass-settings] Updated related links & siteheader menu.
dpc-sdp · Nov 12, 2019 · f0d6340 · f0d6340
1 parent 3c4e383
commit f0d6340
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 12 deletions.
diff --git a/packages/components/Molecules/Card/CardNavigationFeatured.vue b/packages/components/Molecules/Card/CardNavigationFeatured.vue
@@ -74,6 +74,7 @@ export default {
   $rpl-card-navigation-featured-margin-xs: $rpl-space-3 auto !default;
   $rpl-card-navigation-featured-margin-s: ($rpl-space * 5) auto !default;
   $rpl-card-navigation-featured-background: rpl_color('primary') !default;
+  $rpl-card-navigation-featured-background-alter: rpl_color('secondary') !default;
   $rpl-card-navigation-featured-max-width: rem(818px) !default;
   $rpl-card-navigation-featured-color: rpl_color('extra_dark_neutral') !default;
   $rpl-card-navigation-featured-border-radius: rem(4px) !default;
@@ -87,7 +88,7 @@ export default {
   ) !default;
   $rpl-card-navigation-featured-summary-color: rpl_color('white') !default;
   $rpl-card-navigation-featured-summary-background: $rpl-card-navigation-featured-background url(rpl_graphic_right_angled_triangle('secondary')) no-repeat bottom right !default;
-  $rpl-card-navigation-featured-summary-background-hover: rpl_color('secondary') url(rpl_graphic_right_angled_triangle('primary')) no-repeat bottom right !default;
+  $rpl-card-navigation-featured-summary-background-hover: $rpl-card-navigation-featured-background-alter url(rpl_graphic_right_angled_triangle('primary')) no-repeat bottom right !default;
   $rpl-card-navigation-featured-summary-xs: ($rpl-space * 11) $rpl-component-padding-xs ($rpl-space * 7) !default;
   $rpl-card-navigation-featured-summary-s: ($rpl-space * 6) $rpl-component-padding-s ($rpl-space * 7) !default;
   $rpl-card-navigation-featured-summary-m: ($rpl-space * 6) $rpl-component-padding-m ($rpl-space * 7) !default;
@@ -98,7 +99,7 @@ export default {
   $rpl-card-navigation-featured-title-m: ($rpl-space * 9) $rpl-component-padding-m !default;
   $rpl-card-navigation-featured-title-l: ($rpl-space * 9) $rpl-component-padding-l !default;
   $rpl-card-navigation-featured-title-xl: ($rpl-space * 9) $rpl-component-padding-xl !default;
-  $rpl-card-navigation-featured-meta-background: rpl_color('secondary') !default;
+  $rpl-card-navigation-featured-meta-background: $rpl-card-navigation-featured-background-alter !default;
   $rpl-card-navigation-featured-meta-text-color: rpl_color('white') !default;
   $rpl-card-navigation-featured-meta-padding: 0 $rpl-space-2 !default;
   $rpl-card-navigation-featured-date-ruleset: ('xs', 1em, 'semibold') !default;

diff --git a/packages/components/Molecules/RelatedLinks/index.vue b/packages/components/Molecules/RelatedLinks/index.vue
@@ -41,7 +41,7 @@ export default {
   $rpl-related-links-margin: $rpl-space-2;
   $rpl-related-links-border-radius: rem(4px);
   $rpl-related-links-title-ruleset: ('l', 1.2em, 'bold');
-  $rpl-related-links-title-color: rpl_color('white');
+  $rpl-related-links-title-color: rpl_color('white') !default;
   $rpl-related-links-items-margin: $rpl-space-2 auto;
   $rpl-related-links-item-min-width: rem(220px);
   $rpl-related-links-item-margin: 0 $rpl-space-3 $rpl-space-3 auto;

diff --git a/packages/components/Organisms/SiteHeader/index.vue b/packages/components/Organisms/SiteHeader/index.vue
@@ -374,6 +374,7 @@ export default {
       img {
         width: $rpl-site-header-logo-width;
         margin-left: $rpl-site-header-menu-toggle-border-spacing;
+        vertical-align: middle;
       }
 
       &--vic-logo-primary {

diff --git a/packages/components/Organisms/SiteHeader/menu.vue b/packages/components/Organisms/SiteHeader/menu.vue
@@ -233,6 +233,7 @@ export default {
   $rpl-menu-vertical-heading-margin: ($rpl-space * 6) auto $rpl-space-3 auto !default;
   $rpl-menu-vertical-items-padding: 0 ($rpl-space * 6) !default;
   $rpl-menu-vertical-header-padding: $rpl-menu-vertical-items-padding !default;
+  $rpl-menu-vertical-back-color: rpl-color('white') !default;
   $rpl-menu-vertical-back-icon-margin: auto $rpl-space auto 0 !default;
   $rpl-menu-horizontal-items-root-link-color: rpl-color('white') !default;
   $rpl-menu-horizontal-items-root-margin: auto ($rpl-space * 7) auto auto !default;
@@ -247,6 +248,7 @@ export default {
   $rpl-menu-item-link-padding: $rpl-space-4 $rpl-menu-item-link-indent $rpl-space-4 0 !default;
   $rpl-menu-item-link-padding-active: $rpl-space-4 $rpl-menu-item-link-indent !default;
   $rpl-menu-item-link-color: $rpl-menu-text-color !default;
+  $rpl-menu-item-link-color-hover: $rpl-menu-text-color !default;
   $rpl-menu-item-link-background-color-hover: rpl-color('primary') !default;
   $rpl-menu-item-link-background-image-active: rpl-gradient('primary_gradient') !default;
   $rpl-menu-item-link-color-active: $rpl-menu-text-color !default;
@@ -353,7 +355,7 @@ export default {
 
     .rpl-menu__back {
       @include rpl_typography_font('xs', 1em, 'bold');
-      color: rpl-color('white');
+      color: $rpl-menu-vertical-back-color;
       background-color: transparent;
       border: 0;
       padding: 0;
@@ -581,7 +583,7 @@ export default {
         border-radius: $rpl-menu-item-link-border-radius;
         align-items: center;
         padding: $rpl-menu-item-link-padding-active;
-        color: $rpl-menu-item-link-color;
+        color: $rpl-menu-item-link-color-hover;
 
         span {
           margin-right: 0;

diff --git a/packages/components/Organisms/SiteSectionNavigation/index.vue b/packages/components/Organisms/SiteSectionNavigation/index.vue
@@ -38,12 +38,12 @@ export default {
   @import "~@dpc-sdp/ripple-global/scss/tools";
 
   $rpl-section-menu-background-color: rpl_color('dark_primary') !default;
-  $rpl-section-menu-padding: ($rpl-space * 6) 0;
-  $rpl-section-menu-border-radius: rem(4px);
-  $rpl-section-menu-title-ruleset: ('l', 1.2em, 'bold');
-  $rpl-section-menu-title-color: rpl_color('white');
-  $rpl-section-menu-title-padding: 0 ($rpl-space * 8);
-  $rpl-section-menu-title-margin: 0 0 $rpl-space-2;
+  $rpl-section-menu-padding: ($rpl-space * 6) 0 !default;
+  $rpl-section-menu-border-radius: rem(4px) !default;
+  $rpl-section-menu-title-ruleset: ('l', 1.2em, 'bold') !default;
+  $rpl-section-menu-title-color: rpl_color('white') !default;
+  $rpl-section-menu-title-padding: 0 ($rpl-space * 8) !default;
+  $rpl-section-menu-title-margin: 0 0 $rpl-space-2 !default;
 
   .rpl-site-section-navigation {
     background-color: $rpl-section-menu-background-color;

diff --git a/packages/components/Organisms/SiteSectionNavigation/menu.vue b/packages/components/Organisms/SiteSectionNavigation/menu.vue
@@ -77,7 +77,6 @@ export default {
   $rpl-section-menu-item-link-color: rpl_color('white') !default;
   $rpl-section-menu-item-link-parent-hover-background-color: rpl_color('primary') !default;
   $rpl-section-menu-item-link-parent-hover-background-image: rpl_gradient('primary_gradient') !default;
-  $rpl-section-menu-item-link-parent-background-color: rpl_color('secondary') !default;
   $rpl-section-menu-item-link-active-background-color: rpl_color('primary') !default;
   $rpl-section-menu-item-link-active-border-height: 1px;
   $rpl-section-menu-item-link-active-border: $rpl-section-menu-item-link-active-border-height solid rpl_color('dark_primary') !default;