From 8504da1c1080b4dfe7e9cb4e6ffca615d31fdb29 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 27 Sep 2023 17:37:53 +0200
Subject: [PATCH] wip #6300 @1.5

---
 style/100-global.sass                     |   6 ++
 style/102-intro.sass                      |   3 +
 style/103-question-multiple.sass          | 108 +++++++++++++---------
 views/screens/question_multiple.blade.php |   1 +
 4 files changed, 72 insertions(+), 46 deletions(-)

diff --git a/style/100-global.sass b/style/100-global.sass
index 2bb37a0..3b151c4 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -243,3 +243,9 @@ body
 
     .vertical-center-screen-relative
         position: relative
+
+.fill-area
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
diff --git a/style/102-intro.sass b/style/102-intro.sass
index f59c503..7e2c726 100644
--- a/style/102-intro.sass
+++ b/style/102-intro.sass
@@ -1,4 +1,7 @@
 [data-screen="welcome"]
+    .fill-area
+        background-color: $intro-fill-area
+
     .screen-image
         +flex-config(center)
 
diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index 273e409..4d45151 100644
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -1,56 +1,72 @@
-.screen.question-multiple
-    top: 45px
-    +above(992px)
-        top: 93px
-    .list
-        display: grid
-        grid-gap: 16px
-        grid-template-columns: repeat(2, 1fr)
-
-        &-item
-            opacity: 0
-            label
-                width: 100%
-                height: 58px
-                @extend .radius
-                +opacity(.80,background-color,$neutral-color)
-                padding: 0 16px
-                cursor: pointer
-                border: 2px solid rgba($texts-color, .24)
-                position: relative
-                overflow: hidden
-                display: flex
-                &:after
-                    content: ""
-                    width: 100%
-                    height: 100%
-                    position: absolute
-                    top: 0
-                    left: 0
-                    transition: background-color .1s ease-out
-                &.ok:after,
-                &.missed:after
-                    //
-                    +opacity(.24,background-color,$ok-color)
-                *
-                    z-index: 1
-                .content
-                    opacity: 0
+[data-type="multiple"]
+
+    .fill-area
+        height: 160px
+        background-color: $standard-fill-area
+
+    .screen.question-multiple
+        top: 45px
+
+        +above(992px)
+            top: 93px
+
+        .list
+            display: grid
+            grid-gap: 16px
+            grid-template-columns: repeat(2, 1fr)
+
+            &-item
+                opacity: 0
+
+                label
                     width: 100%
-                    +flex-config(space-between,false,false,center)
+                    height: 58px
+                    @extend .radius
+                    +opacity(.80, background-color, $neutral-color)
+                    padding: 0 16px
+                    cursor: pointer
+                    border: 2px solid rgba($texts-color, .24)
+                    position: relative
+                    overflow: hidden
+                    display: flex
+
+                    &:after
+                        content: ""
+                        width: 100%
+                        height: 100%
+                        position: absolute
+                        top: 0
+                        left: 0
+                        transition: background-color .1s ease-out
+
+                    &.ok:after,
+                    &.missed:after
+                        //
+                        +opacity(.24, background-color, $ok-color)
+
+                    *
+                        z-index: 1
 
-            input:checked+label
-                border-color: $texts-color
-                transition: border-color .1s ease-out
-                &:after
-                    +opacity(.16)
-                &.nok:after
-                    background: transparent
+                    .content
+                        opacity: 0
+                        width: 100%
+                        +flex-config(space-between, false, false, center)
+
+                input:checked + label
+                    border-color: $texts-color
+                    transition: border-color .1s ease-out
+
+                    &:after
+                        +opacity(.16)
+
+                    &.nok:after
+                        background: transparent
 
 .m
     .screen.question-multiple
         .list
             grid-gap: 8px
+
         .list-item
             label
                 height: 56px
diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php
index fbdcd6d..898baa7 100644
--- a/views/screens/question_multiple.blade.php
+++ b/views/screens/question_multiple.blade.php
@@ -1,4 +1,5 @@
 <div class="container-screen none" data-screen="q-{{$position}}" data-type="multiple">
+    <div class="fill-area"></div>
     @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
     <div class="screen question-multiple">
         <form id="form-{{$position}}">
-- 
2.39.5