From b74d9fd1f3f896ebd8d0478594627b0d67f6d2e8 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Mon, 8 Aug 2016 16:59:01 -0700 Subject: [PATCH 1/6] Init. Updating default styles and padding. --- src/components/CommandBar/CommandBar.scss | 65 +++++++++---------- .../pages/CommandBarPage/examples/data.ts | 6 +- 2 files changed, 35 insertions(+), 36 deletions(-) diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index 7cd487c5c7805c..6c84e45170e85d 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -1,12 +1,5 @@ @import '../../common/common'; -.ms-CommandBarItem-icon, -.ms-CommandBarItem-overflow - { - padding: 0 2px; - min-width: 17px; -} - // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. // @@ -27,7 +20,9 @@ $CommandBar-sideAreaWidthxlg: 345px; $CommandBarItem-height: $CommandBar-height; $CommandBarItem-marginTop: 13px; $CommandBarItem-textHeight: 16px; -$CommandBarItem-iconWidth: 16px; +$CommandBarItem-fontSize: 16px; +$CommandBarItem-chevronDown-fontSize: 12px; +$CommandBarItem-overflow-fontSize: 18px; $CommandBarItem-iconLabelMargin: 8px; $CommandBarItem-flippedLineHeight: 32px; @@ -50,10 +45,9 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @include ms-font-m; position: relative; - background-color: $ms-color-themeLighterAlt; + background-color: $ms-color-neutralLighter; height: $CommandBar-height; white-space: nowrap; - user-select: none; } @@ -63,14 +57,14 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi display: inline; vertical-align: top; line-height: $CommandBar-height; - margin: 0 24px; + margin: 0 20px; } .ms-CommandBar-sideCommands { position: absolute; @include right(0px); @include text-align(right); - @include padding-right(24px); + @include margin-right(20px); } // Command Bar Item @@ -80,7 +74,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi height: $CommandBarItem-height; outline: transparent; vertical-align: top; - margin: 0 2px; + margin: 0 4px; @media screen and (-ms-high-contrast: active) { @include highContrastBorder($ms-color-black); @@ -97,29 +91,23 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBarItem-chevronDown, .ms-CommandBarItem-commandText { - display: inline; - padding: 0 2px; -} - -.ms-CommandBarItem-overflow { - font-size: $ms-font-size-m; - color: $ms-color-neutralSecondary; + display: inline-block; + padding: 0 4px; + vertical-align: top; } @mixin CommandBarItem-text { @include focus-border(2px); - font-family: inherit; - font-size: inherit; + @include ms-font-m; position: relative; background: none; border: none; - line-height: $CommandBarItem-height - 1; - height: $CommandBarItem-height; + line-height: $CommandBarItem-height; min-width: 20px; text-align: center; - padding: 0 2px; + padding: 0 4px; display: block; height: 100%; } @@ -131,11 +119,10 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBarItem-link { @include CommandBarItem-text; cursor: pointer; - padding: 0 6px; &:hover, &.is-expanded { - background-color: $ms-color-themeLight; + background-color: $ms-color-neutralLight; @media screen and (-ms-high-contrast: active) { @include highContrastBorder($ms-color-white); @@ -145,19 +132,31 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @include highContrastBorder($ms-color-black); } } + + &.is-expanded { + background-color: $ms-color-neutralQuaternary; + } + + &.is-expanded:hover { + background-color: $ms-color-neutralQuaternaryAlt; + } } .ms-CommandBarItem-icon { - font-size: $ms-font-size-l; - color: $ms-color-themePrimary; + font-size: $CommandBarItem-fontSize; + color: $ms-color-themeDarkAlt; + padding: 0 4px; } .ms-CommandBarItem-chevronDown { - vertical-align: baseline; color: $ms-color-neutralSecondary; - font-size: 16px; - width: 16px; - padding: 0 2px; + font-size: $CommandBarItem-chevronDown-fontSize; +} + +.ms-CommandBarItem-overflow { + font-size: $CommandBarItem-overflow-fontSize; + color: $ms-color-neutralPrimary; + padding: 0 7px; } .ms-CommandBarSearch { diff --git a/src/demo/pages/CommandBarPage/examples/data.ts b/src/demo/pages/CommandBarPage/examples/data.ts index df6b28b3817e98..34228551e82731 100644 --- a/src/demo/pages/CommandBarPage/examples/data.ts +++ b/src/demo/pages/CommandBarPage/examples/data.ts @@ -149,19 +149,19 @@ export const farItems = [ { key: 'sort', name: 'Sort', - icon: 'sortLines', + icon: 'SortLines', onClick: () => { return; } }, { key: 'tile', name: 'Grid view', - icon: 'tile', + icon: 'Tiles', onClick: () => { return; } }, { key: 'info', name: 'Info', - icon: 'circleInfo', + icon: 'Info', onClick: () => { return; } } ]; \ No newline at end of file From 84527124288bad981847a67a24aa6f7ffbb1c8e8 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Mon, 8 Aug 2016 17:49:40 -0700 Subject: [PATCH 2/6] Using padding instead of margin This is to get overflow items calculated correctly --- src/components/CommandBar/CommandBar.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index 6c84e45170e85d..b132cf703ae7bb 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -6,6 +6,9 @@ // Office UI Fabric // -------------------------------------------------- // Command Bar styles +// +// Using Padding instead of Margin for Command bar items so that width to +// calculate overFlow items is calculated correctly. $CommandBar-height: 40px; $CommandBar-mobileHeight: 48px; @@ -26,7 +29,6 @@ $CommandBarItem-overflow-fontSize: 18px; $CommandBarItem-iconLabelMargin: 8px; $CommandBarItem-flippedLineHeight: 32px; - $SearchBox-height: 40px; $SearchBox-widthLgCollapsed: 50px; $SearchBox-widthMdDownCollapsed: 36px; @@ -57,14 +59,14 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi display: inline; vertical-align: top; line-height: $CommandBar-height; - margin: 0 20px; + padding: 0 20px; } .ms-CommandBar-sideCommands { position: absolute; @include right(0px); @include text-align(right); - @include margin-right(20px); + @include padding-right(20px); } // Command Bar Item @@ -74,7 +76,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi height: $CommandBarItem-height; outline: transparent; vertical-align: top; - margin: 0 4px; + padding: 0 4px; @media screen and (-ms-high-contrast: active) { @include highContrastBorder($ms-color-black); From 4356a507613b3d44fde00a4c7e39035b3c0a0626 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Mon, 8 Aug 2016 18:11:51 -0700 Subject: [PATCH 3/6] fixing overflow calculations --- src/components/CommandBar/CommandBar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index b132cf703ae7bb..d0761cde31e465 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -7,7 +7,7 @@ // -------------------------------------------------- // Command Bar styles // -// Using Padding instead of Margin for Command bar items so that width to +// Using Padding instead of Margin for ms-CommandBarItem so that width to // calculate overFlow items is calculated correctly. $CommandBar-height: 40px; @@ -59,7 +59,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi display: inline; vertical-align: top; line-height: $CommandBar-height; - padding: 0 20px; + margin: 0 20px; } .ms-CommandBar-sideCommands { From aaf1f129ec934cd15edc5f13f213d5dec8c177fb Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Mon, 8 Aug 2016 18:45:56 -0700 Subject: [PATCH 4/6] Increase target area when Icons only --- src/components/CommandBar/CommandBar.scss | 5 ++++- src/components/CommandBar/CommandBar.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index d0761cde31e465..e3eca947f1c332 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -100,7 +100,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @mixin CommandBarItem-text { @include focus-border(2px); - @include ms-font-m; position: relative; @@ -112,6 +111,10 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi padding: 0 4px; display: block; height: 100%; + + &.ms-CommandBarItem--noName { + padding: 0 8px; + } } .ms-CommandBarItem-text { diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx index db5cbd30b388a8..d4ac0e3ee9229b 100644 --- a/src/components/CommandBar/CommandBar.tsx +++ b/src/components/CommandBar/CommandBar.tsx @@ -136,7 +136,7 @@ export class CommandBar extends React.Component From 4fbdf464997e154619e012cbd48ae8873f8df31c Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 9 Aug 2016 14:16:08 -0700 Subject: [PATCH 5/6] fixing searchBar --- src/components/CommandBar/CommandBar.scss | 38 ++++++++++------------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index e3eca947f1c332..6cd262e55d90bb 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -33,10 +33,8 @@ $SearchBox-height: 40px; $SearchBox-widthLgCollapsed: 50px; $SearchBox-widthMdDownCollapsed: 36px; $SearchBox-widthXLarge: 208px; -$SearchBox-iconSize: 17px; +$SearchBox-iconSize: 16px; $SearchBox-sidePadding: 8px; // padding in input on left and right sides without icons -$SearchBox-smallWidth: 36px; -$SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePadding * 2); @mixin highContrastBorder($color) { @include border-left(1px, solid, $color); @@ -164,16 +162,18 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi padding: 0 7px; } +// CommandBarSearch needs to replaced with SearchBox component, and hence following styles revisited/cleaned. .ms-CommandBarSearch { @include float(left); width: 208px; max-width: 208px; - background-color: $ms-color-themeLighter; + background-color: $ms-color-white; color: $ms-color-neutralPrimary; height: $SearchBox-height; position: relative; box-sizing: border-box; border-color: transparent; // give a base state for animation + @include border-right(1px, solid, $ms-color-neutralLight); @media screen and (-ms-high-contrast: active) { @include border-right(1px, solid, $ms-color-white); @@ -184,8 +184,17 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @include border-right(1px, solid, $ms-color-black); } + &:before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid $ms-color-neutralLight; + } + &:hover { - background-color: $ms-color-themeLight; color: $ms-color-themePrimary; @media screen and (-ms-high-contrast: active) { @@ -196,12 +205,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @include highContrastBorder($ms-color-black); } } - - .ms-Icon--Search { - @include margin-left(2px); - margin-top: 12px; - vertical-align: top; - } } .ms-CommandBarSearch-input { @@ -238,7 +241,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi // default styles for icons, show the search icon and hide X (and arrow) until focused .ms-CommandBarSearch-iconSearchWrapper { display: block; - @include padding-left(15px); } .ms-CommandBarSearch-iconArrowWrapper { @@ -248,7 +250,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBarSearch-iconSearchWrapper, .ms-CommandBarSearch-iconArrowWrapper { top: 0; - @include padding-left(8px); + @include padding-left(17px); @include padding-right(8px); } @@ -259,7 +261,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi z-index: $ms-zIndex-front; } - //== State: Puts search in an active state // .ms-CommandBarSearch.is-active { @@ -303,15 +304,11 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi height: $SearchBox-height; line-height: $SearchBox-height; cursor: pointer; - padding: 0px $SearchBox-sidePadding; position: absolute; - width: $SearchBox-iconWrapperWidth; text-align: center; } - // New rules - .ms-CommandBarSearch .ms-Icon:before { font-size: $SearchBox-iconSize; color: $ms-color-themePrimary; @@ -321,7 +318,4 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBarSearch-input::-webkit-input-placeholder { @include ms-baseFont; font-size: $ms-font-size-m; -} -.ms-CommandBarSearch-input::-webkit-input-placeholder { - font-style: italic; -} +} \ No newline at end of file From 03f61916b5545dcc765eb9074d83f55bcef2d092 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 9 Aug 2016 15:28:02 -0700 Subject: [PATCH 6/6] Removing fabric extra colors, fixing neutral Quaternary color. CommandBar item state styles --- src/common/_common.scss | 1 - src/common/_fabricExtraColors.scss | 2 -- src/common/_themeOverrides.scss | 4 +-- src/components/CommandBar/CommandBar.scss | 36 ++++++++++++++++++++--- 4 files changed, 34 insertions(+), 9 deletions(-) delete mode 100644 src/common/_fabricExtraColors.scss diff --git a/src/common/_common.scss b/src/common/_common.scss index 9dd130061f5270..3bc2021b5ee972 100644 --- a/src/common/_common.scss +++ b/src/common/_common.scss @@ -1,5 +1,4 @@ @import '~office-ui-fabric-core/dist/sass/Fabric'; -@import './fabricExtraColors'; @import './i18n'; @import './themeOverrides'; @import './focusBorder'; diff --git a/src/common/_fabricExtraColors.scss b/src/common/_fabricExtraColors.scss deleted file mode 100644 index 9cf758b481ecfa..00000000000000 --- a/src/common/_fabricExtraColors.scss +++ /dev/null @@ -1,2 +0,0 @@ -$ms-color-neutralQuaternary: #d0d0d0; -$ms-color-neutralQuaternaryAlt: #dadada; diff --git a/src/common/_themeOverrides.scss b/src/common/_themeOverrides.scss index a665d690e0218b..80842bbbdb2f62 100644 --- a/src/common/_themeOverrides.scss +++ b/src/common/_themeOverrides.scss @@ -15,8 +15,8 @@ $ms-color-neutralSecondary: "[theme:neutralSecondary, default: #666666]"; $ms-color-neutralSecondaryAlt: "[theme:neutralSecondaryAlt, default: #767676]"; $ms-color-neutralTertiary: "[theme:neutralTertiary, default: #a6a6a6]"; $ms-color-neutralTertiaryAlt: "[theme:neutralTertiaryAlt, default: #c8c8c8]"; -$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #dadada]"; -$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #d0d0d0]"; +$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #d0d0d0]"; +$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #dadada]"; $ms-color-neutralLight: "[theme:neutralLight, default: #eaeaea]"; $ms-color-neutralLighter: "[theme:neutralLighter, default: #f4f4f4]"; $ms-color-neutralLighterAlt: "[theme:neutralLighterAlt, default: #f8f8f8]"; diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index 6cd262e55d90bb..37873196a9afa2 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -125,8 +125,6 @@ $SearchBox-sidePadding: 8px; // padding in input on left and right sides without &:hover, &.is-expanded { - background-color: $ms-color-neutralLight; - @media screen and (-ms-high-contrast: active) { @include highContrastBorder($ms-color-white); } @@ -136,12 +134,42 @@ $SearchBox-sidePadding: 8px; // padding in input on left and right sides without } } + &:hover { + color: $ms-color-neutralDark; + background-color: $ms-color-neutralLight; + + .ms-CommandBarItem-icon { + color: $ms-color-themeDark; + } + + .ms-CommandBarItem-chevronDown { + color: $ms-color-neutralPrimaryAlt; + } + + .ms-CommandBarItem-overflow { + color: $ms-color-neutralDark; + } + } + &.is-expanded { - background-color: $ms-color-neutralQuaternary; + background-color: $ms-color-neutralQuaternaryAlt; + color: $ms-color-black; + + .ms-CommandBarItem-icon { + color: $ms-color-themeDarker; + } + + .ms-CommandBarItem-chevronDown { + color: $ms-color-neutralDark; + } + + .ms-CommandBarItem-overflow { + color: $ms-color-black; + } } &.is-expanded:hover { - background-color: $ms-color-neutralQuaternaryAlt; + background-color: $ms-color-neutralQuaternary; } }