Verified Commit 7cb4919f authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332419 by Gauravvvv, smustgrave, lauriii: Refactor Claro's messages stylesheet

parent dc0c8940

core/themes/claro/css/components/messages.css

+35 −55
Original line number Diff line number Diff line
@@ -27,23 +27,22 @@ 
}



.messages-list {

  margin-top: calc(var(--space-m) + var(--space-l));

  margin-bottom: calc(var(--space-m) + var(--space-l));

  margin-block: calc(var(--space-m) + var(--space-l));

  padding: 0;

  list-style: none;

}



.field .messages-list,

.form-wrapper .messages-list {

  margin-bottom: 0;

  margin-block-end: 0;

}



.messages {

  overflow: auto; /* Required to prevent text clipping. */

  box-sizing: border-box;

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

  margin-bottom: var(--space-m);

  padding: var(--space-l) var(--space-l) 2rem calc(var(--space-l) - 0.3125rem); /* LTR */

  margin-block: var(--space-m);

  padding-block: var(--space-l) 2rem;

  padding-inline: calc(var(--space-l) - 0.3125rem) var(--space-l);

  color: var(--messages-fg-color);

  border-width: 0 0 0 var(--messages-border-width); /* LTR */

  border-style: solid;
@@ -52,87 +51,68 @@ 
  background-color: var(--messages-bg-color);

}



[dir="rtl"] .messages {

  padding-right: calc(var(--space-l) - 0.3125rem);

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

  border-right-width: var(--messages-border-width);

  border-left-width: 0;

}



