Chris@0: /**
Chris@0:  * @file
Chris@0:  * Styles for the system status counter component.
Chris@0:  */
Chris@0: 
Chris@0: .system-status-counter {
Chris@18:   display: inline-block;
Chris@18:   overflow-y: hidden;
Chris@0:   box-sizing: border-box;
Chris@18:   width: 100%;
Chris@18:   white-space: nowrap;
Chris@0:   border: 1px solid #e6e4df;
Chris@0:   border-radius: 3px;
Chris@14:   background: #fcfcfa;
Chris@0: }
Chris@0: .system-status-counter__status-icon {
Chris@0:   display: inline-block;
Chris@18:   width: 60px;
Chris@0:   height: 60px;
Chris@0:   vertical-align: middle;
Chris@0:   border-right: 1px solid #e6e4df; /* LTR */
Chris@0:   border-left: 0; /* LTR */
Chris@0:   background-color: #faf9f5;
Chris@14:   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
Chris@0: }
Chris@0: [dir="rtl"] .system-status-counter__status-icon {
Chris@0:   border-right: 0;
Chris@0:   border-left: 1px solid #e6e4df;
Chris@14:   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
Chris@0: }
Chris@0: .system-status-counter__status-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: 25px;
Chris@0: }
Chris@0: 
Chris@0: .system-status-counter__status-icon--error:before {
Chris@0:   background-image: url(../../../stable/images/core/icons/e32700/error.svg);
Chris@0: }
Chris@0: .system-status-counter__status-icon--warning:before {
Chris@0:   background-image: url(../../../stable/images/core/icons/e29700/warning.svg);
Chris@0: }
Chris@0: .system-status-counter__status-icon--checked:before {
Chris@0:   background-image: url(../../../stable/images/core/icons/73b355/check.svg);
Chris@0: }
Chris@0: 
Chris@0: .system-status-counter__status-title {
Chris@0:   display: inline-block;
Chris@18:   padding: 0 6px;
Chris@0:   vertical-align: middle;
Chris@0:   text-transform: uppercase;
Chris@0:   font-size: 1rem;
Chris@18:   font-weight: bold;
Chris@0:   line-height: 1em;
Chris@0: }
Chris@0: .system-status-counter__title-count {
Chris@0:   display: block;
Chris@0:   margin-bottom: 2px;
Chris@0: }
Chris@0: .system-status-counter__details {
Chris@18:   display: block;
Chris@18:   text-transform: none;
Chris@0:   font-size: 12px;
Chris@0:   font-weight: normal;
Chris@0:   line-height: 1.5;
Chris@0: }
Chris@0: 
Chris@0: @media screen and (min-width: 61em) {
Chris@0:   .system-status-counter__status-icon,
Chris@0:   .system-status-counter {
Chris@0:     height: 65px;
Chris@0:   }
Chris@0:   .system-status-counter__status-icon {
Chris@0:     width: 65px;
Chris@0:   }
Chris@0:   .system-status-counter__status-title {
Chris@18:     padding: 10px 3%;
Chris@0:     font-size: 16px;
Chris@0:   }
Chris@0:   .system-status-counter__status-icon:before {
Chris@0:     background-size: 35px;
Chris@0:   }
Chris@0: }