cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases Activity

Change icon button styles to make hover/focus states more obvious (#11474)

Browse source 
* 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:
ThibG 2019-08-03 19:10:50 +02:00 • committed by Eugen Rochko
parent 089c641020
commit c8fd823327
2 changed files with 44 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/javascript/mastodon/features/compose/components/text_icon_button.js
View file

@ -1,6 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
const iconStyle = {
height: null,
lineHeight: '27px',
width: `${18 * 1.28571429}px`,
};
export default class TextIconButton extends React.PureComponent {
static propTypes = {
@ -20,7 +26,14 @@ export default class TextIconButton extends React.PureComponent {
const { label, title, active, ariaControls } = this.props;
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}
</button>
);

35
app/javascript/styles/mastodon/components.scss
View file

@ -129,19 +129,28 @@
padding: 0;
color: $action-button-color;
border: 0;
border-radius: 4px;
background: transparent;
cursor: pointer;
transition: color 100ms ease-in;
transition: all 100ms ease-in;
transition-property: background-color, color;
&:hover,
&:active,
&:focus {
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 {
color: darken($action-button-color, 13%);
background-color: transparent;
cursor: default;
}
@ -166,10 +175,16 @@
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15);
}
&:focus {
background-color: rgba($lighter-text-color, 0.3);
}
&.disabled {
color: lighten($lighter-text-color, 7%);
background-color: transparent;
}
&.active {
@ -197,6 +212,7 @@
.text-icon-button {
color: $lighter-text-color;
border: 0;
border-radius: 4px;
background: transparent;
cursor: pointer;
font-weight: 600;
@ -204,17 +220,25 @@
padding: 0 3px;
line-height: 27px;
outline: 0;
transition: color 100ms ease-in;
transition: all 100ms ease-in;
transition-property: background-color, color;
&:hover,
&:active,
&:focus {
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 {
color: lighten($lighter-text-color, 20%);
background-color: transparent;
cursor: default;
}
@ -604,7 +628,8 @@
}
}
.icon-button {
.icon-button,
.text-icon-button {
box-sizing: content-box;
padding: 0 3px;
}