wip #6193 @3:30 responsive mobile

diff --git a/style/100-global.sass b/style/100-global.sass
index 41401db2d192708c1af3e138e10bbaf3d34219f7..5df6b53abb577c079e3ec8f7d997639f8b5e05aa 100644 (file)
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -31,8 +31,6 @@ body
     +flex-config(center,false,false,center)
     @extend .radius
     +font-size(20)
-    +below(992px)
-        height: 56px
     &.primary
         background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
         box-shadow: 0 4px 6px rgba(0,0,0,.2)
@@ -46,9 +44,6 @@ body
                 right: 0
                 top: 0
                 background-color: #E062A8
-        +below(993px)
-            flex: 1
-            margin-left: 16px
         span
             z-index: 1
     &.secondary
@@ -56,15 +51,8 @@ body
         padding-left: 22px
     &.reset
         max-width: 144px
-        +below(992px)
-            width: 56px
-            flex-shrink: 0
-            padding: 0
-        .text
-            +below(992px)
-                +flex-config(center,false,false,center)
-            svg
-                width: 50%
+        .text svg
+            width: 50%
     &.info
         max-width: 177px
 
@@ -78,9 +66,6 @@ body
     margin-left: 16px
     +flex-config(center,false,false,center)
     border: 0
-    +below(993px)
-        &:not(.missed):not(.ok):not(.nok)
-            display: none
     &.space
         width: 70px
     &.infos
@@ -114,16 +99,33 @@ body
         width: 100%
         z-index: 0
         img.mobile
-            display: inline
+            display: none
             height: 100%
             width: 100%
             object-fit: cover
             &.question-multiple
                 object-position: top
 
-            +above($screenSizeMobile)
-                display: none
+.m
+    .screen-image
+        img.mobile
+            display: inline
         img:not(.mobile)
             display: none
-            +above($screenSizeMobile)
-                display: inline
+
+    .btn
+        height: 56px
+        &:first-of-type:not(:last-of-type),
+        &.toggle-answers-review
+            margin-right: 16px
+        &.primary
+            flex: 1
+        &.reset
+            width: 56px
+            flex-shrink: 0
+            padding: 0
+            .text
+                +flex-config(center,false,false,center)
+
+    .access:not(.missed):not(.ok):not(.nok)
+        display: none

diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass
index 0e6576629b47c270002676d7afd7ad7d015ce591..fc502288421eac1e0593e6ff374ec133e823201f 100644 (file)
--- a/style/101-header-footer.sass
+++ b/style/101-header-footer.sass
@@ -17,14 +17,10 @@ header
 .header-question
     text-align: center
     .abovetitle
-        +font-size(14)
-        +above($screenSizeMobile)
-            +font-size(16)
+        +font-size(16)
     .progress-container
-        margin: 4px 0 16px
+        margin: 6px 0 16px
         +flex-config(center,false,false,center)
-        +above($screenSizeMobile)
-            margin: 6px 0 16px
     .progress-item
         width: 16px
         height: 4px
@@ -41,11 +37,8 @@ header
         &.nok
             background-color: $nok-color
     h1
-        +font-size(20)
-        height: 84px
-        +above(991px)
-            height: auto
-            +font-size(24)
+        height: auto
+        +font-size(24)
 
 .footer
     position: absolute
@@ -53,11 +46,8 @@ header
     left: 0
     width: 100%
     z-index: 2
-    +flex-config(center,false,row,center)
     +padding-container()
-    +breakpoint(md)
-        +flex-config(space-between,false,row,center)
-
+    +flex-config(space-between,false,row,center)
 
     .btn.primary
         width: 100%
@@ -66,3 +56,22 @@ header
         left: 50%
         bottom: 24px
         transform: translateX(-50%)
