sass.n2o.components.SimpleButton.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
.btn-rounded {
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 31px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-content: center;

    >i {
        padding: 0;
    }
}

.btn-badge-position--left .n2o-btn-badge {
    order: -1;
}

.btn-badge-position--right .n2o-btn-badge {
    order: 1;
}

.btn.btn-rounded {
    min-width: 38px;
}

.btn-rounded.btn-sm {
    width: 31px;
    max-width: 31px;
    height: 31px;
    max-height: 31px;
}

.btn-rounded.btn-md {
    width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
}

.btn-rounded.btn-lg {
    width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
}

.btn-rounded__with-content {
    height: 38px;
    min-height: 31px;
    padding: 0 25px 0 25px;
    border-radius: 100px;
    text-align: center;

    >i {
        padding: 0 5px 0 0;
    }
}

.btn-rounded__with-content.btn-sm {
    height: 31px;
    min-height: 31px;
}

.btn-rounded__with-content.btn-md {
    height: 38px;
    min-height: 38px;
}

.btn-rounded__with-content.btn-lg {
    height: 48px;
    min-height: 48px;
}

.btn-disabled {
    pointer-events: none;
    opacity: 0.65;
}

.btn-light {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;

    &:hover {
        color: #000;
    }
}

.btn-outline-light {
    color: #f8f9fa;
    border-color: #f8f9fa;

    &:hover {
        color: #000;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }
}

.n2o-dropdown-control.btn {
    .n2o-badge.n2o-btn-badge {
        padding: 0;
    }
}