thinkful-ui/src/NotificationView/notifications.less

Shared navigation and UI resources for Thinkful.

@import "~tfstyleguide/vars";

.tui-notification-view {
  position: absolute;
  right: 130px;
  top: 0;

  @media @tablet {
    right: 160px;
  }

  @media @bigger {
    right: 130px;
  }
}

.tui-notification-toggle {
  z-index: 1;
  .proxima-bold;
  display: inline-block;
  width: 46px;
  height: 46px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  user-select: none;

  &:hover {
    color: @black;
  }
}

.tui-notification-count {
  display: inline-block;
  color: @gray75;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
  text-align: center;
  background-color: @yellow;

  .icon-notification  {
    position: relative;
    font-size: 28px;
    top: 1px;
  }

  .tui-notification-toggle:hover & {
    background-color: @yellow75;
    color: @black;
  }

  &.tui-notification-count__clear {
    background-color: transparent;
    color: @blue75;

    .tui-notification-toggle:hover & {
      background-color: transparent;
      color: @blue75;
    }
  }
}

.tui-notification-list-container {
  position: absolute;
  z-index: 5;
  top: 100%;
  padding-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: padding-top 0.22s ease,
              transform 0.22s ease,
              opacity 0.22s ease,
              max-height 0.15s ease;

  &.tui-notification-list-container__visible {
    opacity: 1;
    padding-top: 15px;
    max-height: (60px * 5 + 16px);
    transform: translate(-50%, 0);
  }
}

.tui-notification-list {
  position: relative;
  margin-bottom: 0;
  border: 1px solid @gray25;

  &:before {
    content: '';
    position: absolute;
    bottom: 100%;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 11px solid @gray25;
    left: 56.4%;
    transform: translate(-50%, 0);
  }

  &:after {
    content: '';
    position: absolute;
    bottom: 100%;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid @white;
    left: 56.4%;
    transform: translate(-50%, 0);
  }
}

.tui-notification-item {
  z-index: 5;
  position: relative;
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
  padding: 9px 15px 10px;
  width: 330px;
  max-width: 100%;
  background-color: @white;

  + .tui-notification-item {
    border-top: 1px solid @gray25;
  }

  &:hover {
    background: @gray5;
  }
}

.tui-notification-item-dismiss {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: @gray50;

  &:hover {
    color: @gray75;
  }

  .icon-close {
    font-size: 24px;
  }
}

.tui-notification-content {
  display: block;
  color: @black;

  &:hover {
    color: @black;
  }
}

.tui-notification-time {
  display: block;
  font-size: 12px;
  line-height: 20px;
  color: @gray50;
  text-transform: uppercase;
}

.tui-notification-message {
  margin-bottom: 0;
  line-height: 20px;
  font-size: 14.5px;
}