+
+.m
+    .header-question
+        .abovetitle
+            +font-size(14)
+        .progress-container
+            margin: 4px 0 16px
+        h1
+            +font-size(20)
+            height: 84px
+
+    .footer
+        +flex-config(center,false,row,center)
+
+    .btn.primary
+        position: relative
+        left: 0
+        bottom: 0
+        transform: none

diff --git a/style/102-intro.sass b/style/102-intro.sass
index a622c274310a75eac1e9d5207ab3d7dfee1f66d9..ed8fdca6be32b33c3cc13d5f32951381f5fee8fd 100644 (file)
--- a/style/102-intro.sass
+++ b/style/102-intro.sass
@@ -5,9 +5,7 @@
 #welcome
     max-width: 590px
     margin: 0 auto
-    top: 138px
-    +breakpoint(md)
-        top: 160px
+    top: 160px
     h2
         margin: 0 0 12px
         +font-size(20)
@@ -20,3 +18,7 @@
         .word
             opacity: 0
             transform: translateY(100px)
+
+.m
+    #welcome
+        top: 138px

diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index 7dc8c3a26baa63c8968271c00a7d570a059222a0..a7bed405e809fe59d175d84280eacf51c7cacdcb 100644 (file)
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -5,8 +5,6 @@
     .list
         display: grid
         grid-gap: 16px
-        +below($screenSizeMobile)
-            grid-gap: 8px
         +breakpoint(md)
             grid-template-columns: repeat(2, 1fr)
         &-item
@@ -21,9 +19,6 @@
                 border: 2px solid rgba($texts-color, .24)
                 position: relative
                 overflow: hidden
-                +below($screenSizeMobile)
-                    height: 56px
-                    +font-size(14)
                 &:after
                     content: ""
                     width: 100%
@@ -46,3 +41,12 @@
                     +opacity(.16)
                 &.nok:after
                     background: transparent
+
+.m
+    .screen.question-multiple
+        .list
+            grid-gap: 8px
+        .list-item
+            label
+                height: 56px
+                +font-size(14)

diff --git a/style/105-outro.sass b/style/105-outro.sass
index 79baa858d88c8273a5aa52d5b1eb6ecf370186db..7ba43607483bd99a1050f9de46d03f65473d8054 100644 (file)
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -1,57 +1,28 @@
 .score
-    height: 600px //680(hauteur de base) - 80(hauteur du header)
     border-radius: 40px
     overflow: hidden
     +flex-config(false,false,row,stretch)
-    +below(993px)
-        position: static
-        border-radius: 0
-    +above(992px)
-        +opacity(.48,background-color,$neutral-color)
-        height: 576px //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
-
-    &:after
-        +below(993px)
-            content: ""
-            width: 100%
-            position: absolute
-            height: 100%
-            +opacity(.48,background-color,$neutral-color)
-            top: 0
-            left: 0
-
+    +opacity(.48,background-color,$neutral-color)
+    height: 576px //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
     .subtitle
         +opacity(.8,color,$texts-color)
-        +below(993px)
-            margin-bottom: 20px
 
     &-content
         flex: 1
         padding: 24px
         position: relative
         z-index: 1
-        +below(993px)
-            padding: 0
         h1
             +font-size(40)
             margin-bottom: 9px
-            +below(993px)
-                +font-size(24)
         .subtitle
             +font-size(16)
-            +below(993px)
-                +font-size(14)
 
     &-content-wrapper
         +flex-config(false,false,false,center)
         position: relative
         top: var(--space-21-66)
         left: var(--space-21-66)
-        +below(993px)
-            +flex-config(center,false,column,center)
-            top: 74px
-            left: 0
-            text-align: center
 
     &-counter
         height: 0
@@ -61,9 +32,6 @@
         position: relative
         +font-size(80)
         margin-right: 60px
-        +below(993px)
-            margin: 0 0 24px
-            font-size: 56px
         #progress-counter
             width: 100%
             height: 100%
@@ -90,41 +58,15 @@
 
     &-answers-review_container
         width: 36.11111%
