Skip to content
Snippets Groups Projects
Verified Commit 8c1d5599 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 ed1baed5
No related branches found
No related tags found
3 merge requests!11958Issue #3490507 by alexpott, smustgrave: Fix bogus mocking in...,!11769Issue #3517987: Add option to contextual filters to encode slashes in query parameter.,!11185Issue #3477324 by andypost, alexpott: Fix usage of str_getcsv() and fgetcsv() for PHP 8.4
Pipeline #373544 passed with warnings
Stage: 🪄 Lint
Stage: 🗜️ Test
Pipeline: drupal

#373577

    Pipeline: drupal

    #373564

      Pipeline: drupal

      #373554

        +1
        Hide whitespace changes
        Inline Side-by-side
        core/themes/claro/css/components/dialog.css
        + 32
        − 54
        View file @ 8c1d5599
        ......@@ -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 @ 8c1d5599
        ......@@ -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