Chris@0: /**
Chris@0:  * @file
Chris@0:  * Seven styles for the System Status general info.
Chris@0:  */
Chris@0: 
Chris@0: .system-status-general-info {
Chris@0:   border: 1px solid #ccc;
Chris@0:   border-radius: 3px;
Chris@0: }
Chris@0: 
Chris@0: .system-status-general-info__header {
Chris@18:   overflow: hidden;
Chris@18:   margin: 0;
Chris@0:   padding: 10px;
Chris@18:   text-transform: uppercase;
Chris@0:   border-top-left-radius: 3px;
Chris@0:   border-top-right-radius: 3px;
Chris@18:   background-color: #f5f5f2;
Chris@0:   font-size: 14px;
Chris@0: }
Chris@0: 
Chris@0: .system-status-general-info__item {
Chris@18:   overflow-x: auto;
Chris@18:   box-sizing: border-box;
Chris@18:   padding: 10px 10px 20px;
Chris@18:   border-top: 1px solid #ccc;
Chris@0:   background: #fcfcfa;
Chris@0: }
Chris@0: 
Chris@0: .system-status-general-info__item-icon {
Chris@0:   display: inline-block;
Chris@18:   width: 45px;
Chris@0:   height: 45px;
Chris@0:   vertical-align: top;
Chris@0: }
Chris@0: .system-status-general-info__item-icon:before {
Chris@18:   display: block;
Chris@0:   width: 100%;
Chris@0:   height: 100%;
Chris@18:   content: "";
Chris@18:   background-repeat: no-repeat;
Chris@18:   background-position: 50% center;
Chris@18:   background-size: 35px;
Chris@0: }
Chris@0: .system-status-general-info__item-icon--d8:before {
Chris@0:   background-image: url(../../images/icons/cccccc/d8-logo.svg);
Chris@0: }
Chris@0: .system-status-general-info__item-icon--clock:before {
Chris@0:   background-image: url(../../images/icons/cccccc/clock.svg);
Chris@0: }
Chris@0: .system-status-general-info__item-icon--server:before {
Chris@0:   background-image: url(../../images/icons/cccccc/server.svg);
Chris@0: }
Chris@0: .system-status-general-info__item-icon--php:before {
Chris@0:   background-image: url(../../images/icons/cccccc/php-logo.svg);
Chris@0:   background-size: 45px;
Chris@0: }
Chris@0: .system-status-general-info__item-icon--database:before {
Chris@0:   background-image: url(../../images/icons/cccccc/database.svg);
Chris@0:   background-size: 30px;
Chris@0: }
Chris@0: 
Chris@0: .system-status-general-info__item-details {
Chris@18:   position: relative;
Chris@18:   display: inline-block;
Chris@0:   box-sizing: border-box;
Chris@0:   width: calc(100% - 60px);
Chris@0:   padding-left: 10px; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .system-status-general-info__item-details {
Chris@0:   padding-right: 10px;
Chris@0:   padding-left: 0;
Chris@0: }
Chris@0: 
Chris@0: .system-status-general-info__item-title {
Chris@0:   margin-bottom: 0;
Chris@0: }
Chris@0: 
Chris@0: .system-status-general-info__sub-item-title {
Chris@0:   margin: 0;
Chris@0: }
Chris@0: 
Chris@0: .system-status-general-info__sub-item__title {
Chris@0:   font-weight: bold;
Chris@0: }
Chris@0: .system-status-general-info__sub-item__value {
Chris@0:   display: block;
Chris@0: }
Chris@0: 
Chris@0: .system-status-general-info__run-cron {
Chris@0:   margin: 1em 0 0;
Chris@0: }
Chris@0: 
Chris@0: @media screen and (min-width: 48em) {
Chris@0:   .system-status-general-info__items {
Chris@0:     display: flex;
Chris@18:     overflow-x: hidden;
Chris@0:     flex-wrap: wrap;
Chris@0:   }
Chris@0: 
Chris@0:   .system-status-general-info__item {
Chris@0:     flex: 1;
Chris@0:     flex-basis: 33%;
Chris@0:     width: 33%;
Chris@0:   }
Chris@0:   .system-status-general-info__item:nth-child(2) {
Chris@0:     flex: 2;
Chris@0:     flex-basis: 66%;
Chris@0:   }
Chris@0:   .system-status-general-info__item:nth-child(2),
Chris@0:   .system-status-general-info__item:nth-child(4),
Chris@0:   .system-status-general-info__item:nth-child(5) {
Chris@0:     border-left: 1px solid #ccc; /* LTR */
Chris@0:   }
Chris@0:   [dir="rtl"] .system-status-general-info__item:nth-child(1),
Chris@0:   [dir="rtl"] .system-status-general-info__item:nth-child(3) {
Chris@0:     border-left: 1px solid #ccc;
Chris@0:   }
Chris@0:   [dir="rtl"] .system-status-general-info__item:nth-child(2),
Chris@0:   [dir="rtl"] .system-status-general-info__item:nth-child(5) {
Chris@0:     border-left: 0;
Chris@0:   }
Chris@0: 
Chris@0:   .system-status-general-info__run-cron {
Chris@0:     margin: 15px 0 5px;
Chris@0:   }
Chris@0: }
Chris@0: 
Chris@0: @media screen and (min-width: 60em) {
Chris@0:   .system-status-general-info__item-icon {
Chris@0:     width: 55px;
Chris@0:     height: 55px;
Chris@0:   }
Chris@0:   .system-status-general-info__item-icon:before {
Chris@0:     background-size: 35px;
Chris@0:   }
Chris@0:   .system-status-general-info__item-icon--php:before {
Chris@0:     background-size: 55px;
Chris@0:   }
Chris@0: 
Chris@0:   .system-status-general-info__run-cron {
Chris@0:     position: absolute;
Chris@0:     top: 1em;
Chris@0:     right: 1em; /* LTR */
Chris@0:     margin-top: 0;
Chris@0:   }
Chris@0:   [dir="rtl"] .system-status-general-info__run-cron {
Chris@18:     right: auto;
Chris@0:     left: 1em;
Chris@0:   }
Chris@0: }
Chris@0: 
Chris@0: @media screen and (max-width: 48em) {
Chris@0:   .system-status-general-info__header {
Chris@0:     display: none;
Chris@0:   }
Chris@0:   .system-status-general-info {
Chris@18:     margin-top: 25px;
Chris@0:     border-top: 0;
Chris@0:   }
Chris@0: }