From abb778996e2af7faa7b9a12f1fda07314ae3de1c Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Wed, 19 Aug 2020 13:58:57 -0400 Subject: [PATCH] style: tweak dropdown styles for line-height, proportion, and hover states --- .../rose/components/dropdown/_button.scss | 36 +++++++------ .../rose/components/dropdown/_dropdown.scss | 16 +++--- .../rose/components/dropdown/_link.scss | 35 ++++++------ .../rose/components/header/_dropdown.scss | 54 ++++++++++--------- .../styles/rose/components/header/_nav.scss | 1 + .../rose/components/header/_utilities.scss | 1 + .../rose/tests/dummy/app/templates/index.hbs | 2 +- 7 files changed, 78 insertions(+), 67 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/dropdown/_button.scss b/addons/rose/addon/styles/rose/components/dropdown/_button.scss index bf6dc12c8..58b78e4a1 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_button.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_button.scss @@ -2,33 +2,35 @@ @use '../../utilities/type'; .rose-dropdown-button { - @include type.type(s, normal); + @include type.type(s); display: block; - // Targeting min-width of 200 - min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10; + box-sizing: border-box; + width: 100%; + // Targeting min-width of ~200 + min-width: (sizing.rems(m) + sizing.rems(xs)) * 10; border: 0; - margin: 0; padding: 0 sizing.rems(s); - color: var(--stark); - background-color: transparent; - // target line height is 36, which is not a standard line height for this - // font size - $lineHeight: 36 / 16; - line-height: $lineHeight; - text-align: left; text-decoration: none; - cursor: pointer; + text-align: left; + $line-height: 36 / 14; + line-height: $line-height; + + --background-color: transparent; + --color: var(--stark); + color: var(--color); + background-color: var(--background-color); + + &:hover { + --background-color: var(--ui-gray-subtler-5); + } &.rose-dropdown-button-danger { - --background: var(--white); + --background-color: var(--white); --color: var(--failure); - color: var(--color); - background-color: var(--background-color); - &:hover { --color: var(--white); --background-color: var(--failure); } } -} \ No newline at end of file +} diff --git a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss index cb3c964eb..34b2753b0 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss @@ -1,6 +1,8 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +$xs: sizing.rems(xs); // 8 +$xxs: sizing.rems(xxs); // 4 $chevron: "data:image/svg+xml;utf-8,"; .rose-dropdown { @@ -13,11 +15,11 @@ $chevron: "data:image/svg+xml;utf-8, .rose-dropdown-trigger { background-color: var(--ui-gray-subtler-4); } .rose-dropdown-content { - $xs: sizing.rems(xs); // 8 - $xxs: sizing.rems(xxs); // 4 position: absolute; padding: $xxs 0; border: 1px solid var(--ui-gray-subtler-2); @@ -96,5 +95,6 @@ $chevron: "data:image/svg+xml;utf-8,"; -.rose-header-utilities, -.rose-header-nav { - margin-right: sizing.rems(s); +.rose-header { + .rose-dropdown { + &, + &[open] { + .rose-dropdown-trigger { + color: var(--white); + background: url($chevron) no-repeat right sizing.rems(s) center; + background-size: sizing.rems(m); - .rose-dropdown-trigger { - $lineHeight: 48 / 16; - line-height: $lineHeight; - color: var(--white); - background: url($chevron) no-repeat right center; - background-size: sizing.rems(m); + $yPadding: sizing.rems(xxxs); + $rightPadding: sizing.rems(xs) + sizing.rems(l); + padding: $yPadding $rightPadding $yPadding sizing.rems(s); - .rose-icon { - --size: #{sizing.rems(l)}; - } + &.has-icon-only { + padding-left: sizing.rems(xs); + } - .rose-icon { - display: inline-block; - height: var(--size); + .rose-icon { + --size: #{sizing.rems(l)}; + } - > svg { - vertical-align: top; + .rose-icon { + display: inline-block; + height: var(--size); + + > svg { + vertical-align: top; + } + } + + &:hover, &:focus { + background-color: transparent; + } } } - - &:hover, &:focus { - background-color: unset; - } } } - -.rose-header-nav .rose-dropdown-trigger{ - padding-right: sizing.rems(l); -} diff --git a/addons/rose/addon/styles/rose/components/header/_nav.scss b/addons/rose/addon/styles/rose/components/header/_nav.scss index 6e50ec714..1eee38086 100644 --- a/addons/rose/addon/styles/rose/components/header/_nav.scss +++ b/addons/rose/addon/styles/rose/components/header/_nav.scss @@ -6,6 +6,7 @@ display: flex; flex-wrap: wrap; align-items: center; + margin-right: sizing.rems(s); @media (max-width: media.width(small)) { padding: 0 20px; diff --git a/addons/rose/addon/styles/rose/components/header/_utilities.scss b/addons/rose/addon/styles/rose/components/header/_utilities.scss index ad28137ff..6632a2597 100644 --- a/addons/rose/addon/styles/rose/components/header/_utilities.scss +++ b/addons/rose/addon/styles/rose/components/header/_utilities.scss @@ -6,4 +6,5 @@ flex-wrap: wrap; flex-direction: row-reverse; align-items: center; + margin-right: sizing.rems(s); } diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index ab7081265..529b6c7c5 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -2,7 +2,7 @@ - + Menu item Menu item - danger