Reduce padding around text buttons

After moving the padding to the content of buttons, we ended up with
extra padding around text buttons that wasn't there before. The
"Download" bar doesn't look great with no padding at all, but it needs
to match the text buttons so the text doesn't jump to the right when
it switches from "Download" (text button) to "Connecting" (progress bar).

So we pad both text buttons and progress bars just a little bit, less
than a standard button but enough that progress bars look OK.
This commit is contained in:
Alex Liebowitz 2017-01-18 03:45:23 -05:00
parent 44412437ce
commit b2fd38a1c8
5 changed files with 17 additions and 5 deletions

View file

@ -185,7 +185,7 @@ let FileActionsRow = React.createClass({
</div>
);
} else {
linkBlock = <Link button="text" label="Open" icon="icon-folder-open" onClick={this.onOpenClick} />;
linkBlock = <Link label="Open" icon="icon-folder-open" onClick={this.onOpenClick} />;
}
return (

View file

@ -28,7 +28,8 @@ export let Link = React.createClass({
/* The way the class name is generated here is a mess -- refactor */
const className = (this.props.className || '') +
(this.props.button ? ' button-block button-' + this.props.button : '') +
(!this.props.className && !this.props.button ? 'button-block button-text' : '') + // Non-button links get the same look as text buttons
(this.props.button ? 'button-block button-' + this.props.button : '') +
(this.props.disabled ? ' disabled' : '');
let content;
@ -45,9 +46,9 @@ export let Link = React.createClass({
return (
<a className={className} href={this.props.href || 'javascript:;'} title={this.props.title}
onClick={this.handleClick} {... 'style' in this.props ? {style: this.props.style} : {}}>
{('button' in this.props) && this.props.button != 'text'
? <span className="button__content">{content}</span>
: content}
{'button' in this.props
? <span className="button__content">{content}</span>
: content}
</a>
);
}

View file

@ -3,6 +3,7 @@
$spacing-vertical: 24px;
$padding-button: 12px;
$padding-text-link: 4px;
$color-primary: #155B4A;
$color-light-alt: hsl(hue($color-primary), 15, 85);

View file

@ -198,6 +198,10 @@ input[type="text"], input[type="search"]
{
@include text-link();
display: inline-block;
.button__content {
margin: 0 $padding-text-link;
}
}
.button-text-help
{

View file

@ -8,6 +8,12 @@ $color-download: #444;
min-height: $height-button;
}
.file-actions__download-status-bar, .file-actions__download-status-bar-overlay {
.button__content {
margin: 0 $padding-text-link;
}
}
.file-actions__download-status-bar
{
position: relative;