Verified Commit 2f8c7039 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332469 by Gauravvvv, Rassoni, smustgrave, lauriii: Refactor Claro's... 

Issue #3332469 by Gauravvvv, Rassoni, smustgrave, lauriii: Refactor Claro's system-status-report stylesheet
parent da340507

core/themes/claro/claro.libraries.yml

+0 −1
Original line number Diff line number Diff line
@@ -163,7 +163,6 @@ system.admin: 
      css/components/system-admin--links.css: { weight: -10 }

      css/components/system-admin--modules.css: { weight: -10 }

      css/components/system-admin--panel.css: { weight: -10 }

      css/components/system-admin--status-report.css: { weight: -10 }

    layout:

      css/layout/system-admin--layout.css: { weight: -10 }

  dependencies:

core/themes/claro/css/components/system-admin--status-report.css

deleted100644 → 0
+0 −88
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * @file

 * System admin module: Status report.

 *

 * Main status report theming, status report info styles, status report layout

 * and counter styles are provided by the system/base library, see

 *  - system-status-report.css

 *  - system-status-report-general-info.css

 *  - system-status-counter.css

 *  - system-status-report-counters.css

 */



.system-status-report {

  position: relative;

  padding-top: var(--space-m);

}



@media screen and (min-width: 38em) {

  .system-status-report {

    padding-top: var(--space-l);

  }

}



.system-status-report__status-title {

  position: relative;

  box-sizing: border-box;

  width: 100%;

  padding: 0.625rem 0.375rem 0.625rem 2.5rem; /* LTR */

  vertical-align: top;

  background-color: transparent;

  font-weight: normal;

}



[dir="rtl"] .system-status-report__status-title {

  padding: 0.625rem 2.5rem 0.625rem 0.375rem;

}



.system-status-report__status-icon:before {

  position: absolute;

  top: 0.75rem;

  left: 0.75rem; /* LTR */

  display: block;

  width: 1rem;

  height: 1rem;

  content: "";

  background-repeat: no-repeat;

}



[dir="rtl"] .system-status-report__status-icon:before {

  right: 0.75rem;

  left: auto;

}



.system-status-report__status-icon--error:before {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");

}



.system-status-report__status-icon--warning:before {

  background-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");

}



.system-status-report__entry__value {

  padding: 1em 0.5em;

}



.cron-description__run-cron {

  display: block;

}



.claro-details__wrapper.claro-details__wrapper--system-status-report {

  margin: 0;

}



.system-status-report__row {

  display: flex;

  border-bottom: 1px solid #d3d4d9;

}



.system-status-report__row:last-of-type {

  border-bottom: none;

}

core/themes/claro/css/components/system-admin--status-report.pcss.css

deleted100644 → 0
+0 −74
Original line number Diff line number Diff line 
/**

 * @file

 * System admin module: Status report.

 *

 * Main status report theming, status report info styles, status report layout

 * and counter styles are provided by the system/base library, see

 *  - system-status-report.css

 *  - system-status-report-general-info.css

 *  - system-status-counter.css

 *  - system-status-report-counters.css

 */



.system-status-report {

  position: relative;

  padding-top: var(--space-m);

}



@media screen and (min-width: 38em) {

  .system-status-report {

    padding-top: var(--space-l);

  }

}



.system-status-report__status-title {

  position: relative;

  box-sizing: border-box;

  width: 100%;

  padding: 10px 6px 10px 40px; /* LTR */

  vertical-align: top;

  background-color: transparent;

  font-weight: normal;

}

[dir="rtl"] .system-status-report__status-title {

  padding: 10px 40px 10px 6px;

}

.system-status-report__status-icon:before {

  position: absolute;

  top: 12px;

  left: 12px; /* LTR */

  display: block;

  width: 16px;

  height: 16px;

  content: "";

  background-repeat: no-repeat;

}

[dir="rtl"] .system-status-report__status-icon:before {

  right: 12px;

  left: auto;

}

.system-status-report__status-icon--error:before {

  background-image: url(../../../../misc/icons/dc2323/error.svg);

}

.system-status-report__status-icon--warning:before {

  background-image: url(../../images/core/e29700/warning.svg);

}

.system-status-report__entry__value {

  padding: 1em 0.5em;

}



.cron-description__run-cron {

  display: block;

}



.claro-details__wrapper.claro-details__wrapper--system-status-report {

  margin: 0;

}



.system-status-report__row {

  display: flex;

  border-bottom: 1px solid #d3d4d9;

}

.system-status-report__row:last-of-type {

  border-bottom: none;

}

