@uportal/app-framework/components/css/buckyless/notifications.less

Application Framework for uPortal

/**
 * Licensed to Apereo under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Apereo licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License.  You may obtain a
 * copy of the License at the following location:
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Notification Styling */
.notifications {
  padding-left: 0;
  padding-right: 0;

  &.view__notifications {
    background: @white;
  }

  .notifications__empty {
    padding: 24px 18px;
  }

  .notifications-list {
    padding: 0;

    .notification-item {
      color: #333;
      font-weight: 400;
      margin: 0;
      padding: 0 16px;
      transition: @background-transition;
      border-bottom: 1px solid @grayscale3;

      &:hover {
        background-color: rgba(0, 0, 0, 0.12);
      }

      .notifications-list__action {
        min-width: 60px;
        text-align: right;
      }

      notifications-list-item {
        width: 100%;

        .md-list-item-text {
          padding: 16px 0;

          /* Priority notifications are DEPRECATED. */
          .notification__priority-message {
            color: @grayscale8;
            font-size: 12px;
            margin-bottom: 6px;

            .material-icons {
              min-height: 18px;
              min-width: 18px;
              height: 18px;
              width: 18px;
              font-size: 18px;
              line-height: 16px;
              margin-left: -5px;
            }
          }

          .notification-buttons {
            margin: 0 8px;

            @media (max-width: @xs) {
              margin: 12px 0 0;

              .md-button {
                margin: 6px 16px 0 0;
              }
            }
          }

          @media (max-width: @xs) {
            width: 90%;
          }
        }
      }

      .md-secondary {
        color: @grayscale7;
        transition: @transition-color;

        &:hover {
          color: @grayscale9;
        }
      }
    }

    @media (max-width: @sm) {
      margin-right: 0;
    }
  }

  li.read {
    padding: 8px 10px;
  }

  li.read:hover {
    cursor: pointer;
  }

  .notification-badge {
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    font-weight: 200;
    text-align: center;
    color: @white;

    &.notification-badge-empty {
      color: lighten(@color1, 30%);
    }

    /* MOBILE BELL ON TOP OF HAMBURGER */
    &.notification-badge-mobile {
      position: absolute;
      background-color: @white;
      width: 18px;
      height: 18px;
      margin: 0;
      border-radius: 50%;
      padding: 0;
      color: @color1;
      z-index: @top-bar-1;
      top: 0;
      right: 26px;

      > .material-icons {
        color: @color1;
        font-size: 16px;
        position: absolute;
        width: 18px;
        height: 18px;
        min-height: 18px;
        min-width: 18px;
        line-height: 18px;
        top: 0;
        left: 0;
      }
    }

    .number-of-nots {
      color: @color1;
      font-weight: 400;
      font-size: 20px;
      z-index: @top-bar-1;
      position: absolute;
      line-height: 40px;
      left: 14px;
    }

    .more-than-10-nots {
      left: 13px;
      font-size: small;
    }
  }

  /* DESKTOP-ONLY NOTIFICATION BELL */
  .notification-desktop {
    .notification-badge {
      position: relative;
      transition: @transition-color;

      .material-icons {
        width: 40px;
        height: 40px;
        font-size: 36px;
        border-radius: 50%;
        line-height: 40px;
        color: var(--myuw-app-bar-color, #fff);
      }

      &:hover {
        color: #ccc;
      }

      md-progress-circular {
        position: absolute;
        top: 14px;
        left: 12px;
      }
    }
  }
}

/* PRIORITY NOTIFICATIONS (DEPRECATED) */
.priority-gt-xs .priority-notifications {
  height: 46px;
  width: 100%;
  padding: 4px 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  transition: @transition-all;
  position: fixed;
  z-index: @top-bar-1;

  &.animate-hide {
    opacity: 0;
    height: 0;
  }

  .priority-bubble {
    box-shadow: @box-shadow-4;
    background-color: @grayscale2;
    border-radius: 6px;
    position: relative;
    z-index: @top-bar-1;

    .compact-buttons {
      .md-button:not([disabled]) {
        text-transform: none;
        line-height: 28px;
        min-width: 60px;
        min-height: 28px;
        font-size: 12px;
        font-weight: 500;
        margin-left: 0;
      }
    }
  }

  .notification-message {
    color: @black;
    padding: 4px 26px;
    font-size: 0;
    line-height: 1;
    text-align: center;
    display: block;
    margin-bottom: 0;

    > span {
      font-size: 14px;
    }
  }

  p {
    margin-bottom: 0;
  }

  .notification-buttons {
    margin-left: 26px;

    .md-button {
      text-transform: none;
      min-height: 0;
      max-height: 26px;
      line-height: 26px;
    }
  }

  .dismiss-priority {
    .md-button {
      min-height: 0;
      max-height: 30px;
      width: 30px;
      padding: 0;

      .material-icons {
        font-size: 22px;
        color: @grayscale10;
      }
    }
  }
}

// New Stuff Div

/*
  TODO: determine whether any of this is still needed
*/

// News Mockups

.news-article-title {
  font-weight: 200;
  position: absolute;
  bottom: 28px;
  right: 15px;
  color: #333;
  padding: 0;
  margin: 0;
  font-size: 1.8em;
}

.news-article-description {
  position: absolute;
  bottom: 8px;
  right: 15px;
  color: #333;
  margin: 0;
  padding: 0;
}

.news-section-title {
  font-size: 0.7em;
  position: absolute;
  bottom: 53px;
  right: 5px;
  color: #333;
  margin: 0;
  padding: 0;
}

.news-article a {
  color: @color1;
}

.page-h1 {
  font-size: 2.3em;
  color: @color1;
  padding: 0;
  font-weight: 200;
}