@@ -57,7 +57,12 @@ a.ck-button {
@mixin ck-button-colors --ck-color-button-on;
}
- & .ck-icon {
+ @mixin ck-button-icon {
+ /* This margin is neccessary for icons in label-less buttons to stretch
+ the button properly. When there's no text in the button, browsers render
+ them too narrow. */
+ margin: .2em;
+
use,
use * {
color: inherit;
@@ -76,7 +81,7 @@ a.ck-button {
/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
without labels (but with icons) have different sizes in Chrome */
- vertical-align: top;
+ vertical-align: middle;
@@ -3,19 +3,7 @@
* For licensing, see LICENSE.md.
*/
-/**
- * Default width/height of an icon. Note that it equals the default
- * height of the line of text, so e.g. it matches the height of the
- * button's label.
- */
-:root {
- --ck-icon-min-size: calc(var(--ck-font-size-base) * var(--ck-line-height-base));
-}
-
svg.ck-icon {
width: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
height: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
- min-width: var(--ck-icon-min-size);
- min-height: var(--ck-icon-min-size);
@@ -4,8 +4,8 @@
:root {
- --ck-font-size-base: 12px;
- --ck-line-height-base: 1.67;
+ --ck-font-size-base: 13px;
+ --ck-line-height-base: 1.84615;
--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
--ck-font-size-tiny: 0.7em;
@@ -4,7 +4,7 @@
- --ck-spacing-unit: 0.8em;
+ --ck-spacing-unit: 0.6em;
--ck-spacing-large: calc(var(--ck-spacing-unit) * 1.5);
--ck-spacing-standard: var(--ck-spacing-unit);
--ck-spacing-medium: calc(var(--ck-spacing-unit) * 0.8);