From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 14 Aug 2023 16:21:10 +0000 (+0200)
Subject: wip #6182 intégration question drag and drop
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=542e511f656870160f1d79d0de40c9727933484c;p=fluidbook-toolbox.git

wip #6182 intégration question drag and drop
---

diff --git a/resources/quizv2/style/004-mixins.sass b/resources/quizv2/style/004-mixins.sass
index 333b95387..bd8e37f9c 100644
--- a/resources/quizv2/style/004-mixins.sass
+++ b/resources/quizv2/style/004-mixins.sass
@@ -39,7 +39,11 @@
     font-size: #{$size}px
     line-height: map-get($fonts-size,$size)
 
+
 @mixin padding-container()
     padding: 16px
     +breakpoint(md)
         padding: 24px
+
+@mixin radius($size)
+    border-radius: $size
diff --git a/resources/quizv2/style/100-global.sass b/resources/quizv2/style/100-global.sass
index b7af25569..763a60da3 100644
--- a/resources/quizv2/style/100-global.sass
+++ b/resources/quizv2/style/100-global.sass
@@ -51,6 +51,7 @@ body
     text-transform: uppercase
     margin-left: 16px
     +flex-config(center,false,false,center)
+    border: 0
     &.space
         width: 70px
     &.infos
diff --git a/resources/quizv2/style/106-question-draganddrop.sass b/resources/quizv2/style/106-question-draganddrop.sass
new file mode 100644
index 000000000..9d599e9f7
--- /dev/null
+++ b/resources/quizv2/style/106-question-draganddrop.sass
@@ -0,0 +1,94 @@
+.container-screen.question-draganddrop
+    .screen-image
+        width: auto
+        img
+            height: 100%
+        &.zone-1
+            .zone-content
+                left: 24px
+        &.zone-2
+            left: initial
+            right: 0
+            .zone-content
+                right: 24px
+        .zone-content
+            position: absolute
+            top: 50%
+            transform: translateY(-50%)
+            width: 100%
+            max-width: 180px
+            .text
+                margin-bottom: 21px
+
+        form
+            +opacity(.08,background-color,$texts-color)
+            +radius(16px)
+            padding: 8px
+            border: 1px dashed rgba($texts-color,.4)
+        .slot
+            width: 100%
+            height: 51px
+            border: 1px solid rgba($texts-color,.24)
+            +radius(8px)
+
+    .screen
+        +flex-config(center, false, false, center)
+        margin-top: 92px
+        .list
+            position: relative
+            width: 100%
+            max-width: 368px
+            height: 225px
+            margin: 0 16px
+            &-item
+                position: absolute
+                width: 100%
+                height: 100%
+                +radius(16px)
+                &:nth-child(1)
+                    background-color: $neutral-color
+                    z-index: 4
+                    border: 2px solid $texts-color
+                    padding: 20px
+                &:nth-child(2)
+                    opacity: .64
+                    +opacity(.8,background-color,$neutral-color)
+                    transform: scale(.9)
+                    z-index: 3
+                    top: 32px
+                &:nth-child(3)
+                    opacity: .4
+                    +opacity(.8,background-color,$neutral-color)
+                    transform: scale(.81)
+                    z-index: 2
+                    top: 61px
+                &:nth-child(4)
+                    opacity: .16
+                    +opacity(.8,background-color,$neutral-color)
+                    transform: scale(0.72)
+                    z-index: 1
+                    top: 91px
+                &:not(:nth-child(-n+4)) // on cache les items à partir du 5ème
+                    opacity: 0
+                    visibility: hidden
+
+
+    .controls
+        width: 124px
+        padding: 12px 0
+        +font-size(20)
+        +opacity(.16,background-color,$texts-color)
+        border-radius: 16px
+        text-align: center
+        &.left .access
+            transform: rotate(-90deg)
+        &.right .access
+            transform: rotate(90deg)
+        p
+            margin-bottom: 5px
+        .access
+            margin: 0 auto
+            span
+                display: flex
+        svg
+            color: $texts-color
diff --git a/resources/quizv2/style/style.sass b/resources/quizv2/style/style.sass
index 3e9cd8974..b3a649cc4 100644
--- a/resources/quizv2/style/style.sass
+++ b/resources/quizv2/style/style.sass
@@ -9,3 +9,4 @@
 @import 103-question-multiple
 @import 104-animations
 @import 105-outro
+@import 106-question-draganddrop