plumes/public/grouped-buttons/pl-grouped-buttons.css

Flying-fast Metro future vision components

.pl-grouped-buttons rv-require {
  z-index: 1;
}
.pl-grouped-buttons .pl-grouped-buttons-button {
  position: absolute;
  top: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pl-grouped-buttons .pl-grouped-buttons-button .pl-button-rounded {
  margin-left: 0.5rem;
}
.pl-grouped-buttons.compact-opened {
  z-index: 1;
}
.pl-grouped-buttons.compact-opened .pl-grouped-button-compact-panel {
  width: 100%;
}
.pl-grouped-buttons .pl-grouped-button-compact-panel {
  position: fixed;
  top: 0;
  width: 0;
  -webkit-transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pl-grouped-buttons .pl-grouped-button-compact-button {
  cursor: pointer;
  position: absolute;
  top: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: none;
  width: 4rem;
  padding: 0;
}
.pl-grouped-buttons .pl-grouped-button-compact-button.no-buttons {
  left: -100px !important;
}
.pl-grouped-buttons .pl-grouped-button-compact-button i {
  font-size: 2rem;
  line-height: 4rem;
  vertical-align: middle;
  text-shadow: 0px 1px 1px white;
  color: rgba(0, 0, 0, 0.75);
}
.pl-grouped-buttons.orientation-right .pl-grouped-button-compact-button.no-buttons {
  right: -100px !important;
  left: auto !important;
}