From dfb6d0776ee6bb50f4136f2a9a4f9af79d4a33ae Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Wed, 27 Jul 2016 17:43:47 -0700 Subject: [PATCH 01/92] init. building --- package.json | 2 +- src/common/_common.scss | 2 +- src/components/Breadcrumb/Breadcrumb.scss | 43 +- src/components/Button/Button.scss | 122 ++-- src/components/Callout/Callout.scss | 266 ++------- src/components/Check/Check.scss | 174 ++++++ src/components/ChoiceGroup/ChoiceGroup.scss | 14 + src/components/CommandBar/CommandBar.scss | 2 +- src/components/Dialog/Dialog.scss | 206 ++----- src/components/Dropdown/Dropdown.scss | 78 ++- src/components/Facepile/Facepile.scss | 89 ++- src/components/GroupedList/GroupFooter.scss | 2 +- src/components/Label/Label.scss | 22 +- src/components/Link/Link.scss | 4 + src/components/MessageBar/MessageBar.scss | 35 +- src/components/Nav/Nav.scss | 2 +- src/components/PeoplePicker/PeoplePicker.scss | 537 ++++++------------ src/components/Persona/Persona.scss | 449 +++++++++------ src/components/Pivot/Pivot.scss | 187 +++--- .../ProgressIndicator/ProgressIndicator.scss | 17 +- src/components/SearchBox/SearchBox.scss | 378 ++++++++++-- src/components/Spinner/Spinner.scss | 5 +- src/components/TextField/TextField.scss | 53 +- src/components/Toggle/Toggle.scss | 1 + .../ListPage/examples/List.Mail.Example.scss | 22 +- 25 files changed, 1411 insertions(+), 1301 deletions(-) diff --git a/package.json b/package.json index 772674b5a4420..6dda69895b96c 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "gulp-util": "3.0.7", "gutil": "1.6.4", "highlight.js": "9.4.0", - "office-ui-fabric": "~2.6.0", + "office-ui-fabric": "git+https://github.com/OfficeDev/office-ui-fabric.git", "react-addons-test-utils": "^15.1.0", "react-highlight": "0.8.0", "source-map-loader": "0.1.5", diff --git a/src/common/_common.scss b/src/common/_common.scss index 5817539e378b9..b3a0bf4663804 100644 --- a/src/common/_common.scss +++ b/src/common/_common.scss @@ -1,4 +1,4 @@ -@import '~office-ui-fabric/src/sass/Fabric.Common'; +@import '~office-ui-fabric/src/sass/Fabric'; @import './fabricExtraColors'; @import './i18n'; @import './themeOverrides'; diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 0f31f2b6c9453..bf2614b6d1f5a 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -9,7 +9,8 @@ .ms-Breadcrumb { - margin: 23px 0 1px 0; + @include ms-baseFont; + margin: 23px 0 1px; &.is-overflow { .ms-Breadcrumb-overflow { @@ -19,10 +20,10 @@ } .ms-Breadcrumb-chevron { - font-size: $ms-font-size-l; + font-size: $ms-font-size-s; color: $ms-color-neutralSecondary; vertical-align: top; - margin: 10px 0; + margin: 11px 7px; } .ms-Breadcrumb-list { @@ -49,21 +50,21 @@ .ms-Breadcrumb-overflow { display: none; position: relative; - margin-right: -4px; .ms-Breadcrumb-overflowButton { - font-size: $ms-font-size-s; + font-size: 16px; display: inline-block; - color:$ms-color-themePrimary; - margin-right: -4px; - padding: 12px 8px 3px 8px; + color: $ms-color-themePrimary; + padding: 8px; cursor: pointer; + vertical-align: top; } } .ms-Breadcrumb-overflowMenu { display: none; position: absolute; + margin-right: -2px; &.is-open { display: block; @@ -75,7 +76,7 @@ z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle); } - &:before { + &::before { position: absolute; @include drop-shadow; top: -6px; @@ -84,11 +85,11 @@ width: 16px; height: 16px; transform: rotate(45deg); - background-color: white; + background-color: $ms-color-white; } .ms-ContextualMenu { - border: none; + border: 0; box-shadow: none; position: relative; width: 190px; @@ -121,17 +122,20 @@ } .ms-Breadcrumb-itemLink { - @include ms-font-xl(); + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; display: inline-block; padding: 0 4px; max-width: 160px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + vertical-align: top; } -@media screen and (max-width: $ms-screen-md-max) { +@media screen and (max-width: $ms-screen-md-max) {å .ms-Breadcrumb { margin: 10px 0; } @@ -141,14 +145,14 @@ } .ms-Breadcrumb-chevron { - font-size: $ms-font-size-m; - margin-top: 7px; + font-size: 10px; + margin: 8px 5px; } .ms-Breadcrumb-overflow { .ms-Breadcrumb-overflowButton { - padding-top: 8px; - padding-bottom: 3px; + font-size: 16px; + padding: 5px 4px; } } } @@ -160,13 +164,12 @@ } .ms-Breadcrumb-chevron { - margin-top: 4px; + margin: 5px 4px; } .ms-Breadcrumb-overflow { .ms-Breadcrumb-overflowButton { - padding-top: 5px; - padding-bottom: 3px; + padding: 2px 4px; } } } diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 9cc71569195ba..7d5a670178c3d 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -8,25 +8,38 @@ // Button styles + .ms-Button { - @include ms-font-m; @include ms-u-normalize; + @include ms-baseFont; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; background-color: $ms-color-neutralLighter; border: 1px solid $ms-color-neutralLighter; cursor: pointer; display: inline-block; - height: 32px; + height: 36px; min-width: 80px; padding: 4px 20px 6px; &:hover { background-color: $ms-color-neutralLight; border-color: $ms-color-neutralLight; - outline: 1px solid transparent; .ms-Button-label { color: $ms-color-black; } + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackSelected; + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteSelected; + border-color: $ms-color-contrastWhiteSelected; + } } &:focus { @@ -65,14 +78,9 @@ } } -// Add space between adjacent buttons. -.ms-Button + .ms-Button { - margin-left: 6px; -} - .ms-Button-label { color: $ms-color-neutralPrimary; - font-family: $ms-font-family-semibold; + font-weight: $ms-font-weight-semibold; font-size: $ms-font-size-m; } @@ -81,7 +89,6 @@ display: none; } - //== Modifier: Primary action button // .ms-Button.ms-Button--primary { @@ -122,44 +129,46 @@ //== Modifier: Hero button // .ms-Button.ms-Button--hero { + align-items: center; background-color: transparent; - border: none; - vertical-align: top; - line-height: normal; + border: 0; + display: flex; + padding: 0; .ms-Button-icon { color: $ms-color-themePrimary; display: inline-block; font-size: $ms-font-size-s; + margin-right: 2px; position: relative; - top: -8px; + top: -7px; text-align: center; .ms-Icon { border-radius: 18px; border: 1px solid $ms-color-themePrimary; + font-size: $ms-font-size-s; height: 18px; line-height: 18px; width: 18px; - font-size: $ms-font-size-s; - margin: 0; } } .ms-Button-label { color: $ms-color-themePrimary; - font-family: $ms-font-family-light; font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-light; position: relative; - top: -5px; text-decoration: none; } &:hover, &:focus { .ms-Button-icon { + color: $ms-color-themeDark; + .ms-Icon { - color: $ms-color-themeDark; + border: 1px solid $ms-color-themeDark; } } @@ -170,8 +179,10 @@ &:active { .ms-Button-icon { + color: $ms-color-themePrimary; + .ms-Icon { - color: $ms-color-themePrimary; + border: 1px solid $ms-color-themePrimary; } } @@ -183,8 +194,10 @@ &:disabled, &.is-disabled { .ms-Button-icon { + color: $ms-color-neutralTertiaryAlt; + .ms-Icon { - color: $ms-color-neutralTertiaryAlt; + border: 1px solid $ms-color-neutralTertiaryAlt; } } @@ -198,14 +211,15 @@ //== Modifier: Compound button // .ms-Button.ms-Button--compound { + display: block; height: auto; - min-height: 72px; max-width: 280px; + min-height: 72px; padding: 20px; .ms-Button-label { display: block; - font-family: $ms-font-family-semibold; + font-weight: $ms-font-weight-semibold; position: relative; text-align: left; margin-top: -5px; @@ -214,7 +228,7 @@ .ms-Button-description { color: $ms-color-neutralSecondary; display: block; - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; font-size: $ms-font-size-s; position: relative; text-align: left; @@ -269,66 +283,6 @@ } } - -//== Modifier: Command button -// -.ms-Button.ms-Button--command { - background-color: transparent; - border: none; - height: 32px; - line-height: 32px; - min-width: 0; - padding: 0 8px; - text-align: left; - font-size: $ms-font-size-m; - - .ms-Button-icon { - color: $ms-color-neutralSecondary; - display: inline-block; - margin-right: 4px; - position: relative; - } - - .ms-Button-label { - font-family: $ms-font-family-regular; - } - - &:hover, - &:focus { - .ms-Button-icon { - color: $ms-color-neutralDark; - } - - .ms-Button-label { - color: $ms-color-black; - } - } - - &:active { - .ms-Button-icon, - .ms-Button-label { - color: $ms-color-themePrimary; - } - } - - &:disabled, - &.is-disabled { - .ms-Button-icon { - color: $ms-color-neutralTertiaryAlt; - } - - .ms-Button-label { - color: $ms-color-neutralTertiary; - } - } -} - -// Add space between adjacent command buttons. -.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { - margin-left: 14px; -} - - // TODO: Overrides that need to be removed. .ms-Button--icon { diff --git a/src/components/Callout/Callout.scss b/src/components/Callout/Callout.scss index 99352cbf421a7..ec73689c6c941 100644 --- a/src/components/Callout/Callout.scss +++ b/src/components/Callout/Callout.scss @@ -8,132 +8,36 @@ // Callout styles +$ms-Callout-commandButtonHeight: 27px; + .ms-Callout { - z-index: $ms-zIndex-Callout; - margin: 16px auto; - position: relative; + @include ms-baseFont; width: 288px; -} - -// Mixin for arrow size and color -@mixin arrowBorders($ms-color-top, $ms-color-right, $ms-color-bottom, $ms-color-left) { - border-top: 10px solid $ms-color-top; - border-right: 10px solid $ms-color-right; - border-bottom: 10px solid $ms-color-bottom; - border-left: 10px solid $ms-color-left; -} - -//= Modifier: Base styling for all callout arrows -// -.ms-Callout.ms-Callout--arrowRight, -.ms-Callout.ms-Callout--arrowLeft, -.ms-Callout.ms-Callout--arrowBottom, -.ms-Callout.ms-Callout--arrowTop { - &:before, - &:after { - content: ''; - position: absolute; - transform: rotate(-45deg); - height: 0; - width: 0; - } - - &:before { - z-index: $ms-zIndex-back; - outline: 1px solid transparent; - @include drop-shadow; - } - - &:after { - z-index: $ms-zIndex-front; - } -} - - -//= Modifier: Callout with left and right arrows -// -.ms-Callout.ms-Callout--arrowLeft, -.ms-Callout.ms-Callout--arrowRight { - &:before, - &:after { - top: 40px; - display: none; // Hide left and right arrows on sm screens - } -} - -.ms-Callout.ms-Callout--arrowLeft { - &:before, - &:after { - @include arrowBorders($ms-color-white, transparent, transparent, $ms-color-white); - left: -10px; - } -} - -.ms-Callout.ms-Callout--arrowRight { - &:before, - &:after { - @include arrowBorders(transparent, $ms-color-white, $ms-color-white, transparent); - right: -10px; - } -} - -//= Modifier: Callout with top and bottom arrows -// -.ms-Callout.ms-Callout--arrowTop, -.ms-Callout.ms-Callout--arrowBottom { - &:before, - &:after { - left: 0; - right: 0; - margin: 0 auto; - width: 0; - } -} - -.ms-Callout.ms-Callout--arrowTop { - &:before, - &:after { - @include arrowBorders($ms-color-white, $ms-color-white, transparent, transparent); - top: -10px; + &.is-hidden { + display: none; } } -.ms-Callout.ms-Callout--arrowBottom { - &:before, - &:after { - @include arrowBorders(transparent, transparent, $ms-color-white, $ms-color-white); - bottom: -10px; - } +.ms-Callout-header { + z-index: ($ms-zIndex-Callout + $ms-zIndex-middle); + padding-top: 24px; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; } -// High contrast mode styling for callout arrows -.ms-Callout.ms-Callout--arrowRight, -.ms-Callout.ms-Callout--arrowLeft, -.ms-Callout.ms-Callout--arrowBottom, -.ms-Callout.ms-Callout--arrowTop { - &:before, - &:after { - @media screen and (-ms-high-contrast: active) { - border: 0; - width: 20px; - height: 20px; - background-color: $ms-color-black; - } - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-white; - } - } +.ms-Callout-title { + margin: 0; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xl; } -// The actual callout element -.ms-Callout-main { - position: relative; - background-color: $ms-color-white; - box-sizing: border-box; - outline: 1px solid transparent; - z-index: $ms-zIndex-middle; - @include drop-shadow; +.ms-Callout-subText { + margin: 0; + font-weight: $ms-font-weight-semilight; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; } .ms-Callout-close { @@ -147,37 +51,21 @@ padding: 8px; width: 32px; height: 32px; - font-size: $ms-font-size-m; + font-size: 14px; color: $ms-color-neutralSecondary; - z-index: ($ms-zIndex-Callout + $ms-zIndex-front); -} - -.ms-Callout-inner { - height: 100%; - padding: 0 24px 20px; -} - -.ms-Callout-header { - z-index: ($ms-zIndex-Callout + $ms-zIndex-middle); - padding: 18px 24px 12px; -} - -.ms-Callout-title { - margin: 0; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-xl; -} - -.ms-Callout-subText { - margin: 0; - font-family: $ms-font-family-semilight; - color: $ms-color-neutralPrimary; - font-size: $ms-font-size-s; + z-index: 110; } .ms-Callout-link { font-size: $ms-font-size-m; - font-family: $ms-font-family-semilight; +} + +.ms-Callout-inner { + height: 100%; + padding-top: 0; + padding-bottom: 12px; + padding-left: 28px; + padding-right: 28px; } .ms-Callout-actions { @@ -186,50 +74,37 @@ width: 100%; white-space: nowrap; - .ms-Link.ms-Link--hero { - position: relative; - left: -8px; // Move link inline with body text - } -} + .ms-CommandButton.ms-CommandButton--inline { + height: $ms-Callout-commandButtonHeight; + line-height: $ms-Callout-commandButtonHeight; -.ms-Callout-action { - position: relative; - top: 4px; - left: -8px; - margin-left: 0 !important; + .ms-CommandButton-button { + height: $ms-Callout-commandButtonHeight; + line-height: $ms-Callout-commandButtonHeight; + } - &:hover .ms-Callout-actionIcon, - &:focus .ms-Callout-actionIcon { - color: $ms-color-themePrimary; - } -} + .ms-CommandButton-label { + line-height: $ms-Callout-commandButtonHeight; + } -.ms-Callout-button { - margin-right: 12px; -} + .ms-CommandButton-icon { + line-height: $ms-Callout-commandButtonHeight; + } + &:hover .ms-Button, + &:focus .ms-Button { + color: $ms-color-themePrimary; + } + } -//= Modifier: Close button callout -// -.ms-Callout.ms-Callout--close { - .ms-Callout-title { - margin-right: 20px; // Avoid overlap with close button + .ms-Callout-button { + margin-right: 12px; } } - //= Modifier: OOBE (Out of box experience) callout // .ms-Callout.ms-Callout--OOBE { - &.ms-Callout--arrowRight, - &.ms-Callout--arrowLeft, - &.ms-Callout--arrowTop { - &:before, - &:after { - border-color: $ms-color-themePrimary; - background-color: transparent; - } - } .ms-Callout-header { padding: 28px 24px; @@ -237,7 +112,7 @@ } .ms-Callout-title { - font-family: $ms-font-family-light; + font-weight: $ms-font-weight-light; font-size: $ms-font-size-xxl; color: $ms-color-white; } @@ -257,7 +132,11 @@ .ms-Callout.ms-Callout--actionText { .ms-Callout-actions { border-top: 1px solid $ms-color-neutralLight; - margin-bottom: -8px; + padding-top: 12px; + } + + .ms-Callout-inner { + padding-bottom: 12px; } } @@ -265,23 +144,6 @@ //= Modifier: Peek callout // .ms-Callout.ms-Callout--peek { - &.ms-Callout--arrowTop, - &.ms-Callout--arrowBottom { - &:before, - &:after { - left: 40px; - right: auto; - } - } - - &.ms-Callout--arrowRight, - &.ms-Callout--arrowLeft { - &:before, - &:after { - top: calc('50% - 10px'); - } - } - .ms-Callout-header { padding-bottom: 0; } @@ -296,22 +158,6 @@ } } -@media (min-width: $ms-screen-md-min) { - // Make width larger and remove centering on md+ screens - .ms-Callout { - width: 300px; - margin: 16px; - } - - // Show arrows right and left - .ms-Callout.ms-Callout--arrowRight, - .ms-Callout.ms-Callout--arrowLeft { - &:before, - &:after { - display: block; - } - } -} // TODO: remove overrides and scrub CSS diff --git a/src/components/Check/Check.scss b/src/components/Check/Check.scss index 63b5403127156..4f1e86d504e4c 100644 --- a/src/components/Check/Check.scss +++ b/src/components/Check/Check.scss @@ -1,5 +1,179 @@ @import '../../common/common'; +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// CheckBox styles + +$ms-checkbox-field-size: 20px; +$ms-checkbox-transition-duration: 200ms; +$ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1); + + +.ms-CheckBox { + box-sizing: border-box; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + min-height: 36px; + position: relative; + + .ms-Label { + font-size: $ms-font-size-m; + padding: 0 0 0 26px; + cursor: pointer; + display: inline-block; + } +} + +// The hidden input +.ms-CheckBox-input { + position: absolute; + opacity: 0; +} + +// The checkbox square container +.ms-CheckBox-field::before { + content: ''; + display: inline-block; + border: 2px solid $ms-color-neutralTertiary; + width: $ms-checkbox-field-size; + height: $ms-checkbox-field-size; + cursor: pointer; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: $ms-checkbox-transition-duration; + transition-timing-function: $ms-checkbox-transition-timing; +} + +// The check mark icon +.ms-CheckBox-field::after { + @include ms-Icon--CheckMark; + font-family: 'FabricMDL2Icons'; + display: none; + position: absolute; + font-weight: 900; + background-color: transparent; + font-size: $ms-font-size-s-plus; + top: 0; + color: $ms-color-white; + line-height: $ms-checkbox-field-size; + width: $ms-checkbox-field-size; + text-align: center; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-white; + } +} + +// The checkbox field +.ms-CheckBox-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + outline: 0; + vertical-align: top; + + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } + + //== State: A disabled checkbox + // + &.is-disabled { + cursor: default; + + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + } + } + + .ms-Label { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } + } + + //== State: A checkbox in focus + // + &.in-focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + &.is-disabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } + + &.is-checked::before { + border-color: $ms-color-themeDarkAlt; + } + } +} + +//== State: When the checkbox is checked +// +.ms-CheckBox-field.is-checked { + &::before { + border: 10px solid $ms-color-themePrimary; + background-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &::after { + display: block; + } + + &:hover, + &:focus { + &::before { + border-color: $ms-color-themeDarkAlt; + } + } +} + +// TODO: remove overrides and scrub CSS + .ms-Check { display: inline-block; cursor: default; diff --git a/src/components/ChoiceGroup/ChoiceGroup.scss b/src/components/ChoiceGroup/ChoiceGroup.scss index f92589521b42f..20b6222343a41 100644 --- a/src/components/ChoiceGroup/ChoiceGroup.scss +++ b/src/components/ChoiceGroup/ChoiceGroup.scss @@ -7,6 +7,20 @@ // -------------------------------------------------- // Choice fields (radio buttons and checkboxes) styles +//== Component: Choicefield group +// +// Choice field groups contain multiple radio buttons or checkboxes +.ms-ChoiceFieldGroup { + @include ms-baseFont; + margin-bottom: 4px; + + .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; + } +} + +// TODO: remove overrides and scrub CSS // Unselected, radio button (default) .ms-ChoiceField { diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index afafcab9073ea..5ef1a41f85508 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -315,7 +315,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBarSearch-input, .ms-CommandBarSearch-input::-webkit-input-placeholder { - font-family: $ms-font-family-regular; + @include ms-baseFont; font-size: $ms-font-size-m; } .ms-CommandBarSearch-input::-webkit-input-placeholder { diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 5791af6375a18..0ef9c04940370 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -7,202 +7,108 @@ // -------------------------------------------------- // Dialog styles - -// Mixin for IE9 specific styles -@mixin dialogPositioningIE9Fallback { - vertical-align: middle; - display: inline-block; -} - .ms-Dialog { - background-color: transparent; - position: fixed; - height: 100%; - width: 100%; - top: 0; - left: 0; - z-index: $ms-zIndex-Dialog; - - // Fallback for IE9 - display: block; - font-size: 0; - line-height: 100vh; - text-align: center; - - // Flexbox for Modern Browsers - @include flexBox(); - @include alignItems(center); - - &::before { - @include dialogPositioningIE9Fallback(); - content: ""; - height: 100%; - width: 0; - } - - .ms-Button.ms-Button--compound { - display: block; - margin-left: 0; - } - - .ms-Overlay { - z-index: $ms-zIndex-back; - - @media screen and (-ms-high-contrast: active) { - opacity: 0; - } - } -} - -// The actual dialog element -.ms-Dialog-main { - @include dialogPositioningIE9Fallback(); - @include drop-shadow(); + @include ms-baseFont; + @include drop-shadow(0, 0, 5px, 0, .4); background-color: $ms-color-white; - box-sizing: border-box; - line-height: 1.35; - margin: auto; - width: 288px; - position: relative; - text-align: left; - outline: 3px solid transparent; -} - -// Close button, hidden by default -.ms-Dialog-button.ms-Dialog-button--close { display: none; - position: absolute; - margin: 0; - padding: 0; - border: 0; - background: none; - cursor: pointer; - top: 12px; - right: 12px; - padding: 8px; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; z-index: $ms-zIndex-front; - - .ms-Icon.ms-Icon--x { - color: $ms-color-neutralSecondary; - font-size: $ms-font-size-m + 2; - } -} - -.ms-Dialog-inner { - height: 100%; - padding: 0 20px 20px; + position: absolute; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; } -.ms-Dialog-header { - position: relative; - width: 100%; - box-sizing: border-box; - padding: 12px 20px 15px; +.ms-Dialog.is-open { + display: block; } .ms-Dialog-title { - margin: 0; - font-family: $ms-font-family-light; font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-light; + margin-bottom: 24px; } .ms-Dialog-content { position: relative; - width: 100%; - - // Add margin bottom between compound buttons - .ms-Button.ms-Button--compound:not(:last-child) { - margin-bottom: 20px; - } } .ms-Dialog-subText { - margin: 0 0 20px 0; - padding-top: 8px; - font-family: $ms-font-family-semilight; color: $ms-color-neutralPrimary; font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; + line-height: 1.5; } .ms-Dialog-actions { - position: relative; - width: 100%; - min-height: 24px; - line-height: 24px; - margin: 20px 0 0; - font-size: 0; - - .ms-Button { - line-height: normal; - } -} - -.ms-Dialog-actionsRight { + margin-top: 24px; text-align: right; - font-size: 0; - - // Reset spacing for first button - .ms-Dialog-action:first-child { - margin: 0; - } - - // Spacing between bottom buttons - .ms-Dialog-action + .ms-Dialog-action { - margin: 0 0 0 16px; - } } - -//= Modifier: Dialog with close button +//= Modifier: Multiline button dialog // -.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) { - // Push the right side over so the icon doesn't overlap the text +.ms-Dialog--multiline { .ms-Dialog-title { - margin-right: 20px; - } - - // Show the close button - .ms-Dialog-button.ms-Dialog-button--close { - display: block; + font-size: $ms-font-size-xxl; } } - -//= Modifier: Multiline button dialog +//= Modifier: Large header dialog // -.ms-Dialog.ms-Dialog--multiline { +.ms-Dialog.ms-Dialog--lgHeader { .ms-Dialog-title { + background-color: $ms-color-themePrimary; + color: $ms-color-white; font-size: $ms-font-size-xxl; + font-weight: $ms-font-weight-light; + padding: 28px 24px; + margin-top: -28px; + margin-left: -24px; + margin-right: -24px; } +} + +// Close button, hidden by default +.ms-Dialog-buttonClose { + background: none; + border: 0; + cursor: pointer; + margin: 0; + padding: 4px; + position: absolute; + right: 12px; + top: 12px; + z-index: $ms-zIndex-front; - .ms-Dialog-inner { - padding: 0 20px 20px; + .ms-Icon.ms-Icon--x { + color: $ms-color-neutralSecondary; + font-size: 16px; } } +// Add margin bottom between compound buttons +.ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} -//= Modifier: Large header dialog +//= Modifier: Dialog with close button // -.ms-Dialog.ms-Dialog--lgHeader { - .ms-Dialog-header { - background-color: $ms-color-themePrimary; - padding: 26px 20px 28px; - margin-bottom: 8px; - } - +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) { + // Push the right side over so the icon doesn't overlap the text .ms-Dialog-title { - font-size: $ms-font-size-xxl; - font-family: $ms-font-family-light; - color: $ms-color-white; + margin-right: 20px; } - .ms-Dialog-subText { - font-size: $ms-font-size-m; + // Show the close button + .ms-Dialog-button.ms-Dialog-buttonClose { + display: block; } } - - @media (min-width: $ms-screen-md-min) { // Allow wider dialog on larger screens .ms-Dialog-main { diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index 30a8304c4d244..70a919aa0ddbb 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -27,8 +27,12 @@ } .ms-Dropdown { - @include ms-font-m; + @include ms-baseFont; @include ms-u-normalize; + color: $ms-color-neutralPrimary; + + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; margin-bottom: 10px; position: relative; outline: 0; @@ -94,12 +98,26 @@ } // When the dropdown is opened -// Note: .ms-Dropdown--open is deprecated and will be removed in a future version. -// Use .is-open for an open dropdown. -.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, .ms-Dropdown.is-open .ms-Dropdown-items { display: block; - position: fixed; + position: absolute; +} + +// Adjustments for when the dropdown is open as a panel on small screens +.ms-Panel .ms-Dropdown-items { + box-shadow: none; + overflow-y: auto; + padding-top: 4px; + max-height: 100%; + + .ms-Dropdown-item { + padding: 7px 16px; + } + + &::before { + content: none; + border: 0; + } } // Hide the original dropdown @@ -108,11 +126,11 @@ } .ms-Dropdown-caretDown { - color: $ms-color-neutralSecondary; - font-size: $ms-font-size-l; + color: $ms-color-neutralDark; + font-size: $ms-icon-size-s; position: absolute; - right: 9px; - bottom: 5px; + right: 13px; + bottom: 9px; z-index: 1; pointer-events: none; } @@ -125,8 +143,7 @@ cursor: pointer; display: block; height: 32px; - line-height: 30px; - padding: 0 32px 0 10px; + padding: 5px 32px 0 10px; position: relative; overflow: hidden; } @@ -141,14 +158,16 @@ position: absolute; width: 100%; max-height: 200px; - max-width: 268px; z-index: ($ms-zIndex-Dropdown + $ms-zIndex-back); - top: 0; - right: 0; - bottom: 0; overflow-y: scroll; - &:before { + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + + &::before { content: ''; position: absolute; z-index: -1; @@ -172,9 +191,8 @@ box-sizing: border-box; cursor: pointer; display: block; - height: 40px; - line-height: 38px; - padding: 0 10px; + height: 36px; + padding: 7px 10px; position: relative; border: 1px solid transparent; white-space: nowrap; @@ -187,12 +205,6 @@ border-color: $ms-color-white; } - // Shorten the first and last items to maintain baseline alignment. - &:first-child, - &:last-child { - height: 39px; - } - &:hover { background-color: $ms-color-neutralLight; color: $ms-color-black; @@ -230,22 +242,6 @@ @include highContrastListItemState; } -@media (min-width: $ms-screen-md-min) { - // On larger screens, display as a traditional dropdown. - .ms-Dropdown-items { - top: auto; - right: auto; - bottom: auto; - left: auto; - max-width: 100%; - } - - .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, - .ms-Dropdown.is-open .ms-Dropdown-items { - position: absolute; - } -} - // TODO: remove overrides below. .ms-Dropdown { diff --git a/src/components/Facepile/Facepile.scss b/src/components/Facepile/Facepile.scss index d49e7ce5e9a12..b2c874f6485bb 100644 --- a/src/components/Facepile/Facepile.scss +++ b/src/components/Facepile/Facepile.scss @@ -1,29 +1,98 @@ @import '../../common/common'; -.ms-Facepile { +.ms-FacePile { + @include ms-baseFont; position: relative; height: 32px; width: auto; + + .ms-FacePile-personaCardHost { + display: none; + } } -.ms-Facepile-itemBtn { +.ms-FacePile-addButton { + @include button-reset; position: relative; height: 32px; width: 32px; line-height: 32px; text-align: center; - @include float(left); + float: left; padding: 0; - @include margin-right(4px); + margin-right: 4px; outline: transparent; border-radius: 50%; vertical-align: top; + + .ms-Persona-presence, + .ms-Persona-details { + display: none; + } +} + +.ms-FacePile-addButton.ms-FacePile-addButton--addPerson { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-size: $ms-font-size-l - 1; + + &:hover, + &:focus { + background-color: $ms-color-themeDark; + } + + &:active { + background-color: $ms-color-themeDarker; + } + + &:disabled { + background-color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-FacePile-addButton.ms-FacePile-addButton--overflow { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralSecondary; + display: none; + + &.is-active { + display: block; + } + + &:hover { + color: $ms-color-neutralDark; + } + + &:disabled { + color: $ms-color-neutralTertiaryAlt; + } } -button.ms-Facepile-itemBtn { - display: inline; - background: none; - padding: 0; - cursor: pointer; - border: none; +.ms-FacePile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-FacePile-overflowText { + font-size: $ms-font-size-m; +} + +//== Panels +// Overflow panel - only show member list +.ms-FacePile-panel.ms-FacePile-panel--overflow { + .ms-Panel-headerText, + .ms-PeoplePicker-searchBox, + .ms-PeoplePicker-results, + .ms-PeoplePicker-resultAction { + display: none; + } + + .ms-PeoplePicker-selectedHeader { + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + line-height: 82px; + height: 74px; + text-transform: none; + } } \ No newline at end of file diff --git a/src/components/GroupedList/GroupFooter.scss b/src/components/GroupedList/GroupFooter.scss index d4c031d71ec22..8569606fdaab5 100644 --- a/src/components/GroupedList/GroupFooter.scss +++ b/src/components/GroupedList/GroupFooter.scss @@ -6,7 +6,7 @@ cursor: pointer; .ms-Link { - font-family: $ms-font-family-regular; + @include ms-baseFont; font-size: $ms-font-size-s; } } \ No newline at end of file diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 3f56d1115ebee..0514ef2543e49 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -9,27 +9,21 @@ @mixin ms-Label-is-disabled { color: $ms-color-neutralTertiary; - - @media screen and (-ms-high-contrast: active) { - color: $ms-color-contrastBlackDisabled; - } - - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteDisabled; - } } @mixin ms-Label-is-required { - &:after { + &::after { content: ' *'; color: $ms-color-error; } } - .ms-Label { - @include ms-font-s; + @include ms-baseFont; @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; box-sizing: border-box; display: block; padding: 5px 0; @@ -39,12 +33,6 @@ } &.is-disabled { - @include ms-Label-is-disabled; - } -} - -.is-disabled { - .ms-Label { @include ms-Label-is-disabled; } } diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss index def5dffe1fef2..3cac6a0171742 100644 --- a/src/components/Link/Link.scss +++ b/src/components/Link/Link.scss @@ -9,9 +9,13 @@ @mixin ms-Link { + @include ms-baseFont; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; color: $ms-color-themePrimary; text-decoration: none; cursor: pointer; + outline: none; &:hover, &:focus { diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss index 48d98d62c145b..c682fa5685f5e 100644 --- a/src/components/MessageBar/MessageBar.scss +++ b/src/components/MessageBar/MessageBar.scss @@ -7,16 +7,17 @@ // -------------------------------------------------- // MessageBar Styles -/* - Base template file -*/ - $MessageBar-padding: 8px; .ms-MessageBar { + @include ms-baseFont; padding: $MessageBar-padding; display: table; @include ms-bgColor-info; + + .ms-Link { + font-size: $ms-font-size-s; + } } .ms-MessageBar-icon, @@ -27,7 +28,7 @@ $MessageBar-padding: 8px; .ms-MessageBar-icon { padding-right: $MessageBar-padding; - font-size: 16px; + font-size: $ms-icon-size-m; @include ms-fontColor-neutralSecondaryAlt; } @@ -65,19 +66,14 @@ $MessageBar-padding: 8px; } -//== Modifier: Remove message +//== Modifier: Blocked message // -.ms-MessageBar.ms-MessageBar--remove { +.ms-MessageBar.ms-MessageBar--blocked { @include ms-bgColor-error; .ms-MessageBar-icon { @include ms-fontColor-error; } - - .ms-Icon { - font-size: 8px; - margin-left: 3px; - } } @@ -89,21 +85,6 @@ $MessageBar-padding: 8px; .ms-MessageBar-icon { @include ms-fontColor-green; } - - .ms-Icon { - font-size: $ms-font-size-s; - top: 3px; - - &:before { - margin-left: 1px; - } - - &:after { - font-size: 8px; - margin-left: 3px; - top: 1px; - } - } } // TODO: Remove overrides below. diff --git a/src/components/Nav/Nav.scss b/src/components/Nav/Nav.scss index 4a5305615959f..178ebb8c702ca 100644 --- a/src/components/Nav/Nav.scss +++ b/src/components/Nav/Nav.scss @@ -73,7 +73,7 @@ .ms-Nav-chevronButton { display: block; - font-family: $ms-font-family-regular; + @include ms-baseFont; font-size: $ms-font-size-s; @include text-align(left); diff --git a/src/components/PeoplePicker/PeoplePicker.scss b/src/components/PeoplePicker/PeoplePicker.scss index 1cbf4d8587963..8c9d661634585 100644 --- a/src/components/PeoplePicker/PeoplePicker.scss +++ b/src/components/PeoplePicker/PeoplePicker.scss @@ -1,80 +1,73 @@ @import '../../common/common'; -//== Modifier: Persona with darker text -// -// Note: Typically applied when the component has a colored background. -.ms-Persona.ms-Persona--darkText { - .ms-Persona-primaryText { - color: $ms-color-neutralDark; - } - - .ms-Persona-secondaryText, - .ms-Persona-tertiaryText, - .ms-Persona-optionalText { - color: $ms-color-neutralPrimary; - } -} - -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - // // Office UI Fabric // -------------------------------------------------- // People Picker styles -$personaItemHeight: 42px; - +$personaItemHeight: 40px; +$ms-Persona-leftPadding: 16px; .ms-PeoplePicker { - @include ms-font-m; + @include ms-baseFont; @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; background-color: $ms-color-white; margin-bottom: 10px; } // Box that contains the search field and selected people. .ms-PeoplePicker-searchBox { - @include ms-u-clearfix; - border: 1px solid $ms-color-neutralTertiaryAlt; - box-sizing: border-box; - min-height: 40px; - width: 100%; + border-bottom: 1px solid $ms-color-neutralTertiaryAlt; + cursor: text; &:hover { border-color: $ms-color-neutralSecondaryAlt; } + + &.is-active, + &:focus { + border-color: $ms-color-themePrimary; + } + + &:hover, + &:focus { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + @include input-placeholder { + color: $ms-color-neutralSecondary; + } + + .ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + margin-bottom: 0; + display: inline-block; + width: auto; + + .ms-TextField-field { + min-height: 40px; + border: 0; + } + } } // Highlight the search box when the people picker is active .ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { - border-color: $ms-color-themePrimary; -} - -// The search field. -.ms-PeoplePicker-searchField { - border: 0; - box-sizing: border-box; - display: inline-block; - float: left; - height: 38px; - outline: none; - padding-left: 8px; - width: 100%; + .ms-TextField-field { + border-color: $ms-color-themePrimary; + } } -// A selected persona, which appears within the search field. .ms-PeoplePicker-persona { - display: inline-block; - float: left; - margin: 4px; - outline: 1px solid transparent; - - //TODO: Avoid styling child components like this. - .ms-Persona { - background-color: $ms-color-neutralLighter; - float: left; - min-height: 30px; - } + cursor: pointer; } // The selected persona may be in an error state. @@ -86,11 +79,10 @@ $personaItemHeight: 42px; // Button to remove a selected person. .ms-PeoplePicker-personaRemove { - @include button-reset(); + @include button-reset; background-color: $ms-color-neutralLighter; color: $ms-color-neutralSecondary; display: inline-block; - float: left; text-align: center; height: 32px; width: 32px; @@ -111,15 +103,13 @@ $personaItemHeight: 42px; // Results area, hidden by default .ms-PeoplePicker-results { - @include drop-shadow(); background-color: $ms-color-white; border: 1px solid $ms-color-neutralTertiaryAlt; - display: none; margin-bottom: -1px; - max-width: 340px; padding-top: 9px; - position: absolute; - z-index: ($ms-zIndex-PeoplePicker + $ms-zIndex-middle); + width: 100%; + padding-left: 0; + box-sizing: border-box; } // Show the results area when the people picker is active @@ -129,13 +119,6 @@ $personaItemHeight: 42px; } -// One or more groups of results (ms-PeoplePicker-resultGroup) are contained in this scrollable area. -// This is limited to five results for both regular and compact sizes. -.ms-PeoplePicker-resultGroups { - max-height: 309px; - overflow-y: scroll; -} - // A group of results .ms-PeoplePicker-resultGroup { border-top: 1px solid $ms-color-neutralLight; @@ -149,11 +132,12 @@ $personaItemHeight: 42px; // Title for a group of results (optional) .ms-PeoplePicker-resultGroupTitle { color: $ms-color-themePrimary; - font-family: $ms-font-family-semilight; + font-weight: $ms-font-weight-semilight; font-size: $ms-font-size-s; - padding: 17px 0 0 12px; + padding-top: 8px; + padding-bottom: 8px; text-transform: uppercase; - height: 40px; + padding-left: $ms-Persona-leftPadding; } // List of results @@ -166,30 +150,40 @@ $personaItemHeight: 42px; // A single result in the result list .ms-PeoplePicker-result { position: relative; + margin-top: 8px; + margin-bottom: 8px; + padding-left: $ms-Persona-leftPadding; + cursor: pointer; + outline: 0; - .ms-Persona { - &:hover { - @extend .ms-Persona.ms-Persona--darkText; - cursor: pointer; - } + &:hover, + &:focus { + background-color: $ms-color-neutralLight; + } - // TODO: Active style is being blocked by the inner content on IE - // http://stackoverflow.com/questions/5594102/active-css-selector-not-working-for-ie8-and-ie9?rq=1 - &:active { - background-color: $ms-color-themeLight; - } + &:focus { + box-shadow: 0 0 0 1px $ms-color-themePrimary inset; } - // Ensure the width is 100%. - .ms-Persona-details { - width: 100%; + &.is-selected { + background-color: $ms-color-themeLight; + + .ms-PeoplePicker-resultAction { + &:hover { + background-color: $ms-color-themeTertiary; + } + + &:active { + background-color: $ms-color-themeTertiary; + } + } } } // Result buttons .ms-PeoplePicker-resultBtn, .ms-PeoplePicker-peopleListBtn { - @include button-reset(); + @include button-reset; position: relative; box-sizing: border-box; height: 34px; @@ -197,7 +191,7 @@ $personaItemHeight: 42px; background: none; border: 0; text-align: left; - margin: 0 0 10px 0; + margin: 0 0 10px; padding: 0 0 0 9px; @media (min-width: $ms-screen-md-min) { @@ -229,20 +223,16 @@ $personaItemHeight: 42px; // Actionable icon on a result .ms-PeoplePicker-resultAction { - @include button-reset(); + @include button-reset; display: block; - height: 34px; - transition: background-color 0.367s $ms-ease1; + height: 100%; + transition: background-color .367s $ms-ease1; position: absolute; right: 0; top: 0; - width: 30px; + width: 40px; text-align: center; - @media (min-width: $ms-screen-md-min) { - height: 48px; - } - .ms-Icon { color: $ms-color-neutralSecondary; font-size: $ms-font-size-m-plus; @@ -254,7 +244,7 @@ $personaItemHeight: 42px; } &:active { - background-color: $ms-color-themeTertiary; + background-color: $ms-color-neutralTertiary; } } @@ -279,216 +269,56 @@ $personaItemHeight: 42px; } } -// After the result groups we have an area to trigger additional searches +// After the result groups we have a button to trigger additional searches .ms-PeoplePicker-searchMore { - border-top: 1px solid $ms-color-neutralLight; - height: 69px; - position: relative; - overflow: hidden; - - .ms-Spinner { - position: absolute; - width: 32px; - height: 32px; - top: 20px; - left: 20px; - display: none; - - .ms-Spinner-circle { - background-color: $ms-color-themePrimary; - } - } -} - -// Searching state -.ms-PeoplePicker-searchMore.is-searching { - - .ms-Spinner { - display: block; - } - - .ms-PeoplePicker-searchMoreIcon { - .ms-Icon { - display: none; - } - } - - .ms-PeoplePicker-searchMorePrimary { - color: $ms-color-themePrimary; - } - - &:hover { - background-color: transparent; - cursor: default; - } -} - -.ms-PeoplePicker-searchMoreBtn { - @include button-reset(); + @include button-reset; + height: 40px; position: relative; - height: 69px; width: 100%; - padding: 0; - margin: 0; - padding-left: 70px; - text-align: left; &:hover { - background-color: $ms-color-neutralLight; - cursor: pointer; - } - - // TODO: Works in Chrome, but not working in IE - &:focus, - &:active { - background-color: $ms-color-themeLight; + background-color: $ms-color-neutralLighter; } } -.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { - height: 49px; - padding-left: 50px; -} - -// Default search icon .ms-PeoplePicker-searchMoreIcon { - height: 70px; + font-size: $ms-font-size-xl; + height: 40px; + left: 16px; + line-height: 40px; position: absolute; + text-align: center; top: 0; - left: 0; - width: 70px; - - .ms-Icon { - color: $ms-color-neutralPrimary; - font-size: $ms-font-size-m + 2; - position: absolute; - text-align: center; - top: 27px; - width: 100%; - } + width: 40px; } -// Primary text -.ms-PeoplePicker-searchMorePrimary { - padding-top: 2px; - font-family: $ms-font-family-regular; -} - -// Secondary text -.ms-PeoplePicker-searchMoreSecondary { - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-xs; - color: $ms-color-neutralSecondary; -} - -// The search more area may be in a disconnected state. -.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected { - - // Do nothing on hover - &:hover { - background-color: inherit; - cursor: default; - } - - // Alert icon - .ms-PeoplePicker-searchMoreIcon .ms-Icon { - color: $ms-color-neutralSecondary; - } - - // Primary text - .ms-PeoplePicker-searchMorePrimary { - color: $ms-color-neutralSecondary; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-xs; - line-height: 20px; - position: relative; - top: 12px; - } +.ms-PeoplePicker-searchMoreText { + @include ms-baseFont; + font-size: $ms-font-size-m; + height: 40px; + left: 64px; + line-height: 40px; + position: absolute; + top: 0; } -// Compact size -.ms-PeoplePicker.ms-PeoplePicker--compact { - - // Limit to 5 results before scrolling. - .ms-PeoplePicker-resultGroups { - max-height: 209px; - } - +//== Modifier: People Picker Compact +// +.ms-PeoplePicker-results.ms-PeoplePicker-results--compact { .ms-PeoplePicker-resultAction { height: 32px; - - .ms-Icon { - margin-top: -8px; - } - } - - .ms-PeoplePicker-searchMore { - height: 49px; - - .ms-Spinner { - width: 28px; - height: 28px; - top: 12px; - left: 12px; - } - - } - - .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { - background-size: 16px; - } - - .ms-PeoplePicker-searchMoreIcon { - height: 50px; - width: 50px; - - .ms-Icon { - font-size: $ms-font-size-l; - top: 0; - margin-top: 0; - line-height: 50px; - } - } - - .ms-PeoplePicker-searchMorePrimary { - font-size: $ms-font-size-s; - line-height: 45px; + width: 32px; } - .ms-PeoplePicker-searchMoreSecondary { - display: none; + .ms-PeoplePicker-resultGroups { + max-height: 209px; } } -//== Modifier: Facepile and Members list +//== Modifier: facePile // -.ms-PeoplePicker.ms-PeoplePicker--Facepile, -.ms-PeoplePicker.ms-PeoplePicker--membersList { - .ms-PeoplePicker-searchBox { - height: 30px; - min-height: 30px; - } - - .ms-PeoplePicker-searchField { - height: 28px; - } - - .ms-Persona { - cursor: pointer; - } -} - -.ms-PeoplePicker-selected { - margin-bottom: 20px; - display: none; - - &.is-active { - display: block; - } -} - -.ms-PeoplePicker.ms-PeoplePicker--Facepile { +.ms-PeoplePicker.ms-PeoplePicker--facePile { //= State: Searching in peoplepicker search field &.is-searching { .ms-PeoplePicker-results { @@ -501,59 +331,72 @@ $personaItemHeight: 42px; } } - .ms-PeoplePicker-results { - position: relative; - border: 0; - box-shadow: none; - margin: 0; - max-width: 100%; + .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; + + &.is-active { + display: block; + } + } + + .ms-Persona.ms-Persona--selectable { padding: 0; - padding-bottom: 10px; - border-bottom: 1px solid $ms-color-neutralLight; - } - - // Personas are size xs on mobile, sm on md screens and above - .ms-PeoplePicker-results, - .ms-PeoplePicker-selectedPeople { - @media (max-width: $ms-screen-sm-max) { - .ms-Persona-imageArea, - .ms-Persona-image { - width: 32px; - height: 32px; - } + } +} - .ms-Persona-placeholder { - font-size: 28px; - top: 6px; - } +// PeoplePicker results - facePile +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + border-bottom: 1px solid $ms-color-neutralLight; +} + +// Personas are size xs on mobile, sm on md screens and above +.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile, +.ms-PeoplePicker-selectedPeople { + @media (max-width: $ms-screen-sm-max) { + .ms-Persona-imageArea, + .ms-Persona-image { + width: 32px; + height: 32px; + } - .ms-Persona-initials { - font-size: $ms-font-size-s; - line-height: 32px; - } + .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } - .ms-Persona-presence { - left: 19px; - } + .ms-Persona-initials { + font-size: $ms-font-size-s; + line-height: 32px; + } - .ms-Persona-details { - padding-left: 8px; - } + .ms-Persona-presence { + left: 19px; + } - .ms-Persona-primaryText { - font-size: $ms-font-size-m; - padding-top: 3px; - } + .ms-Persona-details { + padding-left: 8px; + } - .ms-Persona-secondaryText { - display: none; - } + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 3px; } - @media (min-width: $ms-screen-md-min) { - .ms-Persona .ms-Persona-secondaryText { - display: block; - } + .ms-Persona-secondaryText { + display: none; + } + } + + @media (min-width: $ms-screen-md-min) { + .ms-Persona .ms-Persona-secondaryText { + display: block; } } @@ -570,67 +413,22 @@ $personaItemHeight: 42px; } } - .ms-Persona.ms-Persona--selectable { - padding: 0; - } - - .ms-PeoplePicker-searchMore { + .ms-PeoplePicker-selected { + margin-bottom: 20px; display: none; &.is-active { display: block; } } - - .ms-PeoplePicker-searchMore, - .ms-PeoplePicker-searchMoreBtn, - .ms-PeoplePicker-searchMoreIcon { - height: 48px; - } - - .ms-PeoplePicker-searchMoreBtn { - padding-left: 48px; - } - - .ms-PeoplePicker-searchMoreIcon { - width: 48px; - } - - .ms-PeoplePicker-searchMorePrimary { - font-size: $ms-font-size-s; - line-height: 48px; - } - - .ms-PeoplePicker-searchMoreIcon .ms-Icon { - top: 0; - line-height: 48px; - } - - .ms-Spinner { - top: 16px; - left: 14px; - height: 20px; - width: 20px; - } } -.ms-PeoplePicker.ms-PeoplePicker--Facepile { - .ms-PersonaCard { - display: none; - position: absolute; - height: 200px; - - &.is-active { - display: block; - } - } -} .ms-PeoplePicker-selectedHeader, .ms-PeoplePicker-peopleListHeader { color: $ms-color-themePrimary; font-size: $ms-font-size-s; - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; height: 50px; line-height: 50px; } @@ -651,6 +449,7 @@ $personaItemHeight: 42px; position: relative; } + // TODO: remove overides below. .ms-PeoplePicker-searchBox { diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index 2c1c9530766ef..37cf001ad7b12 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -1,7 +1,5 @@ @import '../../common/common'; -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - // // Office UI Fabric // -------------------------------------------------- @@ -9,40 +7,87 @@ //= Colors used in the initials color block -$ms-color-initials-lightBlue: #6ba5e7; -$ms-color-initials-blue: #2d89ef; -$ms-color-initials-darkBlue: #2b5797; -$ms-color-initials-teal: #00aba9; -$ms-color-initials-lightGreen: #99b433; -$ms-color-initials-green: #00a300; -$ms-color-initials-darkGreen: #1e7145; -$ms-color-initials-lightPink: #e773bd; -$ms-color-initials-pink: #ff0097; -$ms-color-initials-magenta: #7e3878; -$ms-color-initials-purple: #603cba; -$ms-color-initials-black: #1d1d1d; -$ms-color-initials-orange: #da532c; -$ms-color-initials-red: #ee1111; -$ms-color-initials-darkRed: #b91d47; +$ms-color-initials-lightBlue: #6BA5E7; +$ms-color-initials-blue: #2D89EF; +$ms-color-initials-darkBlue: #2B5797; +$ms-color-initials-teal: #00ABA9; +$ms-color-initials-lightGreen: #99B433; +$ms-color-initials-green: #00A300; +$ms-color-initials-darkGreen: #1E7145; +$ms-color-initials-lightPink: #E773BD; +$ms-color-initials-pink: #FF0097; +$ms-color-initials-magenta: #7E3878; +$ms-color-initials-purple: #603CBA; +$ms-color-initials-black: #1D1D1D; +$ms-color-initials-orange: #DA532C; +$ms-color-initials-red: #EE1111; +$ms-color-initials-darkRed: #B91D47; + +// Skype presence colors +$ms-color-presence-available: #7FBA00; +$ms-color-presence-away: #FCD116; +$ms-color-presence-busy: #E81123; +$ms-color-presence-dnd-background: #E81123; +$ms-color-presence-dnd-line: #FFFFFF; +$ms-color-presence-offline: #93ABBD; +$ms-color-presence-out-of-office: $ms-color-magenta; + +// Other presence colors +$ms-color-presence-blocked-background: #DEDEDE; +$ms-color-presence-blocked-line: #C72D25; +$ms-color-presence-busy-stripe-light: #E57A79; +$ms-color-presence-busy-stripe-dark: #D00E0D; +$ms-color-presence-busy-average: #D93B3B; + +// Persona Sizes +$ms-Persona-sizeTiny: 30px; +$ms-Persona-sizeXs: 32px; +$ms-Persona-sizeSm: 40px; +$ms-Persona-sizeMd: 48px; +$ms-Persona-sizeLg: 72px; +$ms-Persona-sizeXl: 100px; + +// Details Spacing +$ms-Persona-imageDetailsSmSpace: 8px; +$ms-Persona-imageDetailsLgSpace: 12px; +$ms-Persona-imageDetailsXlSpace: 20px; + +// Presence Sizes +$ms-Persona-presenceSizeMd: 12px; +$ms-Persona-presenceSizeLg: 20px; +$ms-Persona-presenceSizeXl: 28px; .ms-Persona { - @include ms-font-m; + @include ms-baseFont; @include ms-u-normalize; - display: table; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; line-height: 1; position: relative; + width: 100%; + height: $ms-Persona-sizeMd; + display: table; + table-layout: fixed; + border-collapse: separate; + + .ms-ContextualHost { + display: none; + } } .ms-Persona-imageArea { - position: relative; - display: block; + position: absolute; overflow: hidden; text-align: center; - width: 48px; - height: 48px; + max-width: $ms-Persona-sizeMd; + height: $ms-Persona-sizeMd; border-radius: 50%; z-index: $ms-zIndex-back; + width: 100%; + top: 0; + left: 0; @media screen and (-ms-high-contrast: active) { border: 1px solid $ms-color-white; @@ -63,107 +108,132 @@ $ms-color-initials-darkRed: #b91d47; left: 0; font-size: 47px; top: 9px; + z-index: $ms-zIndex-middle; } .ms-Persona-initials { color: $ms-color-white; font-size: $ms-font-size-l; - font-family: $ms-font-family-light; - line-height: 48px; + font-weight: $ms-font-weight-light; + line-height: $ms-Persona-sizeMd; &.ms-Persona-initials--lightBlue { background-color: $ms-color-initials-lightBlue; } + &.ms-Persona-initials--blue { background-color: $ms-color-initials-blue; } + &.ms-Persona-initials--darkBlue { background-color: $ms-color-initials-darkBlue; } + &.ms-Persona-initials--teal { background-color: $ms-color-initials-teal; } + &.ms-Persona-initials--lightGreen { background-color: $ms-color-initials-lightGreen; } + &.ms-Persona-initials--green { background-color: $ms-color-initials-green; } + &.ms-Persona-initials--darkGreen { background-color: $ms-color-initials-darkGreen; } + &.ms-Persona-initials--lightPink { background-color: $ms-color-initials-lightPink; } + &.ms-Persona-initials--pink { background-color: $ms-color-initials-pink; } + &.ms-Persona-initials--magenta { background-color: $ms-color-initials-magenta; } + &.ms-Persona-initials--purple { background-color: $ms-color-initials-purple; } + &.ms-Persona-initials--black { background-color: $ms-color-initials-black; } + &.ms-Persona-initials--orange { background-color: $ms-color-initials-orange; } + &.ms-Persona-initials--red { background-color: $ms-color-initials-red; } + &.ms-Persona-initials--darkRed { background-color: $ms-color-initials-darkRed; } } .ms-Persona-image { - display: table-cell; - margin-right: 10px; position: absolute; top: 0; left: 0; - width: 48px; - height: 48px; -} + height: $ms-Persona-sizeMd; + z-index: $ms-zIndex-front; + width: 100%; -.ms-Persona-image[src=""] { - display: none; + &[src=''] { + display: none; + } } .ms-Persona-presence { background-color: $ms-color-presence-available; position: absolute; - height: 12px; - width: 12px; + height: $ms-Persona-presenceSizeMd; + width: $ms-Persona-presenceSizeMd; border-radius: 50%; top: auto; left: 34px; bottom: -1px; border: 2px solid $ms-color-white; + text-align: center; +} + +.ms-Persona-presenceIcon { + color: $ms-color-white; + font-size: 9px; + line-height: $ms-Persona-presenceSizeMd; + vertical-align: top; } .ms-Persona-details { - display: table-cell; padding: 0 12px; vertical-align: middle; overflow: hidden; + text-align: left; + padding-left: $ms-Persona-sizeMd + $ms-Persona-imageDetailsLgSpace; + display: table-cell; + width: 100%; } .ms-Persona-primaryText, .ms-Persona-secondaryText, .ms-Persona-tertiaryText, .ms-Persona-optionalText { - @include noWrap(); - width: 190px; + @include noWrap; + width: 100%; overflow: hidden; text-overflow: ellipsis; } .ms-Persona-primaryText { color: $ms-color-neutralPrimary; - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; font-size: $ms-font-size-l; margin-top: -3px; line-height: 1.4; @@ -173,7 +243,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-tertiaryText, .ms-Persona-optionalText { color: $ms-color-neutralSecondary; - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; font-size: $ms-font-size-s; white-space: nowrap; line-height: 1.3; @@ -190,46 +260,15 @@ $ms-color-initials-darkRed: #b91d47; } -//== Modifier: Persona with square images -// -.ms-Persona.ms-Persona--square { - .ms-Persona-imageArea { - background-color: $ms-color-neutralTertiary; - border-radius: 0; - } - - .ms-Persona-presence { - top: 0; - left: 0; - bottom: auto; - right: auto; - height: 48px; - width: 5px; - border-radius: 0; - border: 0; - - @media screen and (-ms-high-contrast: active) { - border: 1px solid $ms-color-white; - } - - @media screen and (-ms-high-contrast: black-on-white) { - border: 1px solid $ms-color-black; - } - } -} - - //== Modifier: Tiny Persona // .ms-Persona.ms-Persona--tiny { - height: 30px; + height: $ms-Persona-sizeTiny; display: inline-block; .ms-Persona-imageArea { overflow: visible; - background: transparent; - height: 0; - width: 0; + display: none; } .ms-Persona-presence { @@ -271,30 +310,25 @@ $ms-color-initials-darkRed: #b91d47; padding: 0; background-color: transparent; - .ms-Persona-primaryText:after { - content: ';'; + .ms-Persona-primaryText { + &::after { + content: ';'; + } } } -//== Modifier: Tiny Square Persona +//== Modifier: Extra Small Persona, FacePile and Token modifiers // -.ms-Persona.ms-Persona--square.ms-Persona--tiny { - .ms-Persona-presence { - height: 12px; - width: 12px; - top: 10px; - } -} - +.ms-Persona.ms-Persona--xs, +.ms-Persona.ms-Persona--facePile, +.ms-Persona.ms-Persona--token { + height: $ms-Persona-sizeXs; -//== Modifier: Extra Small Persona -// -.ms-Persona.ms-Persona--xs { .ms-Persona-imageArea, .ms-Persona-image { - width: 32px; - height: 32px; + max-width: $ms-Persona-sizeXs; + height: $ms-Persona-sizeXs; } .ms-Persona-placeholder { @@ -304,7 +338,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-initials { font-size: $ms-font-size-s; - line-height: 32px; + line-height: $ms-Persona-sizeXs; } .ms-Persona-presence { @@ -312,7 +346,7 @@ $ms-color-initials-darkRed: #b91d47; } .ms-Persona-details { - padding-left: 8px; + padding-left: $ms-Persona-sizeXs + $ms-Persona-imageDetailsSmSpace; } .ms-Persona-primaryText { @@ -326,24 +360,15 @@ $ms-color-initials-darkRed: #b91d47; } -//== Modifier: Extra Small Square Persona -// -.ms-Persona.ms-Persona--square.ms-Persona--xs { - .ms-Persona-presence { - height: 32px; - width: 4px; - left: 0; - } -} - - //== Modifier: Small Persona // .ms-Persona.ms-Persona--sm { + height: $ms-Persona-sizeSm; + .ms-Persona-imageArea, .ms-Persona-image { - width: 40px; - height: 40px; + max-width: $ms-Persona-sizeSm; + height: $ms-Persona-sizeSm; } .ms-Persona-placeholder { @@ -353,7 +378,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-initials { font-size: $ms-font-size-m; - line-height: 40px; + line-height: $ms-Persona-sizeSm; } .ms-Persona-presence { @@ -361,7 +386,7 @@ $ms-color-initials-darkRed: #b91d47; } .ms-Persona-details { - padding-left: 8px; + padding-left: $ms-Persona-sizeSm + $ms-Persona-imageDetailsSmSpace; } .ms-Persona-primaryText { @@ -375,24 +400,15 @@ $ms-color-initials-darkRed: #b91d47; } -//== Modifier: Small Square Persona -// -.ms-Persona.ms-Persona--square.ms-Persona--sm { - .ms-Persona-presence { - height: 40px; - width: 4px; - left: 0; - } -} - - //== Modifier: Large Persona // .ms-Persona.ms-Persona--lg { + height: $ms-Persona-sizeLg; + .ms-Persona-imageArea, .ms-Persona-image { - width: 72px; - height: 72px; + max-width: $ms-Persona-sizeLg; + height: $ms-Persona-sizeLg; } .ms-Persona-placeholder { @@ -402,11 +418,23 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-initials { font-size: $ms-font-size-xxl; - line-height: 72px; + line-height: $ms-Persona-sizeLg; } .ms-Persona-presence { left: 49px; + height: $ms-Persona-presenceSizeLg; + width: $ms-Persona-presenceSizeLg; + border-width: 3px; + } + + .ms-Persona-presenceIcon { + line-height: $ms-Persona-presenceSizeLg; + font-size: $ms-font-size-m; + } + + .ms-Persona-details { + padding-left: $ms-Persona-sizeLg + $ms-Persona-imageDetailsLgSpace; } .ms-Persona-secondaryText { @@ -415,32 +443,20 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-tertiaryText { padding-top: 5px; - } - - .ms-Persona-tertiaryText { display: block; // Show tertiary text } } -//== Modifier: Large Square Persona -// -.ms-Persona.ms-Persona--square.ms-Persona--lg { - .ms-Persona-presence { - height: 72px; - width: 7px; - left: 0; - } -} - - //== Modifier: Extra Large Persona // .ms-Persona.ms-Persona--xl { + height: $ms-Persona-sizeXl; + .ms-Persona-imageArea, .ms-Persona-image { - width: 100px; - height: 100px; + max-width: $ms-Persona-sizeXl; + height: $ms-Persona-sizeXl; } .ms-Persona-placeholder { @@ -450,22 +466,30 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-initials { font-size: $ms-font-size-su; - line-height: 100px; + line-height: $ms-Persona-sizeXl; } .ms-Persona-presence { - height: 20px; - width: 20px; + height: $ms-Persona-presenceSizeXl; + width: $ms-Persona-presenceSizeXl; left: 71px; + border-width: 4px; + } + + .ms-Persona-presenceIcon { + line-height: $ms-Persona-presenceSizeXl; + font-size: $ms-font-size-xl; + position: relative; + top: 1px; } .ms-Persona-details { - padding-left: 20px; + padding-left: $ms-Persona-sizeXl + $ms-Persona-imageDetailsXlSpace; } .ms-Persona-primaryText { font-size: $ms-font-size-xl; - font-family: $ms-font-family-semilight; + font-weight: $ms-font-weight-semilight; margin-top: 0; } @@ -481,17 +505,6 @@ $ms-color-initials-darkRed: #b91d47; } -//== Modifier: Extra Large Square Persona -// -.ms-Persona.ms-Persona--square.ms-Persona--xl { - .ms-Persona-presence { - height: 100px; - width: 9px; - left: 0; - } -} - - //== Modifier: Persona with darker text // // Note: Typically applied when the component has a colored background. @@ -548,31 +561,54 @@ $ms-color-initials-darkRed: #b91d47; // .ms-Persona.ms-Persona--blocked { .ms-Persona-presence { - background-color: $ms-color-presence-blocked-background; - // Use a gradient to include the stripe on modern browsers. - background-image: linear-gradient( to bottom, $ms-color-presence-blocked-background 0%, $ms-color-presence-blocked-background 48%, $ms-color-presence-blocked-line 40%, $ms-color-presence-blocked-line 58%, $ms-color-presence-blocked-background 52%, $ms-color-presence-blocked-background 100% ); + background-color: $ms-color-white; + + &::before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset; + border-radius: 50%; + } + + &::after { + content: ''; + width: 100%; + height: 2px; + background-color: $ms-color-presence-busy-average; + transform: rotate(-45deg); + position: absolute; + top: 5px; + left: 0; + } } -} + &.ms-Persona--lg { + .ms-Persona-presence { + &::after { + top: 9px; + } + } + } -//== Modifier: Persona with busy presence -// -.ms-Persona.ms-Persona--busy { - .ms-Persona-presence { - background-color: $ms-color-presence-busy-average; - // Replace solid background with stripes on modern browsers. - background: repeating-linear-gradient( -45deg, $ms-color-presence-busy-stripe-light, $ms-color-presence-busy-stripe-light 1px, $ms-color-presence-busy-stripe-dark 0px, $ms-color-presence-busy-stripe-dark 2px ); + &.ms-Persona--xl { + .ms-Persona-presence { + &::after { + top: 13px; + } + } } } -//== Modifier: Square Persona with busy presence +//== Modifier: Persona with busy presence // -.ms-Persona.ms-Persona--busy.ms-Persona--square { +.ms-Persona.ms-Persona--busy { .ms-Persona-presence { background-color: $ms-color-presence-busy-average; - // Replace solid background with stripes on modern browsers. - background: repeating-linear-gradient( -45deg, $ms-color-presence-busy-stripe-light, $ms-color-presence-busy-stripe-light 3px, $ms-color-presence-busy-stripe-dark 3px, $ms-color-presence-busy-stripe-dark 6px ); } } @@ -582,8 +618,6 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona.ms-Persona--dnd { .ms-Persona-presence { background-color: $ms-color-presence-dnd-background; - // Use a gradient to include the stripe on modern browsers. - background-image: linear-gradient( to bottom, $ms-color-presence-dnd-background 0%, $ms-color-presence-dnd-background 48%, $ms-color-presence-dnd-line 48%, $ms-color-presence-dnd-line 52%, $ms-color-presence-dnd-background 52%, $ms-color-presence-dnd-background 100% ); } } @@ -596,6 +630,85 @@ $ms-color-initials-darkRed: #b91d47; } } +//== Modifier: FacePile +// +.ms-Persona.ms-Persona--facePile { + display: inline-block; + width: auto; + + &:hover { + cursor: pointer; + } + + .ms-Persona-imageArea { + position: relative; + width: 100%; + min-width: $ms-Persona-sizeXs; + } + + .ms-Persona-initials { + position: relative; + } + + .ms-Persona-details { + display: none; + } + + .ms-Persona-presence { + display: none; + } +} + +//== Modifier: FacePile +// +.ms-Persona.ms-Persona--token { + display: inline-block; + width: auto; + background-color: $ms-color-neutralLighter; + border-radius: 20px; + margin: 4px; + + &:hover { + cursor: pointer; + } + + .ms-Persona-actionIcon { + border-radius: 20px; + display: inline-block; + width: $ms-Persona-sizeXs; + height: $ms-Persona-sizeXs; + padding: 0; + line-height: 30px; + transition: background-color $ms-duration1 $ms-ease1; + text-align: center; + + &:hover { + background-color: $ms-color-neutralLight; + } + } + + .ms-Persona-imageArea { + width: 100%; + min-width: $ms-Persona-sizeXs; + } + + .ms-Persona-details { + height: 30px; + display: inline-block; + width: auto; + padding-right: 8px; + } + + .ms-Persona-primaryText { + padding-top: 0; + line-height: 34px; + } + + .ms-Persona-initials { + position: relative; + } +} + // TODO: Remove overrides below // div.ms-Persona-image to overwrite Fabric's ms-Persona-image diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss index 5b373f4aceaf3..3a71fa811b536 100644 --- a/src/components/Pivot/Pivot.scss +++ b/src/components/Pivot/Pivot.scss @@ -9,97 +9,79 @@ .ms-Pivot { - @include ms-font-m; + @include ms-baseFont; @include ms-u-normalize; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; +} + +.ms-Pivot-links { + font-size: 0; // Bring inline-block children together height: 40px; list-style-type: none; - overflow-x: hidden; + padding: 0; white-space: nowrap; } .ms-Pivot-link { color: $ms-color-neutralPrimary; display: inline-block; - position: relative; - font-family: $ms-font-family-regular; - font-size: $ms-font-size-m-plus; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; line-height: 40px; margin-right: 8px; + padding: 0 8px; + text-align: center; - &:after { - content: ''; - width: 100%; - position: absolute; - display: none; + &:hover { + cursor: pointer; + } + + // Underline, not yet visible + &::before { + background-color: transparent; bottom: 0; - left: 0; + content: ''; height: 2px; - background-color: $ms-color-themePrimary; - - @media screen and (-ms-high-contrast: active) { - background-color: $ms-color-contrastBlackSelected; - } - - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-contrastWhiteSelected; - } + left: 8px; + position: absolute; + right: 8px; + transition: background-color $ms-duration2 $ms-ease2; } - &:hover, - &:focus, - &:active { - color: $ms-color-black; - cursor: pointer; - - + .ms-Pivot-dropdownIcon { - color: $ms-color-neutralDark; - } + // Make room for the heavier text of the selected state + &::after { + color: transparent; + content: attr(title); + display: block; + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; } - &:active { - font-family: $ms-font-family-semibold; - - @media screen and (-ms-high-contrast: active) { - color: $ms-color-contrastBlackSelected; - } + //== State: Selected + &.is-selected { + font-weight: $ms-font-weight-semibold; + position: relative; - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteSelected; + // Show the underline + &::before { + background-color: $ms-color-themePrimary; } + } - &:after { - display: block; - } + //== State: Disabled + &.is-disabled { + color: $ms-color-neutralTertiary; } +} - //== State: Selected - &.is-selected { - color: $ms-color-black; - font-family: $ms-font-family-semibold; - @media screen and (-ms-high-contrast: active) { - color: $ms-color-contrastBlackSelected; - } - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteSelected; - } - &:after { - display: block; - } +// @TODO: Determine if any of the styles below this are necessary anymore. - + .ms-Pivot-dropdownIcon { - color: $ms-color-neutralDark; - } - } -} - -.ms-Pivot-dropdownIcon { - font-size: $ms-font-size-m-plus + 1; - position: relative; - top: 2px; -} // Overflow (ellipsis) .ms-Pivot-link.ms-Pivot-link--overflow { @@ -115,9 +97,7 @@ } &:active { - &:after { - display: none; - } + color: $ms-color-themePrimary; } } @@ -128,6 +108,12 @@ top: 0; } +// Pivot content, hidden by default +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + //== Modifier: Large Pivots // @@ -135,17 +121,13 @@ .ms-Pivot-link { font-size: $ms-font-size-l; - &:active { - font-family: $ms-font-family-regular; - } - &.is-selected { - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-semilight; } } .ms-Pivot-link.ms-Pivot-link--overflow { - &:after { + &::after { font-size: $ms-font-size-l; } } @@ -155,7 +137,6 @@ //== Modifier: Tabs // .ms-Pivot.ms-Pivot--tabs { - height: 40px; .ms-Pivot-link { height: 40px; @@ -163,7 +144,6 @@ line-height: 40px; margin-right: -2px; // Remove space next to inline-block element padding: 0 10px; - font-family: $ms-font-family-semilight !important; &:hover:not(.is-selected):not(.ms-Pivot-link--overflow), &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { @@ -171,36 +151,15 @@ } &:active { - color: $ms-color-white !important; + color: $ms-color-white; background-color: $ms-color-themePrimary; - font-family: $ms-font-family-semilight; - - @media screen and (-ms-high-contrast: active) { - background-color: $ms-color-contrastBlackSelected; - color: $ms-color-black; - } - - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-contrastWhiteSelected; - color: $ms-color-white; - } } //== State: Selected &.is-selected { background-color: $ms-color-themePrimary; color: $ms-color-white; - font-family: $ms-font-family-semilight; - - @media screen and (-ms-high-contrast: active) { - background-color: $ms-color-contrastBlackSelected; - color: $ms-color-black; - } - - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-contrastWhiteSelected; - color: $ms-color-white; - } + font-weight: $ms-font-weight-semilight; } } @@ -211,33 +170,31 @@ } &:active { - background-color: $ms-color-themePrimary !important; - } - } -} - - - -@media (min-width: $ms-screen-lg-min) { - .ms-Pivot-link { - font-size: $ms-font-size-m; - } - - .ms-Pivot-link.ms-Pivot-link--overflow { - &:after { - font-size: $ms-font-size-m; + background-color: $ms-color-themePrimary; } } } - +// @TODO: Confirm that this component is not responsive. +// +// @media (min-width: $ms-screen-lg-min) { +// .ms-Pivot-link { +// font-size: $ms-font-size-m; +// } + +// .ms-Pivot-link.ms-Pivot-link--overflow { +// &:after { +// font-size: $ms-font-size-m; +// } +// } +// } // All high contrast styling rules @media screen and (-ms-high-contrast: active) { .ms-Pivot.ms-Pivot--tabs { .ms-Pivot-link { &.is-selected { - font-family: $ms-font-family-semibold; + font-weight: $ms-font-weight-semibold; } } } diff --git a/src/components/ProgressIndicator/ProgressIndicator.scss b/src/components/ProgressIndicator/ProgressIndicator.scss index c9ce0334236ad..4e632f23a4524 100644 --- a/src/components/ProgressIndicator/ProgressIndicator.scss +++ b/src/components/ProgressIndicator/ProgressIndicator.scss @@ -12,8 +12,14 @@ $ProgressIndicatorMarginBetweenText: 8px; $ProgressIndicatorButtonsWidth: 218px; $ProgressIndicatorTextHeight: 18px; +.ms-ProgressIndicator { + @include ms-baseFont; + font-weight: $ms-font-weight-regular; +} + .ms-ProgressIndicator-itemName { - @include ms-font-m(); + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -22,9 +28,8 @@ $ProgressIndicatorTextHeight: 18px; } .ms-ProgressIndicator-itemDescription { - @include ms-font-m(); color: $ms-color-neutralSecondaryAlt; - font-size: 11px; + font-size: $ms-font-size-xs; line-height: $ProgressIndicatorTextHeight; } @@ -44,9 +49,11 @@ $ProgressIndicatorTextHeight: 18px; } .ms-ProgressIndicator-progressBar { - position: absolute; - height: 2px; background-color: $ms-color-themePrimary; + height: 2px; + position: absolute; + transition: width .3s ease; + width: 0; @media screen and (-ms-high-contrast: active) { background-color: $ms-color-white; diff --git a/src/components/SearchBox/SearchBox.scss b/src/components/SearchBox/SearchBox.scss index 9d96eeb44ad67..b3a409e7ec0dc 100644 --- a/src/components/SearchBox/SearchBox.scss +++ b/src/components/SearchBox/SearchBox.scss @@ -7,64 +7,122 @@ // -------------------------------------------------- // Search box styles +@import '../Label/Label.scss'; + +$SearchBox-width: 208px; +$SearchBox-field-padding-left: 45px; +$SearchBox-height: 36px; +$SearchBox-commandbarHeight: 40px; +$SearchBox-commandbar-md-height: 44px; +$disabled-color: #F4F4F4; +$SearchBox-command-color: #F4F4F4; .ms-SearchBox { - @include ms-font-m; + @include ms-baseFont; @include ms-u-normalize; + height: $SearchBox-height; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; position: relative; margin-bottom: 10px; display: inline-block; + overflow: hidden; + background-color: $ms-color-white; + + // State: Active searchbox + &.is-active { + z-index: $ms-zIndex-front; + + .ms-SearchBox-label { + display: none; + } + + .ms-SearchBox-clear { + display: block; + } + } + + &:hover { + background-color: $ms-color-themeLighter; + + .ms-SearchBox-label { + color: $ms-color-black; + + .ms-Icon { + color: $ms-color-neutralPrimary; + } + } + } // State: Disabled searchbox &.is-disabled { + background-color: $disabled-color; + pointer-events: none; + + .ms-SearchBox-label { + @include ms-Label-is-disabled; + } .ms-SearchBox-icon { - color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiary; } + .ms-SearchBox-field { - background-color: $ms-color-neutralLighter; + color: $ms-color-neutralTertiary; + background-color: transparent; border-color: $ms-color-neutralLighter; - pointer-events: none; cursor: default; } } +} - // State: Active searchbox - &.is-active { - .ms-SearchBox-closeButton { - display: block; - outline: transparent 1px solid; - } +.ms-SearchBox-clear { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: $ms-zIndex-front; + + .ms-CommandButton-button { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + height: $SearchBox-height; + } + + .ms-CommandButton-icon { + color: $ms-color-white; } } +.ms-SearchBox-icon { + position: relative; + top: 50%; + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + height: 16px; + margin-left: 12px; + margin-right: 6px; + color: $ms-color-themePrimary; + vertical-align: top; +} + .ms-SearchBox-field { position: relative; @include ms-u-normalize; border: 1px solid $ms-color-themeTertiary; outline: transparent 1px solid; - border-radius: 0; - font-family: $ms-font-family-semilight; + font-weight: $ms-font-weight-semilight; font-size: $ms-font-size-m; color: $ms-color-black; - height: 32px; - padding: 6px 3px 7px 10px; - width: 180px; + height: $SearchBox-height; + padding: 6px 3px 7px $SearchBox-field-padding-left; + width: $SearchBox-width; background-color: transparent; z-index: $ms-zIndex-middle; - - &.hovering { - border-color: $ms-color-themePrimary; - background-color: $ms-color-themeLighter; - - & + .ms-SearchBox-label { - color: $ms-color-black; - - .ms-Icon { - color: $ms-color-neutralPrimary; - } - } - } + transition: padding-left $ms-duration1; &:focus { padding: 6px 32px 7px 10px; @@ -77,35 +135,255 @@ } } -.ms-SearchBox-closeButton { - border: none; - cursor: pointer; - position: absolute; - right: 0; - top: 0; - height: 32px; - width: 32px; - background-color: $ms-color-themePrimary; - text-align: center; - display: none; - font-size: $ms-font-size-l; - color: $ms-color-white; - z-index: $ms-zIndex-front; -} - .ms-SearchBox-label { position: absolute; top: 0; left: 0; - padding-left: 8px; - line-height: 32px; + height: $SearchBox-height; + line-height: $SearchBox-height; color: $ms-color-neutralSecondary; } -.ms-SearchBox-icon { - margin-right: 7px; - font-size: $ms-font-size-l; - color: $ms-color-neutralSecondaryAlt; +//== Modifier: CommandBar Search +// +.ms-SearchBox.ms-SearchBox--commandBar { + @include ms-bgColor-white; + width: $SearchBox-width; + height: $SearchBox-commandbarHeight; + + .ms-SearchBox-field, + .ms-SearchBox-label { + height: $SearchBox-commandbarHeight; + line-height: $SearchBox-commandbarHeight; + } + + .ms-SearchBox-field { + transition: none; + border: 0; + + &:focus { + background-color: transparent; + padding: 6px 3px 7px $SearchBox-field-padding-left; + } + } + + .ms-SearchBox-icon { + position: relative; + top: 50%; + transform: translateY(-50%); + display: inline-block; + font-size: 16px; + width: 16px; + height: 16px; + margin-left: 16px; + margin-right: 8px; + color: $ms-color-themePrimary; + vertical-align: top; + } + + .ms-SearchBox-clear, + .ms-SearchBox-filter, + .ms-SearchBox-exit { + display: none; + position: absolute; + top: 0; + z-index: $ms-zIndex-front; + color: $ms-color-neutralTertiary; + + .ms-CommandButton-button { + height: $SearchBox-commandbarHeight; + background-color: transparent; + } + } + + .ms-SearchBox-clear { + right: 8px; + } + + .ms-SearchBox-filter { + right: 8px; + + .ms-CommandButton-icon { + color: $ms-color-themePrimary; + } + } + + &::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-white; + + .ms-SearchBox-label { + color: $ms-color-neutralDark; + } + + .ms-SearchBox-icon { + color: $ms-color-themePrimary; + } + } + + &:focus { + background-color: transparent; + } + + &.is-active { + .ms-CommandButton { + .ms-SearchBox-exit, + .ms-SearchBox-filter { + display: block; + } + } + } + + &.is-collapsed { + width: 50px; + min-height: 40px; + z-index: $ms-zIndex-back; + background-color: $SearchBox-command-color; + + .ms-SearchBox-text { + display: none; + } + + .ms-SearchBox-field { + cursor: pointer; + width: calc(100% - 50px); + } + + &::before { + visibility: hidden; + } + } + + &.is-collapsed.is-active { + width: 100%; + + .ms-SearchBox-field { + display: block; + cursor: text; + } + + .ms-SearchBox-text { + display: inline-block; + } + + @media only screen and (max-width: $ms-screen-md-max) { + width: 100%; + + .ms-SearchBox-clear { + display: inline-block; + right: 58px; + } + + .ms-SearchBox-filter { + display: inline-block; + } + + &.is-animated { + transition: width $ms-duration1 $ms-ease1; + } + } + + &::before { + visibility: visible; + } + } + + &.has-text { + .ms-SearchBox-clear { + display: inline-block; + + .ms-CommandButton-icon { + color: $ms-color-neutralTertiary; + + &:active { + color: $ms-color-themePrimary; + } + } + } + } + + @media only screen and (min-width: $ms-screen-xl-min) { + @include ms-bgColor-white; + border-right: 1px solid $ms-color-neutralLight; + } + + @media only screen and (max-width: $ms-screen-md-max) { + height: $SearchBox-commandbar-md-height; + + .ms-SearchBox-icon, + .ms-SearchBox-exit, + .ms-SearchBox-field, + .ms-SearchBox-label { + height: $SearchBox-commandbar-md-height; + line-height: $SearchBox-commandbar-md-height; + } + + .ms-SearchBox-icon, + .ms-SearchBox-exit, + .ms-SearchBox-filter, + .ms-SearchBox-clear { + font-size: 20px; + + .ms-CommandButton-button { + height: $SearchBox-commandbar-md-height; + } + } + + .ms-SearchBox-field, + .ms-SearchBox-label { + font-size: 16px; + } + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + @include ms-bgColor-white; + + .ms-SearchBox-label { + display: block; + line-height: $SearchBox-commandbarHeight; + height: $SearchBox-commandbarHeight; + + .ms-SearchBox-text { + display: none; + } + } + + &::before { + visibility: visible; + } + + @media only screen and (max-width: $ms-screen-md-max) { + .ms-SearchBox-field { + width: 100%; + padding-right: 100px; + } + + .ms-SearchBox-icon { + display: none; + } + + .ms-SearchBox-exit { + display: inline-block; + } + + &.has-text { + .ms-SearchBox-filter { + .ms-CommandButton-icon { + color: $ms-color-neutralTertiary; + } + } + } + } } // TODO: Remove overrides below. diff --git a/src/components/Spinner/Spinner.scss b/src/components/Spinner/Spinner.scss index 050f75bc6b810..3a319891987c6 100644 --- a/src/components/Spinner/Spinner.scss +++ b/src/components/Spinner/Spinner.scss @@ -9,6 +9,7 @@ .ms-Spinner { + @include ms-baseFont; position: relative; height: 20px; @@ -38,8 +39,10 @@ } .ms-Spinner-label { + @include ms-baseFont; position: relative; - @include ms-font-s(); + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; color: $ms-color-themePrimary; left: 28px; top: 2px; diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index 1d6fd06e8614e..b0a5be916124b 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -10,11 +10,18 @@ @import '../Label/Label.scss'; - .ms-TextField { - @include ms-font-m; + @include ms-baseFont; @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; margin-bottom: 8px; + + .ms-Label { + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-semibold; + } } //= State: A disabled textfield @@ -51,11 +58,11 @@ @include ms-u-normalize; border: 1px solid $ms-color-neutralTertiaryAlt; border-radius: 0; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; color: $ms-color-neutralPrimary; height: 32px; - padding: 6px 10px 8px; + padding: 6px 12px 7px; width: 100%; min-width: 180px; outline: 0; @@ -79,6 +86,13 @@ } } + &[disabled] { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + @include input-placeholder { color: $ms-color-neutralSecondary; } @@ -94,13 +108,22 @@ // .ms-TextField.ms-TextField--placeholder { position: relative; + background-color: $ms-color-white; + + .ms-TextField-field { + position: relative; + background-color: transparent; + z-index: $ms-zIndex-middle; + } .ms-Label { position: absolute; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; color: $ms-color-neutralSecondary; - padding: 7px 0 7px 10px; + padding: 6px 12px 7px; + pointer-events: none; + z-index: $ms-zIndex-back; } &.is-disabled { @@ -139,12 +162,12 @@ } .ms-Label { - font-size: $ms-font-size-s; + font-size: $ms-font-size-m; margin-right: 8px; display: table-cell; - vertical-align: bottom; + vertical-align: top; padding-left: 12px; - padding-bottom: 5px; + padding-top: 9px; height: 32px; width: 1%; white-space: nowrap; @@ -156,7 +179,7 @@ display: table-cell; text-align: left; padding-top: 8px; - padding-bottom: 2px; + padding-bottom: 3px; &:active, &:focus, @@ -196,7 +219,11 @@ // .ms-TextField.ms-TextField--multiline { .ms-TextField-field { - @include ms-font-s; + @include ms-baseFont; + color: $ms-color-neutralSecondary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; line-height: 17px; min-height: 60px; min-width: 260px; diff --git a/src/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.scss index b64e2fe5a63f8..87f92fe901e1b 100644 --- a/src/components/Toggle/Toggle.scss +++ b/src/components/Toggle/Toggle.scss @@ -9,6 +9,7 @@ // Toggle .ms-Toggle { + @include ms-baseFont; @include ms-font-m; @include ms-u-normalize; diff --git a/src/demo/pages/ListPage/examples/List.Mail.Example.scss b/src/demo/pages/ListPage/examples/List.Mail.Example.scss index 59dbfd77ba7a4..448a9baa5baca 100644 --- a/src/demo/pages/ListPage/examples/List.Mail.Example.scss +++ b/src/demo/pages/ListPage/examples/List.Mail.Example.scss @@ -25,18 +25,14 @@ } .ms-ListItem-primaryText { - color: $ms-color-neutralDark; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-xl; + @include ms-font-xl; padding-right: 80px; // Prevent overlap with up to three actions. position: relative; top: -4px; } .ms-ListItem-secondaryText { - color: $ms-color-neutralPrimary; - font-family: $ms-font-family-regular; - font-size: $ms-font-size-m; + @include ms-font-m; line-height: 25px; position: relative; top: -7px; @@ -44,9 +40,7 @@ } .ms-ListItem-tertiaryText { - color: $ms-color-neutralSecondaryAlt; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-m; + @include ms-font-m; position: relative; top: -9px; margin-bottom: -4px; @@ -54,9 +48,7 @@ } .ms-ListItem-metaText { - color: $ms-color-neutralPrimary; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-xs; + @include ms-font-xs; position: absolute; right: 30px; top: 39px; @@ -112,7 +104,7 @@ .ms-ListItem-secondaryText, .ms-ListItem-metaText { color: $ms-color-themePrimary; - font-family: $ms-font-family-semibold; + @include ms-fontWeight-semibold; } } @@ -224,9 +216,7 @@ // Secondary text, typically the modified date or some other metadata. .ms-ListItem-secondaryText { @include noWrap; - color: $ms-color-neutralSecondary; - font-family: $ms-font-family-regular; - font-size: $ms-font-size-xs; + @include ms-font-xs; padding-top: 6px; } } From ed8e216e7630ca642026fe0d613919b35ea3d1a5 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Wed, 27 Jul 2016 18:23:50 -0700 Subject: [PATCH 02/92] adding more component states --- src/demo/components/app/App.scss | 8 +++- src/demo/components/app/AppState.ts | 57 +++++++++++++++-------------- 2 files changed, 35 insertions(+), 30 deletions(-) diff --git a/src/demo/components/app/App.scss b/src/demo/components/app/App.scss index bad340fbd6704..15753dc4840d3 100644 --- a/src/demo/components/app/App.scss +++ b/src/demo/components/app/App.scss @@ -91,15 +91,19 @@ body { } .Nav-linkFlair.is-state1 { + background: $ms-color-red; +} + +.Nav-linkFlair.is-state2 { background: $ms-color-yellowLight; color: $ms-color-black; } -.Nav-linkFlair.is-state2 { +.Nav-linkFlair.is-state3 { background: $ms-color-greenLight; } -.Nav-linkFlair.is-state3 { +.Nav-linkFlair.is-state4 { background: $ms-color-green; } diff --git a/src/demo/components/app/AppState.ts b/src/demo/components/app/AppState.ts index 7b2b1f6798f8c..207a6063b1c82 100644 --- a/src/demo/components/app/AppState.ts +++ b/src/demo/components/app/AppState.ts @@ -42,6 +42,7 @@ import { ThemePage } from '../../pages/ThemePage/ThemePage'; export enum ExampleStatus { placeholder, started, + alpha, beta, release } @@ -61,73 +62,73 @@ export const AppState: IAppState = { { component: BreadcrumbPage, name: 'Breadcrumb', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/breadcrumb' }, { component: ButtonPage, name: 'Button', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/button' }, { component: CalloutPage, name: 'Callout', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/callout' }, { component: CheckboxPage, name: 'Checkbox', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/checkbox' }, { component: ChoiceGroupPage, name: 'ChoiceGroup', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/ChoiceGroup' }, { component: CommandBarPage, name: 'CommandBar', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/commandbar' }, { component: ContextualMenuPage, name: 'ContextualMenu', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/contextmenu' }, { component: DatePickerPage, name: 'DatePicker', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/datepicker' }, { component: DetailsListPage, name: 'DetailsList', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/detailslist' }, { component: DialogPage, name: 'Dialog', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/dialog' }, { component: DocumentCardPage, name: 'DocumentCard', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/documentcard' }, { component: DropdownPage, name: 'Dropdown', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/dropdown' }, { @@ -139,19 +140,19 @@ export const AppState: IAppState = { { component: LabelPage, name: 'Label', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/label' }, { component: LinkPage, name: 'Link', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/link' }, { component: ListPage, name: 'List', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/list' }, { @@ -169,13 +170,13 @@ export const AppState: IAppState = { { component: OverlayPage, name: 'Overlay', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/overlay' }, { component: PanelPage, name: 'Panel', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/panel' }, { @@ -187,7 +188,7 @@ export const AppState: IAppState = { { component: PersonaPage, name: 'Persona', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/persona' }, { @@ -205,7 +206,7 @@ export const AppState: IAppState = { { component: ProgressIndicatorPage, name: 'ProgressIndicator', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/progressindicator' }, { @@ -217,19 +218,19 @@ export const AppState: IAppState = { { component: SpinnerPage, name: 'Spinner', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/spinner' }, { component: TextFieldPage, name: 'TextField', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/textfield' }, { component: TogglePage, name: 'Toggle', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/toggle' } ], @@ -252,13 +253,13 @@ export const AppState: IAppState = { { component: ImagePage, name: 'Image', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/image' }, { component: LayerPage, name: 'Layer', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/layer' }, { @@ -270,7 +271,7 @@ export const AppState: IAppState = { { component: SliderPage, name: 'Slider', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#/examples/Slider' } ], @@ -281,19 +282,19 @@ export const AppState: IAppState = { { component: FocusTrapZonePage, name: 'Focus Trap zones', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#examples/focustrapzone' }, { component: FocusZonePage, name: 'Focus zones', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#examples/focuszone' }, { component: SelectionPage, name: 'Selection management', - status: ExampleStatus.beta, + status: ExampleStatus.alpha, url: '#examples/selectionManagement' }, { From 89be00acdc8e41a5bd1959dae99f0e134f4c064a Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Thu, 28 Jul 2016 12:17:41 -0700 Subject: [PATCH 03/92] removing last reminiscent of 2.6 --- index.html | 2 -- src/components/ProgressIndicator/ProgressIndicator.scss | 2 +- src/components/Spinner/Spinner.scss | 2 +- src/demo/app.scss | 1 - src/demo/components/PropertiesTable/PropertiesTable.scss | 2 +- 5 files changed, 3 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4203ebda5e05f..af7872b2616ca 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,6 @@ Office UI Fabric React Examples - -
diff --git a/src/components/ProgressIndicator/ProgressIndicator.scss b/src/components/ProgressIndicator/ProgressIndicator.scss index 4e632f23a4524..63819909f2327 100644 --- a/src/components/ProgressIndicator/ProgressIndicator.scss +++ b/src/components/ProgressIndicator/ProgressIndicator.scss @@ -1,4 +1,4 @@ -@import "~office-ui-fabric/src/sass/Fabric.Common"; +@import '../../common/common'; // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. diff --git a/src/components/Spinner/Spinner.scss b/src/components/Spinner/Spinner.scss index 3a319891987c6..6c722f513463d 100644 --- a/src/components/Spinner/Spinner.scss +++ b/src/components/Spinner/Spinner.scss @@ -1,4 +1,4 @@ -@import "~office-ui-fabric/src/sass/Fabric.Common"; +@import '../../common/common'; // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. diff --git a/src/demo/app.scss b/src/demo/app.scss index 5750c5549e3be..40bb5d01b97f6 100644 --- a/src/demo/app.scss +++ b/src/demo/app.scss @@ -1,4 +1,3 @@ -@import "~office-ui-fabric/src/sass/Fabric"; @import '../common/common'; html, body { diff --git a/src/demo/components/PropertiesTable/PropertiesTable.scss b/src/demo/components/PropertiesTable/PropertiesTable.scss index d6842a67a436e..5b6d5353771e2 100644 --- a/src/demo/components/PropertiesTable/PropertiesTable.scss +++ b/src/demo/components/PropertiesTable/PropertiesTable.scss @@ -1,4 +1,4 @@ -@import "~office-ui-fabric/src/sass/Fabric.Common"; +@import '../../../common/common'; .PropertiesTable { margin-bottom: 20px; From 0a3149ee8673d1e4aa9c1301f1e3cd91b91be743 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Fri, 29 Jul 2016 12:11:41 -0700 Subject: [PATCH 04/92] [MDL2]: Breadcrumb, fixing the branch (#30) * Fixing list group header css * Fix infinity loop when this.props.getItemCountForPage return 0 as item count per page. (#22) Fix infinity loop when this.props.getItemCountForPage return 0 * Dubunin/breadcrumb issues (#12) * #191731: updated hover state color for overflow button * #191719: added override styles for breadcrumb focus rect * #191719: code formatting - missing space * #191723: per design - removed negative margin-right from overflow breadcrumb * #191723: code cleanup * #191723: updated to use localized margins * 191731: removed overrides that are no longer necessary. Updated to use focus-border. * Added null check to root search for withViewport Added null check to root search for withViewport * Updating Icons, cleaning SCSS * DetailsList now resets columns correctly when they change based on new items passed in (#26) * Adding repo example. * Fixing the filter bug * Adding 2 more reviewers. * Adding travis file. * rename temporarily. * Renaming back. * Rename. * Renaming. * Applying an undo of the recent Nav changes until we sort out the correct fix (#27) * Applying an undo of the recent Nav changes until we sort out the correct fix. * Adding anton as a PR approver. * v0.36.0 (#28) * Applying an undo of the recent Nav changes until we sort out the correct fix. * Adding anton as a PR approver. * Using semantic variables * fixing date picker fonts * fixing font in details header * more font fixes * making overflow button 16px --- .pullapprove.yml | 3 + .travis.yml | 14 ++ package.json | 2 +- src/common/_semanticColorVariables.scss | 3 + src/components/Breadcrumb/Breadcrumb.scss | 212 +++++++----------- src/components/Breadcrumb/Breadcrumb.tsx | 6 +- src/components/Check/Check.scss | 5 +- src/components/DatePicker/DatePicker.scss | 26 +-- src/components/DetailsList/DetailsHeader.scss | 2 +- src/components/DetailsList/DetailsList.tsx | 4 +- .../DocumentCard/DocumentCardActivity.scss | 6 +- .../DocumentCard/DocumentCardLocation.scss | 4 +- .../DocumentCard/DocumentCardTitle.scss | 4 +- src/components/GroupedList/GroupHeader.scss | 1 + src/components/List/List.tsx | 4 +- src/components/Nav/Nav.Props.ts | 10 - src/components/Nav/Nav.scss | 81 ++----- src/components/Nav/Nav.tsx | 64 ++---- src/components/Panel/Panel.scss | 4 +- src/components/TextField/TextField.scss | 4 - src/demo/components/{app => App}/App.scss | 0 src/demo/components/{app => App}/App.tsx | 0 src/demo/components/{app => App}/AppState.ts | 0 .../examples/DetailsList.Basic.Example.tsx | 33 ++- .../NavPage/examples/Nav.Basic.Example.tsx | 11 +- ...ple.tsx => SearchBox.FullSize.Example.tsx} | 0 src/utilities/decorators/withViewport.tsx | 3 + 27 files changed, 195 insertions(+), 311 deletions(-) create mode 100644 .travis.yml rename src/demo/components/{app => App}/App.scss (100%) rename src/demo/components/{app => App}/App.tsx (100%) rename src/demo/components/{app => App}/AppState.ts (100%) rename src/demo/pages/SearchBoxPage/examples/{SearchBox.Fullsize.Example.tsx => SearchBox.FullSize.Example.tsx} (100%) diff --git a/.pullapprove.yml b/.pullapprove.yml index dfc81cba19d19..436823b4b391b 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -11,5 +11,8 @@ reviewers: - mikewheaton - dzearing - cliffkoh + - aditima + - yiminwu + - antonlabunets name: pullapprove required: 1 diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000000000..c7e68442a0a2b --- /dev/null +++ b/.travis.yml @@ -0,0 +1,14 @@ +language: node_js +node_js: +- '4.2' +before_script: +- npm install -g gulp +script: gulp +deploy: + provider: npm + email: dzearing@microsoft.com + api_key: + secure: kLwlKSvDBoGsYP0p+64JnW5kmSpZfSmt2YxKKwWFcThlsiftbZtUILWFVpPd7A5yymsYuOONZTXppaW00OWaH1Bqs6yVHOn3kVQzE7VK/FtVwGZnqFfF0ea0pYYfto3OIFnyZ86vZ0M8u2A+3FGqjGYT1y3RDbG5GqhURBNd+KBhHrMS+pSaGDgEjskslLeQ+QtQ1/t17j0ZQZeYpxl+qFKislR1djeF0pkOjaoJ8wAUB77E0RhVyKP4cOyvtiF9E8nmnaurNYuabZqFMzOg0PgzMhh6xWv10aGF7jNzgojzCix/grCJR1gdfaE6epPGkrufK1nFjCVb60Z+jHZmuhXrW80Qa9AsMbNkXLlm9g6OLm63Ub2xqNQ5338NteGygWj8FRYe7ZngQ/vAY7SK44oA6+QRJAcpV6ieUFeIN8oEoZ42TJjUuKa6xaRVxuRQs2yobB3GzE4QioWLtqlDo+jbkzc0uFUpQHfErH5pHa7+qHDawiY9sO41lKvds6KfD3PXqHJxdokQh5nRB28k0eN+rFiSyvimDmerqBeG0U2oVJuYGVwGZSMKkOXGoZjZaCOFkPaZcS+HQZ+iDYpqEoB1jF1iYgkknZQLDlprWywjXEy/u2C2Bkd1K31aFCwYxrxkgGquii1ugUFVrjCpNLbeeoKALx5JapDfyAUVF+U= + on: + tags: true + repo: OfficeDev/office-ui-fabric-react diff --git a/package.json b/package.json index 6dda69895b96c..b1c237dda6fc9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "0.35.0", + "version": "0.36.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/src/common/_semanticColorVariables.scss b/src/common/_semanticColorVariables.scss index 525b3e1c62ab9..675b1281a604d 100644 --- a/src/common/_semanticColorVariables.scss +++ b/src/common/_semanticColorVariables.scss @@ -22,4 +22,7 @@ $selectedForegroundColor: $ms-color-neutralPrimary; $selectedHoverBackgroundColor: $ms-color-neutralLight; $selectedHoverForegroundColor: $ms-color-neutralDark; +$selectedActiveBackgroundColor: $ms-color-neutralTertiaryAlt; +$selectedActiveForegroundColor: $ms-color-neutralPrimary; + $dividerColor: $ms-color-neutralLight; diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index bf2614b6d1f5a..a1abf188b5915 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -7,30 +7,28 @@ // -------------------------------------------------- // Breadcrumb styles +$Breadcrumb-overflowButtonColor: $ms-color-themePrimary; +$Breadcrumb-overflowButtonSize: 16px; +$Breadcrumb-buttonHoverColor: $ms-color-themeDark; +$Breadcrumb-itemMaxWidth: 160px; +$Breadcrumb-itemMaxWidth-sm: 116px; .ms-Breadcrumb { @include ms-baseFont; margin: 23px 0 1px; - &.is-overflow { - .ms-Breadcrumb-overflow { - display: inline; - } + .ms-Breadcrumb-list { + white-space: nowrap; + padding: 0; + margin: 0; } -} - -.ms-Breadcrumb-chevron { - font-size: $ms-font-size-s; - color: $ms-color-neutralSecondary; - vertical-align: top; - margin: 11px 7px; -} -.ms-Breadcrumb-list { - display: inline; - white-space: nowrap; - padding: 0; - margin: 0; + .ms-Breadcrumb-chevron { + font-size: $ms-font-size-s; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 11px 7px; + } .ms-Breadcrumb-listItem { list-style-type: none; @@ -38,149 +36,99 @@ margin: 0; padding: 0; display: inline-block; + position: relative; &:last-of-type { .ms-Breadcrumb-chevron { display: none; } } - } -} - -.ms-Breadcrumb-overflow { - display: none; - position: relative; - .ms-Breadcrumb-overflowButton { - font-size: 16px; - display: inline-block; - color: $ms-color-themePrimary; - padding: 8px; - cursor: pointer; - vertical-align: top; - } -} - -.ms-Breadcrumb-overflowMenu { - display: none; - position: absolute; - margin-right: -2px; - - &.is-open { - display: block; - top: 36px; - left: 0; - @include drop-shadow; - background-color: $ms-color-white; - border: 1px solid $ms-color-neutralTertiaryAlt; - z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle); - } - - &::before { - position: absolute; - @include drop-shadow; - top: -6px; - left: 6px; - content: ' '; - width: 16px; - height: 16px; - transform: rotate(45deg); - background-color: $ms-color-white; + .ms-Breadcrumb-itemLink { + @include focus-border; + @include ms-font-xl; + display: inline-block; + padding: 0 4px; + max-width: $Breadcrumb-itemMaxWidth; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; + } } - .ms-ContextualMenu { - border: 0; - box-shadow: none; + .ms-Breadcrumb-overflow { + display: inline-block; position: relative; - width: 190px; - &.is-open { - margin-bottom: 0; + .ms-Breadcrumb-overflowButton { + font-size: $Breadcrumb-overflowButtonSize; + display: inline-block; + color: $Breadcrumb-overflowButtonColor; + padding: 8px; + cursor: pointer; + vertical-align: top; } } -} - -.ms-Breadcrumb-itemLink, -.ms-Breadcrumb-overflowButton { - text-decoration: none; - outline: transparent; - - &:hover { - background-color: $ms-color-neutralLighter; - cursor: pointer; - } - - &:focus { - outline: $ms-color-neutralSecondaryAlt solid 1px; - color: $ms-color-black; - } - &:active { + .ms-Breadcrumb-itemLink, + .ms-Breadcrumb-overflowButton { + text-decoration: none; outline: transparent; - background-color: $ms-color-neutralTertiaryAlt; - } -} - -.ms-Breadcrumb-itemLink { - font-weight: $ms-font-weight-light; - font-size: $ms-font-size-xl; - color: $ms-color-neutralPrimary; - display: inline-block; - padding: 0 4px; - max-width: 160px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - vertical-align: top; -} + &:hover { + background-color: $selectedHoverBackgroundColor; + color: $Breadcrumb-buttonHoverColor; + cursor: pointer; + } -@media screen and (max-width: $ms-screen-md-max) {å - .ms-Breadcrumb { - margin: 10px 0; - } + &:focus { + outline: $ms-color-neutralSecondaryAlt solid 1px; + color: $ms-color-neutralDark; + } - .ms-Breadcrumb-itemLink { - font-size: $ms-font-size-l; + &:active { + outline: transparent; + background-color: $selectedActiveBackgroundColor; + color: $selectedActiveForegroundColor; + } } - .ms-Breadcrumb-chevron { - font-size: 10px; - margin: 8px 5px; - } + @media screen and (max-width: $ms-screen-md-max) { + margin: 11px 0 1px; - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - font-size: 16px; - padding: 5px 4px; + .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-l; } - } -} -@media screen and (max-width: $ms-screen-sm-max) { - .ms-Breadcrumb-itemLink { - font-size: $ms-font-size-m; - max-width: 116px; - } + .ms-Breadcrumb-chevron { + font-size: $ms-font-size-mi; + margin: 8px 5px; + } - .ms-Breadcrumb-chevron { - margin: 5px 4px; + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + font-size: $ms-font-size-m-plus; + padding: 5px 4px; + } + } } - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - padding: 2px 4px; + @media screen and (max-width: $ms-screen-sm-max) { + .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-m; + max-width: $Breadcrumb-itemMaxWidth-sm; } - } -} -// TODO: Overrides that need to be removed. + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } -.ms-Breadcrumb-overflow { - display: inline-block; + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding: 2px 4px; + } + } + } } -.ms-Breadcrumb-overflowButton { - line-height: 12px; - margin-right: 0px; -} \ No newline at end of file diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index a1b5c48305291..77c6b1eb577d4 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -76,13 +76,13 @@ export class Breadcrumb extends React.Component { renderedOverflowItems && renderedOverflowItems.length ? (
  • -
    - +
    • ) : (null) } { renderedItems.map( @@ -94,7 +94,7 @@ export class Breadcrumb extends React.Component { item.text } - + )) } diff --git a/src/components/Check/Check.scss b/src/components/Check/Check.scss index 4f1e86d504e4c..447aa32572142 100644 --- a/src/components/Check/Check.scss +++ b/src/components/Check/Check.scss @@ -14,10 +14,7 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1); .ms-CheckBox { box-sizing: border-box; - color: $ms-color-neutralPrimary; - font-family: $ms-font-family-base; - font-size: $ms-font-size-m; - font-weight: $ms-font-weight-regular; + @include ms-baseFont; min-height: 36px; position: relative; diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index d22b5f5900583..07239ff9a08e5 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -107,9 +107,7 @@ .ms-DatePicker-month, .ms-DatePicker-year { display: inline-block; - font-family: $ms-font-family-light; - font-size: 21px; - color: $ms-color-themePrimary; + @include ms-font-xl; margin-top: -1px; &:hover { @@ -152,10 +150,7 @@ height: 40px; padding: 0; line-height: 40px; - font-family: $ms-font-family-regular; - font-size: 15px; - font-weight: normal; - color: $ms-color-neutralPrimary; + @include ms-font-m-plus; } @@ -175,7 +170,7 @@ // Out of focus days. .ms-DatePicker-day--outfocus { color: $ms-color-neutralTertiary; - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; } @@ -267,9 +262,7 @@ .ms-DatePicker-currentYear, .ms-DatePicker-currentDecade { display: block; - font-weight: normal; - font-family: $ms-font-family-semilight; - font-size: 21px; + @include ms-font-xl; height: 40px; line-height: 42px; @include margin-left(15px); @@ -305,9 +298,7 @@ cursor: pointer; @include float(left); @include margin(0, 10px, 10px, 0); - font-weight: normal; - font-family: $ms-font-family-regular; - font-size: 13px; + @include ms-font-s-plus; color: $ms-color-neutralPrimary; text-align: center; @@ -328,8 +319,7 @@ bottom: 9px; color: $ms-color-themePrimary; cursor: pointer; - font-family: $ms-font-family-semilight; - font-size: 13px; + @include ms-font-s-plus; height: 30px; line-height: 30px; padding: 0 10px; @@ -376,7 +366,7 @@ width: 30px; height: 30px; line-height: 30px; - font-family: $ms-font-family-semibold; + font-weight: $ms-font-weight-semibold; font-size: $ms-font-size-s; } @@ -405,7 +395,7 @@ // Update header text styles. .ms-DatePicker-month, .ms-DatePicker-year { - font-family: $ms-font-family-semilight; + font-weight: $ms-font-weight-semilight; } .ms-DatePicker-month, diff --git a/src/components/DetailsList/DetailsHeader.scss b/src/components/DetailsList/DetailsHeader.scss index 621f7835e1dc0..9c43f9507dcb5 100644 --- a/src/components/DetailsList/DetailsHeader.scss +++ b/src/components/DetailsList/DetailsHeader.scss @@ -45,7 +45,7 @@ $resizerColor: $ms-color-neutralTertiaryAlt; color: $disabledForegroundColor; @include focus-border(); - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; position: relative; display: inline-block; box-sizing: border-box; diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx index 501d8d5b11569..f94fafafa5f69 100644 --- a/src/components/DetailsList/DetailsList.tsx +++ b/src/components/DetailsList/DetailsList.tsx @@ -391,7 +391,7 @@ export class DetailsList extends React.Component