Verified Commit 722c7c63 authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3303547 by Gauravvvv, starshaped, kostyashupenko, _utsavsharma,... 

Issue #3303547 by Gauravvvv, starshaped, kostyashupenko, _utsavsharma, Aditya4478, andy-blum, shivam-kumar, Sakthivel M, smustgrave, nod_, sasanikolic: Refactor Claro's dropbutton stylesheet
parent da8a3360

core/themes/claro/css/components/dropbutton.css

+12 −27
Original line number Diff line number Diff line
@@ -46,13 +46,8 @@ 


.form-actions .dropbutton-wrapper,

.field-actions .dropbutton-wrapper {

  margin: var(--space-xs) var(--space-m) var(--space-xs) 0;

}



[dir="rtl"] .form-actions .dropbutton-wrapper,

[dir="rtl"] .field-actions .dropbutton-wrapper {

  margin-right: 0;

  margin-left: var(--space-m);

  margin-block: var(--space-xs);

  margin-inline: var(--space-m) 0;

}



.dropbutton-widget {
@@ -71,17 +66,10 @@ 
.dropbutton {

  display: block;

  overflow: visible;

  margin: 0;

  list-style: none;

}



[dir="rtl"] .dropbutton {

  margin: 0;

}



.dropbutton {

  min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */

  height: var(--dropbutton-toggle-size);

  margin: 0;

  list-style: none;

}



.dropbutton-widget {
@@ -108,7 +96,7 @@ 
  white-space: nowrap;

}



[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type {

[dir="rtl"] :is(.dropbutton--multiple .dropbutton__item:first-of-type) {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));

}
@@ -120,7 +108,7 @@ 
  white-space: nowrap;

}



[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

[dir="rtl"] :is(.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type) {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));

}
@@ -130,7 +118,7 @@ 
  white-space: nowrap;

}



[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

[dir="rtl"] :is(.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type) {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));

}
@@ -195,7 +183,7 @@ 
  transform: translate(50%, -50%) rotate(180deg);

}



[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {

[dir="rtl"] :is(.dropbutton-wrapper.open .dropbutton__toggle::before) {

  transform: translate(50%, -50%) rotate(-180deg);

}
@@ -225,11 +213,10 @@ 
    height: 0.5625rem;

    margin-top: calc(0.5625rem / (2 * -1.41429));

    transform: translate(50%, -50%) rotate(135deg); /* LTR */

    border: 0.125rem solid;

    border-width: 0.125rem 0.125rem 0 0;

    border-style: solid;

    background: none;

  }



  .dropbutton-wrapper.open .dropbutton__toggle::before {

    margin-top: calc(0.5625rem / (2 * 1.41429));

    transform: translate(50%, -50%) rotate(315deg);
@@ -279,15 +266,13 @@ 
}



.dropbutton--multiple .dropbutton__item:first-of-type > * {

  padding-right: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));

  padding-left: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));

  padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));

}



/* Variants */



.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {

  padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));

  padding-bottom: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));

  padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));

  font-size: var(--dropbutton-small-font-size);

  line-height: var(--dropbutton-small-line-height);

}
@@ -370,7 +355,7 @@ 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);

}



.dropbutton__item:first-of-type ~ .dropbutton__item ~ .dropbutton__item {

:is(.dropbutton__item:first-of-type ~ .dropbutton__item) ~ .dropbutton__item {

  border-top: 0;

}

core/themes/claro/css/components/dropbutton.pcss.css

+143 −155
Original line number Diff line number Diff line
@@ -39,22 +39,17 @@ 


.form-actions .dropbutton-wrapper,

.field-actions .dropbutton-wrapper {

  margin: var(--space-xs) var(--space-m) var(--space-xs) 0;

}

[dir="rtl"] .form-actions .dropbutton-wrapper,

[dir="rtl"] .field-actions .dropbutton-wrapper {

  margin-right: 0;

  margin-left: var(--space-m);

  margin-block: var(--space-xs);

  margin-inline: var(--space-m) 0;

}



.dropbutton-widget {

  position: relative;

  flex: 1 1 auto;

}



.js .dropbutton-wrapper.open .dropbutton-widget {

  .js .dropbutton-wrapper.open & {

    z-index: var(--dropbutton-widget-z-index);

  }

}



/**

 * Dropbutton list.
@@ -62,16 +57,10 @@ 
.dropbutton {

  display: block;

  overflow: visible;

  margin: 0;

  list-style: none;

}

[dir="rtl"] .dropbutton {

  margin: 0;

}



.dropbutton {

  min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */

  height: var(--dropbutton-toggle-size);

  margin: 0;

  list-style: none;

}



.dropbutton-widget {
@@ -94,30 +83,30 @@ 
.dropbutton--multiple .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

  white-space: nowrap;

}

[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type {

  [dir="rtl"] & {

    margin-right: 0;

    margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));

  }

}



/* First dropbutton list item variants */

.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

  white-space: nowrap;

}

[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

  [dir="rtl"] & {

    margin-right: 0;

    margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));

  }

}



.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

  white-space: nowrap;

}

[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

  [dir="rtl"] & {

    margin-right: 0;

    margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));

  }

}



/**

 * Dropbutton toggler.
@@ -136,14 +125,12 @@ 
  background: var(--button-bg-color);

  font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */

  appearance: none;

}

