@microsoft/sp-component-base 1.16.1 → 1.17.0-beta.1

package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Font.Mixins.scss

@@ -1,403 +0,0 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Font definitions
-
-/*
-  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
-*/
-
-// Produce @font-face definitions for the web fonts.
-@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: 'segoeui') {
-  @font-face {
-    font-family: $font-family-name;
-    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2') format('woff2'),
-      url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff') format('woff');
-    font-weight: $ms-font-weight-light;
-    font-style: normal;
-  }
-
-  @font-face {
-    font-family: $font-family-name;
-    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2') format('woff2'),
-      url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff') format('woff');
-    font-weight: $ms-font-weight-semilight;
-    font-style: normal;
-  }
-
-  @font-face {
-    font-family: $font-family-name;
-    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2') format('woff2'),
-      url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff') format('woff');
-    font-weight: $ms-font-weight-regular;
-    font-style: normal;
-  }
-
-  @font-face {
-    font-family: $font-family-name;
-    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2') format('woff2'),
-      url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff') format('woff');
-    font-weight: $ms-font-weight-semibold;
-    font-style: normal;
-  }
-
-  @font-face {
-    font-family: $font-family-name;
-    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2') format('woff2'),
-      url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff') format('woff');
-    font-weight: $ms-font-weight-bold;
-    font-style: normal;
-  }
-}
-
-// Generate overrides to set font-family based on the lang attribute.
-@mixin ms-font-family-language-override($language-code, $font-family) {
-  *[lang^='#{$language-code}'] .ms-Fabric,
-  .ms-Fabric *[lang^='#{$language-code}'],
-  .ms-Fabric[lang^='#{$language-code}'] {
-    font-family: $font-family;
-  }
-}
-
-// Super Styles (LIMITED USE)
-@mixin ms-font-su {
-  font-size: $ms-font-size-su;
-  font-weight: $ms-font-weight-light;
-}
-
-// Extra-Extra-Large
-@mixin ms-font-xxl {
-  font-size: $ms-font-size-xxl;
-  font-weight: $ms-font-weight-light;
-}
-
-// Extra-Large Styles
-@mixin ms-font-xl-plus {
-  font-size: $ms-font-size-xl-plus;
-  font-weight: $ms-font-weight-light;
-}
-
-// Extra-Large Styles
-@mixin ms-font-xl {
-  font-size: $ms-font-size-xl;
-  font-weight: $ms-font-weight-light;
-}
-
-// Large Styles
-@mixin ms-font-l {
-  font-size: $ms-font-size-l;
-  font-weight: $ms-font-weight-semilight;
-}
-
-// Medium Plus Styles
-@mixin ms-font-m-plus {
-  font-size: $ms-font-size-m-plus;
-  font-weight: $ms-font-weight-regular;
-}
-
-// Medium Styles
-@mixin ms-font-m {
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
-}
-
-// Small Plus Styles
-@mixin ms-font-s-plus {
-  font-size: $ms-font-size-s-plus;
-  font-weight: $ms-font-weight-regular;
-}
-
-// Small Styles
-@mixin ms-font-s {
-  font-size: $ms-font-size-s;
-  font-weight: $ms-font-weight-regular;
-}
-
-// XS Styles
-@mixin ms-font-xs {
-  font-size: $ms-font-size-xs;
-  font-weight: $ms-font-weight-regular;
-}
-
-// Micro Styles (LIMITED USE)
-@mixin ms-font-mi {
-  font-size: $ms-font-size-mi;
-  font-weight: $ms-font-weight-semibold;
-}
-
-//== Helper classes & mixins
-//
-// Helper mixins to override default type values
-
-// Font weights
-@mixin ms-fontWeight-light {
-  font-weight: $ms-font-weight-light;
-}
-
-@mixin ms-fontWeight-semilight {
-  font-weight: $ms-font-weight-semilight;
-}
-
-@mixin ms-fontWeight-regular {
-  font-weight: $ms-font-weight-regular;
-}
-
-@mixin ms-fontWeight-semibold {
-  font-weight: $ms-font-weight-semibold;
-}
-
-@mixin ms-fontWeight-bold {
-  font-weight: $ms-font-weight-bold;
-}
-
-// Font sizes
-@mixin ms-fontSize-su {
-  font-size: $ms-font-size-su;
-}
-
-@mixin ms-fontSize-xxl {
-  font-size: $ms-font-size-xxl;
-}
-
-@mixin ms-fontSize-xlPlus {
-  font-size: $ms-font-size-xl-plus;
-}
-
-@mixin ms-fontSize-xl {
-  font-size: $ms-font-size-xl;
-}
-
-@mixin ms-fontSize-l {
-  font-size: $ms-font-size-l;
-}
-
-@mixin ms-fontSize-mPlus {
-  font-size: $ms-font-size-m-plus;
-}
-
-@mixin ms-fontSize-m {
-  font-size: $ms-font-size-m;
-}
-
-@mixin ms-fontSize-sPlus {
-  font-size: $ms-font-size-s-plus;
-}
-
-@mixin ms-fontSize-s {
-  font-size: $ms-font-size-s;
-}
-
-@mixin ms-fontSize-xs {
-  font-size: $ms-font-size-xs;
-}
-
-@mixin ms-fontSize-mi {
-  font-size: $ms-font-size-mi;
-}
-
-// Theme colors
-@mixin ms-fontColor-themeDarker {
-  color: $ms-color-themeDarker;
-}
-
-@mixin ms-fontColor-themeDark {
-  color: $ms-color-themeDark;
-}
-
-@mixin ms-fontColor-themeDarkAlt {
-  color: $ms-color-themeDarkAlt;
-}
-
-@mixin ms-fontColor-themePrimary {
-  color: $ms-color-themePrimary;
-}
-
-@mixin ms-fontColor-themeSecondary {
-  color: $ms-color-themeSecondary;
-}
-
-@mixin ms-fontColor-themeTertiary {
-  color: $ms-color-themeTertiary;
-}
-
-@mixin ms-fontColor-themeLight {
-  color: $ms-color-themeLight;
-}
-
-@mixin ms-fontColor-themeLighter {
-  color: $ms-color-themeLighter;
-}
-
-@mixin ms-fontColor-themeLighterAlt {
-  color: $ms-color-themeLighterAlt;
-}
-
-// Neutral colors
-@mixin ms-fontColor-black {
-  color: $ms-color-black;
-}
-
-@mixin ms-fontColor-neutralDark {
-  color: $ms-color-neutralDark;
-}
-
-@mixin ms-fontColor-neutralPrimary {
-  color: $ms-color-neutralPrimary;
-}
-
-@mixin ms-fontColor-neutralPrimaryAlt {
-  color: $ms-color-neutralPrimaryAlt;
-}
-
-@mixin ms-fontColor-neutralSecondary {
-  color: $ms-color-neutralSecondary;
-}
-
-@mixin ms-fontColor-neutralSecondaryAlt {
-  color: $ms-color-neutralSecondaryAlt;
-}
-
-@mixin ms-fontColor-neutralTertiary {
-  color: $ms-color-neutralTertiary;
-}
-
-@mixin ms-fontColor-neutralTertiaryAlt {
-  color: $ms-color-neutralTertiaryAlt;
-}
-
-@mixin ms-fontColor-neutralLight {
-  color: $ms-color-neutralLight;
-}
-
-@mixin ms-fontColor-neutralLighter {
-  color: $ms-color-neutralLighter;
-}
-
-@mixin ms-fontColor-neutralLighterAlt {
-  color: $ms-color-neutralLighterAlt;
-}
-
-@mixin ms-fontColor-white {
-  color: $ms-color-white;
-}
-
-// Brand and accent colors
-@mixin ms-fontColor-yellow {
-  color: $ms-color-yellow;
-}
-
-@mixin ms-fontColor-yellowLight {
-  color: $ms-color-yellowLight;
-}
-
-@mixin ms-fontColor-orange {
-  color: $ms-color-orange;
-}
-
-@mixin ms-fontColor-orangeLight {
-  color: $ms-color-orangeLight;
-}
-
-@mixin ms-fontColor-orangeLighter {
-  color: $ms-color-orangeLighter;
-}
-
-@mixin ms-fontColor-redDark {
-  color: $ms-color-redDark;
-}
-
-@mixin ms-fontColor-red {
-  color: $ms-color-red;
-}
-
-@mixin ms-fontColor-magentaDark {
-  color: $ms-color-magentaDark;
-}
-
-@mixin ms-fontColor-magenta {
-  color: $ms-color-magenta;
-}
-
-@mixin ms-fontColor-magentaLight {
-  color: $ms-color-magentaLight;
-}
-
-@mixin ms-fontColor-purpleDark {
-  color: $ms-color-purpleDark;
-}
-
-@mixin ms-fontColor-purple {
-  color: $ms-color-purple;
-}
-
-@mixin ms-fontColor-purpleLight {
-  color: $ms-color-purpleLight;
-}
-
-@mixin ms-fontColor-blueDark {
-  color: $ms-color-blueDark;
-}
-
-@mixin ms-fontColor-blueMid {
-  color: $ms-color-blueMid;
-}
-
-@mixin ms-fontColor-blue {
-  color: $ms-color-blue;
-}
-
-@mixin ms-fontColor-blueLight {
-  color: $ms-color-blueLight;
-}
-
-@mixin ms-fontColor-tealDark {
-  color: $ms-color-tealDark;
-}
-
-@mixin ms-fontColor-teal {
-  color: $ms-color-teal;
-}
-
-@mixin ms-fontColor-tealLight {
-  color: $ms-color-tealLight;
-}
-
-@mixin ms-fontColor-greenDark {
-  color: $ms-color-greenDark;
-}
-
-@mixin ms-fontColor-green {
-  color: $ms-color-green;
-}
-
-@mixin ms-fontColor-greenLight {
-  color: $ms-color-greenLight;
-}
-
-// Message colors
-@mixin ms-fontColor-info {
-  color: $ms-color-info;
-}
-
-@mixin ms-fontColor-success {
-  color: $ms-color-success;
-}
-
-@mixin ms-fontColor-alert {
-  // @todo: Deprecated: Use ms-fontColor-severeWarning
-  color: $ms-color-alert;
-}
-
-@mixin ms-fontColor-warning {
-  color: $ms-color-warning;
-}
-
-@mixin ms-fontColor-severeWarning {
-  color: $ms-color-severeWarning;
-}
-
-@mixin ms-fontColor-error {
-  color: $ms-color-error;
-}

