notification.directive.scss

@import 'topcoder/tc-includes';

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin mobile {
  @media screen and (max-width: #{$tablet-width - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media screen and (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media screen and (min-width: #{$desktop-width}) {
    @content;
  }
}

.notification{
  margin-bottom: 24px;
  .live{
    width: 50px;
    height: 30px;
    line-height: 30px;
    color: $white;
    background-color: #E73851;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
  }
  .customTag{
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    color: $white;
    background: #E73851;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
  }
  .collapsed{
    display: flex;
    align-items: center;
    color: $white;
    font-size: 18px;
    height: 60px;
    background: $tc-gray-90;
    padding: 0 15px;
    .live{
      margin-right: 12px;
    }
    .customTag{
      margin-right: 12px;
    }
    .header{
      font-weight: bold;
    }
    .details{
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 60px;
    }
    .expand{
      cursor: pointer;
      font-size: 26px;
      font-weight: 100;
      margin-left: 38px;
    }
  }
  .expanded{
    background-color: $tc-black;
    color: $tc-black;
    display: flex;
    position: relative;

    /* ======
     With Video
    ======*/
    @include mobile {
      flex-direction: column;
      align-items: center;
    }

    .notification-bg-desktop,
    .notification-bg-tablet,
    .notification-bg-mobile {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: center top;
      // background-position: 0 20%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .notification-bg-desktop {
      @include desktop {
        display: block;
      }
    }
    .notification-bg-tablet {
      @include tablet {
        display: block;
      }
    }
    .notification-bg-mobile {
      @include mobile {
        display: block;
      }
    }
    .mask{
      position: absolute;
      top: 0;
      left:0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }
    .left{
      flex: 1;
      position: relative;
      @include desktop {
        height: 400px;
        padding: 20px;
      }
      @include tablet {
        height: 325px;
        padding: 20px;
      }
      @include mobile {
        height: 250px;
        display: flex;
        flex-direction: column;
        padding: 14px;
        padding-top: 0;
        padding-bottom: 10px;
        margin-top: 0;
      }
    }
    .header{
      font-weight: bold;
      font-size: 40px;
      margin-bottom: 14px;
      color: #FFF;
      @include desktop {
        margin-top: 0;
        width: 100%;
        padding: 20px 0 13px 44px;
      }
      @include tablet {
        font-size: 36px;
         /*
        ======
        With Video
        ======*/

        /*
        ======
        With Logo
        ======
        flex: 1;
        text-align: center;
        */

      }
      @include mobile {
        font-size: 24px;
        text-align: center;
        padding-top: 10px;
        flex: 1;
        /*
        ======
        With Logo
        ======
        font-size: 18px;
        flex: 1;
        */
      }
    }
    .details{
      font-size: 16px;
      line-height: 16px;
      font-weight: 100;
      color: #FFF;
      position: relative;
      @include desktop {
        max-width: 100%;
        padding-left: 44px;
        font-size: 26px;
        line-height: 31px;
        margin-bottom: 55px;
      }
      @include tablet {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 40px;
        /*
        ======
        With Logo
        ======
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 16px;
        text-align: center;
        */
      }
      @include mobile {
        font-size: 16px;
        line-height: 16px;
        text-align: center;
        /*
        ======
        With Logo
        ======
        font-size: 14px;
        margin-bottom: 4px;
        text-align: center;
        */
      }
    }
    .action{
      background-color: white;
      padding: 10px 20px;
      border-radius: 26px;
      @include desktop {
        position: relative;
        margin-left: 40px;
      }
      @include tablet {
        text-align: center;
      }
      @include mobile {
        padding: 6px 20px;
        font-size: 14px;
        margin-top: 4px;
        text-align: center;
      }
    }
    .right{
      flex: 1;
      position: relative;
      background-color: transparentize($black, 0.25);
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 55px;
      width: 50%;
      @include desktop {
        height: 350px;
      }
      @include tablet {
        min-height: 250px;
        margin: 10px;
        margin-top: 65px;
        margin-bottom: 20px;
      }
      @include mobile {
        margin-top: 0;
        width: 100%;
        max-width: 450px;
        min-height: 250px;
        margin: 10px;
      }
      .btn-play{
        text-align: center;
        font-size: 26px;
        font-weight: 100;
        i.fa{
          font-size: 160px;
          margin-bottom: 10px;
          cursor: pointer;
          &:hover{
            opacity: 0.75;
            font-weight: 100;
          }
        }
      }
      .live{
        position: absolute;
        left: 20px;
        top: 20px;
      }
    }
    .collapse{
      background: #444;
      padding: 15px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      font-size: 26px;
      font-weight: 100;
      z-index: 2;
    }
  }
}