3 * Styles for the system status counter component.
6 .system-status-counter {
7 box-sizing: border-box;
9 border: 1px solid #e6e4df;
11 display: inline-block;
16 .system-status-counter__status-icon {
17 display: inline-block;
20 vertical-align: middle;
21 border-right: 1px solid #e6e4df; /* LTR */
22 border-left: 0; /* LTR */
23 background-color: #faf9f5;
24 box-shadow: 0 1px 1px rgba(0, 0, 0, .1) inset;
26 [dir="rtl"] .system-status-counter__status-icon {
28 border-left: 1px solid #e6e4df;
29 box-shadow: 0 1px 1px rgba(0, 0, 0, .1) inset;
31 .system-status-counter__status-icon:before {
33 background-size: 25px;
34 background-position: 50% center;
35 background-repeat: no-repeat;
41 .system-status-counter__status-icon--error:before {
42 background-image: url(../../../stable/images/core/icons/e32700/error.svg);
44 .system-status-counter__status-icon--warning:before {
45 background-image: url(../../../stable/images/core/icons/e29700/warning.svg);
47 .system-status-counter__status-icon--checked:before {
48 background-image: url(../../../stable/images/core/icons/73b355/check.svg);
51 .system-status-counter__status-title {
52 display: inline-block;
53 vertical-align: middle;
54 text-transform: uppercase;
60 .system-status-counter__title-count {
64 .system-status-counter__details {
72 @media screen and (min-width: 61em) {
73 .system-status-counter__status-icon,
74 .system-status-counter {
77 .system-status-counter__status-icon {
80 .system-status-counter__status-title {
84 .system-status-counter__status-icon:before {
85 background-size: 35px;