block testimonial

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
 

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

assets/sass/_theme/design-system/reset.sass

@@ -43,3 +43,4 @@
 // table
 //     border-collapse: collapse
 //     border-spacing: 0
+

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

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

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