office-ui-fabric-rails 3.0.0.0.beta1 → 3.0.0.0.beta2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8dbc115da867ae4f5443481e512767dfc4dcaeed
-  data.tar.gz: 4ff2f2b09ea5725acbd9dacdc79594769992ffbf
+  metadata.gz: 6f36afaf5970894e884096dfc77256c8d643051e
+  data.tar.gz: 019a310f1c4852ac3fa92298816db1befdf1af63
 SHA512:
-  metadata.gz: c474dab5e3e11a7083282be3246f843b7ce5dee7d073999d7a7f9ee1400392cb8cfc4132609c4016045899197a8cd01159e10555ef3ffa96f739e423382615a3
-  data.tar.gz: 033179c2efb115e1056eb7791b0b7d7a3e672525ec4de35d66d5eef21ec0bf12803567e7b830b20fe678e9e417c6bd9dbee3ae43a322feb87496c44db22cf993
+  metadata.gz: 5b247c95cb2dffd7b4da9c258477766a2d32559f31c70f03f897d4c6ebfa737ef6b85ba111d3372222efc19204cbcf9a9beec39c18876c1697604b3941b97f7c
+  data.tar.gz: 08632391677eebd10042018161f7f23509876883737e903ef1a8ca1cb9443a564da21296a6683015f230af88ee086a6f3de356c7847bc0ea50533595ac2ae609

data/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "office-ui-fabric-rails",
-  "version": "3.0.0.0.beta",
+  "version": "3.0.0.0.beta2",
   "dependencies": {
-    "office-ui-fabric": "3.0.0-beta"
+    "office-ui-fabric": "3.0.0-beta2"
   }
-}
+}

data/lib/office-ui-fabric-rails/version.rb

@@ -1,6 +1,6 @@
 module OfficeUiFabric
   module Rails
-    FABRIC_VERSION = "3.0.0.beta"
-    VERSION = "3.0.0.0.beta1"
+    FABRIC_VERSION = "3.0.0.beta2"
+    VERSION = "3.0.0.0.beta2"
   end
-end
+end

data/vendor/assets/css/fabric.components.css

@@ -8,6 +8,7 @@
 */
 .ms-Breadcrumb {
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   margin: 23px 0 1px;
 }
 
@@ -71,7 +72,7 @@
   z-index: 105;
 }
 
-.ms-Breadcrumb-overflowMenu:before {
+.ms-Breadcrumb-overflowMenu::before {
   position: absolute;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
   top: -6px;
@@ -172,14 +173,14 @@
   margin: 0;
   padding: 0;
   box-shadow: none;
-  color: #333333;
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  color: #333333;
   font-size: 14px;
   font-weight: 400;
   background-color: #f4f4f4;
   border: 1px solid #f4f4f4;
   cursor: pointer;
-  display: inline-block;
   height: 32px;
   min-width: 80px;
   padding: 4px 20px 6px;
@@ -293,37 +294,36 @@
 }
 
 .ms-Button.ms-Button--hero {
+  -ms-flex-align: center;
+  align-items: center;
   background-color: transparent;
   border: 0;
-  vertical-align: top;
-  line-height: normal;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
 }
 
 .ms-Button.ms-Button--hero .ms-Button-icon {
   color: #0078d7;
-  display: inline-block;
-  font-size: 12px;
-  position: relative;
-  top: -8px;
+  display: block;
+  margin-right: 4px;
   text-align: center;
 }
 
 .ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
   border-radius: 18px;
   border: 1px solid #0078d7;
+  font-size: 12px;
   height: 18px;
   line-height: 18px;
   width: 18px;
-  font-size: 12px;
-  margin: 0;
 }
 
 .ms-Button.ms-Button--hero .ms-Button-label {
   color: #0078d7;
-  font-weight: 100;
   font-size: 21px;
+  font-weight: 100;
   position: relative;
-  top: -5px;
   text-decoration: none;
 }
 
@@ -434,8 +434,9 @@
 }
 
 .ms-Callout {
-  width: 288px;
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  width: 288px;
 }
 
 .ms-Callout.is-hidden {
@@ -567,12 +568,13 @@
 }
 
 .ms-CheckBox {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   min-height: 36px;
@@ -589,12 +591,12 @@
   cursor: default;
 }
 
