diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js index 7bc825767ba7d..904bfb13ceaa0 100644 --- a/packages/components/src/focal-point-picker/index.js +++ b/packages/components/src/focal-point-picker/index.js @@ -154,7 +154,6 @@ export class FocalPointPicker extends Component { const { instanceId, url, value, label, help, className } = this.props; const { bounds, isDragging, percentages } = this.state; const pickerDimensions = this.pickerDimensions(); - const containerStyle = { backgroundImage: `url(${ url })` }; const iconCoordinates = { left: ( value.x * ( pickerDimensions.width - ( bounds.left * 2 ) ) ) + bounds.left, top: ( value.y * ( pickerDimensions.height - ( bounds.top * 2 ) ) ) + bounds.top, @@ -172,7 +171,6 @@ export class FocalPointPicker extends Component {
this.setState( { isDragging: true } ) } onDragStart={ () => this.setState( { isDragging: true } ) } onMouseUp={ () => this.setState( { isDragging: false } ) } diff --git a/packages/components/src/focal-point-picker/style.scss b/packages/components/src/focal-point-picker/style.scss index 4c9abe009d9b7..732dc70a99961 100644 --- a/packages/components/src/focal-point-picker/style.scss +++ b/packages/components/src/focal-point-picker/style.scss @@ -1,22 +1,21 @@ $focalPointPickerSVG: "data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' stroke='%23000' strokeWidth='2' fill='none' fillRule='evenodd'%3E%3Cellipse fill='%23fff' cx='11' cy='11.129' rx='9.533' ry='9.645' /%3E%3Cpath d='M0 11.13h22M10.945 22.347V.09' strokeLinecap='square' /%3E%3C/g%3E%3C/svg%3E"; .component-focal-point-picker { + align-items: center; background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: contain; border: 1px solid $light-gray-500; cursor: pointer; - display: block; + display: flex; height: 200px; + justify-content: center; position: relative; width: 100%; img { height: auto; max-height: 100%; max-width: 100%; - opacity: 0.1; width: auto; + user-select: none; } }