Override/Extend Bootstrap SCSS #Odoo #Theme

bs_override_extend.md

• assets.xml

<template id="_assets_bootstrap" inherit_id="web._assets_bootstrap">
  <xpath expr="link[2]">
    <link type="text/css" rel="stylesheet" href="/web_widget_one2many_product_picker/static/src/scss/bs_overrides.scss"/>
  </xpath>
</template>

• bs_overrides.scss

In this example we extend media queries and 'col-' to have a new 'xxl'

$grid-breakpoints: map-merge(
    $grid-breakpoints,
  (
    xxl: 1440px,
  )
);

$container-max-widths: map-merge(
    $container-max-widths,
    (
      xxl: 1400px,
    )
);

In this case we only add new sizes to use in medie queries

$o-extra-grid-breakpoints: map-merge(
    $grid-breakpoints,
  (
    xxxl: 2440px,
  )
);

$o-extra-grid-breakpoints: map-merge(
    $container-max-widths,
    (
      xxxl: 2400px,
    )
);

// Now can use in the normal .scss
@include media-breakpoint-up(md, $o-extra-grid-breakpoints) {
	...
}

In this example we extend a class with 24 cols

.oe_one2many_product_picker_view {
    /* Here can use a custom breakpoints and/or max-widths 
     * Call 'make-container-max-widths' if uses custom values
     */
    //@include make-container-max-widths();
    @include make-grid-columns($columns: 24)
}