Merge pull request #273 from ckeditor/i/6109

Other: Changed styles of SpecialCharacters and Dropdown to match FormHeaderView component styles. See ckeditor/ckeditor5#6109.
ckeditor · Mar 26, 2020 · ceeb767 · ceeb767
2 parents 7df8dec + 3264aec
commit ceeb767
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 106 deletions.
diff --git a/theme/ckeditor5-special-characters/charactergrid.css b/theme/ckeditor5-special-characters/charactergrid.css
@@ -16,7 +16,7 @@
 	max-height: 200px;
 
 	& .ck-character-grid__tiles {
-		margin: var(--ck-spacing-standard);
+		margin: var(--ck-spacing-standard) var(--ck-spacing-large);
 		grid-gap: var(--ck-spacing-standard);
 	}
 

diff --git a/theme/ckeditor5-special-characters/characterinfo.css b/theme/ckeditor5-special-characters/characterinfo.css
@@ -4,7 +4,7 @@
  */
 
 .ck.ck-character-info {
-	padding: var(--ck-spacing-small) var(--ck-spacing-standard);
+	padding: var(--ck-spacing-small) var(--ck-spacing-large);
 	border-top: 1px solid var(--ck-color-base-border);
 
 	& > * {
@@ -22,4 +22,3 @@
 		opacity: .6;
 	}
 }
-
diff --git a/theme/ckeditor5-special-characters/specialcharacters.css b/theme/ckeditor5-special-characters/specialcharacters.css
@@ -7,7 +7,7 @@
 
 .ck.ck-special-characters-navigation {
 	border-bottom: 1px solid var(--ck-color-base-border);
-	padding: var(--ck-spacing-standard);
+	padding: var(--ck-spacing-standard) var(--ck-spacing-large);
 
 	@mixin ck-dir ltr {
 		padding-left: var(--ck-spacing-large);

diff --git a/theme/ckeditor5-table/formheader.css b/theme/ckeditor5-table/formheader.css
diff --git a/theme/ckeditor5-ui/components/dropdown/dropdown.css b/theme/ckeditor5-ui/components/dropdown/dropdown.css
@@ -9,100 +9,104 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 :root {
-	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
+  --ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
 }
 
 .ck.ck-dropdown {
-	/* Enable font size inheritance, which allows fluid UI scaling. */
-	font-size: inherit;
-
-	& .ck-dropdown__arrow {
-		width: var(--ck-dropdown-arrow-size);
-	}
-
-	@mixin ck-dir ltr {
-		& .ck-dropdown__arrow {
-			right: var(--ck-spacing-standard);
-
-			/* A space to accommodate the triangle. */
-			margin-left: var(--ck-spacing-small);
-		}
-	}
-
-	@mixin ck-dir rtl {
-		& .ck-dropdown__arrow {
-			left: var(--ck-spacing-standard);
-
-			/* A space to accommodate the triangle. */
-			margin-right: var(--ck-spacing-small);
-		}
-	}
-
-	&.ck-disabled .ck-dropdown__arrow {
-		@mixin ck-disabled;
-	}
-
-	& .ck-button.ck-dropdown__button {
-		@mixin ck-dir ltr {
-			&:not(.ck-button_with-text) {
-				/* Make sure dropdowns with just an icon have the right inner spacing */
-				padding-left: var(--ck-spacing-small);
-			}
-		}
-
-		@mixin ck-dir rtl {
-			&:not(.ck-button_with-text) {
-				/* Make sure dropdowns with just an icon have the right inner spacing */
-				padding-right: var(--ck-spacing-small);
-			}
-		}
-
-		/* #23 */
-		& .ck-button__label {
-			width: 7em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
-	&.ck-disabled .ck-button__label {
-		@mixin ck-disabled;
-		}
-
-		/* https://github.com/ckeditor/ckeditor5/issues/816 */
-		&.ck-on {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-	}
+  /* Enable font size inheritance, which allows fluid UI scaling. */
+  font-size: inherit;
+
+  & .ck-dropdown__arrow {
+    width: var(--ck-dropdown-arrow-size);
+  }
+
+  @mixin ck-dir ltr {
+    & .ck-dropdown__arrow {
+      right: var(--ck-spacing-standard);
+
+      /* A space to accommodate the triangle. */
+      margin-left: var(--ck-spacing-standard);
+    }
+  }
+
+  @mixin ck-dir rtl {
+    & .ck-dropdown__arrow {
+      left: var(--ck-spacing-standard);
+
+      /* A space to accommodate the triangle. */
+      margin-right: var(--ck-spacing-small);
+    }
+  }
+
+  &.ck-disabled .ck-dropdown__arrow {
+    @mixin ck-disabled;
+  }
+
+  & .ck-button.ck-dropdown__button {
+    @mixin ck-dir ltr {
+      &:not(.ck-button_with-text) {
+        /* Make sure dropdowns with just an icon have the right inner spacing */
+        padding-left: var(--ck-spacing-small);
+      }
+    }
+
+    @mixin ck-dir rtl {
+      &:not(.ck-button_with-text) {
+        /* Make sure dropdowns with just an icon have the right inner spacing */
+        padding-right: var(--ck-spacing-small);
+      }
+    }
+
+    /* #23 */
+    & .ck-button__label {
+      width: 7em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+    &.ck-disabled .ck-button__label {
+      @mixin ck-disabled;
+    }
+
+    /* https://github.com/ckeditor/ckeditor5/issues/816 */
+    &.ck-on {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &.ck-dropdown__button_label-width_auto .ck-button__label {
+      width: auto;
+    }
+  }
 }
 
 .ck.ck-dropdown__panel {
-	@mixin ck-rounded-corners;
-	@mixin ck-drop-shadow;
+  @mixin ck-rounded-corners;
+  @mixin ck-drop-shadow;
 
-	background: var(--ck-color-dropdown-panel-background);
-	border: 1px solid var(--ck-color-dropdown-panel-border);
-	bottom: 0;
+  background: var(--ck-color-dropdown-panel-background);
+  border: 1px solid var(--ck-color-dropdown-panel-border);
+  bottom: 0;
 
-	/* Make sure the panel is at least as wide as the drop-down's button. */
-	min-width: 100%;
+  /* Make sure the panel is at least as wide as the drop-down's button. */
+  min-width: 100%;
 
-	/* Disabled corner border radius to be consistent with the .dropdown__button
+  /* Disabled corner border radius to be consistent with the .dropdown__button
 	https://github.com/ckeditor/ckeditor5/issues/816 */
-	&.ck-dropdown__panel_se {
-		border-top-left-radius: 0;
-	}
+  &.ck-dropdown__panel_se {
+    border-top-left-radius: 0;
+  }
 
-	&.ck-dropdown__panel_sw {
-		border-top-right-radius: 0;
-	}
+  &.ck-dropdown__panel_sw {
+    border-top-right-radius: 0;
+  }
 
-	&.ck-dropdown__panel_ne {
-		border-bottom-left-radius: 0;
-	}
+  &.ck-dropdown__panel_ne {
+    border-bottom-left-radius: 0;
+  }
 
-	&.ck-dropdown__panel_nw {
-		border-bottom-right-radius: 0;
-	}
+  &.ck-dropdown__panel_nw {
+    border-bottom-right-radius: 0;
+  }
 }