|
|
@@ -3,39 +3,48 @@
|
|
|
* For licensing, see LICENSE.md.
|
|
|
*/
|
|
|
|
|
|
-.ck-color-table .ck-color-table__table {
|
|
|
- margin: 0.5em 0.5em 0 0.5em;
|
|
|
- width: 100%;
|
|
|
- border-collapse: separate;
|
|
|
- border-spacing: 0.2em;
|
|
|
+:root {
|
|
|
+ /* --grid-size: 20px; */
|
|
|
+ --grid-size: 25px;
|
|
|
+
|
|
|
+ --grid-columns-max: 5;
|
|
|
+ /* Test it and uncomment variable. */
|
|
|
+ /* --grid-columns-max: 8; */
|
|
|
+ /* --grid-columns-max: 3; */
|
|
|
}
|
|
|
|
|
|
-.ck-color-table .ck-color-table__cell-color {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border: 0.1em solid #000;
|
|
|
- transition-property: border-width;
|
|
|
- transition-duration: 0.1s;
|
|
|
- transition-timing-function: ease;
|
|
|
- text-align: center;
|
|
|
- vertical-align: middle;
|
|
|
- line-height: 0;
|
|
|
+.ck-color-table div.ck-color-table__main-container {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat( var(--grid-columns-max), 1fr);
|
|
|
+ grid-gap: 5px;
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
|
|
|
-.ck-color-table .ck-color-table__cell-color:hover {
|
|
|
- border-width: 0.2em;
|
|
|
+.ck-color-table__main-container span.ck-color-table__color-item {
|
|
|
+ width: var(--grid-size);
|
|
|
+ height: var(--grid-size);
|
|
|
+ border-radius: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 300ms ease all;
|
|
|
}
|
|
|
|
|
|
-.ck-color-table .ck-color-table__cell-color_active::before {
|
|
|
- content: "✓";
|
|
|
- font-size: 1.2em;
|
|
|
- color: white;
|
|
|
- text-shadow: -1px -1px 0 #000,
|
|
|
- 1px -1px 0 #000,
|
|
|
- -1px 1px 0 #000,
|
|
|
- 1px 1px 0 #000;
|
|
|
+.ck-color-table__main-container span.ck-color-table__color-item:hover {
|
|
|
+ box-shadow: 0 0 0 2px hsl(184, 80%, 50%);
|
|
|
}
|
|
|
|
|
|
-.ck-color-table .ck-color-table__remove-color {
|
|
|
- margin: 0.5em;
|
|
|
+.ck-color-table button.ck-color-table__remove-color svg {
|
|
|
+ width: 24px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.ck-color-table button.ck-color-table__remove-color {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 16px;
|
|
|
+ border: 0;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid hsl(0, 0%, 87%);
|
|
|
+ padding: 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|