Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

merge-requests/3535/merge
nod_ 2023-04-12 10:06:53 +02:00
parent dc0c8940a0
commit 7cb4919f4b
No known key found for this signature in database
GPG Key ID: 76624892606FA197
2 changed files with 100 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
core/themes/claro/css/components/messages.css
View File

@ -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,76 +51,6 @@
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--status {
border-color: var(--messages--status-color);
}
.messages--warning {
border-color: var(--messages--warning-color);
}
.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("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 */
}
[dir="rtl"] .messages--error .messages__header {
background-position: center right;
}
.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 */
}
[dir="rtl"] .messages--status .messages__header {
background-position: center right;
}
.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 */
}
[dir="rtl"] .messages--warning .messages__header {
background-position: center right;
}
.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;
}
}
.messages a {
text-decoration: underline;
color: var(--messages__link-color);
@ -135,6 +64,57 @@
margin: 0;
}
[dir="rtl"] .messages {
border-right-width: var(--messages-border-width);
border-left-width: 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;
}
.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;
}
.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;
}
.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-block-end: var(--space-m);
}
[dir="rtl"] .messages__header {
background-position: center right;
}
@media screen and (min-width: 48rem) {
.messages__content {
margin-inline-start: var(--messages__text-margin);
}
}
.messages__list {
margin: 0;
padding: 0;
@ -142,5 +122,5 @@
}
.messages__item + .messages__item {
margin-top: var(--space-s);
margin-block-start: var(--space-s);
}

102
core/themes/claro/css/components/messages.pcss.css
View File

@ -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);
}
[dir="rtl"] .messages {
padding-right: calc(var(--space-l) - 5px);
padding-left: var(--space-l);
border-right-width: var(--messages-border-width);
border-left-width: 0;
& a {
text-decoration: underline;
color: var(--messages__link-color);
&:hover {
color: var(--messages__link--hover-color);
}
}
& 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__header {
background: url(../../images/icons/42a877/checkmark.svg) no-repeat center left;
}
}
.messages--warning {
border-color: var(--messages--warning-color);
& .messages__header {
background: url(../../images/icons/e0ac00/exclamation.svg) no-repeat center left;
}
}
.messages__title {
margin: 0 0 0 var(--messages__text-margin); /* LTR */
margin-block: 0;
margin-inline: var(--messages__text-margin) 0;
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--status .messages__header {
background: url(../../images/icons/42a877/checkmark.svg) no-repeat center left; /* LTR */
}
[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__header {
display: flex;
align-items: center;
margin-bottom: var(--space-m);
margin-block-end: var(--space-m);
@nest [dir="rtl"] & {
background-position: center right;
}
}
@media screen and (min-width: 48rem) {
.messages__content {
margin-left: var(--messages__text-margin); /* LTR */
margin-inline-start: var(--messages__text-margin);
}
[dir="rtl"] .messages__content {
margin-right: var(--messages__text-margin);
margin-left: 0;
}
}
.messages a {
text-decoration: underline;
color: var(--messages__link-color);
}
.messages a:hover {
color: var(--messages__link--hover-color);
}
.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);
}