Update OOjs UI to v0.21.1

Release notes:
 https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/History.md;v0.21.1

Depends-On: I5edcf21effee760d9951965a152481f2c603b59b
Change-Id: I5edcf21effee760d9951965a152481f2c603b5b9

1 files changed, 104 insertions, 79 deletions

diff --git a/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
index 25add3d624b3..9b065737cdc3 100644
--- a/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.0
+ * OOjs UI v0.21.1
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-11T22:51:10Z
+ * Date: 2017-04-18T23:32:54Z
  */
 .oo-ui-draggableElement {
   padding: 1.0546875em 0.9375em 0.9375em;
@@ -15,14 +15,14 @@
   cursor: move;
   cursor: url(images/grab.cur );
   cursor: -webkit-grab;
-  cursor:    -moz-grab;
-  cursor:         grab;
+  cursor: -moz-grab;
+  cursor: grab;
 }
 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ):active {
   cursor: url(images/grabbing.cur );
   cursor: -webkit-grabbing;
-  cursor:    -moz-grabbing;
-  cursor:         grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
 }
 .oo-ui-draggableElement-handle.oo-ui-widget-disabled,
 .oo-ui-widget-disabled .oo-ui-draggableElement-handle {
@@ -45,8 +45,8 @@
 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
   width: 100%;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 .oo-ui-bookletLayout-outlinePanel-editable > .oo-ui-outlineSelectWidget {
   position: absolute;
@@ -97,8 +97,8 @@
 .oo-ui-menuLayout-content {
   position: absolute;
   -webkit-transition: all 200ms ease;
-     -moz-transition: all 200ms ease;
-          transition: all 200ms ease;
+  -moz-transition: all 200ms ease;
+  transition: all 200ms ease;
 }
 .oo-ui-menuLayout-menu {
   height: 18em;
@@ -184,13 +184,13 @@
   outline: 0;
 }
 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
-  border-radius: 0;
   margin-left: -1px;
+  border-radius: 0;
 }
 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
+  margin-left: 0;
   border-bottom-left-radius: 2px;
   border-top-left-radius: 2px;
-  margin-left: 0;
 }
 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
   border-bottom-right-radius: 2px;
@@ -200,6 +200,9 @@
 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
   position: absolute;
 }
+.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
+  border-left-color: #fff;
+}
 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
   border-color: #36c;
   box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
@@ -238,10 +241,10 @@
   vertical-align: middle;
   overflow: hidden;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-transform: translateZ(0);
-          transform: translateZ(0);
+  transform: translateZ(0);
   background-color: #f8f9fa;
   width: 3.5em;
   min-height: 26px;
@@ -250,8 +253,8 @@
   border-radius: 1em;
   margin-right: 0.5em;
   -webkit-transition: background-color 250ms, border-color 250ms;
-     -moz-transition: background-color 250ms, border-color 250ms;
-          transition: background-color 250ms, border-color 250ms;
+  -moz-transition: background-color 250ms, border-color 250ms;
+  transition: background-color 250ms, border-color 250ms;
 }
 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled {
   cursor: pointer;
@@ -260,8 +263,8 @@
   position: absolute;
   display: block;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 .oo-ui-toggleSwitchWidget:last-child {
   margin-right: 0;
@@ -278,8 +281,8 @@
   border-radius: 1em;
   z-index: 1;
   -webkit-transition: border-color 250ms;
-     -moz-transition: border-color 250ms;
-          transition: border-color 250ms;
+  -moz-transition: border-color 250ms;
+  transition: border-color 250ms;
 }
 .oo-ui-toggleSwitchWidget-grip {
   top: 0.3125em;
@@ -289,8 +292,8 @@
   height: 1.25em;
   border-radius: 1.25em;
   -webkit-transition: background-color 250ms, left 100ms, margin-left 100ms;
-     -moz-transition: background-color 250ms, left 100ms, margin-left 100ms;
-          transition: background-color 250ms, left 100ms, margin-left 100ms;
+  -moz-transition: background-color 250ms, left 100ms, margin-left 100ms;
+  transition: background-color 250ms, left 100ms, margin-left 100ms;
 }
 .oo-ui-toggleSwitchWidget-glow {
   display: none;
@@ -410,8 +413,8 @@
   position: relative;
   overflow: hidden;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator,
 .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
@@ -423,9 +426,9 @@
   cursor: default;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .oo-ui-selectFileWidget-label {
   position: absolute;
@@ -513,9 +516,9 @@
 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget,
@@ -539,18 +542,20 @@
   border-right-width: 0;
 }
 .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
+  top: -1px;
   left: 0.46875em;
-  min-height: 2.4em;
+  min-height: 2.5em;
   margin-left: -1px;
 }
 .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
+  top: -1px;
   right: 0.9375em;
-  min-height: 2.4em;
+  min-height: 2.5em;
 }
 .oo-ui-selectFileWidget-label {
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   display: block;
   right: 2.375em;
   padding-top: 0.625em;
@@ -616,8 +621,8 @@
   background-color: #fff;
   border-style: dashed;
   -webkit-transition: background-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-     -moz-transition: background-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-          transition: background-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: background-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: background-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
 }
 .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
   border-color: #72777d;
