From 234d32e9a6bc0d07bce9edb58566a5609801c8e9 Mon Sep 17 00:00:00 2001 From: Aaron Christian Date: Fri, 11 Aug 2017 16:04:22 -0700 Subject: [PATCH] Started working on the status messages. --- css/components/form.css | 290 +++++++++++++++++++++++++++++++ css/components/messages.css | 76 ++++++++ css/components/tables.css | 152 ++++++++++++++++ templates/misc/status-messages.html.twig | 66 +++++++ 4 files changed, 584 insertions(+) create mode 100644 css/components/form.css create mode 100644 css/components/messages.css create mode 100644 css/components/tables.css create mode 100644 templates/misc/status-messages.html.twig diff --git a/css/components/form.css b/css/components/form.css new file mode 100644 index 0000000..ba6a797 --- /dev/null +++ b/css/components/form.css @@ -0,0 +1,290 @@ +/** + * Form elements. + */ +form { + margin: 0; + padding: 0; +} +fieldset:not(.fieldgroup) { + background-color: #fcfcfa; + border-radius: 2px; + margin: 1em 0; + padding: 30px 18px 18px; + min-width: 0; + position: relative; +} +/** + * We've temporarily added this Firefox specific rule here to fix fieldset + * widths. + * @todo remove once this Mozilla bug is fixed. + * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622 + */ +@-moz-document url-prefix() { + fieldset:not(.fieldgroup) { + display: table-cell; + } +} +fieldset:not(.fieldgroup) > legend { + font-size: 1em; + font-weight: bold; + letter-spacing: 0.08em; + position: absolute; + text-transform: uppercase; + top: 10px; +} +.fieldgroup { + min-width: 0; +} +/** + * We've temporarily added this Firefox specific rule here to fix fieldset + * widths. + * @todo remove once this Mozilla bug is fixed. + * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622 + */ +@-moz-document url-prefix() { + .fieldgroup { + display: table-cell; + } +} +.form-item { + margin: 0.75em 0; +} +.form-type-checkbox { + padding: 0; +} +label { + display: table; + margin: 0 0 0.1em; + padding: 0; + font-weight: bold; +} +label.error { + color: #a51b00; +} +label[for] { + cursor: pointer; +} +.form-item label.option { + text-transform: none; +} +.form-item label.option input { + vertical-align: middle; +} +.form-disabled label { + color: #737373; +} +.form-disabled input.form-text, +.form-disabled input.form-tel, +.form-disabled input.form-email, +.form-disabled input.form-url, +.form-disabled input.form-search, +.form-disabled input.form-number, +.form-disabled input.form-color, +.form-disabled input.form-file { + border-color: #d4d4d4; + background-color: hsla(0, 0%, 0%, .08); + box-shadow: none; +} +.form-item input.error, +.form-item textarea.error, +.form-item select.error { + border-width: 1px; + border-color: #e62600; + background-color: hsla(15, 75%, 97%, 1); + box-shadow: inset 0 5px 5px -5px #b8b8b8; + color: #a51b00; +} +.form-item textarea.error + .cke { + border-width: 1px; + border-color: #e62600; +} +.form-item input.error:focus, +.form-item textarea.error:focus, +.form-item select.error:focus { + border-color: #e62600; + outline: 0; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px 1px #e62600; + background-color: #fcf4f2; +} +.form-required:after { + background-size: 7px 7px; + width: 7px; + height: 7px; +} +.form-item--error-message { + margin-top: 0.15em; + color: #e32700; +} +.fieldset-wrapper > .form-item--error-message { + margin-top: 0; +} +.text-format-wrapper .form-item--error-message { + border: solid #ccc; + border-width: 0 1px; + margin: 0; + padding: 0.25em 0.666em 0; +} + + +/* Filter */ +ul.tips, +div.description, +.form-item .description { + margin: 0.2em 0 0 0; + color: #595959; + font-size: 0.95em; +} +.form-item .description.error { + margin-top: 0; + color: #a51b00; +} + +ul.tips li { + margin: 0.25em 0 0.25em 1.5em; /* LTR */ +} +[dir="rtl"] ul.tips li { + margin: 0.25em 1.5em 0.25em 0; +} +.form-type-radio .description, +.form-type-checkbox .description { + margin-left: 1.5em; /* LTR */ +} +[dir="rtl"] .form-type-radio .description, +[dir="rtl"] .form-type-checkbox .description { + margin-left: 0; + margin-right: 1.5em; +} +.form-text { + border-radius: 2px; + font-size: 1em; + line-height: normal; +} + +input.form-autocomplete, +input.form-text, +input.form-tel, +input.form-email, +input.form-url, +input.form-search, +input.form-number, +input.form-color, +input.form-file, +input.form-date, +input.form-time { + box-sizing: border-box; + padding: .3em .4em .3em .5em; /* LTR */ + max-width: 100%; + border: 1px solid #b8b8b8; + border-top-color: #999; + background: #fff; + color: #333; + border-radius: 2px; + background: #fcfcfa; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125); + font-size: 1em; + color: #595959; + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; +} + +.form-text:focus, +.form-tel:focus, +.form-email:focus, +.form-url:focus, +.form-search:focus, +.form-number:focus, +.form-color:focus, +.form-file:focus, +.form-date:focus, +.form-time:focus { + border-color: #40b6ff; + outline: 0; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px #40b6ff; + background-color: #fff; +} + +.confirm-parent, +.password-parent { + overflow: visible; + width: auto; +} + +.form-item-options-group-info-identifier, +.form-item-pass .description { + clear: both; +} + +/** + * Improve spacing of cancel link. + */ +#edit-cancel { + margin-left: 10px; /* LTR */ +} +[dir="rtl"] #edit-cancel { + margin-left: 0; + margin-right: 10px; +} + +/** + * Improve form element usability on narrow devices. + */ +@media screen and (max-width: 600px) { + input.form-autocomplete, + input.form-text, + input.form-tel, + input.form-email, + input.form-url, + input.form-search, + input.form-number, + input.form-color, + input.form-file { + width: 100%; + font-size: 1.2em; + line-height: 1.2em; + } + input.form-number { + width: auto; + } + .form-actions input, + .form-wrapper input[type="submit"] { + float: none; + margin-left: 0; + margin-right: 0; + margin-top: 10px; + padding-bottom: 6px; + width: 100%; + } + .form-actions input:first-child, + .form-wrapper input[type="submit"]:first-child { + margin-top: 0; + } + details summary { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + box-sizing: border-box; + } + .password-strength { + width: 100%; + } + div.form-item div.password-suggestions { + float: none; + } + #dblog-filter-form .form-actions { + float: none; + padding: 0; + } + #edit-cancel { + display: block; + margin: 10px 0 0 0; + } + select { + width: 100%; + } +} + +/* Exceptions */ +#diff-inline-form select, +div.filter-options select { + padding: 0; +} diff --git a/css/components/messages.css b/css/components/messages.css new file mode 100644 index 0000000..f94e3e4 --- /dev/null +++ b/css/components/messages.css @@ -0,0 +1,76 @@ +/** + * @file + * Styles for system messages. + */ + +.mdc-layout-grid--fixed-icon-column-width { + max-width: var(--mdc-layout-grid--fixed-icon-column-width, 50px); +} + +.messages { + background: no-repeat 10px 17px; /* LTR */ + border: 1px solid; + border-width: 1px 1px 1px 0; /* LTR */ + border-radius: 2px; + padding: 15px 20px 15px 35px; /* LTR */ + word-wrap: break-word; + overflow-wrap: break-word; +} +[dir="rtl"] .messages { + border-width: 1px 0 1px 1px; + background-position: right 10px top 17px; + padding-left: 20px; + padding-right: 35px; + text-align: right; +} +.messages + .messages { + margin-top: 1.538em; +} +.messages__list { + list-style: none; + padding: 0; + margin: 0; +} +.messages__item + .messages__item { + margin-top: 0.769em; +} +/* See .color-success in Seven's colors.css */ +.messages--status { + color: #325e1c; + background-color: #f3faef; + border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ + background-image: url(../../../../misc/icons/73b355/check.svg); + box-shadow: -8px 0 0 #77b259; /* LTR */ +} +[dir="rtl"] .messages--status { + border-color: #c9e1bd transparent #c9e1bd #c9e1bd; + box-shadow: 8px 0 0 #77b259; + margin-left: 0; +} +/* See .color-warning in Seven's colors.css */ +.messages--warning { + background-color: #fdf8ed; + background-image: url(../../../../misc/icons/e29700/warning.svg); + border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ + color: #734c00; + box-shadow: -8px 0 0 #e09600; /* LTR */ +} +[dir="rtl"] .messages--warning { + border-color: #f4daa6 transparent #f4daa6 #f4daa6; + box-shadow: 8px 0 0 #e09600; +} +/* See .color-error in Seven's colors.css */ +.messages--error { + background-color: #fcf4f2; + color: #a51b00; + background-image: url(../../../../misc/icons/e32700/error.svg); + border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ + box-shadow: -8px 0 0 #e62600; /* LTR */ +} +[dir="rtl"] .messages--error { + border-color: #f9c9bf transparent #f9c9bf #f9c9bf; + box-shadow: 8px 0 0 #e62600; +} +.messages--error p.error { + color: #a51b00; +} diff --git a/css/components/tables.css b/css/components/tables.css new file mode 100644 index 0000000..4366ce8 --- /dev/null +++ b/css/components/tables.css @@ -0,0 +1,152 @@ +/** + * @file + * Seven styles for Tables. + */ + +table { + width: 100%; + margin: 24px 0; +} +caption { + text-align: left; /* LTR */ +} +[dir="rtl"] caption { + text-align: right; +} +th { + text-align: left; /* LTR */ + padding: 10px 12px; +} +[dir="rtl"] th { + text-align: right; +} +thead th { + background: #f5f5f2; + border: solid #bfbfba; + border-width: 1px 0; + color: #333; + text-transform: uppercase; +} + +thead th .material-icons { + font-size: 18px; +} + +tr { + border-bottom: 1px solid #e6e4df; + padding: 0.1em 0.6em; +} +thead > tr { + border-bottom: 1px solid #000; +} +tbody tr:hover, +tbody tr:focus { + background: #f7fcff; +} +/* See colors.css */ +tbody tr.color-warning:hover, +tbody tr.color-warning:focus { + background: #fdf8ed; +} +tbody tr.color-error:hover, +tbody tr.color-error:focus { + background: #fcf4f2; +} + +td, +th { + vertical-align: middle; +} +td { + padding: 10px 12px; + text-align: left; /* LTR */ +} +[dir="rtl"] td { + text-align: right; +} +th > a { + position: relative; + display: block; +} + +/* 1. Must match negative bottom padding of the parent */ +th > a:after { + content: ''; + display: block; + position: absolute; + top: 0; + bottom: -10px; /* 1. */ + left: 0; + right: 0; + border-bottom: 2px solid transparent; + -webkit-transition: all 0.1s; + transition: all 0.1s; +} +th.is-active > a { + color: #004875; +} +th.is-active img { + position: absolute; + right: 0; /* LTR */ + top: 50%; +} +[dir="rtl"] th.is-active img { + right: auto; + left: 0; +} +th.is-active > a:after { + border-bottom-color: #004875; +} +th > a:hover, +th > a:focus, +th.is-active > a:hover, +th.is-active > a:focus { + color: #008ee6; + text-decoration: none; +} +th > a:hover:after, +th > a:focus:after, +th.is-active > a:hover:after, +th.is-active > a:focus:after { + border-bottom-color: #008ee6; +} +td .item-list ul { + margin: 0; +} +/* This is required to win over specificity of [dir="rtl"] .item-list ul */ +[dir="rtl"] td .item-list ul { + margin: 0; +} +td.is-active { + background: none; +} + +/* Force browsers to calculate the width of a 'select all' element. */ +th.select-all { + width: 1px; +} + +/** + * Captions. + */ +.caption { + margin-bottom: 1.2em; +} + +/** + * Responsive tables. + */ +@media screen and (max-width: 37.5em) { /* 600px */ + th.priority-low, + td.priority-low, + th.priority-medium, + td.priority-medium { + display: none; + } +} +@media screen and (max-width: 60em) { /* 920px */ + th.priority-low, + td.priority-low { + display: none; + } +} diff --git a/templates/misc/status-messages.html.twig b/templates/misc/status-messages.html.twig new file mode 100644 index 0000000..c2d48cc --- /dev/null +++ b/templates/misc/status-messages.html.twig @@ -0,0 +1,66 @@ +{# +/** + * @file + * Theme override for status messages. + * + * Displays status, error, and warning messages, grouped by type. + * + * An invisible heading identifies the messages for assistive technology. + * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html + * for info. + * + * Add an ARIA label to the contentinfo area so that assistive technology + * user agents will better describe this landmark. + * + * Available variables: + * - message_list: List of messages to be displayed, grouped by type. + * - status_headings: List of all status types. + * - display: (optional) May have a value of 'status' or 'error' when only + * displaying messages of that specific type. + * - attributes: HTML attributes for the element, including: + * - class: HTML classes. + */ +#} +{{ attach_library('classy/messages') }} +{% block messages %} +{% for type, messages in message_list %} + {% + set classes = [ + 'messages', + 'messages--' ~ type, + ] + %} +
+
+
Icon
+
Text
+
+
+ + + + {{ kint(type) }} +
+ {% if type == 'error' %} +
+ {% endif %} + {% if status_headings[type] %} + + {% endif %} + {% if messages|length > 1 %} +
    + {% for message in messages %} +
  • {{ message }}
    • + {% endfor %} +
+ {% else %} + {{ messages|first }} + {% endif %} + {% if type == 'error' %} +
+ {% endif %} +
+ {# Remove type specific classes. #} + {% set attributes = attributes.removeClass(classes) %} +{% endfor %} +{% endblock messages %} -- 2.8.1 From 66a3b96679476a20bcb2f7276ce604dea8d54493 Mon Sep 17 00:00:00 2001 From: Aaron Christian Date: Fri, 11 Aug 2017 23:01:28 -0700 Subject: [PATCH] Finished up status message styling & overrides. --- css/base.css | 22 -------- css/colors.css | 4 ++ css/components/messages.css | 89 +++++++++++++++----------------- mdc.info.yml | 28 +++++++--- templates/misc/status-messages.html.twig | 56 +++++++++++--------- 5 files changed, 98 insertions(+), 101 deletions(-) diff --git a/css/base.css b/css/base.css index 0786340..768a76a 100644 --- a/css/base.css +++ b/css/base.css @@ -524,28 +524,6 @@ nav.is-horizontal.is-collapsible.position-container.is-horizontal-enabled ul.tab opacity: 1; } -.messages { - margin: 1rem 0 1rem 0; - border-width: 1px 0px 1px 0; - border-radius: 0; - background-color: transparent; - box-shadow: none; - background-size: 1.3rem; - background-position: 5px 50%; -} - -.messages--error { - border-color: #E32700; -} - -.messages--warning { - border-color: #E29700; -} - -.messages--status { - border-color: #73B355; -} - .cke_top, .cke_bottom { background: #F7F7F7; diff --git a/css/colors.css b/css/colors.css index 9f58606..e04d8c0 100644 --- a/css/colors.css +++ b/css/colors.css @@ -11,6 +11,10 @@ /* Sets the background color to the theme background color. */ /*--mdc-theme--background: #f2f2f2;*/ + + --mdc-theme--red: #EA4346; + --mdc-theme--green: #45B269; + --mdc-theme--yellow: #FDA738; } /*body {*/ diff --git a/css/components/messages.css b/css/components/messages.css index f94e3e4..b9de175 100644 --- a/css/components/messages.css +++ b/css/components/messages.css @@ -2,25 +2,35 @@ * @file * Styles for system messages. */ - -.mdc-layout-grid--fixed-icon-column-width { - max-width: var(--mdc-layout-grid--fixed-icon-column-width, 50px); -} - .messages { - background: no-repeat 10px 17px; /* LTR */ - border: 1px solid; - border-width: 1px 1px 1px 0; /* LTR */ - border-radius: 2px; - padding: 15px 20px 15px 35px; /* LTR */ + color: #fff; + margin: 15px 0 15px 0; + padding: 20px; /* LTR */ word-wrap: break-word; overflow-wrap: break-word; + font-size: 1.25em; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: flex-start; + justify-content: flex-start; +} + +.mdc-messages__icon, +.mdc-messages__content { + display: -webkit-flex; + display: flex; +} + +.mdc-messages__icon { + padding: 0 15px 0 0; } + +/* message tweaks */ [dir="rtl"] .messages { - border-width: 1px 0 1px 1px; - background-position: right 10px top 17px; - padding-left: 20px; - padding-right: 35px; text-align: right; } .messages + .messages { @@ -34,43 +44,28 @@ .messages__item + .messages__item { margin-top: 0.769em; } -/* See .color-success in Seven's colors.css */ + +/* success */ .messages--status { - color: #325e1c; - background-color: #f3faef; - border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ - background-image: url(../../../../misc/icons/73b355/check.svg); - box-shadow: -8px 0 0 #77b259; /* LTR */ -} -[dir="rtl"] .messages--status { - border-color: #c9e1bd transparent #c9e1bd #c9e1bd; - box-shadow: 8px 0 0 #77b259; - margin-left: 0; + background-color: var(--mdc-theme--green, #45B269); } -/* See .color-warning in Seven's colors.css */ + +/* warning */ .messages--warning { - background-color: #fdf8ed; - background-image: url(../../../../misc/icons/e29700/warning.svg); - border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ - color: #734c00; - box-shadow: -8px 0 0 #e09600; /* LTR */ -} -[dir="rtl"] .messages--warning { - border-color: #f4daa6 transparent #f4daa6 #f4daa6; - box-shadow: 8px 0 0 #e09600; + background-color: var(--mdc-theme--yellow, #FDA738); } -/* See .color-error in Seven's colors.css */ + +/* error */ .messages--error { - background-color: #fcf4f2; - color: #a51b00; - background-image: url(../../../../misc/icons/e32700/error.svg); - border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ - box-shadow: -8px 0 0 #e62600; /* LTR */ -} -[dir="rtl"] .messages--error { - border-color: #f9c9bf transparent #f9c9bf #f9c9bf; - box-shadow: 8px 0 0 #e62600; + background-color: var(--mdc-theme--red, #EA4346); } -.messages--error p.error { - color: #a51b00; + +/* link fix to stop inheriting the mdc primary colour */ +.messages a { + color: white; + text-decoration: underline; } +.messages a:hover { + color: white; + text-decoration: none; +} \ No newline at end of file diff --git a/mdc.info.yml b/mdc.info.yml index 6950541..e1f3710 100644 --- a/mdc.info.yml +++ b/mdc.info.yml @@ -9,27 +9,41 @@ libraries: - mdc/material-theme libraries-override: + # core core/drupal.tableselect: js: misc/tableselect.js: js/tableselect.js - seven/global-styling: - css: - component: - css/components/tables.css: css/tables.css - css/components/form.css: css/form.css - # @todo: style dropbutton component - css/components/dropbutton.component.css: false + + # color color/drupal.color: js: color.js: color/color.js color/drupal.color.preview: js: preview.js: false + + # stable stable/color/admin: css: theme: css/color.admin.css: false + # classy + classy/messages: + css: + component: + css/components/messages.css: false + + # seven + seven/global-styling: + css: + component: + css/components/tables.css: css/components/tables.css + css/components/form.css: css/components/form.css + css/components/messages.css: css/components/messages.css + # @todo: style dropbutton component + css/components/dropbutton.component.css: false + regions: header: 'Header' pre_content: 'Pre-content' diff --git a/templates/misc/status-messages.html.twig b/templates/misc/status-messages.html.twig index c2d48cc..ba019fa 100644 --- a/templates/misc/status-messages.html.twig +++ b/templates/misc/status-messages.html.twig @@ -30,36 +30,42 @@ 'messages--' ~ type, ] %} -
-
-
Icon
-
Text
-
-
- + {# setup the proper icons #} + {% if type == 'status' %} + {% set icon = 'check_circle' %} + {% elseif type == 'error' %} + {% set icon = 'cancel' %} + {% else %} + {% set icon = 'error' %} + {% endif %} - {{ kint(type) }} -
- {% if type == 'error' %} -
- {% endif %} - {% if status_headings[type] %} - + +
+ {{ icon }} +
+ - {% endif %} +
+ {# Remove type specific classes. #} {% set attributes = attributes.removeClass(classes) %} {% endfor %} -- 2.8.1