From c29a3fdb8cc69fad6c9aa3b0a2146b1f8e18bbca Mon Sep 17 00:00:00 2001 From: soufiane Date: Tue, 22 Aug 2023 18:21:17 +0200 Subject: [PATCH] wip #6193 @3:30 responsive mobile --- style/100-global.sass | 46 ++++----- style/101-header-footer.sass | 39 +++++--- style/102-intro.sass | 8 +- style/103-question-multiple.sass | 14 ++- style/105-outro.sass | 155 +++++++++++++++---------------- 5 files changed, 139 insertions(+), 123 deletions(-) diff --git a/style/100-global.sass b/style/100-global.sass index 41401db..5df6b53 100644 --- 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 0e65766..fc50228 100644 --- 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 a622c27..ed8fdca 100644 --- 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 7dc8c3a..a7bed40 100644 --- 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 79baa85..7ba4360 100644 --- 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) + -- 2.39.5