diff --git a/gulpfile.js b/gulpfile.js index 43dff1491ccf27..69219099cdfca6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -24,10 +24,10 @@ build.postCopy.setConfig({ isProduction && build.postCopy.setConfig({ copyTo: { 'dist/sass': [ - 'node_modules/office-ui-fabric/dist/sass/*.*' + 'node_modules/office-ui-fabric-core/dist/sass/*.*' ], 'dist/css': [ - 'node_modules/office-ui-fabric/dist/css/*.*' + 'node_modules/office-ui-fabric-core/dist/css/*.*' ] } }); diff --git a/package.json b/package.json index c6e9c46dfd7b35..e7908c0539ffd7 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "gulp-util": "3.0.7", "gutil": "1.6.4", "highlight.js": "9.6.0", - "office-ui-fabric": "~2.6.0", + "office-ui-fabric-core": "^4.0.0", "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 7411c91206020c..a047d898ca1671 100644 --- a/src/common/_common.scss +++ b/src/common/_common.scss @@ -1,8 +1,6 @@ -@import '~office-ui-fabric/src/sass/Fabric.Common'; -@import './fabricExtraColors'; +@import '~office-ui-fabric-core/dist/sass/Fabric.Common'; @import './i18n'; @import './themeOverrides'; @import './focusBorder'; @import './semanticColorVariables'; -@import './fabricExtraIcons'; diff --git a/src/common/_fabricExtraColors.scss b/src/common/_fabricExtraColors.scss deleted file mode 100644 index 9cf758b481ecfa..00000000000000 --- a/src/common/_fabricExtraColors.scss +++ /dev/null @@ -1,2 +0,0 @@ -$ms-color-neutralQuaternary: #d0d0d0; -$ms-color-neutralQuaternaryAlt: #dadada; diff --git a/src/common/_fabricExtraIcons.scss b/src/common/_fabricExtraIcons.scss deleted file mode 100644 index 79b050863cca60..00000000000000 --- a/src/common/_fabricExtraIcons.scss +++ /dev/null @@ -1,2 +0,0 @@ -.ms-Icon--groupingAscending:before { content: '\e31d'; } -.ms-Icon--groupingDescending:before { content: '\e31e'; } \ No newline at end of file diff --git a/src/common/_semanticColorVariables.scss b/src/common/_semanticColorVariables.scss index 525b3e1c62ab98..50396aa1abc99d 100644 --- a/src/common/_semanticColorVariables.scss +++ b/src/common/_semanticColorVariables.scss @@ -1,4 +1,4 @@ -$focusedBorderColor: $ms-color-neutralSecondaryAlt; +$focusedBorderColor: $ms-color-neutralSecondary; $bodyBackgroundColor: $ms-color-white; $bodyForegroundColor: $ms-color-neutralPrimary; @@ -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/common/_themeOverrides.scss b/src/common/_themeOverrides.scss index 9407296fa8d1f9..b0a3c4fed9e9ce 100644 --- a/src/common/_themeOverrides.scss +++ b/src/common/_themeOverrides.scss @@ -16,8 +16,8 @@ $ms-color-neutralSecondary: "[theme:neutralSecondary, default: #666666]"; $ms-color-neutralSecondaryAlt: "[theme:neutralSecondaryAlt, default: #767676]"; $ms-color-neutralTertiary: "[theme:neutralTertiary, default: #a6a6a6]"; $ms-color-neutralTertiaryAlt: "[theme:neutralTertiaryAlt, default: #c8c8c8]"; -$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #dadada]"; -$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #d0d0d0]"; +$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #d0d0d0]"; +$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #dadada]"; $ms-color-neutralLight: "[theme:neutralLight, default: #eaeaea]"; $ms-color-neutralLighter: "[theme:neutralLighter, default: #f4f4f4]"; $ms-color-neutralLighterAlt: "[theme:neutralLighterAlt, default: #f8f8f8]"; diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 7dd193f79d97a2..980d626639da91 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -7,94 +7,70 @@ // -------------------------------------------------- // Breadcrumb styles +$Breadcrumb-overflowButtonColor: $ms-color-themePrimary; +$Breadcrumb-overflowButtonSize: 16px; +$Breadcrumb-buttonHoverColor: $ms-color-themeDark; +$Breadcrumb-itemMaxWidth: 160px; +$Breadcrumb-itemMaxWidth-sm: 116px; .ms-Breadcrumb { - margin: 23px 0 1px 0; + @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-l; + font-size: $ms-font-size-s; color: $ms-color-neutralSecondary; vertical-align: top; - margin: 10px 0; + margin: 11px 7px; } -.ms-Breadcrumb-list { - display: inline; - white-space: nowrap; - padding: 0; +.ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; margin: 0; + padding: 0; + display: inline-block; + position: relative; - .ms-Breadcrumb-listItem { - list-style-type: none; - vertical-align: top; - margin: 0; - padding: 0; - display: inline-block; - - &:last-of-type { - .ms-Breadcrumb-chevron { - display: none; - } + &:last-of-type { + .ms-Breadcrumb-chevron { + display: none; } } + + .ms-Breadcrumb-itemLink { + @include focus-border; + @include ms-font-xl; + color: $ms-color-neutralPrimary; + display: inline-block; + padding: 0 4px; + max-width: $Breadcrumb-itemMaxWidth; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; + } } .ms-Breadcrumb-overflow { display: inline-block; position: relative; - - .ms-Breadcrumb-overflowButton { - font-size: $ms-font-size-s; - display: inline-block; - color:$ms-color-themePrimary; - padding: 12px 8px 3px 8px; - cursor: pointer; - } } -.ms-Breadcrumb-overflowMenu { - display: none; - position: absolute; - - &.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: white; - } - - .ms-ContextualMenu { - border: none; - box-shadow: none; - 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, @@ -103,69 +79,52 @@ outline: transparent; &:hover { - background-color: $ms-color-neutralLighter; - color: $ms-color-themeDark; + background-color: $selectedHoverBackgroundColor; + color: $Breadcrumb-buttonHoverColor; cursor: pointer; } &:focus { outline: $ms-color-neutralSecondaryAlt solid 1px; - color: $ms-color-black; + color: $ms-color-neutralDark; } &:active { outline: transparent; - background-color: $ms-color-neutralTertiaryAlt; + background-color: $selectedActiveBackgroundColor; + color: $selectedActiveForegroundColor; } } -.ms-Breadcrumb-itemLink { - @include focus-border(); - @include ms-font-xl(); - display: inline-block; - padding: 0 4px; - max-width: 160px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - @media screen and (max-width: $ms-screen-md-max) { - .ms-Breadcrumb { - margin: 10px 0; - } + margin: 11px 0 1px; - .ms-Breadcrumb-itemLink { + .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { font-size: $ms-font-size-l; } .ms-Breadcrumb-chevron { - font-size: $ms-font-size-m; - margin-top: 7px; + font-size: $ms-font-size-mi; + margin: 8px 5px; } - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - padding-top: 8px; - padding-bottom: 3px; - } + .ms-Breadcrumb-overflowButton { + font-size: $ms-font-size-m-plus; + padding: 5px 4px; } } @media screen and (max-width: $ms-screen-sm-max) { - .ms-Breadcrumb-itemLink { + .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { font-size: $ms-font-size-m; - max-width: 116px; + max-width: $Breadcrumb-itemMaxWidth-sm; } .ms-Breadcrumb-chevron { - margin-top: 4px; + margin: 5px 4px; } - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - padding-top: 5px; - padding-bottom: 3px; - } + .ms-Breadcrumb-overflowButton { + padding: 2px 4px; } } diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index 1dbe8a95c841ba..a9b55be54209c8 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -71,13 +71,13 @@ export class Breadcrumb extends BaseComponent { renderedOverflowItems && renderedOverflowItems.length ? (
  • -
    - +
    • ) : (null) } { renderedItems.map( @@ -89,7 +89,7 @@ export class Breadcrumb extends BaseComponent { item.text } - + )) } diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index cfc0a8ab88c1c0..294a7cfdfebbfb 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -8,10 +8,12 @@ // Button styles + .ms-Button { @include focus-border(); @include ms-font-m; @include ms-u-normalize; + color: $ms-color-neutralPrimary; background-color: $ms-color-neutralLighter; border: 1px solid $ms-color-neutralLighter; cursor: pointer; @@ -23,11 +25,20 @@ &: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 { @@ -66,14 +77,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; } @@ -92,7 +98,6 @@ } } - //== Modifier: Primary action button // .ms-Button.ms-Button--primary { @@ -143,44 +148,29 @@ // .ms-Button.ms-Button--hero { background-color: transparent; - border: none; - vertical-align: top; - line-height: normal; + border: 0; + height: auto; .ms-Button-icon { color: $ms-color-themePrimary; display: inline-block; - font-size: $ms-font-size-s; - position: relative; - top: -8px; - text-align: center; - - .ms-Icon { - border-radius: 18px; - border: 1px solid $ms-color-themePrimary; - height: 18px; - line-height: 18px; - width: 18px; - font-size: $ms-font-size-s; - margin: 0; - } + @include margin-right(8px); + padding-top: 5px; + font-size: $ms-icon-size-l; + line-height: 1; // FireFox vertical offset } .ms-Button-label { color: $ms-color-themePrimary; - font-family: $ms-font-family-light; font-size: $ms-font-size-xl; - position: relative; - top: -5px; - text-decoration: none; + font-weight: $ms-font-weight-light; + vertical-align: top; } &:hover, &:focus { .ms-Button-icon { - .ms-Icon { - color: $ms-color-themeDark; - } + color: $ms-color-themeDark; } .ms-Button-label { @@ -190,9 +180,7 @@ &:active { .ms-Button-icon { - .ms-Icon { - color: $ms-color-themePrimary; - } + color: $ms-color-themePrimary; } .ms-Button-label { @@ -203,9 +191,7 @@ &:disabled, &.is-disabled { .ms-Button-icon { - .ms-Icon { - color: $ms-color-neutralTertiaryAlt; - } + color: $ms-color-neutralTertiaryAlt; } .ms-Button-label { @@ -218,16 +204,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 { @include text-align(left); display: block; - font-family: $ms-font-family-semibold; - position: relative; color: $ms-color-black; margin-top: -5px; } @@ -236,7 +221,6 @@ @include text-align(left); color: $ms-color-neutralSecondary; display: block; - font-family: $ms-font-family-regular; font-size: $ms-font-size-s; position: relative; top: 3px; @@ -290,33 +274,33 @@ } } - //== Modifier: Command button // .ms-Button.ms-Button--command { @include text-align(left); background-color: transparent; border: none; - height: 32px; - line-height: 32px; + height: 40px; min-width: 0; padding: 0 8px; - font-size: $ms-font-size-m; .ms-Button-label { - color: $ms-color-themePrimary; + color: $ms-color-neutralPrimary; } .ms-Button-icon { + vertical-align: top; + margin-top: 2px; @include text-align(left); color: $ms-color-themePrimary; display: inline-block; - margin-right: 4px; + @include margin-right(8px); position: relative; + font-size: $ms-icon-size-m; } .ms-Button-label { - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; } &:hover, @@ -346,14 +330,6 @@ } } -// Add space between adjacent command buttons. -.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { - @include margin-left(14px); -} - - -// TODO: Overrides that need to be removed. - .ms-Button--icon { @include focus-border(0px); background-color: transparent; @@ -366,8 +342,6 @@ &:hover, &:active { background-color: transparent; - border-color: transparent; - outline-color: transparent; color: $ms-color-neutralPrimary; } @@ -376,7 +350,7 @@ } .ms-Icon { - font-size: 16px; + font-size: $ms-icon-size-m; padding: 8px; } @@ -384,7 +358,8 @@ display: inline; } - &.is-disabled, &:disabled { + &.is-disabled, + &:disabled { color: $ms-color-neutralTertiaryAlt; background-color: transparent; } @@ -415,6 +390,11 @@ @include margin-left(6px); } +// Add space between adjacent command buttons. +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + @include margin-left(14px); +} + // Overide text underline for anchor type button a.ms-Button { text-decoration: none; diff --git a/src/components/Callout/Callout.scss b/src/components/Callout/Callout.scss index 99352cbf421a7b..a97fe707774b8d 100644 --- a/src/components/Callout/Callout.scss +++ b/src/components/Callout/Callout.scss @@ -7,123 +7,27 @@ // -------------------------------------------------- // Callout styles +$Callout-OOBE-title-bg: $ms-color-themePrimary; +$Callout-beak-slant-width: 28px; .ms-Callout { + @include ms-baseFont; + @include drop-shadow(0,0, 15px, -5px); + position: absolute; + display: inline-block; + border: 1px solid $ms-color-neutralLight; z-index: $ms-zIndex-Callout; - margin: 16px auto; - position: relative; - 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; + @media screen and (-ms-high-contrast: active) { + border: 1px solid $ms-color-white; } - - &: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; + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; } } - -//= 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; - } -} - -.ms-Callout.ms-Callout--arrowBottom { - &:before, - &:after { - @include arrowBorders(transparent, transparent, $ms-color-white, $ms-color-white); - bottom: -10px; - } -} - -// 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-container { + position: relative; } // The actual callout element @@ -131,25 +35,7 @@ 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-close { - margin: 0; - border: 0; - background: none; - cursor: pointer; - position: absolute; - top: 12px; - right: 12px; - padding: 8px; - width: 32px; - height: 32px; - font-size: $ms-font-size-m; - color: $ms-color-neutralSecondary; - z-index: ($ms-zIndex-Callout + $ms-zIndex-front); } .ms-Callout-inner { @@ -164,20 +50,21 @@ .ms-Callout-title { margin: 0; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-xl; + @include ms-font-xl; + color: $ms-color-neutralPrimary; + font-weight: $ms-font-weight-semilight; } .ms-Callout-subText { margin: 0; - font-family: $ms-font-family-semilight; + @include ms-font-s; color: $ms-color-neutralPrimary; - font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; } .ms-Callout-link { - font-size: $ms-font-size-m; - font-family: $ms-font-family-semilight; + @include ms-font-m; + color: $ms-color-neutralPrimary; } .ms-Callout-actions { @@ -188,15 +75,15 @@ .ms-Link.ms-Link--hero { position: relative; - left: -8px; // Move link inline with body text + @include left(-8px); // Move link inline with body text } } .ms-Callout-action { position: relative; top: 4px; - left: -8px; - margin-left: 0 !important; + @include left(-8px); + @include margin-left(0); &:hover .ms-Callout-actionIcon, &:focus .ms-Callout-actionIcon { @@ -205,19 +92,17 @@ } .ms-Callout-button { - margin-right: 12px; + @include margin-right(12px); } - //= Modifier: Close button callout // .ms-Callout.ms-Callout--close { .ms-Callout-title { - margin-right: 20px; // Avoid overlap with close button + @include margin-right(20px); // Avoid overlap with close button } } - //= Modifier: OOBE (Out of box experience) callout // .ms-Callout.ms-Callout--OOBE { @@ -226,19 +111,18 @@ &.ms-Callout--arrowTop { &:before, &:after { - border-color: $ms-color-themePrimary; + border-color: $Callout-OOBE-title-bg; background-color: transparent; } } .ms-Callout-header { padding: 28px 24px; - background-color: $ms-color-themePrimary; + background-color: $Callout-OOBE-title-bg; } .ms-Callout-title { - font-family: $ms-font-family-light; - font-size: $ms-font-size-xxl; + @include ms-font-xxl; color: $ms-color-white; } @@ -251,7 +135,6 @@ } } - //= Modifier: ActionText callout // .ms-Callout.ms-Callout--actionText { @@ -261,7 +144,6 @@ } } - //= Modifier: Peek callout // .ms-Callout.ms-Callout--peek { @@ -269,8 +151,8 @@ &.ms-Callout--arrowBottom { &:before, &:after { - left: 40px; - right: auto; + @include left(40px); + @include right(auto); } } @@ -278,7 +160,7 @@ &.ms-Callout--arrowLeft { &:before, &:after { - top: calc('50% - 10px'); + top: calc(50% - 10px); } } @@ -296,82 +178,10 @@ } } -@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 - -// slideRightIn20 -@mixin ms-u-slideRightIn20 { - @include animationMix((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); -} - -.ms-u-slideRightIn20 { - @include ms-u-slideRightIn20; -} -@-webkit-keyframes slideRightIn20 { - from { -webkit-transform:translate3d(-20px, 0px, 0px); } - to { -webkit-transform:translate3d(0px, 0px, 0px); } -} -@keyframes slideRightIn20 { - from { transform:translate3d(-20px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} - -// slideLeftIn20 -@mixin ms-u-slideLeftIn20 { - @include animationMix((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); -} - -.ms-u-slideLeftIn20 { - @include ms-u-slideLeftIn20; -} -@-webkit-keyframes slideLeftIn20 { - from { -webkit-transform:translate3d(20px, 0px, 0px); } - to { -webkit-transform:translate3d(0px, 0px, 0px); } -} -@keyframes slideLeftIn20 { - from { transform:translate3d(20px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} - -.ms-Callout-container { - position: relative; -} - -.ms-Callout { - @include ms-font-m; - @include ms-u-normalize; - @include drop-shadow(0,0, 15px, -5px); - width: auto; - border: 1px solid $ms-color-neutralLight; - position: absolute; - display: inline-block; -} - -// Disabled default box shadow. -.ms-Callout-main { - box-shadow: none; -} - .ms-Callout-beak { position: absolute; - width: 28px; - height: 28px; + width: $Callout-beak-slant-width; + height: $Callout-beak-slant-width; background-color: $ms-color-white; box-shadow: inherit; border: inherit; @@ -387,8 +197,3 @@ width: 16px; height: 16px; } - -.ExampleCard-example > .ms-Callout-container > .ms-Callout { - position: relative; -} - diff --git a/src/components/Check/Check.scss b/src/components/Check/Check.scss index 63b54031271568..b84c48583025e3 100644 --- a/src/components/Check/Check.scss +++ b/src/components/Check/Check.scss @@ -1,32 +1,66 @@ @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 +// -------------------------------------------------- +// Check styles + +$checkBoxHeight: 20px; + .ms-Check { display: inline-block; cursor: default; - line-height: 0; vertical-align: top; + width: $checkBoxHeight; + height: $checkBoxHeight; + text-align: center; &.is-checked { - - .ms-Check-circle { - fill: $ms-color-themePrimary; - stroke: $ms-color-white; - stroke-width: 1px; + .ms-Check-background { + &:before { + background: $ms-color-themePrimary; + border: 1px solid $ms-color-white; + } } .ms-Check-check { - stroke: $ms-color-white; + opacity: 1; + color: $ms-color-white; } } -} -.ms-Check-circle { - fill: $ms-color-white; - stroke: $ms-color-neutralTertiaryAlt; + &:hover { + .ms-Check-check { + opacity: 1; + } + } } .ms-Check-check { - stroke: $ms-color-neutralTertiaryAlt; + left: 0; + right: 0; + position: absolute; + line-height: $checkBoxHeight; + color: $ms-color-neutralTertiaryAlt; + opacity: 0; } - +.ms-Check-background { + &:before { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: inline-block; + margin: auto; + height: $checkBoxHeight - 2px; + width: $checkBoxHeight - 2px; + background: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + border-radius: 50%; + content: ' '; + } +} \ No newline at end of file diff --git a/src/components/Check/Check.tsx b/src/components/Check/Check.tsx index 747cda1b348738..74c3f3b4636f62 100644 --- a/src/components/Check/Check.tsx +++ b/src/components/Check/Check.tsx @@ -19,17 +19,13 @@ export class Check extends React.Component { let { isChecked } = this.props; return ( - - - - + }) }> +
    +
    + + ); } } diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss index 430baebfa7ce08..fba42629f0a2e1 100644 --- a/src/components/Checkbox/Checkbox.scss +++ b/src/components/Checkbox/Checkbox.scss @@ -5,112 +5,125 @@ // // Office UI Fabric // -------------------------------------------------- -// Choice fields (radio buttons and checkboxes) styles +// Checkbox styles -// Unselected, radio button (default) -.ms-ChoiceField { - @include ms-font-m; - @include ms-u-normalize; +$ms-checkbox-label-size: 20px; +$ms-checkbox-transition-duration: 200ms; +$ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1); +$ms-checkbox-highContrast-iconBoxSize: 16px; + +@mixin highContrast-border($active-color, $bw-color, $size: 2px) { + @media screen and (-ms-high-contrast: active) { + border: $size solid $active-color; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: $size solid $bw-color; + } +} + +@mixin highContrast-color($active-color, $bw-color) { + @media screen and (-ms-high-contrast: active) { + color: $active-color; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $bw-color; + } +} + +.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; + @include padding(0, 0, 0, 26px); + display: inline-block; } } -//== State: Disabled choicefield -.ms-ChoiceField-input:disabled { - + .ms-ChoiceField-field { - pointer-events: none; - cursor: default; - - &:before { - background-color: $ms-color-neutralTertiaryAlt; - color: $ms-color-neutralTertiaryAlt; - } - - &:after { - border-color: $ms-color-neutralLight; - } +// The hidden input +.ms-Checkbox-input { + position: absolute; + opacity: 0; + top: 8px +} - .ms-Label { - color: $ms-color-neutralTertiary; - } +// The checkbox square container +.ms-Checkbox-label::before { + content: ''; + display: inline-block; + border: 2px solid $ms-color-neutralTertiary; + width: $ms-checkbox-label-size; + height: $ms-checkbox-label-size; + 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; +} - @media screen and (-ms-high-contrast: active) { - &:before { - background-color: $ms-color-contrastBlackDisabled; - color: $ms-color-contrastBlackDisabled; - } +// The check mark icon +.ms-Checkbox-label::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-label-size; + width: $ms-checkbox-label-size; + text-align: center; +} - &:after { - border-color: $ms-color-contrastBlackDisabled; - } +// The checkbox label +.ms-Checkbox-label { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + vertical-align: top; + user-select: none; + min-width: $ms-checkbox-label-size; + min-height: $ms-checkbox-label-size; + line-height: $ms-checkbox-label-size; - .ms-Label { - color: $ms-color-contrastBlackDisabled; - } + &:hover { + &::before { + border-color: $ms-color-neutralSecondaryAlt; } - @media screen and (-ms-high-contrast: black-on-white) { - &:before { - background-color: $ms-color-contrastWhiteDisabled; - color: $ms-color-contrastWhiteDisabled; - } - - &:after { - border-color: $ms-color-contrastWhiteDisabled; - } - - .ms-Label { - color: $ms-color-contrastWhiteDisabled; - } + .ms-Label { + color: $ms-color-black; } } -} -// The original unstyled input element -.ms-ChoiceField-input { - position: absolute; - opacity: 0; - top: 8px; - - &:focus:not(:disabled) { - + .ms-ChoiceField-field:after { + &:focus { + &::before { border-color: $ms-color-neutralSecondaryAlt; } - } -} -// The choicefield radio button or checkbox -.ms-ChoiceField-field { - display: inline-block; - cursor: pointer; - margin-top: 8px; - position: relative; - min-width: 19px; - min-height: 19px; + &.is-disabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } - // The actual styled choicefield element - radio button by default - &:after { - content: ''; - display: inline-block; - border: 1px $ms-color-neutralTertiaryAlt solid; - width: 19px; - height: 19px; - cursor: pointer; - position: relative; - font-weight: normal; - left: -1px; - top: -1px; - border-radius: 50%; - position: absolute; + &.is-checked::before { + border-color: $ms-color-themeDarkAlt; + } } - &:hover { - &:after { + &:active { + &::before { border-color: $ms-color-neutralSecondaryAlt; } @@ -118,88 +131,95 @@ color: $ms-color-black; } } -} -// A selected radio button -.ms-ChoiceField-input:checked { - + .ms-ChoiceField-field { - // Circle indicating a checked radio button - &:before { - background-color: $ms-color-neutralSecondary; - border-color: $ms-color-neutralSecondary; - color: $ms-color-neutralSecondary; - border-radius: 50%; - content: '\00a0'; - display: inline-block; - position: absolute; - top: 4px; - bottom: 0; - left: 4px; - width: 11px; - height: 11px; - box-sizing: border-box; - - @media screen and (-ms-high-contrast: active) { - border-color: $ms-color-white; - background-color: $ms-color-white; + //== State: A checkbox is checked + // + &.is-checked { + &::before { + border: 10px solid $ms-color-themePrimary; + background-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) { + display: none; } + } + + &::after { + display: block; - @media screen and (-ms-high-contrast: black-on-white) { - border-color: $ms-color-black; - background-color: $ms-color-black; + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) { + height: $ms-checkbox-highContrast-iconBoxSize; + width: $ms-checkbox-highContrast-iconBoxSize; + line-height: $ms-checkbox-highContrast-iconBoxSize; } + + @include highContrast-border($ms-color-white, $ms-color-black); } - &:hover:before { - background-color: $ms-color-neutralDark; - color: $ms-color-neutralDark; + &:hover, + &:focus { + &::before { + border-color: $ms-color-themeDarkAlt; + } } } -} -// Checkbox -.ms-ChoiceField-input[type="checkbox"] { - + .ms-ChoiceField-field:after { - border-radius: 0; - } -} + //== State: A disabled checkbox + // + &.is-disabled { + cursor: default; -// A selected checkbox -.ms-ChoiceField-input[type="checkbox"]:checked { - + .ms-ChoiceField-field { - &:before { - @include ms-Icon; - content: '\e041'; - background-color: transparent; - border-radius: 0; - font-size: $ms-font-size-s-plus; - top: 3px; - left: 3px; - - @media screen and (-ms-high-contrast: active) { - color: $ms-color-white; - border-color: transparent; - background-color: transparent; + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralTertiaryAlt; } + } - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-black; - border-color: transparent; - background-color: transparent; - } + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + } + + &::after { + @include highContrast-border($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); + @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); + } + + .ms-Label { + color: $ms-color-neutralTertiary; + + @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled); } } -} + //== State: A checkbox in focus + // + &.is-inFocus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } -//== Component: Choicefield group -// -// Choice field groups contain multiple radio buttons or checkboxes -.ms-ChoiceFieldGroup { - margin-bottom: 4px; + &.is-disabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } + + &.is-checked::before { + border-color: $ms-color-themeDarkAlt; + } + } } -// TODO: overrides that need to be removed. -.ms-ChoiceField { - user-select: none; -} \ No newline at end of file +.is-focusVisible .ms-Checkbox.is-inFocus { + &::before { + content: ''; + position: absolute; + top: 0px; + bottom: 0px; + @include right(0px); + @include left(-8px); + border: 1px solid $focusedBorderColor; + @include highContrast-border($ms-color-white, $ms-color-black, 1px); + } +} diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 4e5b327d74cfa4..b201e725b24c18 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { BaseComponent } from '../../common/BaseComponent'; import { ICheckbox, ICheckboxProps @@ -8,7 +9,15 @@ import { css } from '../../utilities/css'; import { getId } from '../../utilities/object'; import './Checkbox.scss'; -export class Checkbox extends React.Component implements ICheckbox { +export interface ICheckboxState { + /** Is true when the control has focus. */ + isFocused?: boolean; + + /** Is true when Uncontrolled control is checked. */ + isChecked?: boolean; +} + +export class Checkbox extends BaseComponent implements ICheckbox { public static defaultProps: ICheckboxProps = { }; @@ -19,6 +28,10 @@ export class Checkbox extends React.Component implements ICh super(props); this._id = getId('checkbox-'); + this.state = { + isFocused: false, + isChecked: props.defaultChecked || false + }; } public render() { @@ -31,23 +44,34 @@ export class Checkbox extends React.Component implements ICh label } = this.props; + const { isFocused, isChecked } = this.state; + return ( -
    +
    this._checkBox = el } + ref={ this._resolveRef('_checkBox') } id={ this._id } name={ this._id } - className='ms-ChoiceField-input' + className='ms-Checkbox-input' type='checkbox' - role='checkbox' onChange={ this._onChange } + onFocus={ this._onFocus } + onBlur={ this._onBlur } aria-checked={ checked } /> -
    @@ -64,6 +88,16 @@ export class Checkbox extends React.Component implements ICh } } + @autobind + private _onFocus(ev: React.FocusEvent): void { + this.setState({ isFocused: true }); + } + + @autobind + private _onBlur(ev: React.FocusEvent): void { + this.setState({ isFocused: false }); + } + @autobind private _onChange(ev: React.FormEvent) { const { onChange } = this.props; @@ -72,5 +106,9 @@ export class Checkbox extends React.Component implements ICh if (onChange) { onChange(ev, isChecked); } + + if (this.props.checked === undefined) { + this.setState({ isChecked: isChecked }); + } } } diff --git a/src/components/ChoiceGroup/ChoiceGroup.scss b/src/components/ChoiceGroup/ChoiceGroup.scss index f92589521b42f6..d2bf752f4c20a9 100644 --- a/src/components/ChoiceGroup/ChoiceGroup.scss +++ b/src/components/ChoiceGroup/ChoiceGroup.scss @@ -3,113 +3,128 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. // -// Office UI Fabric // -------------------------------------------------- -// Choice fields (radio buttons and checkboxes) styles +// ChoiceField styles +$ms-choiceField-field-size: 20px; +$ms-choiceField-transition-duration: 200ms; +$ms-choiceField-transition-duration-inner: 150ms; +$ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1); + +//== Component: Choicefield group +// + +.ms-ChoiceFieldGroup { + @include ms-baseFont; + margin-bottom: 4px; + + .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; + } +} -// Unselected, radio button (default) .ms-ChoiceField { - @include ms-font-m; - @include ms-u-normalize; + 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; + border: 1px solid transparent; position: relative; + line-height: $ms-choiceField-field-size; + @include padding-left(8px); .ms-Label { font-size: $ms-font-size-m; - padding: 0 0 0 26px; + @include padding(0, 0, 0, 26px); + display: inline-block; } } -//== State: Disabled choicefield -.ms-ChoiceField-input:disabled { - + .ms-ChoiceField-field { - pointer-events: none; - cursor: default; - - &:before { - background-color: $ms-color-neutralTertiaryAlt; - color: $ms-color-neutralTertiaryAlt; - } - - &:after { - border-color: $ms-color-neutralLight; - } - - .ms-Label { - color: $ms-color-neutralTertiary; - } - - @media screen and (-ms-high-contrast: active) { - &:before { - background-color: $ms-color-contrastBlackDisabled; - color: $ms-color-contrastBlackDisabled; - } - - &:after { - border-color: $ms-color-contrastBlackDisabled; - } - - .ms-Label { - color: $ms-color-contrastBlackDisabled; - } - } - - @media screen and (-ms-high-contrast: black-on-white) { - &:before { - background-color: $ms-color-contrastWhiteDisabled; - color: $ms-color-contrastWhiteDisabled; - } - - &:after { - border-color: $ms-color-contrastWhiteDisabled; - } +// The hidden input +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px +} - .ms-Label { - color: $ms-color-contrastWhiteDisabled; - } - } - } +// The choiceField container +.ms-ChoiceField-field::before { + content: ''; + display: inline-block; + border: 2px solid $ms-color-neutralTertiary; + width: $ms-choiceField-field-size; + height: $ms-choiceField-field-size; + font-weight: normal; + position: absolute; + box-sizing: border-box; + transition-property: background, border, border-color; + transition-duration: $ms-choiceField-transition-duration; + transition-timing-function: $ms-choiceField-transition-timing; + border-radius: 50%; } -// The original unstyled input element -.ms-ChoiceField-input { +// The circle +.ms-ChoiceField-field::after { + content: ''; + width: 0; + height: 0; + border-radius: 50%; position: absolute; - opacity: 0; - top: 8px; + top: $ms-choiceField-field-size / 2; + @include left($ms-choiceField-field-size / 2); + bottom: 0; + @include right(0); + transition-property: top, left, right, width, height; + transition-duration: $ms-choiceField-transition-duration-inner; + transition-timing-function: $ms-choiceField-transition-timing; + box-sizing: border-box; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } - &:focus:not(:disabled) { - + .ms-ChoiceField-field:after { - border-color: $ms-color-neutralSecondaryAlt; - } + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; } } -// The choicefield radio button or checkbox +// The choiceField field .ms-ChoiceField-field { display: inline-block; cursor: pointer; margin-top: 8px; position: relative; + vertical-align: top; + user-select: none; - // The actual styled choicefield element - radio button by default - &:after { - content: ''; - display: inline-block; - border: 1px $ms-color-neutralTertiaryAlt solid; - width: 19px; - height: 19px; - cursor: pointer; - position: relative; - font-weight: normal; - left: -1px; - top: -1px; - border-radius: 50%; - position: absolute; + &:hover { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } } - &:hover { - &:after { + &:focus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } + + &.is-disabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } + + &.is-checked::before { + border-color: $ms-color-themeDarkAlt; + } + } + &:active { + &::before { border-color: $ms-color-neutralSecondaryAlt; } @@ -117,88 +132,102 @@ color: $ms-color-black; } } -} -// A selected radio button -.ms-ChoiceField-input:checked { - + .ms-ChoiceField-field { - // Circle indicating a checked radio button - &:before { - background-color: $ms-color-neutralSecondary; - border-color: $ms-color-neutralSecondary; - color: $ms-color-neutralSecondary; - border-radius: 50%; - content: '\00a0'; - display: inline-block; - position: absolute; - top: 4px; - bottom: 0; - left: 4px; - width: 11px; - height: 11px; - box-sizing: border-box; + //== State: A choiceField is checked + // + &.is-checked { + &::before { + border: 2px solid $ms-color-themePrimary; + background-color: transparent; @media screen and (-ms-high-contrast: active) { - border-color: $ms-color-white; - background-color: $ms-color-white; + border-color: $ms-color-contrastBlackSelected; } @media screen and (-ms-high-contrast: black-on-white) { - border-color: $ms-color-black; - background-color: $ms-color-black; + border-color: $ms-color-contrastWhiteSelected; } } - &:hover:before { - background-color: $ms-color-neutralDark; - color: $ms-color-neutralDark; + &::after { + background-color: $ms-color-themePrimary; + top: 5px; + @include left(5px); + width: 10px; + height: 10px; + + @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; + } } - } -} -// Checkbox -.ms-ChoiceField-input[type="checkbox"] { - + .ms-ChoiceField-field:after { - border-radius: 0; + &:hover, + &:focus { + &::before { + border-color: $ms-color-themeDarkAlt; + } + } } -} -// A selected checkbox -.ms-ChoiceField-input[type="checkbox"]:checked { - + .ms-ChoiceField-field { - &:before { - @include ms-Icon; - content: '\e041'; - background-color: transparent; - border-radius: 0; - font-size: $ms-font-size-s-plus; - top: 3px; - left: 3px; + //== State: A disabled choiceField + // + &.is-disabled { + cursor: default; + + &:hover, + &:focus { + &::before { + border-color: $ms-color-neutralTertiaryAlt; + } + } + + &::before { + background-color: $ms-color-neutralTertiaryAlt; + border-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; @media screen and (-ms-high-contrast: active) { - color: $ms-color-white; - border-color: transparent; - background-color: transparent; + border-color: $ms-color-contrastBlackDisabled; } @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-black; - border-color: transparent; - background-color: transparent; + 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 choiceField in focus + // + &.is-inFocus { + &::before { + border-color: $ms-color-neutralSecondaryAlt; + } -//== Component: Choicefield group -// -// Choice field groups contain multiple radio buttons or checkboxes -.ms-ChoiceFieldGroup { - margin-bottom: 4px; -} + &.is-disabled::before { + border-color: $ms-color-neutralTertiaryAlt; + } -// TODO: overrides that need to be removed. + &.is-checked::before { + border-color: $ms-color-themeDarkAlt; + } + } +} .ms-ChoiceField--image { $fieldMinWidth: 164px; @@ -209,6 +238,7 @@ font-size: 0; @include margin-right(6px); + @include padding-left(0px); @include ms-bgColor-neutralLighter; .ms-ChoiceField-field--image { @@ -216,23 +246,20 @@ box-sizing: border-box; min-width: $fieldMinWidth; - cursor: pointer; padding: $fieldPadding $fieldPadding 12px $fieldPadding; - text-align: center; - - transition: all 200ms ease; + transition: all $ms-choiceField-transition-duration ease; .ms-ChoiceField-innerField { position: relative; .ms-ChoiceField-imageWrapper { - transition: opacity 200ms ease; + transition: opacity $ms-choiceField-transition-duration ease; &.is-hidden { position: absolute; - left: 0; + @include left(0); top: 0; width: 100%; height: 100%; @@ -255,7 +282,7 @@ .ms-ChoiceField-icon { display: none; position: absolute; - left: 0; + @include left(0); line-height: $ms-font-size-s; @include ms-fontSize-l; @@ -271,27 +298,17 @@ @include ms-fontColor-neutralPrimary; } } - } - - .ms-ChoiceField-input:checked { - & + .ms-ChoiceField-field--image .ms-ChoiceField-labelWrapper .ms-ChoiceField-icon { - display: inline-block; - } - & + .ms-ChoiceField-field--image { + &.is-checked { @include ms-bgColor-themeLighter; + + .ms-ChoiceField-labelWrapper .ms-ChoiceField-icon { + display: inline-block; + } } } } -.is-focusVisible .ms-ChoiceField-input:focus + .ms-ChoiceField-field--image:before { - position: absolute; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - +.is-focusVisible .ms-ChoiceField.is-inFocus { border: 1px solid $ms-color-neutralPrimary; - - content: ''; } diff --git a/src/components/ChoiceGroup/ChoiceGroup.tsx b/src/components/ChoiceGroup/ChoiceGroup.tsx index c39f9f541e2615..7173e9a8c6d229 100644 --- a/src/components/ChoiceGroup/ChoiceGroup.tsx +++ b/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -7,6 +7,9 @@ import './ChoiceGroup.scss'; export interface IChoiceGroupState { keyChecked: string; + + /** Is true when the control has focus. */ + keyFocused?: string; } export class ChoiceGroup extends React.Component { @@ -22,7 +25,8 @@ export class ChoiceGroup extends React.Component -
    +
    { this.props.label ? : null }
    - { options.map(option => ( + { options.map((option) => (
    this._inputElement = c } @@ -69,8 +81,9 @@ export class ChoiceGroup extends React.Component { this._renderField(option) } @@ -82,9 +95,23 @@ export class ChoiceGroup extends React.Component { option.imageSrc @@ -118,7 +150,7 @@ export class ChoiceGroup extends React.Component - + { option.text }
    : { option.text } diff --git a/src/components/CommandBar/CommandBar.scss b/src/components/CommandBar/CommandBar.scss index afafcab9073ea2..20464ae3a45b9e 100644 --- a/src/components/CommandBar/CommandBar.scss +++ b/src/components/CommandBar/CommandBar.scss @@ -1,18 +1,14 @@ @import '../../common/common'; -.ms-CommandBarItem-icon, -.ms-CommandBarItem-overflow - { - padding: 0 2px; - min-width: 17px; -} - // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. // // Office UI Fabric // -------------------------------------------------- // Command Bar styles +// +// Using Padding instead of Margin for ms-CommandBarItem so that width to +// calculate overFlow items is calculated correctly. $CommandBar-height: 40px; $CommandBar-mobileHeight: 48px; @@ -27,19 +23,18 @@ $CommandBar-sideAreaWidthxlg: 345px; $CommandBarItem-height: $CommandBar-height; $CommandBarItem-marginTop: 13px; $CommandBarItem-textHeight: 16px; -$CommandBarItem-iconWidth: 16px; +$CommandBarItem-fontSize: 16px; +$CommandBarItem-chevronDown-fontSize: 12px; +$CommandBarItem-overflow-fontSize: 18px; $CommandBarItem-iconLabelMargin: 8px; $CommandBarItem-flippedLineHeight: 32px; - $SearchBox-height: 40px; $SearchBox-widthLgCollapsed: 50px; $SearchBox-widthMdDownCollapsed: 36px; $SearchBox-widthXLarge: 208px; -$SearchBox-iconSize: 17px; +$SearchBox-iconSize: 16px; $SearchBox-sidePadding: 8px; // padding in input on left and right sides without icons -$SearchBox-smallWidth: 36px; -$SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePadding * 2); @mixin highContrastBorder($color) { @include border-left(1px, solid, $color); @@ -48,12 +43,12 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBar { @include ms-font-m; + color: $ms-color-neutralPrimary; position: relative; - background-color: $ms-color-themeLighterAlt; + background-color: $ms-color-neutralLighter; height: $CommandBar-height; white-space: nowrap; - user-select: none; } @@ -63,14 +58,14 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi display: inline; vertical-align: top; line-height: $CommandBar-height; - margin: 0 24px; + margin: 0 20px; } .ms-CommandBar-sideCommands { position: absolute; @include right(0px); @include text-align(right); - @include padding-right(24px); + @include padding-right(20px); } // Command Bar Item @@ -80,7 +75,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi height: $CommandBarItem-height; outline: transparent; vertical-align: top; - margin: 0 2px; + padding: 0 4px; @media screen and (-ms-high-contrast: active) { @include highContrastBorder($ms-color-black); @@ -97,31 +92,29 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBarItem-chevronDown, .ms-CommandBarItem-commandText { - display: inline; - padding: 0 2px; -} - -.ms-CommandBarItem-overflow { - font-size: $ms-font-size-m; - color: $ms-color-neutralSecondary; + display: inline-block; + padding: 0 4px; + vertical-align: top; } @mixin CommandBarItem-text { @include focus-border(2px); - - font-family: inherit; - font-size: inherit; + @include ms-font-m; + color: $ms-color-neutralPrimary; position: relative; background: none; border: none; - line-height: $CommandBarItem-height - 1; - height: $CommandBarItem-height; + line-height: $CommandBarItem-height; min-width: 20px; text-align: center; - padding: 0 2px; + padding: 0 4px; display: block; height: 100%; + + &.ms-CommandBarItem--noName { + padding: 0 8px; + } } .ms-CommandBarItem-text { @@ -131,12 +124,9 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBarItem-link { @include CommandBarItem-text; cursor: pointer; - padding: 0 6px; &:hover, &.is-expanded { - background-color: $ms-color-themeLight; - @media screen and (-ms-high-contrast: active) { @include highContrastBorder($ms-color-white); } @@ -145,31 +135,75 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @include highContrastBorder($ms-color-black); } } + + &:hover { + color: $ms-color-neutralDark; + background-color: $ms-color-neutralLight; + + .ms-CommandBarItem-icon { + color: $ms-color-themeDark; + } + + .ms-CommandBarItem-chevronDown { + color: $ms-color-neutralPrimaryAlt; + } + + .ms-CommandBarItem-overflow { + color: $ms-color-neutralDark; + } + } + + &.is-expanded { + background-color: $ms-color-neutralQuaternaryAlt; + color: $ms-color-black; + + .ms-CommandBarItem-icon { + color: $ms-color-themeDarker; + } + + .ms-CommandBarItem-chevronDown { + color: $ms-color-neutralDark; + } + + .ms-CommandBarItem-overflow { + color: $ms-color-black; + } + } + + &.is-expanded:hover { + background-color: $ms-color-neutralQuaternary; + } } .ms-CommandBarItem-icon { - font-size: $ms-font-size-l; - color: $ms-color-themePrimary; + font-size: $CommandBarItem-fontSize; + color: $ms-color-themeDarkAlt; + padding: 0 4px; } .ms-CommandBarItem-chevronDown { - vertical-align: baseline; color: $ms-color-neutralSecondary; - font-size: 16px; - width: 16px; - padding: 0 2px; + font-size: $CommandBarItem-chevronDown-fontSize; } +.ms-CommandBarItem-overflow { + font-size: $CommandBarItem-overflow-fontSize; + color: $ms-color-neutralPrimary; + padding: 0 7px; +} + +// CommandBarSearch needs to replaced with SearchBox component, and hence following styles revisited/cleaned. .ms-CommandBarSearch { @include float(left); width: 208px; max-width: 208px; - background-color: $ms-color-themeLighter; + background-color: $ms-color-white; color: $ms-color-neutralPrimary; height: $SearchBox-height; position: relative; box-sizing: border-box; border-color: transparent; // give a base state for animation + @include border-right(1px, solid, $ms-color-neutralLight); @media screen and (-ms-high-contrast: active) { @include border-right(1px, solid, $ms-color-white); @@ -180,8 +214,17 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @include border-right(1px, solid, $ms-color-black); } + &:before { + position: absolute; + content: ' '; + right: 0; + bottom: 0; + left: 0; + margin: 0 8px; + border-bottom: 1px solid $ms-color-neutralLight; + } + &:hover { - background-color: $ms-color-themeLight; color: $ms-color-themePrimary; @media screen and (-ms-high-contrast: active) { @@ -192,12 +235,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi @include highContrastBorder($ms-color-black); } } - - .ms-Icon--search { - @include margin-left(2px); - margin-top: 12px; - vertical-align: top; - } } .ms-CommandBarSearch-input { @@ -234,7 +271,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi // default styles for icons, show the search icon and hide X (and arrow) until focused .ms-CommandBarSearch-iconSearchWrapper { display: block; - @include padding-left(15px); } .ms-CommandBarSearch-iconArrowWrapper { @@ -244,7 +280,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi .ms-CommandBarSearch-iconSearchWrapper, .ms-CommandBarSearch-iconArrowWrapper { top: 0; - @include padding-left(8px); + @include padding-left(17px); @include padding-right(8px); } @@ -255,7 +291,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi z-index: $ms-zIndex-front; } - //== State: Puts search in an active state // .ms-CommandBarSearch.is-active { @@ -299,15 +334,11 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi height: $SearchBox-height; line-height: $SearchBox-height; cursor: pointer; - padding: 0px $SearchBox-sidePadding; position: absolute; - width: $SearchBox-iconWrapperWidth; text-align: center; } - // New rules - .ms-CommandBarSearch .ms-Icon:before { font-size: $SearchBox-iconSize; color: $ms-color-themePrimary; @@ -315,9 +346,6 @@ $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 { - font-style: italic; -} +} \ No newline at end of file diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx index 6f4870ae0c59dd..b47a81bd4fce15 100644 --- a/src/components/CommandBar/CommandBar.tsx +++ b/src/components/CommandBar/CommandBar.tsx @@ -85,10 +85,10 @@ export class CommandBar extends React.Component
    - +
    - +
    ); @@ -111,7 +111,7 @@ export class CommandBar extends React.Component - +
    ] : []) } @@ -143,7 +143,7 @@ export class CommandBar extends React.Component @@ -161,7 +161,7 @@ export class CommandBar extends React.Component } { (!!item.name) && { item.name } } { (item.items && item.items.length) ? ( - + ) : ( null ) } ; } else { diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss index fd408551cca1f3..641ec962f28902 100644 --- a/src/components/ContextualMenu/ContextualMenu.scss +++ b/src/components/ContextualMenu/ContextualMenu.scss @@ -1,10 +1,10 @@ @import '../../common/common'; $ContextualMenu-background: $ms-color-white; -$ContextualMenu-itemHover: $ms-color-neutralLight; -$ContextualMenu-expandedItemBackground: $ms-color-themeLight; -$ContextualMenu-itemHeight: 40px; -$ContextualMenu-iconWidth: 24px; +$ContextualMenu-itemHover: $ms-color-neutralLighter; +$ContextualMenu-expandedItemBackground: $ms-color-neutralQuaternaryAlt; +$ContextualMenu-itemHeight: 36px; +$ContextualMenu-iconWidth: 14px; .ms-ContextualMenu { background-color: $ContextualMenu-background; @@ -22,6 +22,7 @@ $ContextualMenu-iconWidth: 24px; .ms-ContextualMenu-item { @include ms-font-m; + color: $ms-color-neutralPrimary; position: relative; box-sizing: border-box; @@ -35,20 +36,27 @@ $ContextualMenu-iconWidth: 24px; background: none; border: none; margin: 0; - padding: 0 8px; + padding: 0 4px; min-width: 100%; height: $ContextualMenu-itemHeight; line-height: $ContextualMenu-itemHeight; display: block; + cursor: pointer; @include text-align(left); &:hover:not([disabled]) { background: $ContextualMenu-itemHover; } + .is-focusVisible &:focus { + background: $ContextualMenu-itemHover; + } + &.is-expanded, &.is-expanded:hover { background: $ContextualMenu-expandedItemBackground; + color: $ms-color-black; + font-weight: $ms-font-weight-semibold; } } @@ -64,22 +72,17 @@ $ContextualMenu-iconWidth: 24px; position: relative; } -.ms-ContextualMenu-checkmark { - display: inline-block; - min-height: 1px; - width: $ContextualMenu-iconWidth; - text-align: center; -} - .ms-ContextualMenu-icon { display: inline-block; min-height: 1px; width: $ContextualMenu-iconWidth; text-align: center; + vertical-align: top; + padding: 0px 4px; } .ms-ContextualMenu-itemText { - padding: 0 4px; + @include padding(0, 12px, 0, 4px); } .ms-Icon.ms-ContextualMenu-submenuChevron { @@ -88,6 +91,6 @@ $ContextualMenu-iconWidth: 24px; line-height: $ContextualMenu-itemHeight; vertical-align: middle; @include right(8px); - width: 16px; text-align: center; + font-size: $ms-icon-size-xs; } \ No newline at end of file diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 54b91e1dcf454c..c53350ae81be81 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -260,7 +260,7 @@ export class ContextualMenu extends React.Component ) : (null) } @@ -269,7 +269,7 @@ export class ContextualMenu extends React.Component{ item.name } {(item.items && item.items.length) ? ( - + ) : (null) }
    ); diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index d22b5f59005831..52e3316ac8dda9 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -8,11 +8,11 @@ @mixin ms-DatePicker-event() { color: $ms-color-neutralSecondary; - font-size: 21px; + font-size: $ms-icon-size-l; line-height: 20px; pointer-events: none; position: absolute; - @include right(5px); + @include right(9px); z-index: $ms-zIndex-middle; } @@ -27,6 +27,10 @@ input::-ms-clear { display: none; } + + input[readonly] { + cursor: pointer; + } } } @@ -42,7 +46,7 @@ // Insert a calendar icon over the date field. .ms-DatePicker-event--with-label { @include ms-DatePicker-event(); - top: 32px; + top: 35px; } .ms-DatePicker-event--without-label { @@ -107,9 +111,8 @@ .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; + color: $ms-color-neutralPrimary; margin-top: -1px; &:hover { @@ -152,9 +155,7 @@ height: 40px; padding: 0; line-height: 40px; - font-family: $ms-font-family-regular; - font-size: 15px; - font-weight: normal; + @include ms-font-m-plus; color: $ms-color-neutralPrimary; } @@ -175,7 +176,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; } @@ -223,6 +224,7 @@ .ms-DatePicker-decadeComponents { position: absolute; @include right(10px); + top: -2px; } .ms-DatePicker-prevMonth, @@ -238,10 +240,10 @@ text-align: center; line-height: 40px; text-align: center; - font-size: 21px; + font-size: $ms-icon-size-m; color: $ms-color-neutralSecondary; position: relative; - top: 3px; + top: 2px; &:hover { color: $ms-color-neutralDark; @@ -267,9 +269,8 @@ .ms-DatePicker-currentYear, .ms-DatePicker-currentDecade { display: block; - font-weight: normal; - font-family: $ms-font-family-semilight; - font-size: 21px; + @include ms-font-xl; + color: $ms-color-neutralPrimary; height: 40px; line-height: 42px; @include margin-left(15px); @@ -305,9 +306,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 +327,8 @@ bottom: 9px; color: $ms-color-themePrimary; cursor: pointer; - font-family: $ms-font-family-semilight; - font-size: 13px; + @include ms-font-s-plus; + color: $ms-color-neutralPrimary; height: 30px; line-height: 30px; padding: 0 10px; @@ -375,8 +374,8 @@ .ms-DatePicker-weekday { width: 30px; height: 30px; - line-height: 30px; - font-family: $ms-font-family-semibold; + line-height: 28px; + font-weight: $ms-font-weight-semibold; font-size: $ms-font-size-s; } @@ -392,10 +391,10 @@ .ms-DatePicker-nextYear, .ms-DatePicker-prevDecade, .ms-DatePicker-nextDecade { - font-size: 17px; - width: 30px; - height: 30px; - line-height: 29px; + font-size: $ms-icon-size-s; + width: 24px; + height: 24px; + line-height: 24px; } .ms-DatePicker-holder { @@ -405,7 +404,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, @@ -479,7 +478,7 @@ .ms-DatePicker-yearOption { width: 40px; height: 40px; - line-height: 40px; + line-height: 38px; font-size: 12px; @include margin(0, 10px, 10px, 0); @@ -557,7 +556,6 @@ .ms-DatePicker-prevMonth, .ms-DatePicker-nextYear, .ms-DatePicker-prevYear { - float: none; display: inline-block; } diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index 000b7b52773b64..b16daba8998652 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/src/components/DatePicker/DatePicker.tsx @@ -136,7 +136,7 @@ export class DatePicker extends React.Component - + - +
    diff --git a/src/components/DatePicker/DatePickerMonth.tsx b/src/components/DatePicker/DatePickerMonth.tsx index 76198f0ab6a62b..4a09fe7e778483 100644 --- a/src/components/DatePicker/DatePickerMonth.tsx +++ b/src/components/DatePicker/DatePickerMonth.tsx @@ -41,14 +41,14 @@ export class DatePickerMonth extends React.Component onClick={ this._onSelectPrevYear } onKeyDown={ this._onKeyDown.bind(this, this._onSelectPrevYear) } tabIndex={ 0 }> - + - +
    { navigatedDate.getFullYear() }
    diff --git a/src/components/DetailsList/DetailsHeader.scss b/src/components/DetailsList/DetailsHeader.scss index d93b3a5519e5b3..1e0d9a66059913 100644 --- a/src/components/DetailsList/DetailsHeader.scss +++ b/src/components/DetailsList/DetailsHeader.scss @@ -22,12 +22,12 @@ $resizerColor: $ms-color-neutralTertiaryAlt; } } -.ms-DetailsHeader-cell.is-check .ms-Check-circle { +.ms-DetailsHeader-cell.is-check .ms-Check-background { visibility: hidden; } -.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle, -.ms-DetailsHeader.is-allSelected .ms-Check-circle { +.ms-DetailsHeader-cell.is-check:hover .ms-Check-background, +.ms-DetailsHeader.is-allSelected .ms-Check-background { visibility: visible; } @@ -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; @@ -134,7 +134,7 @@ $resizerColor: $ms-color-neutralTertiaryAlt; .ms-DetailsHeader-cell .ms-Icon { color: $iconForegroundColor; - @include padding-right(5px); + opacity: 1; } .ms-DetailsHeader-cell .ms-DetailsHeader-filterChevron.ms-Icon { diff --git a/src/components/DetailsList/DetailsHeader.tsx b/src/components/DetailsList/DetailsHeader.tsx index 6d2a4d39b501d8..442612bdd10bbb 100644 --- a/src/components/DetailsList/DetailsHeader.tsx +++ b/src/components/DetailsList/DetailsHeader.tsx @@ -124,7 +124,7 @@ export class DetailsHeader extends BaseComponent { groupNestingDepth > 0 ? ( diff --git a/src/components/DetailsList/DetailsRow.scss b/src/components/DetailsList/DetailsRow.scss index da51c2d1c68017..ee37ffcb7b1a07 100644 --- a/src/components/DetailsList/DetailsRow.scss +++ b/src/components/DetailsList/DetailsRow.scss @@ -76,10 +76,6 @@ $unselectedHoverColor: $ms-color-neutralLighter; .ms-DetailsRow-check { opacity: 0; - - &:focus { - opacity: 1; - } } .ms-DetailsRow:hover .ms-DetailsRow-check, diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index f5d56d84629f3b..a5c3bcd92e462e 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -7,6 +7,9 @@ // -------------------------------------------------- // Dialog styles +$Dialog-lgHeader-backgroundColor: $ms-color-themePrimary; +$Dialog-default-min-width: 288px; +$Dialog-default-max-width: 340px; // Mixin for IE9 specific styles @mixin dialogPositioningIE9Fallback { @@ -15,17 +18,16 @@ } .ms-Dialog { + @include ms-baseFont; background-color: transparent; position: fixed; height: 100%; width: 100%; top: 0; - left: 0; - z-index: $ms-zIndex-Dialog; + @include left(0); // Fallback for IE9 display: block; - font-size: 0; line-height: 100vh; text-align: center; @@ -42,15 +44,13 @@ .ms-Button.ms-Button--compound { display: block; - margin-left: 0; + @include margin-left(0); } .ms-Overlay { - z-index: $ms-zIndex-back; - - @media screen and (-ms-high-contrast: active) { - opacity: 0; - } + @media screen and (-ms-high-contrast: active) { + opacity: 0; + } } } @@ -62,7 +62,7 @@ box-sizing: border-box; line-height: 1.35; margin: auto; - width: 288px; + width: $Dialog-default-min-width; position: relative; @include text-align(left); outline: 3px solid transparent; @@ -71,39 +71,38 @@ // 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; - @include right(12px); - padding: 8px; - z-index: $ms-zIndex-front; - - .ms-Icon.ms-Icon--x { + + .ms-Icon.ms-Icon--Cancel { color: $ms-color-neutralSecondary; - font-size: $ms-font-size-m + 2; + font-size: 16px; } } .ms-Dialog-inner { height: 100%; - padding: 0 20px 20px; + padding: 0 28px 20px; } .ms-Dialog-header { position: relative; + display: table-row; width: 100%; box-sizing: border-box; - padding: 12px 20px 15px; } .ms-Dialog-title { margin: 0; - font-family: $ms-font-family-light; - font-size: $ms-font-size-xl; + display: table-cell; + @include ms-font-xl; + color: $ms-color-neutralPrimary; + padding: 20px 28px 20px; + width: 100%; +} + +.ms-Dialog-topButton { + display: table-cell; + vertical-align: top; + @include padding(12px, 12px, 0, 0); } .ms-Dialog-content { @@ -111,17 +110,22 @@ width: 100%; // Add margin bottom between compound buttons - .ms-Button.ms-Button--compound:not(:last-child) { + .ms-Button.ms-Button--compound { margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } } } .ms-Dialog-subText { margin: 0 0 20px 0; padding-top: 8px; - font-family: $ms-font-family-semilight; + @include ms-font-s; color: $ms-color-neutralPrimary; - font-size: $ms-font-size-s; + font-weight: $ms-font-weight-semilight; + line-height: 1.5; } .ms-Dialog-actions { @@ -137,38 +141,28 @@ } } +// Negative margin to needed to compensate for symmetric +// padding between action elements. .ms-Dialog-actionsRight { @include text-align(right); + @include margin-right(-4px); 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; - @include margin-left(16px); + .ms-Dialog-action { + margin: 0px 4px; } } - //= Modifier: Dialog with close button // .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 { - @include margin-right(20px); - } - // Show the close button .ms-Dialog-button.ms-Dialog-button--close { display: block; } } - //= Modifier: Multiline button dialog // .ms-Dialog.ms-Dialog--multiline { @@ -181,20 +175,18 @@ } } - //= Modifier: Large header dialog // .ms-Dialog.ms-Dialog--lgHeader { .ms-Dialog-header { - background-color: $ms-color-themePrimary; - padding: 26px 20px 28px; - margin-bottom: 8px; + background-color: $Dialog-lgHeader-backgroundColor; } .ms-Dialog-title { - font-size: $ms-font-size-xxl; - font-family: $ms-font-family-light; + @include ms-font-xxl; color: $ms-color-white; + padding: 26px 28px 28px; + margin-bottom: 8px; } .ms-Dialog-subText { @@ -202,13 +194,11 @@ } } - - @media (min-width: $ms-screen-md-min) { // Allow wider dialog on larger screens .ms-Dialog-main { width: auto; - min-width: 288px; - max-width: 340px; + min-width: $Dialog-default-min-width; + max-width: $Dialog-default-max-width; } -} +} \ No newline at end of file diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 8004934e42c26e..93bdac7b30a1a9 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -3,6 +3,7 @@ import { FocusTrapZone } from '../FocusTrapZone/index'; import { IDialogProps, DialogType } from './Dialog.Props'; import { Overlay } from '../../Overlay'; import { Layer } from '../../Layer'; +import { Button, ButtonType } from '../../Button'; import { DialogFooter } from './DialogFooter'; import { css } from '../../utilities/css'; import { Popup } from '../Popup/index'; @@ -73,13 +74,18 @@ export class Dialog extends React.Component { ignoreExternalFocusing={ ignoreExternalFocusing } forceFocusInsideTrap={ forceFocusInsideTrap } firstFocusableSelector={ firstFocusableSelector }> -

    { title }

    +
    +
    diff --git a/src/components/DocumentCard/DocumentCardActions.scss b/src/components/DocumentCard/DocumentCardActions.scss index c05705dfed57f0..dda6c469c616a0 100644 --- a/src/components/DocumentCard/DocumentCardActions.scss +++ b/src/components/DocumentCard/DocumentCardActions.scss @@ -40,6 +40,7 @@ $ms-DocumentCardActions-verticalPadding: 4px; .ms-Icon { @include margin-right(4px); - font-size: 16px; + font-size: $ms-icon-size-m; + vertical-align: top; } } diff --git a/src/components/DocumentCard/DocumentCardActions.tsx b/src/components/DocumentCard/DocumentCardActions.tsx index 8dbdcec9bc2554..dc6540c24ce537 100644 --- a/src/components/DocumentCard/DocumentCardActions.tsx +++ b/src/components/DocumentCard/DocumentCardActions.tsx @@ -21,7 +21,7 @@ export class DocumentCardActions extends React.Component - + { views }
    ) } diff --git a/src/components/DocumentCard/DocumentCardActivity.scss b/src/components/DocumentCard/DocumentCardActivity.scss index e7d3b41025787a..ca86c4b44077d8 100644 --- a/src/components/DocumentCard/DocumentCardActivity.scss +++ b/src/components/DocumentCard/DocumentCardActivity.scss @@ -57,10 +57,9 @@ $ms-DocumentCardActivity-personaTextGutter: 8px; .ms-DocumentCardActivity-name, .ms-DocumentCardActivity-activity { - color: $ms-color-neutralSecondaryAlt; display: block; - font-family: $ms-font-family-regular; - font-size: $ms-font-size-s; + @include ms-font-s; + color: $ms-color-neutralPrimary; line-height: 15px; height: 15px; overflow: hidden; @@ -70,5 +69,5 @@ $ms-DocumentCardActivity-personaTextGutter: 8px; .ms-DocumentCardActivity-name { color: $ms-color-neutralPrimary; - font-family: $ms-font-family-semibold; + @include ms-fontWeight-semibold; } diff --git a/src/components/DocumentCard/DocumentCardLocation.scss b/src/components/DocumentCard/DocumentCardLocation.scss index 1b40117dbb63aa..987b2eed69eccd 100644 --- a/src/components/DocumentCard/DocumentCardLocation.scss +++ b/src/components/DocumentCard/DocumentCardLocation.scss @@ -1,10 +1,9 @@ @import '../../common/common'; .ms-DocumentCardLocation { - color: $ms-color-neutralSecondaryAlt; + @include ms-font-s; + color: $ms-color-neutralPrimary; display: block; - font-family: $ms-font-family-regular; - font-size: $ms-font-size-s; padding: 8px 16px; position: relative; text-decoration: none; diff --git a/src/components/DocumentCard/DocumentCardTitle.scss b/src/components/DocumentCard/DocumentCardTitle.scss index 83c34847bdaaef..307c2fc85c704a 100644 --- a/src/components/DocumentCard/DocumentCardTitle.scss +++ b/src/components/DocumentCard/DocumentCardTitle.scss @@ -2,10 +2,9 @@ .ms-DocumentCardTitle { padding: 8px 16px; - color: $ms-color-neutralPrimary; display: block; - font-family: $ms-font-family-regular; - font-size: 16px; + @include ms-font-l; + color: $ms-color-neutralPrimary; height: 36px; // Two lines of text, making sure the third line is hidden line-height: 20px; overflow: hidden; diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index 3b14e681af0073..6287487b922a25 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -7,6 +7,11 @@ // -------------------------------------------------- // Dropdown styles +$Dropdown-selectedItem-bg: $ms-color-neutralQuaternaryAlt; +$Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter; +$DropDown-height: 32px; +$DropDown-item-height: 36px; + // Mixin for high contrast mode link states @mixin highContrastListItemState { @media screen and (-ms-high-contrast: active) { @@ -27,11 +32,14 @@ } .ms-Dropdown { - @include ms-font-m; @include ms-u-normalize; + @include ms-font-m; + color: $ms-color-neutralPrimary; + margin-bottom: 10px; position: relative; outline: 0; + user-select: none; &:hover, &:focus, @@ -53,7 +61,7 @@ &:hover, &:active { .ms-Dropdown-title { - border-color: $ms-color-neutralSecondaryAlt; + border-color: $ms-color-themePrimary; @media screen and (-ms-high-contrast: active) { border-color: $ms-color-contrastBlackSelected; @@ -118,27 +126,36 @@ } // 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; } -// Hide the original dropdown -.ms-Dropdown-select { - display: none; +// 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; + } } .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; - z-index: 1; + top: 0px; + @include right(12px); pointer-events: none; + line-height: $DropDown-height; } // Style the new, replacement component @@ -148,9 +165,9 @@ border: 1px solid $ms-color-neutralTertiaryAlt; cursor: pointer; display: block; - height: 32px; - line-height: 30px; - padding: 0 32px 0 10px; + height: $DropDown-height; + line-height: $DropDown-height - 2px; // height minus the border + @include padding(0, $DropDown-height, 0, 12px); position: relative; overflow: hidden; } @@ -165,14 +182,19 @@ 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%; + box-shadow: 0 0px 15px -5px rgba(0, 0, 0, 0.4); + border: 1px solid $ms-color-neutralLight; + + + &::before { content: ''; position: absolute; z-index: -1; @@ -180,7 +202,7 @@ left: 0; right: 0; bottom: 0; - border: 1px solid $ms-color-neutralLight; + border: none; } @media screen and (-ms-high-contrast: active) { @@ -196,9 +218,9 @@ box-sizing: border-box; cursor: pointer; display: block; - height: 40px; - line-height: 38px; - padding: 0 10px; + height: $DropDown-item-height; + line-height: $DropDown-item-height - 2px; // height minus the border + padding: 0px 12px; position: relative; border: 1px solid transparent; white-space: nowrap; @@ -211,22 +233,21 @@ 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; + background-color: $Dropdown-selectedItem-hover-bg; color: $ms-color-black; @include highContrastListItemState; } + @include focus-border(); + + &:focus { + background-color: $ms-color-neutralLighter; + } + &:active { - background-color: $ms-color-neutralLight; - border-color: $ms-color-themePrimary; + background-color: $Dropdown-selectedItem-hover-bg; color: $ms-color-black; } @@ -234,7 +255,6 @@ background: $ms-color-white; color: $ms-color-neutralTertiary; cursor: default; - line-height: 40px; } } @@ -243,48 +263,14 @@ // Use .is-selected instead. .ms-Dropdown-item.is-selected, .ms-Dropdown-item.ms-Dropdown-item--selected { - background-color: $ms-color-themeLight; + background-color: $Dropdown-selectedItem-bg; color: $ms-color-black; - line-height: 40px; &:hover { - background-color: $ms-color-themeLight; - } - - @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%; + background-color: $Dropdown-selectedItem-bg; } - .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, - .ms-Dropdown.is-open .ms-Dropdown-items { - position: absolute; - } -} + @include focus-border(); -// TODO: remove overrides below. - -.ms-Dropdown { - user-select: none; -} - -.ms-Dropdown-items { - box-shadow: 0 0px 15px -5px rgba(0, 0, 0, 0.4); - border: 1px solid $ms-color-neutralLight; - - &:before { - border: none; - } -} - -.ms-Dropdown-item.is-selected { - line-height: 38px; + @include highContrastListItemState; } \ No newline at end of file diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index a8cdcfea8f83fc..a336776059ddb4 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -101,8 +101,8 @@ export class Dropdown extends React.Component { aria-activedescendant={ selectedIndex >= 0 ? (id + '-list' + selectedIndex) : (id + '-list') } aria-controls={ id + '-list' } > - { selectedOption ? selectedOption.text : '' } +
      this._optionList = c } id={ id + '-list' } className='ms-Dropdown-items' diff --git a/src/components/GroupedList/GroupFooter.scss b/src/components/GroupedList/GroupFooter.scss index d4c031d71ec220..8569606fdaab5d 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/GroupedList/GroupHeader.scss b/src/components/GroupedList/GroupHeader.scss index 00d236a7c2778a..20df3e21fde7f7 100644 --- a/src/components/GroupedList/GroupHeader.scss +++ b/src/components/GroupedList/GroupHeader.scss @@ -23,7 +23,6 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); .ms-GroupHeader-check, .ms-GroupHeader-expand { @include focus-border(); - display: inline-block; cursor: default; padding: 8px; @@ -33,7 +32,8 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); vertical-align: top; background: none; border: none; - font-size: $ms-font-size-xl; + font-size: $ms-icon-size-s; + top: 4px; } .ms-GroupHeader-check { @@ -91,15 +91,15 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); display: inline-block; position: relative; top: -16px; - left: -26px; - font-size: $ms-font-size-xl; + @include left(-26px); + font-size: $ms-icon-size-l; color: $ms-color-neutralSecondaryAlt; transition: transform $ms-duration2 $groupHeader-ease-in-back, opacity $ms-duration4 $groupHeader-ease-out-sine; opacity: 0; transform: rotate(0.2deg) scale(0.65); // rotation prevents jittery motion in IE transform-origin: 10px 10px; - .ms-Icon--tag { + .ms-Icon--Tag { position: absolute; } } diff --git a/src/components/GroupedList/GroupHeader.tsx b/src/components/GroupedList/GroupHeader.tsx index 1cadcd3f24a0f9..39a7bce3874d8c 100644 --- a/src/components/GroupedList/GroupHeader.tsx +++ b/src/components/GroupedList/GroupHeader.tsx @@ -91,9 +91,9 @@ export class GroupHeader extends React.Component
    +
    diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 3f56d1115ebee1..0514ef2543e497 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 3c9fcaed05f176..f29a14243d5b86 100644 --- a/src/components/Link/Link.scss +++ b/src/components/Link/Link.scss @@ -9,9 +9,26 @@ @mixin ms-Link { + @include ms-baseFont; + @include focus-border(); + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; color: $ms-color-themePrimary; text-decoration: none; cursor: pointer; + padding: 0; + margin: 0; + background: none; + @include text-align(left); + display: inline; + border: none; + + // need to support ellipsis truncation, so we do this by default. + width: auto; + max-width: 100%; + + overflow: inherit; + text-overflow: inherit; &:hover, &:focus { @@ -21,43 +38,8 @@ &:active { color: $ms-color-themePrimary; } - - @media screen and (-ms-high-contrast: active) { - color: $ms-color-contrastBlackLink; - } - - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteLink; - } } .ms-Link { @include ms-Link; } - -// TODO: Remove overrides below. - -.ms-Link, -BUTTON.ms-Link { - @include focus-border(); - - /* Needed for buttons disguised as links scenario. */ - font-family: inherit; - font-size: inherit; - font-weight: normal; - - border: none; - background: none; - @include text-align(left); - display: inline; - padding: 0; - margin: 0; - - // need to support ellipsis truncation, so we do this by default. - width: auto; - max-width: 100%; - - overflow: inherit; - text-overflow: inherit; -} - diff --git a/src/components/MessageBar/MessageBar.Props.ts b/src/components/MessageBar/MessageBar.Props.ts index 1bce047417dc76..1238a272631001 100644 --- a/src/components/MessageBar/MessageBar.Props.ts +++ b/src/components/MessageBar/MessageBar.Props.ts @@ -43,12 +43,17 @@ export enum MessageBarType { info, /** Error styled MessageBar */ error, - /** Remove styled MessageBar */ - remove, + /** Blocked styled MessageBar */ + blocked, /** SevereWarning styled MessageBar */ severeWarning, /** Success styled MessageBar */ success, /** Warning styled MessageBar */ - warning + warning, + /** + * Deprecated at v0.48.0, to be removed at >= v1.0.0. Use 'blocked' instead. + * @deprecated + */ + remove } diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss index 48d98d62c145bf..a84b4fe74650d1 100644 --- a/src/components/MessageBar/MessageBar.scss +++ b/src/components/MessageBar/MessageBar.scss @@ -7,16 +7,20 @@ // -------------------------------------------------- // MessageBar Styles -/* - Base template file -*/ - $MessageBar-padding: 8px; .ms-MessageBar { + @include ms-baseFont; padding: $MessageBar-padding; - display: table; @include ms-bgColor-info; + width: 100%; + box-sizing: border-box; + display: flex; + position: relative; + + .ms-Link { + font-size: $ms-font-size-s; + } } .ms-MessageBar-icon, @@ -26,13 +30,19 @@ $MessageBar-padding: 8px; } .ms-MessageBar-icon { - padding-right: $MessageBar-padding; - font-size: 16px; + @include padding-right($MessageBar-padding); + font-size: $ms-icon-size-m; @include ms-fontColor-neutralSecondaryAlt; + min-width: 16px; + min-height: 16px; + display: flex; } .ms-MessageBar-text { @include ms-font-s; + color: $ms-color-neutralPrimary; + min-width: 0; + display: flex; } @@ -65,19 +75,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,39 +94,9 @@ $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. - // Shared -.ms-MessageBar-icon { - @include padding-right(8px); - min-width: 16px; - min-height: 16px; - display:flex; -} - -.ms-MessageBar { - width: 100%; - box-sizing: border-box; - display: flex; - position: relative; -} .ms-MessageBar-content { display: flex; @@ -129,37 +104,27 @@ $MessageBar-padding: 8px; box-sizing: border-box; } -.ms-MessageBar-text { - width: 100%; - display: flex; -} - -.ms-MessageBar-link { - white-space: nowrap; - padding: 0 8px 0; -} - .ms-MessageBar-actionables { display: flex; flex-direction: column; width: 100%; - + min-width: 0; } .ms-MessageBar-actionables > .ms-MessageBar-dismissal { - right: 0; - top: 0; - position: absolute !important; // Needed because we're using focus-border mixin + right: 0; + top: 0; + position: absolute !important; // Needed because we're using focus-border mixin } -.ms-MessageBar-actions, .ms-MessageBar-actions-oneline { +.ms-MessageBar-actions, .ms-MessageBar-actionsOneline { display: flex; flex: 0 0 auto; flex-direction: row-reverse; align-items: center; } -.ms-MessageBar-actions-oneline { +.ms-MessageBar-actionsOneline { position: relative; } @@ -168,12 +133,11 @@ $MessageBar-padding: 8px; } .ms-MessageBar-dismissal { - padding: 8px; @include focus-border(); + min-width: 0; } - -.ms-MessageBar-link { - @include padding-left(4px); +.ms-MessageBar-actionsOneline .ms-MessageBar-dismissal { + @include margin-right(-8px); } // Add space between adjacent MessageBars. @@ -182,7 +146,7 @@ $MessageBar-padding: 8px; } .ms-MessageBar-innerTextPadding { - @include padding-right(16px); // Add padding if we have a dismiss to prevent button overlapping text. + @include padding-right(24px); // Add padding if we have a dismiss to prevent button overlapping text. span, .ms-MessageBar-innerText > span { @include padding-right(4px); // Add padding between text and hyperlink. @@ -213,7 +177,7 @@ $MessageBar-padding: 8px; line-height: 1.3em; overflow: hidden; text-overflow: ellipsis; - //white-space: nowrap; + white-space: nowrap; } } } @@ -224,6 +188,6 @@ $MessageBar-padding: 8px; } // Because of an odd behaviour in other CSS, ms-MessageBar--remove causes children's icons to use 8px, and not inherit. -.ms-MessageBar.ms-MessageBar--remove .ms-Icon--x { - font-size: 13.333px; +.ms-MessageBar .ms-Icon--Cancel { + font-size: 14px; } \ No newline at end of file diff --git a/src/components/MessageBar/MessageBar.tsx b/src/components/MessageBar/MessageBar.tsx index a968e27e84421a..93892cdd1d97bf 100644 --- a/src/components/MessageBar/MessageBar.tsx +++ b/src/components/MessageBar/MessageBar.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Button, ButtonType } from '../../Button'; import './MessageBar.scss'; import { css } from '../../utilities/css'; import { IMessageBarProps, MessageBarType } from './MessageBar.Props'; @@ -17,12 +18,13 @@ export class MessageBar extends React.Component= 1.0.0 + [MessageBarType.severeWarning]: 'Warning', + [MessageBarType.success]: 'Completed' }; constructor(props: IMessageBarProps) { @@ -43,7 +45,7 @@ export class MessageBar extends React.Component { this.props.actions } : -
    { [this._getDismissDiv(), this.props.actions] }
    ; +
    { [this._getDismissDiv(), this.props.actions] }
    ; } return null; } @@ -52,7 +54,7 @@ export class MessageBar extends React.Component= 1.0.0 'ms-MessageBar--severeWarning': this.props.messageBarType === MessageBarType.severeWarning, 'ms-MessageBar--success' : this.props.messageBarType === MessageBarType.success, 'ms-MessageBar--warning' : this.props.messageBarType === MessageBarType.warning @@ -61,12 +63,15 @@ export class MessageBar extends React.Component - - ; + return : null) } diff --git a/src/components/Overlay/Overlay.scss b/src/components/Overlay/Overlay.scss index 445f6baee4fbfe..37aca6584f035d 100644 --- a/src/components/Overlay/Overlay.scss +++ b/src/components/Overlay/Overlay.scss @@ -14,7 +14,6 @@ left: 0; right: 0; top: 0; - z-index: $ms-zIndex-Overlay; //== Modifier: Hidden overlay // diff --git a/src/components/Panel/Panel.scss b/src/components/Panel/Panel.scss index 6b0599c37dbee3..428ec57fe7b432 100644 --- a/src/components/Panel/Panel.scss +++ b/src/components/Panel/Panel.scss @@ -280,7 +280,7 @@ $CommandBarHeight: 40px; line-height: $CommandBarHeight; padding: 0; color: $ms-color-neutralSecondary; - font-size: $ms-font-size-m; + font-size: $ms-icon-size-m; &:hover { color: $ms-color-neutralPrimary; @@ -313,8 +313,7 @@ $CommandBarHeight: 40px; // Header text at the top of the panel. .ms-Panel-headerText { - font-family: $ms-font-family-light; - font-size: $ms-font-size-xl; + @include ms-font-xl; color: $ms-color-neutralPrimary; margin: 10px 0; padding: 4px 0; diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index 1e4b4317985a87..dcf4633b7430af 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -79,7 +79,7 @@ export class Panel extends BaseComponent { let closeButton; if (hasCloseButton) { closeButton = ; } diff --git a/src/components/PeoplePicker/PeoplePicker.scss b/src/components/PeoplePicker/PeoplePicker.scss index 1cbf4d85879635..acb87b6b360d3a 100644 --- a/src/components/PeoplePicker/PeoplePicker.scss +++ b/src/components/PeoplePicker/PeoplePicker.scss @@ -22,14 +22,18 @@ // -------------------------------------------------- // People Picker styles +$peoplePickerResults-maxWidth: 340px; +$peoplePicker-rowHeight: 56px; $personaItemHeight: 42px; .ms-PeoplePicker { @include ms-font-m; @include ms-u-normalize; + color: $ms-color-neutralPrimary; background-color: $ms-color-white; margin-bottom: 10px; + position: relative; } // Box that contains the search field and selected people. @@ -37,12 +41,18 @@ $personaItemHeight: 42px; @include ms-u-clearfix; border: 1px solid $ms-color-neutralTertiaryAlt; box-sizing: border-box; - min-height: 40px; + min-height: 42px; width: 100%; &:hover { border-color: $ms-color-neutralSecondaryAlt; } + + > .ms-FocusZone{ + flex-flow: row wrap; + display: flex; + align-items: stretch; + } } // Highlight the search box when the people picker is active @@ -55,24 +65,33 @@ $personaItemHeight: 42px; border: 0; box-sizing: border-box; display: inline-block; - float: left; + @include float(left); height: 38px; outline: none; - padding-left: 8px; + @include padding-left(8px); width: 100%; + flex: 1; + min-width: 200px; } // A selected persona, which appears within the search field. .ms-PeoplePicker-persona { - display: inline-block; - float: left; + display: inline-flex; + @include float(left); margin: 4px; outline: 1px solid transparent; + background-color: $ms-color-neutralLighter; + border-radius: 20px; + + &:focus { + .ms-PeoplePicker-personaContent { + outline: 2px solid $ms-color-themePrimary; + } + } //TODO: Avoid styling child components like this. .ms-Persona { - background-color: $ms-color-neutralLighter; - float: left; + @include float(left); min-height: 30px; } } @@ -87,13 +106,13 @@ $personaItemHeight: 42px; // Button to remove a selected person. .ms-PeoplePicker-personaRemove { @include button-reset(); - background-color: $ms-color-neutralLighter; - color: $ms-color-neutralSecondary; + color: $ms-color-neutralPrimary; display: inline-block; - float: left; + @include float(left); text-align: center; height: 32px; width: 32px; + border-radius: 20px; &:hover { background-color: $ms-color-neutralLight; @@ -116,10 +135,14 @@ $personaItemHeight: 42px; border: 1px solid $ms-color-neutralTertiaryAlt; display: none; margin-bottom: -1px; - max-width: 340px; + width: 100%; padding-top: 9px; position: absolute; z-index: ($ms-zIndex-PeoplePicker + $ms-zIndex-middle); + + @media (min-width: $ms-screen-md-min) { + width: $peoplePickerResults-maxWidth; + } } // Show the results area when the people picker is active @@ -133,7 +156,8 @@ $personaItemHeight: 42px; // This is limited to five results for both regular and compact sizes. .ms-PeoplePicker-resultGroups { max-height: 309px; - overflow-y: scroll; + min-height: 57px; + overflow-y: auto; } // A group of results @@ -149,17 +173,15 @@ $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; + @include padding(8px, 0, 8px, 16px); text-transform: uppercase; - height: 40px; } // List of results .ms-PeoplePicker-resultList { @include ms-u-normalize; - margin-bottom: -1px; list-style-type: none; // Browser default override. } @@ -168,6 +190,8 @@ $personaItemHeight: 42px; position: relative; .ms-Persona { + width: inherit; + &:hover { @extend .ms-Persona.ms-Persona--darkText; cursor: pointer; @@ -183,6 +207,7 @@ $personaItemHeight: 42px; // Ensure the width is 100%. .ms-Persona-details { width: 100%; + @include padding-right(28px); } } @@ -192,17 +217,12 @@ $personaItemHeight: 42px; @include button-reset(); position: relative; box-sizing: border-box; - height: 34px; + height: $peoplePicker-rowHeight; width: 100%; background: none; border: 0; - text-align: left; - margin: 0 0 10px 0; - padding: 0 0 0 9px; - - @media (min-width: $ms-screen-md-min) { - height: 48px; - } + @include text-align(left); + @include padding(4px, 0, 4px, 16px); &:hover { background-color: $ms-color-neutralLight; @@ -214,7 +234,22 @@ $personaItemHeight: 42px; } &.ms-PeoplePicker-resultBtn--compact { - height: 32px; + height: 40px; + } +} + +//== Modifier: Selectable Persona +// +.ms-PeoplePicker-resultBtn--selected { + background-color: $ms-color-neutralQuaternaryAlt; + outline: 1px solid transparent; + + &:hover { + background-color: $ms-color-neutralQuaternary; + } + + .ms-PeoplePicker-resultAction:hover { + background-color: $ms-color-neutralTertiaryAlt } } @@ -231,16 +266,17 @@ $personaItemHeight: 42px; .ms-PeoplePicker-resultAction { @include button-reset(); display: block; - height: 34px; + height: $peoplePicker-rowHeight; transition: background-color 0.367s $ms-ease1; position: absolute; - right: 0; + @include right(0); top: 0; width: 30px; text-align: center; + padding: 0px; @media (min-width: $ms-screen-md-min) { - height: 48px; + height: $peoplePicker-rowHeight; } .ms-Icon { @@ -249,12 +285,12 @@ $personaItemHeight: 42px; } &:hover { - background-color: $ms-color-neutralTertiaryAlt; + background-color: $ms-color-neutralQuaternaryAlt; outline: 1px solid transparent; } &:active { - background-color: $ms-color-themeTertiary; + background-color: $ms-color-neutralQuaternary; } } @@ -291,7 +327,7 @@ $personaItemHeight: 42px; width: 32px; height: 32px; top: 20px; - left: 20px; + @include left(20px); display: none; .ms-Spinner-circle { @@ -330,24 +366,32 @@ $personaItemHeight: 42px; width: 100%; padding: 0; margin: 0; - padding-left: 70px; - text-align: left; + @include padding-left(70px); + @include text-align(left); &:hover { - background-color: $ms-color-neutralLight; - cursor: pointer; + background-color: $ms-color-neutralLight; + cursor: pointer; + + .ms-PeoplePicker-searchMoreSecondary { + color: $ms-color-neutralDark; + } } // TODO: Works in Chrome, but not working in IE &:focus, &:active { - background-color: $ms-color-themeLight; + background-color: $ms-color-neutralQuaternaryAlt; + + .ms-PeoplePicker-searchMoreSecondary { + color: $ms-color-black; + } } } .ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { height: 49px; - padding-left: 50px; + @include padding-left(50px); } // Default search icon @@ -355,7 +399,7 @@ $personaItemHeight: 42px; height: 70px; position: absolute; top: 0; - left: 0; + @include left(0); width: 70px; .ms-Icon { @@ -371,12 +415,12 @@ $personaItemHeight: 42px; // Primary text .ms-PeoplePicker-searchMorePrimary { padding-top: 2px; - font-family: $ms-font-family-regular; + font-weight: $ms-font-weight-regular; } // Secondary text .ms-PeoplePicker-searchMoreSecondary { - font-family: $ms-font-family-semilight; + font-weight: $ms-font-weight-semilight; font-size: $ms-font-size-xs; color: $ms-color-neutralSecondary; } @@ -398,11 +442,11 @@ $personaItemHeight: 42px; // Primary text .ms-PeoplePicker-searchMorePrimary { color: $ms-color-neutralSecondary; - font-family: $ms-font-family-semilight; + font-weight: $ms-font-weight-semilight; font-size: $ms-font-size-xs; line-height: 20px; position: relative; - top: 12px; + top: 0; } } @@ -415,11 +459,7 @@ $personaItemHeight: 42px; } .ms-PeoplePicker-resultAction { - height: 32px; - - .ms-Icon { - margin-top: -8px; - } + height: 40px; } .ms-PeoplePicker-searchMore { @@ -429,7 +469,7 @@ $personaItemHeight: 42px; width: 28px; height: 28px; top: 12px; - left: 12px; + @include left(12px); } } @@ -477,6 +517,10 @@ $personaItemHeight: 42px; .ms-Persona { cursor: pointer; } + + .ms-PeoplePicker-memberListTopMargin { + margin-top: 8px; + } } .ms-PeoplePicker-selected { @@ -533,11 +577,11 @@ $personaItemHeight: 42px; } .ms-Persona-presence { - left: 19px; + @include left(19px); } .ms-Persona-details { - padding-left: 8px; + @include padding-left(8px); } .ms-Persona-primaryText { @@ -585,30 +629,30 @@ $personaItemHeight: 42px; .ms-PeoplePicker-searchMore, .ms-PeoplePicker-searchMoreBtn, .ms-PeoplePicker-searchMoreIcon { - height: 48px; + height: $peoplePicker-rowHeight; } .ms-PeoplePicker-searchMoreBtn { - padding-left: 48px; + @include padding-left($peoplePicker-rowHeight); } .ms-PeoplePicker-searchMoreIcon { - width: 48px; + width: $peoplePicker-rowHeight; } .ms-PeoplePicker-searchMorePrimary { font-size: $ms-font-size-s; - line-height: 48px; + line-height: $peoplePicker-rowHeight; } .ms-PeoplePicker-searchMoreIcon .ms-Icon { top: 0; - line-height: 48px; + line-height: $peoplePicker-rowHeight; } .ms-Spinner { top: 16px; - left: 14px; + @include left(14px); height: 20px; width: 20px; } @@ -630,7 +674,7 @@ $personaItemHeight: 42px; .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; } @@ -650,62 +694,3 @@ $personaItemHeight: 42px; margin-bottom: 6px; position: relative; } - -// TODO: remove overides below. - -.ms-PeoplePicker-searchBox { - min-height: 42px; // this is accounting for the border. Actual inner height is 40px; -} - -// Make the search box a flex container, so that the searchfield input -// will take up the entire remaining width of the search box -// without needing to constantly resize it manually. -.ms-PeoplePicker-searchBox > .ms-FocusZone{ - flex-flow: row wrap; - display: flex; - align-items: stretch; -} - -.ms-PeoplePicker-searchField { - flex: 1; - min-width: 200px; -} - -.ms-PeoplePicker-results { - min-width: 340px; -} - -.ms-PeoplePicker-memberListTopMargin { - margin-top: 8px; -} - -.ms-PeoplePicker-resultGroups { - min-height: 57px; - overflow-y: auto; -} - -.ms-PeoplePicker-persona { - display: inline-flex; - margin: 4px; - - &:focus { - .ms-PeoplePicker-personaContent { - outline: 2px solid $ms-color-themePrimary; - } - } -} - -// The search more area may be in a disconnected state. -.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected { - // Primary text - .ms-PeoplePicker-searchMorePrimary { - top: 0; - } -} - -//== Modifier: Selectable Persona -// -.ms-PeoplePicker-resultBtn--selected { - background-color: $ms-color-themeLighter; - outline: 1px solid transparent; -} \ No newline at end of file diff --git a/src/components/PeoplePicker/PeoplePicker.tsx b/src/components/PeoplePicker/PeoplePicker.tsx index bd5ce377c4f7e8..3cba1558b67b6d 100644 --- a/src/components/PeoplePicker/PeoplePicker.tsx +++ b/src/components/PeoplePicker/PeoplePicker.tsx @@ -507,7 +507,7 @@ export class PeoplePicker extends React.Component { this._removeSelectedPersona( selectedPersonas.indexOf(child) ); }}> - + ); }) @@ -537,7 +537,7 @@ export class PeoplePicker extends React.Component { this._removeSelectedPersona( selectedPersonas.indexOf(child) ); } }> - + ); @@ -604,8 +604,8 @@ export class PeoplePicker extends React.Component @@ -697,7 +697,7 @@ export class PeoplePicker extends React.Component { this._removeSuggestedPersona(id, personaInfo); }} > - + : null } ); diff --git a/src/components/Persona/Persona.Props.ts b/src/components/Persona/Persona.Props.ts index da3ffd528b6a7b..3f8ededbd32738 100644 --- a/src/components/Persona/Persona.Props.ts +++ b/src/components/Persona/Persona.Props.ts @@ -76,7 +76,8 @@ export enum PersonaPresence { online, away, dnd, - blocked + blocked, + busy } export enum PersonaInitialsColor { diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index c8b18136f3744c..78fd52305ef24f 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -9,40 +9,86 @@ //= 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; + 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: $ms-Persona-sizeMd; + top: 0; + @include left(0); @media screen and (-ms-high-contrast: active) { border: 1px solid $ms-color-white; @@ -51,6 +97,10 @@ $ms-color-initials-darkRed: #b91d47; @media screen and (-ms-high-contrast: black-on-white) { border: 1px solid $ms-color-black; } + + .ms-Image { + border: 0px; + } } //= Note: The doughboy placeholder is being deprecated. @@ -63,12 +113,13 @@ $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; + font-weight: $ms-font-weight-light; line-height: 48px; &.ms-Persona-initials--lightBlue { @@ -120,12 +171,14 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-image { display: table-cell; - margin-right: 10px; + @include margin-right(10px); position: absolute; top: 0; - left: 0; - width: 48px; - height: 48px; + @include left(0); + width: 100%; + height: 100%; + border-radius: 50%; + perspective: 1px; } .ms-Persona-image[src=""] { @@ -135,19 +188,44 @@ $ms-color-initials-darkRed: #b91d47; .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; + @include left(34px); bottom: -1px; border: 2px solid $ms-color-white; + text-align: center; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-black; + box-shadow: 0 0 0 1px $ms-color-contrastBlackSelected inset; + color: $ms-color-black; + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-white; + box-shadow: 0 0 0 1px $ms-color-contrastWhiteSelected inset; + color: $ms-color-white; + background-color: $ms-color-black; + } + + .ms-Persona-presenceIcon { + color: $ms-color-white; + font-size: 8px; + line-height: $ms-Persona-presenceSizeMd; + vertical-align: top; + } } .ms-Persona-details { - display: table-cell; padding: 0 12px; vertical-align: middle; + @include text-align(left); + @include padding-left($ms-Persona-sizeMd + $ms-Persona-imageDetailsLgSpace); + display: table-cell; + width: 100%; } .ms-Persona-primaryText, @@ -155,14 +233,14 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-tertiaryText, .ms-Persona-optionalText { @include noWrap(); - width: 190px; overflow: hidden; text-overflow: ellipsis; + width: 100%; } .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; @@ -172,7 +250,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; @@ -189,39 +267,10 @@ $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 { @@ -232,9 +281,9 @@ $ms-color-initials-darkRed: #b91d47; } .ms-Persona-presence { - right: auto; + @include right(auto); top: 10px; - left: 0; + @include left(0); border: 0; @media screen and (-ms-high-contrast: active) { @@ -248,7 +297,7 @@ $ms-color-initials-darkRed: #b91d47; } .ms-Persona-details { - padding-left: 20px; + @include padding-left(20px); } .ms-Persona-primaryText { @@ -276,24 +325,16 @@ $ms-color-initials-darkRed: #b91d47; } -//== Modifier: Tiny Square Persona -// -.ms-Persona.ms-Persona--square.ms-Persona--tiny { - .ms-Persona-presence { - height: 12px; - width: 12px; - top: 10px; - } -} - - //== Modifier: Extra Small Persona // .ms-Persona.ms-Persona--xs { + height: $ms-Persona-sizeXs; + .ms-Persona-imageArea, .ms-Persona-image { - width: 32px; - height: 32px; + max-width: $ms-Persona-sizeXs; + width: $ms-Persona-sizeXs; + height: $ms-Persona-sizeXs; } .ms-Persona-placeholder { @@ -303,15 +344,15 @@ $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 { - left: 19px; + @include left(19px); } .ms-Persona-details { - padding-left: 8px; + @include padding-left($ms-Persona-sizeXs + $ms-Persona-imageDetailsSmSpace); } .ms-Persona-primaryText { @@ -325,24 +366,17 @@ $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; + width: $ms-Persona-sizeSm; + height: $ms-Persona-sizeSm; } .ms-Persona-placeholder { @@ -352,15 +386,15 @@ $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 { - left: 27px; + @include left(27px); } .ms-Persona-details { - padding-left: 8px; + @include padding-left($ms-Persona-sizeSm + $ms-Persona-imageDetailsSmSpace); } .ms-Persona-primaryText { @@ -374,24 +408,17 @@ $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; + width: $ms-Persona-sizeLg; + height: $ms-Persona-sizeLg; } .ms-Persona-placeholder { @@ -401,45 +428,45 @@ $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; + @include left(49px); + height: $ms-Persona-presenceSizeLg; + width: $ms-Persona-presenceSizeLg; + border-width: 3px; } - .ms-Persona-secondaryText { - padding-top: 3px; + .ms-Persona-presenceIcon { + line-height: $ms-Persona-presenceSizeLg; + font-size: $ms-font-size-m; } - .ms-Persona-tertiaryText { - padding-top: 5px; + .ms-Persona-details { + @include padding-left($ms-Persona-sizeLg + $ms-Persona-imageDetailsLgSpace); } - .ms-Persona-tertiaryText { - display: block; // Show tertiary text + .ms-Persona-secondaryText { + padding-top: 3px; } -} - -//== Modifier: Large Square Persona -// -.ms-Persona.ms-Persona--square.ms-Persona--lg { - .ms-Persona-presence { - height: 72px; - width: 7px; - left: 0; + .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; } } - //== 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; + width: $ms-Persona-sizeXl; + height: $ms-Persona-sizeXl; } .ms-Persona-placeholder { @@ -449,22 +476,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; - left: 71px; + height: $ms-Persona-presenceSizeXl; + width: $ms-Persona-presenceSizeXl; + @include 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; + @include 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; } @@ -479,18 +514,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. @@ -506,7 +529,6 @@ $ms-color-initials-darkRed: #b91d47; } } - //== Modifier: Selectable Persona // .ms-Persona.ms-Persona--selectable { @@ -540,6 +562,11 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-presence { background-color: $ms-color-presence-away; } + + .ms-Persona-presenceIcon { + position: relative; + @include left(1px); + } } @@ -547,42 +574,69 @@ $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; + @include 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; + @include left(0); + } + } + + &.ms-Persona--lg { + .ms-Persona-presence { + &::after { + top: 9px; + } + } } -} + &.ms-Persona--xl { + .ms-Persona-presence { + &::after { + top: 13px; + } + } + } +} //== 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 ); - } -} + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + } -//== Modifier: Square Persona with busy presence -// -.ms-Persona.ms-Persona--busy.ms-Persona--square { - .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 ); + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + } } } - //== Modifier: Persona with do not disturb presence // .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% ); } } @@ -592,28 +646,15 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona.ms-Persona--offline { .ms-Persona-presence { background-color: $ms-color-presence-offline; - } -} -// TODO: Remove overrides below - -// div.ms-Persona-image to overwrite Fabric's ms-Persona-image -div.ms-Persona-image { - position: absolute; - left: 0; - top: 0; - float: clear; - border: 50%; - width: 100%; - height: 100%; - - border-radius: 50%; - perspective: 1px; -} + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-black; + box-shadow: 0 0 0 1px $ms-color-white inset; + } -.ms-Persona-optionalText, -.ms-Persona-primaryText, -.ms-Persona-secondaryText, -.ms-Persona-tertiaryText { - width: auto; + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-white; + box-shadow: 0 0 0 1px $ms-color-black inset; + } + } } diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx index d52c2106afff70..b4871e6d7e10ef 100644 --- a/src/components/Persona/Persona.tsx +++ b/src/components/Persona/Persona.tsx @@ -37,6 +37,39 @@ export class Persona extends React.Component { hidePersonaDetails } = this.props; + let presenceElement = null; + if (presence !== PersonaPresence.none) { + let userPresence = PersonaPresence[presence], + statusIcon = null; + switch (userPresence) { + case 'online': + userPresence = 'SkypeCheck'; + break; + case 'away': + userPresence = 'SkypeClock'; + break; + case 'dnd': + userPresence = 'SkypeMinus'; + break; + default: + userPresence = ''; + } + if (userPresence) { + let iconClass = `ms-Persona-presenceIcon ms-Icon ms-Icon--${userPresence}`; + statusIcon = ; + } + presenceElement =
    { statusIcon }
    ; + } + + let personaDetails =
    +
    { primaryText }
    + { secondaryText ? ( +
    { secondaryText }
    + ) : (null) } +
    { tertiaryText }
    +
    { optionalText }
    + { this.props.children } +
    ; return (
    { size !== PersonaSize.tiny && ( @@ -45,17 +78,8 @@ export class Persona extends React.Component {
    ) } - { presence !== PersonaPresence.none &&
    } - { !hidePersonaDetails && ( -
    -
    { primaryText }
    - { secondaryText ? ( -
    { secondaryText }
    - ) : (null) } -
    { tertiaryText }
    -
    { optionalText }
    - { this.props.children } -
    ) } + { presenceElement } + { (!hidePersonaDetails || (size === PersonaSize.tiny)) && personaDetails } ); } diff --git a/src/components/Persona/PersonaConsts.ts b/src/components/Persona/PersonaConsts.ts index ca25835b8bdd08..74e6acc457f776 100644 --- a/src/components/Persona/PersonaConsts.ts +++ b/src/components/Persona/PersonaConsts.ts @@ -18,7 +18,8 @@ export const PERSONA_PRESENCE = { [PersonaPresence.online]: 'ms-Persona--online', [PersonaPresence.away]: 'ms-Persona--away', [PersonaPresence.dnd]: 'ms-Persona--dnd', - [PersonaPresence.blocked]: 'ms-Persona--blocked' + [PersonaPresence.blocked]: 'ms-Persona--blocked', + [PersonaPresence.busy]: 'ms-Persona--busy' }; export const PERSONA_INITIALS_COLOR = { diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss index 5b373f4aceaf3c..2855457404ab15 100644 --- a/src/components/Pivot/Pivot.scss +++ b/src/components/Pivot/Pivot.scss @@ -9,98 +9,89 @@ .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; + position: relative; + color: $ms-color-themePrimary; + white-space: nowrap; +} + +.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; - - &:after { - content: ''; - width: 100%; - position: absolute; - display: none; - bottom: 0; - left: 0; - 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; - } - } + @include margin-right(8px); + padding: 0 8px; + text-align: center; + position: relative; - &:hover, - &:focus, - &:active { - color: $ms-color-black; + &:hover { cursor: pointer; - - + .ms-Pivot-dropdownIcon { - color: $ms-color-neutralDark; - } } - &:active { - font-family: $ms-font-family-semibold; - - @media screen and (-ms-high-contrast: active) { - color: $ms-color-contrastBlackSelected; - } + &:focus { + outline: none; + } - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteSelected; - } + // Underline, not yet visible + &::before { + background-color: transparent; + bottom: 0; + content: ''; + height: 2px; + left: 8px; + position: absolute; + right: 8px; + transition: background-color $ms-duration2 $ms-ease2; + } - &:after { - display: block; - } + // 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; } //== 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; - } + font-weight: $ms-font-weight-semibold; - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteSelected; - } - - &:after { - display: block; + // Show the underline + &::before { + background-color: $ms-color-themePrimary; } + } - + .ms-Pivot-dropdownIcon { - color: $ms-color-neutralDark; - } + //== State: Disabled + &.is-disabled { + color: $ms-color-neutralTertiary; } } -.ms-Pivot-dropdownIcon { - font-size: $ms-font-size-m-plus + 1; - position: relative; - top: 2px; +.ms-Fabric.is-focusVisible .ms-Pivot-link { + &:focus { + outline: 1px solid $ms-color-neutralSecondaryAlt; + } } +// @TODO: Determine if any of the styles below this are necessary anymore. + // Overflow (ellipsis) .ms-Pivot-link.ms-Pivot-link--overflow { color: $ms-color-neutralSecondary; @@ -115,9 +106,7 @@ } &:active { - &:after { - display: none; - } + color: $ms-color-themePrimary; } } @@ -128,6 +117,12 @@ top: 0; } +// Pivot content, hidden by default +.ms-Pivot-content { + display: none; + margin-top: 20px; +} + //== Modifier: Large Pivots // @@ -135,35 +130,29 @@ .ms-Pivot-link { font-size: $ms-font-size-l; - &:active { - font-family: $ms-font-family-regular; - } - - &.is-selected { - font-family: $ms-font-family-regular; + .ms-Pivot-count { + @include margin-left(4px); } } .ms-Pivot-link.ms-Pivot-link--overflow { - &:after { + &::after { font-size: $ms-font-size-l; } } } - //== Modifier: Tabs // .ms-Pivot.ms-Pivot--tabs { - height: 40px; .ms-Pivot-link { + @include focus-border(); + @include margin-right(0px); height: 40px; background-color: $ms-color-neutralLighter; 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,35 +160,19 @@ } &: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; + font-weight: $ms-font-weight-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; + &::before { + background-color: transparent; + transition: none; } } } @@ -211,42 +184,40 @@ } &:active { - background-color: $ms-color-themePrimary !important; + background-color: $ms-color-themePrimary; } } } - - -@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; - } +.ms-Fabric.is-focusVisible .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus { + &:before { + height: auto; + background: transparent; + transition: none; } } - +// @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; } } } } - -// TODO: Remove override below. - -.ms-Pivot { - position: relative; - color: $ms-color-themePrimary; - white-space: nowrap; -} diff --git a/src/components/Pivot/Pivot.tsx b/src/components/Pivot/Pivot.tsx index 6a715c3fa019c4..c8e740c718920d 100644 --- a/src/components/Pivot/Pivot.tsx +++ b/src/components/Pivot/Pivot.tsx @@ -100,8 +100,13 @@ export class Pivot extends React.Component { * Renders a pivot link */ private _renderLink(link: IPivotItemProps) { - const itemKey = link.itemKey; + const { itemKey, itemCount } = link; let { id } = this.state; + let countText; + if (itemCount !== undefined && this.props.linkFormat !== PivotLinkFormat.tabs) { + countText = ({ itemCount }); + } + return ( { aria-controls={ id + '-panel' } aria-selected={ this.state.selectedKey === itemKey }> { link.linkText } + { countText } ); } @@ -152,7 +158,8 @@ export class Pivot extends React.Component { links.push({ linkText: pivotItem.props.linkText, ariaLabel: pivotItem.props.ariaLabel, - itemKey: itemKey + itemKey: itemKey, + itemCount: pivotItem.props.itemCount }); this._keyToIndexMapping[itemKey] = index; } diff --git a/src/components/Pivot/PivotItem.Props.ts b/src/components/Pivot/PivotItem.Props.ts index a06e500b1fcbf0..ecb184c12646f0 100644 --- a/src/components/Pivot/PivotItem.Props.ts +++ b/src/components/Pivot/PivotItem.Props.ts @@ -19,4 +19,12 @@ export interface IPivotItemProps extends React.HTMLProps { * Note that unless you have compelling requirements you should not override aria-label. */ ariaLabel?: string; + + /** + * An optional item count that gets displayed just after the linkText(itemCount) + * + * Example: completed(4) + */ + itemCount?: number; + } \ No newline at end of file diff --git a/src/components/ProgressIndicator/ProgressIndicator.scss b/src/components/ProgressIndicator/ProgressIndicator.scss index 4828ca94cb2974..717b5c0698b6b5 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. @@ -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; } @@ -43,9 +48,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; @@ -56,8 +63,6 @@ $ProgressIndicatorTextHeight: 18px; } } -// TODO: Remove override below. - .ms-ProgressIndicator-progressBar.smoothTransition { transition-property: width; transition-timing-function: linear; diff --git a/src/components/SearchBox/SearchBox.scss b/src/components/SearchBox/SearchBox.scss index 9d96eeb44ad672..41057fafc1fcdf 100644 --- a/src/components/SearchBox/SearchBox.scss +++ b/src/components/SearchBox/SearchBox.scss @@ -8,12 +8,17 @@ // Search box styles +$SearchBox-field-padding-left: 10px; +$SearchBox-height: 36px; + .ms-SearchBox { @include ms-font-m; @include ms-u-normalize; + color: $ms-color-neutralPrimary; position: relative; margin-bottom: 10px; display: inline-block; + width: 100%; // State: Disabled searchbox &.is-disabled { @@ -31,9 +36,34 @@ // State: Active searchbox &.is-active { + .ms-SearchBox-closeButton { display: block; outline: transparent 1px solid; + padding: 0px; + + .ms-Icon--Clear { + line-height: $SearchBox-height; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + } + } + } + + &:hover { + + .ms-SearchBox-field { + border-color: $ms-color-themeDarker; + } + + .ms-SearchBox-label { + color: $ms-color-black; + + .ms-SearchBox-icon { + color:$ms-color-themeDarker; + } } } } @@ -44,32 +74,19 @@ 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; + @include padding(6px, 3px, 7px, $SearchBox-field-padding-left); + width: 100%; 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; - border-color: $ms-color-themePrimary; - background-color: $ms-color-themeLighter; + @include padding-right(32px); + border-color: $ms-color-themeDarker; } &::-ms-clear { @@ -81,79 +98,39 @@ border: none; cursor: pointer; position: absolute; - right: 0; top: 0; - height: 32px; - width: 32px; + height: $SearchBox-height; + width: 40px; background-color: $ms-color-themePrimary; text-align: center; display: none; - font-size: $ms-font-size-l; + font-size: 16px; color: $ms-color-white; z-index: $ms-zIndex-front; + @include right(0); + @include left(auto); } .ms-SearchBox-label { position: absolute; top: 0; - left: 0; - padding-left: 8px; - line-height: 32px; + line-height: $SearchBox-height; + height: $SearchBox-height; color: $ms-color-neutralSecondary; -} - -.ms-SearchBox-icon { - margin-right: 7px; - font-size: $ms-font-size-l; - color: $ms-color-neutralSecondaryAlt; -} - -// TODO: Remove overrides below. - -// Override Fabric so that the SearchBox takes up 100% of the parent -// container's width -.ms-SearchBox, -.ms-SearchBox-field { - width: 100% -} - -// Override Fabric so that the label can be displayed on top of the input -// instead of behind it. Since the input is no longer using a semi-transparent -// background color, and want the label to still display during the hover state. -.ms-SearchBox-label { z-index: 10; -} - -// Fabric was using a mouseover and mouseout events to toggle the ".hover" class -// It's not clear to me why that is, but it seems just applying the styles -// to a :hover state seems to work just fine -.ms-SearchBox-field { - &:hover { - border-color: $ms-color-themePrimary; - background-color: $ms-color-themeLighter; - - & + .ms-SearchBox-label { - color: $ms-color-black; - - .ms-Icon { - color: $ms-color-neutralPrimary; - } - } - } -} - -// Fabric RTL fixes. These values are the same as in the fabric src, -// but we are replacing the properties with the SASS mixins. -.ms-SearchBox-label { - @include padding-left(8px); + @include padding-left(12px); @include left(0); } .ms-SearchBox-icon { - @include margin-right(7px); + font-size: $ms-font-size-l; + color: $ms-color-neutralSecondaryAlt; + position: relative; + top: 50%; + transform: translateY(-50%); + font-size: 16px; + width: 16px; + color: #0078d7; + vertical-align: top; + @include margin-right(6px); } - -.ms-SearchBox-closeButton { - @include right(0); - @include left(auto); -} \ No newline at end of file diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx index 8e9acfb5394442..5e02ecb0afe9dc 100644 --- a/src/components/SearchBox/SearchBox.tsx +++ b/src/components/SearchBox/SearchBox.tsx @@ -51,16 +51,19 @@ export class SearchBox extends React.Component 'is-active': hasFocus })} > - { !hasFocus && !value ? : null } + { !hasFocus && !value ? : null } - + ); } private _clearInput(ev?: any) { this.setState({ - value: undefined + value: '' }); ev.stopPropagation(); ev.preventDefault(); diff --git a/src/components/Slider/Slider.scss b/src/components/Slider/Slider.scss index e8ba3d8ad5748f..67ff0b4c83e71c 100644 --- a/src/components/Slider/Slider.scss +++ b/src/components/Slider/Slider.scss @@ -98,10 +98,10 @@ .ms-Slider-slideBox:active { .ms-Slider-thumb { - border: 2px solid $ms-color-themeDark; + border: 2px solid $ms-color-themeDarkAlt; } .ms-Slider-active { - background-color: $ms-color-themeDark; + background-color: $ms-color-themeDarkAlt; } } } diff --git a/src/components/Spinner/Spinner.scss b/src/components/Spinner/Spinner.scss index 050f75bc6b8104..9ca9e53ebf05f3 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. @@ -9,6 +9,7 @@ .ms-Spinner { + @include ms-baseFont; position: relative; height: 20px; @@ -16,7 +17,7 @@ height: 28px; .ms-Spinner-label { - left: 34px; + @include left(34px); top: 6px; } } @@ -38,28 +39,11 @@ } .ms-Spinner-label { + @include ms-font-s; position: relative; - @include ms-font-s(); color: $ms-color-themePrimary; - left: 28px; - top: 2px; -} - -// TODO: Remove overrides below. - -/** - Change from Fabric - RTL support -*/ -.ms-Spinner { - &.ms-Spinner--large { - .ms-Spinner-label { - @include left(34px); - } - } -} - -.ms-Spinner-label { @include left(28px); + top: 2px; } /** diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index 1d6fd06e8614e6..e406cb031ee851 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -7,14 +7,20 @@ // -------------------------------------------------- // Single line (input) and multiline (textarea) form field styles - @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-regular; + } } //= State: A disabled textfield @@ -49,16 +55,18 @@ .ms-TextField-field { @include ms-u-normalize; + @include ms-baseFont; 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-regular; + font-size: $ms-font-size-m; color: $ms-color-neutralPrimary; height: 32px; - padding: 6px 10px 8px; + @include padding(6px, 12px, 7px, 12px); width: 100%; min-width: 180px; outline: 0; + text-overflow: ellipsis; &:hover { border-color: $ms-color-neutralSecondaryAlt; @@ -79,6 +87,13 @@ } } + &[disabled] { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + @include input-placeholder { color: $ms-color-neutralSecondary; } @@ -90,29 +105,6 @@ } -//== Modifier: Single line (default), placeholder label -// -.ms-TextField.ms-TextField--placeholder { - position: relative; - - .ms-Label { - position: absolute; - font-family: $ms-font-family-semilight; - font-size: $ms-font-size-s; - color: $ms-color-neutralSecondary; - padding: 7px 0 7px 10px; - } - - &.is-disabled { - color: $ms-color-neutralTertiary; - - .ms-Label { - @include ms-Label-is-disabled; - } - } -} - - //== Modifier: Single line (default), underlined // .ms-TextField.ms-TextField--underlined { @@ -139,12 +131,12 @@ } .ms-Label { - font-size: $ms-font-size-s; - margin-right: 8px; + font-size: $ms-font-size-m; + @include margin-right(8px); display: table-cell; - vertical-align: bottom; - padding-left: 12px; - padding-bottom: 5px; + vertical-align: top; + @include padding-left(12px); + padding-top: 9px; height: 32px; width: 1%; white-space: nowrap; @@ -152,11 +144,11 @@ .ms-TextField-field { border: 0; - float: left; + @include float(left); display: table-cell; - text-align: left; + @include text-align(left); padding-top: 8px; - padding-bottom: 2px; + padding-bottom: 3px; &:active, &:focus, @@ -196,7 +188,11 @@ // .ms-TextField.ms-TextField--multiline { .ms-TextField-field { - @include ms-font-s; + @include ms-baseFont; + color: $ms-color-neutralPrimary; + 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; @@ -210,6 +206,7 @@ @include ms-font-s; @include ms-fontColor-redDark; @include resetMargins; + padding-top: 5px; } .ms-TextField-invalid, diff --git a/src/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.scss index bd635b9eeddd28..cbedef75253e32 100644 --- a/src/components/Toggle/Toggle.scss +++ b/src/components/Toggle/Toggle.scss @@ -19,8 +19,10 @@ // Toggle .ms-Toggle { + @include ms-baseFont; @include ms-font-m; @include ms-u-normalize; + color: $ms-color-neutralPrimary; position: relative; display: block; diff --git a/src/demo/app.scss b/src/demo/app.scss index 5750c5549e3bef..a3ac6bbb8b6aef 100644 --- a/src/demo/app.scss +++ b/src/demo/app.scss @@ -1,4 +1,4 @@ -@import "~office-ui-fabric/src/sass/Fabric"; +@import '~office-ui-fabric-core/dist/sass/Fabric'; @import '../common/common'; html, body { diff --git a/src/demo/components/Header/Header.tsx b/src/demo/components/Header/Header.tsx index 5de3c4c93197e2..e92aa638113067 100644 --- a/src/demo/components/Header/Header.tsx +++ b/src/demo/components/Header/Header.tsx @@ -58,11 +58,11 @@ export class Header extends React.Component {
    { (responsiveMode <= ResponsiveMode.large) && ( ) }
    - + { title }
    @@ -71,7 +71,7 @@ export class Header extends React.Component { { link.name } )).concat([ ]) } @@ -113,7 +113,7 @@ export class Header extends React.Component { return [{ key: 'isRTL', name: `Render in ${ this.state.isRTLEnabled ? 'LTR' : 'RTL' }`, - icon: 'gear', + icon: 'Settings', onClick: this._onRTLToggled }]; } diff --git a/src/demo/components/PropertiesTable/PropertiesTable.scss b/src/demo/components/PropertiesTable/PropertiesTable.scss index d6842a67a436e8..5b6d5353771e22 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; diff --git a/src/demo/pages/ButtonPage/examples/Button.Basic.Example.tsx b/src/demo/pages/ButtonPage/examples/Button.Basic.Example.tsx index 06744f1236acd5..b326dbeab3a975 100644 --- a/src/demo/pages/ButtonPage/examples/Button.Basic.Example.tsx +++ b/src/demo/pages/ButtonPage/examples/Button.Basic.Example.tsx @@ -33,7 +33,7 @@ export class ButtonBasicExample extends React.ComponentCreate account - + @@ -41,14 +41,14 @@ export class ButtonBasicExample extends React.ComponentCommand button -
    diff --git a/src/demo/pages/CalloutPage/examples/CalloutExample.scss b/src/demo/pages/CalloutPage/examples/CalloutExample.scss index b0a7e3992671fe..586d2f5dcb7860 100644 --- a/src/demo/pages/CalloutPage/examples/CalloutExample.scss +++ b/src/demo/pages/CalloutPage/examples/CalloutExample.scss @@ -1,6 +1,3 @@ -.ms-CalloutExample { -} - .ms-CalloutExample-callout { max-width: 300px; } @@ -14,7 +11,6 @@ vertical-align: top; display: inline-block; min-width: 130px; - top: 85px; margin: 0 100px; text-align: center; height: 32px; @@ -40,12 +36,6 @@ text-align: center; } -.ms-CalloutExample-buttonArea .ms-Button { - top: 80px; - text-align: center; - width: 100%; -} - .ms-CalloutExample-title { font-size: x-large; } diff --git a/src/demo/pages/ChoiceGroupPage/examples/ChoiceGroup.Basic.Example.tsx b/src/demo/pages/ChoiceGroupPage/examples/ChoiceGroup.Basic.Example.tsx index 0108d007bbda00..d0f936e299e31c 100644 --- a/src/demo/pages/ChoiceGroupPage/examples/ChoiceGroup.Basic.Example.tsx +++ b/src/demo/pages/ChoiceGroupPage/examples/ChoiceGroup.Basic.Example.tsx @@ -41,6 +41,12 @@ export class ChoiceGroupBasicExample extends React.Component { return; }, items: [ { key: 'emailMessage', name: 'Email message', - icon: 'mail' + icon: 'Mail' }, { key: 'calendarEvent', name: 'Calendar event', - icon: 'calendar' + icon: 'Calendar' } ] }, { key: 'upload', name: 'Upload', - icon: 'upload', + icon: 'Upload', onClick: () => { return; } } ]; @@ -30,12 +30,12 @@ export const farItemsNonFocusable = [ { key: 'saveStatus', name: 'Your page has been saved', - icon: 'check' + icon: 'CheckMark' }, { key: 'publish', name: 'Publish', - icon: 'story', + icon: 'ReadingMode', onClick: () => { return; } } ]; \ No newline at end of file diff --git a/src/demo/pages/CommandBarPage/examples/data.ts b/src/demo/pages/CommandBarPage/examples/data.ts index 7f75a2a9ca0a5e..8a83236136c970 100644 --- a/src/demo/pages/CommandBarPage/examples/data.ts +++ b/src/demo/pages/CommandBarPage/examples/data.ts @@ -2,56 +2,56 @@ export const items = [ { key: 'newItem', name: 'New', - icon: 'circlePlus', + icon: 'Add', ariaLabel: 'New. Use left and right arrow keys to navigate', onClick: () => { return; }, items: [ { key: 'emailMessage', name: 'Email message', - icon: 'mail' + icon: 'Mail' }, { key: 'calendarEvent', name: 'Calendar event', - icon: 'calendar' + icon: 'Calendar' } ] }, { key: 'upload', name: 'Upload', - icon: 'upload', + icon: 'Upload', onClick: () => { return; } }, { key: 'share', name: 'Share', - icon: 'share', + icon: 'Share', onClick: () => { return; } }, { key: 'download', name: 'Download', - icon: 'download', + icon: 'Download', onClick: () => { return; } }, { key: 'move', name: 'Move to...', - icon: 'folderMove', + icon: 'MoveToFolder', onClick: () => { return; } }, { key: 'copy', name: 'Copy to...', - icon: 'copy', + icon: 'Copy', onClick: () => { return; } }, { key: 'rename', name: 'Rename...', - icon: 'editBox', + icon: 'Edit', onClick: () => { return; } } ]; @@ -93,37 +93,37 @@ export const iconOnlyItems = [ { key: 'upload', name: '', - icon: 'upload', + icon: 'Upload', onClick: () => { return; } }, { key: 'share', name: '', - icon: 'share', + icon: 'Share', onClick: () => { return; } }, { key: 'download', name: '', - icon: 'download', + icon: 'Download', onClick: () => { return; } }, { key: 'move', name: '', - icon: 'folderMove', + icon: 'MoveToFolder', onClick: () => { return; } }, { key: 'copy', name: '', - icon: 'copy', + icon: 'Copy', onClick: () => { return; } }, { key: 'rename', name: '', - icon: 'editBox', + icon: 'Edit', onClick: () => { return; } } ]; @@ -132,17 +132,17 @@ export const overflowItems = [ { key: 'move', name: 'Move to...', - icon: 'folderMove' + icon: 'MoveToFolder' }, { key: 'copy', name: 'Copy to...', - icon: 'copy' + icon: 'Copy' }, { key: 'rename', name: 'Rename...', - icon: 'editBox' + icon: 'Edit' } ]; @@ -150,19 +150,19 @@ export const farItems = [ { key: 'sort', name: 'Sort', - icon: 'sortLines', + icon: 'SortLines', onClick: () => { return; } }, { key: 'tile', name: 'Grid view', - icon: 'tile', + icon: 'Tiles', onClick: () => { return; } }, { key: 'info', name: 'Info', - icon: 'circleInfo', + icon: 'Info', onClick: () => { return; } } ]; \ No newline at end of file diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx index ddc234e48215b9..3a822688e9e2fe 100644 --- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx +++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx @@ -26,7 +26,7 @@ export class ContextualMenuBasicExample extends React.Component { [ { key: 'newItem', - icon: 'circlePlus', + icon: 'Add', items: [ { key: 'emailMessage', @@ -43,7 +43,7 @@ export class ContextualMenuBasicExample extends React.Component { }, { key: 'upload', - icon: 'upload', + icon: 'Upload', name: 'Upload', title: 'Upload a file' }, @@ -70,12 +70,12 @@ export class ContextualMenuBasicExample extends React.Component { }, { key: 'share', - icon: 'share', + icon: 'Share', items: [ { key: 'sharetoemail', name: 'Share to Email', - icon: 'mail' + icon: 'Mail' }, { key: 'sharetofacebook', @@ -84,13 +84,13 @@ export class ContextualMenuBasicExample extends React.Component { { key: 'sharetotwitter', name: 'Share to Twitter', - icon: 'share', + icon: 'Share', items: [ { key: 'sharetoemail_1', name: 'Share to Email', title: 'Share to Email', - icon: 'mail' + icon: 'Mail' }, { key: 'sharetofacebook_1', @@ -101,7 +101,7 @@ export class ContextualMenuBasicExample extends React.Component { key: 'sharetotwitter_1', name: 'Share to Twitter', title: 'Share to Twitter', - icon: 'share' + icon: 'Share' }, ], }, @@ -110,12 +110,12 @@ export class ContextualMenuBasicExample extends React.Component { }, { key: 'print', - icon: 'print', + icon: 'Print', name: 'Print' }, { key: 'music', - icon: 'music', + icon: 'MusicInCollectionFill', name: 'Music', }, { diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx index 31daeb39ef727a..73619d4bae9f97 100644 --- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx +++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx @@ -40,7 +40,6 @@ export class ContextualMenuCheckmarksExample extends React.Component this._onSortColumn(column.key, false) @@ -363,7 +363,7 @@ export class DetailsListAdvancedExample extends React.Component this._onSortColumn(column.key, true) @@ -373,7 +373,7 @@ export class DetailsListAdvancedExample extends React.Component this._onGroupByColumn(column) diff --git a/src/demo/pages/DocumentCardPage/examples/DocumentCard.Basic.Example.tsx b/src/demo/pages/DocumentCardPage/examples/DocumentCard.Basic.Example.tsx index f5f6baf70f1959..369b9c0a449b2c 100644 --- a/src/demo/pages/DocumentCardPage/examples/DocumentCard.Basic.Example.tsx +++ b/src/demo/pages/DocumentCardPage/examples/DocumentCard.Basic.Example.tsx @@ -35,7 +35,7 @@ export class DocumentCardBasicExample extends React.Component { activity='Created a few minutes ago' people={ [ - { name: 'Kat Larrson', profileImageSrc: 'dist/avatar-kat.png' } + { name: 'Annie Lindqvist', profileImageSrc: 'images/persona-female.png' } ] } /> diff --git a/src/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx b/src/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx index ba7ae37a7827bb..41d4dc22b37c62 100644 --- a/src/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx +++ b/src/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx @@ -91,9 +91,9 @@ export class DocumentCardCompleteExample extends React.Component { activity='Created Feb 23, 2016' people={ [ - { name: 'Kat Larrson', profileImageSrc: 'dist/avatar-kat.png' }, - { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' }, - { name: 'Tina Dasani', profileImageSrc: 'dist/avatar-kat.png' } + { name: 'Annie Lindqvist', profileImageSrc: 'images/persona-female.png' }, + { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' }, + { name: 'Greta Lundberg', profileImageSrc: 'images/persona-female.png' } ] } /> @@ -101,7 +101,7 @@ export class DocumentCardCompleteExample extends React.Component { actions={ [ { - icon: 'share', + icon: 'Share', onClick: (ev: any) => { console.log('You clicked the share action.'); ev.preventDefault(); @@ -110,22 +110,22 @@ export class DocumentCardCompleteExample extends React.Component { ariaLabel: 'share action' }, { - icon: 'pinLeft', + icon: 'Pin', onClick: (ev: any) => { console.log('You clicked the pin action.'); ev.preventDefault(); ev.stopPropagation(); }, - ariaLabel: 'pin left action' + ariaLabel: 'pin action' }, { - icon: 'bell', + icon: 'Ringer', onClick: (ev: any) => { - console.log('You clicked the bell action.'); + console.log('You clicked the ringer action.'); ev.preventDefault(); ev.stopPropagation(); }, - ariaLabel: 'bell action' + ariaLabel: 'ringer action' }, ] } diff --git a/src/demo/pages/DocumentCardPage/images/avatar-josh.png b/src/demo/pages/DocumentCardPage/images/avatar-josh.png deleted file mode 100644 index 598ae48e61f60c..00000000000000 Binary files a/src/demo/pages/DocumentCardPage/images/avatar-josh.png and /dev/null differ diff --git a/src/demo/pages/DocumentCardPage/images/avatar-kat.png b/src/demo/pages/DocumentCardPage/images/avatar-kat.png deleted file mode 100644 index 3ece38e5cdaa63..00000000000000 Binary files a/src/demo/pages/DocumentCardPage/images/avatar-kat.png and /dev/null differ diff --git a/src/demo/pages/GettingStartedPage/GettingStartedPage.scss b/src/demo/pages/GettingStartedPage/GettingStartedPage.scss index 67844a70a6a314..194c9fd8b27b2e 100644 --- a/src/demo/pages/GettingStartedPage/GettingStartedPage.scss +++ b/src/demo/pages/GettingStartedPage/GettingStartedPage.scss @@ -19,7 +19,6 @@ .ms-GettingStartedPage-banner { background: $ms-color-neutralLight; - color: white; padding: 1px 20px; margin: -20px; margin-bottom: 20px; diff --git a/src/demo/pages/LinkPage/examples/Link.Basic.Example.tsx b/src/demo/pages/LinkPage/examples/Link.Basic.Example.tsx index dc1e0952cff144..bb7f913da53c60 100644 --- a/src/demo/pages/LinkPage/examples/Link.Basic.Example.tsx +++ b/src/demo/pages/LinkPage/examples/Link.Basic.Example.tsx @@ -9,7 +9,7 @@ export class LinkBasicExample extends React.Component {
    I am a link with an href. Also, - i am a link without an href. + I am a link without an href.
    ); } diff --git a/src/demo/pages/ListPage/examples/List.Mail.Example.scss b/src/demo/pages/ListPage/examples/List.Mail.Example.scss index 59dbfd77ba7a44..448a9baa5baca8 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; } } diff --git a/src/demo/pages/MarqueeSelectionPage/examples/MarqueeSelection.Basic.Example.tsx b/src/demo/pages/MarqueeSelectionPage/examples/MarqueeSelection.Basic.Example.tsx index b0bcfa9e972c11..e9c05daacb1921 100644 --- a/src/demo/pages/MarqueeSelectionPage/examples/MarqueeSelection.Basic.Example.tsx +++ b/src/demo/pages/MarqueeSelectionPage/examples/MarqueeSelection.Basic.Example.tsx @@ -15,7 +15,7 @@ const PHOTOS = createArray(250, () => { const randomWidth = 50 + Math.floor(Math.random() * 150); return { - url: `http://placekitten.com/${randomWidth}/100`, + url: `http://placehold.it/${randomWidth}x100`, width: randomWidth, height: 100 }; diff --git a/src/demo/pages/MessageBarPage/examples/MessageBar.Basic.Example.tsx b/src/demo/pages/MessageBarPage/examples/MessageBar.Basic.Example.tsx index e2d465c5cfa096..f741d5332d8152 100644 --- a/src/demo/pages/MessageBarPage/examples/MessageBar.Basic.Example.tsx +++ b/src/demo/pages/MessageBarPage/examples/MessageBar.Basic.Example.tsx @@ -21,12 +21,12 @@ export const MessageBarBasicExample = () => ( onDismiss={ () => { console.log('test'); } }> Error - lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit. - - Blocked MessageBar - single line + { console.log('test'); } } isMultiline={ false } actions={
    }> - Remove - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris. Visit our website     + Blocked - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris. Visit our website     .NumberTextField-restoreButton { vertical-align: top; - padding-top: 26px; + padding-top: 29px; } } diff --git a/src/demo/utilities/data.ts b/src/demo/utilities/data.ts index 285ddc06017ec3..5b8071ccc071d6 100644 --- a/src/demo/utilities/data.ts +++ b/src/demo/utilities/data.ts @@ -15,7 +15,7 @@ export function createListItems(count: number, startIndex = 0): any { let size = 150 + Math.round(Math.random() * 100); return { - thumbnail: `//placekitten.com/${ size }/${ size }`, + thumbnail: `//placehold.it/${ size }x${ size }`, key: 'item-' + (index + startIndex) + ' ' + lorem(4), name: lorem(5), description: lorem(10 + Math.round(Math.random() * 50)),