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

data/vendor/assets/scss/components/DatePicker.scss

@@ -1,530 +1,530 @@
 /**
- * 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
-// --------------------------------------------------
-// Date Picker styles
-
-
-.ms-DatePicker {
-  @include ms-baseFont;
-  @include ms-u-normalize;
-  margin-bottom: 17px;
-  z-index: $ms-zIndex-DatePicker;
-
-  .ms-TextField { position: relative; }
-}
-
-// Base wrapper for the date picker.
-.ms-DatePicker-picker {
-  color: $ms-color-black;
-  font-size: $ms-font-size-m;
-  position: relative;
-  text-align: left;
-  z-index: $ms-zIndex-back;
-}
-
-// Insert a calendar icon over the date field.
-.ms-DatePicker-event {
-  color: $ms-color-neutralSecondary;
-  font-size:   21px;
-  line-height: 20px;
-  pointer-events: none;
-  position: absolute;
-  right:  5px;
-  bottom: 5px;
-  z-index: $ms-zIndex-middle;
-}
-
-// The holder is the only "scrollable" top-level container element.
-.ms-DatePicker-holder {
-  -webkit-overflow-scrolling: touch;
-  @include ms-u-borderBox;
-  background: $ms-color-white;
-  position: absolute;
-  min-width: 300px;
-  display: none;
-}
-
-
-// When the picker opens, reveal the content.
-.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
-    @include ms-u-slideDownIn10;
-    @include ms-u-borderBox;
-    @include drop-shadow;
-    border: 1px solid $ms-color-neutralLight;
-    display: block;
-}
-
-// When a picker opens, always open it in front of other closed pickers
-.ms-DatePicker-picker--opened {
-  position: relative;
-  z-index: $ms-zIndex-front;
-}
-
-
-// The frame and wrap work together to ensure that
-// clicks within the picker don’t reach the holder.
-.ms-DatePicker-frame {
-  padding: 1px;
-}
-
-.ms-DatePicker-wrap {
-  margin: -1px;
-  padding: 9px;
-}
-
-
-// Wrapper containing the calendar view to pick a specific date.
-.ms-DatePicker-dayPicker {
-  display: block;
-  margin-bottom: 30px;
-}
-
-
-// The header containing the month and year.
-.ms-DatePicker-header {
-  height: 40px;
-  line-height: 44px;
-}
-
-
-// The month and year labels.
-.ms-DatePicker-month,
-.ms-DatePicker-year {
-  display: inline-block;
-  font-weight: $ms-font-weight-light;
-  font-size: 21px;
-  color: $ms-color-themePrimary;
-  margin-top: -1px;
-
-  &:hover {
-    color: $ms-color-themeDark;
-    cursor: pointer;
-  }
-}
-
-.ms-DatePicker-month {
-  margin-left: 15px;
-}
-
-.ms-DatePicker-year {
-  margin-left: 5px;
-}
-
-
-// The calendar table of dates.
-.ms-DatePicker-table {
-  text-align: center;
-  border-collapse: collapse;
-  border-spacing: 0;
-  table-layout: fixed;
-  font-size: inherit;
-
-  td {
-    margin: 0;
-    padding: 0;
-
-    &:hover { outline: 1px solid transparent; }
-  }
-}
-
-
-// The days on the calendar.
-.ms-DatePicker-day,
-.ms-DatePicker-weekday {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  line-height: 40px;
-  font-weight: $ms-font-weight-regular;
-  font-size: 15px;
-  color: $ms-color-neutralPrimary;
-}
-
-
-// Today.
-.ms-DatePicker-day--today {
-    position: relative;
-    background-color: $ms-color-themeLight;
-}
-
-
-// Disabled day.
-.ms-DatePicker-day--disabled::before {
-    border-top-color: $ms-color-neutralTertiary;
-}
-
-
-// Out of focus days.
-.ms-DatePicker-day--outfocus {
-  color: $ms-color-neutralTertiary;
-  font-weight: $ms-font-weight-regular;
-}
-
-
-// Hovered date picker items.
-.ms-DatePicker-day--infocus:hover,
-.ms-DatePicker-day--outfocus:hover {
-  cursor: pointer;
-  color: $ms-color-black;
-  background: $ms-color-neutralLight;
-}
-
-
-// Highlighted and hovered/focused dates.
-.ms-DatePicker-day--highlighted:hover,
-.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
-  cursor: pointer;
-  color: $ms-color-white;
-  background: $ms-color-themePrimary;
-}
-
-
-// Disabled and highlighted dates.
-.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
-.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
-    background: $ms-color-neutralTertiary;
-}
-
-
-// Month and year pickers, hidden on small screens by default.
-.ms-DatePicker-monthPicker,
-.ms-DatePicker-yearPicker {
-  display: none;
-}
-
-
-// Month and year previous/next components.
-.ms-DatePicker-monthComponents {
-  position: absolute;
-  top: 9px;
-  right: 9px;
-  left: 9px;
-}
-
-.ms-DatePicker-yearComponents,
-.ms-DatePicker-decadeComponents {
-  position: absolute;
-  right: 10px;
-}
-
-.ms-DatePicker-prevMonth,
-.ms-DatePicker-nextMonth,
-.ms-DatePicker-prevYear,
-.ms-DatePicker-nextYear,
-.ms-DatePicker-prevDecade,
-.ms-DatePicker-nextDecade {
-  width: 40px;
-  height: 40px;
-  display: block;
-  float: right;
-  margin-left: 10px;
-  text-align: center;
-  line-height: 40px;
-  font-size: 21px;
-  color: $ms-color-neutralSecondary;
-  position: relative;
-  top: 3px;
-
-  &:hover {
-    color: $ms-color-neutralDark;
-    cursor: pointer;
-    outline: 1px solid transparent;
-  }
-}
-
-// Without modifying the Pickadate JS, this transparent
-// button is necessary to toggle the month view.
-.ms-DatePicker-headerToggleView {
-  height: 40px;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 140px;
-  z-index: $ms-zIndex-middle;
-  cursor: pointer;
-}
-
-
-// Text showing the currently-selected year.
-.ms-DatePicker-currentYear,
-.ms-DatePicker-currentDecade {
-  display: block;
-  font-weight: $ms-font-weight-semilight;
-  font-size: 21px;
-  height: 40px;
-  line-height: 42px;
-  margin-left: 15px;
-}
-
-// The current year is blue and actionable.
-.ms-DatePicker-currentYear {
-  color: $ms-color-themePrimary;
-
-  &:hover {
-    color: $ms-color-themeDark;
-    cursor: pointer;
-  }
-}
-
-
-// A grid of month or year options, which pushes them over
-// five pixels for horizontal centering and moves them down.
-.ms-DatePicker-optionGrid {
-  position: relative;
-  height: 210px;
-  width: 280px;
-  margin: 10px 0 30px 5px;
-}
-
-// Button to select a different month.
-.ms-DatePicker-monthOption,
-.ms-DatePicker-yearOption {
-  background-color: $ms-color-neutralLighter;
-  width: 60px;
-  height: 60px;
-  line-height: 60px;
-  cursor: pointer;
-  float: left;
-  margin: 0 10px 10px 0;
-  font-weight: $ms-font-weight-regular;
-  font-size: 13px;
-  color: $ms-color-neutralPrimary;
-  text-align: center;
-
-  &:hover {
-    background-color: $ms-color-neutralTertiaryAlt;
-    outline: 1px solid transparent;
-  }
-
-  &.is-highlighted {
-    background-color: $ms-color-neutralPrimary;
-    color: $ms-color-white;
-  }
-}
-
-
-// Button to navigate to the current date.
-.ms-DatePicker-goToday {
-  bottom: 9px;
-  color: $ms-color-themePrimary;
-  cursor: pointer;
-  font-weight: $ms-font-weight-semilight;
-  font-size: 13px;
-  height: 30px;
-  line-height: 30px;
-  padding: 0 10px;
-  position: absolute;
-  right: 9px;
-
-  &:hover {
-    outline: 1px solid transparent;
-  }
-}
-
-// State: The picker is showing the year components.
-.ms-DatePicker.is-pickingYears {
-
-  // Hide the day picking components.
-  .ms-DatePicker-dayPicker,
-  .ms-DatePicker-monthComponents {
-    display: none;
-  }
-
-  // Hide the month picking components.
-  .ms-DatePicker-monthPicker {
-    display: none;
-  }
-
-  // Show the year picking components.
-  .ms-DatePicker-yearPicker {
-    display: block;
-  }
-
-}
-
-// 460px and up.
-//
-// On screens that can fit it, we show the month picker next to the day picker at all times.
-@media (min-width: 460px) {
-
-  .ms-DatePicker-holder {
-    width: 440px;
-  }
-
-
-  // Update header text styles.
-  .ms-DatePicker-month,
-  .ms-DatePicker-year {
-    font-weight: $ms-font-weight-semilight;
-    font-size: 17px;
-    color: $ms-color-neutralPrimary;
-
-    &:hover {
-      color: $ms-color-neutralPrimary;
-      cursor: default;
-    }
-  }
-
-  .ms-DatePicker-header {
-    height: 30px;
-    line-height: 28px;
-  }
-
-  // Contains the calendar view for picking a day.
-  .ms-DatePicker-dayPicker {
-    @include ms-u-borderBox;
-    border-right: 1px solid $ms-color-neutralLight;
-    width: 220px;
-    margin: -10px 0;
-    padding: 10px 0;
-  }
-
-  // Show the month picker.
-  .ms-DatePicker-monthPicker {
-    display: block;
-  }
-
-  // Style the the month and year pickers.
-  .ms-DatePicker-monthPicker,
-  .ms-DatePicker-yearPicker {
-    top: 9px;
-    left: 238px;
-    position: absolute;
-  }
-
-  .ms-DatePicker-optionGrid {
-    width: 200px;
-    height: auto;
-    margin: 10px 0 0;
-  }
-
-  // Size the month components to the day picker's new width
-  .ms-DatePicker-monthComponents {
-    width: 210px;
-  }
-
-  // Size and position of the month and year labels.
-  .ms-DatePicker-month {
-    margin-left: 12px;
-  }
-
-
-  // Calendar day cells are smaller.
-  .ms-DatePicker-day,
-  .ms-DatePicker-weekday {
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    font-weight: $ms-font-weight-semibold;
-    font-size: 12px;
-  }
-
-
-  // Reduce the size of arrows to change month/year.
-  .ms-DatePicker-prevMonth,
-  .ms-DatePicker-nextMonth,
-  .ms-DatePicker-prevYear,
-  .ms-DatePicker-nextYear,
-  .ms-DatePicker-prevDecade,
-  .ms-DatePicker-nextDecade {
-    font-size: 17px;
-    width: 30px;
-    height: 30px;
-    line-height: 29px;
-  }
-
-
-  // This component is only used on small displays.
-  .ms-DatePicker-toggleMonthView {
-    display: none;
-  }
-
-
-  // Position the current year and decade labels.
-  .ms-DatePicker-currentYear,
-  .ms-DatePicker-currentDecade {
-    font-size: 17px;
-    margin: 0;
-    height: 30px;
-    line-height: 26px;
-    padding: 0 10px;
-    display: inline-block;
-  }
-
-
-  // Reduce the size of the month buttons.
-  .ms-DatePicker-monthOption,
-  .ms-DatePicker-yearOption {
-    width: 40px;
-    height: 40px;
-    line-height: 40px;
-    font-size: 12px;
-    margin: 0 10px 10px 0;
-
-    &:hover {
-      outline: 1px solid transparent;
-    }
-  }
-
-
-  // Position the "Go to today" button below the month picker.
-  .ms-DatePicker-goToday {
-    @include ms-u-borderBox;
-    font-size: 12px;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
-    right: 10px;
-    text-align: right;
-    top: 199px;
-    width: 210px;
-  }
-
-  // State: The picker is showing the year components.
-  // On larger screens the calendar will remain and the years
-  // will replace the months.
-  .ms-DatePicker.is-pickingYears {
-
-    // On large screens, we need to keep the day picker
-    // and month components in view.
-    .ms-DatePicker-dayPicker,
-    .ms-DatePicker-monthComponents {
-      display: block;
-    }
-
-    // Hide the month picking components.
-    .ms-DatePicker-monthPicker {
-      display: none;
-    }
-
-    // Show the year picking components.
-    .ms-DatePicker-yearPicker {
-      display: block;
-    }
-  }
-}
-
-// On smaller screens the month button toggles to the picking months state.
-@media (max-width: 459px) {
-
-  // State: The picker is showing the month components.
-  .ms-DatePicker.is-pickingMonths {
-
-    // Hide the day picking components.
-    .ms-DatePicker-dayPicker,
-    .ms-DatePicker-monthComponents {
-      display: none;
-    }
-
-    // Show the month picking components.
-    .ms-DatePicker-monthPicker {
-      display: block;
-    }
-  }
-}
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Date Picker styles
+
+
+.ms-DatePicker {
+  @include ms-baseFont;
+  @include ms-u-normalize;
+  margin-bottom: 17px;
+  z-index: $ms-zIndex-DatePicker;
+
+  .ms-TextField { position: relative; }
+}
+
+// Base wrapper for the date picker.
+.ms-DatePicker-picker {
+  color: $ms-color-black;
+  font-size: $ms-font-size-m;
+  position: relative;
+  text-align: left;
+  z-index: $ms-zIndex-back;
+}
+
+// Insert a calendar icon over the date field.
+.ms-DatePicker-event {
+  color: $ms-color-neutralSecondary;
+  font-size:   21px;
+  line-height: 20px;
+  pointer-events: none;
+  position: absolute;
+  right:  5px;
+  bottom: 5px;
+  z-index: $ms-zIndex-middle;
+}
+
+// The holder is the only "scrollable" top-level container element.
+.ms-DatePicker-holder {
+  -webkit-overflow-scrolling: touch;
+  @include ms-u-borderBox;
+  background: $ms-color-white;
+  position: absolute;
+  min-width: 300px;
+  display: none;
+}
+
+
+// When the picker opens, reveal the content.
+.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
+    @include ms-u-slideDownIn10;
+    @include ms-u-borderBox;
+    @include drop-shadow;
+    border: 1px solid $ms-color-neutralLight;
+    display: block;
+}
+
+// When a picker opens, always open it in front of other closed pickers
+.ms-DatePicker-picker--opened {
+  position: relative;
+  z-index: $ms-zIndex-front;
+}
+
+
+// The frame and wrap work together to ensure that
+// clicks within the picker don’t reach the holder.
+.ms-DatePicker-frame {
+  padding: 1px;
+}
+
+.ms-DatePicker-wrap {
+  margin: -1px;
+  padding: 9px;
+}
+
+
+// Wrapper containing the calendar view to pick a specific date.
+.ms-DatePicker-dayPicker {
+  display: block;
+  margin-bottom: 30px;
+}
+
+
+// The header containing the month and year.
+.ms-DatePicker-header {
+  height: 40px;
+  line-height: 44px;
+}
+
+
+// The month and year labels.
+.ms-DatePicker-month,
+.ms-DatePicker-year {
+  display: inline-block;
+  font-weight: $ms-font-weight-light;
+  font-size: 21px;
+  color: $ms-color-themePrimary;
+  margin-top: -1px;
+
+  &:hover {
+    color: $ms-color-themeDark;
+    cursor: pointer;
+  }
+}
+
+.ms-DatePicker-month {
+  margin-left: 15px;
+}
+
+.ms-DatePicker-year {
+  margin-left: 5px;
+}
+
+
+// The calendar table of dates.
+.ms-DatePicker-table {
+  text-align: center;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-size: inherit;
+
+  td {
+    margin: 0;
+    padding: 0;
+
+    &:hover { outline: 1px solid transparent; }
+  }
+}
+
+
+// The days on the calendar.
+.ms-DatePicker-day,
+.ms-DatePicker-weekday {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  line-height: 40px;
+  font-weight: $ms-font-weight-regular;
+  font-size: 15px;
+  color: $ms-color-neutralPrimary;
+}
+
+
+// Today.
+.ms-DatePicker-day--today {
+    position: relative;
+    background-color: $ms-color-themeLight;
+}
+
+
+// Disabled day.
+.ms-DatePicker-day--disabled::before {
+    border-top-color: $ms-color-neutralTertiary;
+}
+
+
+// Out of focus days.
+.ms-DatePicker-day--outfocus {
+  color: $ms-color-neutralTertiary;
+  font-weight: $ms-font-weight-regular;
+}
+
+
+// Hovered date picker items.
+.ms-DatePicker-day--infocus:hover,
+.ms-DatePicker-day--outfocus:hover {
+  cursor: pointer;
+  color: $ms-color-black;
+  background: $ms-color-neutralLight;
+}
+
+
+// Highlighted and hovered/focused dates.
+.ms-DatePicker-day--highlighted:hover,
+.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
+  cursor: pointer;
+  color: $ms-color-white;
+  background: $ms-color-themePrimary;
+}
+
+
+// Disabled and highlighted dates.
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
+    background: $ms-color-neutralTertiary;
+}
+
+
+// Month and year pickers, hidden on small screens by default.
+.ms-DatePicker-monthPicker,
+.ms-DatePicker-yearPicker {
+  display: none;
+}
+
+
+// Month and year previous/next components.
+.ms-DatePicker-monthComponents {
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  left: 9px;
+}
+
+.ms-DatePicker-yearComponents,
+.ms-DatePicker-decadeComponents {
+  position: absolute;
+  right: 10px;
+}
+
+.ms-DatePicker-prevMonth,
+.ms-DatePicker-nextMonth,
+.ms-DatePicker-prevYear,
+.ms-DatePicker-nextYear,
+.ms-DatePicker-prevDecade,
+.ms-DatePicker-nextDecade {
+  width: 40px;
+  height: 40px;
+  display: block;
+  float: right;
+  margin-left: 10px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 21px;
+  color: $ms-color-neutralSecondary;
+  position: relative;
+  top: 3px;
+
+  &:hover {
+    color: $ms-color-neutralDark;
+    cursor: pointer;
+    outline: 1px solid transparent;
+  }
+}
+
+// Without modifying the Pickadate JS, this transparent
+// button is necessary to toggle the month view.
+.ms-DatePicker-headerToggleView {
+  height: 40px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 140px;
+  z-index: $ms-zIndex-middle;
+  cursor: pointer;
+}
+
+
+// Text showing the currently-selected year.
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+  display: block;
+  font-weight: $ms-font-weight-semilight;
+  font-size: 21px;
+  height: 40px;
+  line-height: 42px;
+  margin-left: 15px;
+}
+
+// The current year is blue and actionable.
+.ms-DatePicker-currentYear {
+  color: $ms-color-themePrimary;
+
+  &:hover {
+    color: $ms-color-themeDark;
+    cursor: pointer;
+  }
+}
+
+
+// A grid of month or year options, which pushes them over
+// five pixels for horizontal centering and moves them down.
+.ms-DatePicker-optionGrid {
+  position: relative;
+  height: 210px;
+  width: 280px;
+  margin: 10px 0 30px 5px;
+}
+
+// Button to select a different month.
+.ms-DatePicker-monthOption,
+.ms-DatePicker-yearOption {
+  background-color: $ms-color-neutralLighter;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  cursor: pointer;
+  float: left;
+  margin: 0 10px 10px 0;
+  font-weight: $ms-font-weight-regular;
+  font-size: 13px;
+  color: $ms-color-neutralPrimary;
+  text-align: center;
+
+  &:hover {
+    background-color: $ms-color-neutralTertiaryAlt;
+    outline: 1px solid transparent;
+  }
+
+  &.is-highlighted {
+    background-color: $ms-color-neutralPrimary;
+    color: $ms-color-white;
+  }
+}
+
+
+// Button to navigate to the current date.
+.ms-DatePicker-goToday {
+  bottom: 9px;
+  color: $ms-color-themePrimary;
+  cursor: pointer;
+  font-weight: $ms-font-weight-semilight;
+  font-size: 13px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  position: absolute;
+  right: 9px;
+
+  &:hover {
+    outline: 1px solid transparent;
+  }
+}
+
+// State: The picker is showing the year components.
+.ms-DatePicker.is-pickingYears {
+
+  // Hide the day picking components.
+  .ms-DatePicker-dayPicker,
+  .ms-DatePicker-monthComponents {
+    display: none;
+  }
+
+  // Hide the month picking components.
+  .ms-DatePicker-monthPicker {
+    display: none;
+  }
+
+  // Show the year picking components.
+  .ms-DatePicker-yearPicker {
+    display: block;
+  }
+
+}
+
+// 460px and up.
+//
+// On screens that can fit it, we show the month picker next to the day picker at all times.
+@media (min-width: 460px) {
+
+  .ms-DatePicker-holder {
+    width: 440px;
+  }
+
+
+  // Update header text styles.
+  .ms-DatePicker-month,
+  .ms-DatePicker-year {
+    font-weight: $ms-font-weight-semilight;
+    font-size: 17px;
+    color: $ms-color-neutralPrimary;
+
+    &:hover {
+      color: $ms-color-neutralPrimary;
+      cursor: default;
+    }
+  }
+
+  .ms-DatePicker-header {
+    height: 30px;
+    line-height: 28px;
+  }
+
+  // Contains the calendar view for picking a day.
+  .ms-DatePicker-dayPicker {
+    @include ms-u-borderBox;
+    border-right: 1px solid $ms-color-neutralLight;
+    width: 220px;
+    margin: -10px 0;
+    padding: 10px 0;
+  }
+
+  // Show the month picker.
+  .ms-DatePicker-monthPicker {
+    display: block;
+  }
+
+  // Style the the month and year pickers.
+  .ms-DatePicker-monthPicker,
+  .ms-DatePicker-yearPicker {
+    top: 9px;
+    left: 238px;
+    position: absolute;
+  }
+
+  .ms-DatePicker-optionGrid {
+    width: 200px;
+    height: auto;
+    margin: 10px 0 0;
+  }
+
+  // Size the month components to the day picker's new width
+  .ms-DatePicker-monthComponents {
+    width: 210px;
+  }
+
+  // Size and position of the month and year labels.
+  .ms-DatePicker-month {
+    margin-left: 12px;
+  }
+
+
+  // Calendar day cells are smaller.
+  .ms-DatePicker-day,
+  .ms-DatePicker-weekday {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    font-weight: $ms-font-weight-semibold;
+    font-size: 12px;
+  }
+
+
+  // Reduce the size of arrows to change month/year.
+  .ms-DatePicker-prevMonth,
+  .ms-DatePicker-nextMonth,
+  .ms-DatePicker-prevYear,
+  .ms-DatePicker-nextYear,
+  .ms-DatePicker-prevDecade,
+  .ms-DatePicker-nextDecade {
+    font-size: 17px;
+    width: 30px;
+    height: 30px;
+    line-height: 29px;
+  }
+
+
+  // This component is only used on small displays.
+  .ms-DatePicker-toggleMonthView {
+    display: none;
+  }
+
+
+  // Position the current year and decade labels.
+  .ms-DatePicker-currentYear,
+  .ms-DatePicker-currentDecade {
+    font-size: 17px;
+    margin: 0;
+    height: 30px;
+    line-height: 26px;
+    padding: 0 10px;
+    display: inline-block;
+  }
+
+
+  // Reduce the size of the month buttons.
+  .ms-DatePicker-monthOption,
+  .ms-DatePicker-yearOption {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 12px;
+    margin: 0 10px 10px 0;
+
+    &:hover {
+      outline: 1px solid transparent;
+    }
+  }
+
+
+  // Position the "Go to today" button below the month picker.
+  .ms-DatePicker-goToday {
+    @include ms-u-borderBox;
+    font-size: 12px;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    right: 10px;
+    text-align: right;
+    top: 199px;
+    width: 210px;
+  }
+
+  // State: The picker is showing the year components.
+  // On larger screens the calendar will remain and the years
+  // will replace the months.
+  .ms-DatePicker.is-pickingYears {
+
+    // On large screens, we need to keep the day picker
+    // and month components in view.
+    .ms-DatePicker-dayPicker,
+    .ms-DatePicker-monthComponents {
+      display: block;
+    }
+
+    // Hide the month picking components.
+    .ms-DatePicker-monthPicker {
+      display: none;
+    }
+
+    // Show the year picking components.
+    .ms-DatePicker-yearPicker {
+      display: block;
+    }
+  }
+}
+
+// On smaller screens the month button toggles to the picking months state.
+@media (max-width: 459px) {
+
+  // State: The picker is showing the month components.
+  .ms-DatePicker.is-pickingMonths {
+
+    // Hide the day picking components.
+    .ms-DatePicker-dayPicker,
+    .ms-DatePicker-monthComponents {
+      display: none;
+    }
+
+    // Show the month picking components.
+    .ms-DatePicker-monthPicker {
+      display: block;
+    }
+  }
+}