From f0d63408560340a6c1c35f0267d227b501512e44 Mon Sep 17 00:00:00 2001 From: Tim Yao <31641325+tim-yao@users.noreply.github.com> Date: Tue, 12 Nov 2019 16:28:25 +1100 Subject: [PATCH] Fix/ripple sass settings (#593) * Added fixes for sass settings * Fixed second logo vertical alignment issue * [ripple-sass-settings] Updated related links & siteheader menu. --- .../Molecules/Card/CardNavigationFeatured.vue | 5 +++-- packages/components/Molecules/RelatedLinks/index.vue | 2 +- packages/components/Organisms/SiteHeader/index.vue | 1 + packages/components/Organisms/SiteHeader/menu.vue | 6 ++++-- .../Organisms/SiteSectionNavigation/index.vue | 12 ++++++------ .../Organisms/SiteSectionNavigation/menu.vue | 1 - 6 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/components/Molecules/Card/CardNavigationFeatured.vue b/packages/components/Molecules/Card/CardNavigationFeatured.vue index ef0d5d98e..4dad6a344 100644 --- 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 index 31fb62a35..e48f601b9 100644 --- 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 index a2fb1f05a..3735567b9 100644 --- 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 index f6832c7e2..9e1be64d5 100644 --- 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 index efbfd6f2d..940d0bb46 100644 --- 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 index a85c86d4f..983bd4508 100644 --- 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;