www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/seven/css/components/system-status-counter.css

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