office-ui-fabric-js-rails 1.3.0.0 → 1.4.0.0

data/vendor/assets/scss/components/PersonaCard.scss

@@ -1,211 +1,211 @@
 /**
- * Office UI Fabric JS 1.3.0
+ * Office UI Fabric JS 1.4.0
  * The JavaScript front-end framework for building experiences for Office 365.
  **/
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Persona Card styles
-
-
-// Small
-//
-// The persona card docks to the bottom of the viewport.
-.ms-PersonaCard {
-  @include ms-baseFont;
-  @include ms-u-slideUpIn10;
-  color: $ms-color-neutralPrimary;
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  outline: 1px solid transparent;
-}
-
-.ms-PersonaCard-persona {
-  background-color: $ms-color-neutralLighter;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  padding-left: 20px;
-}
-
-.ms-PersonaCard-actions {
-  @include ms-u-borderBox;
-  position: relative;
-  list-style: none;
-  margin: 0;
-  padding: 0 10px;
-  background-color: $ms-color-white;
-  height: 48px;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 47px;
-    left: 0;
-    width: 100%;
-    border-top: 1px solid $ms-color-neutralTertiaryAlt;
-  }
-}
-
-.ms-PersonaCard-action,
-.ms-PersonaCard-overflow {
-  display: inline-block;
-  cursor: pointer;
-  font-size: $ms-icon-size-m;
-  height: 48px;
-  line-height: 48px;
-  padding: 0 10px;
-  color: $ms-color-neutralSecondary;
-  outline: transparent;
-  position: relative;
-  @include ms-u-borderBox;
-
-  &:hover {
-    color: $ms-color-neutralDark;
-  }
-
-  &:active {
-    color: $ms-color-themePrimary;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    top: 0;
-    left: 0;
-    z-index: 100;
-  }
-
-  // Currently-selected action
-  &.is-active {
-    color: $ms-color-themePrimary;
-
-    // Arrow
-    &::after {
-      @include ms-u-borderBox;
-      @include rotate(45deg);
-      content: '';
-      width: 10px;
-      height: 10px;
-      border: 1px solid $ms-color-neutralTertiaryAlt;
-      background-color: $ms-color-white;
-      position: absolute;
-      border-right: 0;
-      border-bottom: 0;
-      bottom: -4px;
-      left: 13px;
-    }
-  }
-}
-
-.ms-PersonaCard-overflow {
-  font-size: $ms-font-size-m;
-  color: $ms-color-neutralPrimary;
-  float: right;
-  margin-top: -1px;
-
-  &:hover {
-    color: $ms-color-themePrimary;
-  }
-}
-
-.ms-PersonaCard-orgChart {
-  position: absolute;
-  right: 12px;
-  top: -95px;
-}
-
-.ms-PersonaCard-actionDetailBox {
-  min-height: 48px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: $ms-color-white;
-}
-
-// Active detail items
-.ms-PersonaCard-details {
-  display: none;
-  width: 100%;
-  margin: 0;
-  max-height: 300px;
-  min-height: 48px;
-  color: $ms-color-neutralSecondary;
-  padding: 9px 20px;
-  box-sizing: border-box;
-
-  &.is-active {
-    display: block;
-  }
-
-  // State: Contents are collapsed to a single line.
-  &.is-collapsed {
-    height: 30px;
-    overflow: hidden;
-
-    // Show the expander icon.
-    .ms-PersonaCard-detailExpander::after {
-      @include ms-Icon--ChevronDown;
-    }
-  }
-}
-
-.ms-PersonaCard-details[data-detail-id='org'] {
-  max-height: 300px;
-}
-
-// Icon to expand a collapsed actionDetails section.
-.ms-PersonaCard-detailExpander {
-  color: $ms-color-neutralPrimary;
-  cursor: pointer;
-  font-size: $ms-icon-size-m;
-  height: 30px;
-  line-height: 30px;
-  margin-top: 2px;
-  position: absolute;
-  right: 10px;
-  text-align: center;
-  width: 30px;
-
-  &::after {
-    @include ms-Icon;
-    @include ms-Icon--ChevronUp;
-  }
-}
-
-.ms-PersonaCard-detailLine {
-  color: $ms-color-neutralPrimary;
-  line-height: 30px;
-}
-
-.ms-PersonaCard-detailLabel {
-  color: $ms-color-neutralSecondary;
-}
-
-.ms-PersonaCard-action.ms-PersonaCard-orgChart {
-  &::after {
-    display: none; // Hide arrow for orgchart action
-  }
-}
-
-@media (min-width: $ms-screen-md-min) {
-  // Undock the persona card and give it a shadow.
-  .ms-PersonaCard {
-    @include drop-shadow;
-    max-width: 360px;
-    position: relative;
-  }
-
-  .ms-ContextualHost {
-    .ms-PersonaCard {
-      box-shadow: none;
-    }
-  }
-}
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Persona Card styles
+
+
+// Small
+//
+// The persona card docks to the bottom of the viewport.
+.ms-PersonaCard {
+  @include ms-baseFont;
+  @include ms-u-slideUpIn10;
+  color: $ms-color-neutralPrimary;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+  background-color: $ms-color-neutralLighter;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 20px;
+}
+
+.ms-PersonaCard-actions {
+  @include ms-u-borderBox;
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0 10px;
+  background-color: $ms-color-white;
+  height: 48px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 47px;
+    left: 0;
+    width: 100%;
+    border-top: 1px solid $ms-color-neutralTertiaryAlt;
+  }
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+  display: inline-block;
+  cursor: pointer;
+  font-size: $ms-icon-size-m;
+  height: 48px;
+  line-height: 48px;
+  padding: 0 10px;
+  color: $ms-color-neutralSecondary;
+  outline: transparent;
+  position: relative;
+  @include ms-u-borderBox;
+
+  &:hover {
+    color: $ms-color-neutralDark;
+  }
+
+  &:active {
+    color: $ms-color-themePrimary;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    top: 0;
+    left: 0;
+    z-index: 100;
+  }
+
+  // Currently-selected action
+  &.is-active {
+    color: $ms-color-themePrimary;
+
+    // Arrow
+    &::after {
+      @include ms-u-borderBox;
+      @include rotate(45deg);
+      content: '';
+      width: 10px;
+      height: 10px;
+      border: 1px solid $ms-color-neutralTertiaryAlt;
+      background-color: $ms-color-white;
+      position: absolute;
+      border-right: 0;
+      border-bottom: 0;
+      bottom: -4px;
+      left: 13px;
+    }
+  }
+}
+
+.ms-PersonaCard-overflow {
+  font-size: $ms-font-size-m;
+  color: $ms-color-neutralPrimary;
+  float: right;
+  margin-top: -1px;
+
+  &:hover {
+    color: $ms-color-themePrimary;
+  }
+}
+
+.ms-PersonaCard-orgChart {
+  position: absolute;
+  right: 12px;
+  top: -95px;
+}
+
+.ms-PersonaCard-actionDetailBox {
+  min-height: 48px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: $ms-color-white;
+}
+
+// Active detail items
+.ms-PersonaCard-details {
+  display: none;
+  width: 100%;
+  margin: 0;
+  max-height: 300px;
+  min-height: 48px;
+  color: $ms-color-neutralSecondary;
+  padding: 9px 20px;
+  box-sizing: border-box;
+
+  &.is-active {
+    display: block;
+  }
+
+  // State: Contents are collapsed to a single line.
+  &.is-collapsed {
+    height: 30px;
+    overflow: hidden;
+
+    // Show the expander icon.
+    .ms-PersonaCard-detailExpander::after {
+      @include ms-Icon--ChevronDown;
+    }
+  }
+}
+
+.ms-PersonaCard-details[data-detail-id='org'] {
+  max-height: 300px;
+}
+
+// Icon to expand a collapsed actionDetails section.
+.ms-PersonaCard-detailExpander {
+  color: $ms-color-neutralPrimary;
+  cursor: pointer;
+  font-size: $ms-icon-size-m;
+  height: 30px;
+  line-height: 30px;
+  margin-top: 2px;
+  position: absolute;
+  right: 10px;
+  text-align: center;
+  width: 30px;
+
+  &::after {
+    @include ms-Icon;
+    @include ms-Icon--ChevronUp;
+  }
+}
+
+.ms-PersonaCard-detailLine {
+  color: $ms-color-neutralPrimary;
+  line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+  color: $ms-color-neutralSecondary;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart {
+  &::after {
+    display: none; // Hide arrow for orgchart action
+  }
+}
+
+@media (min-width: $ms-screen-md-min) {
+  // Undock the persona card and give it a shadow.
+  .ms-PersonaCard {
+    @include drop-shadow;
+    max-width: 360px;
+    position: relative;
+  }
+
+  .ms-ContextualHost {
+    .ms-PersonaCard {
+      box-shadow: none;
+    }
+  }
+}

data/vendor/assets/scss/components/Pivot.scss

@@ -1,204 +1,204 @@
 /**
- * Office UI Fabric JS 1.3.0
+ * Office UI Fabric JS 1.4.0
  * The JavaScript front-end framework for building experiences for Office 365.
  **/
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Pivot and tab styles
-
-
-.ms-Pivot {
-  @include ms-baseFont;
-  @include ms-u-normalize;
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
-}
-
-.ms-Pivot-links {
-  font-size: 0; // Bring inline-block children together
-  height: 40px;
-  list-style-type: none;
-  padding: 0;
-  white-space: nowrap;
-}
-
-.ms-Pivot-link {
-  color: $ms-color-neutralPrimary;
-  display: inline-block;
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
-  line-height: 40px;
-  margin-right: 8px;
-  padding: 0 8px;
-  text-align: center;
-  vertical-align: top;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  // 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;
-  }
-
-  // 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 {
-    font-weight: $ms-font-weight-semibold;
-    position: relative;
-
-    // Show the underline
-    &::before {
-      background-color: $ms-color-themePrimary;
-    }
-  }
-
-  //== State: Disabled
-  &.is-disabled {
-    color: $ms-color-neutralTertiary;
-  }
-}
-
-
-
-
-// @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;
-
-  &.is-selected {
-    color: $ms-color-themePrimary;
-  }
-
-  &:hover:not(.is-selected),
-  &:focus:not(.is-selected) {
-    color: $ms-color-neutralDark;
-  }
-
-  &:active {
-    color: $ms-color-themePrimary;
-  }
-}
-
-// Ellipsis icon
-.ms-Pivot-ellipsis {
-  font-size: $ms-font-size-m-plus;
-  position: relative;
-  top: 0;
-}
-
-// Pivot content, hidden by default
-.ms-Pivot-content {
-  display: none;
-  margin-top: 20px;
-}
-
-
-//== Modifier: Large Pivots
-//
-.ms-Pivot.ms-Pivot--large {
-  .ms-Pivot-link {
-    font-size: $ms-font-size-l;
-
-    &.is-selected {
-      font-weight: $ms-font-weight-semilight;
-    }
-  }
-
-  .ms-Pivot-link.ms-Pivot-link--overflow {
-    &::after {
-      font-size: $ms-font-size-l;
-    }
-  }
-}
-
-
-//== Modifier: Tabs
-//
-.ms-Pivot.ms-Pivot--tabs {
-
-  .ms-Pivot-link {
-    height: 40px;
-    background-color: $ms-color-neutralLighter;
-    line-height: 40px;
-    margin-right: -2px; // Remove space next to inline-block element
-    padding: 0 10px;
-
-    &:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
-    &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) {
-      color: $ms-color-black;
-    }
-
-    &:active {
-      color: $ms-color-white;
-      background-color: $ms-color-themePrimary;
-    }
-
-    //== State: Selected
-    &.is-selected {
-      background-color: $ms-color-themePrimary;
-      color: $ms-color-white;
-      font-weight: $ms-font-weight-semilight;
-    }
-  }
-
-  .ms-Pivot-link.ms-Pivot-link--overflow {
-    &:hover:not(.is-selected),
-    &:focus:not(.is-selected) {
-      background-color: $ms-color-white;
-    }
-
-    &:active {
-      background-color: $ms-color-themePrimary;
-    }
-  }
-}
-
-// @TODO: Confirm that this component is not responsive.
-//
-// @media (min-width: $ms-screen-lg-min) {
-//   .ms-Pivot-link {
-//     font-size: $ms-font-size-m;
-//   }
-
-//   .ms-Pivot-link.ms-Pivot-link--overflow {
-//     &:after {
-//       font-size: $ms-font-size-m;
-//     }
-//   }
-// }
-
-// All high contrast styling rules
-@media screen and (-ms-high-contrast: active) {
-  .ms-Pivot.ms-Pivot--tabs {
-    .ms-Pivot-link {
-      &.is-selected {
-        font-weight: $ms-font-weight-semibold;
-      }
-    }
-  }
-}
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Pivot and tab styles
+
+
+.ms-Pivot {
+  @include ms-baseFont;
+  @include ms-u-normalize;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+}
+
+.ms-Pivot-links {
+  font-size: 0; // Bring inline-block children together
+  height: 40px;
+  list-style-type: none;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.ms-Pivot-link {
+  color: $ms-color-neutralPrimary;
+  display: inline-block;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  line-height: 40px;
+  margin-right: 8px;
+  padding: 0 8px;
+  text-align: center;
+  vertical-align: top;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  // 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;
+  }
+
+  // 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 {
+    font-weight: $ms-font-weight-semibold;
+    position: relative;
+
+    // Show the underline
+    &::before {
+      background-color: $ms-color-themePrimary;
+    }
+  }
+
+  //== State: Disabled
+  &.is-disabled {
+    color: $ms-color-neutralTertiary;
+  }
+}
+
+
+
+
+// @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;
+
+  &.is-selected {
+    color: $ms-color-themePrimary;
+  }
+
+  &:hover:not(.is-selected),
+  &:focus:not(.is-selected) {
+    color: $ms-color-neutralDark;
+  }
+
+  &:active {
+    color: $ms-color-themePrimary;
+  }
+}
+
+// Ellipsis icon
+.ms-Pivot-ellipsis {
+  font-size: $ms-font-size-m-plus;
+  position: relative;
+  top: 0;
+}
+
+// Pivot content, hidden by default
+.ms-Pivot-content {
+  display: none;
+  margin-top: 20px;
+}
+
+
+//== Modifier: Large Pivots
+//
+.ms-Pivot.ms-Pivot--large {
+  .ms-Pivot-link {
+    font-size: $ms-font-size-l;
+
+    &.is-selected {
+      font-weight: $ms-font-weight-semilight;
+    }
+  }
+
+  .ms-Pivot-link.ms-Pivot-link--overflow {
+    &::after {
+      font-size: $ms-font-size-l;
+    }
+  }
+}
+
+
+//== Modifier: Tabs
+//
+.ms-Pivot.ms-Pivot--tabs {
+
+  .ms-Pivot-link {
+    height: 40px;
+    background-color: $ms-color-neutralLighter;
+    line-height: 40px;
+    margin-right: -2px; // Remove space next to inline-block element
+    padding: 0 10px;
+
+    &:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
+    &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) {
+      color: $ms-color-black;
+    }
+
+    &:active {
+      color: $ms-color-white;
+      background-color: $ms-color-themePrimary;
+    }
+
+    //== State: Selected
+    &.is-selected {
+      background-color: $ms-color-themePrimary;
+      color: $ms-color-white;
+      font-weight: $ms-font-weight-semilight;
+    }
+  }
+
+  .ms-Pivot-link.ms-Pivot-link--overflow {
+    &:hover:not(.is-selected),
+    &:focus:not(.is-selected) {
+      background-color: $ms-color-white;
+    }
+
+    &:active {
+      background-color: $ms-color-themePrimary;
+    }
+  }
+}
+
+// @TODO: Confirm that this component is not responsive.
+//
+// @media (min-width: $ms-screen-lg-min) {
+//   .ms-Pivot-link {
+//     font-size: $ms-font-size-m;
+//   }
+
+//   .ms-Pivot-link.ms-Pivot-link--overflow {
+//     &:after {
+//       font-size: $ms-font-size-m;
+//     }
+//   }
+// }
+
+// All high contrast styling rules
+@media screen and (-ms-high-contrast: active) {
+  .ms-Pivot.ms-Pivot--tabs {
+    .ms-Pivot-link {
+      &.is-selected {
+        font-weight: $ms-font-weight-semibold;
+      }
+    }
+  }
+}