Adding grey backgrounds, white boxes and aligning items

app/assets/stylesheets/provider/_bulk_operations.scss

@@ -24,3 +24,4 @@
     display: none;
   }
 }
+

app/assets/stylesheets/provider/_buttons.scss

@@ -119,6 +119,10 @@ form.formtastic .button-bar, .button-bar {
   }
 }
 
+.formtastic.cms_template .button-bar {
+  height: line-height-times(1.5);
+}
+
 @mixin outline-button($color: $font-color, $border-color: $border-color) {
   color: $color;
   display: inline-block;

app/assets/stylesheets/provider/_commons.scss

@@ -1,3 +1,5 @@
+@import 'provider/layouts/_main.scss';
+
 html {
   @include typography-base();
 }
@@ -76,17 +78,26 @@ h3 {
 
 p {
   margin: line-height-times(1/2) 0 line-height-times(1) 0;
-  //max-width: line-height-times(36);
 }
 
 h1 + p,
 h2 + p {
   padding: line-height-times(1);
-  margin: line-height-times(-1);
   margin-bottom: line-height-times(1);
   background-color: $body-background;
 }
 
+main > p:not(:first-child) {
+  padding: line-height-times(1);
+  @include white-box-shadow;
+}
+
+main > h1:first-child + p,
+main > h2:first-child + p {
+  box-shadow: none;
+  margin: line-height-times(-1) line-height-times(-1) line-height-times(1) line-height-times(-1);
+}
+
 dd p {
   margin: 0;
 }
@@ -105,7 +116,6 @@ ul, p, ol, dl {
 
 p + ul {
   list-style: none;
-  margin-top: line-height-times(-2/3);
   padding-left: line-height-times(2/3);
 }
 
@@ -171,10 +181,6 @@ a img {
   border: none;
 }
 
-.round, #page_templates, .alwaysontop {
-  //@include border-radius($border-radius);
-}
-
 pre code {
   border-radius: $border-radius;
   margin: line-height-times(1/2) 0 line-height-times(1);
@@ -235,3 +241,11 @@ hr, {
   color: $success-color;
   cursor: move;
 }
+
+#forum {
+  .u-dl, .post {
+    padding: line-height-times(1);
+    @include white-box-shadow;
+  }
+}
+

app/assets/stylesheets/provider/_fields_definitions.scss

@@ -5,11 +5,10 @@
 
   li {
     background: $background-color-base no-repeat line-height-times(1/2) center image-url("drag-icon.png");
-    border: $border-width solid $border-color;
     margin-bottom: line-height-times(1/2);
     padding: line-height-times(1/2) 0 line-height-times(1/2) line-height-times(1);
-    border-radius: $border-radius;
     overflow: visible !important;
+    @include white-box-shadow;
 
     &.ui-sortable-helper {
       @include box-shadow(0 0 line-height-times(1/2) $box-shadow-color);

app/assets/stylesheets/provider/_forms.scss

@@ -240,13 +240,11 @@ Load this stylesheet after formtastic.css in your layouts to override the CSS to
 
 form.formtastic {
   text-align: left; /* overriding legacy_theme text-align: center*/
+  margin: line-height-times(1) 0;
   min-width: line-height-times(20);
   width: 100%;
-
   padding: line-height-times(1);
-  padding-bottom: line-height-times(0);
-  background-color: $body-background;
-  box-shadow: rgba(3, 3, 3, 0.2) 0px 1px 2px 0px;
+  @include white-box-shadow;
 
   fieldset.inputs[data-behavior~=toggle-inputs] {
     border: $border-width $border-color solid;

app/assets/stylesheets/provider/_info_box.scss

@@ -1,9 +1,8 @@
 .InfoBox {
-  border-radius: $border-radius;
-  border: $border-width solid $border-color;
   display: block;
   margin: line-height-times(1/2) 0;
   padding: line-height-times(1);
+  @include white-box-shadow;
 
   &--notice {
     background: $dirty-color;

app/assets/stylesheets/provider/_inline_helper.scss

@@ -18,8 +18,9 @@
 }
 
 .helpButton {
-  position: absolute;
+  position: relative;
   margin-left: line-height-times(1/4);
+  top: line-height-times(1/4);
 }
 
 .formtastic .helpButton {

app/assets/stylesheets/provider/_links.scss

@@ -137,5 +137,5 @@ button.create_key {
 
 .ExportLink {
   float: right;
-  margin-top: line-height-times(1);
+  margin: line-height-times(1);
 }

app/assets/stylesheets/provider/_logo.scss

@@ -1,3 +1,5 @@
+@import 'provider/layouts/_main.scss';
+
 .logo-3scale {
   position: relative;
   float: left;
@@ -37,3 +39,12 @@
   padding: 0;
   float: none;
 }
+
+#logo_container {
+  padding: line-height-times(1);
+  @include white-box-shadow;
+
+  .delete {
+    float: right;
+  }
+}

app/assets/stylesheets/provider/_menu.scss

@@ -41,6 +41,7 @@ ul.login-form-links {
   font-size: $font-size-sm;
   padding: line-height-times(1);
   margin: line-height-times(-1);
+  margin-bottom: line-height-times(1);
   background-color: $body-background;
 
   .active {

app/assets/stylesheets/provider/_metrics.scss

@@ -21,8 +21,9 @@ th.collapsible {
 table.contract_table {
 	width: 100%;
 	margin-bottom: line-height-times(1/2);
-	border-collapse: collapse;
   border-spacing: 0;
+  border: line-height-times(1) solid $white;
+  @include white-box-shadow;
 
   &#features {
     table-layout: fixed;

app/assets/stylesheets/provider/_patternfly_tabs_fake.scss

@@ -56,10 +56,11 @@
 
       &.pf-m-current {
         .pf-c-tabs__button::before {
-          border-bottom-width: 0;
+          border-bottom-color: $white;
         }
 
         .pf-c-tabs__button {
+          background-color: $white;
           color: rgb(0, 102, 204); //var(--pf-c-tabs__item--m-current--Color);
         }
 
@@ -87,11 +88,6 @@
       top: 0;
     }
 
-    .pf-c-tabs__item:last-of-type {
-      .pf-c-tabs__button::before {
-        border-right-width: 1px;
-      }
-    }
   }
 }
 
@@ -114,7 +110,7 @@
  }
 
 .pf-tabs-header {
-  border-bottom: 1px solid white;
+  border-bottom: 1px solid transparent;
   float: right;
   line-height: line-height-times(1);
   position: relative;
@@ -125,6 +121,3 @@
   text-transform: uppercase;
 }
 
-.pf-c-tabs .pf-c-tabs__list .pf-c-tabs__item.pf-m-current .pf-c-tabs__button::before {
-  border-bottom: 1px solid white;
-}

app/assets/stylesheets/provider/_pop_navigation.scss

@@ -8,6 +8,7 @@ $pf4-sidebar-width: 18.125rem;
     float: left;
 
     .PopNavigation-list {
+      background-color: $white;
       left: $pf4-sidebar-width;
       margin-left: line-height-times(1 / 2);
     }

app/assets/stylesheets/provider/_section.scss

@@ -1,3 +1,12 @@
 .Section {
   margin-bottom: line-height-times(2);
+
+  &.u-toggleableBySettingsBox p {
+    @include white-box-shadow;
+  }
+
+  &#access-tokens p,
+  &#service-tokens p {
+    @include white-box-shadow;
+  }
 }

app/assets/stylesheets/provider/_services.scss

@@ -49,7 +49,7 @@
   ul.listing {
     clear: left;
     list-style: none;
-    border-radius: $border-radius;
+    background-color: $white;
     padding: line-height-times(1);
     border: $border-width solid $border-color;
     position: relative;
@@ -149,6 +149,8 @@
 
   .latest-alerts, .latest-apps, .service-settings, .service-plans, .application-plans, #mini-charts {
     @extend ul.listing;
+    border: none;
+    @include white-box-shadow;
   }
 
   p {

app/assets/stylesheets/provider/_settings_box.scss

@@ -1,10 +1,9 @@
 .SettingsBox,
 .IntegrationSettingsBox {
-  background-color: $content-background;
+  @include white-box-shadow;
   position: relative;
 
   &-toggle {
-    background-color: $content-background;
     color: $link-color;
     cursor: pointer;
     display: block !important;
@@ -14,7 +13,6 @@
     padding: line-height-times(1/4) line-height-times(1/4);
     position: relative;
     text-decoration: underline;
-    top: line-height-times(-3/4);
     z-index: 10;
 
     &:hover {
@@ -27,8 +25,6 @@
   }
 
   &-summary {
-    border: $border-width solid $border-color;
-    border-radius: $border-radius;
     min-height: line-height-times(2);
     padding: line-height-times(1);
     position: relative;
@@ -92,10 +88,9 @@
   }
 
   &-summary {
-    border: $border-width-lg solid $border-color;
+    border: $border-width-lg solid transparent;
     min-height: line-height-times(2);
     padding: line-height-times(1);
-    border-radius: $border-radius;
     position: relative;
   }
 
@@ -109,5 +104,6 @@
 
   &--is-erroneous {
     border-color: $error-color;
+    @include white-box-shadow;
   }
 }

app/assets/stylesheets/provider/_sidetabs.scss

@@ -66,9 +66,9 @@ $tab-min-height: line-height-times(21, true);
   float: left;
   width: $tab-content-width;
   margin-left: -$border-width;
-  background-color: $tab-content-color;
   border-left: $border-width solid $border-color;
   border-right: none;
   min-height: $tab-min-height;
   padding: 0 0 line-height-times(1) line-height-times(1);
+  @include white-box-shadow;
 }

app/assets/stylesheets/provider/_tables.scss

@@ -57,8 +57,8 @@ table.data {
   border: solid $body-background line-height-times(1);
   margin-bottom: line-height-times(1);
   margin-top: line-height-times(1/2);
-  box-shadow: rgba(3, 3, 3, 0.2) 0px 1px 2px 0px;
   width: 100%;
+  @include white-box-shadow;
 
   a.is-inline {
     display: inline;
@@ -183,7 +183,9 @@ table.list {
   }
 }
 
-
+table.mini {
+  border: line-height-times(1) solid $white;
+}
 
 table.mini td {
   padding-right: line-height-times(1);
@@ -197,6 +199,7 @@ table.mini, table#configs {
 
 table.list, table.data {
   border-collapse: collapse;
+  border-color: transparent;
   margin-bottom: 0;
   margin-top: 0;
   width: 100%;
@@ -292,3 +295,10 @@ td.thhead h3 {
 table.list.list-checkmarks tr th {
   word-break: break-word;
 }
+
+// IE 11 hack
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  #results_list {
+    @include white-box-shadow;
+  }
+}

app/assets/stylesheets/provider/admin/_account.scss

@@ -14,11 +14,40 @@
   #plan-overview {
     @extend div.right;
   }
+
+  .overview-box {
+    & > table.list {
+      margin: 1px;
+      @include white-box-shadow;
+
+      tr:last-child {
+        th, td {
+          border-bottom: 2px solid transparent;
+        }
+      }
+    }
+
+    #account-redhat-connect p,
+    #account-cancellation p {
+      margin: 1px;
+      @include white-box-shadow;
+    }
+
+    table.list th,
+    table.list td {
+      padding: line-height-times(1);
+    }
+  }
+
 }
 
 #key-overview {
   margin-bottom: line-height-times(2);
 
+  .info {
+    @include white-box-shadow;
+  }
+
   .key {
       background-repeat: no-repeat;
       background-position: 10px 20px;