Better variables and props for button
parent
4511d8a4fd
commit
614b1b14ba
|
@ -1,15 +1,20 @@
|
|||
$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
|
||||
$button-accent-color: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-border-radius: 0.2 * $unit;
|
||||
$button-default-text-color: unquote("rgb(#{$color-black})") !default;
|
||||
$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
|
||||
$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
$button-primary-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$button-floating-font-size: $unit * 2.4;
|
||||
$button-floating-height-mini: $unit * 4;
|
||||
$button-floating-mini-font-size: $button-floating-height-mini / 2.25;
|
||||
$button-floating-height: $unit * 5.6;
|
||||
$button-height: $unit * 3.6;
|
||||
$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
|
||||
$button-accent-color: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
|
||||
$button-accent-color-active: unquote("rgba(#{$color-accent}, 0.40)") !default;
|
||||
$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$button-height: $unit * 3.6;
|
||||
$button-floating-height: $unit * 5.6;
|
||||
$button-floating-height-mini: $unit * 4;
|
||||
$button-primary-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
|
||||
$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
$button-squared-icon-margin: $unit * .6;
|
||||
$button-squared-min-width: 9 * $unit;
|
||||
$button-squared-padding: 0 $unit * 1.2;
|
||||
|
|
|
@ -5,63 +5,63 @@ import Ripple from '../ripple';
|
|||
import style from './style.scss';
|
||||
import events from '../utils/events';
|
||||
|
||||
export default React.createClass({
|
||||
const Button = React.createClass({
|
||||
mixins: [PureRenderMixin],
|
||||
|
||||
displayName: 'Button',
|
||||
|
||||
propTypes: {
|
||||
accent: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
icon: React.PropTypes.string,
|
||||
primary: React.PropTypes.bool,
|
||||
accent: React.PropTypes.bool,
|
||||
kind: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
loading: React.PropTypes.bool,
|
||||
mini: React.PropTypes.bool,
|
||||
primary: React.PropTypes.bool,
|
||||
ripple: React.PropTypes.bool,
|
||||
type: React.PropTypes.string
|
||||
},
|
||||
|
||||
getDefaultProps () {
|
||||
return {
|
||||
accent: false,
|
||||
className: '',
|
||||
ripple: true,
|
||||
type: 'flat'
|
||||
kind: 'flat',
|
||||
loading: false,
|
||||
mini: false,
|
||||
primary: false,
|
||||
ripple: true
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
return { loading: this.props.loading };
|
||||
},
|
||||
|
||||
handleMouseDown (event) {
|
||||
events.pauseEvent(event);
|
||||
this.refs.ripple.start(event);
|
||||
},
|
||||
|
||||
render () {
|
||||
let className = style[this.props.type];
|
||||
let className = style[this.props.kind];
|
||||
if (!this.props.primary && !this.props.accent) className += ` ${style.primary}`;
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
if (this.props.primary) className += ` ${style.primary}`;
|
||||
if (this.props.accent) className += ` ${style.accent}`;
|
||||
if (this.props.mini) className += ` ${style.mini}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
data-react-toolbox='button'
|
||||
{...this.props}
|
||||
type=''
|
||||
label=''
|
||||
data-toolbox='button'
|
||||
className={className}
|
||||
disabled={this.props.disabled || this.state.loading}
|
||||
data-react-toolbox='button'
|
||||
onMouseDown={this.handleMouseDown}
|
||||
disabled={this.props.disabled || this.props.loading}
|
||||
>
|
||||
{ this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
|
||||
{ this.props.icon ? <FontIcon className={style.icon} value={this.props.icon}/> : null }
|
||||
{ this.props.label ? <abbr className={style.label}>{this.props.label}</abbr> : null }
|
||||
</button>
|
||||
);
|
||||
},
|
||||
|
||||
loading (value) {
|
||||
this.setState({loading: value});
|
||||
}
|
||||
});
|
||||
|
||||
export default Button;
|
||||
|
|
|
@ -3,10 +3,10 @@
|
|||
|
||||
%button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
height: $button-height;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
color: $button-default-text-color;
|
||||
text-align: center;
|
||||
|
@ -19,21 +19,18 @@
|
|||
background-color .2s $animation-curve-default,
|
||||
color .2s $animation-curve-default;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%squared {
|
||||
min-width: 9 * $unit;
|
||||
padding: 0 $unit * 1.2;
|
||||
border-radius: $border-radius;
|
||||
|
||||
min-width: $button-squared-min-width;
|
||||
padding: $button-squared-padding;
|
||||
border-radius: $button-border-radius;
|
||||
.icon {
|
||||
margin-right: $unit * .6;
|
||||
margin-right: $button-squared-icon-margin;
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
@ -45,7 +42,6 @@
|
|||
cursor: auto;
|
||||
}
|
||||
|
||||
//-- Local styles
|
||||
.label {
|
||||
@include typo-button();
|
||||
line-height: $button-height;
|
||||
|
@ -55,15 +51,12 @@
|
|||
@extend %button;
|
||||
@extend %squared;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $button-flat-color-hover;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
background: $button-flat-color-hover;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
}
|
||||
|
@ -74,15 +67,12 @@
|
|||
@extend %squared;
|
||||
@include shadow-2dp();
|
||||
background: $button-solid-background-color;
|
||||
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
@include shadow-2dp();
|
||||
|
@ -94,76 +84,64 @@
|
|||
@extend %button;
|
||||
width: $button-floating-height;
|
||||
height: $button-floating-height;
|
||||
font-size: $unit * 2.4;
|
||||
font-size: $button-floating-font-size;
|
||||
background: $button-solid-background-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
|
||||
0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
@include shadow-2dp();
|
||||
background-color: $button-solid-disabled-background-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
line-height: $button-floating-height;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.primary):not([disabled]) {
|
||||
.primary:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $button-primary-color-contrast;
|
||||
background: $button-primary-color;
|
||||
}
|
||||
|
||||
&.flat {
|
||||
color: $button-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: $button-primary-color-hover;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
background: $button-primary-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.accent):not([disabled]) {
|
||||
.accent:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $button-accent-color-contrast;
|
||||
background-color: $button-accent-color;
|
||||
}
|
||||
|
||||
&.flat {
|
||||
color: $button-accent-color;
|
||||
|
||||
&:hover {
|
||||
background: $button-accent-color-hover;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
background: $button-accent-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.mini) {
|
||||
&.floating {
|
||||
.mini.floating {
|
||||
width: $button-floating-height-mini;
|
||||
height: $button-floating-height-mini;
|
||||
font-size: ($button-floating-height-mini / 2.25);
|
||||
|
||||
font-size: $button-floating-mini-font-size;
|
||||
.icon {
|
||||
line-height: $button-floating-height-mini;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import style from './style';
|
||||
|
||||
import Button from '../button';
|
||||
import FontIcon from '../font_icon';
|
||||
|
||||
|
@ -33,9 +32,9 @@ export default React.createClass({
|
|||
if (this.props.action) {
|
||||
return (
|
||||
<Button
|
||||
label={this.props.action}
|
||||
type='flat'
|
||||
kind='flat'
|
||||
className={style.button}
|
||||
label={this.props.action}
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
);
|
||||
|
@ -69,5 +68,4 @@ export default React.createClass({
|
|||
}, this.props.timeout * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
|
@ -9,14 +9,14 @@ export default React.createClass({
|
|||
<section>
|
||||
<h5>Buttons</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button type="raised" className="primary" label="Bookmark" icon="bookmark" />
|
||||
<Button type="flat" className="accent" label="Inbox" icon="inbox" />
|
||||
<Button type="floating" className="primary" icon="add" />
|
||||
<Button type="floating" className="primary" disabled icon="add" />
|
||||
<Button type="floating" className="accent mini" icon="add" />
|
||||
<Button type="flat" className="primary" icon="add" label="Add this" />
|
||||
<Button type="raised" className="primary" label="Bookmark" icon="bookmark" loading />
|
||||
<Button type="flat" disabled className="" icon="add" label="Add this" />
|
||||
<Button kind="raised" primary label="Bookmark" icon="bookmark" />
|
||||
<Button kind="flat" accent label="Inbox" icon="inbox" />
|
||||
<Button kind="floating" primary icon="add" />
|
||||
<Button kind="floating" primary disabled icon="add" />
|
||||
<Button kind="floating" accent mini icon="add" />
|
||||
<Button kind="flat" primary icon="add" label="Add this" />
|
||||
<Button kind="raised" primary label="Bookmark" icon="bookmark" loading />
|
||||
<Button kind="flat" disabled icon="add" label="Add this" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -27,7 +27,7 @@ export default React.createClass({
|
|||
<section>
|
||||
<h5>Dialog</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button type='raised' label='Show Dialog' onClick={this.onShow} />
|
||||
<Button kind='raised' label='Show Dialog' onClick={this.onShow} />
|
||||
<Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
|
||||
<p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
|
||||
</Dialog>
|
||||
|
|
|
@ -26,8 +26,8 @@ export default React.createClass({
|
|||
</Drawer>
|
||||
|
||||
<nav>
|
||||
<Button className='accent' label='Drawer left hideable' type='raised' onClick={this.onClick.bind(null, 'left', 'show')} />
|
||||
<Button className='primary' label='Drawer right' type='raised' onClick={this.onClick.bind(null, 'right', 'show')} />
|
||||
<Button accent label='Drawer left hideable' kind='raised' onClick={this.onClick.bind(null, 'left', 'show')} />
|
||||
<Button primary label='Drawer right' kind='raised' onClick={this.onClick.bind(null, 'right', 'show')} />
|
||||
</nav>
|
||||
</section>
|
||||
);
|
||||
|
|
|
@ -19,7 +19,7 @@ export default React.createClass({
|
|||
<section>
|
||||
<h5>Snackbars & Toasts</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button label='Show snackbar' onClick={this.handleSnackbar} type='raised' />
|
||||
<Button label='Show snackbar' kind='raised' onClick={this.handleSnackbar} />
|
||||
<Snackbar
|
||||
ref='snackbar'
|
||||
action='Dismiss'
|
||||
|
|
Loading…
Reference in New Issue