sass.n2o.components.StandardField.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!
%top-label-container {
    display: flex;
    flex-direction: column;

    label {
        min-height: $font-size-base * $line-height-base;
    }
}

.label-top-right {
    @extend %top-label-container;

    align-items: flex-end;
}

.label-top-left {
    @extend %top-label-container;

    align-items: stretch;
}

.label-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;

    label {
        margin-left: 5px;
    }
}

.label-left {
    display: flex;
    align-items: flex-start;

    label {
        margin-right: 5px;
    }
}

.form-group {
    .label-alignment-left {
        text-align: left;
        justify-content: flex-start;
    }

    .label-alignment-right {
        text-align: right;
        justify-content: flex-end;
    }
}

.n2o-label {
    .n2o-popover {
        cursor: pointer;
        margin: 0 5px;
        display: flex;
        align-items: center;

        button {
            padding: 0;
            background-color: transparent;
            border: none;

            &:focus {
                outline: none;
            }
        }

        &:hover i {
            color: $link-hover-color;
        }
    }
}

.n2o-form-group {
    position: relative;
    margin-bottom: 0.5rem;

    .n2o-validation-message {
        min-height: 1rem;
        font-size: 0.8rem;
        line-height: 1rem;
    }

    .n2o-label {
        display: flex;
        align-items: flex-start;
    }
}

.n2o-form-group--disabled {
    pointer-events: none;
    opacity: 0.7;
}

.n2o-form-group__spinner {
    position: absolute;
    right: 5px;
}

.form-container {
    display: flex;
}

.form-container_with-toolbar {
    .n2o-dropdown.visible {
        :nth-child(1) {
            height: inherit;
        }
    }
}

.n2o-button-field {
    width: max-content;

    .btn {
        width: content-box;
        justify-content: center;
    }
}

.n2o-page-actions__form-toolbar {
    &.btn-toolbar {
        > .btn-group {
            > .n2o-dropdown {
                > .dropdown-menu {
                    &.n2o-dropdown-menu {
                        text-align: left;

                        > .btn {
                            border: none;
                        }

                        > div {
                            > .btn {
                                width: 100%;
                                text-align: left;
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

.n2o-page-actions__toolbar {
    width: 100%;
    display: flex;
}

.form-control__with-toolbar {
    height: 100%;
}

.n2o-button-field.btn-block {
    width: 100%;
}