From eb7ec489fbb56786457b9c5fd5796de8aa3a1cbd Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Tue, 8 Nov 2022 10:41:54 +0100
Subject: [PATCH] handle grid in px and spacing in rem
---
assets/sass/_theme/_configuration.sass | 16 ++++++++--------
assets/sass/_theme/blocks/timeline.sass | 2 +-
assets/sass/_theme/design-system/nav.sass | 10 +++++-----
assets/sass/_theme/design-system/pagination.sass | 4 ++--
assets/sass/_theme/sections/programs.sass | 2 +-
5 files changed, 17 insertions(+), 17 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index a6bf9685..88ed0372 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -64,19 +64,19 @@ $btn-padding-y: px2rem(6) !default
$breadcrumb-color: invert($main-color) !default
// Spacing
-$spacing0: 12px !default
-$spacing1: 24px !default
-$spacing2: 48px !default
-$spacing3: 64px !default
-$spacing4: 128px !default
-$spacing5: 256px !default
+$spacing0: px2rem(12) !default
+$spacing1: px2rem(24) !default
+$spacing2: px2rem(48) !default
+$spacing3: px2rem(64) !default
+$spacing4: px2rem(128) !default
+$spacing5: px2rem(256) !default
// TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom
// Grid
-$grid-gutter: $spacing3 !default
+$grid-gutter: 64px !default
$grid-max-width: 1980px !default
-$grid-gutter-sm: $spacing1 !default
+$grid-gutter-sm: 40px !default
// Z-index
$zindex-nav-accessibility: 1010 !default
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index 4303969e..a2d523ee 100644
--- a/assets/sass/_theme/blocks/timeline.sass
+++ b/assets/sass/_theme/blocks/timeline.sass
@@ -58,7 +58,7 @@
color: $block-timeline-horizontal-color
cursor: pointer
font-size: 1rem
- padding: calc(#{$grid-gutter} / 2)
+ padding: $grid-gutter / 2
&:first-child
@include icon("arrow-left", before)
&:last-child
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index d6e946b5..72c2091a 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -65,7 +65,7 @@
> li
> a, span
display: block
- padding: $spacing0
+ padding: calc(#{$spacing0} * 0.5) $spacing0
&:last-child
a, span
padding-right: 0
@@ -100,14 +100,14 @@
@include grid(4, md)
@else
.dropdown-menu
- padding-bottom: $spacing0/2
+ padding-bottom: calc(#{$spacing0}/2)
padding-left: $spacing0
- padding-top: $spacing0/2
+ padding-top: calc(#{$spacing0}/2)
padding-right: $spacing0
.nav-level-2
> li > a
- padding-bottom: $spacing0/2
- padding-top: $spacing0/2
+ padding-bottom: calc(#{$spacing0}/2)
+ padding-top: calc(#{$spacing0}/2)
display: block
@include media-breakpoint-down(md)
diff --git a/assets/sass/_theme/design-system/pagination.sass b/assets/sass/_theme/design-system/pagination.sass
index e2aca22d..c05edc30 100644
--- a/assets/sass/_theme/design-system/pagination.sass
+++ b/assets/sass/_theme/design-system/pagination.sass
@@ -47,7 +47,7 @@
border-top: 1px solid #adb5bd
@include media-breakpoint-up(md)
border: 0
- padding: $spacing0/2 $spacing0
+ padding: calc(#{$spacing0}/2) $spacing0
a
background-color: transparent
border: 0
@@ -131,7 +131,7 @@
li
a
line-height: 140%
- padding: $spacing0/2 $spacing0
+ padding: calc(#{$spacing0}/2) $spacing0
text-decoration: none
transition: background-color .15s ease-in-out
&.disabled
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index 3e3c6bb0..c6c2ffed 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -132,7 +132,7 @@ ol.programs
margin: 0 #{-$spacing1}
padding: px2rem(20) 0
li
- padding: $spacing1/3 $spacing1/2
+ padding: calc(#{$spacing1}/3) calc(#{$spacing1}/2)
margin-bottom: 0
// .blocks
// .container
--
GitLab