Verified Commit f0ef38ff authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3303548 by Aditya4478, Stanzin, Gauravvvv: Refactor Claro's fieldset stylesheet

parent 71ef375f

core/themes/claro/css/components/fieldset.css

+32 −34
Original line number Diff line number Diff line
@@ -37,27 +37,27 @@ 
  display: contents; /* For Firefox. */

  float: left; /* iOS Safari, Android Chrome, Edge. */

  width: 100%; /* iOS Safari, Android Chrome, Edge. */

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

  margin-block-end: var(--space-m);

  color: var(--color-gray-800);

  font-weight: bold;

}



@media screen and (min-width: 48em) {

  .fieldset__legend {

    margin-bottom: var(--space-l);

  }

}



.fieldset__legend--composite {

  float: none;

  width: auto;

  margin-top: calc(var(--space-xs) / 2); /* 4px */

  margin-bottom: calc(var(--space-xs) / 2); /* 4px */

  margin-block-start: calc(var(--space-xs) / 2); /* 4px */

  margin-block-end: calc(var(--space-xs) / 2); /* 4px */

  color: inherit;

  font-size: var(--font-size-s); /* 14px */

  line-height: calc(18rem / 16); /* 18px */

}



@media screen and (min-width: 48em) {

  .fieldset__legend {

    margin-bottom: var(--space-l);

  }

}



/* This is used only on install configure form. */



.fieldset__legend--group {
@@ -71,11 +71,12 @@ 
  line-height: var(--space-m);

}



@media screen and (min-width: 48em) {

  .fieldset__label {

    padding-right: var(--space-l);

    padding-left: var(--space-l);

.fieldset__label.is-disabled {

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

}



.fieldset__label.has-error {

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

}



.fieldset__label--group {
@@ -83,17 +84,16 @@ 
  line-height: inherit;

}



.fieldset__label.is-disabled {

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

@media screen and (min-width: 48em) {

  .fieldset__label {

    padding-right: var(--space-l);

    padding-left: var(--space-l);

  }



.fieldset__label.has-error {

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

}



.fieldset__description {

  margin-top: calc(6rem / 16); /* 6px */

  margin-bottom: calc(6rem / 16); /* 6px */

  margin-block-start: calc(6rem / 16); /* 6px */

  margin-block-end: calc(6rem / 16); /* 6px */

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

  font-size: var(--font-size-xs); /* ~13px */

  line-height: calc(17rem / 16); /* 17px */
@@ -106,8 +106,8 @@ 
/* Error message (Inline form errors). */



.fieldset__error-message {

  margin-top: calc(6rem / 16); /* 6px */

  margin-bottom: calc(6rem / 16); /* 6px */

  margin-block-start: calc(6rem / 16); /* 6px */

  margin-block-end: calc(6rem / 16); /* 6px */

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

  font-size: var(--font-size-xs); /* ~13px */

  font-weight: normal;
@@ -116,6 +116,13 @@ 


.fieldset__wrapper {

  margin: var(--space-m);

  /**

   * Remove the extra padding of container-inline wrapper if it's used inside a fieldset

   */

}



.fieldset__wrapper > .container-inline {

  padding: 0;

}



@media screen and (min-width: 48em) {
@@ -125,18 +132,9 @@ 
}



.fieldset__legend--visible ~ .fieldset__wrapper {

  margin-top: 0;

  margin-block-start: 0;

}



.fieldset__wrapper--group {

  margin: 0;

}
 


/**

 * Remove the unnecessary extra padding of container-inline wrapper if it's used

 * inside a fieldset.

 */



.fieldset__wrapper > .container-inline {

  padding: 0;

}

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

+33 −37
Original line number Diff line number Diff line
@@ -29,27 +29,27 @@ 
  display: contents; /* For Firefox. */

  float: left; /* iOS Safari, Android Chrome, Edge. */

  width: 100%; /* iOS Safari, Android Chrome, Edge. */

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

  margin-block-end: var(--space-m);

  color: var(--color-gray-800);

  font-weight: bold;

}



@media screen and (min-width: 48em) {

  .fieldset__legend {

    margin-bottom: var(--space-l);

  }

}



.fieldset__legend--composite {

  float: none;

  width: auto;

  margin-top: calc(var(--space-xs) / 2); /* 4px */

  margin-bottom: calc(var(--space-xs) / 2); /* 4px */

  margin-block-start: calc(var(--space-xs) / 2); /* 4px */

  margin-block-end: calc(var(--space-xs) / 2); /* 4px */

  color: inherit;

  font-size: var(--font-size-s); /* 14px */

  line-height: calc(18rem / 16); /* 18px */

}



@media screen and (min-width: 48em) {

  .fieldset__legend {

    margin-bottom: var(--space-l);

  }

}



/* This is used only on install configure form. */

.fieldset__legend--group {

  text-transform: uppercase;
@@ -60,12 +60,12 @@ 
  display: block;

  padding: var(--space-m);

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

  &.is-disabled {

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

  }



@media screen and (min-width: 48em) {

  .fieldset__label {

    padding-right: var(--space-l);

    padding-left: var(--space-l);

  &.has-error {

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

  }

}
@@ -74,30 +74,28 @@ 
  line-height: inherit;

}



.fieldset__label.is-disabled {

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

@media screen and (min-width: 48em) {

  .fieldset__label {

    padding-right: var(--space-l);

    padding-left: var(--space-l);

  }



.fieldset__label.has-error {

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

}



.fieldset__description {

  margin-top: calc(6rem / 16); /* 6px */

  margin-bottom: calc(6rem / 16); /* 6px */

  margin-block-start: calc(6rem / 16); /* 6px */

  margin-block-end: calc(6rem / 16); /* 6px */

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

  font-size: var(--font-size-xs); /* ~13px */

  line-height: calc(17rem / 16); /* 17px */

}



.fieldset__description.is-disabled {

  &.is-disabled {

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

  }

}



/* Error message (Inline form errors). */

.fieldset__error-message {

  margin-top: calc(6rem / 16); /* 6px */

  margin-bottom: calc(6rem / 16); /* 6px */

  margin-block-start: calc(6rem / 16); /* 6px */

  margin-block-end: calc(6rem / 16); /* 6px */

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

  font-size: var(--font-size-xs); /* ~13px */

  font-weight: normal;
@@ -106,6 +104,12 @@ 


.fieldset__wrapper {

  margin: var(--space-m);

  /**

   * Remove the extra padding of container-inline wrapper if it's used inside a fieldset

   */

   & > .container-inline{

    padding: 0;

   }

}



@media screen and (min-width: 48em) {
@@ -115,17 +119,9 @@ 
}



.fieldset__legend--visible ~ .fieldset__wrapper {

  margin-top: 0;

  margin-block-start: 0;

}



.fieldset__wrapper--group {

  margin: 0;

}
 


/**

 * Remove the unnecessary extra padding of container-inline wrapper if it's used

 * inside a fieldset.

 */

.fieldset__wrapper > .container-inline {

  padding: 0;

}