-.ms-CheckBox .ms-Choice-field.is-disabled:before {
+.ms-CheckBox .ms-Choice-field.is-disabled::before {
   background-color: #c8c8c8;
   color: #c8c8c8;
 }
 
-.ms-CheckBox .ms-Choice-field.is-disabled:after {
+.ms-CheckBox .ms-Choice-field.is-disabled::after {
   border-color: #eaeaea;
 }
 
@@ -602,7 +604,7 @@
   color: #a6a6a6;
 }
 
-.ms-CheckBox .ms-CheckBox-field.in-focus:after {
+.ms-CheckBox .ms-CheckBox-field.in-focus::after {
   border-color: #767676;
 }
 
@@ -613,7 +615,7 @@
   position: relative;
 }
 
-.ms-CheckBox .ms-Choice-field:after {
+.ms-CheckBox .ms-Choice-field::after {
   content: '';
   display: inline-block;
   border: 1px #c8c8c8 solid;
@@ -627,7 +629,7 @@
   position: absolute;
 }
 
-.ms-CheckBox .ms-Choice-field:hover:after {
+.ms-CheckBox .ms-Choice-field:hover::after {
   border-color: #767676;
 }
 
@@ -635,12 +637,12 @@
   color: #000000;
 }
 
-.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after {
+.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox::after {
   border-radius: 0;
 }
 
-.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before,
-.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before {
+.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover::before,
+.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked::before {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -657,7 +659,7 @@
   left: 3px;
 }
 
-.ms-CheckBox .ms-Choice-field.is-checked:before {
+.ms-CheckBox .ms-Choice-field.is-checked::before {
   background-color: #666666;
   border-color: #666666;
   color: #666666;
@@ -674,18 +676,19 @@
   box-sizing: border-box;
 }
 
-.ms-CheckBox .ms-Choice-field.is-checked:hover:before {
+.ms-CheckBox .ms-Choice-field.is-checked:hover::before {
   background-color: #212121;
   color: #212121;
 }
 
 .ms-RadioButton {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   min-height: 36px;
@@ -702,12 +705,12 @@
   cursor: default;
 }
 
-.ms-RadioButton .ms-Choice-type--radio.is-disabled:before {
+.ms-RadioButton .ms-Choice-type--radio.is-disabled::before {
   background-color: #c8c8c8;
   color: #c8c8c8;
 }
 
-.ms-RadioButton .ms-Choice-type--radio.is-disabled:after {
+.ms-RadioButton .ms-Choice-type--radio.is-disabled::after {
   border-color: #eaeaea;
 }
 
@@ -715,7 +718,7 @@
   color: #a6a6a6;
 }
 
-.ms-RadioButton .ms-Choice-type--radio.in-focus:after {
+.ms-RadioButton .ms-Choice-type--radio.in-focus::after {
   border-color: #767676;
 }
 
@@ -726,7 +729,7 @@
   position: relative;
 }
 
-.ms-RadioButton .ms-Choice-type--radio:after {
+.ms-RadioButton .ms-Choice-type--radio::after {
   content: '';
   display: inline-block;
   border: 1px #c8c8c8 solid;
@@ -740,7 +743,7 @@
   position: absolute;
 }
 
-.ms-RadioButton .ms-Choice-type--radio:hover:after {
+.ms-RadioButton .ms-Choice-type--radio:hover::after {
   border-color: #767676;
 }
 
@@ -748,7 +751,7 @@
   color: #000000;
 }
 
-.ms-RadioButton .ms-Choice-type--radio.is-checked:before {
+.ms-RadioButton .ms-Choice-type--radio.is-checked::before {
   background-color: #666666;
   border-color: #666666;
   color: #666666;
@@ -765,14 +768,15 @@
   box-sizing: border-box;
 }
 
-.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before {
+.ms-RadioButton .ms-Choice-type--radio.is-checked:hover::before {
   background-color: #212121;
   color: #212121;
 }
 
 .ms-ChoiceFieldGroup {
-  margin-bottom: 4px;
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  margin-bottom: 4px;
 }
 
 .ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list {
@@ -781,13 +785,14 @@
 }
 
 .ms-CommandBar {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   background-color: #eff6fc;
   height: 40px;
   white-space: nowrap;
   padding-left: 0;
   border: 0;
   position: relative;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
 }
 
 .ms-CommandBar:focus {
@@ -875,9 +880,10 @@
 }
 
 .ms-CommandButton {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   display: inline-block;
   position: relative;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
 }
 
 .ms-CommandButton.is-hidden {
@@ -915,7 +921,6 @@
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   cursor: pointer;
@@ -984,7 +989,6 @@
 }
 
 .ms-CommandButton-label {
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   color: #333333;
@@ -1002,7 +1006,6 @@
   display: inline-block;
   position: relative;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 17px;
   font-weight: 300;
   min-width: 17px;
@@ -1031,7 +1034,6 @@
 
 .ms-CommandButton-splitIcon {
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 17px;
   font-weight: 300;
   margin-left: -4px;
@@ -1076,7 +1078,7 @@
   padding-right: 0;
 }
 
-.ms-CommandButton.ms-CommandButton--pivot.is-active:before {
+.ms-CommandButton.ms-CommandButton--pivot.is-active::before {
   content: '';
   height: 2px;
   position: absolute;
@@ -1104,12 +1106,13 @@
 }
 
 .ms-ContextualMenu {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   display: block;
@@ -1231,7 +1234,7 @@
   background-color: #ffffff;
 }
 
-.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -1269,12 +1272,13 @@
 }
 
 .ms-DatePicker {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   margin-bottom: 17px;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   z-index: 300;
 }
 
@@ -1404,7 +1408,7 @@
   background-color: #c7e0f4;
 }
 
-.ms-DatePicker-day--disabled:before {
+.ms-DatePicker-day--disabled::before {
   border-top-color: #a6a6a6;
 }
 
@@ -1716,10 +1720,11 @@
 }
 
 .ms-Dialog {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
   background-color: #ffffff;
   display: none;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   height: auto;
   min-width: 220px;
   max-width: 340px;
@@ -1811,12 +1816,13 @@
 }
 
 .ms-Dropdown {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   margin-bottom: 10px;
@@ -1900,7 +1906,7 @@
   padding: 0 16px;
 }
 
-.ms-Panel .ms-Dropdown-items:before {
+.ms-Panel .ms-Dropdown-items::before {
   content: none;
   border: 0;
 }
@@ -1956,7 +1962,7 @@
   max-width: 100%;
 }
 
-.ms-Dropdown-items:before {
+.ms-Dropdown-items::before {
   content: '';
   position: absolute;
   z-index: -1;
@@ -2082,10 +2088,11 @@
 }
 
 .ms-FacePile {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   position: relative;
   height: 32px;
   width: auto;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
 }
 
 .ms-FacePile .ms-FacePile-personaCardHost {
@@ -2177,12 +2184,13 @@
 }
 
 .ms-Label {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 12px;
   font-weight: 400;
   box-sizing: border-box;
@@ -2190,7 +2198,7 @@
   padding: 5px 0;
 }
 
-.ms-Label.is-required:after {
+.ms-Label.is-required::after {
   content: ' *';
   color: #a80000;
 }
@@ -2201,6 +2209,7 @@
 
 .ms-Link {
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   font-size: 14px;
   font-weight: 400;
   color: #0078d7;
@@ -2231,25 +2240,27 @@
 }
 
 .ms-List {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   list-style-type: none;
 }
 
 .ms-ListItem {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   *zoom: 1;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   padding: 9px 28px 3px;
@@ -2369,7 +2380,7 @@
   font-weight: 600;
 }
 
-.ms-ListItem.is-unseen:after {
+.ms-ListItem.is-unseen::after {
   border-right: 10px solid transparent;
   border-top: 10px solid #0078d7;
   left: 0;
@@ -2396,7 +2407,7 @@
   outline: 1px solid transparent;
 }
 
-.ms-ListItem.is-selectable:hover:before {
+.ms-ListItem.is-selectable:hover::before {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -2413,12 +2424,12 @@
   border: 1px solid #767676;
 }
 
-.ms-ListItem.is-selected:before {
+.ms-ListItem.is-selected::before {
   border: 1px solid transparent;
 }
 
-.ms-ListItem.is-selected:before,
-.ms-ListItem.is-selected:hover:before {
+.ms-ListItem.is-selected::before,
+.ms-ListItem.is-selected:hover::before {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -2480,8 +2491,9 @@
 }
 
 .ms-MessageBanner {
-  color: #333333;
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  color: #333333;
   font-size: 12px;
   font-weight: 400;
   position: relative;
@@ -2609,12 +2621,13 @@
 }
 
 .ms-ContextualHost {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   z-index: 10;
   margin: 16px auto;
   position: relative;
   min-width: 10px;
   display: none;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   background-color: #ffffff;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
 }
@@ -2715,6 +2728,8 @@
 }
 
 .ms-MessageBar {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   padding: 8px;
   display: table;
   background-color: #f4f4f4;
@@ -2733,8 +2748,9 @@
 }
 
 .ms-MessageBar-text {
-  color: #333333;
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  color: #333333;
   font-size: 12px;
   font-weight: 400;
 }
@@ -2785,23 +2801,24 @@
   top: 3px;
 }
 
-.ms-MessageBar.ms-MessageBar--success .ms-Icon:before {
+.ms-MessageBar.ms-MessageBar--success .ms-Icon::before {
   margin-left: 1px;
 }
 
-.ms-MessageBar.ms-MessageBar--success .ms-Icon:after {
+.ms-MessageBar.ms-MessageBar--success .ms-Icon::after {
   font-size: 8px;
   margin-left: 3px;
   top: 1px;
 }
 
 .ms-OrgChart {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
 }
@@ -2839,6 +2856,8 @@
 }
 
 .ms-Overlay {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   background-color: rgba(255, 255, 255, 0.4);
   position: absolute;
   bottom: 0;
@@ -2846,7 +2865,6 @@
   right: 0;
   top: 0;
   z-index: 0;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   display: none;
 }
 
@@ -2859,6 +2877,8 @@
 }
 
 .ms-Panel {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   background-color: #ffffff;
   width: 100%;
   max-width: 272px;
@@ -2868,7 +2888,6 @@
   bottom: 0;
   right: 0;
   z-index: 10;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   display: none;
 }
 
@@ -2912,20 +2931,13 @@
   max-width: 1192px;
 }
 
-.ms-PanelHost.ms-PanelHost--left {
-  right: auto;
-  left: 0;
-  border-left: 1px solid #eaeaea;
-  border-right: 1px solid #eaeaea;
+.ms-Panel--left {
   box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2);
+  left: 0;
+  right: auto;
 }
 
-.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands,
-.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner {
-  display: none;
-}
-
-.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main {
+.ms-Panel--left.animate-in {
   animation-name: fadeIn, slideRightIn40;
   -webkit-animation-duration: 0.367s;
      -moz-animation-duration: 0.367s;
@@ -2935,17 +2947,7 @@
   animation-fill-mode: both;
 }
 
-.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay {
-  -webkit-animation-duration: 0.367s;
-  -webkit-animation-name: fadeIn;
-  -webkit-animation-fill-mode: both;
-          animation-duration: 0.367s;
-          animation-name: fadeIn;
-          animation-fill-mode: both;
-          animation-duration: 0.267s;
-}
-
-.ms-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main {
+.ms-Panel--left.animate-out {
   animation-name: fadeOut, slideLeftOut40;
   -webkit-animation-duration: 0.167s;
      -moz-animation-duration: 0.167s;
@@ -2955,16 +2957,6 @@
   animation-fill-mode: both;
 }
 
-.ms-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay {
-  -webkit-animation-duration: 0.367s;
-  -webkit-animation-name: fadeOut;
-  -webkit-animation-fill-mode: both;
-          animation-duration: 0.367s;
-          animation-name: fadeOut;
-          animation-fill-mode: both;
-          animation-duration: 0.167s;
-}
-
 .ms-Panel-closeButton {
   background: none;
   border: 0;
@@ -3020,106 +3012,77 @@
   }
 }
 
-@media (min-width: 480px) {
-  .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar {
-    display: block;
-  }
-}
-
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover {
-  background-color: #d7eaf9;
-}
-
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active {
-  background-color: #b5d8f4;
-}
-
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon {
-  color: #07288b;
-}
-
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText {
-  color: #000000;
-}
-
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child {
-  background-color: #0078d7;
-  box-shadow: inset 0 1px 0 0 #2488d8;
-}
-
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon {
-  color: #ffffff;
-}
-
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText {
-  color: #ffffff;
+.ms-PanelHost {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
 }
 
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper {
-  padding-left: 12px;
-  padding-right: 12px;
+.ms-PanelHost .ms-Overlay {
   cursor: pointer;
 }
 
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover {
-  background-color: #005a9e;
+.ms-PeoplePicker {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
   box-shadow: none;
+  color: #333333;
+  font-size: 14px;
+  background-color: #ffffff;
+  margin-bottom: 10px;
 }
 
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon {
-  color: #ffffff;
+.ms-PeoplePicker-searchBox {
+  border-bottom: 1px solid #c8c8c8;
+  cursor: text;
 }
 
-.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText {
-  color: #ffffff;
+.ms-PeoplePicker-searchBox:hover {
+  border-color: #767676;
 }
 
-.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
-  animation-name: fadeIn, slideDownIn20;
-  -webkit-animation-duration: 0.367s;
-     -moz-animation-duration: 0.367s;
-      -ms-animation-duration: 0.367s;
-       -o-animation-duration: 0.367s;
-  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-  animation-fill-mode: both;
-  animation-delay: 250ms;
+.ms-PeoplePicker-searchBox.is-active,
+.ms-PeoplePicker-searchBox:focus {
+  border-color: #0078d7;
 }
 
-@media (min-width: 480px) {
-  .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar {
-    animation-delay: 500ms;
+@media screen and (-ms-high-contrast: active) {
+  .ms-PeoplePicker-searchBox:hover,
+  .ms-PeoplePicker-searchBox:focus {
+    border-color: #1aebff;
   }
 }
 
-.ms-PeoplePicker {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  box-shadow: none;
-  color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-  font-size: 14px;
-  background-color: #ffffff;
-  margin-bottom: 10px;
+@media screen and (-ms-high-contrast: black-on-white) {
+  .ms-PeoplePicker-searchBox:hover,
+  .ms-PeoplePicker-searchBox:focus {
+    border-color: #37006e;
+  }
 }
 
-.ms-PeoplePicker-searchBox {
-  border-bottom: 2px solid #0078d7;
+.ms-PeoplePicker-searchBox::-webkit-input-placeholder,
+.ms-PeoplePicker-searchBox::-moz-placeholder,
+.ms-PeoplePicker-searchBox:-moz-placeholder,
+.ms-PeoplePicker-searchBox:-ms-input-placeholder {
+  color: #666666;
 }
 
-.ms-PeoplePicker-searchBox .ms-TextField {
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined {
   border: 0;
   margin-bottom: 0;
+  display: inline-block;
+  width: auto;
 }
 
-.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field {
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field {
   min-height: 40px;
   border: 0;
 }
@@ -3128,6 +3091,10 @@
   border-color: #0078d7;
 }
 
+.ms-PeoplePicker-persona {
+  cursor: pointer;
+}
+
 .ms-PeoplePicker-persona.has-error .ms-Persona-primaryText {
   color: #a80000;
 }
@@ -3205,15 +3172,16 @@
   margin-bottom: 8px;
   padding-left: 16px;
   cursor: pointer;
+  outline: 0;
 }
 
-.ms-PeoplePicker-result:hover {
+.ms-PeoplePicker-result:hover,
+.ms-PeoplePicker-result:focus {
   background-color: #eaeaea;
 }
 
-.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover {
-  background-color: #c8c8c8;
-  outline: 1px solid transparent;
+.ms-PeoplePicker-result:focus {
+  box-shadow: 0 0 0 1px #0078d7 inset;
 }
 
 .ms-PeoplePicker-result.is-selected {
@@ -3224,6 +3192,10 @@
   background-color: #71afe5;
 }
 
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active {
+  background-color: #71afe5;
+}
+
 .ms-PeoplePicker-resultBtn,
 .ms-PeoplePicker-peopleListBtn {
   background: none;
@@ -3282,7 +3254,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  width: 30px;
+  width: 40px;
   text-align: center;
 }
 
@@ -3291,8 +3263,13 @@
   font-size: 15px;
 }
 
+.ms-PeoplePicker-resultAction:hover {
+  background-color: #c8c8c8;
+  outline: 1px solid transparent;
+}
+
 .ms-PeoplePicker-resultAction:active {
-  background-color: #71afe5;
+  background-color: #a6a6a6;
 }
 
 .ms-PeoplePicker-resultAdditionalContent {
@@ -3397,6 +3374,8 @@
 
 .ms-PeoplePicker-searchMorePrimary {
   padding-top: 2px;
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
   font-weight: 400;
 }
 
@@ -3424,215 +3403,203 @@
   top: 12px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
-  max-height: 209px;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction {
   height: 32px;
+  width: 32px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
-  margin-top: -8px;
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups {
+  max-height: 209px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-searchMore {
   height: 49px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-searchMore .ms-Spinner {
   width: 28px;
   height: 28px;
   top: 12px;
   left: 12px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-searchMoreBtn {
+  height: 100%;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
   background-size: 16px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-searchMoreIcon {
   height: 50px;
   width: 50px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
   font-size: 17px;
   top: 0;
   margin-top: 0;
   line-height: 50px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-searchMorePrimary {
   font-size: 12px;
   line-height: 45px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-searchMoreSecondary {
   display: none;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox,
-.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
-  height: 30px;
-  min-height: 30px;
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results {
+  border-bottom: 0;
+  padding: 20px 0 0;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField,
-.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
-  height: 28px;
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader {
+  display: none;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona,
-.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
-  cursor: pointer;
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard {
+  display: none;
+  position: absolute;
+  height: 200px;
 }
 
-.ms-PeoplePicker-selected {
-  margin-bottom: 20px;
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active {
+  display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable {
+  padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMore {
   display: none;
 }
 
-.ms-PeoplePicker-selected.is-active {
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMore.is-active {
   display: block;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile.is-searching .ms-PeoplePicker-results {
-  border-bottom: 0;
-  padding: 20px 0 0;
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMoreIcon {
+  height: 48px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile.is-searching .ms-PeoplePicker-peopleListHeader {
-  display: none;
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMoreBtn {
+  padding-left: 48px;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results {
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMoreIcon {
+  width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMorePrimary {
+  font-size: 12px;
+  line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+  top: 0;
+  line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Spinner {
+  top: 16px;
+  left: 14px;
+  height: 20px;
+  width: 20px;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile {
   position: relative;
   border: 0;
   box-shadow: none;
   margin: 0;
   max-width: 100%;
-  padding: 0;
-  padding-bottom: 10px;
   border-bottom: 1px solid #eaeaea;
 }
 
 @media (max-width: 479px) {
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-imageArea,
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-image,
+  .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+  .ms-PeoplePicker-selectedPeople .ms-Persona-image {
     width: 32px;
     height: 32px;
   }
 
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,
+  .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
     font-size: 28px;
     top: 6px;
   }
 
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,
+  .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
     font-size: 12px;
     line-height: 32px;
   }
 
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,
+  .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
     left: 19px;
   }
 
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,
+  .ms-PeoplePicker-selectedPeople .ms-Persona-details {
     padding-left: 8px;
   }
 
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,
+  .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
     font-size: 14px;
     padding-top: 3px;
   }
 
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,
+  .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
     display: none;
   }
 }
 
 @media (min-width: 480px) {
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,
+  .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
     display: block;
   }
 }
 
 @media (min-width: 480px) {
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn,
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn {
-    height: 42px;
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,
+  .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn,
+  .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn {
+    height: 40px;
   }
 }
 
 @media (min-width: 480px) {
-  .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction {
-    height: 42px;
+  .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,
+  .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction {
+    height: 40px;
   }
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PersonaCard {
-  display: none;
-  position: absolute;
-  height: 200px;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PersonaCard.is-active {
-  display: block;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona.ms-Persona--selectable {
-  padding: 0;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected {
+  margin-bottom: 20px;
   display: none;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active {
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active {
   display: block;
 }
 
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore,
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn,
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon {
-  height: 48px;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn {
-  padding-left: 48px;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon {
-  width: 48px;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary {
-  font-size: 12px;
-  line-height: 48px;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
-  top: 0;
-  line-height: 48px;
-}
-
-.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner {
-  top: 16px;
-  left: 14px;
-  height: 20px;
-  width: 20px;
-}
-
 .ms-PeoplePicker-selectedHeader,
 .ms-PeoplePicker-peopleListHeader {
   color: #0078d7;
@@ -3662,12 +3629,13 @@
 }
 
 .ms-Persona {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
@@ -4145,7 +4113,7 @@
   background-color: #ffffff;
 }
 
-.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before {
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before {
   content: '';
   width: 100%;
   height: 100%;
@@ -4156,7 +4124,7 @@
   border-radius: 50%;
 }
 
-.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after {
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after {
   content: '';
   width: 100%;
   height: 2px;
@@ -4168,11 +4136,11 @@
   left: 0;
 }
 
-.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after {
+.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after {
   top: 9px;
 }
 
-.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after {
+.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after {
   top: 13px;
 }
 
@@ -4220,7 +4188,7 @@
   width: auto;
   background-color: #f4f4f4;
   border-radius: 20px;
-  margin-bottom: 4px;
+  margin: 4px;
 }
 
 .ms-Persona.ms-Persona--token:hover {
@@ -4256,7 +4224,7 @@
 
 .ms-Persona.ms-Persona--token .ms-Persona-primaryText {
   padding-top: 0;
-  line-height: 30px;
+  line-height: 34px;
 }
 
 .ms-Persona.ms-Persona--token .ms-Persona-initials {
@@ -4264,6 +4232,8 @@
 }
 
 .ms-PersonaCard {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   animation-name: fadeIn, slideUpIn10;
   -webkit-animation-duration: 0.167s;
      -moz-animation-duration: 0.167s;
@@ -4272,7 +4242,6 @@
   animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
   animation-fill-mode: both;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   bottom: 0;
@@ -4291,14 +4260,23 @@
 
 .ms-PersonaCard-actions {
   box-sizing: border-box;
+  position: relative;
   list-style: none;
   margin: 0;
   padding: 0 10px;
-  border-bottom: 1px solid #c8c8c8;
   background-color: #ffffff;
   height: 48px;
 }
 
+.ms-PersonaCard-actions:before {
+  content: '';
+  position: absolute;
+  top: 47px;
+  left: 0;
+  width: 100%;
+  border-top: 1px solid #c8c8c8;
+}
+
 .ms-PersonaCard-action,
 .ms-PersonaCard-overflow {
   display: inline-block;
@@ -4323,8 +4301,8 @@
   color: #0078d7;
 }
 
-.ms-PersonaCard-action:before,
-.ms-PersonaCard-overflow:before {
+.ms-PersonaCard-action::before,
+.ms-PersonaCard-overflow::before {
   content: '';
   position: absolute;
   width: 100%;
@@ -4340,8 +4318,8 @@
   color: #0078d7;
 }
 
-.ms-PersonaCard-action.is-active:after,
-.ms-PersonaCard-overflow.is-active:after {
+.ms-PersonaCard-action.is-active::after,
+.ms-PersonaCard-overflow.is-active::after {
   box-sizing: border-box;
   -ms-transform: rotate(45deg);
       transform: rotate(45deg);
@@ -4371,7 +4349,7 @@
 .ms-PersonaCard-orgChart {
   position: absolute;
   right: 12px;
-  top: 0;
+  top: -95px;
 }
 
 .ms-PersonaCard-actionDetailBox {
@@ -4401,7 +4379,7 @@
   overflow: hidden;
 }
 
-.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after {
+.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after {
   content: '\e088';
 }
 
@@ -4422,7 +4400,7 @@
   width: 30px;
 }
 
-.ms-PersonaCard-detailExpander:after {
+.ms-PersonaCard-detailExpander::after {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -4443,7 +4421,7 @@
   color: #666666;
 }
 
-.ms-PersonaCard-action.ms-PersonaCard-orgChart:after {
+.ms-PersonaCard-action.ms-PersonaCard-orgChart::after {
   display: none;
 }
 
@@ -4460,45 +4438,71 @@
 }
 
 .ms-Pivot {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
 }
 
 .ms-Pivot-links {
-  color: #333333;
-  height: 30px;
+  font-size: 0;
+  height: 40px;
   list-style-type: none;
-  white-space: nowrap;
   padding: 0;
+  white-space: nowrap;
 }
 
 .ms-Pivot-link {
   color: #333333;
   display: inline-block;
-  font-weight: 300;
-  font-size: 15px;
-  line-height: 27px;
-  margin-right: 15px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 40px;
+  margin-right: 8px;
+  padding: 0 8px;
+  text-align: center;
 }
 
-.ms-Pivot-link:hover,
-.ms-Pivot-link:focus {
-  color: #000000;
+.ms-Pivot-link:hover {
   cursor: pointer;
 }
 
-.ms-Pivot-link:active {
-  color: #0078d7;
+.ms-Pivot-link::before {
+  background-color: transparent;
+  bottom: 0;
+  content: '';
+  height: 2px;
+  left: 8px;
+  position: absolute;
+  right: 8px;
+  transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-Pivot-link::after {
+  color: transparent;
+  content: attr(title);
+  display: block;
+  font-weight: bold;
+  height: 1px;
+  overflow: hidden;
+  visibility: hidden;
 }
 
 .ms-Pivot-link.is-selected {
-  color: #0078d7;
   font-weight: 600;
+  position: relative;
+}
+
+.ms-Pivot-link.is-selected::before {
+  background-color: #0078d7;
+}
+
+.ms-Pivot-link.is-disabled {
+  color: #a6a6a6;
 }
 
 .ms-Pivot-link.ms-Pivot-link--overflow {
@@ -4526,6 +4530,7 @@
 
 .ms-Pivot-content {
   display: none;
+  margin-top: 20px;
 }
 
 .ms-Pivot.ms-Pivot--large .ms-Pivot-link {
@@ -4536,7 +4541,7 @@
   font-weight: 300;
 }
 
-.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after {
   font-size: 17px;
 }
 
@@ -4573,16 +4578,6 @@
   background-color: #0078d7;
 }
 
-@media (min-width: 640px) {
-  .ms-Pivot-link {
-    font-size: 14px;
-  }
-
-  .ms-Pivot-link.ms-Pivot-link--overflow:after {
-    font-size: 14px;
-  }
-}
-
 @media screen and (-ms-high-contrast: active) {
   .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
     font-weight: 600;
@@ -4591,6 +4586,7 @@
 
 .ms-ProgressIndicator {
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   font-weight: 400;
 }
 
@@ -4646,12 +4642,13 @@
 }
 
 .ms-SearchBox {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   position: relative;
@@ -4884,9 +4881,10 @@
 }
 
 .ms-Spinner {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   position: relative;
   height: 20px;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
 }
 
 .ms-Spinner.ms-Spinner--large {
@@ -4918,8 +4916,9 @@
 }
 
 .ms-Spinner-label {
-  position: relative;
   font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  position: relative;
   font-size: 12px;
   font-weight: 400;
   color: #0078d7;
@@ -4928,10 +4927,11 @@
 }
 
 .ms-Table {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   display: table;
   width: 100%;
   border-collapse: collapse;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
 }
 
 .ms-Table--fixed {
@@ -4957,13 +4957,13 @@
   background-color: #0078d7;
 }
 
-.ms-Table tr.is-selected .ms-Table-rowCheck:before,
-.ms-Table-row.is-selected .ms-Table-rowCheck:before {
+.ms-Table tr.is-selected .ms-Table-rowCheck::before,
+.ms-Table-row.is-selected .ms-Table-rowCheck::before {
   display: none;
 }
 
-.ms-Table tr.is-selected .ms-Table-rowCheck:after,
-.ms-Table-row.is-selected .ms-Table-rowCheck:after {
+.ms-Table tr.is-selected .ms-Table-rowCheck::after,
+.ms-Table-row.is-selected .ms-Table-rowCheck::after {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -5032,7 +5032,7 @@
   padding: 0;
 }
 
-.ms-Table-rowCheck:before {
+.ms-Table-rowCheck::before {
   border: 1px solid #a6a6a6;
   content: '';
   display: block;
@@ -5055,18 +5055,19 @@
     background: none;
   }
 
-  .ms-Table-row.is-selected .ms-Table-rowCheck:before {
+  .ms-Table-row.is-selected .ms-Table-rowCheck::before {
     display: block;
   }
 }
 
 .ms-Label {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 12px;
   font-weight: 400;
   box-sizing: border-box;
@@ -5074,7 +5075,7 @@
   padding: 5px 0;
 }
 
-.ms-Label.is-required:after {
+.ms-Label.is-required::after {
   content: ' *';
   color: #a80000;
 }
@@ -5084,12 +5085,13 @@
 }
 
 .ms-TextField {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   margin-bottom: 8px;
@@ -5109,15 +5111,15 @@
   color: #a6a6a6;
 }
 
-.ms-TextField.is-required .ms-Label:after {
+.ms-TextField.is-required .ms-Label::after {
   content: ' *';
   color: #a80000;
 }
 
-.ms-TextField.is-required::-webkit-input-placeholder:after,
-.ms-TextField.is-required::-moz-placeholder:after,
-.ms-TextField.is-required:-moz-placeholder:after,
-.ms-TextField.is-required:-ms-input-placeholder:after {
+.ms-TextField.is-required::-webkit-input-placeholder::after,
+.ms-TextField.is-required::-moz-placeholder::after,
+.ms-TextField.is-required:-moz-placeholder::after,
+.ms-TextField.is-required:-ms-input-placeholder::after {
   content: ' *';
   color: #a80000;
 }
@@ -5165,6 +5167,13 @@
   }
 }
 
+.ms-TextField-field[disabled] {
+  background-color: #f4f4f4;
+  border-color: #f4f4f4;
+  pointer-events: none;
+  cursor: default;
+}
+
 .ms-TextField-field::-webkit-input-placeholder,
 .ms-TextField-field::-moz-placeholder,
 .ms-TextField-field:-moz-placeholder,
@@ -5282,6 +5291,10 @@
 }
 
 .ms-TextField.ms-TextField--multiline .ms-TextField-field {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  color: #333333;
+  font-size: 12px;
   font-weight: 300;
   line-height: 17px;
   min-height: 60px;
@@ -5334,12 +5347,13 @@
 }
 
 .ms-Label {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 12px;
   font-weight: 400;
   box-sizing: border-box;
@@ -5347,7 +5361,7 @@
   padding: 5px 0;
 }
 
-.ms-Label.is-required:after {
+.ms-Label.is-required::after {
   content: ' *';
   color: #a80000;
 }
@@ -5357,12 +5371,13 @@
 }
 
 .ms-Toggle {
+  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   box-shadow: none;
   color: #333333;
-  font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
   font-size: 14px;
   font-weight: 400;
   position: relative;
@@ -5380,7 +5395,7 @@
   background-color: #f4f4f4;
 }
 
-.ms-Toggle .ms-Toggle-field:before {
+.ms-Toggle .ms-Toggle-field::before {
   position: absolute;
   display: block;
   box-sizing: content-box;
@@ -5394,7 +5409,7 @@
 }
 
 @media screen and (-ms-high-contrast: active) {
-  .ms-Toggle .ms-Toggle-field:before {
+  .ms-Toggle .ms-Toggle-field::before {
     border: 2.5px solid #ffffff;
     height: 15px;
     outline: 0;
@@ -5402,12 +5417,12 @@
 }
 
 @media screen and (-ms-high-contrast: black-on-white) {
-  .ms-Toggle .ms-Toggle-field:before {
+  .ms-Toggle .ms-Toggle-field::before {
     border-color: #000000;
   }
 }
 
-.ms-Toggle .ms-Toggle-field:before {
+.ms-Toggle .ms-Toggle-field::before {
   right: auto;
   border-right: 2.5px solid #ffffff;
 }
@@ -5428,7 +5443,7 @@
   background-color: #0078d7;
 }
 
-.ms-Toggle .ms-Toggle-field.is-selected:before {
+.ms-Toggle .ms-Toggle-field.is-selected::before {
   position: absolute;
   display: block;
   box-sizing: content-box;
@@ -5442,7 +5457,7 @@
 }
 
 @media screen and (-ms-high-contrast: active) {
-  .ms-Toggle .ms-Toggle-field.is-selected:before {
+  .ms-Toggle .ms-Toggle-field.is-selected::before {
     border: 2.5px solid #ffffff;
     height: 15px;
     outline: 0;
@@ -5450,12 +5465,12 @@
 }
 
 @media screen and (-ms-high-contrast: black-on-white) {
-  .ms-Toggle .ms-Toggle-field.is-selected:before {
+  .ms-Toggle .ms-Toggle-field.is-selected::before {
     border-color: #000000;
   }
 }
 
-.ms-Toggle .ms-Toggle-field.is-selected:before {
+.ms-Toggle .ms-Toggle-field.is-selected::before {
   left: auto;
   border-left: 2.5px solid #ffffff;
 }
@@ -5518,20 +5533,20 @@
   cursor: default;
 }
 
-.ms-Toggle.is-disabled .ms-Toggle-field:before {
+.ms-Toggle.is-disabled .ms-Toggle-field::before {
   background-color: #c8c8c8;
 }
 
 @media screen and (-ms-high-contrast: active) {
   .ms-Toggle.is-disabled .ms-Toggle-field,
-  .ms-Toggle.is-disabled .ms-Toggle-field:before {
+  .ms-Toggle.is-disabled .ms-Toggle-field::before {
     border-color: #00ff00;
   }
 }
 
 @media screen and (-ms-high-contrast: black-on-white) {
   .ms-Toggle.is-disabled .ms-Toggle-field,
-  .ms-Toggle.is-disabled .ms-Toggle-field:before {
+  .ms-Toggle.is-disabled .ms-Toggle-field::before {
     border-color: #600000;
   }
 }