diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index a89813392..e77c8a73d 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -1,33 +1,21 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
# Dropdown
-A simple dropdown component with support for links and buttons. Supports `light` and `dark` styles, with latter being a default style.
+A simple dropdown component with support for links and buttons.
{{
template: hbs`
-
+
Menu item
Menu item
Button menu item
`,
- context: {
- style: select(
- 'style',
- {
- 'light': 'light',
- 'dark': 'dark',
- },
- 'dark'
- ),
- }
}}
@@ -40,7 +28,6 @@ A simple dropdown component with support for links and buttons. Supports `light`
Button menu item
`,
- context: {}
}}
diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index 8d083567d..7a1bf9e53 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -1,22 +1,7 @@
@use '../variables/sizing';
@use '../utilities/type';
-@use '../utilities/dropdown';
-@include dropdown.dropdown-style(
- 'light',
- (
- color: var(--white),
- chevron: 'light',
- )
-);
-
-@include dropdown.dropdown-style(
- 'dark',
- (
- color: var(--black),
- chevron: 'dark',
- )
-);
+$chevron: "data:image/svg+xml;utf-8,";
.rose-dropdown {
position: relative;
@@ -31,6 +16,8 @@
padding: 0 sizing.rems(xl) 0 sizing.rems(l);
$lineHeight: 36 / 13;
line-height: $lineHeight;
+ color: var(--black);
+ background: url($chevron) no-repeat right sizing.rems(s) center;
// Hide default twistie triangle
// Webkit / Chromium
@@ -136,7 +123,11 @@
width: 100%;
&.rose-button-warning {
- color: unset;
+ color: var(--failure);
+
+ &:hover {
+ color: var(--white);
+ }
}
}
}
diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index 0cfdaccdf..c30f1371a 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -1,14 +1,18 @@
@use '../../variables/sizing';
@use '../../utilities/type';
+$chevron: "data:image/svg+xml;utf-8,";
+
.rose-header-utilities,
.rose-header-nav {
margin-right: sizing.rems(s);
.rose-dropdown-trigger {
- background-size: sizing.rems(m);
$lineHeight: 48 / 16;
line-height: $lineHeight;
+ color: var(--white);
+ background: url($chevron) no-repeat right center;
+ background-size: sizing.rems(m);
.rose-icon {
--size: #{sizing.rems(l)};
@@ -28,3 +32,7 @@
}
}
}
+
+.rose-header-nav .rose-dropdown-trigger{
+ padding-right: sizing.rems(l);
+}
diff --git a/addons/rose/addon/styles/rose/utilities/_dropdown.scss b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
deleted file mode 100644
index b7e2a5358..000000000
--- a/addons/rose/addon/styles/rose/utilities/_dropdown.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use 'sass:map';
-@use '../variables/sizing';
-
-$dropdown-chevron: (
- 'light':
- "data:image/svg+xml;utf-8,",
- 'dark':
- "data:image/svg+xml;utf-8,",
-);
-
-@mixin dropdown-style($name, $default) {
- .rose-dropdown-#{$name} {
- .rose-dropdown-trigger {
- color: map.get($default, color);
- background: url(map.get($dropdown-chevron, map.get($default, chevron)))
- no-repeat right sizing.rems(s) center;
- }
- }
-}
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index c2be96f2d..9386431d2 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,6 +1,6 @@
diff --git a/addons/rose/addon/templates/components/rose/header/utilities.hbs b/addons/rose/addon/templates/components/rose/header/utilities.hbs
index cd0705a52..8c178538c 100644
--- a/addons/rose/addon/templates/components/rose/header/utilities.hbs
+++ b/addons/rose/addon/templates/components/rose/header/utilities.hbs
@@ -1,5 +1,5 @@