STENCIL-2455: Prevents carousel images from being cut off on large sc…

[cristycarpenter]

…reens.

JIRA Ticket
https://jira.bigcommerce.com/browse/STENCIL-2455

What
Switches carousel background-size from "cover" to "100% 100%" which fits the entire image into the slide's viewing area.

Why
Carousel images are currently becoming cut off on the top and bottom at browser widths greater than 1261px.

Caveats
Images may look a bit stretched.

• We could increase the height set by the hero carousel?
• We could remove "visibility: hidden" on .heroCarousel-image (although, the image wouldn't scale :/)

Screenshots
Before Change:

After Change:

[bigbot]

Autotagging @mcampa @bc-miko-ademagic @davidchin

[mcampa]

We could add a toggle in the Theme Editor to enable this feature 🍹. Something like:

• Allows image to scale on large screens

This way people won't complain about their images being too stretched. To add the checkbox add a new setting to the schema.json file under Carousel section

[cristycarpenter]

I actually had that same thought earlier @mcampa! I forgot to post it as a possible solution. I am comfortable making those code changes if that's what we think is best :)

[mcampa]

Added two checkboxes:

@mjschock @junedkazi @mattolson

[junedkazi]

How is this being used ? I do not see any corresponding template change to support it.

[mcampa]

here https://github.com/bigcommerce/stencil/search?utf8=%E2%9C%93&q=homepage_show_carousel

[junedkazi]

Is there a reason to move this to the next line ?

[mcampa]

no, that was a mistake. Fixing

[davidchin]

If you want to modify the appearance of a CSS selector, you should use -- instead of -. Also I think this is unneccessarily nested. You can lower its specificity by moving it out. i.e.:

.heroCarousel-slide--stretched {
    @include breakpoint("large") {
        background-size: 100%;
    }
}

And apply the modifier class directly to .heroCarousel-slide :)

[mcampa]

done

[davidchin]

Thanks for doing the change! heroCarousel-slide--stretch doesn't need to be nested in heroCarousel-slide. Just move the former below the latter.

[mcampa]

We are now using CHANGELOG.md. Please add an entry with your change under draft before merging

## Draft
- <here>

## 1.5.1 (2017-02-07)
- ...

[nickdengler]

Tested on an integration store 💚