mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-10-21 11:47:33 +02:00
[Glitch] Change icon button styles to make hover/focus states more obvious
Port c8fd823327
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
parent
8b57d704dc
commit
f02ffce249
|
@ -7,7 +7,7 @@ import spring from 'react-motion/lib/spring';
|
|||
|
||||
// Components.
|
||||
import IconButton from 'flavours/glitch/components/icon_button';
|
||||
import TextIconButton from 'flavours/glitch/components/text_icon_button';
|
||||
import TextIconButton from './text_icon_button';
|
||||
import Dropdown from './dropdown';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
|
|
|
@ -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,15 @@ 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>
|
||||
);
|
|
@ -118,20 +118,29 @@
|
|||
display: inline-block;
|
||||
padding: 0;
|
||||
color: $action-button-color;
|
||||
border: none;
|
||||
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;
|
||||
}
|
||||
|
||||
|
@ -156,10 +165,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 {
|
||||
|
@ -186,7 +201,8 @@
|
|||
|
||||
.text-icon-button {
|
||||
color: $lighter-text-color;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
|
@ -194,17 +210,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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue