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

core/themes/claro/css/components/dialog.css

+32 −54
Original line number Diff line number Diff line
@@ -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
Original line number Diff line number Diff line
@@ -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 {

.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-title {

      -webkit-font-smoothing: antialiased;

      font-size: var(--jui-dialog-title-font-size);

      font-weight: bold;

    }



.ui-dialog .ui-dialog-titlebar-close {

    .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%);

      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 {

      &:hover {

        border-color: var(--color-white);

      }



.ui-dialog .ui-dialog-titlebar-close:focus {

      &:focus {

        border-color: var(--color-focus);

        outline: var(--jui-dialog--focus-outline);

        box-shadow: none;

      }



.ui-dialog .ui-icon.ui-icon-closethick {

      .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-content {

  > .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-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 {

    .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 .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {

    .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;

  }



/**

 * Off-canvas styles.

 */

.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {

  &.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;

  }