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

data/vendor/assets/scss/components/ContextualHost.scss

@@ -1,145 +1,145 @@
 /**
- * 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.
  **/
-.ms-ContextualHost {
-  @include ms-baseFont;
-  z-index: $ms-zIndex-front;
-  margin: 16px auto;
-  position: relative;
-  min-width: 10px;
-  display: none;
-  background-color: $ms-color-white;
-  @include drop-shadow;
-
-  &.is-positioned {
-    position: absolute;
-    margin: 0;
-  }
-
-  &.is-open {
-    display:  inline-block;
-  }
-}
-
-// 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;
-}
-
-.ms-ContextualHost-beak {
-  box-shadow: 0 0 15px -5px $ms-color-neutralPrimaryAlt;
-  position: absolute;
-  width: 28px;
-  height: 28px;
-  background: $ms-color-white;;
-  border: 1px solid $ms-color-neutralLight;
-  box-sizing: border-box;
-  top: -6px;
-  display: none;
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-  z-index: $ms-zIndex-back;
-  outline: 1px solid transparent;
-}
-
-//= Modifier: ContextualHost with left and right arrows
-//
-.ms-ContextualHost.ms-ContextualHost--arrowLeft,
-.ms-ContextualHost.ms-ContextualHost--arrowRight {
-  .ms-ContextualHost-beak {
-    top: 40px;
-    display: none; // Hide left and right arrows on sm screens
-  }
-}
-
-.ms-ContextualHost.ms-ContextualHost--arrowLeft {
-  .ms-ContextualHost-beak {
-    left: -10px;
-  }
-}
-
-.ms-ContextualHost.ms-ContextualHost--arrowRight {
-  .ms-ContextualHost-beak {
-    right: -10px;
-  }
-}
-
-.ms-ContextualHost.ms-ContextualHost--arrowTop {
-  .ms-ContextualHost-beak {
-    display: block;
-    top: -10px;
-  }
-}
-
-.ms-ContextualHost.ms-ContextualHost--arrowBottom {
-  .ms-ContextualHost-beak {
-    display: block;
-    bottom: -10px;
-  }
-}
-
-// The actual ContextualHost element
-.ms-ContextualHost-main {
-  position: relative;
-  background-color: $ms-color-white;
-  box-sizing: border-box;
-  outline: 1px solid transparent;
-  z-index: $ms-zIndex-middle;
-  min-height: 10px;
-}
-
-.ms-ContextualHost-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-front;
-}
-
-//= Modifier: Close button ContextualHost
-//
-.ms-ContextualHost.ms-ContextualHost--close {
-  .ms-ContextualHost-title {
-    margin-right: 20px; // Avoid overlap with close button
-  }
-}
-
-//= Modifier: Close button ContextualHost
-//
-
-.ms-ContextualHost.ms-ContextualHost--primaryArrow {
-  .ms-ContextualHost-beak {
-    background-color: $ms-color-themePrimary;
-  }
-}
-
-@media (min-width: $ms-screen-md-min) {
-  // Make width larger and remove centering on md+ screens
-  .ms-ContextualHost {
-    margin: 16px;
-
-    &.is-positioned {
-      margin: 0;
-    }
-  }
-
-  // Show arrows right and left
-  .ms-ContextualHost.ms-ContextualHost--arrowRight,
-  .ms-ContextualHost.ms-ContextualHost--arrowLeft {
-    .ms-ContextualHost-beak {
-      display: block;
-    }
-  }
-}
+.ms-ContextualHost {
+  @include ms-baseFont;
+  z-index: $ms-zIndex-front;
+  margin: 16px auto;
+  position: relative;
+  min-width: 10px;
+  display: none;
+  background-color: $ms-color-white;
+  @include drop-shadow;
+
+  &.is-positioned {
+    position: absolute;
+    margin: 0;
+  }
+
+  &.is-open {
+    display:  inline-block;
+  }
+}
+
+// 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;
+}
+
+.ms-ContextualHost-beak {
+  box-shadow: 0 0 15px -5px $ms-color-neutralPrimaryAlt;
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  background: $ms-color-white;;
+  border: 1px solid $ms-color-neutralLight;
+  box-sizing: border-box;
+  top: -6px;
+  display: none;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  z-index: $ms-zIndex-back;
+  outline: 1px solid transparent;
+}
+
+//= Modifier: ContextualHost with left and right arrows
+//
+.ms-ContextualHost.ms-ContextualHost--arrowLeft,
+.ms-ContextualHost.ms-ContextualHost--arrowRight {
+  .ms-ContextualHost-beak {
+    top: 40px;
+    display: none; // Hide left and right arrows on sm screens
+  }
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft {
+  .ms-ContextualHost-beak {
+    left: -10px;
+  }
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowRight {
+  .ms-ContextualHost-beak {
+    right: -10px;
+  }
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowTop {
+  .ms-ContextualHost-beak {
+    display: block;
+    top: -10px;
+  }
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowBottom {
+  .ms-ContextualHost-beak {
+    display: block;
+    bottom: -10px;
+  }
+}
+
+// The actual ContextualHost element
+.ms-ContextualHost-main {
+  position: relative;
+  background-color: $ms-color-white;
+  box-sizing: border-box;
+  outline: 1px solid transparent;
+  z-index: $ms-zIndex-middle;
+  min-height: 10px;
+}
+
+.ms-ContextualHost-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-front;
+}
+
+//= Modifier: Close button ContextualHost
+//
+.ms-ContextualHost.ms-ContextualHost--close {
+  .ms-ContextualHost-title {
+    margin-right: 20px; // Avoid overlap with close button
+  }
+}
+
+//= Modifier: Close button ContextualHost
+//
+
+.ms-ContextualHost.ms-ContextualHost--primaryArrow {
+  .ms-ContextualHost-beak {
+    background-color: $ms-color-themePrimary;
+  }
+}
+
+@media (min-width: $ms-screen-md-min) {
+  // Make width larger and remove centering on md+ screens
+  .ms-ContextualHost {
+    margin: 16px;
+
+    &.is-positioned {
+      margin: 0;
+    }
+  }
+
+  // Show arrows right and left
+  .ms-ContextualHost.ms-ContextualHost--arrowRight,
+  .ms-ContextualHost.ms-ContextualHost--arrowLeft {
+    .ms-ContextualHost-beak {
+      display: block;
+    }
+  }
+}

data/vendor/assets/scss/components/ContextualMenu.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
-// --------------------------------------------------
-// Contextual Menu styles
-
-.ms-ContextualMenu {
-  @include ms-baseFont;
-  @include ms-u-normalize;
-  color: $ms-color-neutralPrimary;
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
-  display: block;
-  min-width: 180px;
-  max-width: 220px;
-  list-style-type: none;
-  position: relative;
-  background-color: $ms-color-white;
-
-  &.is-hidden {
-    display: none;
-  }
-}
-
-.ms-ContextualMenu-item {
-  position: relative;
-}
-
-.ms-ContextualMenu-link {
-  @include ms-u-borderBox;
-  text-decoration: none;
-  color: $ms-color-neutralPrimary;
-  border: 1px solid transparent;
-  cursor: pointer;
-  display: block;
-  height: 36px;
-  overflow: hidden;
-  line-height: 34px;
-  padding: 0 16px 0 25px;
-  position: relative;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background-color: $ms-color-neutralLighter;
-    color: $ms-color-neutralDark;
-
-    .ms-ContextualMenu-subMenuIcon {
-      color: $ms-color-neutralDark;
-    }
-  }
-
-  &:focus {
-    outline: transparent;
-    border: 1px solid $ms-color-neutralSecondary;
-  }
-
-  &.is-selected {
-    background-color: $ms-color-neutralQuaternaryAlt;
-    color: $ms-color-black;
-    font-weight: $ms-font-weight-semibold;
-
-    ~.ms-ContextualMenu-subMenuIcon {
-      color: $ms-color-black;
-    }
-
-    &:hover {
-      background-color: $ms-color-neutralQuaternary;
-    }
-  }
-
-  &.is-disabled {
-    color: $ms-color-neutralTertiary;
-    background-color: $ms-color-white;
-    pointer-events: none;
-
-    &:active,
-    &:focus {
-      border-color: $ms-color-white;
-    }
-
-    .ms-Icon {
-      color: $ms-color-neutralTertiary;
-      pointer-events: none;
-      cursor: default;
-    }
-  }
-}
-
-// Modifier: Menu item Dividers
-.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
-  cursor: default;
-  display: block;
-  height: 1px;
-  background-color: $ms-color-neutralLight;
-  position: relative;
-}
-
-// Modifier: Menu item Headers
-.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
-  color: $ms-color-themePrimary;
-  font-size: $ms-font-size-s;
-  text-transform: uppercase;
-  height: 36px;
-  line-height: 36px;
-  padding: 0 18px;
-}
-
-// Modifier: Contextual menu with submenu
-.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu {
-  position: absolute;
-  top: -1px;
-  left: 178px; // Move the submenu to the left of the menu item that triggered it
-}
-
-// Right chevron.
-// Note: The .ms-ContextualMenu-caretRight class has been deprecated.
-// Please use .ms-ContextualMenu-subMenuIcon.
-.ms-ContextualMenu-subMenuIcon,
-.ms-ContextualMenu-caretRight {
-  color: $ms-color-neutralPrimary;
-  font-size: 8px;
-  font-weight: 600;
-  width: 24px;
-  height: 36px;
-  line-height: 36px;
-  position: absolute;
-  text-align: center;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  pointer-events: none;
-}
-
-//== Modifier: Multi-select menu
-//
-.ms-ContextualMenu.ms-ContextualMenu--multiselect {
-
-  // Align the header with the items
-  .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
-    padding: 0 16px 0 26px;
-  }
-
-  .ms-ContextualMenu-link {
-
-    // Multi-select checkmark
-    &.is-selected {
-      background-color: $ms-color-white;
-      font-weight: $ms-font-weight-semibold;
-      color: $ms-color-neutralPrimary;
-
-      // Checkmark
-      &::after {
-        @include ms-Icon;
-        color: $ms-color-neutralPrimary;
-        content: '\E73E';
-        font-size: $ms-icon-size-xs;
-        font-weight: 800;
-        height: 36px;
-        line-height: 36px;
-        position: absolute;
-        left: 7px;
-      }
-
-      &:hover,
-      &:focus {
-        color: $ms-color-neutralDark;
-        background-color: $ms-color-neutralLighter;
-
-        &::after {
-          color: $ms-color-neutralDark;
-        }
-      }
-
-      &:active {
-        color: $ms-color-black;
-        background-color: $ms-color-neutralQuaternary;
-
-        &::after {
-          color: $ms-color-black;
-        }
-      }
-    }
-  }
-}
-
-.ms-ContextualMenu.ms-ContextualMenu--hasIcons,
-.ms-ContextualMenu.ms-ContextualMenu--hasChecks {
-  .ms-ContextualMenu-link {
-    padding-left: 40px;
-  }
-
-  .ms-Icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 40px;
-    text-align: center;
-  }
-}
-
-.ms-ContextualMenu.ms-ContextualMenu--hasIcons {
-  width: 220px;
-}
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Contextual Menu styles
+
+.ms-ContextualMenu {
+  @include ms-baseFont;
+  @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  display: block;
+  min-width: 180px;
+  max-width: 220px;
+  list-style-type: none;
+  position: relative;
+  background-color: $ms-color-white;
+
+  &.is-hidden {
+    display: none;
+  }
+}
+
+.ms-ContextualMenu-item {
+  position: relative;
+}
+
+.ms-ContextualMenu-link {
+  @include ms-u-borderBox;
+  text-decoration: none;
+  color: $ms-color-neutralPrimary;
+  border: 1px solid transparent;
+  cursor: pointer;
+  display: block;
+  height: 36px;
+  overflow: hidden;
+  line-height: 34px;
+  padding: 0 16px 0 25px;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $ms-color-neutralLighter;
+    color: $ms-color-neutralDark;
+
+    .ms-ContextualMenu-subMenuIcon {
+      color: $ms-color-neutralDark;
+    }
+  }
+
+  &:focus {
+    outline: transparent;
+    border: 1px solid $ms-color-neutralSecondary;
+  }
+
+  &.is-selected {
+    background-color: $ms-color-neutralQuaternaryAlt;
+    color: $ms-color-black;
+    font-weight: $ms-font-weight-semibold;
+
+    ~.ms-ContextualMenu-subMenuIcon {
+      color: $ms-color-black;
+    }
+
+    &:hover {
+      background-color: $ms-color-neutralQuaternary;
+    }
+  }
+
+  &.is-disabled {
+    color: $ms-color-neutralTertiary;
+    background-color: $ms-color-white;
+    pointer-events: none;
+
+    &:active,
+    &:focus {
+      border-color: $ms-color-white;
+    }
+
+    .ms-Icon {
+      color: $ms-color-neutralTertiary;
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+}
+
+// Modifier: Menu item Dividers
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+  cursor: default;
+  display: block;
+  height: 1px;
+  background-color: $ms-color-neutralLight;
+  position: relative;
+}
+
+// Modifier: Menu item Headers
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+  color: $ms-color-themePrimary;
+  font-size: $ms-font-size-s;
+  text-transform: uppercase;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 18px;
+}
+
+// Modifier: Contextual menu with submenu
+.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu {
+  position: absolute;
+  top: -1px;
+  left: 178px; // Move the submenu to the left of the menu item that triggered it
+}
+
+// Right chevron.
+// Note: The .ms-ContextualMenu-caretRight class has been deprecated.
+// Please use .ms-ContextualMenu-subMenuIcon.
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+  color: $ms-color-neutralPrimary;
+  font-size: 8px;
+  font-weight: 600;
+  width: 24px;
+  height: 36px;
+  line-height: 36px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+//== Modifier: Multi-select menu
+//
+.ms-ContextualMenu.ms-ContextualMenu--multiselect {
+
+  // Align the header with the items
+  .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+    padding: 0 16px 0 26px;
+  }
+
+  .ms-ContextualMenu-link {
+
+    // Multi-select checkmark
+    &.is-selected {
+      background-color: $ms-color-white;
+      font-weight: $ms-font-weight-semibold;
+      color: $ms-color-neutralPrimary;
+
+      // Checkmark
+      &::after {
+        @include ms-Icon;
+        color: $ms-color-neutralPrimary;
+        content: '\E73E';
+        font-size: $ms-icon-size-xs;
+        font-weight: 800;
+        height: 36px;
+        line-height: 36px;
+        position: absolute;
+        left: 7px;
+      }
+
+      &:hover,
+      &:focus {
+        color: $ms-color-neutralDark;
+        background-color: $ms-color-neutralLighter;
+
+        &::after {
+          color: $ms-color-neutralDark;
+        }
+      }
+
+      &:active {
+        color: $ms-color-black;
+        background-color: $ms-color-neutralQuaternary;
+
+        &::after {
+          color: $ms-color-black;
+        }
+      }
+    }
+  }
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons,
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks {
+  .ms-ContextualMenu-link {
+    padding-left: 40px;
+  }
+
+  .ms-Icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 40px;
+    text-align: center;
+  }
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons {
+  width: 220px;
+}