Unverified Commit 7835007c authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3173018 by kostyashupenko, Pooja Ganjage, proeung, mherchel: [Code... 

Issue #3173018 by kostyashupenko, Pooja Ganjage, proeung, mherchel: [Code Review] Remove .form-type as this prefix block element doesn't exist
parent 83200c49

core/themes/olivero/css/components/form-boolean.css

+48 −49
Original line number Diff line number Diff line
@@ -61,43 +61,6 @@ input[type="checkbox"].error::-ms-check, input[type="radio"].error::-ms-check { 
    border: 1px solid #e33f1e;

  }



[dir="ltr"] .form-type--boolean input[type="checkbox"],[dir="ltr"] 

  .form-type--boolean input[type="radio"] {

    float: left

}



[dir="rtl"] .form-type--boolean input[type="checkbox"],[dir="rtl"] 

  .form-type--boolean input[type="radio"] {

    float: right

}



[dir="ltr"] .form-type--boolean input[type="checkbox"],[dir="ltr"] 

  .form-type--boolean input[type="radio"] {

    margin-left: -36px

}



[dir="rtl"] .form-type--boolean input[type="checkbox"],[dir="rtl"] 

  .form-type--boolean input[type="radio"] {

    margin-right: -36px

}



.form-type--boolean input[type="checkbox"],

  .form-type--boolean input[type="radio"] {

    position: relative;

    /* stylelint-disable-next-line csstools/use-logical */

    top: 9px;

    transform: translateY(-50%);

  }



.form-type--boolean.form-no-label input[type="checkbox"],

    .form-type--boolean.form-no-label input[type="radio"] {

      position: static;

      float: none;

      margin-left: 0;

      margin-right: 0;

      transform: none;

    }



input[type="checkbox"]:checked {

    background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232494DB' d='M14.8232 0.176777C14.9209 0.0791457 15.0791 0.0791455 15.1768 0.176777L16.9445 1.94454C17.0422 2.04217 17.0422 2.20047 16.9445 2.2981L6.23744 13.0052C6.13981 13.1028 5.98151 13.1028 5.88388 13.0052L0.176777 7.2981C0.0791456 7.20047 0.0791456 7.04218 0.176777 6.94454L1.94454 5.17678C2.04217 5.07915 2.20047 5.07915 2.2981 5.17678L5.88388 8.76256C5.98151 8.86019 6.13981 8.86019 6.23744 8.76256L14.8232 0.176777Z'/%3E%3C/svg%3E%0A");

  }
@@ -111,45 +74,81 @@ input[type="radio"]:checked { 
    background-size: 17px 17px;

  }



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

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

  margin-left: 36px

}



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

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

  margin-right: 36px

}



.form-type--boolean {

.form-type-boolean {

  clear: both

}



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

[dir="ltr"] .form-type-boolean input[type="checkbox"],[dir="ltr"] 

  .form-type-boolean input[type="radio"] {

    float: left

}



[dir="rtl"] .form-type-boolean input[type="checkbox"],[dir="rtl"] 

  .form-type-boolean input[type="radio"] {

    float: right

}



[dir="ltr"] .form-type-boolean input[type="checkbox"],[dir="ltr"] 

  .form-type-boolean input[type="radio"] {

    margin-left: -36px

}



[dir="rtl"] .form-type-boolean input[type="checkbox"],[dir="rtl"] 

  .form-type-boolean input[type="radio"] {

    margin-right: -36px

}



.form-type-boolean input[type="checkbox"],

  .form-type-boolean input[type="radio"] {

    position: relative;

    top: 9px;

    transform: translateY(-50%);

  }



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

    margin-left: 0

}



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

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

    margin-right: 0

}



