system-status-counter.pcss.css 2.0 KB

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