ckeditor/ckeditor5-theme-lark

View on GitHub
theme/ckeditor5-link/linkform.css

Summary

Maintainability
Test Coverage
/*
 * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-link-form {
    padding: var(--ck-spacing-standard);

    &:focus {
        /* https://github.com/ckeditor/ckeditor5-link/issues/90 */
        outline: none;
    }

    @mixin ck-dir ltr {
        & > :not(:first-child) {
            margin-left: var(--ck-spacing-standard);
        }
    }

    @mixin ck-dir rtl {
        & > :not(:last-child) {
            margin-left: var(--ck-spacing-standard);
        }
    }

    @mixin ck-media-phone {
        padding: 0;
        width: calc(.8 * var(--ck-input-text-width));

        & .ck-labeled-field-view {
            margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;

            & .ck-input-text {
                min-width: 0;
                width: 100%;
            }
        }

        & .ck-button {
            padding: var(--ck-spacing-standard);
            margin-top: var(--ck-spacing-standard);

            border-radius: 0;
            border: 0;
            border-top: 1px solid var(--ck-color-base-border);

            @mixin ck-dir ltr {
                margin-left: 0;

                &:first-of-type {
                    border-right: 1px solid var(--ck-color-base-border);
                }
            }

            @mixin ck-dir rtl {
                margin-left: 0;

                &:last-of-type {
                    border-right: 1px solid var(--ck-color-base-border);
                }
            }
        }
    }
}

/*
 * Style link form differently when manual decorators are available.
 * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
 */
.ck.ck-link-form_layout-vertical {
    padding: 0;
    min-width: var(--ck-input-text-width);

    & .ck-labeled-field-view {
        margin: var(--ck-spacing-standard) var(--ck-spacing-standard) var(--ck-spacing-small);

        & .ck-input-text {
            min-width: 0;
            width: 100%;
        }
    }

    & .ck-button {
        padding: var(--ck-spacing-standard);
        margin: 0;
        border-radius: 0;
        border: 0;
        border-top: 1px solid var(--ck-color-base-border);
        width: 50%;

        @mixin ck-dir ltr {
            margin-left: 0;

            &:first-of-type {
                border-right: 1px solid var(--ck-color-base-border);
            }
        }

        @mixin ck-dir rtl {
            margin-left: 0;

            &:last-of-type {
                border-right: 1px solid var(--ck-color-base-border);
            }
        }
    }

    /* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
    & .ck.ck-list {
        margin-left: 0;

        & .ck-button.ck-switchbutton {
            border: 0;
            width: 100%;

            &:hover {
                background: none;
            }
        }
    }
}