Skip to content
Snippets Groups Projects
Verified Commit 431532d6 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

(cherry picked from commit 903f73fb)
parent c4dfbbe2
No related branches found
No related tags found
1 merge request!122353526426-warning-for-missing
Pipeline #373545 failed
Stage: 🪄 Lint
Stage: 🗜️ Test
Hide whitespace changes
Inline Side-by-side
core/themes/claro/css/components/dialog.css
+ 32
− 54
View file @ 431532d6
......@@ -12,7 +12,7 @@
.ui-dialog {
position: absolute;
top: 0;
inset-block-start: 0;
left: 0;
padding: 0;
border: 0;
......@@ -21,19 +21,20 @@
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) {
.ui-dialog {
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) {
/* 768px */
.ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%;
max-width: 92%;
......@@ -43,33 +44,29 @@
.ui-dialog .ui-dialog-titlebar {
position: relative;
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);
border-top-left-radius: var(--jui-dialog-border-radius);
border-top-right-radius: var(--jui-dialog-border-radius);
border-start-end-radius: var(--jui-dialog-border-radius);
border-start-start-radius: var(--jui-dialog-border-radius);
background: var(--jui-dialog-title-bg-color);
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 .ui-dialog-titlebar .ui-dialog-title {
-webkit-font-smoothing: antialiased;
font-size: var(--jui-dialog-title-font-size);
font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close {
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
position: absolute;
top: 50%;
right: 0; /* LTR */
inset-block-start: 50%;
inset-inline-end: 0;
box-sizing: border-box;
width: var(--jui-dialog-close-button-size);
height: var(--jui-dialog-close-button-size);
margin: 0 var(--space-l);
inline-size: var(--jui-dialog-close-button-size);
block-size: var(--jui-dialog-close-button-size);
margin-inline: var(--space-l);
padding: 0;
transition: all 0.1s;
transform: translateY(-50%);
......@@ -78,22 +75,17 @@
background: none;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
right: auto;
left: 0;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
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);
outline: var(--jui-dialog--focus-outline);
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%;
height: 100%;
margin: 0;
......@@ -102,7 +94,7 @@
}
@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%;
}
}
......@@ -114,6 +106,12 @@
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 {
color: var(--color-text);
border-bottom-right-radius: var(--jui-dialog-border-radius);
......@@ -121,7 +119,7 @@
background: var(--color-gray-050);
}
.ui-dialog-buttonpane .ui-dialog-buttonset {
.ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset {
display: flex;
gap: var(--space-s);
justify-content: flex-end;
......@@ -129,38 +127,18 @@
margin-inline-end: var(--space-l);
}
.ui-dialog-buttonpane .ui-dialog-buttonset > * {
.ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset > * {
margin: 0;
}
.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;
.ui-dialog > .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
padding: 0;
}
/**
* Off-canvas styles.
*/
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
background: none;
}
#drupal-off-canvas .form-type--boolean {
margin-left: 0;
}
#drupal-off-canvas .form-item .form-item__description {
color: var(--color-gray-050);
font-size: 0.75rem;
......
core/themes/claro/css/components/dialog.pcss.css
+ 104
− 116
View file @ 431532d6
......@@ -5,7 +5,7 @@
.ui-dialog {
position: absolute;
top: 0;
inset-block-start: 0;
left: 0;
padding: 0;
border: 0;
......@@ -13,141 +13,129 @@
background: transparent;
box-shadow: var(--jui-dialog-box-shadow);
@media (forced-colors: active) {
border: 1px solid transparent;
&:focus {
outline: var(--jui-dialog--focus-outline);
box-shadow: var(--jui-dialog--focus-box-shadow);
}
/* Media queries are moved outside */
}
.ui-dialog:focus {
outline: var(--jui-dialog--focus-outline);
box-shadow: var(--jui-dialog--focus-box-shadow);
@media (forced-colors: active) {
.ui-dialog {
border: 1px solid transparent;
}
}
@media all and (max-width: 48em) {
/* 768px */
.ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%;
max-width: 92%;
}
}
.ui-dialog .ui-dialog-titlebar {
position: relative;
box-sizing: border-box;
padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
color: var(--jui-dialog-title-color);
border-top-left-radius: var(--jui-dialog-border-radius);
border-top-right-radius: var(--jui-dialog-border-radius);
background: var(--jui-dialog-title-bg-color);
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 {
-webkit-font-smoothing: antialiased;
font-size: var(--jui-dialog-title-font-size);
font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
top: 50%;
right: 0; /* LTR */
box-sizing: border-box;
width: var(--jui-dialog-close-button-size);
height: var(--jui-dialog-close-button-size);
margin: 0 var(--space-l);
padding: 0;
transition: all 0.1s;
transform: translateY(-50%);
border: 2px solid transparent;
border-radius: var(--jui-dialog-close-button-border-radius);
background: none;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
right: auto;
left: 0;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
border-color: var(--color-white);
}
.ui-dialog .ui-dialog-titlebar-close:focus {
border-color: var(--color-focus);
outline: var(--jui-dialog--focus-outline);
box-shadow: none;
}
.ui-dialog .ui-icon.ui-icon-closethick {
width: 100%;
height: 100%;
margin: 0;
transform: translate(-50%, -50%);
background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
}
@media (forced-colors: active) {
.ui-dialog .ui-icon.ui-icon-closethick {
background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%;
.ui-dialog {
.ui-dialog-titlebar {
position: relative;
box-sizing: border-box;
padding-block: var(--space-m);
padding-inline: var(--space-l) var(--jui-dialog-close-button-reserved-space);
color: var(--jui-dialog-title-color);
border-start-end-radius: var(--jui-dialog-border-radius);
border-start-start-radius: var(--jui-dialog-border-radius);
background: var(--jui-dialog-title-bg-color);
line-height: calc(var(--space-m) * 2);
.ui-dialog-title {
-webkit-font-smoothing: antialiased;
font-size: var(--jui-dialog-title-font-size);
font-weight: bold;
}
.ui-dialog-titlebar-close {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 0;
box-sizing: border-box;
inline-size: var(--jui-dialog-close-button-size);
block-size: var(--jui-dialog-close-button-size);
margin-inline: var(--space-l);
padding: 0;
transition: all 0.1s;
transform: translateY(-50%);
border: 2px solid transparent;
border-radius: var(--jui-dialog-close-button-border-radius);
background: none;
&:hover {
border-color: var(--color-white);
}
&:focus {
border-color: var(--color-focus);
outline: var(--jui-dialog--focus-outline);
box-shadow: none;
}
.ui-icon.ui-icon-closethick {
width: 100%;
height: 100%;
margin: 0;
transform: translate(-50%, -50%);
background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
@media (forced-colors: active) {
background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%;
}
}
}
}
}
.ui-dialog > .ui-dialog-content {
overflow: auto;
padding: var(--space-m) var(--space-l);
color: var(--color-text);
background: var(--color-white);
}
.ui-dialog > .ui-dialog-buttonpane {
color: var(--color-text);
border-bottom-right-radius: var(--jui-dialog-border-radius);
border-bottom-left-radius: var(--jui-dialog-border-radius);
background: var(--color-gray-050);
}
.ui-dialog-buttonpane .ui-dialog-buttonset {
display: flex;
gap: var(--space-s);
justify-content: flex-end;
margin-block: var(--space-m);
margin-inline-end: var(--space-l);
& > * {
margin: 0;
> .ui-dialog-content {
overflow: auto;
padding: var(--space-m) var(--space-l);
color: var(--color-text);
background: var(--color-white);
.form-actions,
.field-actions {
margin: 0;
padding: 0;
}
}
}
.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;
}
> .ui-dialog-buttonpane {
color: var(--color-text);
border-bottom-right-radius: var(--jui-dialog-border-radius);
border-bottom-left-radius: var(--jui-dialog-border-radius);
background: var(--color-gray-050);
.ui-dialog-buttonset {
display: flex;
gap: var(--space-s);
justify-content: flex-end;
margin-block: var(--space-m);
margin-inline-end: var(--space-l);
& > * {
margin: 0;
}
}
.ui-button-text-only .ui-button-text {
padding: 0;
}
}
/**
* Off-canvas styles.
*/
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
background: none;
&.ui-dialog-off-canvas {
.ui-widget-content.ui-dialog-content {
background: none;
}
}
}
#drupal-off-canvas {
& .form-type--boolean {
margin-left: 0;
}
& .form-item .form-item__description {
.form-item .form-item__description {
color: var(--color-gray-050);
font-size: 0.75rem;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment