132 lines
4.1 KiB
CSS
132 lines
4.1 KiB
CSS
.fab {
|
|
position: fixed;
|
|
width: 56px;
|
|
left: 32px;
|
|
bottom: 15px;
|
|
margin-left: -28px;
|
|
}
|
|
|
|
.fab:hover .fab-buttons {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.fab:hover .fab-buttons__link {
|
|
transform: scaleY(1) scaleX(1) translateY(-16px) translateX(0px);
|
|
}
|
|
|
|
.fab-action-button:hover + .fab-buttons .fab-buttons__link:before {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transform-origin: right center 0;
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.fab-action-button {
|
|
position: absolute;
|
|
bottom: 0;
|
|
display: block;
|
|
width: 56px;
|
|
height: 56px;
|
|
background-color: #2c0d0f;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.fab-buttons {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 50px;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.fab-action-button__icon{
|
|
display: inline-block;
|
|
width: 56px;
|
|
height: 56px;
|
|
background: url('/image/login.svg') center no-repeat;
|
|
}
|
|
|
|
.fab-action-button-loggedin__icon {
|
|
display: inline-block;
|
|
width: 56px;
|
|
height: 56px;
|
|
background: url('/image/loggedin.svg') center no-repeat;
|
|
}
|
|
|
|
.fab-buttons__item {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.fab-buttons__link {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
text-decoration: none;
|
|
background-color: #ffffff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
|
transform: scaleY(0.5) scaleX(0.5) translateY(0px) translateX(0px);
|
|
-moz-transition: .3s;
|
|
-webkit-transition: .3s;
|
|
-o-transition: .3s;
|
|
transition: .3s;
|
|
}
|
|
|
|
[data-tooltip]:before {
|
|
top: 50%;
|
|
margin-top: -11px;
|
|
font-weight: 600;
|
|
border-radius: 2px;
|
|
background: #585858;
|
|
color: #fff;
|
|
content: attr(data-tooltip);
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
padding: 4px 7px;
|
|
margin-right: 12px;
|
|
position: absolute;
|
|
transform: scale(0);
|
|
right: 100%;
|
|
white-space: nowrap;
|
|
transform-origin: top right;
|
|
transition: all .3s cubic-bezier(.25, .8, .25, 1);
|
|
}
|
|
|
|
[data-tooltip]:hover:before {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transform-origin: right center 0;
|
|
}
|
|
|
|
.icon-material {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.icon-material_edit {
|
|
background: url('/image/edit.svg') center no-repeat;
|
|
}
|
|
|
|
.icon-material_exit {
|
|
background: url('/image/logout.svg') center no-repeat;
|
|
}
|
|
|
|
.icon-material_panel {
|
|
background: url('/image/settings.svg') center no-repeat;
|
|
}
|
|
|
|
|