Created by
Rik Kendell
2017-08-02
< div id = "privacy-bar" >
< div class = "wrapper" >
< div class = "container" >
< p > By continuing to use this site you agree to the use of cookies for personalised content and analytics. See our < a href = "#" > Privacy Policy</ a > for more details.</ p >
< a href = "javascript:void(0)" class = "close" >< span class = "visuallyhidden" > Close</ span ></ a >
</ div >
</ div >
</ div > <!-- .privacy-bar -->
// Set Cookie function
function createCookie ( name , value , days ) {
if ( days ) {
var date = new Date ();
date . setTime ( date . getTime () + ( days * 24 * 60 * 60 * 1000 ));
var expires = "; expires=" + date . toGMTString ();
} else var expires = "" ;
document . cookie = escape ( name ) + "=" + escape ( value ) + expires + "; path=/" ;
}
// Privacy Policy Cookies
function cookiesPolicyBar (){
// Check cookie
if ( $ . cookie ( 'theCookieName' ) != "accepted" ) $ ( '#privacy-bar' ). fadeIn ();
//Assign cookie on click
$ ( '#privacy-bar a' ). on ( 'click' , function (){
createCookie ( "theCookieName" , "accepted" , 90 ); // Cookie expires in 90 days
$ ( '#privacy-bar' ). fadeOut ();
});
}
// Run cookie policy function
cookiesPolicyBar ();
// Breakpoints
$tab-start : 640 px ;
$lap-start : 860 px ;
$desk-start : 1024 px ;
// Colours
$dark-grey : #4c4c4a ;
$light-grey : #e6e5dd ;
$blue : #003645 ;
$text-colour : $dark-grey ;
// Privacy Bar
#privacy-bar {
background : $ light-grey ;
bottom : 0 ;
display :none ;
position : fixed ;
width : 100 % ;
z-index : 100 ;
a {
color : $ text-colour ! important ;
& :hover , & :focus {
color : #000 ! important ;
}
}
p {
color : $ text-colour ;
font-size : 0 .875em ;
max-width : calc ( 100 % - 40px );
@ media ( min-width : $ tab-start ) {
max-width : none ;
}
@media ( min-width : $lap-start ) {
text-align : center ;
}
& :last-of-type {
margin-bottom : 0 ;
}
}
// Close icon
.close {
position : absolute ;
top : 16px ;
right : 16px ;
width : 19px ;
height : 19px ;
border-radius : 50 % ;
border : 1px solid $ blue ;
transition : border-color 0 .25s ease-in-out ;
@ media ( min-width : $ lap-start ) {
width : 25px ;
height : 25px ;
}
& :before ,
& :after {
content : '' ;
height : 11px ;
width : 1px ;
position : absolute ;
background : $ blue ;
left : 8px ;
top : 3px ;
transition : background-color 0 .25s ease-in-out ;
@ media ( min-width : $ lap-start ) {
height : 15px ;
left : 11px ;
top : 4px ;
}
}
& :before {
transform : rotateZ ( 45deg );
}
& :after {
transform : rotateZ ( -45deg );
}
& :hover , & :focus {
border-color : #000 ;
& :after , & :before {
background-color : #000 ;
}
}
}
}