diff --git a/src/assets/sass/_global/_themes.scss b/src/assets/sass/_global/_themes.scss index d4dd763..566fa1d 100644 --- a/src/assets/sass/_global/_themes.scss +++ b/src/assets/sass/_global/_themes.scss @@ -32,6 +32,7 @@ $themes: ( iconDarkDisplay: none, iconLightDisplay: block, arrowBackground: $gray-neutral-light, + beforeBackground: $turquoise ), dark: ( secondaryBackgroundColor: $gray-60, @@ -42,5 +43,6 @@ $themes: ( iconDarkDisplay: block, iconLightDisplay: none, arrowBackground: $gray-60, + beforeBackground: $white ), ); diff --git a/src/components/TopNav/MobileSubNav.module.scss b/src/components/TopNav/MobileSubNav.module.scss index 991d364..47766a3 100644 --- a/src/components/TopNav/MobileSubNav.module.scss +++ b/src/components/TopNav/MobileSubNav.module.scss @@ -1,4 +1,5 @@ @import "../../assets/sass/_global/fonts"; +@import "../../assets/sass/_global/themes"; @import "../../assets/sass/_global/utils"; .mobileSubNav { @@ -28,7 +29,9 @@ .mobileSubNavHeader { @include button-reset; - background: $teal; + @include themify($themes) { + background: themed('secondaryBackgroundColor'); + } width: 100%; height: 60px; display: flex; @@ -38,7 +41,9 @@ span { @include Roboto-Regular; - color: $white; + @include themify($themes) { + color: themed('secondaryTextColor'); + } font-size: 28px; line-height: 40px; } @@ -50,20 +55,30 @@ img { margin-left: 8px; } + + path { + @include themify($themes) { + fill: themed('secondaryTextColor'); + } + } } .mobileSubNavContent { display: flex; flex-direction: column; padding: $base-unit * 3 $base-unit * 4; - background: $teal; + @include themify($themes) { + background: themed('secondaryBackgroundColor'); + } border-top: 1px solid $teal-light; width: 100%; z-index: 999; position: absolute; .mobileSubNavChild { - color: $white; + @include themify($themes) { + color: themed('secondaryTextColor'); + } font-size: 18px; line-height: 40px; height: 40px; @@ -81,7 +96,9 @@ height: 30px; width: 3px; border-radius: 1.5px; - background: $white; + @include themify($themes) { + background: themed('beforeBackground'); + } display: inline-block; margin-right: 10px; }