[dir="rtl"] .dropbutton__toggle {

  [dir="rtl"] & {

    right: auto;

    left: 0;

    border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);

  }



.dropbutton__toggle::before {

  &::before {

    position: absolute;

    top: 50%;

    right: 50%;
@@ -156,27 +143,27 @@ 
  }



  /* Toggler states. */

.dropbutton__toggle:hover {

  &:hover {

    color: var(--button-fg-color);

    background-color: var(--button--hover-bg-color);

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);

  }



.dropbutton__toggle:focus {

  &:focus {

    z-index: 2;

  }



.dropbutton__toggle:active {

  &:active {

    color: var(--button-fg-color);

    background-color: var(--button--active-bg-color);

  }

}





.dropbutton-wrapper.open .dropbutton__toggle::before {

  transform: translate(50%, -50%) rotate(180deg);

}

[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {

  [dir="rtl"] & {

    transform: translate(50%, -50%) rotate(-180deg);

  }

}



/* Toggler variants */

.no-touchevents .dropbutton--small .dropbutton__toggle {
@@ -202,18 +189,17 @@ 
    height: 0.5625rem;

    margin-top: calc(0.5625rem / (2 * -1.41429));

    transform: translate(50%, -50%) rotate(135deg); /* LTR */

    border: 0.125rem solid;

    border-width: 0.125rem 0.125rem 0 0;

    border-style: solid;

    background: none;

  }



  .dropbutton-wrapper.open .dropbutton__toggle::before {

    .dropbutton-wrapper.open & {

      margin-top: calc(0.5625rem / (2 * 1.41429));

      transform: translate(50%, -50%) rotate(315deg);

    }

  [dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {

    [dir="rtl"] .dropbutton-wrapper.open & {

      transform: translate(50%, -50%) rotate(-45deg);

    }

  }



  /* Variants */
@@ -234,7 +220,8 @@ 
 *

 * Duplicates base button styles.

 */

.dropbutton__item:first-of-type > * {

.dropbutton__item:first-of-type {

  & > * {

    display: inline-block;

    margin: 0;

    padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
@@ -251,63 +238,63 @@ 
    appearance: none;

    -webkit-font-smoothing: antialiased;

  }

.dropbutton--multiple .dropbutton__item:first-of-type > * {

  padding-right: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));

  padding-left: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));



  .dropbutton--multiple & > * {

    padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));

  }



  /* Variants */

.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {

  padding-top: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));

  padding-bottom: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));

  .no-touchevents .dropbutton--small & > * {

    padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));

    font-size: var(--dropbutton-small-font-size);

    line-height: var(--dropbutton-small-line-height);

  }



.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {

  .no-touchevents .dropbutton--extrasmall & > * {

    padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));

    padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));

    font-size: var(--dropbutton-extrasmall-font-size);

    line-height: var(--dropbutton-extrasmall-line-height);

  }



.dropbutton__item:first-of-type > *:hover,

.dropbutton__item:first-of-type > .button:hover {

  & > *:hover,

  & > .button:hover {

    text-decoration: none;

    color: var(--button-fg-color);

    background-color: var(--button--hover-bg-color);

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);

  }



.dropbutton__item:first-of-type > *:focus:hover,

.dropbutton__item:first-of-type > .button:focus:hover {

  & > *:focus:hover,

  & > .button:focus:hover {

    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);

  }



.dropbutton__item:first-of-type > *:focus {

  & > *:focus {

    text-decoration: none;

  }



.dropbutton__item:first-of-type > *:active {

  & > *:active {

    color: var(--button-fg-color);

    background-color: var(--button--active-bg-color);

  }



.dropbutton--multiple .dropbutton__item:first-of-type > * {

  .dropbutton--multiple & > * {

    position: relative;

    z-index: 3;

  }



.dropbutton--multiple .dropbutton__item:first-of-type > *:focus {

  .dropbutton--multiple & > *:focus {

    z-index: 2;

  }



.dropbutton--multiple .dropbutton__item:first-of-type > * {

  .dropbutton--multiple & > * {

    border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */

  }

[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type > * {

  [dir="rtl"] .dropbutton--multiple & > * {

    border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;

  }

}



.dropbutton > .dropbutton__item > a,

.dropbutton > .dropbutton__item > .button {
@@ -333,11 +320,10 @@ 
  border: var(--dropbutton-border-size) solid var(--color-gray-200);

  border-bottom: 0;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);

}



.dropbutton__item:first-of-type ~ .dropbutton__item ~ .dropbutton__item {

  & ~ .dropbutton__item {

    border-top: 0;

  }

}



.dropbutton__item ~ .dropbutton__item:last-child {

  border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
@@ -390,21 +376,23 @@ 
}



/* States. */

.dropbutton__item > *:focus {

.dropbutton__item{

  & > *:focus {

    position: relative;

    z-index: 3;

  }



.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {

  &:first-of-type ~ & > *:hover {

    color: var(--color-text);

    background: var(--color-gray-050);

  }



.dropbutton__item > .button:not(:focus) {

  & > .button:not(:focus) {

    box-shadow: none;

  }



.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {

  &:first-of-type ~ & > *:focus {

    border-color: var(--color-focus) !important; /* 1 */

    box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus);

  }

}