diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index ba4b69d..2916b69 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -38,6 +38,7 @@ @import 'bigchain/terminal'; @import 'bigchain/nyan'; @import 'bigchain/dropdowns'; +@import 'bigchain/cookie-banner'; @import 'bigchain/utilities'; // Content types diff --git a/_src/_assets/styles/bigchain/_cookie-banner.scss b/_src/_assets/styles/bigchain/_cookie-banner.scss new file mode 100644 index 0000000..5cc9883 --- /dev/null +++ b/_src/_assets/styles/bigchain/_cookie-banner.scss @@ -0,0 +1,59 @@ +.cookie-banner { + position: fixed; + bottom: $spacer / 2; + z-index: 10; + background: rgba($brand-main-blue-dark, .6); + backdrop-filter: saturate(150%) blur(10px); + font-size: $font-size-sm; + padding: $spacer / 2 $spacer; + text-align: center; + max-width: 36rem; + border-radius: $border-radius; + transition: opacity .6s ease-out; + opacity: 0; + transition-delay: 3s; + + .wf-active &, + .wf-inactive & { + opacity: 1; + } + + p { + margin-bottom: $spacer / 2; + + &:first-child { + opacity: .8; + } + } + + @media ($screen-sm) { + left: 50%; + margin-left: -18rem; + text-align: left; + justify-content: space-between; + align-items: center; + + p { + margin: 0; + + &:first-child { + flex: 0 0 75%; + } + + &:last-child { + flex: 0 0 22%; + text-align: right; + } + } + + .btn { + &:last-child { + padding-right: 0; + } + } + + &[style='display: block;'] { // work around plugin style injection + display: flex !important; // stylelint-disable-line declaration-no-important + } + } +} diff --git a/_src/_includes/cookie-banner.html b/_src/_includes/cookie-banner.html index 7eca46f..c71c8de 100644 --- a/_src/_includes/cookie-banner.html +++ b/_src/_includes/cookie-banner.html @@ -1,6 +1,10 @@ -