diff --git a/packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js b/packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js index 5427970b79e..c4f1c042642 100644 --- a/packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js +++ b/packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js @@ -23,6 +23,7 @@ import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler'; import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg'; import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg'; import '../../../theme/textalternativeform.css'; +import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css'; /** * The TextAlternativeFormView class. @@ -111,7 +112,8 @@ export default class TextAlternativeFormView extends View { attributes: { class: [ 'ck', - 'ck-text-alternative-form' + 'ck-text-alternative-form', + 'ck-responsive-form' ], // https://github.com/ckeditor/ckeditor5-image/issues/40 diff --git a/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js b/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js index 6d1993a5595..96b5879d25d 100644 --- a/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js +++ b/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js @@ -29,6 +29,7 @@ describe( 'TextAlternativeFormView', () => { expect( view.element.classList.contains( 'ck' ) ).to.be.true; expect( view.element.classList.contains( 'ck-text-alternative-form' ) ).to.be.true; + expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.be.true; expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' ); } ); diff --git a/packages/ckeditor5-link/src/ui/linkactionsview.js b/packages/ckeditor5-link/src/ui/linkactionsview.js index 8ca27dc56df..09eeb5825d6 100644 --- a/packages/ckeditor5-link/src/ui/linkactionsview.js +++ b/packages/ckeditor5-link/src/ui/linkactionsview.js @@ -21,6 +21,7 @@ import { ensureSafeUrl } from '../utils'; import unlinkIcon from '../../theme/icons/unlink.svg'; import pencilIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg'; import '../../theme/linkactions.css'; +import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css'; /** * The link actions view class. This view displays the link preview, allows @@ -117,7 +118,8 @@ export default class LinkActionsView extends View { attributes: { class: [ 'ck', - 'ck-link-actions' + 'ck-link-actions', + 'ck-responsive-form' ], // https://github.com/ckeditor/ckeditor5-link/issues/90 diff --git a/packages/ckeditor5-link/src/ui/linkformview.js b/packages/ckeditor5-link/src/ui/linkformview.js index e20a747e8d0..0269f0e666e 100644 --- a/packages/ckeditor5-link/src/ui/linkformview.js +++ b/packages/ckeditor5-link/src/ui/linkformview.js @@ -24,6 +24,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg'; import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg'; import '../../theme/linkform.css'; +import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css'; /** * The link form view controller class. @@ -133,10 +134,10 @@ export default class LinkFormView extends View { } } ); - const classList = [ 'ck', 'ck-link-form' ]; + const classList = [ 'ck', 'ck-link-form', 'ck-responsive-form' ]; if ( linkCommand.manualDecorators.length ) { - classList.push( 'ck-link-form_layout-vertical' ); + classList.push( 'ck-link-form_layout-vertical', 'ck-vertical-form' ); } this.setTemplate( { diff --git a/packages/ckeditor5-link/tests/ui/linkactionsview.js b/packages/ckeditor5-link/tests/ui/linkactionsview.js index 974d8a4132f..07f42c09201 100644 --- a/packages/ckeditor5-link/tests/ui/linkactionsview.js +++ b/packages/ckeditor5-link/tests/ui/linkactionsview.js @@ -26,6 +26,7 @@ describe( 'LinkActionsView', () => { it( 'should create element from template', () => { expect( view.element.classList.contains( 'ck' ) ).to.true; expect( view.element.classList.contains( 'ck-link-actions' ) ).to.true; + expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true; expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' ); } ); diff --git a/packages/ckeditor5-link/tests/ui/linkformview.js b/packages/ckeditor5-link/tests/ui/linkformview.js index 402274d89c7..876eb259a0c 100644 --- a/packages/ckeditor5-link/tests/ui/linkformview.js +++ b/packages/ckeditor5-link/tests/ui/linkformview.js @@ -39,6 +39,7 @@ describe( 'LinkFormView', () => { it( 'should create element from template', () => { expect( view.element.classList.contains( 'ck' ) ).to.true; expect( view.element.classList.contains( 'ck-link-form' ) ).to.true; + expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true; expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' ); } ); diff --git a/packages/ckeditor5-media-embed/src/ui/mediaformview.js b/packages/ckeditor5-media-embed/src/ui/mediaformview.js index 0e5da7fe310..2193dcbf66f 100644 --- a/packages/ckeditor5-media-embed/src/ui/mediaformview.js +++ b/packages/ckeditor5-media-embed/src/ui/mediaformview.js @@ -23,6 +23,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg'; import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg'; import '../../theme/mediaform.css'; +import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css'; /** * The media form view controller class. @@ -132,7 +133,8 @@ export default class MediaFormView extends View { attributes: { class: [ 'ck', - 'ck-media-form' + 'ck-media-form', + 'ck-responsive-form' ], tabindex: '-1' diff --git a/packages/ckeditor5-media-embed/tests/ui/mediaformview.js b/packages/ckeditor5-media-embed/tests/ui/mediaformview.js index c5a28ea26db..629472aa510 100644 --- a/packages/ckeditor5-media-embed/tests/ui/mediaformview.js +++ b/packages/ckeditor5-media-embed/tests/ui/mediaformview.js @@ -35,6 +35,7 @@ describe( 'MediaFormView', () => { it( 'should create element from template', () => { expect( view.element.classList.contains( 'ck' ) ).to.true; expect( view.element.classList.contains( 'ck-media-form' ) ).to.true; + expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true; expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' ); } ); diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css deleted file mode 100644 index 2f9c332adfd..00000000000 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css +++ /dev/null @@ -1,67 +0,0 @@ -/* - * 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-text-alternative-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); - } - } - } - } -} diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css index bcf638e238a..b4f269fcd01 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css @@ -11,8 +11,6 @@ @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css"; .ck.ck-link-actions { - padding: var(--ck-spacing-standard); - & .ck-button.ck-link-actions__preview { padding-left: 0; padding-right: 0; @@ -52,11 +50,6 @@ } } - &:focus { - /* https://github.com/ckeditor/ckeditor5-link/issues/90 */ - outline: none; - } - @mixin ck-dir ltr { & .ck-button:not(:first-child) { margin-left: var(--ck-spacing-standard); @@ -70,9 +63,6 @@ } @mixin ck-media-phone { - padding: 0; - width: calc(.8 * var(--ck-input-text-width)); - & .ck-button.ck-link-actions__preview { margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0; @@ -83,27 +73,12 @@ } & .ck-button:not(.ck-link-actions__preview) { - 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); - } } } } diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css index 2578bf350ff..686747e8402 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css @@ -3,69 +3,8 @@ * 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. @@ -93,10 +32,6 @@ @mixin ck-dir ltr { margin-left: 0; - - &:first-of-type { - border-right: 1px solid var(--ck-color-base-border); - } } @mixin ck-dir rtl { diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css similarity index 75% rename from packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css rename to packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css index 56b7cf74da1..e426a9d9c8c 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css @@ -6,10 +6,15 @@ @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css"; @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css"; -.ck.ck-media-form { +.ck-vertical-form .ck-button::after { + border-right: 1px solid var(--ck-color-base-border); +} + +.ck.ck-responsive-form { padding: var(--ck-spacing-standard); &:focus { + /* https://github.com/ckeditor/ckeditor5-link/issues/90 */ outline: none; } @@ -43,7 +48,8 @@ } } - & .ck-button { + /* 'button' selector must be used because those styles shouldn't be added to other elements, like 'a'. Example in LinkActionsView. */ + & button.ck-button { padding: var(--ck-spacing-standard); margin-top: var(--ck-spacing-standard); @@ -53,10 +59,6 @@ @mixin ck-dir ltr { margin-left: 0; - - &:first-of-type { - border-right: 1px solid var(--ck-color-base-border); - } } @mixin ck-dir rtl { @@ -66,6 +68,10 @@ border-right: 1px solid var(--ck-color-base-border); } } + + &::after { + border-right: 1px solid var(--ck-color-base-border); + } } } } diff --git a/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css b/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css new file mode 100644 index 00000000000..26113e44745 --- /dev/null +++ b/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css @@ -0,0 +1,30 @@ +/* + * 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"; + +.ck-vertical-form .ck-button::after { + content: ""; + width: 0; + position: absolute; + right: -1px; + top: var(--ck-spacing-small); + bottom: var(--ck-spacing-small); + z-index: 1; +} + +.ck.ck-responsive-form { + @mixin ck-media-phone { + & .ck-button::after { + content: ""; + width: 0; + position: absolute; + right: -1px; + top: var(--ck-spacing-small); + bottom: var(--ck-spacing-small); + z-index: 1; + } + } +}