Commit d0d01784 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Adjust context for button content scaling

* Labeled buttons should continue sizing font as 1em, icons default at
  1.25em (no change)
* Icon-only buttons should size icon at 1em (instead of 1.25em) because
  the icon _is_ the content

Update `AnnotationActionBar` to set local font size to 16px to get
desired icon sizing (@1em).
parent 29f7b078
...@@ -88,7 +88,7 @@ function AnnotationActionBar({ ...@@ -88,7 +88,7 @@ function AnnotationActionBar({
}; };
return ( return (
<div className="AnnotationActionBar u-layout-row"> <div className="AnnotationActionBar u-layout-row u-font--xlarge">
{showEditAction && ( {showEditAction && (
<IconButton icon="edit" title="Edit" onClick={onEdit} /> <IconButton icon="edit" title="Edit" onClick={onEdit} />
)} )}
......
...@@ -95,13 +95,51 @@ ...@@ -95,13 +95,51 @@
&--icon-right svg { &--icon-right svg {
margin-left: map.get($options, 'margin'); margin-left: map.get($options, 'margin');
} }
// When a button has "layout", that indicates it has some textual content:
// Size text to the contextual 1em, and adjust the icon to look balanced.
// H frontend app buttons tend to apply an icon:text ratio of ~1.25:1
svg {
width: 1.25em;
height: 1.25em;
}
} @else {
// In the case where an icon is the only content in a <button> element,
// size the icon based on contextual font-size. i.e. the icon IS
// the content
svg {
width: 1em;
height: 1em;
}
} }
}
// (icon) SVG sizing is relevant /**
svg { * Convenience function to retrieve a colormap. This obviates the need to reach
width: 1.25em; * into the `_config` module directly from outside and is less verbose.
height: 1.25em; *
* @param {'colors'|'icon'|'icon--primary'|'labeled'|'labeled--primary'|'link'}
* [$name] - Shorthand name of colormap to retrieved. Defaults to base
* $colors.
* @return {sass:map}
*/
@function colormap($name: 'colors') {
$result: $colors;
@if $name == 'icon' {
$result: $IconButton-colors;
}
@if $name == 'icon--primary' {
$result: $IconButton-colors--primary;
}
@if $name == 'labeled' {
$result: $LabeledButton-colors;
}
@if $name == 'labeled--primary' {
$result: $LabeledButton-colors--primary;
}
@if $name == 'link' {
$result: $LinkButton-colors;
} }
@return $result;
} }
// Base mixin for <button> elements. Start here for new <button> classes // Base mixin for <button> elements. Start here for new <button> classes
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment