benivo-ui-library/dropdownButton.less

Benivo UI library

.dropdown-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;

    .dropdown-box {
        width: 100%;
        position: absolute;
        z-index: @zindex-dropdown-high-priority;
        left: 0;
        top: 46px;
        background: var(--white);
        .box-shadow(0 2px 4px 0 rgba(0, 0, 0, 0.06));
        .border-radius(0 0 4px 4px);

        @media @lg {
            top: 40px;
        }

        .options-item {
            cursor: pointer;
            font-size: @font-size-sm;
            padding: 6px 12px;
            display: flex;
            align-items: center;
            min-height: 45px;

            &:hover {
                background: var(--bg-50);
            }

            .icon {
                margin-right: 12px;

                &-scan-receipt {
                    font-size: 14px;
                }

                &-enter-manually {
                    font-size: 28px;
                }

                &-mileage-expense {
                    font-size: 22px;
                }
            }
        }

        &-top {
            top: unset;
            bottom: 100%;
        }
    }

    .dropdown-btn {
        text-transform: none;
        text-align: center;
        font-weight: @font-weight-medium;
        min-width: 160px;
        margin: 0;
        .border-radius(4px);

        &:before {
            content: "";
            position: absolute;
            height: 100%;
            width: 1px;
            background: var(--white);
            left: 40px;
            top: 0;
        }

        &.btn-with-icon,
        &.btn-with-icon-place {
            .btn-icon {
                border-right: 0;
                font-size: 0.625rem;
            }

            .btn-text {
                width: 100%;
                text-align: center;
                font-weight: @btn-font-weight;
            }
        }
    }
}