Unverified Commit a832e39b authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3291549 by Gauravvvv, Sakthivel M, mherchel, Maninders, ameymudras,... 

Issue #3291549 by Gauravvvv, Sakthivel M, mherchel, Maninders, ameymudras, wesruv, Gaurav-drupal, smustgrave: Refactor Claro's "node form" layout to not use floats
parent 7a61f4e9

core/themes/claro/css/layout/node-add.css

+10 −55
Original line number Diff line number Diff line
@@ -4,78 +4,33 @@ 
 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * Layout overrides for node add/edit form.

 */



:root {

  --node-meta-width: 22.5rem;

  --node-meta-xl-width: 25vw;

}



.layout-region {

  box-sizing: border-box;

}



.layout-region--node-footer .layout-region__content {

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

}



/**

 * Wide screens

 * Move to two column layout at wider widths.

 */



@media screen and (min-width: 61rem) {

  .layout-region--node-main,

  .layout-region--node-footer {

    float: left; /* LTR */

    width: calc(100% - var(--node-meta-width));

    padding-right: var(--space-l); /* LTR */

  }

  [dir="rtl"] .layout-region--node-main,

  [dir="rtl"] .layout-region--node-footer {

    float: right;

    padding-right: 0;

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

  }



  .layout-region--node-main .layout-region__content,

  .layout-region--node-footer .layout-region__content {

    max-width: 52rem;

    margin-right: auto;

    margin-left: auto;

  }



  .layout-region--node-footer .layout-region__content {

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

  }



  .layout-region--node-secondary {

    float: right; /* LTR */

    width: var(--node-meta-width);

  }

  [dir="rtl"] .layout-region--node-secondary {

    float: left;

  }



  /* Push sidebar down to horizontal align with form section */

  .layout-region--node-secondary {

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

  }

@media (min-width: 61rem) {

  .layout-node-form {

    display: grid;

    grid-template-columns: 3fr minmax(22.5rem, 1fr);

    gap: var(--space-l);

  }



/**

 * Extra Wide screens

 */



@media screen and (min-width: 112rem) {

  .layout-region--node-main,

  .layout-region--node-footer {

    width: calc(100% - var(--node-meta-xl-width));

    margin-inline: auto;

    width: min(52rem, 100%);

  }



  /* Push sidebar down to horizontal align with form section. */

  .layout-region--node-secondary {

    width: var(--node-meta-xl-width);

    margin-block-start: var(--space-l);

  }

}

core/themes/claro/css/layout/node-add.pcss.css

+10 −50
Original line number Diff line number Diff line 
/**

 * Layout overrides for node add/edit form.

 */



:root {

  --node-meta-width: 22.5rem;

  --node-meta-xl-width: 25vw;

}



.layout-region {

  box-sizing: border-box;

}
@@ -16,57 +10,23 @@ 
}



/**

 * Wide screens

 * Move to two column layout at wider widths.

 */

@media screen and (min-width: 61rem) {

  .layout-region--node-main,

  .layout-region--node-footer {

    float: left; /* LTR */

    width: calc(100% - var(--node-meta-width));

    padding-right: var(--space-l); /* LTR */

  }

  [dir="rtl"] .layout-region--node-main,

  [dir="rtl"] .layout-region--node-footer {

    float: right;

    padding-right: 0;

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

  }



  .layout-region--node-main .layout-region__content,

  .layout-region--node-footer .layout-region__content {

    max-width: 52rem;

    margin-right: auto;

    margin-left: auto;

  }



  .layout-region--node-footer .layout-region__content {

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

@media (min-width: 61rem) {

  .layout-node-form {

    display: grid;

    grid-template-columns: 3fr minmax(360px, 1fr);

    gap: var(--space-l);

  }



  .layout-region--node-secondary {

    float: right; /* LTR */

    width: var(--node-meta-width);

  }

  [dir="rtl"] .layout-region--node-secondary {

    float: left;

  }



  /* Push sidebar down to horizontal align with form section */

  .layout-region--node-secondary {

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

  }

}



/**

 * Extra Wide screens

 */

@media screen and (min-width: 112rem) {

  .layout-region--node-main,

  .layout-region--node-footer {

    width: calc(100% - var(--node-meta-xl-width));

    margin-inline: auto;

    width: min(832px, 100%);

  }



  /* Push sidebar down to horizontal align with form section. */

  .layout-region--node-secondary {

    width: var(--node-meta-xl-width);

    margin-block-start: var(--space-l);

  }

}