plumes
Version:
Flying-fast Metro future vision components
69 lines (68 loc) • 2.32 kB
CSS
.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 ;
}
.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 ;
left: auto ;
}