Skip to content

Instantly share code, notes, and snippets.

@embiem
Created June 23, 2017 08:06
Show Gist options
  • Save embiem/e2c19f08e14b94c154c398951ac9897e to your computer and use it in GitHub Desktop.
Save embiem/e2c19f08e14b94c154c398951ac9897e to your computer and use it in GitHub Desktop.
Adobe App-styled button as a React Component
// Adobe Colors
$bg-inset: #1D1D1D !default;
$bg: #232323 !default;
$bg-element: #303030 !default;
$bg-element-selected: #474747 !default;
$fg: #818181 !default;
$fg-primary: #B9B9B9 !default;
$active: #2D8CEB !default;
import React, { Component } from 'react';
import './AdobeButton.css';
/**
* Adobe-Style button
*/
class AdobeButton extends Component {
render() {
const { text, onClick } = this.props;
if (typeof onClicked !== 'function') {
console.warn(`AdobeButton with "${text}" has no onClick-prop!`);
}
return (
<div
className="adobe-button"
onClick={onClick}
>
{text}
</div>
);
}
}
export default AdobeButton;
@import "colors";
.adobe-button {
display: inline-block;
user-select: none;
cursor: pointer;
height: 20pt;
line-height: 20pt;
padding: 0 8pt 0 8pt;
font-size: 12pt;
color: $fg;
background-color: $bg;
border: $fg 1pt solid;
border-radius: 20pt;
transition: all 0.2s ease;
&:hover {
background-color: $fg;
color: $bg;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment