Layers
Import
Import the settings, the layer, and the button scss files.
Note that you can also implement in addition the scss file of the links if you use this component in your layers.
@import 'settings-tools/all-settings';@import 'components/c.layer';@import 'components/c.button';
Usage
A layer is composed of several zones:
- A header with the class :
mc-layer__header
(mandatory) - A body with class:
mc-layer__body
(mandatory) - A footer with class:
mc-layer__footer
(optional)
These areas are then encompassed in:
- A specific container with the class:
mc-layer__dialog
- A global wrapper with the class:
mc-layer
<div class="mc-layer" role="dialog" aria-labelledby="layerTitle" aria-modal="true" aria-hidden="true" tabindex="-1"> <div class="mc-layer__dialog" role="document"> <div class="mc-layer__header"> <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2> <button class="mc-layer__close" type="button"> <span class="mc-layer__close-text">Close</span> </button> </div> <div class="mc-layer__body"> <div class="mc-layer__content"> <!-- Here your content --> </div> </div> <div class="mc-layer__footer"> <button type="button" class="mc-button"> <span class="mc-button__label">Button label</span> </button> <button type="button" class="mc-button mc-button--bordered"> <span class="mc-button__label">Button label</span> </button> </div> </div></div>
Detail of areas
In more detail, it should be noted that each of the fields mentioned above may contain other elements. Thus:
The header
The header contains:
- the title of the layer (
.mc-layer__title
) - as well as its close button (
.mc-layer__close
) - it's also possible to add an icon if needed (
.mc-layer__icon
)
These elements are mandatory and must always be present in your layer code. With the exception of the icon which is optional.
The body
The body can contain your custom content. It can be text, buttons, and so on.
The footer
The footer is the area that allows you to insert calls to action. This area is optional and is not always present depending on the context in which your layer is used.
If there is a footer in your layer, note that the call-to-actions buttons inside always take 100% of the layer width on the breakpoint-s
.
Variations
Header with icon
As detailed above, you can add an icon in the header. You can do this in the following way:
The width of the icon is 24px (
$mu150
)
Body with scrolling content
Depends on the context, the scrollbar can be next to the content or at the edge of the layer.
Add the mc-layer-open
class to the html body element to prevent the default scrolling of the browser window.
Scrollbar on content
By default the scrollbar is next to the content.
- Add
mc-layer__body--overflowing
modifier to themc-layer__body
element.
Scrollbar on layer
In some context, the scrollbar can be moved to the edge of the layer.
- Add
mc-layer__body--overflowing-scroll-edge
modifier to themc-layer__body
element.
Footer - two call to actions
A primary call to action button accompanied with a secondary button to give the user an alternative choice.
Footer - call to action and link
A primary call to action button with a link to redirect the user to a page to give more informations.
Without footer
As detailed above, the footer is optional. Depending on the context of your layer, you can do without it:
Extended layer
In some configurations, you may need to extend the width of the layer.
To do this, you can add the mc-layer__dialog--extend
to the .mc-layer__dialog
.
Note that modifier extends the width of the layer only from the breakpoint M (680px)
Open from left to right
In some configurations, you may want to open the layer from the left to the right.
To do this, you can add the mc-layer--ltr
to the .mc-layer
.
Behaviour
On opening
During the opening of a layer by Javascript, several events occur:
- Added the
is-open
class on themc-layer__dialog
element. - An
mc-layer-overlay
element is generated in the DOM. This element must also have the classis-visible
.
Prevent body from scrolling
When you use a layer, by definition, it opens on top of the content of your page.
But depending on your context of use, you may need to prevent the user from scrolling the page in the background of your layer.
That's why Mozaic provides you with a css utility class allowing you to lock the use of scroll.
To do this, you need to add the .mu-prevent-body-scroll
class to both the html
and body
tags.
When using this utility class, do not forget to import the associated SCSS file:
@import 'utilities/u.scroll';
Note that the use of this class is not imposed by Mozaic but left to your discretion.