plumes/features/notifications-panel/css/pl-notifications-panel.less

Flying-fast Metro future vision components

@import "../../common/less/common-variables.less";
@import "../../common/less/common-mixins.less";

@-webkit-keyframes pl-notifications-panel-item-show { 0% { -webkit-transform: translateX(10rem); opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } }
@-moz-keyframes pl-notifications-panel-item-show { 0% { -moz-transform: translateX(10rem); opacity: 0; } 100% { -moz-transform: translateX(0); opacity: 1; } }
@-ms-keyframes pl-notifications-panel-item-show { 0% { -ms-transform: translateX(10rem); opacity: 0; } 100% { -ms-transform: translateX(0); opacity: 1; } }
@-o-keyframes pl-notifications-panel-item-show { 0% { -o-transform: translateX(10rem); opacity: 0; } 100% { -o-transform: translateX(0); opacity: 1; } }
@keyframes pl-notifications-panel-item-show { 0% { transform: translateX(10rem); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

.pl-notifications-panel {
  position: relative;
  width: 100%;
  height: 100%;

  .transition(all 0.35s @easeOutQuart);

  .pl-notifications-panel-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;

    ul {
      margin-bottom: 0;
    }
  }

  .pl-notifications-panel-item {
    .noselect(pointer);
    list-style: none;
    padding: 1rem 2rem;
    margin: 0;
    position: relative;
    min-height: 7.1rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;

    &:hover {
      background: #f6f6f6;
    }

    .animation(pl-notifications-panel-item-show 0.35s @easeOutQuart);

    &.pl-notifications-panel-noitem {
      cursor: default;
      border: none;
      min-height: auto;

      &:hover {
        background: white;
      }

      p {
        margin: 0;
      }
    }

    img {
      position: absolute;
      top: 1rem;
      left: 2rem;
      width: 5rem;
      height: 5rem;
    }

    p {
      margin: 0 0 0 6.5rem;
      padding: 0;
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 400;

      strong {
        font-weight: 600;
      }
    }

    .pl-notifications-panel-item-time {
      color: #aaa;
      font-size: 1.2rem;
      margin-top: 0.2rem;
    }

    .pl-notifications-panel-buttons {
      text-align: center;
      margin: 2rem 0 0;

      button {
        margin: 0.5rem 0.5rem 0;
        padding: 0 1rem;
        height: 2rem;
        border-radius: 1rem;
        border: none;
        line-height: 2rem;
        background: #2196F3;
        color: white;
      }
    }
  }

  .pl-notifications-panel-emails {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
  }

  &.theme-dark {
    .pl-notifications-panel-item {
      color: white;
      border-bottom: 1px solid #555;

      &:hover {
        background: #3c3c3c;
      }

      &.highlight {
        background: fade(@accentColor, 20%);

        &:hover {
          background: fade(@accentColor, 30%);
        }
      }

      &.pl-notifications-panel-noitem {
        color: white;
        border-bottom: none;

        &:hover {
          background: #333;
        }
      }
    }

    .pl-notifications-panel-emails {
      .pl-button-onoff  {
        color: white;
      }
    }
  }

  &.use-emails {
    .pl-notifications-panel-list {
      bottom: 5rem;
    }
  }
}