entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

scss: introduce stretch-to-edge util class (#88600) #554

Merged
tjund merged 1 commits from wip/88600-to-the-edge into main 2024-05-02 11:23:20 +02:00
Conversation 1 Commits 1 Files Changed 2 +19 -20
2 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/includes/_utils.scss
View File

@ -151,3 +151,22 @@ $black: #000000 !default;
.bare-list {
@include bare-list();
}
// Stretch background element to the edge
@mixin stretch-to-edge {
csechet commented 2024-04-16 13:50:37 +02:00
Outdated
Review
Copy Link

Pourquoi utiliser un mixin et pas mettre le CSS directement dans la classe .stretch-to-edge ?

Pourquoi utiliser un mixin et pas mettre le CSS directement dans la classe .stretch-to-edge ?
width: 100vw;
margin-left: calc(-50vw + 50%);
padding-right: calc(50vw - 50%);
padding-left: calc(50vw - 50%);
// for flex-grid context on .size--1-1 element
&.size--1-1 {
flex-basis: 100vw;
margin-left: calc(-50vw + 50% + (var(--grid-gutter, 0px) / 2));
padding-left: calc(50vw - 50% + (var(--grid-gutter, 0px) / 2));
margin-right: calc(-50vw + 50% - (var(--grid-gutter, 0px) / 2));
padding-right: calc(50vw - 50% + (var(--grid-gutter, 0px) / 2));
}
}
.stretch-to-edge {
@include stretch-to-edge();
}

20
static/nice-metropole/_custom.scss
View File

@ -1,23 +1,3 @@
//
// UTILS
//
// Stretch element background to the edge
@mixin stretch-to-edge {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding-right: calc(50vw - 50%);
padding-left: calc(50vw - 50%);
// for flex-grid context on .size--1-1 element
&.size--1-1 {
flex-basis: 100vw;
margin-left: calc(-50vw + 50% + (var(--grid-gutter, 0px) / 2));
padding-left: calc(50vw - 50% + (var(--grid-gutter, 0px) / 2));
margin-right: calc(-50vw + 50% - (var(--grid-gutter, 0px) / 2));
padding-right: calc(50vw - 50% + (var(--grid-gutter, 0px) / 2));
}
}
//
// TYPO
//