.messages--error {

  border-color: var(--messages--error-color);

.messages a {

  text-decoration: underline;

  color: var(--messages__link-color);

}



.messages--status {

  border-color: var(--messages--status-color);

.messages a:hover {

  color: var(--messages__link--hover-color);

}



.messages--warning {

  border-color: var(--messages--warning-color);

.messages pre {

  margin: 0;

}



.messages__title {

  margin: 0 0 0 var(--messages__text-margin); /* LTR */

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

[dir="rtl"] .messages {

  border-right-width: var(--messages-border-width);

  border-left-width: 0;

}



[dir="rtl"] .messages__title {

  margin-right: var(--messages__text-margin);

  margin-left: 0;

.messages--error {

  border-color: var(--messages--error-color);

}



.messages--error .messages__header {

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3e%3cpath d='M3 11.193L11.45 3' stroke='%23e34f4f' stroke-width='2'/%3e%3ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3e%3c/svg%3e") no-repeat center left; /* LTR */

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3e%3cpath d='M3 11.193L11.45 3' stroke='%23e34f4f' stroke-width='2'/%3e%3ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3e%3c/svg%3e") no-repeat center left;

}



[dir="rtl"] .messages--error .messages__header {

  background-position: center right;

.messages--status {

  border-color: var(--messages--status-color);

}



.messages--status .messages__header {

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3e%3cpath d='M2 6.571L5.6 10 14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3e%3c/svg%3e") no-repeat center left; /* LTR */

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3e%3cpath d='M2 6.571L5.6 10 14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3e%3c/svg%3e") no-repeat center left;

}



[dir="rtl"] .messages--status .messages__header {

  background-position: center right;

.messages--warning {

  border-color: var(--messages--warning-color);

}



.messages--warning .messages__header {

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3e%3cpath d='M.5 0h3v9h-3z'/%3e%3ccircle cx='2' cy='12.5' r='1.5'/%3e%3c/svg%3e") no-repeat center left; /* LTR */

  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3e%3cpath d='M.5 0h3v9h-3z'/%3e%3ccircle cx='2' cy='12.5' r='1.5'/%3e%3c/svg%3e") no-repeat center left;

}



[dir="rtl"] .messages--warning .messages__header {

  background-position: center right;

.messages__title {

  margin-block: 0;

  margin-inline: var(--messages__text-margin) 0;

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

}



.messages__header {

  display: flex;

  align-items: center;

  margin-bottom: var(--space-m);

}



@media screen and (min-width: 48rem) {

  .messages__content {

    margin-left: var(--messages__text-margin); /* LTR */

  }



  [dir="rtl"] .messages__content {

    margin-right: var(--messages__text-margin);

    margin-left: 0;

  }

  margin-block-end: var(--space-m);

}



.messages a {

  text-decoration: underline;

  color: var(--messages__link-color);

[dir="rtl"] .messages__header {

  background-position: center right;

}



.messages a:hover {

  color: var(--messages__link--hover-color);

@media screen and (min-width: 48rem) {

  .messages__content {

    margin-inline-start: var(--messages__text-margin);

  }



.messages pre {

  margin: 0;

}



.messages__list {
@@ -142,5 +122,5 @@ 
}



.messages__item + .messages__item {

  margin-top: var(--space-s);

  margin-block-start: var(--space-s);

}

core/themes/claro/css/components/messages.pcss.css

+43 −59
Original line number Diff line number Diff line
@@ -20,108 +20,92 @@ 
}



.messages-list {

  margin-top: calc(var(--space-m) + var(--space-l));

  margin-bottom: calc(var(--space-m) + var(--space-l));

  margin-block: calc(var(--space-m) + var(--space-l));

  padding: 0;

  list-style: none;

}



.field .messages-list,

.form-wrapper .messages-list {

  margin-bottom: 0;

  margin-block-end: 0;

}



.messages {

  overflow: auto; /* Required to prevent text clipping. */

  box-sizing: border-box;

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

  margin-bottom: var(--space-m);

  padding: var(--space-l) var(--space-l) 2rem calc(var(--space-l) - 5px); /* LTR */

  margin-block: var(--space-m);

  padding-block: var(--space-l) 2rem;

  padding-inline: calc(var(--space-l) - 5px) var(--space-l);

  color: var(--messages-fg-color);

  border-width: 0 0 0 var(--messages-border-width); /* LTR */

  border-style: solid;

  border-color: var(--messages-bg-color);

  border-radius: var(--messages-border-radius);

  background-color: var(--messages-bg-color);



  & a {

    text-decoration: underline;

    color: var(--messages__link-color);



    &:hover {

      color: var(--messages__link--hover-color);

    }

  }



[dir="rtl"] .messages {

  padding-right: calc(var(--space-l) - 5px);

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

  & pre {

    margin: 0;

  }



  @nest [dir="rtl"] & {

    border-right-width: var(--messages-border-width);

    border-left-width: 0;

  }

}



.messages--error {

  border-color: var(--messages--error-color);



  & .messages__header {

    background: url(../../images/icons/e34f4f/crossout.svg) no-repeat center left;

  }

}



.messages--status {

  border-color: var(--messages--status-color);

}



.messages--warning {

  border-color: var(--messages--warning-color);

  & .messages__header {

    background: url(../../images/icons/42a877/checkmark.svg) no-repeat center left;

  }



.messages__title {

  margin: 0 0 0 var(--messages__text-margin); /* LTR */

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

}

[dir="rtl"] .messages__title {

  margin-right: var(--messages__text-margin);

  margin-left: 0;

}



.messages--error .messages__header {

  background: url(../../images/icons/e34f4f/crossout.svg) no-repeat center left; /* LTR */

}

[dir="rtl"] .messages--error .messages__header {

  background-position: center right;

}

.messages--warning {

  border-color: var(--messages--warning-color);



.messages--status .messages__header {

  background: url(../../images/icons/42a877/checkmark.svg) no-repeat center left; /* LTR */

  & .messages__header {

    background: url(../../images/icons/e0ac00/exclamation.svg) no-repeat center left;

  }

[dir="rtl"] .messages--status .messages__header {

  background-position: center right;

}



.messages--warning .messages__header {

  background: url(../../images/icons/e0ac00/exclamation.svg) no-repeat center left; /* LTR */

}

[dir="rtl"] .messages--warning .messages__header {

  background-position: center right;

.messages__title {

  margin-block: 0;

  margin-inline: var(--messages__text-margin) 0;

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

}



.messages__header {

  display: flex;

  align-items: center;

  margin-bottom: var(--space-m);

}



@media screen and (min-width: 48rem) {

  .messages__content {

    margin-left: var(--messages__text-margin); /* LTR */

  }

  margin-block-end: var(--space-m);



  [dir="rtl"] .messages__content {

    margin-right: var(--messages__text-margin);

    margin-left: 0;

  }

  @nest [dir="rtl"] & {

    background-position: center right;

  }



.messages a {

  text-decoration: underline;

  color: var(--messages__link-color);

}



.messages a:hover {

  color: var(--messages__link--hover-color);

@media screen and (min-width: 48rem) {

  .messages__content {

    margin-inline-start: var(--messages__text-margin);

  }



.messages pre {

  margin: 0;

}



.messages__list {
@@ -131,5 +115,5 @@ 
}



.messages__item + .messages__item {

  margin-top: var(--space-s);

  margin-block-start: var(--space-s);

}