From 369ea937f5c0526f1b833433d2507cd4001f95f9 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Fri, 31 Jul 2020 10:37:23 -0400 Subject: [PATCH] chore: Use rose/dropdown comp in header utilities/dropdown --- .../styles/rose/components/_dropdown.scss | 16 +++- .../rose/components/header/_dropdown.scss | 81 ++----------------- .../styles/rose/utilities/_dropdown.scss | 4 +- .../templates/components/rose/dropdown.hbs | 2 +- .../components/rose/header/utilities.hbs | 2 +- 5 files changed, 23 insertions(+), 82 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss index bd87f3acb..d4fb27f03 100644 --- a/addons/rose/addon/styles/rose/components/_dropdown.scss +++ b/addons/rose/addon/styles/rose/components/_dropdown.scss @@ -12,12 +12,22 @@ overflow: hidden; display: flex; align-items: center; - margin-right: sizing.rems(s); padding: 0 sizing.rems(xl) 0 sizing.rems(l); $lineHeight: 36 / 13; line-height: $lineHeight; - //color: var(--subtle); + // Hide default twistie triangle + // Webkit / Chromium + &::-webkit-details-marker { + display: none; + } + // Firefox + list-style-type: none; + &::marker { + display: none; + } + + // color: var(--subtle); background: url("data:image/svg+xml;utf-8,") no-repeat right sizing.rems(s) center; background-size: sizing.rems(m); @@ -84,7 +94,7 @@ .rose-dropdown-link, .rose-button-dropdown { - @include type.type(m, normal); + @include type.type(s, normal); display: block; // Targeting min-width of 200 min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10; diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss index 5436c1b57..8e1c8766a 100644 --- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss +++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss @@ -18,44 +18,17 @@ ) ); -.rose-header-dropdown { - position: relative; - display: inline-block; +.rose-header-utilities { + margin-right: sizing.rems(s); - .rose-header-dropdown-trigger { - cursor: default; - overflow: hidden; - display: flex; - align-items: center; + .rose-dropdown-trigger { background-size: sizing.rems(m); - margin-right: sizing.rems(s); padding-right: sizing.rems(l) - sizing.rems(xxs); $lineHeight: 48 / 16; line-height: $lineHeight; - &.icon-only { - padding-right: sizing.rems(m); - - .rose-header-dropdown-trigger-text { - // TODO: factor out into visually-hidden mixin utility - position: absolute; - left: -1000px; - top: -1000px; - width: 1px; - height: 1px; - opacity: 0; - } - } - - // Hide default twistie triangle - // Webkit / Chromium - &::-webkit-details-marker { - display: none; - } - // Firefox - list-style-type: none; - &::marker { - display: none; + .rose-icon { + --size: #{sizing.rems(l)}; } .rose-icon { @@ -66,51 +39,9 @@ vertical-align: top; } } - } - - .rose-header-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); - border-radius: sizing.rems(xxxs); - background: var(--subtle); - box-shadow: 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)), - 0 $xxs $xs rgba(var(--stark-components), var(--opacity-4)); - z-index: 99; - } - - &.dropdown-right { - .rose-header-dropdown-content { - right: 0; - } - } - - .rose-header-dropdown-link, - .rose-button-header-dropdown { - @include type.type(m, normal); - display: block; - // Targeting min-width of 200 - min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10; - padding: 0 sizing.rems(s); - margin: 0; - border: 0; - 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; &:hover { - background-color: var(--ui-gray-subtler-4); + background-color: unset; } } - - .rose-button-header-dropdown { - width: 100%; - } } diff --git a/addons/rose/addon/styles/rose/utilities/_dropdown.scss b/addons/rose/addon/styles/rose/utilities/_dropdown.scss index 059d2d56d..8368a9366 100644 --- a/addons/rose/addon/styles/rose/utilities/_dropdown.scss +++ b/addons/rose/addon/styles/rose/utilities/_dropdown.scss @@ -8,8 +8,8 @@ $dropdown-chevron: ( ); @mixin dropdown-style($name, $default) { - .rose-header-dropdown-#{$name} { - .rose-header-dropdown-trigger { + .rose-dropdown-#{$name} { + .rose-dropdown-trigger { color: map.get($default, color); background: url(map.get($dropdown-chevron, map.get($default, chevron))) no-repeat right center; diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs index c65c640ba..7de02c1b7 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 6ee49e33f..cd0705a52 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 @@
{{yield (hash - dropdown=(component 'rose/header/dropdown' alignRight=true) + dropdown=(component 'rose/dropdown' alignRight=true style="light") )}}