From 40497b32bdac0593fc1255df69eac4b3b96e793d Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Mon, 28 Nov 2022 19:24:39 +0100
Subject: [PATCH] refacto half dimension
---
assets/sass/_theme/_utils.sass | 7 +++++--
assets/sass/_theme/blocks/call_to_action.sass | 2 +-
assets/sass/_theme/blocks/gallery.sass | 14 +++++++-------
assets/sass/_theme/blocks/image.sass | 6 +++---
assets/sass/_theme/blocks/pages.sass | 4 ++--
assets/sass/_theme/blocks/timeline.sass | 14 +++++++-------
assets/sass/_theme/blocks/video.sass | 4 ++--
assets/sass/_theme/design-system/footer.sass | 4 ++--
assets/sass/_theme/design-system/table.sass | 11 ++++++++++-
9 files changed, 39 insertions(+), 27 deletions(-)
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index ead4eafc..b4b19cd5 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -40,6 +40,9 @@
.programs__section &
@content
+@function half($size)
+ @return calc(#{$size} / 2)
+
@mixin link($color: $link-color)
color: $color
text-decoration-color: rgba($color, 0.3)
@@ -87,8 +90,8 @@
margin-left: auto
margin-right: auto
max-width: $grid-max-width
- padding-left: calc(#{$grid-gutter-sm} / 2)
- padding-right: calc(#{$grid-gutter-sm} / 2)
+ padding-left: half($grid-gutter-sm)
+ padding-right: half($grid-gutter-sm)
width: 100%
@include media-breakpoint-up(md)
padding-left: $grid-gutter
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index c5695a2b..efb433a5 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -41,7 +41,7 @@
&:last-child
margin-bottom: 0
.call_to_action--with-image
- padding-top: calc(#{$grid-gutter-sm} / 2)
+ padding-top: half($grid-gutter-sm)
display: flex
flex-direction: column
> *
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index c79569d6..972f5e28 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -33,12 +33,12 @@
.gallery
align-items: baseline
@include in-page-with-sidebar
- @include grid(3, md, calc(#{$grid-gutter} / 2), calc(#{$grid-gutter} / 2))
+ @include grid(3, md, half($grid-gutter), half($grid-gutter))
@include in-page-without-sidebar
@include grid(4, md)
@include media-breakpoint-down(md)
@include grid(2)
- grid-gap: calc(#{$grid-gutter-sm} / 2) !important
+ grid-gap: half($grid-gutter-sm) !important
figure
&:after
content: 'Â ' // This is used to allow align baseline without figcaption
@@ -54,15 +54,15 @@
margin-top: 0
.container
.top
- padding-right: calc(#{$grid-gutter-sm} / 2)
+ padding-right: half($grid-gutter-sm)
@include media-breakpoint-up(md)
- padding-right: calc(#{$grid-gutter} / 2)
+ padding-right: half($grid-gutter)
.splide
display: flex
flex-direction: column
&__track
overflow: visible
- margin-right: -calc(#{$grid-gutter-sm} / 2)
+ margin-right: half(-$grid-gutter-sm)
.splide__slide
transition: opacity .3s ease
opacity: 0.1
@@ -71,7 +71,7 @@
&.is-active
opacity: 1
@include media-breakpoint-up(md)
- margin-right: -calc(#{$grid-gutter} / 2)
+ margin-right: half(-$grid-gutter)
&__slide
flex-shrink: initial
&:last-child
@@ -80,7 +80,7 @@
img
max-width: 100%
figure
- margin-right: calc(#{$grid-gutter} / 2)
+ margin-right: half($grid-gutter)
picture
img
// FIXME Arnaud: I would like images at constant height, can't manage to get it right.
diff --git a/assets/sass/_theme/blocks/image.sass b/assets/sass/_theme/blocks/image.sass
index 42824371..31df8338 100644
--- a/assets/sass/_theme/blocks/image.sass
+++ b/assets/sass/_theme/blocks/image.sass
@@ -15,8 +15,8 @@
@extend .meta
picture
display: block
- margin-left: calc(-#{$grid-gutter-sm} / 2)
- margin-right: calc(-#{$grid-gutter-sm} / 2)
+ margin-left: half(-$grid-gutter-sm)
+ margin-right: half(-$grid-gutter-sm)
@include in-page-with-sidebar
@include media-breakpoint-up(md)
@@ -38,7 +38,7 @@
align-items: flex-end
> a
width: col(7)
- margin-left: calc(#{$grid-gutter} / 2)
+ margin-left: half($grid-gutter)
display: block
order: 2
picture
diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass
index aa952075..5a249f76 100644
--- a/assets/sass/_theme/blocks/pages.sass
+++ b/assets/sass/_theme/blocks/pages.sass
@@ -28,7 +28,7 @@
@extend .h3
p
@extend .small
- margin-top: calc(#{$spacing1} / 2)
+ margin-top: half($spacing1)
@include in-page-without-sidebar
.pages
@include grid(3, xl)
@@ -55,7 +55,7 @@
margin-top: calc(#{$spacing2}
.page
.title
- margin-top: calc(#{$spacing1} / 2)
+ margin-top: half($spacing1)
a
@extend .meta
@include hover-translate-icon(before, 3)
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index aa0be3ea..bcba81f5 100644
--- a/assets/sass/_theme/blocks/timeline.sass
+++ b/assets/sass/_theme/blocks/timeline.sass
@@ -11,7 +11,7 @@
border-radius: 50%
content: ""
height: 9px
- left: calc(-#{$grid-gutter} / 2)
+ left: half(-$grid-gutter)
margin-top: 0.5em
position: absolute
width: 9px
@@ -20,7 +20,7 @@
background: $color-text
bottom: -0.5em
content: ""
- left: calc(-#{$grid-gutter} / 2)
+ left: half(-$grid-gutter)
position: absolute
top: 0.5em
width: 1px
@@ -33,7 +33,7 @@
margin-bottom: $spacing0
@include media-breakpoint-down(md)
.event
- padding-left: calc(#{$grid-gutter-sm} / 2)
+ padding-left: half($grid-gutter-sm)
&::after, &::before
left: 0
@include media-breakpoint-up(md)
@@ -44,7 +44,7 @@
display: flex
&::before, &::after
left: col(3)
- margin-left: calc(#{$grid-gutter} / 2)
+ margin-left: half($grid-gutter)
&::before
transform: translateX(-4px)
p:first-child
@@ -79,7 +79,7 @@
color: $block-timeline-horizontal-color
cursor: pointer
font-size: 1rem
- padding: calc(#{$grid-gutter} / 2)
+ padding: half($grid-gutter)
&:first-child
@include icon(arrow-left, before)
&:last-child
@@ -101,7 +101,7 @@
width: 100%
.event
flex: none
- padding: 0 calc(#{$grid-gutter} / 2)
+ padding: 0 half($grid-gutter)
scroll-snap-align: start
transition: 0.3s opacity
width: 50%
@@ -114,7 +114,7 @@
margin-bottom: $spacing1
opacity: 1
overflow: visible
- width: calc(100% + #{$grid-gutter} / 2)
+ width: calc(100% + half($grid-gutter))
&::before
background: $block-timeline-horizontal-color
border-radius: 50%
diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass
index eedab63e..f0c2c5f9 100644
--- a/assets/sass/_theme/blocks/video.sass
+++ b/assets/sass/_theme/blocks/video.sass
@@ -9,7 +9,7 @@
margin-left: auto
@include media-breakpoint-down(md)
.video
- margin-left: calc(-#{$grid-gutter-sm} / 2)
- margin-right: calc(-#{$grid-gutter-sm} / 2)
+ margin-left: half(-$grid-gutter-sm)
+ margin-right: half(-$grid-gutter-sm)
.video + p
margin-top: $spacing0
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/footer.sass b/assets/sass/_theme/design-system/footer.sass
index 2ac1b548..f69f464f 100644
--- a/assets/sass/_theme/design-system/footer.sass
+++ b/assets/sass/_theme/design-system/footer.sass
@@ -46,9 +46,9 @@ footer[role="contentinfo"]
// TODO : add padding on every link in typography ?
[class^="nav-"]
- margin-left: calc(#{$spacing0} / -2)
+ margin-left: half(-$spacing0)
a
- padding: calc(#{$spacing0} / 2)
+ padding: half($spacing0)
// END TODO
diff --git a/assets/sass/_theme/design-system/table.sass b/assets/sass/_theme/design-system/table.sass
index 1853badc..49e6adb4 100644
--- a/assets/sass/_theme/design-system/table.sass
+++ b/assets/sass/_theme/design-system/table.sass
@@ -37,4 +37,13 @@ table
border-top: 1px solid $color-border
.table-responsive
- overflow-x: auto
\ No newline at end of file
+ overflow-x: auto
+ margin-left: half(-$grid-gutter-sm)
+ margin-right: half(-$grid-gutter-sm)
+ padding-left: half($grid-gutter-sm)
+ padding-right: half($grid-gutter-sm)
+ @include media-breakpoint-up(md)
+ margin-left: half(-$grid-gutter)
+ margin-right: half(-$grid-gutter)
+ padding-left: half($grid-gutter)
+ padding-right: half($grid-gutter)
\ No newline at end of file
--
GitLab