<div style="background-color: rgba(30,55,73,.6)">
<div class="bourse-widget" style="background-color: rgba(30,55,73,.6">
<div class="bourse-widget__name">IPN</div>
<div class="bourse-widget__price bourse-widget__price--down">
<span class="bourse-widget__price__change">
<svg class="bourse-widget__price__arrow" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
-1.58%
</span>
<span class="bourse-widget__price__cost">
90.45€
</span>
</div>
<div class="bourse-widget__date">
<span class="bourse-widget__date__time">
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.29 15.71L11 12.41V6h2v5.59l2.71 2.7-1.42 1.42z"/><path d="M12.12 21a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm0-16a7 7 0 1 0 7 7 7 7 0 0 0-7-7z"/></svg>
3:03pm
</span>
<span class="bourse-widget__date__date">
08/21/2018
</span>
</div>
</div>
</div>
/* @bourse-widget */
.bourse-widget {
@include poly-padding--small;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 180px;
transition: top .4s;
@media screen and (min-width: 769px) {
align-items: flex-end;
position: fixed;
top: 160px;
left: 35px;
z-index: 100;
svg {
path {
fill: $white;
}
}
&--white {
background-color: #ffffff;
svg {
path {
fill: $black;
}
}
}
}
&__name {
font-family: 'Biryani', sans-serif;
font-size: 20px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
line-height: 1.3;
letter-spacing: normal;
margin-right: $small-spacing;
padding-left: 3px;
color: $white;
.bourse-widget--white & {
color: $black;
}
@media screen and (max-width: 768px) {
display: none;
}
}
&__price {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: auto;
@media screen and (max-width: 768px) {
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
&__arrow {
width: 14px;
transform: rotate(-90deg);
display: inline-block;
path {
fill: #81cfe2;
}
.bourse-widget__price--down & {
transform: rotate(90deg);
path {
fill: #eb0047;
}
}
}
&__change {
font-size: 14px;
font-weight: 300;
letter-spacing: 1px;
display: flex;
align-items: center;
color: $white;
.bourse-widget--white & {
color: $black;
}
}
&__cost {
font-family: 'Biryani', sans-serif;
font-size: 20px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #81cfe2;
@media screen and (max-width: 768px) {
display: flex;
align-items: center;
}
@media screen and (min-width: 769px) {
line-height: 1.3;
}
.bourse-widget__price--down & {
color: #eb0047;
}
}
@media screen and (max-width: 320px) {
span {
font-size: 90%;
}
}
}
&__date {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 11px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: 0.8px;
margin-left: -3px;
color: $white;
.bourse-widget--white & {
color: $black;
}
@media screen and (max-width: 768px) {
display: none;
}
&__time {
// margin-right: $small-spacing;
display: flex;
align-items: center;
margin-left: -3px;
svg {
display: inline-block;
width: 2.2em;
margin-right: 0.5em;
}
}
&__date {
margin-left: auto;
display: flex;
align-items: center;
}
}
}
import jQuery from 'jQuery'
(function() {
let $widget = $('.bourse-widget')
let heroHeight = $('#hero').outerHeight()
let mastheadHeight = $('.masthead').outerHeight()
let totalOffset = mastheadHeight
let mobileSize = 768
let flag = false
let anchorFlag = false
setTimeout(function() {
if ($('#wpadminbar').length) {
let adminBarHeight = $('#wpadminbar').outerHeight()
totalOffset = Number(totalOffset) + Number(adminBarHeight)
$widget.css('top', totalOffset)
}
}, 150)
// function toggleBg() {
// console.log(heroHeight)
// if ( $widget.offset().top > heroHeight && !$widget.hasClass('bourse-widget--white')) {
// $widget.addClass('bourse-widget--white')
// } else {
// $widget.removeClass('bourse-widget--white')
// }
// }
function mobileBourse() {
let windowWidth = $(window).outerWidth()
if ( windowWidth <= mobileSize ) {
if (!$widget.parents('.masthead__mobile').length) {
$widget.insertAfter('.masthead__mobile .masthead__logo')
}
} else {
if ($widget.parents('.masthead__mobile').length) {
$widget.appendTo('body')
}
}
}
$(document).ready(function () {
mobileBourse()
})
$(window).scroll(function() {
if ($('.anchor-links.fixed').length && !flag) {
let anchorHeight = $('.anchor-links').outerHeight()
totalOffset = Number(totalOffset) + Number(anchorHeight)
$widget.css('top', totalOffset )
flag = true
anchorFlag = true
}
if ($('.anchor-links.fixed').length < 1 && anchorFlag == true) {
let anchorHeight = $('.anchor-links').outerHeight()
totalOffset = Number(totalOffset) - Number(anchorHeight)
$widget.css('top', totalOffset )
anchorFlag = false
flag = false
}
})
$(window).resize(function() {
mobileBourse()
})
})();