lucca-front
lucca-front copied to clipboard
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
