|
|
@@ -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;
|
|
|
-}
|