linagora-rse/frontend/css/widgets/fab-dropup.less

Linagora RSE

.fab-modal-dropup {
  width: 300px;
  bottom: 40px;
  right: 40px;
  position: fixed;
  background: white;
  border-radius: 2px;
  opacity: 0.5;
  z-index: 2;
  visibility: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  transition: .4s ease-out;

  transform: translateY(30px);
  -webkit-clip-path: circle(0% at 87% 87%);
  clip-path: circle(0 at 87% 87%);

  &.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    -webkit-clip-path: circle(200% at 87% 87%);
    clip-path: circle(200% at 87% 87%);
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      padding: 10px 15px;
      cursor: pointer;
      transition: .3s ease;

      &:hover{
        background: rgba(0,0,0,.1);
      }
    }

    .item-text {
      font-size: 16px
    }

    .item-image {
      font-size: 32px;
    }
  }
}

@media (max-width: @screen-xs-min) {
  .fab-modal-dropup {
    // https://coderwall.com/p/yyou-q/css3-calc-in-less-css
    width: ~"calc(100% - 80px)";
  }
}