mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-23 05:52:42 -05:00
Add box to make outline different from fill button
This commit is contained in:
parent
ab3b4e4555
commit
68c6f69211
3 changed files with 26 additions and 1 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
<div
|
||||
className={styles.colorButtonSwatch}
|
||||
className={classNames(styles.colorButtonSwatch, {
|
||||
[styles.outlineSwatch]: props.outline
|
||||
})}
|
||||
style={{
|
||||
background: colorToBackground(props.color)
|
||||
}}
|
||||
|
@ -39,8 +42,13 @@ const ColorButtonComponent = props => (
|
|||
);
|
||||
|
||||
ColorButtonComponent.propTypes = {
|
||||
outline: PropTypes.bool.isRequired,
|
||||
color: PropTypes.string,
|
||||
onClick: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
ColorButtonComponent.defaultProps = {
|
||||
outline: false
|
||||
};
|
||||
|
||||
export default ColorButtonComponent;
|
||||
|
|
|
@ -31,6 +31,7 @@ const StrokeColorIndicatorComponent = props => (
|
|||
>
|
||||
<Label text={props.intl.formatMessage(messages.stroke)}>
|
||||
<ColorButton
|
||||
outline
|
||||
color={props.strokeColor}
|
||||
onClick={props.onOpenStrokeColor}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue