|
|
@@ -6,23 +6,26 @@
|
|
|
@import "../../../mixins/_rounded.css";
|
|
|
|
|
|
:root {
|
|
|
- --ck-color-grid-tile-size: 20px;
|
|
|
+ --ck-color-grid-tile-size: 24px;
|
|
|
+
|
|
|
+ /* Not using global colors here because these may change but some colors in a pallette
|
|
|
+ * require special treatment. For instance, this ensures no matter what the UI text color is,
|
|
|
+ * the check icon will look good on the black color tile. */
|
|
|
+ --ck-color-color-grid-check-icon: hsl(0, 0%, 0%);
|
|
|
}
|
|
|
|
|
|
.ck.ck-color-grid {
|
|
|
- grid-gap: calc( var(--ck-spacing-standard) / 2 );
|
|
|
- padding: var(--ck-spacing-standard);
|
|
|
+ grid-gap: 5px;
|
|
|
+ padding: 8px;
|
|
|
}
|
|
|
|
|
|
.ck.ck-color-grid__tile {
|
|
|
- @mixin ck-rounded-corners;
|
|
|
-
|
|
|
width: var(--ck-color-grid-tile-size);
|
|
|
height: var(--ck-color-grid-tile-size);
|
|
|
min-width: var(--ck-color-grid-tile-size);
|
|
|
min-height: var(--ck-color-grid-tile-size);
|
|
|
padding: 0;
|
|
|
- transition: 200ms ease box-shadow;
|
|
|
+ transition: .2s ease box-shadow;
|
|
|
border: 0;
|
|
|
|
|
|
&.ck-disabled {
|
|
|
@@ -36,18 +39,27 @@
|
|
|
|
|
|
& .ck.ck-icon {
|
|
|
display: none;
|
|
|
+ color: var(--ck-color-color-grid-check-icon);
|
|
|
}
|
|
|
|
|
|
&.ck-on {
|
|
|
- box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
|
|
|
+ box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
|
|
|
|
|
|
& .ck.ck-icon {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ &.ck-on,
|
|
|
+ &:focus:not( .ck-disabled ),
|
|
|
+ &:hover:not( .ck-disabled ) {
|
|
|
+ /* Disable the default .ck-button's border ring. */
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:focus:not( .ck-disabled ),
|
|
|
&:hover:not( .ck-disabled ) {
|
|
|
- box-shadow: 0 0 0 2px var(--ck-color-focus-border);
|
|
|
+ box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
|
|
|
}
|
|
|
}
|
|
|
|