package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_General.Mixins.scss

@@ -1,228 +0,0 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Vendor-prefixed mixins
-
-// Border radius.
-@mixin ms-border-radius($radius: 5px) {
-  border-radius: $radius;
-  background-clip: padding-box;
-}
-
-// Drop shadow.
-@mixin ms-drop-shadow($x-offset: 0, $y-offset: 0, $blur: 5px, $spread: 0, $alpha: 0.4) {
-  @include ms-box-shadow($x-offset, $y-offset $blur $spread rgba(0, 0, 0, $alpha));
-}
-
-// Background gradient.
-@mixin ms-background-gradient(
-  $origin: left,
-  $start: #000,
-  $start-location: 0%,
-  $stop: #fff,
-  $stop-location: 100%
-) {
-  // To maintain compatibility with the old arguments, reverse
-  // the $origin direction and set it as $destination.
-  $destination: null;
-  @if $origin == top {
-    $destination: bottom;
-  }
-  @if $origin == right {
-    $destination: left;
-  }
-  @if $origin == bottom {
-    $destination: top;
-  }
-  @if $origin == left {
-    $destination: right;
-  }
-
-  background-color: $start;
-  background-image: linear-gradient(to $destination, $start $start-location, $stop $stop-location);
-}
-
-// Rotation.
-@mixin ms-rotate($degrees) {
-  @include ms-transform-rotate($degrees);
-}
-
-// Prevents user selection of text elements.
-@mixin ms-user-select($val) {
-  -webkit-touch-callout: $val;
-  -webkit-user-select: $val;
-  -khtml-user-select: $val;
-  -moz-user-select: $val;
-  -ms-user-select: $val;
-  user-select: $val;
-}
-
-// Prevents the text within a block element from wrapping to second line.
-@mixin ms-no-wrap() {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Flexbox
-@mixin ms-flex-box() {
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
-@mixin ms-alignItems($mode) {
-  -webkit-box-align: $mode;
-  -moz-box-align: $mode;
-  -ms-flex-align: $mode;
-  -webkit-align-items: $mode;
-  align-items: $mode;
-}
-
-// Base/wrapper component to set typography throughout the app.
-@mixin ms-Fabric {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  @include ms-inherit-font-family();
-  color: $ms-color-neutralPrimary;
-  font-family: $ms-font-family-west-european;
-  font-size: $ms-font-size-m;
-}
-
-// Set the font-family to 'inherit' for elements where the browser
-// styles commonly conflict with the font-family that we want.
-@mixin ms-inherit-font-family() {
-  button,
-  input,
-  textarea {
-    font-family: inherit;
-  }
-}
-
-// Overrides the browser's default focus outline style.
-@mixin ms-focus-outline($inset: 0, $color: $ms-focus-border-color) {
-  // Only do this when it's a child of ms-Fabric in a focusVisible state.
-  .ms-Fabric.is-focusVisible &:focus {
-    outline: $ms-focus-border-width $ms-focus-border-style $color;
-    outline-offset: -$inset;
-  }
-}
-
-// Simulates a focus outline using an absolutely-positioned pseudo-element.
-@mixin ms-focus-border($inset: 0, $color: $ms-focus-border-color) {
-  // Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.
-  outline: transparent;
-
-  // Requirement because pseudo-element is absolutely positioned.
-  position: relative;
-
-  // Clear the focus border in Firefox.
-  // Reference: http://stackoverflow.com/a/199319/1436671
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  // When the element that uses this mixin is in a :focus state, add a pseudo-element to
-  // create a border. Only do this when it's a child of ms-Fabric in a focusVisible state.
-  .ms-Fabric.is-focusVisible &:focus::after {
-    // Wrap the parent element with $padding.
-    content: '';
-    position: absolute;
-    top: $inset;
-    right: $inset;
-    bottom: $inset;
-    left: $inset;
-
-    // Add focus border of specified $color.
-    border: $ms-focus-border-width $ms-focus-border-style $color;
-
-    // Make the content not respond to mouse/touch events.
-    // Reference: https://css-tricks.com/almanac/properties/p/pointer-events/
-    pointer-events: none;
-  }
-}
-
-// The best box is a border box.
-@mixin ms-borderBox {
-  box-sizing: border-box;
-}
-
-// For setting the border base width
-@mixin ms-borderBase {
-  border: 1px solid;
-}
-
-// Ensures the block expands to the full height to enclose its floated childen.
-@mixin ms-clearfix {
-  *zoom: 1;
-  &::before,
-  &::after {
-    display: table;
-    content: '';
-    line-height: 0;
-  }
-  &::after {
-    clear: both;
-  }
-}
-
-// Basic border-box, margin, and padding reset.
-@mixin ms-normalize {
-  @include ms-borderBox;
-  box-shadow: none;
-  margin: 0;
-  padding: 0;
-}
-
-// Generate text alignment classes, such as .ms-textAlignLeft
-// @param [variable list] $alignments
-@mixin ms-textAlign($alignments...) {
-  @warn 'The ms-textAlign mixin has been deprecated and will be removed in a future release of Fabric Core.';
-  @each $align in $alignments {
-    $alignStr: inspect($align);
-    .ms-textAlign#{to-upper-case(str-slice($alignStr, 1, 1)) + str-slice($alignStr, 2)} {
-      @include ms-text-align($align);
-    }
-  }
-}
-
-// To hide content while still making it readable by screen readers (Accessibility)
-@mixin ms-screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-// To add truncation with ellipsis
-@mixin ms-textTruncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal; // Fix for IE 8/9 in case 'word-wrap: break-word' is set on parent nodes
-}
-
-// To disable text wrapping
-@mixin ms-noWrap {
-  white-space: nowrap;
-}
-
-// Replace or remove a portion of a string.
-// Thanks to https://www.sassmeister.com/gist/1b4f2da5527830088e4d
-@function ms-string-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      ms-string-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}

package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Grid.Mixins.scss

@@ -1,39 +0,0 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Fluid 12-column grids for small, medium, and large devices
-
-//== Grid container (same for all sizes)
-//
-@mixin ms-Grid {
-  @include ms-borderBox;
-  @include ms-clearfix;
-  padding: 0 8px;
-}
-
-//== Grid rows (pull first and last column out)
-//
-@mixin ms-Grid-row {
-  margin: 0 -8px;
-  @include ms-borderBox;
-  @include ms-clearfix;
-}
-
-//== Grid cells
-//
-@mixin ms-Grid-col {
-  @include ms-float(left);
-  position: relative;
-  min-height: 1px;
-  padding-left: 8px;
-  padding-right: 8px;
-  @include ms-borderBox;
-
-  // For nested grids (a grid inside a column), removing the padding
-  // so that the nested grid's columns go to the edge of the parent's.
-  .ms-Grid {
-    padding: 0;
-  }
-}