src/containers/Tenant/TopicFormDialog/TopicFormDialog.scss - main - githubmirror/ydb-embedded-ui

src/containers/Tenant/TopicFormDialog/TopicFormDialog.scss
182 строки4 KB
Максим
feat: add topic and table forms (#3909)
28 июл 2026, 12:49
28 июл 2026, 12:497477f07
.ydb-topic-form-dialog {
    --topic-form-control-width: 320px;
    --topic-form-input-gap: var(--g-spacing-4);

    max-height: 90vh;

    &__body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;

        min-height: 0;
        padding-top: var(--g-spacing-5);
        padding-bottom: 0;
    }

    &__form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;

        width: 100%;
        min-height: 0;
    }

    &__scroll-container {
        overflow: hidden auto;
        overscroll-behavior: none;
        flex: 1 1 auto;

        min-height: 0;
        margin-inline: calc(-1 * var(--_--side-padding));
        padding-inline: var(--_--side-padding);

        background:
            linear-gradient(var(--g-color-base-modal), var(--g-color-base-modal)) bottom / 100% 5px
                no-repeat local,
            linear-gradient(var(--g-color-line-generic), var(--g-color-line-generic)) bottom / 100%
                1px no-repeat scroll;
        background-color: var(--g-color-base-modal);
    }

    &__scroll-content {
        padding-bottom: var(--g-spacing-2);
    }

    &__section + &__section {
        margin-top: var(--g-spacing-6);
    }

    &__section-title {
        margin-bottom: var(--g-spacing-4);
    }

    &__row {
        display: grid;
        align-items: start;
        grid-template-columns: 190px minmax(0, 1fr);
        gap: var(--g-spacing-3);

        & + & {
            margin-top: var(--g-spacing-4);
        }
    }

    &__label {
        display: flex;
        align-items: center;
        gap: var(--g-spacing-1);

        padding-top: 7px;

        font-weight: 500;

        color: var(--g-color-text-secondary);
    }

    &__label-title {
        min-width: 0;
    }

    &__help-mark {
        flex-shrink: 0;
    }

    &__help-mark-popup {
        max-width: 300px;
    }

    &__fixed-value {
        min-height: 28px;
        padding-top: 5px;
    }

    &__control-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--g-spacing-2);
    }

    &__control,
    &__control.g-text-input,
    &__control.g-select {
        width: var(--topic-form-control-width);
        max-width: 100%;
    }

    &__input-s,
    &__input-s.g-text-input {
        width: calc((var(--topic-form-control-width) - var(--topic-form-input-gap)) / 2);
        max-width: 100%;
    }

    &__select-s,
    &__select-s.g-select {
        width: var(--topic-form-control-width);
        max-width: 100%;
    }

    &__dual-inputs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--topic-form-input-gap);

        width: var(--topic-form-control-width);
        max-width: 100%;
    }

    &__dual-inputs &__input-s,
    &__dual-inputs &__input-s.g-text-input {
        width: 100%;
        max-width: 100%;
    }

    &__input-details {
        margin-right: var(--g-spacing-2);

        text-transform: capitalize;

        color: var(--g-color-text-secondary);
    }

    &__divider {
        margin: var(--g-spacing-6) 0;
    }

    &__disclosure {
        margin-top: var(--g-spacing-4);
    }

    &__switch-row {
        padding-top: var(--g-spacing-1);
    }

    &__full-width-alert {
        margin-block: var(--g-spacing-3);
    }

    &__settings-content {
        padding-top: var(--g-spacing-4);
    }

    &__incompatible-popover {
        padding: var(--g-spacing-3);
    }

    &__popover-target {
        display: inline-flex;
    }

    &__error {
        max-width: 100%;
    }

    &__loader {
        display: flex;
        justify-content: center;

        padding: var(--g-spacing-8) 0;
    }
}