mirror of https://github.com/sgoudham/carbon.git
Background image settings (#169)
* Implement drag-n-drop image for backgrounds - Closes #122 * In progress * Add background-size, background-position settings * Add ReactCrop * Remove old bg sizing sliders * Add resize observer * Fix typo * Disable select on sliders * onAspectRatioChange hook * Rename to backgroundColor * Fix state issues * Add backgroundMode toggle * Rename ColorPicker * Add upload-image margin * Minor font-size change * Fix buildmain
Jake Dexheimer
7 years ago
committed by
Michael Fix
parent
77af47b59e
commit
cbc6824b83
@ -0,0 +1,208 @@
|
||||
import React from 'react'
|
||||
import enhanceWithClickOutside from 'react-click-outside'
|
||||
import { SketchPicker } from 'react-color'
|
||||
import WindowPointer from './WindowPointer'
|
||||
import ImagePicker from './ImagePicker'
|
||||
import { COLORS } from '../lib/constants'
|
||||
import { parseRGBA, capitalizeFirstLetter } from '../lib/util'
|
||||
|
||||
class BackgroundSelect extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = { isVisible: false, selectedTab: 'color' }
|
||||
this.toggle = this.toggle.bind(this)
|
||||
this.selectTab = this.selectTab.bind(this)
|
||||
this.handlePickColor = this.handlePickColor.bind(this)
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({ isVisible: !this.state.isVisible })
|
||||
}
|
||||
|
||||
selectTab(name) {
|
||||
if (this.props.config.backgroundMode !== name) {
|
||||
this.props.onChange({ backgroundMode: name })
|
||||
}
|
||||
}
|
||||
|
||||
handleClickOutside() {
|
||||
this.setState({ isVisible: false })
|
||||
}
|
||||
|
||||
handlePickColor(color) {
|
||||
this.props.onChange({ backgroundColor: parseRGBA(color.rgb) })
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="bg-select-container">
|
||||
<div className="bg-select-display">
|
||||
<div className="bg-select-label">
|
||||
<span>BG</span>
|
||||
</div>
|
||||
<div className="bg-color-container" onClick={this.toggle}>
|
||||
<div className="bg-color-alpha" />
|
||||
<div className="bg-color" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-select-pickers" hidden={!this.state.isVisible}>
|
||||
<WindowPointer fromLeft="15px" />
|
||||
<div className="picker-tabs">
|
||||
{['color', 'image'].map((tab, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`picker-tab ${this.props.config.backgroundMode === tab ? 'active' : ''}`}
|
||||
onClick={this.selectTab.bind(null, tab)}
|
||||
>
|
||||
{capitalizeFirstLetter(tab)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="picker-tabs-contents">
|
||||
<div style={this.props.config.backgroundMode === 'color' ? {} : { display: 'none' }}>
|
||||
<SketchPicker
|
||||
color={this.props.config.backgroundColor}
|
||||
onChangeComplete={this.handlePickColor}
|
||||
/>
|
||||
</div>
|
||||
<div style={this.props.config.backgroundMode === 'image' ? {} : { display: 'none' }}>
|
||||
<ImagePicker
|
||||
onChange={this.props.onChange}
|
||||
imageDataURL={this.props.config.backgroundImage}
|
||||
aspectRatio={this.props.config.aspectRatio}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.bg-select-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bg-select-display {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 72px;
|
||||
border: 0.5px solid ${COLORS.SECONDARY};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bg-select-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
border-right: 0.5px solid ${COLORS.SECONDARY};
|
||||
}
|
||||
|
||||
.bg-color-container {
|
||||
position: relative;
|
||||
width: 34px;
|
||||
margin-bottom: 1px;
|
||||
background: #fff;
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
${this.props.config.backgroundMode === 'image'
|
||||
? `background: url(${this.props.config.backgroundImage});
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;`
|
||||
: `background: ${this.props.config.backgroundColor || config.backgroundColor};
|
||||
background-size: auto;
|
||||
background-repeat: repeat;`};
|
||||
}
|
||||
|
||||
.bg-color-alpha {
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
|
||||
left center;
|
||||
}
|
||||
|
||||
.picker-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid ${COLORS.SECONDARY};
|
||||
}
|
||||
|
||||
.picker-tab {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.165);
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
border-right: 1px solid ${COLORS.SECONDARY};
|
||||
}
|
||||
|
||||
.picker-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.picker-tab.active {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.bg-select-pickers {
|
||||
position: absolute;
|
||||
width: 222px;
|
||||
margin-left: 36px;
|
||||
margin-top: 4px;
|
||||
border: 0.5px solid ${COLORS.SECONDARY};
|
||||
border-radius: 3px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
/* react-color overrides */
|
||||
.bg-select-pickers :global(.sketch-picker) {
|
||||
background: #1a1a1a !important;
|
||||
padding: 8px 8px 0 !important;
|
||||
margin: 0 auto 1px !important;
|
||||
}
|
||||
|
||||
.bg-select-pickers :global(.sketch-picker > div:nth-child(3) > div > div > span) {
|
||||
color: ${COLORS.SECONDARY} !important;
|
||||
}
|
||||
|
||||
/* TODO remove once base64 url issue fixed in react-color */
|
||||
/* prettier-ignore */
|
||||
.bg-select-pickers :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(1) > div),
|
||||
.bg-select-pickers :global(.sketch-picker > div:nth-child(2) > div:nth-child(2) > div:nth-child(1)) {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
|
||||
left center !important;
|
||||
}
|
||||
|
||||
.bg-select-pickers :global(.sketch-picker > div:nth-child(3) > div > div > input) {
|
||||
width: 100% !important;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.165);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* prettier-ignore */
|
||||
.bg-select-pickers :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
|
||||
background: #fff;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default enhanceWithClickOutside(BackgroundSelect)
|
||||
@ -1,141 +0,0 @@
|
||||
import React from 'react'
|
||||
import enhanceWithClickOutside from 'react-click-outside'
|
||||
import { SketchPicker } from 'react-color'
|
||||
import WindowPointer from './WindowPointer'
|
||||
import { COLORS } from '../lib/constants'
|
||||
import { parseRGBA } from '../lib/util'
|
||||
|
||||
class ColorPicker extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = { isVisible: false }
|
||||
this.toggle = this.toggle.bind(this)
|
||||
this.handlePickColor = this.handlePickColor.bind(this)
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({ isVisible: !this.state.isVisible })
|
||||
}
|
||||
|
||||
handleClickOutside() {
|
||||
this.setState({ isVisible: false })
|
||||
}
|
||||
|
||||
handlePickColor(color) {
|
||||
this.props.onChange(parseRGBA(color.rgb))
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="colorpicker-container">
|
||||
<div className="colorpicker-display">
|
||||
<div className="colorpicker-label">
|
||||
<span>BG</span>
|
||||
</div>
|
||||
<div className="bg-color-container" onClick={this.toggle}>
|
||||
<div className="bg-color-alpha" />
|
||||
<div className="bg-color" style={{ background: this.props.bg }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="colorpicker-picker" hidden={!this.state.isVisible}>
|
||||
<WindowPointer fromLeft="15px" />
|
||||
<SketchPicker color={this.props.bg} onChangeComplete={this.handlePickColor} />
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.colorpicker-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.colorpicker-display {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 72px;
|
||||
border: 0.5px solid ${COLORS.SECONDARY};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.colorpicker-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
border-right: 0.5px solid ${COLORS.SECONDARY};
|
||||
}
|
||||
|
||||
.bg-color-container {
|
||||
position: relative;
|
||||
width: 34px;
|
||||
margin-bottom: 1px;
|
||||
background: #fff;
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.bg-color-alpha {
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
|
||||
left center;
|
||||
}
|
||||
|
||||
.colorpicker-picker {
|
||||
position: absolute;
|
||||
margin-left: 36px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* react-color overrides */
|
||||
.colorpicker-picker :global(.sketch-picker) {
|
||||
border: 0.5px solid ${COLORS.SECONDARY} !important;
|
||||
border-radius: 3px !important;
|
||||
background: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.colorpicker-picker > :global(.sketch-picker > div:nth-child(3) > div > div > span) {
|
||||
color: ${COLORS.SECONDARY} !important;
|
||||
}
|
||||
|
||||
/* TODO remove once base64 url issue fixed in react-color */
|
||||
/* prettier-ignore */
|
||||
.colorpicker-picker > :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(1) > div),
|
||||
.colorpicker-picker > :global(.sketch-picker > div:nth-child(2) > div:nth-child(2) > div:nth-child(1)) {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
|
||||
left center !important;
|
||||
}
|
||||
|
||||
.colorpicker-picker > :global(.sketch-picker > div:nth-child(3) > div > div > input) {
|
||||
width: 100% !important;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.165);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* prettier-ignore */
|
||||
.colorpicker-picker :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
|
||||
background: #fff;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default enhanceWithClickOutside(ColorPicker)
|
||||
@ -0,0 +1,188 @@
|
||||
import React from 'react'
|
||||
import ReactCrop, { makeAspectCrop } from 'react-image-crop'
|
||||
import Slider from './Slider'
|
||||
import { COLORS } from '../lib/constants'
|
||||
|
||||
const getCroppedImg = (imageDataURL, pixelCrop) => {
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = pixelCrop.width
|
||||
canvas.height = pixelCrop.height
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image()
|
||||
image.src = imageDataURL
|
||||
image.onload = () => {
|
||||
ctx.drawImage(
|
||||
image,
|
||||
pixelCrop.x,
|
||||
pixelCrop.y,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height,
|
||||
0,
|
||||
0,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height
|
||||
)
|
||||
|
||||
resolve(canvas.toDataURL('image/jpeg'))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const INITIAL_STATE = { crop: null, imageAspectRatio: null, pixelCrop: null }
|
||||
|
||||
export default class extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = INITIAL_STATE
|
||||
this.selectImage = this.selectImage.bind(this)
|
||||
this.removeImage = this.removeImage.bind(this)
|
||||
this.onImageLoaded = this.onImageLoaded.bind(this)
|
||||
this.onCropChange = this.onCropChange.bind(this)
|
||||
this.onDragEnd = this.onDragEnd.bind(this)
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.state.crop && this.props.aspectRatio != nextProps.aspectRatio) {
|
||||
// update crop for editor container aspect-ratio change
|
||||
this.setState({
|
||||
crop: makeAspectCrop(
|
||||
{
|
||||
...this.state.crop,
|
||||
aspect: nextProps.aspectRatio
|
||||
},
|
||||
this.state.imageAspectRatio
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
selectImage(e) {
|
||||
const file = e.target.files[0]
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = e =>
|
||||
this.props.onChange({ backgroundImage: e.target.result, backgroundImageSelection: null })
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
|
||||
removeImage() {
|
||||
this.setState(INITIAL_STATE, () => {
|
||||
this.props.onChange({
|
||||
backgroundMode: 'color',
|
||||
backgroundImage: null,
|
||||
backgroundImageSelection: null
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onImageLoaded(image) {
|
||||
const imageAspectRatio = image.width / image.height
|
||||
const initialCrop = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
aspect: this.props.aspectRatio
|
||||
}
|
||||
|
||||
this.setState({
|
||||
imageAspectRatio,
|
||||
crop: makeAspectCrop(initialCrop, imageAspectRatio)
|
||||
})
|
||||
}
|
||||
|
||||
onCropChange(crop, pixelCrop) {
|
||||
this.setState({
|
||||
crop: { ...crop, aspect: this.props.aspectRatio },
|
||||
pixelCrop
|
||||
})
|
||||
}
|
||||
|
||||
async onDragEnd() {
|
||||
if (this.state.pixelCrop) {
|
||||
const croppedImg = await getCroppedImg(this.props.imageDataURL, this.state.pixelCrop)
|
||||
this.props.onChange({ backgroundImageSelection: croppedImg })
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let content = (
|
||||
<div className="upload-image">
|
||||
<span>Click the button below to upload a background image</span>
|
||||
<input type="file" accept="image/x-png,image/jpeg,image/jpg" onChange={this.selectImage} />
|
||||
<style jsx>{`
|
||||
.upload-image {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (this.props.imageDataURL) {
|
||||
content = (
|
||||
<div className="settings-container">
|
||||
<div className="image-container">
|
||||
<div className="label">
|
||||
<span>Background image</span>
|
||||
<a href="#" onClick={this.removeImage}>
|
||||
×
|
||||
</a>
|
||||
</div>
|
||||
<ReactCrop
|
||||
src={this.props.imageDataURL}
|
||||
onImageLoaded={this.onImageLoaded}
|
||||
crop={this.state.crop}
|
||||
onChange={this.onCropChange}
|
||||
onDragEnd={this.onDragEnd}
|
||||
minHeight={10}
|
||||
minWidth={10}
|
||||
keepSelection
|
||||
/>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.settings-container img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label {
|
||||
user-select: none;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
:global(.ReactCrop__image) {
|
||||
user-select: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.image-container .label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="image-picker-container">{content}</div>
|
||||
<style jsx>{`
|
||||
.image-picker-container {
|
||||
font-size: 12px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,163 @@
|
||||
.ReactCrop {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: crosshair;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
background-color: #000; }
|
||||
.ReactCrop:focus {
|
||||
outline: none; }
|
||||
.ReactCrop--disabled {
|
||||
cursor: inherit; }
|
||||
.ReactCrop__image {
|
||||
display: block;
|
||||
max-width: 100%; }
|
||||
.ReactCrop--crop-invisible .ReactCrop__image {
|
||||
opacity: 0.5; }
|
||||
.ReactCrop__crop-selection {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
box-sizing: border-box;
|
||||
cursor: move;
|
||||
box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid;
|
||||
border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
|
||||
border-image-slice: 1;
|
||||
border-image-repeat: repeat; }
|
||||
.ReactCrop--disabled .ReactCrop__crop-selection {
|
||||
cursor: inherit; }
|
||||
.ReactCrop__drag-handle {
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
box-sizing: border-box;
|
||||
outline: 1px solid transparent; }
|
||||
.ReactCrop .ord-nw {
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-top: -5px;
|
||||
margin-left: -5px;
|
||||
cursor: nw-resize; }
|
||||
.ReactCrop .ord-n {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-top: -5px;
|
||||
margin-left: -5px;
|
||||
cursor: n-resize; }
|
||||
.ReactCrop .ord-ne {
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin-top: -5px;
|
||||
margin-right: -5px;
|
||||
cursor: ne-resize; }
|
||||
.ReactCrop .ord-e {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -5px;
|
||||
margin-right: -5px;
|
||||
cursor: e-resize; }
|
||||
.ReactCrop .ord-se {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-bottom: -5px;
|
||||
margin-right: -5px;
|
||||
cursor: se-resize; }
|
||||
.ReactCrop .ord-s {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-bottom: -5px;
|
||||
margin-left: -5px;
|
||||
cursor: s-resize; }
|
||||
.ReactCrop .ord-sw {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-bottom: -5px;
|
||||
margin-left: -5px;
|
||||
cursor: sw-resize; }
|
||||
.ReactCrop .ord-w {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -5px;
|
||||
margin-left: -5px;
|
||||
cursor: w-resize; }
|
||||
.ReactCrop__disabled .ReactCrop__drag-handle {
|
||||
cursor: inherit; }
|
||||
.ReactCrop__drag-bar {
|
||||
position: absolute; }
|
||||
.ReactCrop__drag-bar.ord-n {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
margin-top: -3px; }
|
||||
.ReactCrop__drag-bar.ord-e {
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
margin-right: -3px; }
|
||||
.ReactCrop__drag-bar.ord-s {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
margin-bottom: -3px; }
|
||||
.ReactCrop__drag-bar.ord-w {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
margin-left: -3px; }
|
||||
.ReactCrop--new-crop .ReactCrop__drag-bar,
|
||||
.ReactCrop--new-crop .ReactCrop__drag-handle,
|
||||
.ReactCrop--fixed-aspect .ReactCrop__drag-bar {
|
||||
display: none; }
|
||||
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
|
||||
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
|
||||
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
|
||||
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
|
||||
display: none; }
|
||||
@media (max-width: 768px) {
|
||||
.ReactCrop__drag-handle {
|
||||
width: 17px;
|
||||
height: 17px; }
|
||||
.ReactCrop .ord-nw {
|
||||
margin-top: -9px;
|
||||
margin-left: -9px; }
|
||||
.ReactCrop .ord-n {
|
||||
margin-top: -9px;
|
||||
margin-left: -9px; }
|
||||
.ReactCrop .ord-ne {
|
||||
margin-top: -9px;
|
||||
margin-right: -9px; }
|
||||
.ReactCrop .ord-e {
|
||||
margin-top: -9px;
|
||||
margin-right: -9px; }
|
||||
.ReactCrop .ord-se {
|
||||
margin-bottom: -9px;
|
||||
margin-right: -9px; }
|
||||
.ReactCrop .ord-s {
|
||||
margin-bottom: -9px;
|
||||
margin-left: -9px; }
|
||||
.ReactCrop .ord-sw {
|
||||
margin-bottom: -9px;
|
||||
margin-left: -9px; }
|
||||
.ReactCrop .ord-w {
|
||||
margin-top: -9px;
|
||||
margin-left: -9px; }
|
||||
.ReactCrop__drag-bar.ord-n {
|
||||
height: 14px;
|
||||
margin-top: -7px; }
|
||||
.ReactCrop__drag-bar.ord-e {
|
||||
width: 14px;
|
||||
margin-right: -7px; }
|
||||
.ReactCrop__drag-bar.ord-s {
|
||||
height: 14px;
|
||||
margin-bottom: -7px; }
|
||||
.ReactCrop__drag-bar.ord-w {
|
||||
width: 14px;
|
||||
margin-left: -7px; } }
|
||||
Loading…
Reference in New Issue