framework7-without-localstorage/src/less/material/floating-button.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Floating Action Button === */
.floating-button {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    z-index: 1500;
    .depth(3);
    background-color: @themeColor;
    color:#fff;
    overflow: hidden;
    .transition(300ms);
    .flexbox();
    .align-items(center);
    .justify-content(center);
    html:not(.watch-active-state) &:active, &.active-state {
        background: darken(@themeColor, 8%);
    }
}
.floating-button-toolbar, .speed-dial {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1500;
    .floating-button {
        right: 0;
        bottom: 0;
        position: relative;
    }
}
// Speed Dial
.speed-dial {
    .floating-button {
        i {
            position: absolute;
            left: 50%;
            top: 50%;
            .transform(translate3d(-50%, -50%, 0) rotate(0deg) scale(1));
            .transition(300ms);
        }
        i + i {
            .transform(translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5));
            opacity: 0;
        }
    }
    &.speed-dial-opened {
        .floating-button {
            i {
                .transform(translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5));
                opacity: 0;
            }
            i + i {
                .transform(translate3d(-50%, -50%, 0) rotate(0deg) scale(1));
                opacity: 1;
            }
        }
    }
}
.speed-dial-buttons {
    position: absolute;
    width: 40px;
    left: 50%;
    margin-left: -20px;
    bottom: 100%;
    margin-bottom: 16px;
    .flexbox();
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-orient: vertical;
    -moz-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    visibility: hidden;
    pointer-events: none;
    a {
        width: 40px;
        height: 40px;
        opacity: 0;
        color: #fff;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        overflow: hidden;
        background-color: @themeColor;
        html:not(.watch-active-state) &:active, &.active-state {
            background: darken(@themeColor, 8%);
        }
        .transition(300ms);
        .flexbox();
        .align-items(center);
        .justify-content(center);
        .transform(translate3d(0, 8px, 0) scale(0.3));
        .transform-origin(center bottom);
        + a {
            margin-bottom: 16px;
        }
    }
    .speed-dial-opened & {
        visibility: visible;
        pointer-events: auto;
        a {
            opacity: 1;
            .transform(translate3d(0, 0, 0) scaleY(1));
            .depth(3);
            &:nth-child(2) {
                .delay(50ms);
            }
            &:nth-child(3) {
                .delay(100ms);
            }
            &:nth-child(4) {
                .delay(150ms);
            }
            &:nth-child(5) {
                .delay(200ms);
            }
            &:nth-child(6) {
                .delay(250ms);
            }
        }
    }
}

// Popove Morph
.floating-button-to-popover {
    &.floating-button-to-popover {
        .transition(300ms);
    }
    &.floating-button-to-popover-in {
        .transition(100ms);
        i {
            opacity: 0;
            .transition(100ms);
        }
    }
    &.floating-button-to-popover-scale {
        border-radius: 0;
        .transition(300ms);
        box-shadow: none;
    }
    &.floating-button-to-popover-out {
        .delay(0ms);
        .transition(300ms);
        i {
            opacity: 1;
            .transition(100ms);
            .delay(200ms);
        }
    }
}