Skip to content

Commit dbd41b8

Browse files
jorgedacaljorgedacal
authored
Add colorize variables
1 parent 010e918 commit dbd41b8

File tree

3 files changed

+52
-13
lines changed

3 files changed

+52
-13
lines changed

‎README.md

+38-4
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,32 @@ When you choose a file from the file input, it will trigger `fileChangeEvent`.
7070
That event is then passed to the image cropper through `imageChangedEvent` which will load the image into the cropper.
7171
Everytime you release the mouse, the `imageCropped` event will be triggered with the cropped image as a Base64 string in its payload.
7272

73+
#### Example of customize colors
74+
Add class to the image-cropper in your HTML:
75+
``` html
76+
<image-cropper class="cropper-custom-colors"
77+
...
78+
></image-cropper>
79+
```
80+
Add the variables that you need to your scss:
81+
``` scss
82+
.cropper-custom-colors {
83+
--cropper-overlay-color: blueviolet;
84+
--cropper-outline-color: rgba(255, 192, 203, 0.514);
85+
--cropper-color: white;
86+
--cropper-border: 1px dashed yellow;
87+
--cropper-border-color-hf: deeppink;
88+
--cropper-border-width-hf: 3px;
89+
--cropper-square: green;
90+
--cropper-square-border: 1px solid red;
91+
--cropper-square-hf: green;
92+
--cropper-square-border-hf: 1px solid red;
93+
}
94+
```
95+
![cropper-custom-colors-example](customize-colors.png)
96+
97+
*Review the variables described in API > CSS Variables section.
98+
7399
## Alternatives
74100

75101
### If you find ngx-image-cropper doesn't cover your needs we recommend taking a look at Pintura
@@ -121,10 +147,18 @@ All inputs are optional. Either the `imageChangedEvent`, `imageBase64` or `image
121147
| `options` | Partial<CropperOptions> | undefined | Provide more options at once instead of using the individual inputs. The options passed using this input will be applied as a patch. If you pass `{canvasRotation: 3}` and then `{}`, this will not reset the `canvasRotation`. To reset it, you should pass `{canvasRotation: 0}`. |
122148

123149
### CSS Variables
124-
| Name | Type | Default | Description |
125-
|----------------------------|-----------|-----------------------|-------------------------------------------------|
126-
| `--cropper-outline-color` | string | rgba(255,255,255,0.3) | The background color you see around the cropper |
127-
| `--cropper-overlay-color` | string | rgba(255,255,255) | The background color you see around the image |
150+
| Name | Type | Default | Description |
151+
|------------------------------|-----------|------------------------------------|----------------------------------------------------------------------|
152+
| `--cropper-outline-color` | string | rgba(255,255,255,0.3) | The background color you see around the cropper |
153+
| `--cropper-overlay-color` | string | rgba(255,255,255) | The background color you see around the image |
154+
| `--cropper-color` | string | #53535C | The color you see in the cropping selection |
155+
| `--cropper-border` | string | 1px solid rgba(255, 255, 255, 0.5) | The border you see in the cropping selection |
156+
| `--cropper-border-color-hf` | string | dodgerblue | The color when hover or focus the cropping selection |
157+
| `--cropper-border-width-hf` | string | 2px | The size of border when hover or focus the cropping selection |
158+
| `--cropper-square` | string | #53535C | The color of the squares to resize cropping selection |
159+
| `--cropper-square-border` | string | 1px solid rgba(255, 255, 255, 0.5) | The border of the squares to resize cropping selection |
160+
| `--cropper-square-hf` | string | #53535C | The color of the squares when hover or focus the cropping selection |
161+
| `--cropper-square-border-hf` | string | 1px solid rgba(255, 255, 255, 0.5) | The border of the squares when hover or focus the cropping selection |
128162

129163
### Outputs
130164
| Name | Type | Description |

‎customize-colors.png

464 KB
Loading

‎projects/ngx-image-cropper/src/lib/component/image-cropper.component.scss

+14-9
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
.ngx-ic-cropper {
4242
position: absolute;
4343
display: flex;
44-
color: #53535C;
44+
color: var(--cropper-color, #53535C);
4545
background: transparent;
4646
outline: rgba(255, 255, 255, 0.3) solid 100vw;
4747
outline: var(--cropper-outline-color, rgba(255, 255, 255, 0.3)) solid 100vw;
@@ -69,13 +69,20 @@
6969
.ngx-ic-move {
7070
width: 100%;
7171
cursor: move;
72-
border: var(--cropper-move-border, 1px solid rgba(255, 255, 255, 0.5));
72+
border: var(--cropper-border, 1px solid rgba(255, 255, 255, 0.5));
7373
}
7474

75-
&:focus {
75+
&:focus,&:hover {
7676
.ngx-ic-move {
77-
border-color: dodgerblue;
78-
border-width: 2px;
77+
border-color: var(--cropper-border-color-hf, dodgerblue);
78+
border-width: var(--cropper-border-width-hf, 2px);
79+
}
80+
81+
.ngx-ic-resize {
82+
.ngx-ic-square {
83+
background: var(--cropper-square-hf, #53535C);
84+
border: var(--cropper-square-border-hf, 1px solid rgba(255, 255, 255, 0.5));
85+
}
7986
}
8087
}
8188

@@ -89,10 +96,10 @@
8996

9097
.ngx-ic-square {
9198
display: inline-block;
92-
background: #53535C;
99+
background: var(--cropper-square, #53535C);
93100
width: 6px;
94101
height: 6px;
95-
border: 1px solid rgba(255, 255, 255, 0.5);
102+
border: var(--cropper-square-border, 1px solid rgba(255, 255, 255, 0.5));
96103
box-sizing: content-box;
97104
}
98105

@@ -188,11 +195,9 @@
188195

189196
&:after {
190197
border-radius: 100%;
191-
box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.3);
192198
box-shadow: 0 0 0 100vw (var(--cropper-outline-color, rgba(255, 255, 255, 0.3)));
193199

194200
@media (orientation: portrait) {
195-
box-shadow: 0 0 0 100vh rgba(255, 255, 255, 0.3);
196201
box-shadow: 0 0 0 100vh (var(--cropper-outline-color, rgba(255, 255, 255, 0.3)));
197202
}
198203
}

0 commit comments

Comments
 (0)