summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-01-23 12:28:58 (GMT)
committerAlex Pott2015-01-23 12:28:58 (GMT)
commit6c991e8f7a9fc466b70cc3e75907875d730b0817 (patch)
tree80172201d6473a293107b50580daff7674ffa1a7
parentc0b45ec13932b08986591eceaaa5ad1a49be7df2 (diff)
Issue #2336141 by lauriii, LewisNyman, rteijeiro, balagan, emma.maria, stefika: Create reusable color classes
-rw-r--r--core/modules/system/css/system.admin.css4
-rw-r--r--core/modules/system/css/system.theme.css34
-rw-r--r--core/modules/system/templates/status-report.html.twig32
-rw-r--r--core/themes/seven/css/components/colors.css16
-rw-r--r--core/themes/seven/css/components/tables.css10
-rw-r--r--core/themes/seven/seven.libraries.yml1
6 files changed, 56 insertions, 41 deletions
diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css
index add899d..f4445e2 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -211,10 +211,10 @@ small .admin-link:after {
width: 16px;
margin-top: 2px;
}
-.system-status-report .error .status-icon div {
+.system-status-report .status-icon--error div {
background-image: url(../../../misc/icons/ea2800/error.svg);
}
-.system-status-report .warning .status-icon div {
+.system-status-report .status-icon--warning div {
background-image: url(../../../misc/icons/e29700/warning.svg);
}
.system-status-report .status-title {
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 9e54c61..c35796a 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -529,8 +529,10 @@ ul.tabs {
margin-top: 0.769em;
}
-/* @TODO Separate tables and messages styling */
+/* 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 */
@@ -540,33 +542,24 @@ ul.tabs {
box-shadow: 8px 0 0 #77b259;
margin-left: 0;
}
-.messages--status {
- color: #325e1c;
-}
-.messages--status {
- background-color: #f3faef;
-}
+/* 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;
}
-.messages--warning,
-.warning {
- color: #734c00;
-}
-.messages--warning,
-table tr.warning,
-table tr.warning:hover {
- background-color: #fdf8ed;
-}
+/* See .color-error in Seven's colors.css */
.messages--error {
+ background-color: #fcf4f2;
+ color: #a51b00;
background-image: url(../../../misc/icons/ea2800/error.svg);
border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */
box-shadow: -8px 0 0 #e62600; /* LTR */
@@ -575,15 +568,6 @@ table tr.warning:hover {
border-color: #f9c9bf transparent #f9c9bf #f9c9bf;
box-shadow: 8px 0 0 #e62600;
}
-.messages--error,
-.error {
- color: #a51b00;
-}
-.messages--error,
-table tr.error,
-table tr.error:hover {
- background-color: #fcf4f2;
-}
.messages--error p.error {
color: #a51b00;
}
diff --git a/core/modules/system/templates/status-report.html.twig b/core/modules/system/templates/status-report.html.twig
index 89f12d4..10622d1 100644
--- a/core/modules/system/templates/status-report.html.twig
+++ b/core/modules/system/templates/status-report.html.twig
@@ -25,20 +25,24 @@
</thead>
<tbody>
{% for requirement in requirements %}
- <tr class="{{ requirement.severity_status }}">
- <td class="status-icon">
- <div title="{{ requirement.severity_title }}">
- <span class="visually-hidden">{{ requirement.severity_title }}</span>
- </div>
- </td>
- <td class="status-title">{{ requirement.title }}</td>
- <td class="status-value">
- {{ requirement.value }}
- {% if requirement.description %}
- <div class="description">{{ requirement.description }}</div>
- {% endif %}
- </td>
- </tr>
+ {% if requirement.severity_status in ['warning', 'error'] %}
+ <tr class="color-{{ requirement.severity_status }}">
+ {% else %}
+ <tr>
+ {% endif %}
+ <td class="status-icon status-icon--{{ requirement.severity_status }}">
+ <div title="{{ requirement.severity_title }}">
+ <span class="visually-hidden">{{ requirement.severity_title }}</span>
+ </div>
+ </td>
+ <td class="status-title">{{ requirement.title }}</td>
+ <td class="status-value">
+ {{ requirement.value }}
+ {% if requirement.description %}
+ <div class="description">{{ requirement.description }}</div>
+ {% endif %}
+ </td>
+ </tr>
{% endfor %}
</tbody>
</table>
diff --git a/core/themes/seven/css/components/colors.css b/core/themes/seven/css/components/colors.css
new file mode 100644
index 0000000..54358d8
--- /dev/null
+++ b/core/themes/seven/css/components/colors.css
@@ -0,0 +1,16 @@
+/**
+ * Reusable colors.
+ */
+.color-success {
+ color: #325e1c;
+ background-color: #f3faef;
+}
+.color-warning {
+ color: #734c00;
+ background-color: #fdf8ed;
+}
+.color-error {
+ color: #a51b00;
+ background-color: #fcf4f2;
+}
+
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
index 6fde17c..470537d 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -37,6 +37,16 @@ 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;
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 9ac9590..94aba5c 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -14,6 +14,7 @@ global-styling:
css/components/breadcrumb.css: {}
css/components/buttons.css: {}
css/components/buttons.theme.css: {}
+ css/components/colors.css: {}
css/components/comments.css: {}
css/components/messages.css: {}
css/components/dropbutton.component.css: {}