From 392e14c328234b43bf8ff4620a23e8cb8bc8ee4b Mon Sep 17 00:00:00 2001 From: Aaron Christian Date: Fri, 31 Mar 2017 14:12:54 -0700 Subject: [PATCH] Some spacing adjustments on checkboxes and radio labels. --- core/misc/icons/001826/check.svg | 1 + core/misc/icons/808080/check.svg | 1 + core/misc/tableselect.js | 2 +- core/modules/user/user.permissions.js | 5 +- core/themes/seven/css/components/form.css | 118 +++++- core/themes/seven/css/system/system.admin.css | 401 +++++++++++++++++++++ core/themes/seven/seven.info.yml | 4 + .../templates/form/form-element-label.html.twig | 31 ++ .../seven/templates/form/form-element.html.twig | 97 +++++ 9 files changed, 656 insertions(+), 4 deletions(-) create mode 100644 core/misc/icons/001826/check.svg create mode 100644 core/misc/icons/808080/check.svg create mode 100644 core/themes/seven/css/system/system.admin.css create mode 100644 core/themes/seven/templates/form/form-element-label.html.twig create mode 100644 core/themes/seven/templates/form/form-element.html.twig diff --git a/core/misc/icons/001826/check.svg b/core/misc/icons/001826/check.svg new file mode 100644 index 0000000..628b766 --- /dev/null +++ b/core/misc/icons/001826/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/core/misc/icons/808080/check.svg b/core/misc/icons/808080/check.svg new file mode 100644 index 0000000..1be4ea2 --- /dev/null +++ b/core/misc/icons/808080/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/core/misc/tableselect.js b/core/misc/tableselect.js index 243e000..1aa7a20 100644 --- a/core/misc/tableselect.js +++ b/core/misc/tableselect.js @@ -60,7 +60,7 @@ }; // Find all with class select-all, and insert the check all checkbox. - $table.find('th.select-all').prepend($('').attr('title', strings.selectAll)).on('click', function (event) { + $table.find('th.select-all').prepend($('').attr('title', strings.selectAll)).on('click', function (event) { if ($(event.target).is('input[type="checkbox"]')) { // Loop through all checkboxes and set their state to the select all // checkbox' state. diff --git a/core/modules/user/user.permissions.js b/core/modules/user/user.permissions.js index c3dc24f..25bb841 100644 --- a/core/modules/user/user.permissions.js +++ b/core/modules/user/user.permissions.js @@ -42,7 +42,7 @@ // submitted form. If we'd automatically check existing checkboxes, the // permission table would be polluted with redundant entries. This // is deliberate, but desirable when we automatically check them. - var $dummy = $('') + var $dummy = $('') .attr('title', Drupal.t('This permission is inherited from the authenticated user role.')) .hide(); @@ -82,6 +82,9 @@ $row.find('.js-dummy-checkbox').each(function () { this.style.display = (authCheckbox.checked ? '' : 'none'); }); + $row.find('.js-dummy-checkbox').next('label').each(function () { + this.style.display = (authCheckbox.checked ? '' : 'none'); + }); } }; diff --git a/core/themes/seven/css/components/form.css b/core/themes/seven/css/components/form.css index f3acc2c..bf3d1d1 100644 --- a/core/themes/seven/css/components/form.css +++ b/core/themes/seven/css/components/form.css @@ -49,6 +49,18 @@ fieldset:not(.fieldgroup) > legend { .form-item { margin: 0.75em 0; } + +/* checkboxes without a label */ +.form-type-checkbox.form-no-label { + text-align: center; +} +.form-type-checkbox.form-no-label label { + display: inline-block; + margin: 0 auto; +} +.form-type-checkbox.form-no-label label:before { + margin: 0; +} .form-type-checkbox { padding: 0; } @@ -147,15 +159,117 @@ ul.tips li { [dir="rtl"] ul.tips li { margin: 0.25em 1.5em 0.25em 0; } + +/* Checkboxes & Radio buttons */ +.form-checkbox, +.form-radio { + opacity: 0; + position: absolute; + display: inline-block; + vertical-align: middle; + cursor: pointer; +} + +/* make the trigger area a bit bigger for mobile tap */ +.form-checkbox { + margin-top: 3px; + width: 15px; + height: 15px; +} + +.form-type-radio label, +.form-type-checkbox label { + position: relative; +} + +.form-checkbox + label:before, +.form-radio + label:before { + content: ''; + border: 1px solid #9e9e9e; + display: inline-block; + vertical-align: middle; + width: 13px; + height: 13px; +} + +/* checked */ +.form-checkbox + label:before { + margin: -2px 7px 0 0; + border-radius: 3px; + background: #fffffe; + background: -webkit-linear-gradient(#fffffe, #e8e8e4); + background: -o-linear-gradient(#fffffe, #e8e8e4); + background: -moz-linear-gradient(#fffffe, #e8e8e4); + background: linear-gradient(#fffffe, #e8e8e4); +} + +.form-checkbox:checked + label:before { + content: ''; + background-image: url(../../../../../core/misc/icons/001826/check.svg); + background-color: #cdebfe; + background-position: left center; + background-repeat: no-repeat; + background-size: 100%; + border-color: #5b7d93; +} + +/* disabled */ +.form-checkbox[disabled] + label:before { + background: #ededed; + border-color: #bababa; + cursor: default; +} + +.form-checkbox[disabled]:checked + label:before { + background-image: url(../../../../../core/misc/icons/808080/check.svg); + background-position: left center; + background-repeat: no-repeat; + background-size: 100%; +} + +/* radios */ +.form-radio + label:before { + margin: -2px 7px 0 0; + width: 13px; + height: 13px; + text-align: center; + border-radius: 50%; + background: #ffffff; +} + +.form-radio:checked + label:before { + box-shadow: inset 0px 0px 0px 4px #cdebfe; + background: #001826; + border-color: #5b7d93; + -webkit-background-clip: padding-box; +} + +/* disabled */ +.form-radio[disabled] + label:before { + border-color: #bababa; + cursor: default; +} + +.form-radio[disabled]:checked + label:before { + box-shadow: inset 0px 0px 0px 4px #ededed; + background: #808080; +} + +.form-checkbox:focus + label:before, +.form-radio:focus + label:before { + border-color: #001826; +} + .form-type-radio .description, .form-type-checkbox .description { - margin-left: 1.5em; /* LTR */ + margin-left: 22px; /* LTR */ } [dir="rtl"] .form-type-radio .description, [dir="rtl"] .form-type-checkbox .description { margin-left: 0; - margin-right: 1.5em; + margin-right: 22px; } + .form-text, .form-textarea { border-radius: 2px; diff --git a/core/themes/seven/css/system/system.admin.css b/core/themes/seven/css/system/system.admin.css new file mode 100644 index 0000000..7ddbf71 --- /dev/null +++ b/core/themes/seven/css/system/system.admin.css @@ -0,0 +1,401 @@ +/** + * @file + * Styles for administration pages. + */ + +/** + * Reusable layout styles. + */ +.layout-container { + margin: 0 1.5em; +} +.layout-container:after { + content: ""; + display: table; + clear: both; +} + +@media screen and (min-width: 38em) { + .layout-container { + margin: 0 2.5em; + } + .layout-column { + float: left; /* LTR */ + box-sizing: border-box; + } + [dir="rtl"] .layout-column { + float: right; + } + .layout-column + .layout-column { + padding-left: 10px; /* LTR */ + } + [dir="rtl"] .layout-column + .layout-column { + padding-right: 10px; + padding-left: 0; + } + .layout-column--half { + width: 50%; + } + .layout-column--quarter { + width: 25%; + } + .layout-column--three-quarter { + width: 75%; + } +} + +/** + * Panel. + * Used to visually group items together. + */ +.panel { + padding: 5px 5px 15px; +} +.panel__description { + margin: 0 0 3px; + padding: 2px 0 3px 0; +} + +/** + * System compact link: to toggle the display of description text. + */ +.compact-link { + margin: 0 0 0.5em 0; +} + +/** + * Quick inline admin links. + */ +small .admin-link:before { + content: ' ['; +} +small .admin-link:after { + content: ']'; +} + +/** + * Modules page. + */ +.system-modules thead > tr { + border: 0; +} +.system-modules div.incompatible { + font-weight: bold; +} +.system-modules td.checkbox { + min-width: 25px; + width: 4%; +} +.system-modules td.module { + width: 25%; +} +.system-modules td { + vertical-align: top; +} +.system-modules label, +.system-modules-uninstall label { + color: #1d1d1d; + font-size: 1.15em; +} +.system-modules details { + color: #5c5c5b; + line-height: 20px; + overflow: hidden; /* truncates descriptions if too long */ + text-overflow: ellipsis; + white-space: nowrap; +} +.system-modules details[open] { + height: auto; + overflow: visible; + white-space: normal; +} +.system-modules details[open] summary .text { + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + text-transform: none; +} +.system-modules td details a { + color: #5C5C5B; + border: 0px; +} +.system-modules td details { + border: 0; + margin: 0; + height: 20px; +} +.system-modules td details summary { + padding: 0; + text-transform: none; + font-weight: normal; + cursor: default; +} +.system-modules td { + padding-left: 0; /* LTR */ +} +[dir="rtl"] .system-modules td { + padding-left: 12px; + padding-right: 0; +} + +@media screen and (max-width: 40em) { + .system-modules td.name { + width: 20%; + } + .system-modules td.description { + width: 40%; + } +} +.system-modules .requirements { + padding: 5px 0; + max-width: 490px; +} +.system-modules .links { + overflow: hidden; /* prevents collapse */ +} +.system-modules .checkbox { + margin: 0 5px; + padding-left: 12px; +} +[dir="rtl"] .system-modules .checkbox { + padding-left: 0; + padding-right: 12px; +} +.system-modules .checkbox .form-item { + margin-bottom: 0; +} +.admin-requirements, +.admin-required { + font-size: 0.9em; + color: #666; +} +.admin-enabled { + color: #080; +} +.admin-missing { + color: #f00; +} +.module-link { + display: block; + padding: 2px 20px; + white-space: nowrap; + margin-top: 2px; + float: left; /* LTR */ +} +[dir="rtl"] .module-link { + float: right; +} +.module-link-help { + background: url(../../images/core/icons/787878/questionmark-disc.svg) 0 50% no-repeat; /* LTR */ +} +[dir="rtl"] .module-link-help { + background-position: top 50% right 0; +} +.module-link-permissions { + background: url(../../images/core/icons/787878/key.svg) 0 50% no-repeat; /* LTR */ +} +[dir="rtl"] .module-link-permissions { + background-position: top 50% right 0; +} +.module-link-configure { + background: url(../../images/core/icons/787878/cog.svg) 0 50% no-repeat; /* LTR */ +} +[dir="rtl"] .module-link-configure { + background-position: top 50% right 0; +} + +/* Status report. */ +.system-status-report__status-title { + position: relative; + vertical-align: top; + width: 100%; + padding: 10px 6px 10px 40px; /* LTR */ + box-sizing: border-box; + font-weight: normal; + background-color: transparent; +} +[dir="rtl"] .system-status-report__status-title { + padding: 10px 40px 10px 6px; +} +.system-status-report__status-icon:before { + content: ""; + background-repeat: no-repeat; + height: 16px; + width: 16px; + display: block; + position: absolute; + left: 12px; /* LTR */ + top: 12px; +} +[dir="rtl"] .system-status-report__status-icon:before { + left: auto; + right: 12px; +} +.system-status-report__status-icon--error:before { + background-image: url(../../images/core/icons/e32700/error.svg); +} +.system-status-report__status-icon--warning:before { + background-image: url(../../images/core/icons/e29700/warning.svg); +} +.system-status-report__entry__value { + padding: 1em .5em; +} + +/** + * Appearance page. + */ +.theme-info__header { + margin-bottom: 0; + font-weight: normal; +} +.theme-default .theme-info__header { + font-weight: bold; +} +.theme-info__description { + margin-top: 0; +} +.system-themes-list { + margin-bottom: 20px; +} +.system-themes-list-uninstalled { + border-top: 1px solid #cdcdcd; + padding-top: 20px; +} +.system-themes-list__header { + margin: 0; +} + +.theme-selector { + padding-top: 20px; +} +.theme-selector .screenshot, +.theme-selector .no-screenshot { + border: 1px solid #e0e0d8; + padding: 2px; + vertical-align: bottom; + max-width: 100%; + height: auto; + text-align: center; +} +.theme-default .screenshot { + border: 1px solid #aaa; +} +.system-themes-list-uninstalled .screenshot, +.system-themes-list-uninstalled .no-screenshot { + max-width: 194px; + height: auto; +} + +/** + * Theme display without vertical toolbar. + */ +@media screen and (min-width: 45em) { + body:not(.toolbar-vertical) .system-themes-list-installed .screenshot, + body:not(.toolbar-vertical) .system-themes-list-installed .no-screenshot { + float: left; /* LTR */ + margin: 0 20px 0 0; /* LTR */ + width: 294px; + } + [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-installed .screenshot, + [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-installed .no-screenshot { + float: right; + margin: 0 0 0 20px; + } + body:not(.toolbar-vertical) .system-themes-list-installed .system-themes-list__header { + margin-top: 0; + } + body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-selector { + box-sizing: border-box; + width: 31.25%; + float: left; /* LTR */ + padding: 20px 20px 20px 0; /* LTR */ + } + [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-selector { + float: right; + padding: 20px 0 20px 20px; + } + body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-info { + min-height: 170px; + } +} + +/** + * Theme display with vertical toolbar. + */ +@media screen and (min-width: 60em) { + .toolbar-vertical .system-themes-list-installed .screenshot, + .toolbar-vertical .system-themes-list-installed .no-screenshot { + float: left; /* LTR */ + margin: 0 20px 0 0; /* LTR */ + width: 294px; + } + [dir="rtl"] .toolbar-vertical .system-themes-list-installed .screenshot, + [dir="rtl"] .toolbar-vertical .system-themes-list-installed .no-screenshot { + float: right; + margin: 0 0 0 20px; + } + .toolbar-vertical .system-themes-list-installed .theme-info__header { + margin-top: 0; + } + .toolbar-vertical .system-themes-list-uninstalled .theme-selector { + box-sizing: border-box; + width: 31.25%; + float: left; /* LTR */ + padding: 20px 20px 20px 0; /* LTR */ + } + [dir="rtl"] .toolbar-vertical .system-themes-list-uninstalled .theme-selector { + float: right; + padding: 20px 0 20px 20px; + } + .toolbar-vertical .system-themes-list-uninstalled .theme-info { + min-height: 170px; + } +} +.system-themes-list-installed .theme-info { + max-width: 940px; +} + +.theme-selector .incompatible { + margin-top: 10px; + font-weight: bold; +} +.theme-selector .operations { + margin: 10px 0 0 0; + padding: 0; +} +.theme-selector .operations li { + float: left; /* LTR */ + margin: 0; + padding: 0 0.7em; + list-style-type: none; + border-right: 1px solid #cdcdcd; /* LTR */ +} +[dir="rtl"] .theme-selector .operations li { + float: right; + border-left: 1px solid #cdcdcd; + border-right: none; +} +.theme-selector .operations li:last-child { + padding: 0 0 0 0.7em; /* LTR */ + border-right: none; /* LTR */ +} +[dir="rtl"] .theme-selector .operations li:last-child { + padding: 0 0.7em 0 0; + border-left: none; +} +.theme-selector .operations li:first-child { + padding: 0 0.7em 0 0; /* LTR */ +} +[dir="rtl"] .theme-selector .operations li:first-child { + padding: 0 0 0 0.7em; +} +.system-themes-admin-form { + clear: left; /* LTR */ +} +[dir="rtl"] .system-themes-admin-form { + clear: right; +} +.cron-description__run-cron { + display: block; +} diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml index 6bf831a..a5c5ac0 100644 --- a/core/themes/seven/seven.info.yml +++ b/core/themes/seven/seven.info.yml @@ -28,6 +28,10 @@ libraries-override: /core/themes/stable/css/system/components/system-status-counter.css: css/components/system-status-counter.css /core/themes/stable/css/system/components/system-status-report-counters.css: css/components/system-status-report-counters.css /core/themes/stable/css/system/components/system-status-report-general-info.css: css/components/system-status-report-general-info.css + system/admin: + css: + theme: + /core/themes/stable/css/system/system.admin.css: css/system/system.admin.css core/drupal.vertical-tabs: css: component: diff --git a/core/themes/seven/templates/form/form-element-label.html.twig b/core/themes/seven/templates/form/form-element-label.html.twig new file mode 100644 index 0000000..22790a5 --- /dev/null +++ b/core/themes/seven/templates/form/form-element-label.html.twig @@ -0,0 +1,31 @@ +{# +/** + * @file + * Theme override for a form element label. + * + * Available variables: + * - title: The label's text. + * - title_display: Elements title_display setting. + * - required: An indicator for whether the associated form element is required. + * - attributes: A list of HTML attributes for the label. + * + * @see template_preprocess_form_element_label() + */ +#} +{% + set classes = [ + title_display == 'after' ? 'option', + title_display == 'invisible' ? 'visually-hidden', + required ? 'js-form-required', + required ? 'form-required', + ] +%} +{% if title is not empty or required -%} + {% if title_display in ['invisible'] %} + {{ title }} + {% else %} + {{ title }} + {% endif %} +{% else %} + +{%- endif %} diff --git a/core/themes/seven/templates/form/form-element.html.twig b/core/themes/seven/templates/form/form-element.html.twig new file mode 100644 index 0000000..328e93d --- /dev/null +++ b/core/themes/seven/templates/form/form-element.html.twig @@ -0,0 +1,97 @@ +{# +/** + * @file + * Theme override for a form element. + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - errors: (optional) Any errors for this form element, may not be set. + * - prefix: (optional) The form element prefix, may not be set. + * - suffix: (optional) The form element suffix, may not be set. + * - required: The required marker, or empty if the associated form element is + * not required. + * - type: The type of the element. + * - name: The name of the element. + * - label: A rendered label element. + * - label_display: Label display setting. It can have these values: + * - before: The label is output before the element. This is the default. + * The label includes the #title and the required marker, if #required. + * - after: The label is output after the element. For example, this is used + * for radio and checkbox #type elements. If the #title is empty but the + * field is #required, the label will contain only the required marker. + * - invisible: Labels are critical for screen readers to enable them to + * properly navigate through forms but can be visually distracting. This + * property hides the label for everyone except screen readers. + * - attribute: Set the title attribute on the element to create a tooltip but + * output no label element. This is supported only for checkboxes and radios + * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement(). + * It is used where a visual label is not needed, such as a table of + * checkboxes where the row and column provide the context. The tooltip will + * include the title and required marker. + * - description: (optional) A list of description properties containing: + * - content: A description of the form element, may not be set. + * - attributes: (optional) A list of HTML attributes to apply to the + * description content wrapper. Will only be set when description is set. + * - description_display: Description display setting. It can have these values: + * - before: The description is output before the element. + * - after: The description is output after the element. This is the default + * value. + * - invisible: The description is output after the element, hidden visually + * but available to screen readers. + * - disabled: True if the element is disabled. + * - title_display: Title display setting. + * + * @see template_preprocess_form_element() + */ +#} +{% + set classes = [ + 'js-form-item', + 'form-item', + 'js-form-type-' ~ type|clean_class, + 'form-type-' ~ type|clean_class, + 'js-form-item-' ~ name|clean_class, + 'form-item-' ~ name|clean_class, + title_display not in ['after', 'before'] ? 'form-no-label', + disabled == 'disabled' ? 'form-disabled', + errors ? 'form-item--error', + ] +%} +{% + set description_classes = [ + 'description', + description_display == 'invisible' ? 'visually-hidden', + ] +%} + + {% if type != 'checkbox' %} + {% if label_display in ['before', 'invisible'] %} + {{ label }} + {% endif %} + {% endif %} + {% if prefix is not empty %} + {{ prefix }} + {% endif %} + {% if description_display == 'before' and description.content %} + + {{ description.content }} + + {% endif %} + {{ children }} + {% if suffix is not empty %} + {{ suffix }} + {% endif %} + {% if label_display == 'after' or type == 'checkbox' or title_display not in ['after', 'before'] %} + {{ label }} + {% endif %} + {% if errors %} +
+ {{ errors }} +
+ {% endif %} + {% if description_display in ['after', 'invisible'] and description.content %} + + {{ description.content }} + + {% endif %} + -- 2.7.4.windows.1