Adding Collapsible menu layout SCSS #784
Conversation
|
wibjorn
changed the title
| } | ||
| } | ||
|
|
||
| .layout.layout-menu-collapsed { |
There was a problem hiding this comment.
This needs an update to the documentation page too, otherwise we can't test how it intersects with all the layouts.
site\src\components\layout.md is the relevant piece of documentation
Will need a new button to apply the class for testing on the layout page of the docs site.
| @@ -367,6 +367,38 @@ $default-flyout-width-widescreen: 480px; | |||
| } | |||
| } | |||
|
|
|||
There was a problem hiding this comment.
New class/behavior should have an integration test too:
https://github.com/microsoft/atlas-design/blob/main/integration/tests/layout.spec.ts
|
|
||
| .layout-body-main { | ||
| width: 100%; | ||
| max-width: 900px !important; |
There was a problem hiding this comment.
Should use a variable? How'd we get to 900?
|
|
||
| @include widescreen { | ||
| grid-template-columns: | ||
| auto calc(#{$quarter-widescreen} * 0.5) calc( |
There was a problem hiding this comment.
Do we need to calc here? The browser should be able to do less work if we just compute the values, right? We don't need the browse to be calculating these things when we know the value.
| .layout-body-aside { | ||
| flex-shrink: 0 !important; | ||
| width: 100% !important; | ||
| min-width: 300px !important; |
There was a problem hiding this comment.
How'd we pick 300? Should it be a variable?
| @@ -367,6 +367,38 @@ $default-flyout-width-widescreen: 480px; | |||
| } | |||
| } | |||
There was a problem hiding this comment.
PR will need a changeset too npx changeset add to add a minor changeset to both the css package and the layout package.
asrivastava0308
force-pushed
the
aks/adding-scss-for-toc
branch
from
43ad9e8 to
3c8f089
Compare
What changes i am proposing to add
Typography: Added font-size-xxl utility class using $font-size-4 (1.5rem / 24px) to support larger non-heading text. Previously, the largest non-heading size available was font-size-xl at 1.25rem (20px).
Layout: Introduced layout-menu-collapsed modifier for documentation pages. This provides optimized column proportions for layouts with a collapsible menu, offering better content visibility compared to the standard holy-grail layout.
Link - http://localhost:1111/components/layout.html
Testing
Next Step