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

Issue #3173008 by anmolgoyal74, mherchel, paulocs, kostyashupenko, FMB,... 

Issue #3173008 by anmolgoyal74, mherchel, paulocs, kostyashupenko, FMB, andy-blum: [Code Review] wide image within article template a reusable component/class
parent b0e23271

core/themes/olivero/css/components/field-image.css

deleted100644 → 0
+0 −152
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * @file

 * Field image field.

 */



[dir="ltr"] .page-node-type-article .field--name-field-image {

    margin-left: 0

}



[dir="rtl"] .page-node-type-article .field--name-field-image {

    margin-right: 0

}



[dir="ltr"] .page-node-type-article .field--name-field-image {

    margin-right: 0

}



[dir="rtl"] .page-node-type-article .field--name-field-image {

    margin-left: 0

}



.page-node-type-article .field--name-field-image {

    margin-top: 0.5625rem;

    margin-bottom: 2.25rem

  }



@media (min-width: 43.75rem) {



[dir="ltr"] .page-node-type-article .field--name-field-image {

      margin-left: -7.14286vw

    }



[dir="rtl"] .page-node-type-article .field--name-field-image {

      margin-right: -7.14286vw

    }



.page-node-type-article .field--name-field-image {

      width: calc(100vw - 2.25rem);

      margin-top: 2.25rem;

      margin-bottom: 4.5rem

  }

    }



@media (min-width: 62.5rem) {



[dir="ltr"] .page-node-type-article .field--name-field-image {

      margin-left: calc(-7.14286vw - -1.07143px)

    }



[dir="rtl"] .page-node-type-article .field--name-field-image {

      margin-right: calc(-7.14286vw - -1.07143px)

    }



.page-node-type-article .field--name-field-image {

      width: calc(85.71429vw - 3.05357rem)

  }

    }



@media (min-width: 75rem) {



[dir="ltr"] .page-node-type-article .field--name-field-image {

      margin-left: calc(-7.14286vw - -0.62946rem)

    }



[dir="rtl"] .page-node-type-article .field--name-field-image {

      margin-right: calc(-7.14286vw - -0.62946rem)

    }



.page-node-type-article .field--name-field-image {

      width: calc(85.71429vw - 9.80357rem)

  }

    }



@media (min-width: 90rem) {



[dir="ltr"] .page-node-type-article .field--name-field-image {

      margin-left: -5.86607rem

    }



[dir="rtl"] .page-node-type-article .field--name-field-image {

      margin-right: -5.86607rem

    }



.page-node-type-article .field--name-field-image {

      width: 68.14286rem

  }

    }



.page-node-type-article {



  /* Ensure that image doesn't overlap sidebar. */

}



@media (min-width: 62.5rem) {



.page-node-type-article .sidebar-grid .field--name-field-image {

      width: calc(64.28571vw - 2.85268rem)

  }

    }



@media (min-width: 75rem) {



.page-node-type-article .sidebar-grid .field--name-field-image {

      width: calc(64.28571vw - 7.91518rem)

  }

    }



@media (min-width: 81.25rem) {



.page-node-type-article .sidebar-grid .field--name-field-image {

      width: calc(71.42857vw - 8.54464rem)

  }

    }



@media (min-width: 90rem) {



.page-node-type-article .sidebar-grid .field--name-field-image {

      width: 56.41071rem

  }

    }



.page-node-type-article {



  /* Ensure that image doesn't overlap layout builder sections when editing layouts. */

}



[dir="ltr"] .page-node-type-article .layout-builder .field--name-field-image {

    margin-left: 0

}



[dir="rtl"] .page-node-type-article .layout-builder .field--name-field-image {

    margin-right: 0

}



[dir="ltr"] .page-node-type-article .layout-builder .field--name-field-image {

    margin-right: 0

}



[dir="rtl"] .page-node-type-article .layout-builder .field--name-field-image {

    margin-left: 0

}



.page-node-type-article .layout-builder .field--name-field-image {

    max-width: 100%;

  }

core/themes/olivero/css/components/field-image.pcss.css

deleted100644 → 0
+0 −62
Original line number Diff line number Diff line 
/**

 * @file

 * Field image field.

 */



@import "../base/variables.pcss.css";



.page-node-type-article {

  & .field--name-field-image {

    margin-block-start: var(--sp0-5);

    margin-block-end: var(--sp2);

    margin-inline-start: 0;

    margin-inline-end: 0;



    @media (--grid-md) {

      width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));

      margin-block: var(--sp2) var(--sp4);

      margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));

    }



    @media (--lg) {

      width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));

      margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));

    }



    @media (--nav) {

      width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));

      margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));

    }



    @media (--grid-max) {

      width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));

      margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));

    }

  }



  /* Ensure that image doesn't overlap sidebar. */

  & .sidebar-grid .field--name-field-image {

    @media (--lg) {

      width: calc(9 * var(--grid-col-width--lg) + 8 * var(--grid-gap--lg));

    }



    @media (--nav) {

      width: calc(9 * var(--grid-col-width--nav) + 8 * var(--grid-gap--nav));

    }



    @media (--xl) {

      width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));

    }



    @media (--grid-max) {

      width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));

    }

  }



  /* Ensure that image doesn't overlap layout builder sections when editing layouts. */

  & .layout-builder .field--name-field-image {

    max-width: 100%;

    margin-inline-start: 0;

    margin-inline-end: 0;

  }

}

