Fixed column gaps to be larger when only a single sidebar is present.

[alan-cole]

Checklist before requesting a review

• I have formatted the subject to include the issue number
  as [#123] Verb in past tense with a period at the end.
• I have provided information in the Changed section about WHY something was
  done if this was a bespoke implementation.
• I have performed a self-review of my code.
• I have commented on my code, particularly in hard-to-understand areas.
• I have added tests that prove my fix is effective or that my feature works.
• I have run new and existing relevant tests locally with my changes,
  and they have passed.
• I have provided screenshots, where applicable.

Changed

• Fixed column gaps to be larger when only a single sidebar is present.
• Updated grid-gap to gap as docs say grid-gap is a legacy alias.
• Fixed grid ordering not applying due to double .ct-layout__inner.

Screenshots

gap-and-order.mp4

[github-actions]

🚀 Deployed on https://6673c10cb8e00cf6d7986324--civictheme-uikit.netlify.app

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 14.38%. Comparing base (e292a8a) to head (cffc118).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #267   +/-   ##
=======================================
  Coverage   14.38%   14.38%           
=======================================
  Files          26       26           
  Lines        1244     1244           
  Branches      300      300           
=======================================
  Hits          179      179           
  Misses        855      855           
  Partials      210      210           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[AlexSkrypnyk]

The gap is not correct on mobile

[AlexSkrypnyk]

please update to fix the gap on mobile

[alan-cole]

please update to fix the gap on mobile

This issue was related to the ordering permutation variables not applying due to:

.ct-layout {
  $root: &;
  &__inner {
    #{$root}--no-bottom-left > #{$root}__inner > & {
      color: red;
    }
  }
}

resulting in:

.ct-layout--no-bottom-left > .ct-layout__inner > .ct-layout__inner {
  color: red;
}

where it should only be:

.ct-layout--no-bottom-left > .ct-layout__inner {
  color: red;
}

[AlexSkrypnyk]

@sonamchaturvedi28
waiting for your confirmation, please.

[sonamchaturvedi28]

Test Env: https://6673c10cb8e00cf6d7986324--civictheme-uikit.netlify.app/?path=/story/base-layout--layout
Test Status: FAIL
Test Result:

#	Issue
1	Adding long content - gap between top and bottom sidebar is huge. This issue exists for Nested layout as well
2	Vertical Spacing is not working with sidebars 1. By default None is selected in the property, however Top spacing is applied 2. on selecting any other option, always Top spacing get applied
3	Bottom sidebars are not inline with nested bottom

Issue1:

Issue2:

Issue3:

[AlexSkrypnyk]

1 is an issue
2 and 3 are by design.
thank you @sonamchaturvedi28