From 719effeed4cc44a68fba5d8e8ab61a6de82e177a Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Mon, 25 Jul 2022 13:12:10 +0200
Subject: [PATCH] block testimonial
---
assets/sass/_theme/_configuration.sass | 22 +++++++++----------
assets/sass/_theme/blocks/testimonials.sass | 11 +++++-----
assets/sass/_theme/design-system/reset.sass | 1 +
.../sass/_theme/design-system/typography.sass | 2 +-
.../design-system/vendors/glightbox.sass | 6 ++---
.../_theme/design-system/vendors/splide.sass | 14 +++++++-----
6 files changed, 29 insertions(+), 27 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index b69f8719..a4cc5c24 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -18,7 +18,7 @@ $body-font-family: "Georgia", serif !default
$heading-font-family: "Helvetica", "Arial", sans-serif !default
// $font-size-base: 1rem
-$line-height-base: 1.4
+$line-height-base: 1.4 !default
// Fonts sizes
$body-font-size: 16px !default
@@ -105,7 +105,7 @@ $icons: map-merge($icons, ("twitter": "\e90d"))
// Breakpoints
// TODO: réécrire en sass les mixins bootstrap
-$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px) !default
// BLOCKS
@@ -129,19 +129,19 @@ $block-timeline-horizontal-background: black !default
$block-timeline-horizontal-color: white !default
// Block testimonials
-$block-testimonials-xl-font-size: px2rem(50)
-$block-testimonials-xl-line-height: px2rem(55)
-$block-testimonials-xl-font-size-long-text: px2rem(36)
-$block-testimonials-xl-line-height-long-text: px2rem(39.6)
-
-$block-testimonials-font-size: px2rem(24)
-$block-testimonials-line-height: px2rem(28.8)
-// TODO : add font-size breakpoint
+$block-testimonials-xl-font-size: px2rem(50) !default
+$block-testimonials-xl-line-height: px2rem(55) !default
+$block-testimonials-xl-font-size-long-text: px2rem(36) !default
+$block-testimonials-xl-line-height-long-text: px2rem(39.6) !default
+$block-testimonials-font-size: px2rem(24) !default
+$block-testimonials-line-height: px2rem(28.8) !default
+$block-testimonials-pagination-background: $main-border-color !default
+$block-testimonials-pagination-progress-background: $main-color !default
// Sections
$post-media-background: darken($main-background-color, 2) !default
-$post-media-aspect-ratio: 50%
+$post-media-aspect-ratio: 50% !default
$post-categories-color: lighten($main-color, 2) !default
$post-time-color: lighten($main-color, 2) !default
diff --git a/assets/sass/_theme/blocks/testimonials.sass b/assets/sass/_theme/blocks/testimonials.sass
index 84e64e72..0808118f 100644
--- a/assets/sass/_theme/blocks/testimonials.sass
+++ b/assets/sass/_theme/blocks/testimonials.sass
@@ -23,11 +23,11 @@
font-size: $block-testimonials-xl-font-size-long-text
line-height: $block-testimonials-xl-line-height-long-text
&::before
- content: '“'
+ content: "“"
font-size: calc(#{$block-testimonials-font-size} * 3)
line-height: 1
position: absolute
- transform: translate(-15%, -50%)
+ // TODO : ajuster en fonctiond e la typo
figure
font-size: px2rem(16)
@@ -62,7 +62,7 @@
&::after
border: 1px solid black // TODO : variable
border-radius: 50%
- content: ''
+ content: ""
height: 42px
left: 50%
position: absolute
@@ -88,11 +88,10 @@
left: 0
top: 50%
position: absolute
-
&::before
- background-color: black // TODO : variable
+ background-color: $block-testimonials-pagination-background
border-radius: 0
width: 100%
i
- background-color: black // TODO : variable
+ background-color: $block-testimonials-pagination-progress-background
width: 0
diff --git a/assets/sass/_theme/design-system/reset.sass b/assets/sass/_theme/design-system/reset.sass
index 8370df67..36f5598e 100644
--- a/assets/sass/_theme/design-system/reset.sass
+++ b/assets/sass/_theme/design-system/reset.sass
@@ -43,3 +43,4 @@
// table
// border-collapse: collapse
// border-spacing: 0
+
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index e9639ec2..f230530f 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -47,7 +47,7 @@ small, .small
font-size: $small-font-size
blockquote, .blockquote
- font-style: italic
+ margin: 0
cite
font-size: px2rem(18)
font-style: normal
diff --git a/assets/sass/_theme/design-system/vendors/glightbox.sass b/assets/sass/_theme/design-system/vendors/glightbox.sass
index 1c1a8797..65b836b9 100644
--- a/assets/sass/_theme/design-system/vendors/glightbox.sass
+++ b/assets/sass/_theme/design-system/vendors/glightbox.sass
@@ -9,14 +9,14 @@
color: $main-background-color
.gnext,
.gprev
- @extend .icon
+ // @extend .icon
color: white
svg
display: none
.gnext
- @extend .icon-arrow-right
+ // @extend .icon-arrow-right
.gprev
- @extend .icon-arrow-left
+ // @extend .icon-arrow-left
.gdesc-inner
padding-left: 0
padding-right: 0
diff --git a/assets/sass/_theme/design-system/vendors/splide.sass b/assets/sass/_theme/design-system/vendors/splide.sass
index d39c892a..50e8d7fe 100644
--- a/assets/sass/_theme/design-system/vendors/splide.sass
+++ b/assets/sass/_theme/design-system/vendors/splide.sass
@@ -10,10 +10,10 @@
svg
display: none
&--prev
- // @extend .icon-arrow-left
+ @include icon('arrow-left')
right: 100%
&--next
- // @extend .icon-arrow-right
+ @include icon('arrow-right')
left: 100%
&__pagination
display: flex
@@ -26,17 +26,17 @@
padding: 0
width: 48px
&::before
- background-color: rgba($link-color, .3)
+ background-color: rgba($link-color, 0.3)
border-radius: 50%
- content: ''
+ content: ""
display: block
height: 10px
margin: auto
- transition: background .3s ease
+ transition: background 0.3s ease
width: 10px
&:hover
&::before
- background-color: rgba($link-color, .6)
+ background-color: rgba($link-color, 0.6)
&.is-active
&::before
background-color: $link-color
@@ -60,10 +60,12 @@
width: 48px
&__play
+ @include icon('play')
// @extend .icon-play
&__pause
// @extend .icon-pause
+ @include icon('pause')
display: none
--
GitLab