Update deep strip paddings

[yurii-vasyliev]

Done

• Increased desktop and mobile paddings for the deep strip to 8rem and 4rem accordingly

Fixes WD-2889

QA

• Open demo
• Review updated documentation:
  • Docs
  • Examples

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

• Screenshot 1

[webteam-app]

Demo starting at https://vanilla-framework-4720.demos.haus

[bartaz]

@lyubomir-popov Could you give this one a quick look as design review?

Percy diff: https://percy.io/bb49709b/vanilla-framework/builds/26371576/changed/1467999309

I guess the change is small enough we can just release it now, without waiting for 4.0?

[bartaz]

@yurii-vasyliev As Lyubo mentioned on standup, could try to apply this change locally on ubuntu.com repo and run a PR with a test, so it can be verified in the context of the website?

This hopefully should just require overriding $spv--strip-deep: $sp-unit * 16 somewhere in ubuntu.com scss. Like here maybe? https://github.com/canonical/ubuntu.com/blob/main/static/sass/_global-settings.scss

[yurii-vasyliev]

@yurii-vasyliev As Lyubo mentioned on standup, could try to apply this change locally on ubuntu.com repo and run a PR with a test, so it can be verified in the context of the website?

@bartaz @lyubomir-popov

Hey guys,

Here is the URL: https://ubuntu-com-12760.demos.haus/

I haven't found deep strips, though :) So just add is-deep to any strip for preview.

Thanks!

[bartaz]

Found couple pages with deep strips for review:
https://ubuntu-com-12760.demos.haus/security/esm
https://ubuntu-com-12760.demos.haus/pro/tutorial
https://ubuntu-com-12760.demos.haus/certified/why-certify
https://ubuntu-com-12760.demos.haus/internet-of-things/edgex
https://ubuntu-com-12760.demos.haus/raspberry-pi/server

Could you have a look @lyubomir-popov

[lyubomir-popov]

I think we can improve the following on the u.c repo:

remove the double space at the bottom of the last one (take out one of the is-deep classes) here:

switch to regular strips here:

[lyubomir-popov]

just a note that we will need to file an issue
and resolve those on the u/.c side

[bartaz]

ubuntu.com fixes addressed in canonical/ubuntu.com#12775

[bartaz]

LGTM, thanks!