Commit 6c991e8f authored by alexpott's avatar alexpott

Issue #2336141 by lauriii, LewisNyman, rteijeiro, balagan, emma.maria,...

Issue #2336141 by lauriii, LewisNyman, rteijeiro, balagan, emma.maria, stefika: Create reusable color classes
parent c0b45ec1
......@@ -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 {
......
......@@ -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;
}
......
......@@ -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>
/**
* Reusable colors.
*/
.color-success {
color: #325e1c;
background-color: #f3faef;
}
.color-warning {
color: #734c00;
background-color: #fdf8ed;
}
.color-error {
color: #a51b00;
background-color: #fcf4f2;
}
......@@ -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;
......
......@@ -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: {}
......
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