plumes/features/grouped-buttons/css/pl-grouped-buttons.less

Flying-fast Metro future vision components

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

.pl-grouped-buttons {

  rv-require {
    z-index: 1;
  }

  .pl-grouped-buttons-button {
    position: absolute;
    top: 0;
    .transform(translateZ(0));
    .transition(all 0.6s @easeOutQuart);

    .pl-button-rounded {
      margin-left: 0.5rem;
    }
  }

  &.compact-opened {
    z-index: 1;

    .pl-grouped-button-compact-panel {
      width: 100%;
    }
  }

  .pl-grouped-button-compact-panel {
    position: fixed;
    top: 0;
    width: 0;
    .transition(width 0.6s @easeOutQuart);
  }

  .pl-grouped-button-compact-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    .transform(translateZ(0));
    .transition(all 0.6s @easeOutQuart);
    border: none;
    width: 4rem;
    padding: 0;

    &.no-buttons {
      left: -100px !important;
    }

    i {
      font-size: 2rem;
      line-height: 4rem;
      vertical-align: middle;
      text-shadow: 0px 1px 1px white;
      color: rgba(0, 0, 0, 0.75);
    }
  }
}