search

kongulov / nova-tab-translatable

This package contains a NovaTabTranslatable class you can use to make any Nova field type translatable with tabs.
MIT License
79 stars 17 forks source link

Design improvement #19

Closed stanislav-cervenak closed 2 years ago

stanislav-cervenak commented 2 years ago

Snímka obrazovky 2022-06-15 o 20 30 47 Snímka obrazovky 2022-06-15 o 20 30 05 Snímka obrazovky 2022-06-15 o 20 31 34 Snímka obrazovky 2022-06-15 o 20 31 53 Snímka obrazovky 2022-06-15 o 20 29 28 Snímka obrazovky 2022-06-15 o 20 29 43

#nova-tab-translatable {
    border-bottom: 1px solid #eef1f4;

    .tab-items {
        padding: 1rem 1.5rem 0;
        background-color: #eef1f4;
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;

        .tab-item {
            font-weight: bold;
            text-transform: none !important;
            color: #7c858e !important;

            &.active {
                color: #4099de !important;
            }

            .text-danger {
                color: #ef4444 !important;
            }
        }
    }
}

[data-testid="preview-resource-modal"],
[dusk$="-detail-component"] {
    #nova-tab-translatable {
        margin-top: -8px;
        border-bottom: none;

        .tab-items {
            margin: 0 -24px -1px !important;
        }
    }
}

[data-testid="preview-resource-modal"] {
    #nova-tab-translatable {
        margin-top: -12px;

        .tab-items {
            margin: 0 -32px -1px !important;
            border-radius: 0;
        }
    }
}

.tab-group {
    .tab-card {
        .tab {
            #nova-tab-translatable {
                .tab-items {
                    margin-top: -1rem !important;
                    border-radius: 0;

                    .tab-item {
                        flex: inherit;
                    }
                }
            }
        }
    }
}

html.dark {
    #nova-tab-translatable {
        border-color: #344155;

        .tab-items {
            background-color: #344155;

            .tab-item {
                color: #8997ac !important;

                &.active {
                    color: #4099de !important;
                }
            }
        }
    }
}
kongulov commented 2 years ago

@suchoproduction Thank you very much for supporting the package Please use package version 2.0.4