diff --git a/src/components/color-button/color-button.css b/src/components/color-button/color-button.css index e09a64a3..5ef6744d 100644 --- a/src/components/color-button/color-button.css +++ b/src/components/color-button/color-button.css @@ -5,6 +5,7 @@ } .color-button-swatch { + position: relative; display: flex; flex-basis: 2rem; flex-shrink: 0; @@ -34,4 +35,19 @@ .swatch-icon { width: 1.75rem; margin: auto; + /* Make sure it appears above the outline box */ + z-index: 2; +} + +.outline-swatch:after { + content: ""; + position: absolute; + top: calc(0.5rem + 1px); + left: calc(0.5rem + 1px); + width: 0.75rem; + height: 0.75rem; + background: white; + border: 1px solid rgba(0, 0, 0, 0.25); + /* Make sure it appears below the transparent icon */ + z-index: 1; } diff --git a/src/components/color-button/color-button.jsx b/src/components/color-button/color-button.jsx index f36bdb66..8346154b 100644 --- a/src/components/color-button/color-button.jsx +++ b/src/components/color-button/color-button.jsx @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; import {MIXED} from '../../helper/style-path'; @@ -17,7 +18,9 @@ const ColorButtonComponent = props => ( onClick={props.onClick} >
( ); ColorButtonComponent.propTypes = { + outline: PropTypes.bool.isRequired, color: PropTypes.string, onClick: PropTypes.func.isRequired }; +ColorButtonComponent.defaultProps = { + outline: false +}; + export default ColorButtonComponent; diff --git a/src/components/stroke-color-indicator.jsx b/src/components/stroke-color-indicator.jsx index af427722..dc671fda 100644 --- a/src/components/stroke-color-indicator.jsx +++ b/src/components/stroke-color-indicator.jsx @@ -31,6 +31,7 @@ const StrokeColorIndicatorComponent = props => ( >