profileMenu.scss

$dropdown-transition-duration: 200ms;

@mixin pdk-transition($duration, $type) {
      -webkit-transition: all $duration $type;
      -moz-transition: all $duration $type;
      -o-transition: all $duration $type;
      transition: all $duration $type;
}

@mixin profilemenu-animate($height, $width, $border-color:gainsboro, $box-shadow-color: #e6e6e6){
      height: $height;
      width: $width;
      border: 1px solid $border-color;
      border-radius: 3px;
      box-shadow: 0 2px 4px $box-shadow-color;
      @media(max-width: $screen-sm-min) {
              position: fixed;
              top: 36px;
              height:74px;
          }      
    }


.profile-menu {
      @include make-xs-column(5);    
      @include make-sm-column(3);
      @include make-md-column(2);

      text-align: right;
      padding-right: 0;
      margin-top: 5px;
      float: right !important;
      z-index: 15;

    i {
        cursor: pointer;
        padding: 3px 10px;
    }

    .pdk-dropdown-menu {
      background-color: white;
      position: absolute;
      overflow: hidden;      
      z-index: -1 !important;
      padding: 10px 5px;
      list-style-type: none;
      margin-top: -36px;
      margin-left: -20px;
      right: 0px;
      @include profilemenu-animate(36px, 28px, transparent, transparent);
      @include pdk-transition($dropdown-transition-duration, linear);

      li{
        height: initial;
        text-align: left;
        display:none;
      }

      .user-name{
      font-size: 18px;
      font-weight: bold;
      padding: 0 5px;
    }

    .user-action{
      font-size: 14px;
      text-align: left;
      padding: 3px 7px;
      color: #000;
      i{
          padding: 0px 15px 0px 10px;
          color: #FBB040;
      }
    }

    &.expanded {
        @include profilemenu-animate(65px, 200px);
        @include pdk-transition($dropdown-transition-duration, linear);
        display:block;
          li{
            display:block;
          }
          @media(max-width: $screen-sm-min) {
                @include profilemenu-animate(65px, 100%);
            }
      }

      &.expanded-add {
        @include profilemenu-animate(40px, 200px);
        display:block;
        li{
            display:block;
          }
      }

      &.expanded-add-active {
        @include profilemenu-animate(40px, 200px);
        display:block;
      }

      &.expanded-remove {
        @include profilemenu-animate(37px, 30px);
        display:block;
        li{
            display:block;
          }
        @media(max-width: $screen-sm-min) {
              @include profilemenu-animate(74px, 100%);
          }
      }

      &.expanded-remove-active {
        @include profilemenu-animate(36px, 200px);
        display:block;
      }

      &.ng-animate {
        transition: all linear $dropdown-transition-duration;
      } 
    }

    .glyphicon-option-vertical{
      font-size: 18px;
      z-index: 10000;
    }
  }