- .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
+[data-type="multiple"]
+
+ .fill-area
+ height: 160px
+ background-color: $standard-fill-area
+
+ .screen.question-multiple
+ 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: 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
- 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)
+ 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
+ width: 100%
+ +flex-config(space-between,false,false,center)
- &.nok:after
- background: transparent
+ input:checked+label
+ border-color: $texts-color
+ transition: border-color .1s ease-out
+ &:after
+ +opacity(.16)
+ &.nok:after
+ background: transparent
.m
.screen.question-multiple
<div class="swiper-container bottom-slider">
<div class="swiper-wrapper">
@foreach($propositions as $prop)
- <div class="swiper-slide" data-prop="{{$prop['n']}}">
- <div class="swiper-slide not-visible">
- {{ $prop }}
++ <div class="swiper-slide not-visible" data-prop="{{$prop['n']}}">
+ {{ $prop['p'] }}
</div>
@endforeach
</div>