6 files changed, 127 insertions, 18 deletions
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 57387b913dc..00c981f64c5 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -445,3 +445,9 @@ table {
     word-wrap: break-word;
   }
 }
+
+.disabled-content {
+  pointer-events: none;
+  opacity: .5;
+}
+
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 585f4871f5f..acf5de0e3b5 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -22,12 +22,6 @@
 }
 
 @media (min-width: $screen-sm-min) {
-  .issues_bulk_update {
-    .dropdown-menu-toggle {
-      width: 132px;
-    }
-  }
-
   .filter-item:not(:last-child) {
     margin-right: 6px;
   }
@@ -376,12 +370,6 @@
   padding: 0;
 }
 
-@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-  .issue-bulk-update-dropdown-toggle {
-    width: 100px;
-  }
-}
-
 @media (max-width: $screen-xs-max) {
   .issues-details-filters {
     padding: 0 0 10px;
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 0140dcf19c3..600a1f53b58 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -29,10 +29,6 @@
     display: none;
   }
 
-  .issues-holder .issue-check {
-    display: none;
-  }
-
   .rss-btn {
     display: none;
   }
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
new file mode 100644
index 00000000000..94528c7a222
--- /dev/null
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -0,0 +1,86 @@
+@mixin flex-max-width($max) {
+  flex: 0 0 #{$max + '%'};
+  max-width: #{$max + '%'};
+}
+
+.gl-responsive-table-row {
+  margin-top: 10px;
+  border: 1px solid $border-color;
+
+  @media (min-width: $screen-md-min) {
+    padding: 15px 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    border: none;
+    border-bottom: 1px solid $white-normal;
+  }
+
+  .table-section {
+    white-space: nowrap;
+
+    $section-widths: 10 15 25 30;
+    @each $width in $section-widths {
+      &.section-#{$width} {
+        flex: 0 0 #{$width + '%'};
+
+        @media (min-width: $screen-md-min) {
+          max-width: #{$width + '%'};
+        }
+      }
+    }
+
+    &:not(.table-button-footer) {
+      @media (max-width: $screen-sm-max) {
+        display: flex;
+        align-self: stretch;
+        padding: 10px;
+        align-items: center;
+        height: 62px;
+
+        &:not(:first-of-type) {
+          border-top: 1px solid $white-normal;
+        }
+      }
+    }
+  }
+}
+
+.table-row-header {
+  font-size: 13px;
+
+  @media (max-width: $screen-sm-max) {
+    display: none;
+  }
+}
+
+.table-mobile-header {
+  color: $gl-text-color-secondary;
+  @include flex-max-width(40);
+
+  @media (min-width: $screen-md-min) {
+    display: none;
+  }
+}
+
+.table-mobile-content {
+  @media (max-width: $screen-sm-max) {
+    @include flex-max-width(60);
+    text-align: right;
+  }
+}
+
+.flex-truncate-parent {
+  display: flex;
+}
+
+.flex-truncate-child {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: $screen-md-min) {
+    flex: 0 0 90%;
+  }
+}
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 5b62d7fa3a7..d4421e3af74 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -33,7 +33,7 @@
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) {
-    &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
+    &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
 
@@ -56,7 +56,7 @@
   z-index: 300;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
+    &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
   }
@@ -88,3 +88,35 @@
     min-height: 100%;
   }
 }
+
+@mixin maintain-sidebar-dimensions {
+  display: block;
+  width: $gutter-width;
+  padding: 10px 20px;
+}
+
+.issues-bulk-update.right-sidebar {
+  @include maintain-sidebar-dimensions;
+  transition: right $sidebar-transition-duration;
+  right: -$gutter-width;
+
+  &.right-sidebar-expanded {
+    @include maintain-sidebar-dimensions;
+    right: 0;
+  }
+
+  &.right-sidebar-collapsed {
+    @include maintain-sidebar-dimensions;
+    right: -$gutter-width;
+
+    .block {
+      padding: 16px 0;
+      width: 250px;
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  .issuable-sidebar {
+    padding: 0 3px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b3a86b92d93..4114a050d9a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -187,6 +187,7 @@ $divergence-graph-bar-bg: #ccc;
 $divergence-graph-separator-bg: #ccc;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
+$highlight-changes-color: rgb(235, 255, 232);
 
 
 /*