From ef08863c12a69bb8a65deb6fdb93088ff6ff703e Mon Sep 17 00:00:00 2001 From: Aaron VonderHaar Date: Mon, 1 Jul 2019 11:21:33 -0700 Subject: [PATCH 1/4] SegmentedControl.V7 prevents external CSS from interacting with its hover states --- src/Nri/Ui/SegmentedControl/V7.elm | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Nri/Ui/SegmentedControl/V7.elm b/src/Nri/Ui/SegmentedControl/V7.elm index 57da7fd4..458afc1a 100644 --- a/src/Nri/Ui/SegmentedControl/V7.elm +++ b/src/Nri/Ui/SegmentedControl/V7.elm @@ -205,6 +205,12 @@ sharedTabStyles = , cursor pointer , property "transition" "background-color 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s, border-width 0s" , textDecoration none + , hover + [ textDecoration none + ] + , focus + [ textDecoration none + ] ] From a72d4d3c4e652870d6e032edeb0f8cd45d05a80b Mon Sep 17 00:00:00 2001 From: Aaron VonderHaar Date: Mon, 1 Jul 2019 11:23:52 -0700 Subject: [PATCH 2/4] Import as Colors --- src/Nri/Ui/Tabs/V4.elm | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Nri/Ui/Tabs/V4.elm b/src/Nri/Ui/Tabs/V4.elm index 446eb403..5daf3292 100644 --- a/src/Nri/Ui/Tabs/V4.elm +++ b/src/Nri/Ui/Tabs/V4.elm @@ -40,7 +40,7 @@ import Html.Styled.Events as Events import Json.Decode import List.Zipper exposing (Zipper(..)) import Nri.Ui.Colors.Extra -import Nri.Ui.Colors.V1 +import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 @@ -99,7 +99,7 @@ viewCustom config viewInnerTab = , Css.alignItems Css.flexEnd , Css.borderBottom (Css.px 1) , Css.borderBottomStyle Css.solid - , Css.borderBottomColor Nri.Ui.Colors.V1.navy + , Css.borderBottomColor Colors.navy , Nri.Ui.Fonts.V1.baseFont ] [] @@ -131,7 +131,7 @@ viewTitle title = , Css.margin Css.zero , Css.marginTop (Css.px 5) , Css.marginBottom (Css.px 10) - , Css.color Nri.Ui.Colors.V1.navy + , Css.color Colors.navy , Css.width (Css.px 430) ] [] @@ -175,7 +175,7 @@ viewTab { onSelect, tabs } viewInnerTab selected tab = Events.keyCode ] [ Html.styled Html.div - [ Css.color Nri.Ui.Colors.V1.navy + [ Css.color Colors.navy , Css.hover [ Css.textDecoration Css.none ] , Css.focus [ Css.textDecoration Css.none ] , Css.display Css.inlineBlock @@ -233,7 +233,7 @@ links config = , Css.alignItems Css.flexEnd , Css.borderBottom (Css.px 1) , Css.borderBottomStyle Css.solid - , Css.borderBottomColor Nri.Ui.Colors.V1.navy + , Css.borderBottomColor Colors.navy , Nri.Ui.Fonts.V1.baseFont ] [] @@ -281,7 +281,7 @@ viewTabLink config isSelected tabConfig = [ case tabHref of Just href -> Html.styled Html.a - [ Css.color Nri.Ui.Colors.V1.navy + [ Css.color Colors.navy , Css.display Css.inlineBlock , Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20) , Css.textDecoration Css.none @@ -291,7 +291,7 @@ viewTabLink config isSelected tabConfig = Nothing -> Html.styled Html.button - [ Css.color Nri.Ui.Colors.V1.navy + [ Css.color Colors.navy , Css.display Css.inlineBlock , Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20) , Css.textDecoration Css.none @@ -365,19 +365,19 @@ stylesTabSelectable isSelected = let stylesDynamic = if isSelected then - [ Css.backgroundColor Nri.Ui.Colors.V1.white + [ Css.backgroundColor Colors.white , Css.borderBottom (Css.px 1) , Css.borderBottomStyle Css.solid - , Css.borderBottomColor Nri.Ui.Colors.V1.white + , Css.borderBottomColor Colors.white ] else - [ Css.backgroundColor Nri.Ui.Colors.V1.frost + [ Css.backgroundColor Colors.frost , Css.backgroundImage <| Css.linearGradient2 Css.toTop - (Css.stop2 (Nri.Ui.Colors.Extra.withAlpha 0.25 Nri.Ui.Colors.V1.azure) (Css.pct 0)) - (Css.stop2 (Nri.Ui.Colors.Extra.withAlpha 0 Nri.Ui.Colors.V1.azure) (Css.pct 25)) - [ Css.stop2 (Nri.Ui.Colors.Extra.withAlpha 0 Nri.Ui.Colors.V1.azure) (Css.pct 100) ] + (Css.stop2 (Nri.Ui.Colors.Extra.withAlpha 0.25 Colors.azure) (Css.pct 0)) + (Css.stop2 (Nri.Ui.Colors.Extra.withAlpha 0 Colors.azure) (Css.pct 25)) + [ Css.stop2 (Nri.Ui.Colors.Extra.withAlpha 0 Colors.azure) (Css.pct 100) ] ] in stylesTab ++ stylesDynamic @@ -388,7 +388,7 @@ stylesTab = [ Css.display Css.inlineBlock , Css.borderTopLeftRadius (Css.px 10) , Css.borderTopRightRadius (Css.px 10) - , Css.border3 (Css.px 1) Css.solid Nri.Ui.Colors.V1.navy + , Css.border3 (Css.px 1) Css.solid Colors.navy , Css.marginBottom (Css.px -1) , Css.marginLeft (Css.px 10) , Css.cursor Css.pointer From ca5ba5dab871fc7ff89943f95e24f45ec6ed57f7 Mon Sep 17 00:00:00 2001 From: Aaron VonderHaar Date: Mon, 1 Jul 2019 11:24:33 -0700 Subject: [PATCH 3/4] Tabs.V4 prevents external CSS from interacting with its hover states --- src/Nri/Ui/Tabs/V4.elm | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/Nri/Ui/Tabs/V4.elm b/src/Nri/Ui/Tabs/V4.elm index 5daf3292..d5395b5d 100644 --- a/src/Nri/Ui/Tabs/V4.elm +++ b/src/Nri/Ui/Tabs/V4.elm @@ -32,7 +32,7 @@ import Accessibility.Aria import Accessibility.Key import Accessibility.Role import Accessibility.Widget -import Css exposing (Style) +import Css exposing (..) import EventExtras import Html.Styled as Html exposing (Attribute, Html) import Html.Styled.Attributes as Attributes @@ -176,8 +176,6 @@ viewTab { onSelect, tabs } viewInnerTab selected tab = ] [ Html.styled Html.div [ Css.color Colors.navy - , Css.hover [ Css.textDecoration Css.none ] - , Css.focus [ Css.textDecoration Css.none ] , Css.display Css.inlineBlock , Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20) , Css.position Css.relative @@ -285,6 +283,12 @@ viewTabLink config isSelected tabConfig = , Css.display Css.inlineBlock , Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20) , Css.textDecoration Css.none + , hover + [ textDecoration none + ] + , focus + [ textDecoration none + ] ] ([ Attributes.href href ] ++ preventDefault ++ currentPage) [ Html.text tabLabel ] @@ -395,4 +399,8 @@ stylesTab = , Css.firstChild [ Css.marginLeft Css.zero ] + , property "transition" "background-color 0.2s" + , hover + [ backgroundColor Colors.white + ] ] From 06a1d42c45502162cc9f0cc69f7d3e4cb8142ec3 Mon Sep 17 00:00:00 2001 From: Aaron VonderHaar Date: Mon, 1 Jul 2019 15:19:13 -0700 Subject: [PATCH 4/4] Updated hover state for SegmentedControl.V7 --- src/Nri/Ui/SegmentedControl/V7.elm | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/SegmentedControl/V7.elm b/src/Nri/Ui/SegmentedControl/V7.elm index 458afc1a..8b4104e7 100644 --- a/src/Nri/Ui/SegmentedControl/V7.elm +++ b/src/Nri/Ui/SegmentedControl/V7.elm @@ -227,7 +227,9 @@ unFocusedTabStyles = [ backgroundColor Colors.white , boxShadow5 inset zero (px -2) zero Colors.azure , color Colors.azure - , hover [ backgroundColor Colors.glacier ] + , hover + [ backgroundColor Colors.frost + ] ]