Change icon button styles to make hover/focus states more obvious (#11474)
* Change icon buttons styles to make hover/focused states more obvious * Fix CW button size inconsistency * Fix icon button background color consistency
This commit is contained in:
parent
089c641020
commit
c8fd823327
|
@ -1,6 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const iconStyle = {
|
||||||
|
height: null,
|
||||||
|
lineHeight: '27px',
|
||||||
|
width: `${18 * 1.28571429}px`,
|
||||||
|
};
|
||||||
|
|
||||||
export default class TextIconButton extends React.PureComponent {
|
export default class TextIconButton extends React.PureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
@ -20,7 +26,14 @@ export default class TextIconButton extends React.PureComponent {
|
||||||
const { label, title, active, ariaControls } = this.props;
|
const { label, title, active, ariaControls } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={this.handleClick} aria-controls={ariaControls}>
|
<button
|
||||||
|
title={title}
|
||||||
|
aria-label={title}
|
||||||
|
className={`text-icon-button ${active ? 'active' : ''}`}
|
||||||
|
aria-expanded={active}
|
||||||
|
onClick={this.handleClick}
|
||||||
|
aria-controls={ariaControls} style={iconStyle}
|
||||||
|
>
|
||||||
{label}
|
{label}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|
|
@ -129,19 +129,28 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: $action-button-color;
|
color: $action-button-color;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
border-radius: 4px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 100ms ease-in;
|
transition: all 100ms ease-in;
|
||||||
|
transition-property: background-color, color;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: lighten($action-button-color, 7%);
|
color: lighten($action-button-color, 7%);
|
||||||
transition: color 200ms ease-out;
|
background-color: rgba($action-button-color, 0.15);
|
||||||
|
transition: all 200ms ease-out;
|
||||||
|
transition-property: background-color, color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: rgba($action-button-color, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: darken($action-button-color, 13%);
|
color: darken($action-button-color, 13%);
|
||||||
|
background-color: transparent;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -166,10 +175,16 @@
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: darken($lighter-text-color, 7%);
|
color: darken($lighter-text-color, 7%);
|
||||||
|
background-color: rgba($lighter-text-color, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: rgba($lighter-text-color, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: lighten($lighter-text-color, 7%);
|
color: lighten($lighter-text-color, 7%);
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
|
@ -197,6 +212,7 @@
|
||||||
.text-icon-button {
|
.text-icon-button {
|
||||||
color: $lighter-text-color;
|
color: $lighter-text-color;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
border-radius: 4px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
@ -204,17 +220,25 @@
|
||||||
padding: 0 3px;
|
padding: 0 3px;
|
||||||
line-height: 27px;
|
line-height: 27px;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
transition: color 100ms ease-in;
|
transition: all 100ms ease-in;
|
||||||
|
transition-property: background-color, color;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: darken($lighter-text-color, 7%);
|
color: darken($lighter-text-color, 7%);
|
||||||
transition: color 200ms ease-out;
|
background-color: rgba($lighter-text-color, 0.15);
|
||||||
|
transition: all 200ms ease-out;
|
||||||
|
transition-property: background-color, color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: rgba($lighter-text-color, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: lighten($lighter-text-color, 20%);
|
color: lighten($lighter-text-color, 20%);
|
||||||
|
background-color: transparent;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -604,7 +628,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button {
|
.icon-button,
|
||||||
|
.text-icon-button {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
padding: 0 3px;
|
padding: 0 3px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue