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 {
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 {
......
/**
* @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 @@
* 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;
}
......@@ -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 {
......
......@@ -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,
......
......@@ -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;
}
......
......@@ -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
......
......@@ -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: {}
......
{#
/**
* @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