From 85f603df5e80886a0dc5f910018734317be9ff52 Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Fri, 22 Jul 2016 12:53:11 -0700 Subject: [PATCH 1/7] #191731: updated hover state color for overflow button --- src/components/Breadcrumb/Breadcrumb.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 4e10ffdb9949f..0daa2050c5a1a 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -8,4 +8,9 @@ .ms-Breadcrumb-overflowButton { line-height: 12px; margin-right: 0px; + + // Temp fix. Should ne updated in fabric core + &:hover{ + color: $ms-color-themeDark; + } } \ No newline at end of file From c890a9d68e0901b436e5ee620d09107a4c52b078 Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Fri, 22 Jul 2016 12:55:22 -0700 Subject: [PATCH 2/7] #191719: added override styles for breadcrumb focus rect --- src/components/Breadcrumb/Breadcrumb.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 0daa2050c5a1a..6895cd9d2b941 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -10,7 +10,26 @@ margin-right: 0px; // Temp fix. Should ne updated in fabric core - &:hover{ + &:hover { color: $ms-color-themeDark; } +} + + +// Override the default fabric styles for focus which do not make use of FocusZone +.ms-Breadcrumb-itemLink { + + &:focus { + outline: none; + color: $ms-color-neutralPrimary; + } + +} + +.ms-Fabric.is-focusVisible .ms-Breadcrumb-itemLink { + + &:focus { + outline: 1px solid $ms-color-neutralSecondaryAlt; + color: $ms-color-black; + } } \ No newline at end of file From 0879ad67e1b74736b23eb9dfa470840a1cb07379 Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Fri, 22 Jul 2016 12:56:32 -0700 Subject: [PATCH 3/7] #191719: code formatting - missing space --- src/components/Breadcrumb/Breadcrumb.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 6895cd9d2b941..dc14047b62872 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -9,7 +9,7 @@ line-height: 12px; margin-right: 0px; - // Temp fix. Should ne updated in fabric core + // Temp fix. Should be updated in fabric core &:hover { color: $ms-color-themeDark; } @@ -18,16 +18,13 @@ // Override the default fabric styles for focus which do not make use of FocusZone .ms-Breadcrumb-itemLink { - &:focus { outline: none; color: $ms-color-neutralPrimary; } - } .ms-Fabric.is-focusVisible .ms-Breadcrumb-itemLink { - &:focus { outline: 1px solid $ms-color-neutralSecondaryAlt; color: $ms-color-black; From 9f3323b6fba27c03af6c6c3a3ab58c2b4e324ebd Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Tue, 26 Jul 2016 13:00:09 -0700 Subject: [PATCH 4/7] #191723: per design - removed negative margin-right from overflow breadcrumb --- src/components/Breadcrumb/Breadcrumb.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index dc14047b62872..a5cadb3128375 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -3,6 +3,7 @@ .ms-Breadcrumb-overflow { display: inline-block; + margin-right: 0px; } .ms-Breadcrumb-overflowButton { From 4b4c60951d15c2a3c33971d0c8091a848b956bfc Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Wed, 27 Jul 2016 11:31:51 -0700 Subject: [PATCH 5/7] #191723: code cleanup --- src/components/Breadcrumb/Breadcrumb.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index a5cadb3128375..b5a30e493c1ad 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -16,7 +16,6 @@ } } - // Override the default fabric styles for focus which do not make use of FocusZone .ms-Breadcrumb-itemLink { &:focus { @@ -30,4 +29,4 @@ outline: 1px solid $ms-color-neutralSecondaryAlt; color: $ms-color-black; } -} \ No newline at end of file +} From 971fc261f205bb39cfeca816226344b4646b65bb Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Wed, 27 Jul 2016 14:30:23 -0700 Subject: [PATCH 6/7] #191723: updated to use localized margins --- src/components/Breadcrumb/Breadcrumb.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index b5a30e493c1ad..b75e4afc42bd8 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -2,13 +2,13 @@ @import '~office-ui-fabric/src/components/Breadcrumb/Breadcrumb'; .ms-Breadcrumb-overflow { + @include margin-right(0px); display: inline-block; - margin-right: 0px; } .ms-Breadcrumb-overflowButton { + @include margin-right(0px); line-height: 12px; - margin-right: 0px; // Temp fix. Should be updated in fabric core &:hover { From 8c15bdcdd72430becefb831e3c40731dc63c336e Mon Sep 17 00:00:00 2001 From: Stephen Morrissey Date: Thu, 28 Jul 2016 12:11:55 -0700 Subject: [PATCH 7/7] 191731: removed overrides that are no longer necessary. Updated to use focus-border. --- src/components/Breadcrumb/Breadcrumb.scss | 39 ++--------------------- 1 file changed, 3 insertions(+), 36 deletions(-) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 50c436848cb34..7dd193f79d97a 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -47,15 +47,13 @@ } .ms-Breadcrumb-overflow { - display: none; + display: inline-block; position: relative; - margin-right: -4px; .ms-Breadcrumb-overflowButton { font-size: $ms-font-size-s; display: inline-block; color:$ms-color-themePrimary; - margin-right: -4px; padding: 12px 8px 3px 8px; cursor: pointer; } @@ -106,6 +104,7 @@ &:hover { background-color: $ms-color-neutralLighter; + color: $ms-color-themeDark; cursor: pointer; } @@ -121,6 +120,7 @@ } .ms-Breadcrumb-itemLink { + @include focus-border(); @include ms-font-xl(); display: inline-block; padding: 0 4px; @@ -130,7 +130,6 @@ overflow: hidden; } - @media screen and (max-width: $ms-screen-md-max) { .ms-Breadcrumb { margin: 10px 0; @@ -170,35 +169,3 @@ } } } - -// TODO: Overrides that need to be removed. - -.ms-Breadcrumb-overflow { - @include margin-right(0px); - display: inline-block; -} - -.ms-Breadcrumb-overflowButton { - @include margin-right(0px); - line-height: 12px; - - // Temp fix. Should be updated in fabric core - &:hover { - color: $ms-color-themeDark; - } -} - -// Override the default fabric styles for focus which do not make use of FocusZone -.ms-Breadcrumb-itemLink { - &:focus { - outline: none; - color: $ms-color-neutralPrimary; - } -} - -.ms-Fabric.is-focusVisible .ms-Breadcrumb-itemLink { - &:focus { - outline: 1px solid $ms-color-neutralSecondaryAlt; - color: $ms-color-black; - } -}