wip #6300 @1.5

diff --git a/style/100-global.sass b/style/100-global.sass
index 2bb37a07f8fe090abf884e36d19e4ad839b4a4c5..3b151c47401a75a92bf45df8cff24a7e35ad3b6e 100644 (file)
--- 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 f59c5037d3236b058639c9a90a32157163541d0b..7e2c726eb4c0873b7b7acdefa19cbbe4cf9ad536 100644 (file)
--- 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 273e409e99b080719785e78a3afb4a70efd73f9b..4d45151e6b54e8ddddd74e57a7e00145462c6401 100644 (file)
--- 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 fbdcd6d0df85a44f02bc7d752cae14ae352d0b22..898baa732d4102da2b0c1eed5e1b72d0b86e649a 100644 (file)
--- 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}}">