@@ -626,30 +631,35 @@
   background-color: #eaf3ff;
   color: #36c;
 }
-.oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
-.oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
-.oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
-  background-color: #eaecf0;
-  border-color: #c8ccd1;
-}
 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info,
-.oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info,
-.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info {
+.oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info {
   background-color: #eaecf0;
   color: #72777d;
   border-color: #c8ccd1;
   text-shadow: 0 1px 1px #fff;
 }
 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon,
-.oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon,
-.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
+.oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
   opacity: 0.51;
 }
 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator,
-.oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator,
-.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
+.oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
   opacity: 0.15;
 }
+.oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
+.oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
+  background-color: #eaecf0;
+  border-color: #c8ccd1;
+}
+.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info {
+  background-color: #eaecf0;
+  color: #222;
+  border-color: #c8ccd1;
+}
+.oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
+  background-color: #eaecf0;
+  border-color: #c8ccd1;
+}
 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-label {
   padding: 1em 0.9375em;
 }
@@ -665,13 +675,13 @@
 .oo-ui-outlineOptionWidget {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   padding: 1.0546875em 0.9375em 0.9375em;
   -webkit-transition: background-color 100ms, color 100ms;
-     -moz-transition: background-color 100ms, color 100ms;
-          transition: background-color 100ms, color 100ms;
+  -moz-transition: background-color 100ms, color 100ms;
+  transition: background-color 100ms, color 100ms;
 }
 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
   background-color: #eaecf0;
@@ -720,8 +730,8 @@
 .oo-ui-outlineControlsWidget-movers {
   float: left;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon {
   float: left;
@@ -769,8 +779,8 @@
   padding: 0.35em 1em;
   font-weight: bold;
   -webkit-transition: background-color 100ms, color 100ms;
-     -moz-transition: background-color 100ms, color 100ms;
-          transition: background-color 100ms, color 100ms;
+  -moz-transition: background-color 100ms, color 100ms;
+  transition: background-color 100ms, color 100ms;
 }
 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
   background-color: rgba(255, 255, 255, 0.3);
@@ -810,15 +820,18 @@
 .oo-ui-tagMultiselectWidget-content {
   position: relative;
 }
-.oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-content > input {
-  display: none;
-}
 .oo-ui-tagMultiselectWidget-group {
   display: inline;
 }
-.oo-ui-tagMultiselectWidget-inputPosition-outline {
+.oo-ui-tagMultiselectWidget-outlined {
   width: 100%;
 }
+.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined .oo-ui-tagMultiselectWidget-handle {
+  cursor: text;
+}
+.oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-content > input {
+  display: none;
+}
 .oo-ui-tagMultiselectWidget-focusTrap {
   display: inline-block;
   height: 1px;
@@ -831,8 +844,8 @@
   border: 1px solid #a2a9b1;
   border-radius: 2px;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 .oo-ui-tagMultiselectWidget-handle:last-child {
   margin-right: 0;
@@ -887,10 +900,9 @@
 }
 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
   background-color: #fff;
-  cursor: text;
   -webkit-transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-     -moz-transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-          transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
 }
 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled:hover .oo-ui-tagMultiselectWidget-handle {
   border-color: #72777d;
@@ -900,6 +912,19 @@
   outline: 0;
   box-shadow: inset 0 0 0 1px #36c;
 }
+.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
+  background-color: #f8f9fa;
+  border-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle .oo-ui-tagItemWidget.oo-ui-widget-enabled {
+  background-color: #fff;
+}
+.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
   color: #72777d;
   text-shadow: 0 1px 1px #fff;
@@ -918,8 +943,8 @@
   cursor: default;
   white-space: nowrap;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   width: auto;
   max-width: 100%;
   height: 1.7em;
@@ -951,8 +976,8 @@
   color: #222;
   padding-right: 1.5375em;
   -webkit-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
-     -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
-          transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
+  -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
+  transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
 }
 .oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
   background-color: #fff;
@@ -1036,8 +1061,8 @@
   border: 1px solid #a2a9b1;
   border-radius: 2px;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 .oo-ui-capsuleMultiselectWidget-handle:last-child {
   margin-right: 0;
@@ -1098,8 +1123,8 @@
   background-color: #fff;
   cursor: text;
   -webkit-transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-     -moz-transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
-          transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
 }
 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-enabled:hover .oo-ui-capsuleMultiselectWidget-handle {
   border-color: #72777d;
@@ -1127,8 +1152,8 @@
   cursor: default;
   white-space: nowrap;
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   width: auto;
   max-width: 100%;
   height: 1.7em;
@@ -1150,8 +1175,8 @@
   color: #222;
   padding-right: 1.5375em;
   -webkit-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
-     -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
-          transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
+  -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
+  transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
 }
 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled:hover {
   background-color: #fff;