font-size: #{$size}px
line-height: map-get($fonts-size,$size)
+@mixin padding-container()
+ padding: 16px
+ +breakpoint(md)
+ padding: 24px
min-height: 680px
margin: 0 auto
padding: 0 24px 24px
+ position: relative
.radius
border-radius: 16px
.btn
- padding: 12px
+ padding: 0 12px
text-align: center
font-size: 20px
border: none
cursor: pointer
display: inline-block
+ height: 58px
+ +flex-config(center,false,false,center)
@extend .radius
+ +font-size(20)
&.primary
- background: radial-gradient(at 16% 7px, rgba(255,102,186,1) 0%, rgba(208,22,124,1) 91%)
+ background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
+ box-shadow: 0 4px 6px rgba(0,0,0,.2)
&.secondary
-
+ background-color: #{$texts-color}2f
+ padding-left: 22px
+ &.reset
+ max-width: 144px
+ &.info
+ max-width: 177px
.access
- @extend .radius
+ border-radius: 4px
+ padding: 6px 12px
+ +font-size(16)
+ background-color: #{$texts-color}2f
+ text-transform: uppercase
+ margin-left: 16px
+flex-config(space-between,false,row,center)
#logo
height: 40px
-
+ filter: brightness(10)
#footer
position: absolute
- bottom: 24px
+ bottom: 0
+ left: 0
+ width: 100%
+flex-config(space-between,false,row,center)
+ +padding-container()
+
+ .btn.primary
+ width: 100%
+ max-width: 400px
+ position: absolute
+ left: 50%
+ bottom: 24px
+ transform: translateX(-50%)
<footer id="footer">
- @if($reset)
+ @isset($reset)
<a class="btn secondary">
Reset
<span class="access">R</span>
</a>
- @endif
+ @endisset
<a class="btn primary">
{{$data->intro_button}}
<span class="access">space</span>
- <span data-icon="running-man"></span>
+ @isset($time)
+ <span data-icon="running-man"></span>
+ @endisset
</a>
- @if($info)
+ @isset($info)
<a class="btn secondary">
More infos
<span class="access">F1</span>
</a>
- @endif
+ @endisset
</footer>
<h2>{{$data->intro_title}}</h2>
<p>{{$data->intro_text}}</p>
</div>
-@include('quizv2.footer', ['data', $data])
+@include('quizv2.footer', ['data' => $data])