Verified Commit 29107b55 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3303551 by Gauravvvv, Aditya4478, Harish1688, Stanzin, smustgrave:... 

Issue #3303551 by Gauravvvv, Aditya4478, Harish1688, Stanzin, smustgrave: Refactor Claro's form--select stylesheet
parent e5ebeb3b

core/themes/claro/css/components/form--select.css

+15 −29
Original line number Diff line number Diff line
@@ -11,40 +11,16 @@ 
 */



.form-element--type-select {

  padding-right: calc(2rem - var(--input-border-size));

  padding-inline-end: calc(2rem - var(--input-border-size));

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");

  background-repeat: no-repeat;

  background-position: 100% 50%;

  background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */

}



[dir="rtl"] .form-element--type-select {

  padding-right: calc(1rem - var(--input-border-size));

  padding-left: calc(2rem - var(--input-border-size));

  background-position: 0 50%;

}



@media (forced-colors: active) {

  [dir="rtl"] .form-element--type-select {

    padding-left: var(--input-padding-horizontal);

  }

}



.no-touchevents .form-element--type-select.form-element--extrasmall,

.no-touchevents .form-element--type-select[name$="][_weight]"] {

  padding-right: calc(1.5rem - var(--input-border-size));

  background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */

}



[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,

[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {

  padding-right: calc(0.5rem - var(--input-border-size));

  padding-left: calc(1.5rem - var(--input-border-size));

}



  /**

   * Select states.

   */

}



.form-element--type-select:focus {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23003ecc'/%3e%3c/svg%3e");
@@ -54,11 +30,21 @@ 
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%238e929c'/%3e%3c/svg%3e");

}



[dir="rtl"] .form-element--type-select {

  background-position: 0 50%;

}



.no-touchevents .form-element--type-select.form-element--extrasmall,

.no-touchevents .form-element--type-select[name$="][_weight]"] {

  padding-inline-end: calc(1.5rem - var(--input-border-size));

  background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */

}



@media (forced-colors: active) {

  .form-element--type-select,

  .form-element--type-select:focus,

  .form-element--type-select[disabled] {

    padding-right: var(--input-padding-horizontal);

    padding-inline-end: var(--input-padding-horizontal);

    background-image: none;

    -webkit-appearance: revert;

    appearance: revert; /* Revert <select> appearance value for modern browsers. */

core/themes/claro/css/components/form--select.pcss.css

+20 −28
Original line number Diff line number Diff line
@@ -4,48 +4,40 @@ 
 */



.form-element--type-select {

  padding-right: calc(2rem - var(--input-border-size));

  padding-inline-end: calc(2rem - var(--input-border-size));

  background-image: url(../../images/icons/545560/chevron-down.svg);

  background-repeat: no-repeat;

  background-position: 100% 50%;

  background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */

}

[dir="rtl"] .form-element--type-select {

  padding-right: calc(1rem - var(--input-border-size));

  padding-left: calc(2rem - var(--input-border-size));

  background-position: 0 50%;



  @media (forced-colors: active) {

    padding-left: var(--input-padding-horizontal);

  }

}



.no-touchevents .form-element--type-select.form-element--extrasmall,

.no-touchevents .form-element--type-select[name$="][_weight]"] {

  padding-right: calc(1.5rem - var(--input-border-size));

  background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */

}

[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,

[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {

  padding-right: calc(0.5rem - var(--input-border-size));

  padding-left: calc(1.5rem - var(--input-border-size));

}



  /**

   * Select states.

   */

.form-element--type-select:focus {

  &:focus {

    background-image: url(../../images/icons/003ecc/chevron-down.svg);

  }

.form-element--type-select[disabled] {

  &[disabled] {

    background-image: url(../../images/icons/8e929c/chevron-down.svg);

  }



  @nest [dir="rtl"] & {

    background-position: 0 50%;

  }



  @nest .no-touchevents & {

    &.form-element--extrasmall,

    &[name$="][_weight]"] {

      padding-inline-end: calc(1.5rem - var(--input-border-size));

      background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */

    }

  }

}



@media (forced-colors: active) {

  .form-element--type-select,

  .form-element--type-select:focus,

  .form-element--type-select[disabled] {

    padding-right: var(--input-padding-horizontal);

    padding-inline-end: var(--input-padding-horizontal);

    background-image: none;

    appearance: revert; /* Revert <select> appearance value for modern browsers. */

  }