Browse Source

Other: Increased the specificity of CSS rules. Introduced the .ck class for editor UI components (see: ckeditor/ckeditor5#494).

Aleksander Nowodzinski 7 years ago
parent
commit
521a199a45
25 changed files with 101 additions and 101 deletions
  1. 14 14
      packages/ckeditor5-theme-lark/tests/manual/theme.html
  2. 26 24
      packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css
  3. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css
  4. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css
  5. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadprogress.css
  6. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
  7. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css
  8. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
  9. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
  10. 6 6
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css
  11. 2 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css
  12. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css
  13. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css
  14. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/toolbardropdown.css
  15. 4 4
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css
  16. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css
  17. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css
  18. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/label/label.css
  19. 3 3
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
  20. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
  21. 6 8
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css
  22. 3 3
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css
  23. 16 16
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css
  24. 6 6
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css
  25. 1 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

+ 14 - 14
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -40,13 +40,13 @@
 <h2>Button</h2>
 
 	<h3>Button: States</h3>
-	<div id="button-states" class="ck-reset_all"></div>
+	<div id="button-states" class="ck ck-reset_all"></div>
 
 	<h3>Button: Types</h3>
-	<div id="button-types" class="ck-reset_all"></div>
+	<div id="button-types" class="ck ck-reset_all"></div>
 
 	<h3>Button: Icon</h3>
-	<div class="ck-reset_all" >
+	<div class="ck ck-reset_all" >
 		<div id="button-icon" class="wrappable"></div>
 
 		<br/>
@@ -66,40 +66,40 @@
 	</div>
 
 	<h3>Button: Tooltip</h3>
-	<div id="button-tooltip" class="ck-reset_all"></div>
+	<div id="button-tooltip" class="ck ck-reset_all"></div>
 
 <h2>Dropdown</h2>
 
 	<h3>ListDropdown</h3>
-	<div id="list-dropdown" class="ck-reset_all"></div>
+	<div id="list-dropdown" class="ck ck-reset_all"></div>
 
 	<h3>ButtonDropdown</h3>
-	<div id="button-dropdown" class="ck-reset_all"></div>
+	<div id="button-dropdown" class="ck ck-reset_all"></div>
 
 <h2>Toolbar</h2>
 
 	<h3>Toolbar: Text</h3>
-	<div id="toolbar-text" class="ck-reset_all"></div>
+	<div id="toolbar-text" class="ck ck-reset_all"></div>
 
 	<h3>Toolbar: Button</h3>
-	<div id="toolbar-button" class="ck-reset_all"></div>
+	<div id="toolbar-button" class="ck ck-reset_all"></div>
 
 	<h3>Toolbar: Rounded</h3>
-	<div id="toolbar-rounded" class="ck-reset_all ck-rounded-corners"></div>
+	<div id="toolbar-rounded" class="ck ck-reset_all ck-rounded-corners"></div>
 
 	<h3>Toolbar: Wrapping content</h3>
-	<div id="toolbar-wrap" class="ck-reset_all"></div>
+	<div id="toolbar-wrap" class="ck ck-reset_all"></div>
 
 	<h3>Toolbar: Item separators</h3>
-	<div id="toolbar-separator" class="ck-reset_all"></div>
+	<div id="toolbar-separator" class="ck ck-reset_all"></div>
 
 	<h3>Toolbar: Multi-row</h3>
-	<div id="toolbar-multi-row" class="ck-reset_all"></div>
+	<div id="toolbar-multi-row" class="ck ck-reset_all"></div>
 
 <h2>Inputs</h2>
 
 	<h3>Labeled</h3>
-	<div id="input-labeled" class="ck-reset_all"></div>
+	<div id="input-labeled" class="ck ck-reset_all"></div>
 
 	<h3>Read–only</h3>
-	<div id="input-read-only" class="ck-reset_all"></div>
+	<div id="input-read-only" class="ck ck-reset_all"></div>

+ 26 - 24
packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css

@@ -5,38 +5,40 @@
 
 @import "../mixins/_rounded.css";
 
-.ck-editor__top {
-	& .ck-sticky-panel {
-		& .ck-toolbar {
-			@mixin ck-rounded-corners {
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
+.ck.ck-editor {
+	& .ck-editor__top {
+		& .ck-sticky-panel {
+			& .ck-toolbar {
+				@mixin ck-rounded-corners {
+					border-bottom-left-radius: 0;
+					border-bottom-right-radius: 0;
+				}
+
+				border-bottom-width: 0;
 			}
 
-			border-bottom-width: 0;
-		}
-
-		& .ck-sticky-panel__content_sticky .ck-toolbar {
-			border-bottom-width: 1px;
+			& .ck-sticky-panel__content_sticky .ck-toolbar {
+				border-bottom-width: 1px;
 
-			@mixin ck-rounded-corners {
-				border-radius: 0;
+				@mixin ck-rounded-corners {
+					border-radius: 0;
+				}
 			}
 		}
 	}
-}
 
-/* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */
-.ck-editor__main .ck-editor__editable {
-	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/113 */
-	background: var(--ck-color-base-background);
+	/* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */
+	& .ck-editor__main .ck-editor__editable {
+		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/113 */
+		background: var(--ck-color-base-background);
 
-	@mixin ck-rounded-corners {
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
+		@mixin ck-rounded-corners {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
 
-	&:not(.ck-focused) {
-		border-color: var(--ck-color-base-border);
+		&:not(.ck-focused) {
+			border-color: var(--ck-color-base-border);
+		}
 	}
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-placeholder::before {
+.ck.ck-placeholder::before {
 	cursor: text;
 	color: var(--ck-color-engine-placeholder-text);
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css

@@ -4,7 +4,7 @@
  */
 
 /* Resize dropdown's button label. */
-.ck-dropdown.ck-heading-dropdown {
+.ck.ck-dropdown.ck-heading-dropdown {
 	& .ck-dropdown__button .ck-button__label {
 		width: 8em;
 	}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadprogress.css

@@ -8,7 +8,7 @@
 	--ck-image-upload-progress-line-width: 30px;
 }
 
-figure.image {
+.ck.image {
 	/* Showing animation. */
 	&.ck-appear {
 		animation: fadeIn 700ms;

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-text-alternative-form {
+.ck.ck-text-alternative-form {
 	padding: var(--ck-spacing-standard);
 
 	&:focus {

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css

@@ -4,7 +4,7 @@
  */
 
 /* Class added to span element surrounding currently selected link. */
-.ck-link_selected {
+.ck.ck-link_selected {
 	background: var(--ck-color-link-selected-background);
 	outline: 1px solid var(--ck-color-link-selected-background);
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css

@@ -8,7 +8,7 @@
 @import "../mixins/_focus.css";
 @import "../mixins/_shadow.css";
 
-.ck-link-actions {
+.ck.ck-link-actions {
 	padding: var(--ck-spacing-standard);
 
 	& .ck-button.ck-link-actions__preview {

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-link-form {
+.ck.ck-link-form {
 	padding: var(--ck-spacing-standard);
 
 	&:focus {

+ 6 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -9,8 +9,8 @@
 @import "../../../mixins/_rounded.css";
 @import "../../mixins/_button.css";
 
-.ck-button,
-a.ck-button {
+.ck.ck-button,
+a.ck.ck-button {
 	@mixin ck-button-colors --ck-color-button-default;
 	@mixin ck-rounded-corners;
 
@@ -98,14 +98,14 @@ a.ck-button {
 }
 
 /* A style of the button which handles the primary action. */
-.ck-button-action,
-a.ck-button-action {
+.ck.ck-button-action,
+a.ck.ck-button-action {
 	@mixin ck-button-colors --ck-color-button-action;
 
 	color: var(--ck-color-button-action-text);
 }
 
-.ck-button-bold,
-a.ck-button-bold {
+.ck.ck-button-bold,
+a.ck.ck-button-bold {
 	font-weight: bold;
 }

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -11,7 +11,7 @@
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
 }
 
-.ck-dropdown {
+.ck.ck-dropdown {
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
 
@@ -53,7 +53,7 @@
 	}
 }
 
-.ck-dropdown__panel {
+.ck.ck-dropdown__panel {
 	@mixin ck-rounded-corners;
 	@mixin ck-drop-shadow;
 

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css

@@ -5,7 +5,7 @@
 
 @import "../../../mixins/_rounded.css";
 
-.ck-dropdown .ck-dropdown__panel .ck-list {
+.ck.ck-dropdown .ck-dropdown__panel .ck-list {
 	/* Disabled radius of top-left border to be consistent with .dropdown__button
 	https://github.com/ckeditor/ckeditor5/issues/816 */
 	@mixin ck-rounded-corners {

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -10,7 +10,7 @@
 	--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
 }
 
-.ck-splitbutton {
+.ck.ck-splitbutton {
 	& > .ck-splitbutton__action {
 		/* Don't round the first button on the right side */
 		@mixin ck-rounded-corners {

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/toolbardropdown.css

@@ -3,6 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-toolbar-dropdown .ck-toolbar {
+.ck.ck-toolbar-dropdown .ck-toolbar {
 	border: 0;
 }

+ 4 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css

@@ -9,7 +9,7 @@
 @import "../../../mixins/_focus.css";
 @import "../../mixins/_button.css";
 
-.ck-editor__editable {
+.ck.ck-editor__editable {
 	@mixin ck-rounded-corners;
 
 	&.ck-focused {
@@ -18,7 +18,7 @@
 	}
 }
 
-.ck-editor__editable_inline {
+.ck.ck-editor__editable_inline {
 	overflow: auto;
 	padding: 0 var(--ck-spacing-standard);
 	border: 1px solid transparent;
@@ -35,13 +35,13 @@
 }
 
 /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
-.ck-toolbar-container[class*="arrow_n"] {
+.ck.ck-toolbar-container[class*="arrow_n"] {
 	&::after {
 		border-bottom-color: var(--ck-color-base-foreground);
 	}
 }
 
-.ck-toolbar-container[class*="arrow_s"] {
+.ck.ck-toolbar-container[class*="arrow_s"] {
 	&::after {
 		border-top-color: var(--ck-color-base-foreground);
 	}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css

@@ -7,7 +7,7 @@
 	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
 }
 
-svg.ck-icon {
+svg.ck.ck-icon {
 	width: var(--ck-icon-size);
 	height: var(--ck-icon-size);
 

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css

@@ -11,7 +11,7 @@
 	--ck-input-text-width: 18em;
 }
 
-.ck-input-text {
+.ck.ck-input-text {
 	@mixin ck-rounded-corners;
 	@mixin ck-box-shadow var(--ck-inner-shadow);
 

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/label/label.css

@@ -3,6 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-label {
+.ck.ck-label {
 	font-weight: bold;
 }

+ 3 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -6,14 +6,14 @@
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_shadow.css";
 
-.ck-list {
+.ck.ck-list {
 	@mixin ck-rounded-corners;
 
 	list-style-type: none;
 	background: var(--ck-color-list-background);
 }
 
-.ck-list__item {
+.ck.ck-list__item {
 	padding: var(--ck-spacing-medium);
 	cursor: default;
 	min-width: 12em;
@@ -30,7 +30,7 @@
 	}
 }
 
-.ck-list__item_active {
+.ck.ck-list__item_active {
 	background: var(--ck-color-list-item-background-active);
 	color: var(--ck-color-list-item-text-active);
 

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css

@@ -12,7 +12,7 @@
 	--ck-balloon-arrow-half-width: 8px;
 }
 
-.ck-balloon-panel {
+.ck.ck-balloon-panel {
 	@mixin ck-rounded-corners;
 	@mixin ck-drop-shadow;
 

+ 6 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css

@@ -5,14 +5,12 @@
 
 @import "../../../mixins/_shadow.css";
 
-.ck-editor {
-	& .ck-sticky-panel {
-		& .ck-sticky-panel__content_sticky {
-			@mixin ck-drop-shadow;
+.ck.ck-sticky-panel {
+	& .ck-sticky-panel__content_sticky {
+		@mixin ck-drop-shadow;
 
-			border-width: 0 1px 1px;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
+		border-width: 0 1px 1px;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 	}
 }

+ 3 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -5,7 +5,7 @@
 
 @import "../../../mixins/_rounded.css";
 
-.ck-toolbar {
+.ck.ck-toolbar {
 	@mixin ck-rounded-corners;
 
 	background: var(--ck-color-toolbar-background);
@@ -49,7 +49,7 @@
 	}
 }
 
-.ck-toolbar__separator {
+.ck.ck-toolbar__separator {
 	align-self: stretch;
 	width: 1px;
 	margin-top: 0;
@@ -57,6 +57,6 @@
 	background: var(--ck-color-toolbar-border);
 }
 
-.ck-toolbar__newline {
+.ck.ck-toolbar__newline {
 	margin: 0;
 }

+ 16 - 16
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css

@@ -9,7 +9,7 @@
 	--ck-tooltip-arrow-size: 5px;
 }
 
-.ck-tooltip {
+.ck.ck-tooltip {
 	left: 50%;
 
 	/**
@@ -53,27 +53,27 @@
 			border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
 		}
 	}
-}
 
-.ck-tooltip__text {
-	@mixin ck-rounded-corners;
+	& .ck-tooltip__text {
+		@mixin ck-rounded-corners;
 
-	font-size: .9em;
-	line-height: 1.5;
-	color: var(--ck-color-tooltip-text);
-	padding: var(--ck-spacing-small) var(--ck-spacing-medium);
-	background: var(--ck-color-tooltip-background);
-	position: relative;
-	left: -50%;
+		font-size: .9em;
+		line-height: 1.5;
+		color: var(--ck-color-tooltip-text);
+		padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+		background: var(--ck-color-tooltip-background);
+		position: relative;
+		left: -50%;
 
-	&::after {
-		border-style: solid;
-		left: 50%;
+		&::after {
+			border-style: solid;
+			left: 50%;
+		}
 	}
 }
 
-.ck-tooltip,
-.ck-tooltip__text::after {
+.ck.ck-tooltip,
+.ck.ck-tooltip .ck-tooltip__text::after {
 	/* For the transition to work, the tooltip must be controlled
 	using visibility+opacity. A delay prevents a "tooltip avalanche"
 	i.e. when scanning the toolbar with mouse cursor. */

+ 6 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css

@@ -14,9 +14,9 @@
 /**
  * Resets an element, ignoring its children.
  */
-.ck-reset,
-.ck-reset_all,
-.ck-reset_all * {
+.ck.ck-reset,
+.ck.ck-reset_all,
+.ck.ck-reset_all * {
 	/* Do not include inheritable rules here. */
 	margin: 0;
 	padding: 0;
@@ -33,8 +33,8 @@
 /**
  * Resets an element AND its children.
  */
-.ck-reset_all,
-.ck-reset_all * {
+.ck.ck-reset_all,
+.ck.ck-reset_all * {
 	/* These are rule inherited by all children elements. */
 	border-collapse: collapse;
 	font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
@@ -45,7 +45,7 @@
 	float: none;
 }
 
-.ck-reset_all {
+.ck.ck-reset_all {
 	& .ck-rtl * {
 		text-align: right;
 	}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -13,7 +13,7 @@
 	--ck-color-widget-editable-focused-background: var(--ck-color-base-background),
 }
 
-.ck-widget {
+.ck.ck-widget {
 	margin: var(--ck-spacing-standard) 0;
 	padding: 0;