public/js/views/app/unreadBannerView.less

   1 @import (reference) "../../../less/colors.less";
   2 @import (reference) "../../../less/trp3Vars.less";
   3 @import (reference) "../../../less/trpButtons.less";
   4 @import "../controls/dropdown";
   5
   6 @banner-height: 30px;
   7
   8 body.banner-top {
   9   .chat-container > div:first-child {
  10     padding-top: 100px;
  11   }
  12 }
  13
  14 .banner-wrapper {
  15   text-align: left;
  16   position: absolute;
  17   top: 16px;
  18   right: 15px;
  19   overflow: hidden;
  20   height: @banner-height;
  21   z-index: 1;
  22   width: 140px;
  23
  24   .banner {
  25     transition: top .2s ease-in-out;
  26
  27     &.slide-away {
  28       top: -100%;
  29     }
  30
  31     .mention {
  32       color: @orange;
  33       background-color: rgba(250,229,210,0.8);
  34       border: 1px solid @orange;
  35     }
  36
  37     .unread {
  38       color: @green;
  39       background-color: rgba(213,245,226,0.8);
  40       border: 1px solid @green;
  41     }
  42
  43     button {
  44       .trpButton;
  45       cursor: pointer;
  46       font-size: 12px;
  47
  48       color: #666;
  49       background-color: rgba(241,240,237,0.8);
  50       border: 1px solid rgba(191,190,187,1);
  51
  52       padding: 4px 6px;
  53       border-radius: 2px;
  54
  55       &:hover {
  56         outline: none;
  57       }
  58
  59       &.main {
  60         width: 100%;
  61         text-align: left;
  62       }
  63
  64       &.side {
  65         background-color: transparent;
  66         border: none;
  67         position: absolute;
  68         top: 0;
  69         bottom: 0;
  70         right: 0;
  71       }
  72
  73       #banner-message {
  74         margin-left: 4px;
  75       }
  76     }
  77   }
  78 }
  79
  80 .banner-wrapper.bottom {
  81   top: auto;
  82   bottom: 10px;
  83   left: auto;
  84   right: 15px;
  85
  86   .banner {
  87     top: auto;
  88     bottom: 0;
  89
  90     transition: bottom .2s ease-in-out;
  91
  92     &.slide-away {
  93       top: auto;
  94       bottom: -100%;
  95     }
  96     button.side {
  97       display: none;
  98     }
  99   }
 100 }