core/themes/olivero/css/components/wide-image.css

0 → 100644
+146 −0
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * @file

 * Wide image component.

 */



[dir="ltr"] .wide-image {

  margin-left: 0

}



[dir="rtl"] .wide-image {

  margin-right: 0

}



[dir="ltr"] .wide-image {

  margin-right: 0

}



[dir="rtl"] .wide-image {

  margin-left: 0

}



.wide-image {

  margin-top: 0.5625rem;

  margin-bottom: 2.25rem

}



@media (min-width: 43.75rem) {



[dir="ltr"] .wide-image {

    margin-left: -7.14286vw

  }



[dir="rtl"] .wide-image {

    margin-right: -7.14286vw

  }



.wide-image {

    width: calc(100vw - 2.25rem);

    margin-top: 2.25rem;

    margin-bottom: 4.5rem

}

  }



@media (min-width: 62.5rem) {



[dir="ltr"] .wide-image {

    margin-left: calc(-7.14286vw - -1.07143px)

  }



[dir="rtl"] .wide-image {

    margin-right: calc(-7.14286vw - -1.07143px)

  }



.wide-image {

    width: calc(85.71429vw - 3.05357rem)

}

  }



@media (min-width: 75rem) {



[dir="ltr"] .wide-image {

    margin-left: calc(-7.14286vw - -0.62946rem)

  }



[dir="rtl"] .wide-image {

    margin-right: calc(-7.14286vw - -0.62946rem)

  }



.wide-image {

    width: calc(85.71429vw - 9.80357rem)

}

  }



@media (min-width: 90rem) {



[dir="ltr"] .wide-image {

    margin-left: -5.86607rem

  }



[dir="rtl"] .wide-image {

    margin-right: -5.86607rem

  }



.wide-image {

    width: 68.14286rem

}

  }



/* Ensure that image doesn't overlap sidebar. */



@media (min-width: 62.5rem) {



.sidebar-grid .wide-image {

    width: calc(64.28571vw - 2.85268rem)

}

  }



@media (min-width: 75rem) {



.sidebar-grid .wide-image {

    width: calc(64.28571vw - 7.91518rem)

}

  }



@media (min-width: 81.25rem) {



.sidebar-grid .wide-image {

    width: calc(71.42857vw - 8.54464rem)

}

  }



@media (min-width: 90rem) {



.sidebar-grid .wide-image {

    width: 56.41071rem

}

  }



/* Ensure that image doesn't overlap layout builder sections when editing layouts. */



[dir="ltr"] .layout-builder .wide-image {

  margin-left: 0

}



[dir="rtl"] .layout-builder .wide-image {

  margin-right: 0

}



[dir="ltr"] .layout-builder .wide-image {

  margin-right: 0

}



[dir="rtl"] .layout-builder .wide-image {

  margin-left: 0

}



.layout-builder .wide-image {

  max-width: 100%;

}

core/themes/olivero/css/components/wide-image.pcss.css

0 → 100644
+60 −0
Original line number Diff line number Diff line 
/**

 * @file

 * Wide image component.

 */



@import "../base/variables.pcss.css";



.wide-image {

  margin-block-start: var(--sp0-5);

  margin-block-end: var(--sp2);

  margin-inline-start: 0;

  margin-inline-end: 0;



  @media (--grid-md) {

    width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));

    margin-block: var(--sp2) var(--sp4);

    margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));

  }



  @media (--lg) {

    width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));

    margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));

  }



  @media (--nav) {

    width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));

    margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));

  }



  @media (--grid-max) {

    width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));

    margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));

  }

}



/* Ensure that image doesn't overlap sidebar. */

.sidebar-grid .wide-image {

  @media (--lg) {

    width: calc(9 * var(--grid-col-width--lg) + 8 * var(--grid-gap--lg));

  }



  @media (--nav) {

    width: calc(9 * var(--grid-col-width--nav) + 8 * var(--grid-gap--nav));

  }



  @media (--xl) {

    width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));

  }



  @media (--grid-max) {

    width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));

  }

}



/* Ensure that image doesn't overlap layout builder sections when editing layouts. */

.layout-builder .wide-image {

  max-width: 100%;

  margin-inline-start: 0;

  margin-inline-end: 0;

}

core/themes/olivero/olivero.libraries.yml

+1 −1
Original line number Diff line number Diff line
@@ -27,7 +27,6 @@ global-styling: 
      css/components/container-inline.module.css: {}

      css/components/fieldset.css: {}

      css/components/field.css: {}

      css/components/field-image.css: {}

      css/components/form.css: {}

      css/components/form-boolean.css: {}

      css/components/form-text.css: {}
@@ -54,6 +53,7 @@ global-styling: 
      css/components/table.css: {}

      css/components/text-content.css: {}

      css/components/tabledrag.css: {}

      css/components/wide-image.css: {}



  js:

    js/checkbox.js: {}