Issue #2854624 by lauriii, AaronChristian, vaplas, yogeshmpawar, tkoleary, ckrina, Gábor Hojtsy, chrisrockwell, andrewmacpherson: Details and accordion update based on Seven Style Guide

core/themes/seven/css/base/elements.css

@@ -158,14 +158,10 @@ details {
   line-height: 1.295em;
 }
 details summary {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+  padding: 0.95em 1.45em;
 }
 details summary:focus {
   outline: none;
-}
-details summary:focus,
-details summary:hover {
   text-decoration: underline;
 }
 img {

core/themes/seven/css/components/details.css

@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+.seven-details {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  background-color: #fcfcfa;
+  border: 1px solid #bfbfbf;
+  border-radius: 3px;
+}
+.seven-details__summary {
+  cursor: pointer;
+  text-shadow: 0 1px 0 white;
+  color: #0074bd;
+}
+.seven-details__summary:hover,
+.seven-details__summary:focus,
+.seven-details[open] > .seven-details__summary {
+  color: #004f80;
+}
+.seven-details__wrapper {
+  padding: 0 1.5em 1em 1.5em;
+}
+

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

@@ -2,19 +2,21 @@
  * Entity meta settings.
  */
 .entity-meta {
-  background-color: #ececec;
+  background-color: #edede8;
   border-left: 1px solid #bfbfbf;
   border-right: 1px solid #bfbfbf;
+  border-radius: 3px;
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
 }
 .entity-meta__header,
-.entity-meta details {
-  background-color: #f7f7f7;
+.entity-meta .seven-details {
+  background-color: #fcfcfa;
   border-top: 1px solid #bfbfbf;
   border-bottom: 1px solid #bfbfbf;
 }
 .entity-meta__header {
   padding: 1em 1.5em;
+  border-radius: 3px 3px 0 0;
 }
 .entity-meta__title {
   font-size: 1.231em;
@@ -28,34 +30,43 @@
 .entity-meta__last-saved {
   font-style: italic; /* As-designed, but really: why is this italic? */
 }
-.entity-meta details {
+.entity-meta .seven-details {
   border-left: 0;
   border-right: 0;
   border-top: 1px solid #fff;
   margin: 0;
+  border-radius: 0;
 }
-.entity-meta details:first-child {
-  border-top-color: #bfbfbf;
+.entity-meta .seven-details:last-child {
+  border-radius: 0 0 3px 3px;
 }
-.entity-meta details[open] {
+.entity-meta .seven-details[open] {
   background-color: transparent;
   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] + details[open] {
+.entity-meta .seven-details[open] + .seven-details[open] {
   background-image: none;
   border-top-width: 1px;
   padding-top: 0;
 }
-.entity-meta details > .details-wrapper {
+.entity-meta .seven-details > .seven-details__wrapper {
   padding-top: 0;
 }
-.entity-meta details > summary {
+.entity-meta .seven-details > summary {
   padding: 0.85em 1.25em;
   text-shadow: 0 1px 0 white;
 }
-.entity-meta details .summary {
-  display: none; /* Hide JS summaries. @todo Rethink summaries. */
+
+/**
+ * Hide JS summary from the details polyfill to make it consistent with native
+ * details elements.
+ *
+ * @todo Consider removing this after https://www.drupal.org/node/2493957 has
+ *   been solved.
+ */
+.entity-meta .seven-details .summary {
+  display: none;
 }

core/themes/seven/css/components/modules-page.css

@@ -3,18 +3,20 @@
   border: 0;
   border-top: 1px solid #ccc;
 }
-.system-modules details {
+.system-modules .seven-details {
+  background: none;
   border: 0;
   margin: 0;
   padding: 0;
 }
-.system-modules summary {
+.system-modules .seven-details__summary {
   border-bottom: 1px solid #ccc;
+  padding: 0.95em 0.5em;
 }
-.system-modules [open] summary {
+.system-modules [open] .seven-details__summary {
   border-bottom: none;
 }
-.system-modules .details-wrapper {
+.system-modules .seven-details__wrapper {
   padding: 0 0 0.5em 0;
 }
 .system-modules .fieldset-wrapper {

core/themes/seven/css/components/system-status-report.css

@@ -12,6 +12,8 @@
   margin: 0;
   width: 100%;
   overflow: auto;
+  background-color: transparent;
+  border-radius: 0;
 }
 .system-status-report__entry:last-of-type {
   border-bottom: 1px solid #bebfb9;
@@ -64,6 +66,7 @@
 .system-status-report details[open] > *,
 .system-status-report details > summary:first-child {
   display: block;
+  color: inherit;
 }
 
 .system-status-report__status-title .details-title:before,

core/themes/seven/css/components/views-ui.css

@@ -21,12 +21,12 @@ details.fieldset-no-legend {
  * a layout problem occurs for the Display format details if we don't fix its
  * padding), but it's probably safe to just let it apply everywhere.
  */
-#views-ui-add-form details details .details-wrapper {
+#views-ui-add-form details details .seven-details__wrapper {
   padding-left: 0;
   padding-right: 0;
 }
 
-.views-display-tab details.box-padding .details-wrapper {
+.views-display-tab details.box-padding .seven-details__wrapper {
   padding: 0;
 }
 

core/themes/seven/seven.info.yml

@@ -42,6 +42,11 @@ libraries-override:
         assets/vendor/jquery.ui/themes/base/dialog.css: false
   classy/dialog:
     seven/seven.drupal.dialog
+  classy/base:
+    css:
+      component:
+        css/components/details.css: false
+
 libraries-extend:
   core/ckeditor:
     - seven/ckeditor-dialog

core/themes/seven/seven.libraries.yml

@@ -12,6 +12,7 @@ global-styling:
       css/components/container-inline.module.css: {}
       css/components/breadcrumb.css: {}
       css/components/buttons.css: {}
+      css/components/details.css: {}
       css/components/messages.css: {}
       css/components/dropbutton.component.css: {}
       css/components/entity-meta.css: {}

core/themes/seven/templates/details.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Theme override for a details element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
+ * - title: (optional) The title of the element, may not be set.
+ * - description: (optional) The description of the element, may not be set.
+ * - children: (optional) The children of the element, may not be set.
+ * - value: (optional) The value of the element, may not be set.
+ *
+ * @see template_preprocess_details()
+ */
+#}
+{#
+  Prefix 'details' class to avoid collision with Modernizr.
+
+  @todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
+#}
+<details{{ attributes.addClass('seven-details') }}>
+  {%- if title -%}
+    {%
+      set summary_classes = [
+        'seven-details__summary',
+        required ? 'js-form-required',
+        required ? 'form-required',
+      ]
+    %}
+    <summary{{ summary_attributes.addClass(summary_classes) }}>
+      {{- title -}}
+    </summary>
+  {%- endif -%}
+  <div class="seven-details__wrapper details-wrapper">
+    {% if errors %}
+      <div class="form-item form-item--error-message">
+        <strong>{{ errors }}</strong>
+      </div>
+    {% endif %}
+    {%- if description -%}
+      <div class="seven-details__description">{{ description }}</div>
+    {%- endif -%}
+    {%- if children -%}
+      {{ children }}
+    {%- endif -%}
+    {%- if value -%}
+      {{ value }}
+    {%- endif -%}
+  </div>
+</details>