Merge pull request #6992 from NuGet/dev

[2019.03.12] FI NuGetGallery DEV into MASTER

Author: Scott Bommarito

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -4,6 +4,7 @@
 @import "common-high-contrast.less";
 @import "common-licenses.less";
 @import "common-list-packages.less";
+@import "common-multi-select-dropdown.less";
 @import "common-user-package-list.less";
 @import "page-about.less";
 @import "page-account-settings.less";
@@ -17,6 +18,7 @@
 @import "page-forgot-password.less";
 @import "page-home.less";
 @import "page-list-packages.less";
+@import "page-manage-deprecation.less";
 @import "page-manage-organizations.less";
 @import "page-manage-owners.less";
 @import "page-manage-packages.less";

src/Bootstrap/less/theme/all.less

@@ -273,6 +273,20 @@ h2, h3 {
 }
 
 @media screen and (max-width: @screen-sm) {
+  .container {
+    // Bootstrap doesn't set the container width when the screen is xs.
+    // This works fine when there are no elements in the container that are wider than the viewport,
+    // however, if there are elements in the container that are wider than the viewport, 
+    // their overflow properties will not work properly because they are not bound by the size of the container.
+    // To fix this, we need to set the container width to be the width of the viewport minus the row margin on xs screens.
+    // This way, those elements that are larger than the viewport are properly bound by the size of the container and overflow properly.
+    width: calc(100vw - 15px);
+  }
+
+  .navbar-toggle {
+    margin-right: 0;
+  }
+
   img.package-icon {
     max-width: 60px;
     max-height: 60px;

src/Bootstrap/less/theme/base.less

@@ -0,0 +1,45 @@
+.multi-select-dropdown {
+    position: relative;
+    display: block;
+
+    .dropdown-btn {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px;
+        margin-bottom: 0px;
+        background-color: white;
+        border-style: inset;
+        border: 1px solid #7f7f7f;
+
+        span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    
+    .dropdown-content {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        border-top: 0px;
+
+        .dropdown-selector {
+            height: 300px;
+            overflow: auto;
+            
+            .dropdown-filter {
+                display: flex;
+                margin-bottom: 5px;
+
+                input {
+                    border: 0;
+                    margin-left: 10px;
+                    width: 100%;
+                }
+            }
+        }
+    }
+}