core/themes/claro/css/components/system-status-report.css

+84 −31
Original line number Diff line number Diff line
@@ -10,8 +10,74 @@ 
 * Claro styles for the System Status Report.

 */



:root {

  --system-admin-status-report-border-color: var(--color-gray-200);

}



.system-status-report {

  position: relative;

  padding-block-start: var(--space-m);

}



@media screen and (min-width: 38em) {

  .system-status-report {

    padding-block-start: var(--space-l);

  }

}



.system-status-report__status-title {

  position: relative;

  box-sizing: border-box;

  width: 100%;

  padding-block: 0.625em;

  padding-inline: 2.5em 0.375em;

  vertical-align: top;

  background-color: transparent;

  font-weight: normal;

}



.system-status-report__status-icon::before {

  position: absolute;

  inset-block-start: 0.75rem;

  inset-inline-start: 0.75rem;

  display: block;

  width: 1rem;

  height: 1rem;

  content: "";

  background-repeat: no-repeat;

}



.system-status-report__status-icon--error::before {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");

}



.system-status-report__status-icon--warning::before {

  background-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");

}



.system-status-report__entry__value {

  padding: 1em 0.5em;

}



.cron-description__run-cron {

  display: block;

}



.claro-details__wrapper.claro-details__wrapper--system-status-report {

  margin: 0;

}



.system-status-report__row {

  display: flex;

  border-bottom: 1px solid var(--system-admin-status-report-border-color);

}



.system-status-report__row:last-of-type {

  border-bottom: none;

}



.system-status-report__requirements-group {

  padding-top: 1.25rem;

  padding-block-start: 1.25rem;

}



.system-status-report__entry {
@@ -23,6 +89,11 @@ 
  background-color: transparent;

}



.system-status-report__entry h3 {

  margin-block: 0.625rem;

  font-size: 1.231em;

}



.system-status-report__entry--error {

  background-color: transparent;

}
@@ -31,15 +102,9 @@ 
  background-color: transparent;

}



.system-status-report__entry__value h3 {

  margin-top: 0.625rem;

  margin-bottom: 0.625rem;

  font-size: 1.231em;

}



.system-status-report .claro-details {

  border: none;

  border-bottom: var(--details-border-size) solid var(--details-border-color);

  border-block-end: var(--details-border-size) solid var(--details-border-color);

  box-shadow: none;

}
@@ -47,18 +112,19 @@ 
  position: relative;

  box-sizing: border-box;

  width: 100%;

  padding: 1em 1em 1em 3em; /* LTR */

  padding-block: 1em;

  padding-inline: 3em 1em;

  font-weight: bold;

}



.system-status-report__status-icon:before {

  position: absolute;

  top: 1em;

  left: 0.625rem; /* LTR */

  inset-block-start: 1em;

  inset-inline-start: 0.625rem;

  display: inline-block;

  width: 1.5rem;

  height: 1.5rem;

  margin-right: 0.625rem; /* LTR */

  margin-inline-end: 0.625rem;

  content: "";

  vertical-align: top;

  background-repeat: no-repeat;
@@ -66,12 +132,6 @@ 
  background-size: contain;

}



[dir="rtl"] .system-status-report__status-icon:before {

  right: 0.625rem;

  left: auto;

  margin-right: 0;

}



.system-status-report__status-icon--error:before {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");

}
@@ -103,13 +163,9 @@ 


.system-status-report__entry__value {

  box-sizing: border-box;

  padding: 0 1em 1em 3em; /* LTR */

  font-size: 0.875rem;

}



[dir="rtl"] .system-status-report__entry__value {

  padding-right: 3em;

  padding-left: 1em;

  padding-block: 0 1em;

  padding-inline: 3em 1em;

  font-size: var(--font-size-s);

}



.claro-details__summary--system-status-report {
@@ -132,6 +188,7 @@ 
    width: 18rem;

    cursor: default;

  }



  .system-status-report__status-title:hover,

  .system-status-report__status-title:focus {

    text-decoration: none;
@@ -143,11 +200,7 @@ 
  .system-status-report__entry__value {

    display: block;

    width: calc(100% - 23em);

    padding-top: 1em;

    padding-left: 0; /* LTR */

  }

  [dir="rtl"] .system-status-report__entry__value {

    padding-right: 3em;

    padding-left: 0;

    padding-block-start: 1em;

    padding-inline-start: 0;

  }

}

core/themes/claro/css/components/system-status-report.pcss.css

+91 −35
Original line number Diff line number Diff line
@@ -3,8 +3,72 @@ 
 * Claro styles for the System Status Report.

 */



