Browse Source

Other: Update CSS classes to be more BEM & update color values.

Maciej Gołaszewski 7 years ago
parent
commit
acb74b314d

+ 3 - 3
packages/ckeditor5-table/src/ui/inserttableview.js

@@ -70,14 +70,14 @@ export default class InsertTableView extends View {
 				{
 					tag: 'div',
 					attributes: {
-						class: [ 'ck-table-size-choose-box-container' ]
+						class: [ 'ck-insert-table-dropdown__grid' ]
 					},
 					children: this.items
 				},
 				{
 					tag: 'div',
 					attributes: {
-						class: [ 'ck-table-size-label' ]
+						class: [ 'ck-insert-table-dropdown__label' ]
 					},
 					children: [
 						{
@@ -151,7 +151,7 @@ class TableSizeChooser extends View {
 			tag: 'div',
 			attributes: {
 				class: [
-					'ck-table-size-choose-box',
+					'ck-insert-table-dropdown-grid-box',
 					bind.if( 'isOn', 'ck-on' )
 				]
 			},

+ 2 - 2
packages/ckeditor5-table/tests/ui/inserttableview.js

@@ -45,8 +45,8 @@ describe( 'InsertTableView', () => {
 		it( 'creates #element from template', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.children ).to.have.length( 2 );
-			expect( view.element.children[ 0 ].classList.contains( 'ck-table-size-choose-box-container' ) ).to.be.true;
-			expect( view.element.children[ 1 ].classList.contains( 'ck-table-size-label' ) ).to.be.true;
+			expect( view.element.children[ 0 ].classList.contains( 'ck-insert-table-dropdown__grid' ) ).to.be.true;
+			expect( view.element.children[ 1 ].classList.contains( 'ck-insert-table-dropdown__label' ) ).to.be.true;
 		} );
 
 		it( 'creates view#items collection', () => {

+ 21 - 22
packages/ckeditor5-table/theme/inserttable.css

@@ -4,39 +4,38 @@
  */
 
 :root {
-	/* TODO: does it need to be a variable? */
-	--ck-insert-table-box-height: 11px;
-	--ck-insert-table-box-width: 12px;
-	--ck-insert-table-box-margin: 1px;
-	--ck-insert-table-box-border: 1px;
-	--ck-insert-table-box-border-color: #aaa;
-	--ck-insert-table-box-border-color__active: #5fa6ff;
-	--ck-insert-table-box-background__active: #c9e9ff;
-	--ck-insert-table-padding: 10px;
+	--ck-insert-table-dropdown-padding: 10px;
+	--ck-insert-table-dropdown-box-height: 11px;
+	--ck-insert-table-dropdown-box-width: 12px;
+	--ck-insert-table-dropdown-box-margin: 1px;
+	--ck-insert-table-dropdown-box-border-color: hsl(0, 0%, 75%);
+	--ck-insert-table-dropdown-box-border-active-color: hsl(208, 73%, 61%);
+	--ck-insert-table-dropdown-box-active-background: hsl(208, 100%, 89%);
 }
 
-.ck .ck-table-size-choose-box-container {
+.ck .ck-insert-table-dropdown__grid {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	/* The width of a container should match 10 items in a row so there will be a 10x10 grid. */
-	width: calc(var(--ck-insert-table-box-width) * 10 + var(--ck-insert-table-box-margin) * 20 + var(--ck-insert-table-padding) * 2);
-	padding: var(--ck-insert-table-padding) var(--ck-insert-table-padding) 0;
+	width: calc(var(--ck-insert-table-dropdown-box-width) * 10 + var(--ck-insert-table-dropdown-box-margin) * 20 + var(--ck-insert-table-dropdown-padding) * 2);
+	padding: var(--ck-insert-table-dropdown-padding) var(--ck-insert-table-dropdown-padding) 0;
 }
 
-.ck .ck-table-size-choose-box {
-	width: var(--ck-insert-table-box-width);
-	height: var(--ck-insert-table-box-height);
-	margin: var(--ck-insert-table-box-margin);
-	border: var(--ck-insert-table-box-border) solid var(--ck-insert-table-box-border-color);
+.ck .ck-insert-table-dropdown__label {
+	text-align: center;
+}
+
+.ck .ck-insert-table-dropdown-grid-box {
+	width: var(--ck-insert-table-dropdown-box-width);
+	height: var(--ck-insert-table-dropdown-box-height);
+	margin: var(--ck-insert-table-dropdown-box-margin);
+	border: 1px solid var(--ck-insert-table-dropdown-box-border-color);
 	border-radius: 1px;
 
 	&.ck-on {
-		border-color: var(--ck-insert-table-box-border-color__active);
-		background: var(--ck-insert-table-box-background__active);
+		border-color: var(--ck-insert-table-dropdown-box-border-active-color);
+		background: var(--ck-insert-table-dropdown-box-active-background);
 	}
 }
 
-.ck .ck-table-size-label {
-	text-align: center;
-}