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

   1 /**
   2  * @file
   3  * Seven styles for the System Status Report.
   4  */
   5
   6 .system-status-report__requirements-group {
   7   padding-top: 20px;
   8 }
   9 .system-status-report__entry {
  10   border: 0;
  11   border-top: 1px solid #ccc;
  12   margin: 0;
  13   width: 100%;
  14   overflow: auto;
  15 }
  16 .system-status-report__entry:last-of-type {
  17   border-bottom: 1px solid #bebfb9;
  18 }
  19 .system-status-report__entry--error {
  20   background-color: transparent;
  21 }
  22 .system-status-report__entry--warning {
  23   background-color: transparent;
  24 }
  25 /* Account for native and poly-filled details element */
  26 .system-status-report__status-title {
  27   position: relative;
  28   padding: 1em 1em 1em 3em; /* LTR */
  29   box-sizing: border-box;
  30   width: 100%;
  31   font-weight: bold;
  32 }
  33 .system-status-report__status-title .details-title {
  34   color: inherit;
  35   text-transform: none;
  36 }
  37 html:not(.details) .system-status-report__status-title {
  38   padding-left: 0;
  39 }
  40 .system-status-report__status-title .details-title {
  41   padding-left: 3em; /* LTR */
  42 }
  43 [dir="rtl"] .system-status-report__status-title .details-title {
  44   padding-right: 3em;
  45   padding-left: 0;
  46 }
  47 [dir="rtl"].details .system-status-report__status-title {
  48   padding: 1em 3em 1em 1em;
  49 }
  50 .collapse-processed > .system-status-report__status-title:before {
  51   float: right; /* LTR */
  52 }
  53 .system-status-report__status-title::-webkit-details-marker {
  54   float: right; /* LTR */
  55 }
  56 [dir="rtl"] .collapse-processed > .system-status-report__status-title:before {
  57   float: left;
  58 }
  59 [dir="rtl"] .system-status-report__status-title::-webkit-details-marker {
  60   float: left;
  61 }
  62
  63 /* Make poly-filled details and summary elements behave correctly. */
  64 .system-status-report summary:first-child ~ * {
  65   display: none;
  66 }
  67 .system-status-report details[open] > *,
  68 .system-status-report details > summary:first-child {
  69   display: block;
  70 }
  71
  72 .system-status-report__status-title .details-title:before,
  73 .details .system-status-report__status-icon:before {
  74   content: "";
  75   background-repeat: no-repeat;
  76   background-size: contain;
  77   background-position: top center;
  78   height: 16px;
  79   width: 16px;
  80   position: absolute;
  81   left: 10px; /* LTR */
  82   top: 1em;
  83   display: inline-block;
  84   vertical-align: top;
  85   margin-right: 10px; /* LTR */
  86 }
  87 [dir="rtl"] .system-status-report__status-title .details-title:before,
  88 [dir="rtl"].details .system-status-report__status-title:before {
  89   left: auto;
  90   right: 10px;
  91   margin-right: 0;
  92 }
  93 .system-status-report__status-icon--error .details-title:before,
  94 .details .system-status-report__status-icon--error:before {
  95   background-image: url(../../../stable/images/core/icons/e32700/error.svg);
  96 }
  97 .system-status-report__status-icon--warning .details-title:before,
  98 .details .system-status-report__status-icon--warning:before {
  99   background-image: url(../../../stable/images/core/icons/e29700/warning.svg);
 100 }
 101
 102 .system-status-report__entry__value {
 103   box-sizing: border-box;
 104   padding: 0 1em 1em 3em; /* LTR */
 105 }
 106 [dir="rtl"] .system-status-report__entry__value {
 107   padding-right: 3em;
 108   padding-left: 1em;
 109 }
 110
 111 @media screen and (max-width: 48em) {
 112   .system-status-report {
 113     word-wrap: break-word;
 114   }
 115 }
 116
 117 @media screen and (min-width: 48em) {
 118   .system-status-report__entry::after {
 119     display: table;
 120     content: '';
 121     clear: both;
 122   }
 123   .system-status-report__status-title {
 124     width: 18rem;
 125     float: left; /* LTR */
 126     cursor: default;
 127   }
 128   .system-status-report__status-title:hover,
 129   .system-status-report__status-title:focus {
 130     text-decoration: none;
 131   }
 132   [dir="rtl"] .system-status-report__status-title {
 133     float: right;
 134   }
 135   .system-status-report__status-title::-webkit-details-marker {
 136     display: none;
 137   }
 138   .collapse-processed > .system-status-report__status-title:before {
 139     position: relative;
 140     top: 3px;
 141   }
 142   .system-status-report__entry__value {
 143     width: calc(100% - 23em);
 144     float: right;
 145     display: block;
 146     padding-left: 0; /* LTR */
 147     padding-top: 1em;
 148   }
 149   [dir="rtl"] .system-status-report__entry__value {
 150     padding-left: 0;
 151     padding-right: 3em;
 152   }
 153 }