:root {

  --system-admin-status-report-border-color: var(--color-gray-200);

}



.system-status-report {

  position: relative;

  padding-block-start: var(--space-m);

}



@media screen and (min-width: 38em) {

  .system-status-report {

    padding-block-start: var(--space-l);

  }

}



.system-status-report__status-title {

  position: relative;

  box-sizing: border-box;

  width: 100%;

  padding-block: 0.625em;

  padding-inline: 2.5em 0.375em;

  vertical-align: top;

  background-color: transparent;

  font-weight: normal;

}

.system-status-report__status-icon::before {

  position: absolute;

  inset-block-start: 12px;

  inset-inline-start: 12px;

  display: block;

  width: 16px;

  height: 16px;

  content: "";

  background-repeat: no-repeat;

}

.system-status-report__status-icon--error::before {

  background-image: url(../../../../misc/icons/dc2323/error.svg);

}

.system-status-report__status-icon--warning::before {

  background-image: url(../../images/core/e29700/warning.svg);

}

.system-status-report__entry__value {

  padding: 1em 0.5em;

}



.cron-description__run-cron {

  display: block;

}



.claro-details__wrapper {

  &.claro-details__wrapper--system-status-report {

    margin: 0;

  }

}



.system-status-report__row {

  display: flex;

  border-bottom: 1px solid var(--system-admin-status-report-border-color);



  &:last-of-type {

    border-bottom: none;

  }

}



.system-status-report__requirements-group {

  padding-top: 20px;

  padding-block-start: 20px;

}

.system-status-report__entry {

  overflow: auto;
@@ -13,6 +77,11 @@ 
  border: 0;

  border-radius: 0;

  background-color: transparent;



  & h3 {

    margin-block: 10px;

    font-size: 1.231em;

  }

}

.system-status-report__entry--error {

  background-color: transparent;
@@ -20,45 +89,38 @@ 
.system-status-report__entry--warning {

  background-color: transparent;

}

.system-status-report__entry__value h3 {

  margin-top: 10px;

  margin-bottom: 10px;

  font-size: 1.231em;

}



.system-status-report .claro-details {

.system-status-report {

  & .claro-details {

    border: none;

  border-bottom: var(--details-border-size) solid var(--details-border-color);

    border-block-end: var(--details-border-size) solid var(--details-border-color);

    box-shadow: none;

  }

}



.system-status-report__status-title {

  position: relative;

  box-sizing: border-box;

  width: 100%;

  padding: 1em 1em 1em 3em; /* LTR */

  padding-block: 1em;

  padding-inline: 3em 1em;

  font-weight: bold;

}



.system-status-report__status-icon:before {

  position: absolute;

  top: 1em;

  left: 10px; /* LTR */

  inset-block-start: 1em;

  inset-inline-start: 10px;

  display: inline-block;

  width: 24px;

  height: 24px;

  margin-right: 10px; /* LTR */

  margin-inline-end: 10px;

  content: "";

  vertical-align: top;

  background-repeat: no-repeat;

  background-position: top center;

  background-size: contain;

}

[dir="rtl"] .system-status-report__status-icon:before {

  right: 10px;

  left: auto;

  margin-right: 0;

}

.system-status-report__status-icon--error:before {

  background-image: url(../../../../misc/icons/dc2323/error.svg);

}
@@ -84,12 +146,9 @@ 


.system-status-report__entry__value {

  box-sizing: border-box;

  padding: 0 1em 1em 3em; /* LTR */

  font-size: 14px;

}

[dir="rtl"] .system-status-report__entry__value {

  padding-right: 3em;

  padding-left: 1em;

  padding-block: 0 1em;

  padding-inline: 3em 1em;

  font-size: var(--font-size-s);

}



.claro-details__summary--system-status-report {
@@ -111,11 +170,12 @@ 
  .system-status-report__status-title {

    width: 18rem;

    cursor: default;

  }

  .system-status-report__status-title:hover,

  .system-status-report__status-title:focus {



    &:hover,

    &:focus {

      text-decoration: none;

    }

  }



  html.js .system-status-report__status-title::-webkit-details-marker {

    display: none;
@@ -123,11 +183,7 @@ 
  .system-status-report__entry__value {

    display: block;

    width: calc(100% - 23em);

    padding-top: 1em;

    padding-left: 0; /* LTR */

  }

  [dir="rtl"] .system-status-report__entry__value {

    padding-right: 3em;

    padding-left: 0;

    padding-block-start: 1em;

    padding-inline-start: 0;

  }

}