[dir="ltr"] .form-type--boolean .form-item__description,[dir="ltr"] 

  .form-type--boolean .form-item--error-message {

.form-type-boolean.form-no-label input[type="checkbox"],

    .form-type-boolean.form-no-label input[type="radio"] {

      position: static;

      float: none;

      margin-left: 0;

      margin-right: 0;

      transform: none;

    }



[dir="ltr"] .form-type-boolean .form-item__description,[dir="ltr"] 

  .form-type-boolean .form-item--error-message {

    margin-left: -36px

}



[dir="rtl"] .form-type--boolean .form-item__description,[dir="rtl"] 

  .form-type--boolean .form-item--error-message {

[dir="rtl"] .form-type-boolean .form-item__description,[dir="rtl"] 

  .form-type-boolean .form-item--error-message {

    margin-right: -36px

}



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

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

  margin-top: 18px;

  margin-bottom: 18px;

}



[dir="ltr"] .container-inline .form-boolean-group .form-type--boolean:not(:last-child) {

[dir="ltr"] .container-inline .form-boolean-group .form-type-boolean:not(:last-child) {

  margin-right: 18px

}



[dir="rtl"] .container-inline .form-boolean-group .form-type--boolean:not(:last-child) {

[dir="rtl"] .container-inline .form-boolean-group .form-type-boolean:not(:last-child) {

  margin-left: 18px

}

core/themes/olivero/css/components/form-boolean.pcss.css

+20 −25
Original line number Diff line number Diff line
@@ -50,28 +50,6 @@ input[type="radio"] { 
  }

}



.form-type--boolean {

  & input[type="checkbox"],

  & input[type="radio"] {

    position: relative;

    /* stylelint-disable-next-line csstools/use-logical */

    top: var(--sp0-5);

    float: inline-start;

    margin-inline-start: calc(var(--sp2) * -1);

    transform: translateY(-50%);

  }



  &.form-no-label {

    & input[type="checkbox"],

    & input[type="radio"] {

      position: static;

      float: none;

      margin-inline: 0;

      transform: none;

    }

  }

}



input[type="checkbox"] {

  &:checked {

    background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232494DB' d='M14.8232 0.176777C14.9209 0.0791457 15.0791 0.0791455 15.1768 0.176777L16.9445 1.94454C17.0422 2.04217 17.0422 2.20047 16.9445 2.2981L6.23744 13.0052C6.13981 13.1028 5.98151 13.1028 5.88388 13.0052L0.176777 7.2981C0.0791456 7.20047 0.0791456 7.04218 0.176777 6.94454L1.94454 5.17678C2.04217 5.07915 2.20047 5.07915 2.2981 5.17678L5.88388 8.76256C5.98151 8.86019 6.13981 8.86019 6.23744 8.76256L14.8232 0.176777Z'/%3E%3C/svg%3E%0A");
@@ -87,12 +65,29 @@ input[type="radio"] { 
  }

}



.form-type--boolean {

.form-type-boolean {

  clear: both;

  margin-inline-start: var(--sp2);



  & input[type="checkbox"],

  & input[type="radio"] {

    position: relative;

    top: var(--sp0-5);

    float: inline-start;

    margin-inline-start: calc(var(--sp2) * -1);

    transform: translateY(-50%);

  }



  &.form-no-label {

    margin-inline-start: 0;



    & input[type="checkbox"],

    & input[type="radio"] {

      position: static;

      float: none;

      margin-inline: 0;

      transform: none;

    }

  }



  & .form-item__description,
@@ -101,10 +96,10 @@ input[type="radio"] { 
  }

}



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

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

  margin-block: var(--sp1);

}



.container-inline .form-boolean-group .form-type--boolean:not(:last-child) {

.container-inline .form-boolean-group .form-type-boolean:not(:last-child) {

  margin-inline-end: var(--sp);

}

core/themes/olivero/css/components/off-canvas.css

+7 −7
Original line number Diff line number Diff line
@@ -10,20 +10,20 @@ 
 * Settings tray specific styles.

 */



[dir="ltr"] #drupal-off-canvas .form-type--boolean {

[dir="ltr"] #drupal-off-canvas .form-type-boolean {

    margin-left: 0

}



[dir="rtl"] #drupal-off-canvas .form-type--boolean {

[dir="rtl"] #drupal-off-canvas .form-type-boolean {

    margin-right: 0

}



#drupal-off-canvas .form-type--boolean {

#drupal-off-canvas .form-type-boolean {

    line-height: 18px

  }



#drupal-off-canvas .form-type--boolean input[type="checkbox"],

    #drupal-off-canvas .form-type--boolean input[type="radio"] {

#drupal-off-canvas .form-type-boolean input[type="checkbox"],

    #drupal-off-canvas .form-type-boolean input[type="radio"] {

      float: none;

      width: 13.5px;

      height: 13.5px;
@@ -31,11 +31,11 @@ 
      vertical-align: middle;

    }



[dir="ltr"] #drupal-off-canvas .form-type--boolean .form-item__description {

[dir="ltr"] #drupal-off-canvas .form-type-boolean .form-item__description {

      margin-left: 0

}



[dir="rtl"] #drupal-off-canvas .form-type--boolean .form-item__description {

[dir="rtl"] #drupal-off-canvas .form-type-boolean .form-item__description {

      margin-right: 0

}

core/themes/olivero/css/components/off-canvas.pcss.css

+1 −1
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
@import "../base/variables.pcss.css";



#drupal-off-canvas {

  & .form-type--boolean {

  & .form-type-boolean {

    margin-inline-start: 0;

    line-height: var(--line-height-s);

core/themes/olivero/olivero.theme

+1 −1
Original line number Diff line number Diff line
@@ -230,7 +230,7 @@ function olivero_preprocess_menu_local_tasks(&$variables) { 
 */

function olivero_preprocess_form_element(&$variables) {

  if (in_array($variables['element']['#type'] ?? FALSE, ['checkbox', 'radio'], TRUE)) {

    $variables['attributes']['class'][] = 'form-type--boolean';

    $variables['attributes']['class'][] = 'form-type-boolean';

  }



  if (!empty($variables['description']['attributes'])) {