From 3a0002fc93c1713fb6e1bfc5e311e5db2f1bf1d6 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Thu, 6 Aug 2015 17:01:20 +0100
Subject: [PATCH] Issue #2419475 by pjbaert, DickJohnson, emma.maria, Luxian,
 LewisNyman, tadityar, idebr, floretan, lauriii: Clean up the "Featured
 bottom" component in Bartik

---
 .../bartik/css/components/featured-bottom.css | 74 +++++++------------
 core/themes/bartik/css/print.css              |  6 +-
 core/themes/bartik/templates/block.html.twig  |  1 +
 core/themes/bartik/templates/page.html.twig   |  4 +-
 .../classy/templates/block/block.html.twig    |  1 +
 5 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/core/themes/bartik/css/components/featured-bottom.css b/core/themes/bartik/css/components/featured-bottom.css
index 07f2a5c18453..b9bb6b40e0b6 100644
--- a/core/themes/bartik/css/components/featured-bottom.css
+++ b/core/themes/bartik/css/components/featured-bottom.css
@@ -1,87 +1,63 @@
-/* ----------------- Featured Bottom ----------------- */
+/**
+* @file
+* Visual styles for Bartik's featured bottom component.
+*/
 
-#featured-bottom-wrapper {
-  background-color: #f0f0f0;
+.featured-bottom {
   background: rgba(30, 50, 10, 0.08);
   border-top: 1px solid #e7e7e7;
 }
-.region-featured-bottom-first,
-.region-featured-bottom-second,
-.region-featured-bottom-third {
-  box-sizing: border-box;
-  padding: 0 20px 0;
+.featured-bottom .region {
+  padding: 0 20px;
 }
 @media all and (min-width: 560px) {
-  .region-featured-bottom-first,
-  .region-featured-bottom-second,
-  .region-featured-bottom-third {
+  .featured-bottom .region {
     float: left; /* LTR */
     position: relative;
     box-sizing: border-box;
     padding: 20px 15px 30px;
     width: 33%;
   }
-  [dir="rtl"] .region-featured-bottom-first,
-  [dir="rtl"] .region-featured-bottom-second,
-  [dir="rtl"] .region-featured-bottom-third {
+  [dir="rtl"] .featured-bottom .region {
     float: right;
   }
-  .region-featured-bottom-second {
-    padding: 20px 5px 30px;
-  }
 }
 @media all and (min-width: 851px) {
-  .region-featured-bottom-first,
-  .region-featured-bottom-second,
-  .region-featured-bottom-third {
+  .featured-bottom .region {
     padding: 0 20px;
   }
 }
-#featured-bottom h2 {
+.featured-bottom h2 {
   color: #000;
   font-size: 1.4em;
   margin-bottom: 0.6em;
   text-shadow: 0 1px 0 #fff;
   text-align: center;
-  line-height: 1;
+  line-height: 1em;
 }
-#featured-bottom .block {
+.featured-bottom .block {
   margin-bottom: 1em;
   padding-bottom: 1em;
   border-bottom: 1px solid #dfdfdf;
-  line-height: 1.3;
+  line-height: 1.3em;
 }
-#featured-bottom .block:last-child {
+.featured-bottom .block:last-child {
   border-bottom: none;
 }
-#featured-bottom .block ul li,
-#featured-bottom .block ol li {
-  list-style: none;
-}
-#featured-bottom .block ul,
-#featured-bottom .block ol {
+.featured-bottom ul,
+.featured-bottom ol {
   padding-left: 0;
 }
-#featured-bottom #block-user-login .form-text {
+.featured-bottom ul li,
+.featured-bottom ol li {
+  list-style: none;
+}
+.featured-bottom input:not(.form-submit) {
   width: 185px;
 }
-#featured-bottom #block-user-online p {
-  margin-bottom: 0;
+.region-featured-bottom-third .feed-icon {
+  float: right;
 }
-#featured-bottom #block-node-syndicate h2 {
-  overflow: hidden;
-  width: 0;
-  height: 0;
-}
-#featured-bottom-third #block-node-syndicate {
-  text-align: right;
-}
-#featured-bottom #block-search-form .form-type-search input {
-  width: 185px;
-}
-#featured-bottom-second #block-system-powered-by {
+.region-featured-bottom-second .block-system-powered-by-block {
   text-align: center;
 }
-#featured-bottom-third #block-system-powered-by {
-  text-align: right;
-}
diff --git a/core/themes/bartik/css/print.css b/core/themes/bartik/css/print.css
index 248fe6e571c9..945215939760 100644
--- a/core/themes/bartik/css/print.css
+++ b/core/themes/bartik/css/print.css
@@ -27,13 +27,15 @@ body {
 .two-sidebars #content {
   width: 100%;
 }
-#featured-bottom-wrapper {
+.featured-bottom {
   width: 960px;
   margin: 0;
   padding: 0;
   border: none;
 }
-#featured-bottom-first, #featured-bottom-second, #featured-bottom-third {
+.featured-bottom-first,
+.featured-bottom-second,
+.featured-bottom-third {
   width: 250px;
 }
 
diff --git a/core/themes/bartik/templates/block.html.twig b/core/themes/bartik/templates/block.html.twig
index 31a95c073892..234af7037032 100644
--- a/core/themes/bartik/templates/block.html.twig
+++ b/core/themes/bartik/templates/block.html.twig
@@ -40,6 +40,7 @@
   set classes = [
     'block',
     'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
   ]
 %}
 <div{{ attributes.addClass(classes) }}>
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index d1ba506de9b6..c3e7c2294ff7 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -165,8 +165,8 @@
       </div>
     </div>
     {% if page.featured_bottom_first or page.featured_bottom_second or page.featured_bottom_third %}
-      <div id="featured-bottom-wrapper">
-        <aside id="featured-bottom" class="section layout-container clearfix" role="complementary">
+      <div class="featured-bottom">
+        <aside class="layout-container clearfix" role="complementary">
           {{ page.featured_bottom_first }}
           {{ page.featured_bottom_second }}
           {{ page.featured_bottom_third }}
diff --git a/core/themes/classy/templates/block/block.html.twig b/core/themes/classy/templates/block/block.html.twig
index a85c82c12f71..ce5477af4d7e 100644
--- a/core/themes/classy/templates/block/block.html.twig
+++ b/core/themes/classy/templates/block/block.html.twig
@@ -36,6 +36,7 @@
   set classes = [
     'block',
     'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
   ]
 %}
 <div{{ attributes.addClass(classes) }}>