@dabapps/roe/src/less/banners.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

.banner {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  top: auto;
  height: @banner-height;
  background-color: @banner-background;
  border-top: @banner-border;
  z-index: 1100;
  transform: translate(0, 100%);
  transition: transform 0.3s ease-in-out;

  &.top {
    bottom: auto;
    top: 0;
    transform: translate(0, -100%);
    border-top: @border-none;
    border-bottom: @banner-border;
  }

  &.open {
    transform: translate(0, 0);
  }
}

.cookie-banner {
  z-index: 1200;
}