.fab-box { position: fixed; display: flex; justify-content: center; align-items: center; z-index: 2;
|
&.top { width: 30px; height: 30px; right: 15px; bottom: 90px; border: 1px #5989b9 solid; background: #6699cc; border-radius: 5px; color: #fff; transition: all 0.3; opacity: 0; }
|
&.active { opacity: 1; }
|
&.fab { z-index: 10;
|
&.leftBottom { left: 15px; bottom: 90px; }
|
&.leftTop { left: 15px; top: 40px; top: calc(40px + var(--window-top)); }
|
&.rightBottom { right: 15px; bottom: 90px; }
|
&.rightTop { right: 15px; top: 40px; top: calc(40px + var(--window-top)); }
|
}
|
}
|
.fab-circle { display: flex; justify-content: center; align-items: center; position: absolute; width: 45px; height: 45px; background: #3c3e49; border-radius: 50%; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); z-index: 11;
|
&.left { left: 0; }
|
&.right { right: 0; }
|
&.top { top: 0; }
|
&.bottom { bottom: 0; }
|
.icon-jia { color: #ffffff; font-size: 25px; transition: all 0.3s; width: 22px; height: 22px;
|
&.active { transform: rotate(90deg); }
|
}
|
}
|
.fab-content { background: #6699cc; box-sizing: border-box; display: flex; border-radius: 50px; overflow: hidden; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); transition: all 0.2s; width: 55px;
|
&.left { justify-content: flex-start; }
|
&.right { justify-content: flex-end; }
|
&.flexDirection { flex-direction: column; justify-content: flex-end; }
|
&.flexDirectionStart { flex-direction: column; justify-content: flex-start; }
|
&.flexDirectionEnd { flex-direction: column; justify-content: flex-end; }
|
.fab-item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 45px; height: 45px; font-size: 12px; color: #fff; opacity: 0; transition: opacity 0.2s;
|
&.active { opacity: 1; }
|
.content-image { width: 30px; height: 30px; margin-bottom: 5px; }
|
&.first { width: 55px; }
|
}
|
}
|
