175 lines
3.0 KiB
SCSS
175 lines
3.0 KiB
SCSS
/*
|
|
* Announcment Bar Module
|
|
*
|
|
* A module displaying time senstive announcemnts
|
|
*
|
|
*/
|
|
|
|
|
|
/*
|
|
* Variables
|
|
*/
|
|
|
|
$announcement-bar: '.announcement-bar';
|
|
$announcement-bar-height: 104px;
|
|
$announcement-bar-width: 752px;
|
|
|
|
|
|
/*
|
|
* Class
|
|
*/
|
|
|
|
#{$announcement-bar} {
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-bottom: -($announcement-bar-height / 2);
|
|
margin-left: -($announcement-bar-width / 2);
|
|
position: absolute;
|
|
width: $announcement-bar-width;
|
|
|
|
@include respond-to('mobile') {
|
|
height: auto;
|
|
margin: 0;
|
|
position: static;
|
|
text-align: center;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// SLIDES CONTAINER
|
|
#{$announcement-bar}-slides {
|
|
background: $white;
|
|
box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
|
|
box-sizing: border-box;
|
|
color: $blue-grey-500;
|
|
height: $announcement-bar-height;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: $announcement-bar-width;
|
|
|
|
@include respond-to('mobile') {
|
|
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
|
height: 240px;
|
|
margin: 0;
|
|
padding: ($unit * 4) ($unit * 6);
|
|
text-align: center;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// INDIVIDUAL SLIDE
|
|
#{$announcement-bar}-slide {
|
|
bottom: 0;
|
|
box-sizing: border-box;
|
|
height: $announcement-bar-height;
|
|
left: 0;
|
|
margin-bottom: -$announcement-bar-height;
|
|
opacity: 0;
|
|
padding: $unit * 4;
|
|
position: absolute;
|
|
right: 0;
|
|
transition: all .8s;
|
|
width: $announcement-bar-width;
|
|
z-index: $layer-1;
|
|
|
|
@include respond-to('mobile') {
|
|
height: auto;
|
|
margin: 0;
|
|
padding:0;
|
|
width: auto;
|
|
transition: opacity .8s;
|
|
visibility: hidden;
|
|
}
|
|
|
|
img, p {
|
|
float: left;
|
|
|
|
@include respond-to('mobile') {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
img {
|
|
height: 40px;
|
|
margin: 0 ($unit) 0 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 18px;
|
|
line-height: $unit * 5;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.button,
|
|
.button.md-button {
|
|
background: rgba($blue-grey-50, .87);
|
|
border-radius: 2px;
|
|
color: $blue-grey-500;
|
|
float: right;
|
|
font-size: 14px;
|
|
line-height: $unit * 5;
|
|
margin: 0;
|
|
padding: 0 ($unit * 5);
|
|
transition: all .3s;
|
|
|
|
&:hover {
|
|
background: $blue-grey-50;
|
|
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
|
color: $blue-500;
|
|
}
|
|
|
|
@include respond-to('mobile') {
|
|
float: none;
|
|
display: block;
|
|
margin-top: $unit * 2;
|
|
}
|
|
}
|
|
|
|
|
|
&.is-visible {
|
|
margin-bottom: 0;
|
|
opacity: 1;
|
|
z-index: $layer-2;
|
|
|
|
@include respond-to('mobile') {
|
|
position: static;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
// NAV BAR
|
|
#{$announcement-bar} nav {
|
|
bottom: -($unit * 5);
|
|
color: $blue-grey-500;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
text-align: center;
|
|
z-index: $layer-1;
|
|
|
|
button {
|
|
background: $blue-grey-50;
|
|
border: none;
|
|
border-radius: 100px;
|
|
height: $unit + 4;
|
|
margin: 0 ($unit / 2);
|
|
outline: none;
|
|
overflow: hidden;
|
|
text-indent: -3000px;
|
|
width: $unit + 4;
|
|
|
|
&.is-selected,
|
|
&.selected {
|
|
background: $blue-grey-100;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|