From aad54bbec1bfe0db04c9351dd603174b67ea679e Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 28 Jul 2023 15:28:30 +0200
Subject: [PATCH] wip #6182 @0:20 + mixins, css page intro

---
 app/Elearning/QuizCompiler.php         |  2 ++
 resources/quizv2/style/004-mixins.sass | 11 ++++++++---
 resources/quizv2/style/100-global.sass | 15 +++++++++++++++
 resources/quizv2/style/101-header.sass |  1 +
 resources/quizv2/style/102-intro.sass  |  8 ++++++++
 resources/quizv2/style/style.sass      |  1 +
 resources/views/quizv2/index.blade.php |  2 +-
 7 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 resources/quizv2/style/102-intro.sass

diff --git a/app/Elearning/QuizCompiler.php b/app/Elearning/QuizCompiler.php
index e65f1391c..909cccf8c 100644
--- a/app/Elearning/QuizCompiler.php
+++ b/app/Elearning/QuizCompiler.php
@@ -112,6 +112,8 @@ class QuizCompiler extends Base
         $this->sassVariables['neutral-color'] = $this->theme->neutralColor;
         // Breakpoints
         $this->sassVariables['breakpoints'] = "(sm: (min: '576px',max: '575.98px') , md: (min: '768px',max: '767.98px'), lg: (min: '1024px',max: '1023.98px' ), xl: (min: '1200px', max: '1199.98px'))";
+        // Fonts size
+        $this->sassVariables['fonts-size'] = "(14: 20px, 16: 22px, 20: 28px, 24: 35px)";
 
         $this->writeSass();
     }
diff --git a/resources/quizv2/style/004-mixins.sass b/resources/quizv2/style/004-mixins.sass
index 30b5ed257..f35373340 100644
--- a/resources/quizv2/style/004-mixins.sass
+++ b/resources/quizv2/style/004-mixins.sass
@@ -2,16 +2,15 @@
     @media (min-width: $min-width)
         @content
 
+
 @mixin below($max-width)
     @media (max-width: $max-width)
         @content
 
+
 @mixin breakpoint($breakpoint, $direction: min)
-    //check if the supplied breakpoint exists in our breakpoits map
     $breakpoint-values: map-get($breakpoints, $breakpoint)
     $breakpoint: map-get($breakpoint-values, $direction)
-    //check if we are writing styles for larger or smaller screens
-
     @media (#{$direction}-width: $breakpoint)
         @content
 
@@ -35,3 +34,9 @@
 
     @if $align-items != false
         align-items: $align-items
+
+
+@mixin font-size($size)
+    font-size: #{$size}px
+    line-height: map-get($fonts-size,$size)
+
diff --git a/resources/quizv2/style/100-global.sass b/resources/quizv2/style/100-global.sass
index 45056aaf8..376432f95 100644
--- a/resources/quizv2/style/100-global.sass
+++ b/resources/quizv2/style/100-global.sass
@@ -9,3 +9,18 @@ body
 #quiz
     max-width: 1200px
     margin: 0 auto
+
+.radius
+    border-radius: 16px
+
+.btn
+    padding: 12px
+    text-align: center
+    font-size: 20px
+    border: none
+    cursor: pointer
+    display: inline-block
+    &.primary
+        background: radial-gradient(at 16% 7px, rgba(255,102,186,1) 0%, rgba(208,22,124,1) 91%)
+    //&.secondary
+
diff --git a/resources/quizv2/style/101-header.sass b/resources/quizv2/style/101-header.sass
index 4a393db3a..ed22c309a 100644
--- a/resources/quizv2/style/101-header.sass
+++ b/resources/quizv2/style/101-header.sass
@@ -1,4 +1,5 @@
 #title
     height: 80px
+    +flex-config(space-between,false,row,center)
 #logo
     height: 40px
diff --git a/resources/quizv2/style/102-intro.sass b/resources/quizv2/style/102-intro.sass
new file mode 100644
index 000000000..4478eb9c3
--- /dev/null
+++ b/resources/quizv2/style/102-intro.sass
@@ -0,0 +1,8 @@
+#welcome
+    max-width: 590px
+    margin: 0 auto
+    h2
+        margin: 0 0 12px
+        +font-size(20)
+    p
+        +font-size(16)
diff --git a/resources/quizv2/style/style.sass b/resources/quizv2/style/style.sass
index 0f1327e95..b621654e9 100644
--- a/resources/quizv2/style/style.sass
+++ b/resources/quizv2/style/style.sass
@@ -5,3 +5,4 @@
 
 @import 100-global
 @import 101-header
+@import 102-intro
diff --git a/resources/views/quizv2/index.blade.php b/resources/views/quizv2/index.blade.php
index 26d838062..bfcfe6e87 100644
--- a/resources/views/quizv2/index.blade.php
+++ b/resources/views/quizv2/index.blade.php
@@ -21,7 +21,7 @@
         <div class="screen" id="welcome">
             <h2>{{$data->intro_title}}</h2>
             <p>{{$data->intro_text}}</p>
-            <a class="btn">{{$data->intro_button}} <span data-icon="running-man"></span></a>
+            <a class="btn primary radius">{{$data->intro_button}} <span data-icon="running-man"></span></a>
         </div>
     @endif
 </div>
-- 
2.39.5