Verified Commit d256cf4a authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3303549 by Aditya4478, Gauravvvv, Stanzin, smustgrave: Refactor Claro's... 

Issue #3303549 by Aditya4478, Gauravvvv, Stanzin, smustgrave: Refactor Claro's form--checkbox-radio stylesheet
parent e8568a29

core/themes/claro/css/components/form--checkbox-radio.css

+32 −46
Original line number Diff line number Diff line
@@ -15,47 +15,34 @@ 
 */



.form-type--boolean {

  margin-left: var(--input--label-spacing); /* LTR */

  margin-inline-start: var(--input--label-spacing);

  line-height: var(--space-l);

}



[dir="rtl"] .form-type--boolean {

  margin-right: var(--input--label-spacing);

  margin-left: 0;

}



/**

 * Radio and checkbox items that are the child of a form item.

 */



.form-type--boolean .form-boolean {

  position: relative;

  top: calc(var(--space-l) / 2);

  inset-block-start: calc(var(--space-l) / 2);

  float: left; /* LTR */

  margin-left: calc(var(--input--label-spacing) * -1); /* LTR */

  margin-inline-start: calc(var(--input--label-spacing) * -1);

  transform: translateY(-50%);

}



[dir="rtl"] .form-type--boolean .form-boolean {

[dir="rtl"] :is(.form-type--boolean .form-boolean) {

  float: right;

  margin-right: calc(var(--input--label-spacing) * -1);

  margin-left: 0;

}



.form-type--boolean.form-item--no-label {

  margin-left: 0;

}



[dir="rtl"] .form-type--boolean.form-item--no-label {

  margin-right: 0;

  margin-inline-start: 0;

}



.form-type--boolean.form-item--no-label .form-boolean,

[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {

.form-type--boolean.form-item--no-label .form-boolean {

  position: static;

  float: none;

  margin-right: 0;

  margin-left: 0;

  margin-inline: 0;

  transform: none;

}
@@ -65,8 +52,7 @@ 
 */



.form-boolean-group .form-type--boolean {

  margin-top: 0.4em;

  margin-bottom: 0.4em;

  margin-block: 0.4em;

}



/**
@@ -88,19 +74,6 @@ 
  appearance: none;

}



@media (forced-colors: active) {

  .form-boolean {

    -webkit-appearance: auto;

    appearance: auto;

  }

}



.form-boolean--type-radio {

  width: 1.1875rem;

  height: 1.1875rem;

  border-radius: 1.1875rem;

}



.form-boolean:active,

.form-boolean:hover {

  border-color: var(--input-fg-color);
@@ -112,16 +85,17 @@ 
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);

}



.form-boolean--type-checkbox:checked {

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

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

  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");

@media (forced-colors: active) {

  .form-boolean {

    -webkit-appearance: auto;

    appearance: auto;

  }

}



.form-boolean--type-checkbox:checked:active,

.form-boolean--type-checkbox:checked:hover {

  border-color: var(--input-fg-color);

  background-color: var(--input-fg-color);

.form-boolean--type-radio {

  width: 1.1875rem;

  height: 1.1875rem;

  border-radius: 1.1875rem;

}



.form-boolean--type-radio:checked {
@@ -134,6 +108,11 @@ 
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);

}



.form-boolean--type-radio:checked:focus:active,

.form-boolean--type-radio:checked:focus:hover {

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

}



.form-boolean--type-radio:checked:active,

.form-boolean--type-radio:checked:hover {

  border-color: var(--input-fg-color);
@@ -141,9 +120,16 @@ 
  box-shadow: inset 0 0 0 1px var(--input-fg-color);

}



.form-boolean--type-radio:checked:focus:active,

.form-boolean--type-radio:checked:focus:hover {

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

.form-boolean--type-checkbox:checked {

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

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

  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");

}



.form-boolean--type-checkbox:checked:active,

.form-boolean--type-checkbox:checked:hover {

  border-color: var(--input-fg-color);

  background-color: var(--input-fg-color);

}



/**

core/themes/claro/css/components/form--checkbox-radio.pcss.css

+64 −68
Original line number Diff line number Diff line
@@ -7,42 +7,33 @@ 
 * Form item modifiers.

 */

.form-type--boolean {

  margin-left: var(--input--label-spacing); /* LTR */

  margin-inline-start: var(--input--label-spacing);

  line-height: var(--space-l);

}

[dir="rtl"] .form-type--boolean {

  margin-right: var(--input--label-spacing);

  margin-left: 0;

}



/**

 * Radio and checkbox items that are the child of a form item.

 */

.form-type--boolean .form-boolean {

  position: relative;

  top: calc(var(--space-l) / 2);

  inset-block-start: calc(var(--space-l) / 2);

  float: left; /* LTR */

  margin-left: calc(var(--input--label-spacing) * -1); /* LTR */

  margin-inline-start: calc(var(--input--label-spacing) * -1);

  transform: translateY(-50%);

}

[dir="rtl"] .form-type--boolean .form-boolean {



  @nest [dir="rtl"] & {

    float: right;

  margin-right: calc(var(--input--label-spacing) * -1);

  margin-left: 0;

  }

}



.form-type--boolean.form-item--no-label {

  margin-left: 0;

}

[dir="rtl"] .form-type--boolean.form-item--no-label {

  margin-right: 0;

  margin-inline-start: 0;

}

.form-type--boolean.form-item--no-label .form-boolean,

[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {



.form-type--boolean.form-item--no-label .form-boolean {

  position: static;

  float: none;

  margin-right: 0;

  margin-left: 0;

  margin-inline: 0;

  transform: none;

}
@@ -51,8 +42,7 @@ 
 * space between them.

 */

.form-boolean-group .form-type--boolean {

  margin-top: 0.4em;

  margin-bottom: 0.4em;

  margin-block: 0.4em;

}



/**
@@ -70,6 +60,17 @@ 
  background-size: 100% 100%;

  box-shadow: 0 0 0 4px transparent;

  appearance: none;



  &:active,

  &:hover {

    border-color: var(--input-fg-color);

    box-shadow: inset 0 0 0 1px var(--input-fg-color);

  }



  &:focus:active,

  &:focus:hover {

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

  }

}



@media (forced-colors: active) {
@@ -82,43 +83,38 @@ 
  width: 19px;

  height: 19px;

  border-radius: 19px;



  &:checked {

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

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

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



    &:focus {

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



      &:active,

      &:hover {

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

      }

    }

.form-boolean:active,

.form-boolean:hover {

    &:active,

    &:hover {

      border-color: var(--input-fg-color);

      background-image: url(../../images/icons/000f33/circle.svg);

      box-shadow: inset 0 0 0 1px var(--input-fg-color);

    }

.form-boolean:focus:active,

.form-boolean:focus:hover {

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

  }

}

.form-boolean--type-checkbox:checked {

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

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

  background-image: url(../../images/icons/ffffff/checkmark-sm.svg);

}

.form-boolean--type-checkbox:checked:active,

.form-boolean--type-checkbox:checked:hover {



  &:active,

  &:hover {

    border-color: var(--input-fg-color);

    background-color: var(--input-fg-color);

  }

.form-boolean--type-radio:checked {

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

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

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

}

.form-boolean--type-radio:checked:focus {

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

}

.form-boolean--type-radio:checked:active,

.form-boolean--type-radio:checked:hover {

  border-color: var(--input-fg-color);

  background-image: url(../../images/icons/000f33/circle.svg);

  box-shadow: inset 0 0 0 1px var(--input-fg-color);

}

.form-boolean--type-radio:checked:focus:active,

.form-boolean--type-radio:checked:focus:hover {

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

}



/**
@@ -128,21 +124,21 @@ 
  border-color: var(--input--error-border-color);

  background-color: var(--input-bg-color);

  box-shadow: inset 0 0 0 1px var(--input--error-border-color);

}

.form-boolean.error:active,

.form-boolean.error:hover {

  &:active,

  &:hover {

    box-shadow: inset 0 0 0 1px var(--input--error-border-color);

  }

.form-boolean.error:focus,

.form-boolean.error:focus:active,

.form-boolean.error:focus:hover {

  &:focus,

  &:focus:active,

  &:focus:hover {

    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);

  }

.form-boolean.error:checked:active,

.form-boolean.error:checked:hover {

  &:checked:active,

  &:checked:hover {

    border-color: var(--input--error-border-color);

    background-color: var(--input-bg-color);

  }

}

.form-boolean--type-checkbox.error:checked,

.form-boolean--type-checkbox.error:checked:active,

.form-boolean--type-checkbox.error:checked:hover {