|
@@ -1,16 +1,71 @@
|
|
|
@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
|
|
@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
|
|
|
|
|
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
|
|
|
|
|
|
|
|
-/* This one can be used here https://github.com/ckeditor/ckeditor5/blob/0706215c592edcf1b701b4af63298f4b77f8dd01/packages/ckeditor5-link/src/ui/linkformview.js#L139 */
|
|
|
|
|
-/* It simply enforces the mode when the class is set. */
|
|
|
|
|
-.ck-link-form_layout-vertical button.ck-button::after {
|
|
|
|
|
|
|
+.ck-vertical-form .ck-button::after {
|
|
|
border-right: 1px solid var(--ck-color-base-border);
|
|
border-right: 1px solid var(--ck-color-base-border);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* This one is smart and works based on media queries. */
|
|
|
|
|
-@mixin ck-media-phone {
|
|
|
|
|
- .ck-responsive-form {
|
|
|
|
|
- button.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;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @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%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* Let the long error messages wrap in the narrow form. */
|
|
|
|
|
+ & .ck-labeled-field-view__error {
|
|
|
|
|
+ white-space: normal;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ & button.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;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @mixin ck-dir rtl {
|
|
|
|
|
+ margin-left: 0;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-of-type {
|
|
|
|
|
+ border-right: 1px solid var(--ck-color-base-border);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ border-right: 1px solid var(--ck-color-base-border);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|