rebrand in config for scss and styleguide

This commit is contained in:
ogerly 2022-09-21 12:09:35 +02:00
parent 28c4740a98
commit 58e48cfe77
8 changed files with 42 additions and 37 deletions

View File

@ -356,3 +356,16 @@ $media-query-x-large: (min-width: 1200px);
/** /**
* @tokens Background Images * @tokens Background Images
*/ */
/**
* @tokens Header Color
*/
$color-header-background: $color-neutral-100;
/**
* @tokens Footer Color
*/
$color-footer-background: $color-neutral-100;

View File

@ -1,37 +1,21 @@
.main-navigation {
background-color: #6e8b87; $color-primary: #6e8b87;
} $color-primary-light: #a6ff00;
.main-navigation .ds-menu-item-link {
color: #a6ff00; $color-header-background: $color-primary;
} $color-footer-background: $color-primary-light;
.main-navigation .ds-menu-item-link:hover {
color: #f2f2f1;
}
.main-navigation a { .main-navigation a {
color: #a6ff00; color: $color-primary-light;
} }
.main-navigation a:hover { .main-navigation a:hover {
color: #ffffff; color: $color-neutral-100;
} }
.main-navigation .locale-menu { .main-navigation .locale-menu {
color: #a6ff00; color: $color-primary-light;
} }
.base-button { .main-navigation .base-button {
color: #a6ff00; color: $color-primary-light;
}
.ds-menu-item-link {
color: antiquewhite;
}
.ds-menu-item-link.router-link-exact-active {
color: #6a8ee1;
background-color: #faf9fa;
border-left: 2px solid #a6ff00;
}
.ds-menu-item-navbar.ds-menu-item-show-submenu.ds-menu-item-level-0>.ds-menu-item-link {
color: #ffffff;
} }

View File

@ -179,6 +179,4 @@ hr {
.dropdown-arrow { .dropdown-arrow {
font-size: $font-size-xx-small; font-size: $font-size-xx-small;
} }
@import './imports/_branding.scss';

View File

@ -8,7 +8,7 @@
:offset="offset" :offset="offset"
> >
<slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" /> <slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" />
<div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoveMouseLeave"> <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoverMouseLeave">
<slot <slot
name="popover" name="popover"
:toggleMenu="toggleMenu" :toggleMenu="toggleMenu"
@ -97,7 +97,7 @@ export default {
} }
this.clearTimeouts() this.clearTimeouts()
if (useTimeout === true) { if (useTimeout === true) {
this.popoveMouseLeave() this.popoverMouseLeave()
} else { } else {
this.isPopoverOpen = false this.isPopoverOpen = false
} }
@ -113,7 +113,7 @@ export default {
}, 500) }, 500)
} }
}, },
popoveMouseLeave() { popoverMouseLeave() {
if (this.developerNoAutoClosing) return if (this.developerNoAutoClosing) return
if (this.disabled) { if (this.disabled) {
return return

View File

@ -38,7 +38,7 @@ export default {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
z-index: 10; z-index: 10;
background-color: #a6ff00; background-color: $color-footer-background;
width: 100%; width: 100%;
padding: 10px 10px; padding: 10px 10px;
box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1); box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);

View File

@ -141,5 +141,4 @@ export default {
color: $color-neutral-100; color: $color-neutral-100;
} }
} }
@import '~/assets/styles/imports/_branding.scss';
</style> </style>

View File

@ -168,6 +168,9 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.main-navigation {
background-color: $color-header-background;
}
.margin-right-20 { .margin-right-20 {
margin-right: 20px; margin-right: 20px;
} }

View File

@ -91,13 +91,21 @@ export default {
/* /*
** Global CSS ** Global CSS
*/ */
css: ['~assets/_new/styles/resets.scss', '~assets/styles/main.scss'], css: [
'~assets/_new/styles/resets.scss',
'~assets/styles/main.scss',
'~assets/styles/imports/_branding.scss',
],
/* /*
** Global processed styles ** Global processed styles
*/ */
styleResources: { styleResources: {
scss: [styleguideStyles, '~assets/_new/styles/tokens.scss'], scss: [
styleguideStyles,
'~assets/_new/styles/tokens.scss',
'~assets/styles/imports/_branding.scss',
],
}, },
/* /*