Move reusable well styles into their own file

app/assets/stylesheets/framework.scss

@@ -39,3 +39,4 @@
 @import "framework/typography.scss";
 @import "framework/zen.scss";
 @import "framework/blank";
+@import "framework/wells.scss";

app/assets/stylesheets/framework/variables.scss

@@ -90,8 +90,8 @@ $table-border-color: #f0f0f0;
 $background-color: $gray-light;
 $dark-background-color: #f5f5f5;
 $table-text-gray: #8f8f8f;
-$widget-expand-item: #e8f2f7;
-$widget-inner-border: #eef0f2;
+$well-expand-item: #e8f2f7;
+$well-inner-border: #eef0f2;
 
 /*
  * Text

app/assets/stylesheets/framework/wells.scss

+.info-well {
+  background: $background-color;
+  color: $gl-gray;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+
+  .well-segment {
+    padding: $gl-padding;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $well-inner-border;
+    }
+
+    &.branch-info {
+      .monospace,
+      .commit-info {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .icon-container {
+    display: inline-block;
+    margin-right: 8px;
+
+    svg {
+      position: relative;
+      top: 2px;
+      height: 16px;
+      width: 16px;
+    }
+
+    &.commit-icon {
+      svg {
+        path {
+          fill: $gl-text-color;
+        }
+      }
+    }
+  }
+
+  .label.label-gray {
+    background-color: $well-expand-item;
+  }
+}

app/assets/stylesheets/pages/commit.scss

@@ -117,52 +117,6 @@
   }
 }
 
-.commit-info-widget {
-  background: $background-color;
-  color: $gl-gray;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-
-  .widget-row {
-    padding: $gl-padding;
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid $widget-inner-border;
-    }
-
-    &.branch-info {
-      .monospace,
-      .commit-info {
-        margin-left: 4px;
-      }
-    }
-  }
-
-  .icon-container {
-    display: inline-block;
-    margin-right: 8px;
-
-    svg {
-      position: relative;
-      top: 2px;
-      height: 16px;
-      width: 16px;
-    }
-
-    &.commit-icon {
-      svg {
-        path {
-          fill: $gl-text-color;
-        }
-      }
-    }
-  }
-
-  .label.label-gray {
-    background-color: $widget-expand-item;
-  }
-}
-
 .ci-status-link {
   svg {
     overflow: visible;

app/assets/stylesheets/pages/merge_requests.scss

@@ -60,7 +60,7 @@
   }
 
   .ci_widget {
-    border-bottom: 1px solid $widget-inner-border;
+    border-bottom: 1px solid $well-inner-border;
 
     svg {
       margin-right: 4px;

app/views/projects/commit/_commit_box.html.haml

@@ -55,8 +55,8 @@
     %pre.commit-description
       = preserve(markdown(@commit.description, pipeline: :single_line, author: @commit.author))
 
-.commit-info-widget
-  .widget-row.branch-info
+.info-well
+  .well-segment.branch-info
     .icon-container.commit-icon
       = custom_icon("icon_commit")
     %span.cgray= pluralize(@commit.parents.count, "parent")
@@ -66,7 +66,7 @@
       %i.fa.fa-spinner.fa-spin
 
   - if @commit.status
-    .widget-row.pipeline-info
+    .well-segment.pipeline-info
       .icon-container
         = ci_icon_for_status(@commit.status)
       Pipeline