summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGábor Hojtsy2018-06-27 11:32:57 (GMT)
committerGábor Hojtsy2018-06-27 11:32:57 (GMT)
commit4e8c573d0ba21634745bbb3d9ae1d61c4d731960 (patch)
tree434f1e29bbbc38157cb92d59f9cad8e89e318dc1
parent191bf5284943c14ccbb65cc2521f416f2d93e5e6 (diff)
Issue #2854624 by lauriii, AaronChristian, vaplas, yogeshmpawar, tkoleary, ckrina, Gábor Hojtsy, chrisrockwell, andrewmacpherson: Details and accordion update based on Seven Style Guide
-rw-r--r--core/themes/seven/css/base/elements.css6
-rw-r--r--core/themes/seven/css/components/details.css27
-rw-r--r--core/themes/seven/css/components/entity-meta.css35
-rw-r--r--core/themes/seven/css/components/modules-page.css10
-rw-r--r--core/themes/seven/css/components/system-status-report.css3
-rw-r--r--core/themes/seven/css/components/views-ui.css4
-rw-r--r--core/themes/seven/seven.info.yml5
-rw-r--r--core/themes/seven/seven.libraries.yml1
-rw-r--r--core/themes/seven/templates/details.html.twig51
9 files changed, 119 insertions, 23 deletions
diff --git a/core/themes/seven/css/base/elements.css b/core/themes/seven/css/base/elements.css
index 9cc5ee8..a4f9d4b 100644
--- a/core/themes/seven/css/base/elements.css
+++ b/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 {
diff --git a/core/themes/seven/css/components/details.css b/core/themes/seven/css/components/details.css
new file mode 100644
index 0000000..7ba46ed
--- /dev/null
+++ b/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;
+}
+
diff --git a/core/themes/seven/css/components/entity-meta.css b/core/themes/seven/css/components/entity-meta.css
index f6999be..288cdaa 100644
--- a/core/themes/seven/css/components/entity-meta.css
+++ b/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;
}
diff --git a/core/themes/seven/css/components/modules-page.css b/core/themes/seven/css/components/modules-page.css
index bc9c1e5..3b3fe43 100644
--- a/core/themes/seven/css/components/modules-page.css
+++ b/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 {
diff --git a/core/themes/seven/css/components/system-status-report.css b/core/themes/seven/css/components/system-status-report.css
index 2f4b338..2378a8f 100644
--- a/core/themes/seven/css/components/system-status-report.css
+++ b/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,
diff --git a/core/themes/seven/css/components/views-ui.css b/core/themes/seven/css/components/views-ui.css
index a9face2..714819e 100644
--- a/core/themes/seven/css/components/views-ui.css
+++ b/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;
}
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 3f0e43c..52ff927 100644
--- a/core/themes/seven/seven.info.yml
+++ b/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
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 508c0fe..6ae1594 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/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: {}
diff --git a/core/themes/seven/templates/details.html.twig b/core/themes/seven/templates/details.html.twig
new file mode 100644
index 0000000..4a1004f
--- /dev/null
+++ b/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>