Skip to content
Snippets Groups Projects
Verified Commit b801b77d authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3303546 by gauravvvv, stanzin, aditya4478, santosh_verma, bramdriesen,... 

Issue #3303546 by gauravvvv, stanzin, aditya4478, santosh_verma, bramdriesen, finnsky, sakthivel m, smustgrave, bnjmnm, nod_: Refactor Claro's dialog stylesheet
parent edf709a3
Branches
Tags
11 merge requests!11197Issue #3506427 by eduardo morales alberti: Remove responsive_image.ajax from hook,!11131[10.4.x-only-DO-NOT-MERGE]: Issue ##2842525 Ajax attached to Views exposed filter form does not trigger callbacks,!10786Issue #3490579 by shalini_jha, mstrelan: Add void return to all views...,!5423Draft: Resolve #3329907 "Test2",!3878Removed unused condition head title for views,!3818Issue #2140179: $entity->original gets stale between updates,!3478Issue #3337882: Deleted menus are not removed from content type config,!2964Issue #2865710 : Dependencies from only one instance of a widget are used in display modes,!2062Issue #3246454: Add weekly granularity to views date sort,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!579Issue #2230909: Simple decimals fail to pass validation
Pipeline #373548 failed
Stage: 🪄 Lint
Stage: 🗜️ Test
Show whitespace changes
Inline Side-by-side
core/themes/claro/css/components/dialog.css
+ 32
− 54
View file @ b801b77d
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
.ui-dialog { .ui-dialog {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
left: 0; left: 0;
padding: 0; padding: 0;
border: 0; border: 0;
...@@ -21,19 +21,20 @@ ...@@ -21,19 +21,20 @@
box-shadow: var(--jui-dialog-box-shadow); box-shadow: var(--jui-dialog-box-shadow);
} }
.ui-dialog:focus {
outline: var(--jui-dialog--focus-outline);
box-shadow: var(--jui-dialog--focus-box-shadow);
}
/* Media queries are moved outside */
@media (forced-colors: active) { @media (forced-colors: active) {
.ui-dialog { .ui-dialog {
border: 1px solid transparent; border: 1px solid transparent;
} }
} }
.ui-dialog:focus {
outline: var(--jui-dialog--focus-outline);
box-shadow: var(--jui-dialog--focus-box-shadow);
}
@media all and (max-width: 48em) { @media all and (max-width: 48em) {
/* 768px */
.ui-dialog:not(.ui-dialog-off-canvas) { .ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%; min-width: 92%;
max-width: 92%; max-width: 92%;
...@@ -43,33 +44,29 @@ ...@@ -43,33 +44,29 @@
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */ padding-block: var(--space-m);
padding-inline: var(--space-l) var(--jui-dialog-close-button-reserved-space);
color: var(--jui-dialog-title-color); color: var(--jui-dialog-title-color);
border-top-left-radius: var(--jui-dialog-border-radius); border-start-end-radius: var(--jui-dialog-border-radius);
border-top-right-radius: var(--jui-dialog-border-radius); border-start-start-radius: var(--jui-dialog-border-radius);
background: var(--jui-dialog-title-bg-color); background: var(--jui-dialog-title-bg-color);
line-height: calc(var(--space-m) * 2); line-height: calc(var(--space-m) * 2);
} }
[dir="rtl"] .ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
padding-right: var(--space-l);
padding-left: var(--jui-dialog-close-button-reserved-space);
}
.ui-dialog .ui-dialog-title {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: var(--jui-dialog-title-font-size); font-size: var(--jui-dialog-title-font-size);
font-weight: bold; font-weight: bold;
} }
.ui-dialog .ui-dialog-titlebar-close { .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
position: absolute; position: absolute;
top: 50%; inset-block-start: 50%;
right: 0; /* LTR */ inset-inline-end: 0;
box-sizing: border-box; box-sizing: border-box;
width: var(--jui-dialog-close-button-size); inline-size: var(--jui-dialog-close-button-size);
height: var(--jui-dialog-close-button-size); block-size: var(--jui-dialog-close-button-size);
margin: 0 var(--space-l); margin-inline: var(--space-l);
padding: 0; padding: 0;
transition: all 0.1s; transition: all 0.1s;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -78,22 +75,17 @@ ...@@ -78,22 +75,17 @@
background: none; background: none;
} }
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close { .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
right: auto;
left: 0;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
border-color: var(--color-white); border-color: var(--color-white);
} }
.ui-dialog .ui-dialog-titlebar-close:focus { .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:focus {
border-color: var(--color-focus); border-color: var(--color-focus);
outline: var(--jui-dialog--focus-outline); outline: var(--jui-dialog--focus-outline);
box-shadow: none; box-shadow: none;
} }
.ui-dialog .ui-icon.ui-icon-closethick { .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
...@@ -102,7 +94,7 @@ ...@@ -102,7 +94,7 @@
} }
@media (forced-colors: active) { @media (forced-colors: active) {
.ui-dialog .ui-icon.ui-icon-closethick { .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='buttonText' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%; background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='buttonText' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
} }
} }
...@@ -114,6 +106,12 @@ ...@@ -114,6 +106,12 @@
background: var(--color-white); background: var(--color-white);
} }
.ui-dialog > .ui-dialog-content .form-actions,
.ui-dialog > .ui-dialog-content .field-actions {
margin: 0;
padding: 0;
}
.ui-dialog > .ui-dialog-buttonpane { .ui-dialog > .ui-dialog-buttonpane {
color: var(--color-text); color: var(--color-text);
border-bottom-right-radius: var(--jui-dialog-border-radius); border-bottom-right-radius: var(--jui-dialog-border-radius);
...@@ -121,7 +119,7 @@ ...@@ -121,7 +119,7 @@
background: var(--color-gray-050); background: var(--color-gray-050);
} }
.ui-dialog-buttonpane .ui-dialog-buttonset { .ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset {
display: flex; display: flex;
gap: var(--space-s); gap: var(--space-s);
justify-content: flex-end; justify-content: flex-end;
...@@ -129,38 +127,18 @@ ...@@ -129,38 +127,18 @@
margin-inline-end: var(--space-l); margin-inline-end: var(--space-l);
} }
.ui-dialog-buttonpane .ui-dialog-buttonset > * { .ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset > * {
margin: 0; margin: 0;
} }
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { .ui-dialog > .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
padding: 0;
}
.ui-dialog .ui-dialog-content {
position: static;
}
/* Form action buttons are moved in dialogs. Remove empty space. */
.ui-dialog .ui-dialog-content .form-actions,
.ui-dialog .ui-dialog-content .field-actions {
margin: 0;
padding: 0; padding: 0;
} }
/**
* Off-canvas styles.
*/
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content { .ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
background: none; background: none;
} }
#drupal-off-canvas .form-type--boolean {
margin-left: 0;
}
#drupal-off-canvas .form-item .form-item__description { #drupal-off-canvas .form-item .form-item__description {
color: var(--color-gray-050); color: var(--color-gray-050);
font-size: 0.75rem; font-size: 0.75rem;
......
core/themes/claro/css/components/dialog.pcss.css
+ 104
− 116
View file @ b801b77d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.ui-dialog { .ui-dialog {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
left: 0; left: 0;
padding: 0; padding: 0;
border: 0; border: 0;
...@@ -13,141 +13,129 @@ ...@@ -13,141 +13,129 @@
background: transparent; background: transparent;
box-shadow: var(--jui-dialog-box-shadow); box-shadow: var(--jui-dialog-box-shadow);
@media (forced-colors: active) { &:focus {
border: 1px solid transparent; outline: var(--jui-dialog--focus-outline);
box-shadow: var(--jui-dialog--focus-box-shadow);
} }
/* Media queries are moved outside */
} }
.ui-dialog:focus { @media (forced-colors: active) {
outline: var(--jui-dialog--focus-outline); .ui-dialog {
box-shadow: var(--jui-dialog--focus-box-shadow); border: 1px solid transparent;
}
} }
@media all and (max-width: 48em) { @media all and (max-width: 48em) {
/* 768px */
.ui-dialog:not(.ui-dialog-off-canvas) { .ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%; min-width: 92%;
max-width: 92%; max-width: 92%;
} }
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog {
.ui-dialog-titlebar {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */ padding-block: var(--space-m);
padding-inline: var(--space-l) var(--jui-dialog-close-button-reserved-space);
color: var(--jui-dialog-title-color); color: var(--jui-dialog-title-color);
border-top-left-radius: var(--jui-dialog-border-radius); border-start-end-radius: var(--jui-dialog-border-radius);
border-top-right-radius: var(--jui-dialog-border-radius); border-start-start-radius: var(--jui-dialog-border-radius);
background: var(--jui-dialog-title-bg-color); background: var(--jui-dialog-title-bg-color);
line-height: calc(var(--space-m) * 2); line-height: calc(var(--space-m) * 2);
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
padding-right: var(--space-l);
padding-left: var(--jui-dialog-close-button-reserved-space);
}
.ui-dialog .ui-dialog-title { .ui-dialog-title {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: var(--jui-dialog-title-font-size); font-size: var(--jui-dialog-title-font-size);
font-weight: bold; font-weight: bold;
} }
.ui-dialog .ui-dialog-titlebar-close { .ui-dialog-titlebar-close {
position: absolute; position: absolute;
top: 50%; inset-block-start: 50%;
right: 0; /* LTR */ inset-inline-end: 0;
box-sizing: border-box; box-sizing: border-box;
width: var(--jui-dialog-close-button-size); inline-size: var(--jui-dialog-close-button-size);
height: var(--jui-dialog-close-button-size); block-size: var(--jui-dialog-close-button-size);
margin: 0 var(--space-l); margin-inline: var(--space-l);
padding: 0; padding: 0;
transition: all 0.1s; transition: all 0.1s;
transform: translateY(-50%); transform: translateY(-50%);
border: 2px solid transparent; border: 2px solid transparent;
border-radius: var(--jui-dialog-close-button-border-radius); border-radius: var(--jui-dialog-close-button-border-radius);
background: none; background: none;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
right: auto;
left: 0;
}
.ui-dialog .ui-dialog-titlebar-close:hover { &:hover {
border-color: var(--color-white); border-color: var(--color-white);
} }
.ui-dialog .ui-dialog-titlebar-close:focus { &:focus {
border-color: var(--color-focus); border-color: var(--color-focus);
outline: var(--jui-dialog--focus-outline); outline: var(--jui-dialog--focus-outline);
box-shadow: none; box-shadow: none;
} }
.ui-dialog .ui-icon.ui-icon-closethick { .ui-icon.ui-icon-closethick {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%; background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
}
@media (forced-colors: active) { @media (forced-colors: active) {
.ui-dialog .ui-icon.ui-icon-closethick {
background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%; background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%;
} }
} }
}
}
.ui-dialog > .ui-dialog-content { > .ui-dialog-content {
overflow: auto; overflow: auto;
padding: var(--space-m) var(--space-l); padding: var(--space-m) var(--space-l);
color: var(--color-text); color: var(--color-text);
background: var(--color-white); background: var(--color-white);
.form-actions,
.field-actions {
margin: 0;
padding: 0;
}
} }
.ui-dialog > .ui-dialog-buttonpane { > .ui-dialog-buttonpane {
color: var(--color-text); color: var(--color-text);
border-bottom-right-radius: var(--jui-dialog-border-radius); border-bottom-right-radius: var(--jui-dialog-border-radius);
border-bottom-left-radius: var(--jui-dialog-border-radius); border-bottom-left-radius: var(--jui-dialog-border-radius);
background: var(--color-gray-050); background: var(--color-gray-050);
}
.ui-dialog-buttonpane .ui-dialog-buttonset { .ui-dialog-buttonset {
display: flex; display: flex;
gap: var(--space-s); gap: var(--space-s);
justify-content: flex-end; justify-content: flex-end;
margin-block: var(--space-m); margin-block: var(--space-m);
margin-inline-end: var(--space-l); margin-inline-end: var(--space-l);
& > * { & > * {
margin: 0; margin: 0;
} }
} }
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { .ui-button-text-only .ui-button-text {
padding: 0; padding: 0;
} }
.ui-dialog .ui-dialog-content {
position: static;
}
/* Form action buttons are moved in dialogs. Remove empty space. */
.ui-dialog .ui-dialog-content .form-actions,
.ui-dialog .ui-dialog-content .field-actions {
margin: 0;
padding: 0;
} }
/** &.ui-dialog-off-canvas {
* Off-canvas styles. .ui-widget-content.ui-dialog-content {
*/
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
background: none; background: none;
} }
}
}
#drupal-off-canvas { #drupal-off-canvas {
& .form-type--boolean { .form-item .form-item__description {
margin-left: 0;
}
& .form-item .form-item__description {
color: var(--color-gray-050); color: var(--color-gray-050);
font-size: 0.75rem; font-size: 0.75rem;
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment