|
Chris@0
|
1 /**
|
|
Chris@0
|
2 * @file
|
|
Chris@0
|
3 * Styles for the system status counter component.
|
|
Chris@0
|
4 */
|
|
Chris@0
|
5
|
|
Chris@0
|
6 .system-status-counter {
|
|
Chris@18
|
7 display: inline-block;
|
|
Chris@18
|
8 overflow-y: hidden;
|
|
Chris@0
|
9 box-sizing: border-box;
|
|
Chris@18
|
10 width: 100%;
|
|
Chris@18
|
11 white-space: nowrap;
|
|
Chris@0
|
12 border: 1px solid #e6e4df;
|
|
Chris@0
|
13 border-radius: 3px;
|
|
Chris@14
|
14 background: #fcfcfa;
|
|
Chris@0
|
15 }
|
|
Chris@0
|
16 .system-status-counter__status-icon {
|
|
Chris@0
|
17 display: inline-block;
|
|
Chris@18
|
18 width: 60px;
|
|
Chris@0
|
19 height: 60px;
|
|
Chris@0
|
20 vertical-align: middle;
|
|
Chris@0
|
21 border-right: 1px solid #e6e4df; /* LTR */
|
|
Chris@0
|
22 border-left: 0; /* LTR */
|
|
Chris@0
|
23 background-color: #faf9f5;
|
|
Chris@14
|
24 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
|
|
Chris@0
|
25 }
|
|
Chris@0
|
26 [dir="rtl"] .system-status-counter__status-icon {
|
|
Chris@0
|
27 border-right: 0;
|
|
Chris@0
|
28 border-left: 1px solid #e6e4df;
|
|
Chris@14
|
29 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
|
|
Chris@0
|
30 }
|
|
Chris@0
|
31 .system-status-counter__status-icon:before {
|
|
Chris@18
|
32 display: block;
|
|
Chris@0
|
33 width: 100%;
|
|
Chris@0
|
34 height: 100%;
|
|
Chris@18
|
35 content: "";
|
|
Chris@18
|
36 background-repeat: no-repeat;
|
|
Chris@18
|
37 background-position: 50% center;
|
|
Chris@18
|
38 background-size: 25px;
|
|
Chris@0
|
39 }
|
|
Chris@0
|
40
|
|
Chris@0
|
41 .system-status-counter__status-icon--error:before {
|
|
Chris@0
|
42 background-image: url(../../../stable/images/core/icons/e32700/error.svg);
|
|
Chris@0
|
43 }
|
|
Chris@0
|
44 .system-status-counter__status-icon--warning:before {
|
|
Chris@0
|
45 background-image: url(../../../stable/images/core/icons/e29700/warning.svg);
|
|
Chris@0
|
46 }
|
|
Chris@0
|
47 .system-status-counter__status-icon--checked:before {
|
|
Chris@0
|
48 background-image: url(../../../stable/images/core/icons/73b355/check.svg);
|
|
Chris@0
|
49 }
|
|
Chris@0
|
50
|
|
Chris@0
|
51 .system-status-counter__status-title {
|
|
Chris@0
|
52 display: inline-block;
|
|
Chris@18
|
53 padding: 0 6px;
|
|
Chris@0
|
54 vertical-align: middle;
|
|
Chris@0
|
55 text-transform: uppercase;
|
|
Chris@0
|
56 font-size: 1rem;
|
|
Chris@18
|
57 font-weight: bold;
|
|
Chris@0
|
58 line-height: 1em;
|
|
Chris@0
|
59 }
|
|
Chris@0
|
60 .system-status-counter__title-count {
|
|
Chris@0
|
61 display: block;
|
|
Chris@0
|
62 margin-bottom: 2px;
|
|
Chris@0
|
63 }
|
|
Chris@0
|
64 .system-status-counter__details {
|
|
Chris@18
|
65 display: block;
|
|
Chris@18
|
66 text-transform: none;
|
|
Chris@0
|
67 font-size: 12px;
|
|
Chris@0
|
68 font-weight: normal;
|
|
Chris@0
|
69 line-height: 1.5;
|
|
Chris@0
|
70 }
|
|
Chris@0
|
71
|
|
Chris@0
|
72 @media screen and (min-width: 61em) {
|
|
Chris@0
|
73 .system-status-counter__status-icon,
|
|
Chris@0
|
74 .system-status-counter {
|
|
Chris@0
|
75 height: 65px;
|
|
Chris@0
|
76 }
|
|
Chris@0
|
77 .system-status-counter__status-icon {
|
|
Chris@0
|
78 width: 65px;
|
|
Chris@0
|
79 }
|
|
Chris@0
|
80 .system-status-counter__status-title {
|
|
Chris@18
|
81 padding: 10px 3%;
|
|
Chris@0
|
82 font-size: 16px;
|
|
Chris@0
|
83 }
|
|
Chris@0
|
84 .system-status-counter__status-icon:before {
|
|
Chris@0
|
85 background-size: 35px;
|
|
Chris@0
|
86 }
|
|
Chris@0
|
87 }
|
