lucca-front
lucca-front copied to clipboard
Published
20 hours ago •
LuccaSA
LuccaSA
LF Responsive
Description
With this PR, we introduce the possibility of controlling the responsive behavior of each component from outside LF.
You can (for each component independently) :
- disable default responsive ;
- change the default breakpoint (with a predefined breakpoint or a custom value) ;
- define two breakpoints;
- switch from
@mediato@containerbehavior (and vice versa); - invert a request (from
min-widthtomax-widthfor example); - refer to
heightrather thanwidth; - do all this globally or specifically.
Each responsive component now has :
- a mixin in its index that controls all its behavior ;
- in a responsive file, the mixins that modify its appearance.
A few breakings:
betweenbecomesinside(1 inside Cleemy)$namebecomes$containerName(1 inside Cleemy)- all
@forwardbecomes@useinstyles.scss(everyone)
The target behaviors are coded in LF, to avoid breakings (and give you time to switch over smoothly), you will have to configure the responsive components in this way:
@use 'footer' with (
$defaultResponsive: false
);
@include footer.responsive($at: 'media');
Some examples of use:
// change breakpoint for indexTable
@use 'indexTable' with (
$defaultResponsive: false
);
@include indexTable.responsive($at: 'media', $breakpoint: 'XS');
// define two levels and trigger outside them for errorPage
@use 'errorPage' with (
$defaultResponsive: false
);
@include errorPage.responsive($at: 'media', $breakpoint: 'S', $breakpoint2: 'M', $inverted: true);
// create behavior for a specific emptyState
@use 'emptyState' with (
$defaultResponsive: false
);
@include emptyState.responsive($at: 'media');
@include emptyState.responsive($at: 'media', $breakpoint: '42em', $responsiveSelector: 'at42em'); // generate class .emptyState.rwd-at42em
Could we fix the pageHeader responsive padding on this issue ?
https://github.com/LuccaSA/lucca-front/blob/b257decf2fff62ce723e5991b0b42b12cdc3cfa7/packages/scss/src/components/pageHeader/component.scss#L4
