From 7f4b423f0ace80c9e65a38b00bf0cae0fe0a4a9a Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Tue, 8 Nov 2022 11:11:10 +0100
Subject: [PATCH] grid in rem
---
assets/sass/_theme/_configuration.sass | 6 +++---
assets/sass/_theme/_utils.sass | 4 ++--
assets/sass/_theme/blocks/timeline.sass | 10 +++++-----
assets/sass/_theme/design-system/pagination.sass | 2 +-
4 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 88ed0372..321c3cd3 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -74,9 +74,9 @@ $spacing5: px2rem(256) !default
// TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom
// Grid
-$grid-gutter: 64px !default
-$grid-max-width: 1980px !default
-$grid-gutter-sm: 40px !default
+$grid-gutter: px2rem(64) !default
+$grid-max-width: px2rem(1980) !default
+$grid-gutter-sm: px2rem(40) !default
// Z-index
$zindex-nav-accessibility: 1010 !default
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index da6ba5f2..fe172a63 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -68,8 +68,8 @@
margin-left: auto
margin-right: auto
max-width: $grid-max-width
- padding-left: $grid-gutter-sm / 2
- padding-right: $grid-gutter-sm / 2
+ padding-left: calc(#{$grid-gutter-sm} / 2)
+ padding-right: calc(#{$grid-gutter-sm} / 2)
width: 100%
@include media-breakpoint-up(md)
padding-left: $grid-gutter
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index a2d523ee..5c4dbc5b 100644
--- a/assets/sass/_theme/blocks/timeline.sass
+++ b/assets/sass/_theme/blocks/timeline.sass
@@ -1,6 +1,6 @@
.block-timeline--vertical
.events
- padding-left: $grid-gutter/2
+ padding-left: calc(#{$grid-gutter} / 2)
position: relative
&::before
background: $main-color
@@ -58,7 +58,7 @@
color: $block-timeline-horizontal-color
cursor: pointer
font-size: 1rem
- padding: $grid-gutter / 2
+ padding: calc(#{$grid-gutter} / 2)
&:first-child
@include icon("arrow-left", before)
&:last-child
@@ -67,8 +67,8 @@
cursor: default
opacity: 0.3
.events
- margin-left: $grid-gutter / -2
- margin-right: $grid-gutter / -2
+ margin-left: calc(#{$grid-gutter} / -2)
+ margin-right: calc(#{$grid-gutter} / -2)
// TODO : fixer le px gap en desktop entre chaque event
ol
display: flex
@@ -79,7 +79,7 @@
width: 100%
.event
flex: none
- padding: 0 $grid-gutter / 2
+ padding: 0 calc(#{$grid-gutter} / 2)
scroll-snap-align: start
transition: 0.3s opacity
width: 50%
diff --git a/assets/sass/_theme/design-system/pagination.sass b/assets/sass/_theme/design-system/pagination.sass
index c05edc30..fc92bcff 100644
--- a/assets/sass/_theme/design-system/pagination.sass
+++ b/assets/sass/_theme/design-system/pagination.sass
@@ -2,7 +2,7 @@
// font-family: $font-family-sans-serif
font-size: px2rem(14)
justify-content: center
- margin: calc($grid-gutter * 2.5) 0 0
+ margin: calc(#{$grid-gutter} * 2.5) 0 0
li
@include list-reset
// @extend .page-item
--
GitLab