causeway-standard-theme/causeway/components/site-notification.less

//notification sidebar
.notification-content-right {
  min-width: 0px;
  width: 360px;
  height: 100%;
  position: fixed;
  top: 0;
  right: -370px;
  z-index: 3000;
  background-color: @grey;
  border-left: 1px solid @black080;
  padding: 90px 0 30px 0;
  height: 100%;
  .notification-content-wrapper {
    padding: 0 20px;
    height: 100%;
  }
  .notification-header {
    border-bottom: 1px solid @black080;
    color: @white;
    margin: 0 -20px;
    padding: 10px 15px;
    h2 {
      .font-size(12);
      font-weight: bold;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
  }
  .notification-content {
    margin-right: -20px;
    color: @white;
    height: 100%;
    overflow-y: auto;
    ul {
      list-style: none;
      margin: 0;
      padding: 0 0 20px 0;
      li {
        border-bottom: 1px solid @black060;
        padding: 10px 55px 10px 20px;
        position: relative;
      }
    }
    a {
      font-weight: bold;
      text-decoration: underline;
      color: @white;
    }
    .glyphicon-close {
      text-decoration: none;
      position: absolute;
      right: 25px;
      top: 14px;
      width: 10px;
      height: 10px;
      -moz-opacity: .7;
      -webkit-opacity: .7;
      opacity: .7;
      .font-size(9);
      &:before {
        .font-size(9);
      }
      &:hover {
        -moz-opacity: 1;
        -webkit-opacity: 1;
        opacity: 1;
      }
    }
  }

  @media @desktop {
    width: 100%;
    right: -100%;
  }
}

.notification-top-bar {
  background: @enterprise-blue;
  max-height: 50px;
  height: auto;
  margin: -22px 0 20px 0;
  .font-size(12);
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: @white;
  padding: 10px 50px 10px 22px;
  position: relative;
  z-index: 2999;
  .border-radius(0);
  border: 0;
  display: none;
  -webkit-transition: margin 100ms;
  -moz-transition: margin 100ms;
  -ms-transition: margin 100ms;
  -o-transition: margin 100ms;
  transition: margin 100ms;
  &.show {
    display: block;
    -webkit-transition: margin 100ms;
    -moz-transition: margin 100ms;
    -ms-transition: margin 100ms;
    -o-transition: margin 100ms;
    transition: margin 100ms;
  }
  a {
    color: @white;
    text-decoration: underline;
    &.close {
      font-weight: lighter;
      color: @white;
      .opacity(1);
      text-decoration: none;
      position: absolute;
      top: 50%;
      right: 25px;
      margin-top: -5px;
      display: block;
      width: 12px;
      height: 12px;
      .font-size(12);
    }
  }
  p {
    padding: 0;
    margin: 0;
  }
  &.alert {
    background: @red;
  }
  &.success {
    background: @green;
  }
  &.cookie {
    background: #e9e9e9;
    color: @black060;
    font-weight: normal;
    position: fixed;
    margin-bottom: 0;
    bottom: 30px;
    right: 0;
    left: 0;
    a {
      color: inherit;
    }
  }
}

@media @desktop {

  .notification-top-bar {
    margin-top: 0;
    &.cookie {
      left: 0;
      bottom: 0;
    }
  }

  .notification-content-right {
    top: 0;
    bottom: 0;
    overflow: auto;
    padding-top: 100px;
  }
  .notification-content-open {
    overflow: hidden;
  }
}