Commit 4e8c573d authored by Gábor Hojtsy's avatar Gábor Hojtsy

Issue #2854624 by lauriii, AaronChristian, vaplas, yogeshmpawar, tkoleary,...

Issue #2854624 by lauriii, AaronChristian, vaplas, yogeshmpawar, tkoleary, ckrina, Gábor Hojtsy, chrisrockwell, andrewmacpherson: Details and accordion update based on Seven Style Guide
parent 191bf528
...@@ -158,14 +158,10 @@ details { ...@@ -158,14 +158,10 @@ details {
line-height: 1.295em; line-height: 1.295em;
} }
details summary { details summary {
padding-top: 0.5em; padding: 0.95em 1.45em;
padding-bottom: 0.5em;
} }
details summary:focus { details summary:focus {
outline: none; outline: none;
}
details summary:focus,
details summary:hover {
text-decoration: underline; text-decoration: underline;
} }
img { img {
......
/**
* @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;
}
...@@ -2,19 +2,21 @@ ...@@ -2,19 +2,21 @@
* Entity meta settings. * Entity meta settings.
*/ */
.entity-meta { .entity-meta {
background-color: #ececec; background-color: #edede8;
border-left: 1px solid #bfbfbf; border-left: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf; border-right: 1px solid #bfbfbf;
border-radius: 3px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
} }
.entity-meta__header, .entity-meta__header,
.entity-meta details { .entity-meta .seven-details {
background-color: #f7f7f7; background-color: #fcfcfa;
border-top: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
} }
.entity-meta__header { .entity-meta__header {
padding: 1em 1.5em; padding: 1em 1.5em;
border-radius: 3px 3px 0 0;
} }
.entity-meta__title { .entity-meta__title {
font-size: 1.231em; font-size: 1.231em;
...@@ -28,34 +30,43 @@ ...@@ -28,34 +30,43 @@
.entity-meta__last-saved { .entity-meta__last-saved {
font-style: italic; /* As-designed, but really: why is this italic? */ font-style: italic; /* As-designed, but really: why is this italic? */
} }
.entity-meta details { .entity-meta .seven-details {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-top: 1px solid #fff; border-top: 1px solid #fff;
margin: 0; margin: 0;
border-radius: 0;
} }
.entity-meta details:first-child { .entity-meta .seven-details:last-child {
border-top-color: #bfbfbf; border-radius: 0 0 3px 3px;
} }
.entity-meta details[open] { .entity-meta .seven-details[open] {
background-color: transparent; background-color: transparent;
background-image: -webkit-linear-gradient(top, rgba(0, 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); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.125), transparent 4px);
border-top-width: 0; border-top-width: 0;
padding-top: 1px; padding-top: 1px;
} }
.entity-meta details[open] + details[open] { .entity-meta .seven-details[open] + .seven-details[open] {
background-image: none; background-image: none;
border-top-width: 1px; border-top-width: 1px;
padding-top: 0; padding-top: 0;
} }
.entity-meta details > .details-wrapper { .entity-meta .seven-details > .seven-details__wrapper {
padding-top: 0; padding-top: 0;
} }
.entity-meta details > summary { .entity-meta .seven-details > summary {
padding: 0.85em 1.25em; padding: 0.85em 1.25em;
text-shadow: 0 1px 0 white; 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;
} }
...@@ -3,18 +3,20 @@ ...@@ -3,18 +3,20 @@
border: 0; border: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
.system-modules details { .system-modules .seven-details {
background: none;
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.system-modules summary { .system-modules .seven-details__summary {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
padding: 0.95em 0.5em;
} }
.system-modules [open] summary { .system-modules [open] .seven-details__summary {
border-bottom: none; border-bottom: none;
} }
.system-modules .details-wrapper { .system-modules .seven-details__wrapper {
padding: 0 0 0.5em 0; padding: 0 0 0.5em 0;
} }
.system-modules .fieldset-wrapper { .system-modules .fieldset-wrapper {
......
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
margin: 0; margin: 0;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
background-color: transparent;
border-radius: 0;
} }
.system-status-report__entry:last-of-type { .system-status-report__entry:last-of-type {
border-bottom: 1px solid #bebfb9; border-bottom: 1px solid #bebfb9;
...@@ -64,6 +66,7 @@ ...@@ -64,6 +66,7 @@
.system-status-report details[open] > *, .system-status-report details[open] > *,
.system-status-report details > summary:first-child { .system-status-report details > summary:first-child {
display: block; display: block;
color: inherit;
} }
.system-status-report__status-title .details-title:before, .system-status-report__status-title .details-title:before,
......
...@@ -21,12 +21,12 @@ details.fieldset-no-legend { ...@@ -21,12 +21,12 @@ details.fieldset-no-legend {
* a layout problem occurs for the Display format details if we don't fix its * 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. * 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-left: 0;
padding-right: 0; padding-right: 0;
} }
.views-display-tab details.box-padding .details-wrapper { .views-display-tab details.box-padding .seven-details__wrapper {
padding: 0; padding: 0;
} }
......
...@@ -42,6 +42,11 @@ libraries-override: ...@@ -42,6 +42,11 @@ libraries-override:
assets/vendor/jquery.ui/themes/base/dialog.css: false assets/vendor/jquery.ui/themes/base/dialog.css: false
classy/dialog: classy/dialog:
seven/seven.drupal.dialog seven/seven.drupal.dialog
classy/base:
css:
component:
css/components/details.css: false
libraries-extend: libraries-extend:
core/ckeditor: core/ckeditor:
- seven/ckeditor-dialog - seven/ckeditor-dialog
......
...@@ -12,6 +12,7 @@ global-styling: ...@@ -12,6 +12,7 @@ global-styling:
css/components/container-inline.module.css: {} css/components/container-inline.module.css: {}
css/components/breadcrumb.css: {} css/components/breadcrumb.css: {}
css/components/buttons.css: {} css/components/buttons.css: {}
css/components/details.css: {}
css/components/messages.css: {} css/components/messages.css: {}
css/components/dropbutton.component.css: {} css/components/dropbutton.component.css: {}
css/components/entity-meta.css: {} css/components/entity-meta.css: {}
......
{#
/**
* @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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment