From e63e2f87e17171bb229489ceb2fb3b9111cc98c0 Mon Sep 17 00:00:00 2001 From: Eddie Liu Date: Tue, 23 Apr 2019 11:32:08 -0700 Subject: [PATCH] CommandBar / CommandBarButton style updates (#8804) * work in progress * Add menu_button_classname, fix button_icon_classname * Import classnames from BaseButto.classNames * Add change file * Style updates * Update snapshot * Fix selector * update snapshots * Remove unnecessary color * Fix style selector order so rootCheckedHovered is after rootChecked --- ...rButtonStylesFabric7_2019-04-22-21-26.json | 11 + .../CommandBarButton.styles.ts | 93 ++++- .../Button/__snapshots__/Button.test.tsx.snap | 18 +- .../CommandBar/CommandBar.styles.ts | 3 +- .../CommandBar.deprecated.test.tsx.snap | 34 +- .../__snapshots__/CommandBar.test.tsx.snap | 34 +- .../Button.CommandBar.Example.tsx.shot | 67 +++- .../CommandBar.Basic.Example.tsx.shot | 144 +++++-- .../CommandBar.ButtonAs.Example.tsx.shot | 130 ++++++- ...andBar.CommandBarButtonAs.Example.tsx.shot | 288 +++++++++++--- .../CommandBar.SplitDisabled.Example.tsx.shot | 131 +++++-- .../DetailsList.Advanced.Example.tsx.shot | 74 +++- .../Keytips.CommandBar.Example.tsx.shot | 56 ++- .../Keytips.Overflow.Example.tsx.shot | 64 +++- .../OverflowSet.Custom.Example.tsx.shot | 70 +++- .../OverflowSet.Vertical.Example.tsx.shot | 70 +++- .../ResizeGroup.OverflowSet.Example.tsx.shot | 360 +++++++++++++++--- 17 files changed, 1380 insertions(+), 267 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/edwl-2019-04-commandBarButtonStylesFabric7_2019-04-22-21-26.json diff --git a/common/changes/office-ui-fabric-react/edwl-2019-04-commandBarButtonStylesFabric7_2019-04-22-21-26.json b/common/changes/office-ui-fabric-react/edwl-2019-04-commandBarButtonStylesFabric7_2019-04-22-21-26.json new file mode 100644 index 0000000000000..629d11d13ab4f --- /dev/null +++ b/common/changes/office-ui-fabric-react/edwl-2019-04-commandBarButtonStylesFabric7_2019-04-22-21-26.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Update CommandBar/CommandBarButton styles", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "edwl@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts index 54d2d0730855d..fdff2126214c7 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts @@ -3,13 +3,14 @@ import { ITheme, concatStyleSets, getFocusStyle, HighContrastSelector } from '.. import { memoizeFunction } from '../../../Utilities'; import { getStyles as getBaseButtonStyles } from '../BaseButton.styles'; import { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles'; +import { ButtonGlobalClassNames } from '../BaseButton.classNames'; export const getStyles = memoizeFunction( (theme: ITheme, customStyles?: IButtonStyles, focusInset?: string, focusColor?: string): IButtonStyles => { const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); const baseSplitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); - const { palette: p } = theme; + const { palette: p, semanticColors } = theme; const commandButtonHighContrastFocus = { left: 4, @@ -25,7 +26,7 @@ export const getStyles = memoizeFunction( theme.fonts.small, { minWidth: '40px', - backgroundColor: 'transparent', + backgroundColor: p.white, color: p.neutralPrimary, padding: '0 4px', border: 'none', @@ -44,28 +45,78 @@ export const getStyles = memoizeFunction( selectors: { [HighContrastSelector]: { color: 'Highlight' + }, + [`.${ButtonGlobalClassNames.msButtonIcon}`]: { + color: p.themeDarkAlt + }, + [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: { + color: p.neutralPrimary } } }, rootPressed: { backgroundColor: p.neutralLight, - color: p.black + color: p.neutralDark, + selectors: { + [`.${ButtonGlobalClassNames.msButtonIcon}`]: { + color: p.themeDark + }, + [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: { + color: p.neutralPrimary + } + } }, rootChecked: { backgroundColor: p.neutralLight, - color: p.black + color: p.neutralDark, + selectors: { + [`.${ButtonGlobalClassNames.msButtonIcon}`]: { + color: p.themeDark + }, + [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: { + color: p.neutralPrimary + } + } + }, + + rootCheckedHovered: { + backgroundColor: p.neutralQuaternaryAlt, + selectors: { + [`.${ButtonGlobalClassNames.msButtonIcon}`]: { + color: p.themeDark + }, + [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: { + color: p.neutralPrimary + } + } }, rootExpanded: { backgroundColor: p.neutralLight, - color: p.black + color: p.neutralDark, + selectors: { + [`.${ButtonGlobalClassNames.msButtonIcon}`]: { + color: p.themeDark + }, + [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: { + color: p.neutralPrimary + } + } }, - rootCheckedHovered: { - backgroundColor: p.neutralQuaternaryAlt, - color: p.black + rootExpandedHovered: { + backgroundColor: p.neutralQuaternaryAlt + }, + + rootDisabled: { + backgroundColor: p.white, + selectors: { + [`.${ButtonGlobalClassNames.msButtonIcon}`]: { + color: semanticColors.disabledBodySubtext + } + } }, // Split button styles @@ -84,11 +135,11 @@ export const getStyles = memoizeFunction( }, splitButtonMenuButton: { - backgroundColor: 'transparent', + backgroundColor: p.white, border: 'none', borderTopRightRadius: '0', borderBottomRightRadius: '0', - color: p.neutralPrimary, + color: p.neutralSecondary, selectors: { ':hover': { backgroundColor: p.neutralLighter, @@ -96,6 +147,17 @@ export const getStyles = memoizeFunction( selectors: { [HighContrastSelector]: { color: 'Highlight' + }, + [`.${ButtonGlobalClassNames.msButtonIcon}`]: { + color: p.neutralPrimary + } + } + }, + ':active': { + backgroundColor: p.neutralLight, + selectors: { + [`.${ButtonGlobalClassNames.msButtonIcon}`]: { + color: p.neutralPrimary } } } @@ -103,17 +165,12 @@ export const getStyles = memoizeFunction( }, splitButtonMenuButtonDisabled: { - backgroundColor: p.neutralLighter, - selectors: { - ':hover': { - backgroundColor: p.neutralLighter - } - } + backgroundColor: p.white }, splitButtonMenuButtonChecked: { backgroundColor: p.neutralLight, - color: p.black, + color: p.neutralDark, selectors: { ':hover': { backgroundColor: p.neutralQuaternaryAlt @@ -144,7 +201,7 @@ export const getStyles = memoizeFunction( }, icon: { - color: p.themeDarkAlt + color: p.themePrimary }, menuIcon: { diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap index fba4d64cd2093..3a0773007ad06 100644 --- a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -131,7 +131,7 @@ exports[`Button renders CommandBarButton correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -190,9 +190,21 @@ exports[`Button renders CommandBarButton correctly 1`] = ` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -220,7 +232,7 @@ exports[`Button renders CommandBarButton correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.styles.ts b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.styles.ts index 35eb65e04e6ab..b56668b123d6e 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.styles.ts +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.styles.ts @@ -4,6 +4,7 @@ const COMMAND_BAR_HEIGHT = 44; export const getStyles = (props: ICommandBarStyleProps): ICommandBarStyles => { const { className, theme } = props; + const { palette } = theme; return { root: [ @@ -11,7 +12,7 @@ export const getStyles = (props: ICommandBarStyleProps): ICommandBarStyles => { 'ms-CommandBar', { display: 'flex', - backgroundColor: 'transparent', + backgroundColor: palette.white, padding: '0 14px 0 24px', height: COMMAND_BAR_HEIGHT }, diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap b/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap index dc39e058b56b2..19d7b91f3f19e 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap @@ -27,7 +27,7 @@ exports[`CommandBar renders commands correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -73,7 +73,7 @@ exports[`CommandBar renders commands correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -133,9 +133,21 @@ exports[`CommandBar renders commands correctly 1`] = ` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="asdf" @@ -202,7 +214,7 @@ exports[`CommandBar renders commands correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -262,9 +274,21 @@ exports[`CommandBar renders commands correctly 1`] = ` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="asdf" diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap index 1cb421c8cc6d4..322010cebac51 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap @@ -27,7 +27,7 @@ exports[`CommandBar renders commands correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -73,7 +73,7 @@ exports[`CommandBar renders commands correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -133,9 +133,21 @@ exports[`CommandBar renders commands correctly 1`] = ` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -201,7 +213,7 @@ exports[`CommandBar renders commands correctly 1`] = ` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -261,9 +273,21 @@ exports[`CommandBar renders commands correctly 1`] = ` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Button.CommandBar.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Button.CommandBar.Example.tsx.shot index 09f03072c4d29..42addf06f4a50 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/Button.CommandBar.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Button.CommandBar.Example.tsx.shot @@ -21,7 +21,7 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -80,9 +80,21 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-automation-id="test" data-is-focusable={true} @@ -111,7 +123,7 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -259,7 +271,7 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -318,9 +330,21 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-automation-id="test" data-is-focusable={false} @@ -349,7 +373,7 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -402,14 +426,14 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] className= ms-Button { - background-color: transparent; + background-color: #ffffff; border-bottom-right-radius: 0; border-left: none; border-radius: 0px; border-top-right-radius: 0; border: none; box-sizing: border-box; - color: #323130; + color: #605e5c; cursor: pointer; display: inline-block; height: auto; @@ -432,6 +456,15 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #323130; + } + &:active { + background-color: #edebe9; + } + &:active .ms-Button-icon { + color: #323130; + } data-is-focusable={false} onClick={[Function]} onKeyDown={[Function]} @@ -507,7 +540,7 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -566,9 +599,21 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-automation-id="test2" data-is-focusable={true} @@ -597,7 +642,7 @@ exports[`Component Examples renders Button.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.Basic.Example.tsx.shot index 51e4e30f8f8a7..4aa91a6ccd6f2 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.Basic.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.Basic.Example.tsx.shot @@ -27,7 +27,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -77,7 +77,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -137,9 +137,21 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="New" @@ -169,7 +181,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -262,7 +274,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -322,9 +334,21 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-automation-id="uploadButton" data-is-focusable={true} @@ -355,7 +379,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -420,7 +444,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -480,9 +504,21 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Share" @@ -512,7 +548,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -577,7 +613,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -637,9 +673,21 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Download" @@ -669,7 +717,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -738,7 +786,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -797,9 +845,21 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -883,7 +943,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -943,9 +1003,21 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Sort" @@ -975,7 +1047,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1052,7 +1124,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1112,9 +1184,21 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Grid view" @@ -1144,7 +1228,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1198,7 +1282,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1258,9 +1342,21 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Info" @@ -1290,7 +1386,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.ButtonAs.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.ButtonAs.Example.tsx.shot index 22f469af60815..a1a0036e93340 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.ButtonAs.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.ButtonAs.Example.tsx.shot @@ -27,7 +27,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -77,7 +77,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -137,9 +137,21 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="New" @@ -263,7 +275,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -323,9 +335,21 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-automation-id="uploadButton" data-is-focusable={true} @@ -422,7 +446,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -482,9 +506,21 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Share" @@ -580,7 +616,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -640,9 +676,21 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Download" @@ -742,7 +790,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -801,9 +849,21 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -887,7 +947,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -947,9 +1007,21 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Sort" @@ -1057,7 +1129,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1117,9 +1189,21 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Grid view" @@ -1203,7 +1287,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1263,9 +1347,21 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1` @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Info" diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot index 5b189f36d87a7..752277cec6ece 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot @@ -26,7 +26,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -76,7 +76,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -136,9 +136,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="New" @@ -168,7 +180,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -261,7 +273,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -321,9 +333,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-automation-id="uploadButton" data-is-focusable={true} @@ -354,7 +378,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -420,7 +444,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -480,9 +504,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Share" @@ -512,7 +548,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -578,7 +614,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -638,9 +674,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Download" @@ -670,7 +718,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -739,7 +787,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -798,9 +846,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -884,7 +944,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -944,9 +1004,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Sort" @@ -976,7 +1048,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1053,7 +1125,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1113,9 +1185,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Grid view" @@ -1145,7 +1229,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1199,7 +1283,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1259,9 +1343,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Info" @@ -1291,7 +1387,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1350,7 +1446,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -1400,7 +1496,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1460,9 +1556,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="New" @@ -1492,7 +1600,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1585,7 +1693,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1645,9 +1753,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-automation-id="uploadButton" data-is-focusable={true} @@ -1678,7 +1798,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1744,7 +1864,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1804,9 +1924,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Share" @@ -1836,7 +1968,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2387,7 +2519,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2447,9 +2579,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Download" @@ -2479,7 +2623,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2548,7 +2692,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2607,9 +2751,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -2693,7 +2849,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2753,9 +2909,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Sort" @@ -2785,7 +2953,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2862,7 +3030,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2922,9 +3090,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Grid view" @@ -2954,7 +3134,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -3008,7 +3188,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -3068,9 +3248,21 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Info" @@ -3100,7 +3292,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.SplitDisabled.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.SplitDisabled.Example.tsx.shot index 03a40f99cd050..b8e63018cb9b5 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.SplitDisabled.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/CommandBar.SplitDisabled.Example.tsx.shot @@ -27,7 +27,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -140,7 +140,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -200,9 +200,21 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={false} name="New" @@ -232,7 +244,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -286,14 +298,14 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct className= ms-Button { - background-color: transparent; + background-color: #ffffff; border-bottom-right-radius: 0; border-left: none; border-radius: 0px; border-top-right-radius: 0; border: none; box-sizing: border-box; - color: #323130; + color: #605e5c; cursor: pointer; display: inline-block; height: auto; @@ -316,6 +328,15 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #323130; + } + &:active { + background-color: #edebe9; + } + &:active .ms-Button-icon { + color: #323130; + } data-is-focusable={false} onClick={[Function]} onKeyDown={[Function]} @@ -467,7 +488,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: #f3f2f1; + background-color: #ffffff; border-color: #f3f2f1; border-radius: 0px; border: none; @@ -530,6 +551,9 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct &:focus { outline: 0px; } + & .ms-Button-icon { + color: #c8c6c4; + } data-automation-id="uploadButton" data-is-focusable={false} disabled={false} @@ -616,14 +640,14 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct ms-Button is-disabled { - background-color: #f3f2f1; + background-color: #ffffff; border-bottom-right-radius: 0; border-left: none; border-radius: 0px; border-top-right-radius: 0; border: none; box-sizing: border-box; - color: #323130; + color: #605e5c; cursor: pointer; display: inline-block; height: auto; @@ -648,6 +672,15 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #323130; + } + &:active { + background-color: #edebe9; + } + &:active .ms-Button-icon { + color: #323130; + } data-is-focusable={false} disabled={false} onClick={[Function]} @@ -736,7 +769,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: #f3f2f1; + background-color: #ffffff; border-color: #f3f2f1; border-radius: 0px; border: none; @@ -799,6 +832,9 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct &:focus { outline: 0px; } + & .ms-Button-icon { + color: #c8c6c4; + } data-is-focusable={true} disabled={false} name="Share" @@ -906,7 +942,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: #f3f2f1; + background-color: #ffffff; border-color: #f3f2f1; border-radius: 0px; border: none; @@ -969,6 +1005,9 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct &:focus { outline: 0px; } + & .ms-Button-icon { + color: #c8c6c4; + } data-is-focusable={true} disabled={false} name="Download" @@ -1044,7 +1083,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1103,9 +1142,21 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -1189,7 +1240,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1249,9 +1300,21 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Sort" @@ -1281,7 +1344,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1358,7 +1421,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1418,9 +1481,21 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Grid view" @@ -1450,7 +1525,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1504,7 +1579,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1564,9 +1639,21 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} name="Info" @@ -1596,7 +1683,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot index 3521fbf609f28..148fe23f10b13 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot @@ -4,7 +4,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1
@@ -32,7 +32,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -79,7 +79,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -139,9 +139,21 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -170,7 +182,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -235,7 +247,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -295,9 +307,21 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -326,7 +350,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -394,7 +418,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -454,9 +478,21 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -485,7 +521,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -592,7 +628,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -652,9 +688,21 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.CommandBar.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.CommandBar.Example.tsx.shot index cedd9d01f0dc2..dbfd24640a315 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.CommandBar.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.CommandBar.Example.tsx.shot @@ -32,7 +32,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; font-size: 14px; @@ -79,7 +79,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -139,9 +139,21 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} data-ktp-execute-target="ktp-j" @@ -172,7 +184,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -238,7 +250,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -298,9 +310,21 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} data-ktp-execute-target="ktp-m" @@ -331,7 +355,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -414,7 +438,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -474,9 +498,21 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} data-ktp-execute-target="ktp-l-k" @@ -507,7 +543,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Overflow.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Overflow.Example.tsx.shot index fc4de9699420b..567cd2583eb84 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Overflow.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Overflow.Example.tsx.shot @@ -37,7 +37,7 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -96,9 +96,21 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} data-ktp-execute-target="ktp-q" @@ -165,7 +177,7 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -224,9 +236,21 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} data-ktp-execute-target="ktp-w" @@ -293,7 +317,7 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -352,9 +376,21 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} data-ktp-execute-target="ktp-e" @@ -424,7 +460,7 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] = { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -483,9 +519,21 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] = @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} data-ktp-execute-target="ktp-r" diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/OverflowSet.Custom.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/OverflowSet.Custom.Example.tsx.shot index 13643ac06cf4e..d5feedf3450ed 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/OverflowSet.Custom.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/OverflowSet.Custom.Example.tsx.shot @@ -169,7 +169,7 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -228,9 +228,21 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -258,7 +270,7 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -349,7 +361,7 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -408,9 +420,21 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -438,7 +462,7 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -501,7 +525,7 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -560,9 +584,21 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -590,7 +626,7 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -657,7 +693,7 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-self: stretch; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -717,9 +753,21 @@ exports[`Component Examples renders OverflowSet.Custom.Example.tsx correctly 1`] @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/OverflowSet.Vertical.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/OverflowSet.Vertical.Example.tsx.shot index aaadbf20ee427..ca0827814a4eb 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/OverflowSet.Vertical.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/OverflowSet.Vertical.Example.tsx.shot @@ -43,7 +43,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -102,9 +102,21 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -132,7 +144,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -184,7 +196,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -243,9 +255,21 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -273,7 +297,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -325,7 +349,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -384,9 +408,21 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -414,7 +450,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -458,7 +494,7 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -517,9 +553,21 @@ exports[`Component Examples renders OverflowSet.Vertical.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot index ea8996ba8295a..78ca21b5a6151 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot @@ -56,7 +56,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -115,9 +115,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -145,7 +157,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -209,7 +221,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -268,9 +280,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -298,7 +322,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -362,7 +386,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -421,9 +445,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -451,7 +487,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -515,7 +551,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -574,9 +610,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -604,7 +652,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -668,7 +716,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -727,9 +775,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -757,7 +817,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -821,7 +881,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -880,9 +940,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -910,7 +982,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -974,7 +1046,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1033,9 +1105,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -1063,7 +1147,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1127,7 +1211,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1186,9 +1270,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -1216,7 +1312,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1280,7 +1376,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1339,9 +1435,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -1369,7 +1477,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1433,7 +1541,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1492,9 +1600,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -1522,7 +1642,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1586,7 +1706,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1645,9 +1765,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -1675,7 +1807,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1739,7 +1871,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1798,9 +1930,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -1828,7 +1972,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -1892,7 +2036,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -1951,9 +2095,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -1981,7 +2137,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2045,7 +2201,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2104,9 +2260,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -2134,7 +2302,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2198,7 +2366,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2257,9 +2425,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -2287,7 +2467,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2351,7 +2531,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2410,9 +2590,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -2440,7 +2632,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2504,7 +2696,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2563,9 +2755,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -2593,7 +2797,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2657,7 +2861,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2716,9 +2920,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -2746,7 +2962,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2810,7 +3026,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -2869,9 +3085,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -2899,7 +3127,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons"; @@ -2963,7 +3191,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: transparent; + background-color: #ffffff; border-radius: 0px; border: none; box-sizing: border-box; @@ -3022,9 +3250,21 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl @media screen and (-ms-high-contrast: active){&:hover { color: Highlight; } + &:hover .ms-Button-icon { + color: #106ebe; + } + &:hover .ms-Button-menuIcon { + color: #323130; + } &:active { background-color: #edebe9; - color: #000000; + color: #201f1e; + } + &:active .ms-Button-icon { + color: #005a9e; + } + &:active .ms-Button-menuIcon { + color: #323130; } data-is-focusable={true} onClick={[Function]} @@ -3052,7 +3292,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #106ebe; + color: #0078d4; display: inline-block; flex-shrink: 0; font-family: "FabricMDL2Icons";