Issue #2408463 by thomasfava, MathieuSpil, Manjit.Singh, Vidushi Mehta,...

Issue #2408463 by thomasfava, MathieuSpil, Manjit.Singh, Vidushi Mehta, LewisNyman: Rewrite entity-meta component inline with our CSS standards

core/modules/block/src/BlockListBuilder.php

@@ -311,7 +311,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#markup' => '<h3>' . t('Place blocks') . '</h3>',
       '#attributes' => array(
         'class' => array(
-          'entity-meta-header',
+          'entity-meta__header',
         ),
       ),
     );

core/themes/seven/css/components/entity-meta.css

@@ -3,48 +3,46 @@
  */
 .entity-meta {
   background-color: #ececec;
-  border-bottom: 0;
   border-left: 1px solid #bfbfbf;
   border-right: 1px solid #bfbfbf;
-  border-top: 0;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
-  margin-top: 0;
-  padding-top: 0;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
 }
-.entity-meta-header,
+.entity-meta__header,
 .entity-meta details {
   background-color: #f7f7f7;
   border-top: 1px solid #bfbfbf;
   border-bottom: 1px solid #bfbfbf;
 }
-.entity-meta-header {
+.entity-meta__header {
   padding: 1em 1.5em;
 }
-.entity-meta-header .form-item {
-  margin: .25em 0;
-}
-.entity-meta-header .published {
-  font-size: 1.231em;
-  font-weight: bold;
+.entity-meta__title {
   text-shadow: 0 1px 0 #fff;
+  margin: 0.25em 0;
 }
-.entity-meta-header .changed {
+.entity-meta__header .form-item {
+  margin: 0.25em 0;
+}
+.entity-meta__last-saved {
   font-style: italic; /* As-designed, but really: why is this italic? */
 }
 .entity-meta details {
   border-left: 0;
   border-right: 0;
-  border-top: 1px solid #ffffff;
+  border-top: 1px solid #fff;
   margin: 0;
 }
+.entity-meta details:first-child {
+  border-top-color: #bfbfbf;
+}
 .entity-meta details[open] {
   background-color: transparent;
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
-  background-image:         linear-gradient(to bottom, rgba(0, 0, 0, .125), transparent 4px);
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.125), transparent 4px);
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.125), transparent 4px);
   border-top-width: 0;
   padding-top: 1px;
 }
-.entity-meta details[open] + [open] {
+.entity-meta details[open] + details[open] {
   background-image: none;
   border-top-width: 1px;
   padding-top: 0;

core/themes/seven/seven.theme

@@ -173,19 +173,22 @@ function seven_form_node_form_alter(&$form, FormStateInterface $form_state) {
   $form['advanced']['#type'] = 'container';
   $is_new = !$node->isNew() ? format_date($node->getChangedTime(), 'short') : t('Not saved yet');
   $form['meta'] = array(
-    '#attributes' => array('class' => array('entity-meta-header')),
+    '#attributes' => array('class' => array('entity-meta__header')),
     '#type' => 'container',
     '#group' => 'advanced',
     '#weight' => -100,
     'published' => array(
-      '#type' => 'item',
-      '#wrapper_attributes' => array('class' => array('published')),
-      '#markup' => $node->isPublished() ? t('Published') : t('Not published'),
+      '#type' => 'html_tag',
+      '#tag' => 'h3',
+      '#value' => $node->isPublished() ? t('Published') : t('Not published'),
       '#access' => !$node->isNew(),
+      '#attributes' => array(
+        'class' => 'entity-meta__title',
+      ),
     ),
     'changed' => array(
       '#type' => 'item',
-      '#wrapper_attributes' => array('class' => array('changed', 'container-inline')),
+      '#wrapper_attributes' => array('class' => array('entity-meta__last-saved', 'container-inline')),
       '#markup' => '<h4 class="label inline">' . t('Last saved') . '</h4> ' . $is_new,
     ),
     'author' => array(