-        +below(993px)
-            width: 100%
-            height: 100%
-            position: absolute
-            top: 0
-            left: 0
-            z-index: 99
-            display: flex
-            padding: 16px 16px 0
-            align-items: flex-end
-            visibility: hidden
-            //+opacity(0,background-color,$ok-color)
-            backdrop-filter: blur(4px)
-            &.active
-                //+opacity(1,background-color,$ok-color)
-                visibility: visible
 
     &-answers-review
         height: 100%
         background-color: $neutral-color
         padding: 24px 24px 0
         position: relative
-        +below(993px)
-            width: 100%
-            height: calc(100% - 78px)
-            padding: 8px 16px 0
-            border-top-left-radius: 20px
-            border-top-right-radius: 20px
         h2
             +font-size(24)
             margin-bottom: 5px
-            +below(993px)
-                margin-bottom: 12px
-                text-align: center
-                position: relative
             #close-answers
                 position: absolute
                 right: 0
@@ -134,8 +76,6 @@
         .subtitle
             +font-size(16)
             margin-bottom: 22px
-            +below(993px)
-                display: none
 
         &:after
             content: ""
@@ -149,9 +89,6 @@
     #answers-list
         height: 85%
         padding-right: 24px
-        +below(993px)
-            height: 90%
-            padding-right: 5px
         .item
             padding-left: 20px
             margin-bottom: 22px
@@ -185,19 +122,11 @@
             .answer
                 +opacity(.8,color,$texts-color)
 
-    .toggle-answers-review
-        +above(992px)
-            display: none
-
-
     footer
         position: absolute
         width: calc(100% - 48px)
         bottom: 24px
         z-index: 1
-        +below(993px)
-            width: 100%
-            bottom: 0
         .restart-sentence
             margin-bottom: 14px
         .controls
@@ -205,12 +134,9 @@
 
     .restart-sentence,
     .btn.restart
-        +below(993px)
-            display: none
+        display: none
         &-mobile
-            +flex-config(center)
-            +above(992px)
-                display: none
+            display: none
 
     .restart-sentence-mobile
         margin-bottom: 14px
@@ -244,3 +170,76 @@
                 bottom: 1px
                 left: 1px
                 right: 1px
+
+.m
+    .score
+        height: 600px //680(hauteur de base) - 80(hauteur du header)
+        position: static
+        border-radius: 0
+        &:after
+            content: ""
+            width: 100%
+            position: absolute
+            height: 100%
+            +opacity(.48,background-color,$neutral-color)
+            top: 0
+            left: 0
+        .subtitle
+            margin-bottom: 20px
+        &-content
+            padding: 0
+            h1
+                +font-size(24)
+            .subtitle
+                +font-size(14)
+        &-content-wrapper
+            +flex-config(center,false,column,center)
+            top: 74px
+            left: 0
+            text-align: center
+        &-counter
+            margin: 0 0 24px
+            font-size: 56px
+        &-answers-review_container
+            width: 100%
+            height: 100%
+            position: absolute
+            top: 0
+            left: 0
+            z-index: 99
+            display: flex
+            padding: 16px 16px 0
+            align-items: flex-end
+            visibility: hidden
+            //+opacity(0,background-color,$ok-color)
+            backdrop-filter: blur(4px)
+            &.active
+                //+opacity(1,background-color,$ok-color)
+                visibility: visible
+        &-answers-review
+            width: 100%
+            height: calc(100% - 78px)
+            padding: 8px 16px 0
+            border-top-left-radius: 20px
+            border-top-right-radius: 20px
+            h2
+                margin-bottom: 12px
+                text-align: center
+                position: relative
+            .subtitle
+                display: none
+        #answers-list
+            height: 90%
+            padding-right: 5px
+        .toggle-answers-review
+            display: none
+        footer
+            width: 100%
+            bottom: 0
+
+        .restart-sentence,
+        .btn.restart
+            display: none
+            &-mobile
+                +flex-config(center)
+