Skip to content

Commit e4abdee

Browse files
Mawi137Mawi137
committed
Update css variables
1 parent e075aea commit e4abdee

File tree

4 files changed

+64
-36
lines changed

4 files changed

+64
-36
lines changed

‎README.md

+14-14
Original file line numberDiff line numberDiff line change
@@ -133,20 +133,20 @@ All inputs are optional. Either the `imageChangedEvent`, `imageBase64` or `image
133133
| `cropperChange` | CropperPosition | Emits when the cropper position changed. It can be used for 2-way data-binding because this object can be changed from outside as well as inside the component. |
134134

135135
### CSS Variables
136-
| Name | Type | Default | Description |
137-
|------------------------------|-----------|------------------------------------|----------------------------------------------------------------------|
138-
| `--cropper-outline-color` | string | rgba(255,255,255,0.3) | The background color you see around the cropper |
139-
| `--cropper-overlay-color` | string | rgba(255,255,255) | The background color you see around the image |
140-
| `--cropper-color` | string | #53535C | The color you see in the cropping selection |
141-
| `--cropper-border` | string | 1px solid rgba(255, 255, 255, 0.5) | The border you see in the cropping selection |
142-
| `--cropper-border-color-hf` | string | dodgerblue | The color when hover or focus the cropping selection |
143-
| `--cropper-border-width-hf` | string | 2px | The size of border when hover or focus the cropping selection |
144-
| `--cropper-square` | string | #53535C | The color of the squares to resize cropping selection |
145-
| `--cropper-square-border` | string | 1px solid rgba(255, 255, 255, 0.5) | The border of the squares to resize cropping selection |
146-
| `--cropper-square-hf` | string | #53535C | The color of the squares when hover or focus the cropping selection |
147-
| `--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 |
148-
149-
![cropper-custom-colors-example](customize-colors.png)
136+
| Name | Type | Default | Description |
137+
|----------------------------------------|-----------|------------------------------------|-------------------------------------------------------------------------|
138+
| `--cropper-outline-color` | string | rgba(255,255,255,0.3) | The background color you see around the cropper |
139+
| `--cropper-overlay-color` | string | rgba(255,255,255) | The background color you see around the image |
140+
| `--cropper-color` | string | #53535C | The color you see in the cropping selection |
141+
| `--cropper-border` | string | 1px solid rgba(255, 255, 255, 0.5) | The border you see around the cropper |
142+
| `--cropper-hover-border` | string | `--cropper-border` | The border you see around the cropper when it's hovered |
143+
| `--cropper-focus-border` | string | 2px solid dodgerblue | The border you see around the cropper when it's focused |
144+
| `--cropper-resize-square-bg` | string | #53535C | The background color of the resize squares |
145+
| `--cropper-resize-square-border` | string | 1px solid rgba(255, 255, 255, 0.5) | The border of the resize squares |
146+
| `--cropper-resize-square-hover-bg` | string | `--cropper-resize-square-bg` | The background color of the resize squares when they are hovered |
147+
| `--cropper-resize-square-hover-border` | string | `--cropper-resize-square-border` | The border of the resize squares when they are hovered |
148+
| `--cropper-resize-square-focus-bg` | string | `--cropper-resize-square-bg` | The background color of the resize squares when the cropper is focussed |
149+
| `--cropper-resize-square-focus-border` | string | `--cropper-resize-square-border` | The border of the resize squares when the cropper is focussed |
150150

151151
### Methods
152152
To gain access to the image cropper's methods use `@ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;`

‎customize-colors.png

-464 KB
Binary file not shown.

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

+29-12
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,6 @@
5353
>
5454
<span class="ngx-ic-square"></span>
5555
</span>
56-
<span class="ngx-ic-resize ngx-ic-top">
57-
<span class="ngx-ic-square"></span>
58-
</span>
5956
<span
6057
class="ngx-ic-resize ngx-ic-topright"
6158
role="presentation"
@@ -64,9 +61,6 @@
6461
>
6562
<span class="ngx-ic-square"></span>
6663
</span>
67-
<span class="ngx-ic-resize ngx-ic-right">
68-
<span class="ngx-ic-square"></span>
69-
</span>
7064
<span
7165
class="ngx-ic-resize ngx-ic-bottomright"
7266
role="presentation"
@@ -75,9 +69,6 @@
7569
>
7670
<span class="ngx-ic-square"></span>
7771
</span>
78-
<span class="ngx-ic-resize ngx-ic-bottom">
79-
<span class="ngx-ic-square"></span>
80-
</span>
8172
<span
8273
class="ngx-ic-resize ngx-ic-bottomleft"
8374
role="presentation"
@@ -86,33 +77,59 @@
8677
>
8778
<span class="ngx-ic-square"></span>
8879
</span>
89-
<span class="ngx-ic-resize ngx-ic-left">
90-
<span class="ngx-ic-square"></span>
91-
</span>
9280
<span
9381
class="ngx-ic-resize-bar ngx-ic-top"
9482
role="presentation"
9583
(mousedown)="startMove($event, moveTypes.Resize, 'top')"
9684
(touchstart)="startMove($event, moveTypes.Resize, 'top')"
9785
></span>
86+
87+
<span
88+
class="ngx-ic-resize ngx-ic-top"
89+
(mousedown)="startMove($event, moveTypes.Resize, 'top')"
90+
(touchstart)="startMove($event, moveTypes.Resize, 'top')"
91+
>
92+
<span class="ngx-ic-square"></span>
93+
</span>
9894
<span
9995
class="ngx-ic-resize-bar ngx-ic-right"
10096
role="presentation"
10197
(mousedown)="startMove($event, moveTypes.Resize, 'right')"
10298
(touchstart)="startMove($event, moveTypes.Resize, 'right')"
10399
></span>
100+
<span
101+
class="ngx-ic-resize ngx-ic-right"
102+
(mousedown)="startMove($event, moveTypes.Resize, 'right')"
103+
(touchstart)="startMove($event, moveTypes.Resize, 'right')"
104+
>
105+
<span class="ngx-ic-square"></span>
106+
</span>
104107
<span
105108
class="ngx-ic-resize-bar ngx-ic-bottom"
106109
role="presentation"
107110
(mousedown)="startMove($event, moveTypes.Resize, 'bottom')"
108111
(touchstart)="startMove($event, moveTypes.Resize, 'bottom')"
109112
></span>
113+
<span
114+
class="ngx-ic-resize ngx-ic-bottom"
115+
(mousedown)="startMove($event, moveTypes.Resize, 'bottom')"
116+
(touchstart)="startMove($event, moveTypes.Resize, 'bottom')"
117+
>
118+
<span class="ngx-ic-square"></span>
119+
</span>
110120
<span
111121
class="ngx-ic-resize-bar ngx-ic-left"
112122
role="presentation"
113123
(mousedown)="startMove($event, moveTypes.Resize, 'left')"
114124
(touchstart)="startMove($event, moveTypes.Resize, 'left')"
115125
></span>
126+
<span
127+
class="ngx-ic-resize ngx-ic-left"
128+
(mousedown)="startMove($event, moveTypes.Resize, 'left')"
129+
(touchstart)="startMove($event, moveTypes.Resize, 'left')"
130+
>
131+
<span class="ngx-ic-square"></span>
132+
</span>
116133
</ng-container>
117134
</div>
118135
</div>

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

+21-10
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
display: flex;
4444
color: var(--cropper-color, #53535C);
4545
background: transparent;
46-
outline: rgba(255, 255, 255, 0.3) solid 100vw;
4746
outline: var(--cropper-outline-color, rgba(255, 255, 255, 0.3)) solid 100vw;
4847
touch-action: none;
4948

@@ -72,16 +71,21 @@
7271
border: var(--cropper-border, 1px solid rgba(255, 255, 255, 0.5));
7372
}
7473

75-
&:focus,&:hover {
74+
&:hover {
7675
.ngx-ic-move {
77-
border-color: var(--cropper-border-color-hf, dodgerblue);
78-
border-width: var(--cropper-border-width-hf, 2px);
76+
border: var(--cropper-hover-border, var(--cropper-border, 1px solid rgba(255, 255, 255, 0.5)));
77+
}
78+
}
79+
80+
&:focus {
81+
.ngx-ic-move {
82+
border: var(--cropper-focus-border, 2px solid dodgerblue);
7983
}
8084

8185
.ngx-ic-resize {
8286
.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));
87+
background: var(--cropper-resize-square-focus-bg, var(--cropper-resize-square-bg, #53535C));
88+
border: var(--cropper-resize-square-focus-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, 0.5)));
8589
}
8690
}
8791
}
@@ -96,11 +100,18 @@
96100

97101
.ngx-ic-square {
98102
display: inline-block;
99-
background: var(--cropper-square, #53535C);
100103
width: 6px;
101104
height: 6px;
102-
border: var(--cropper-square-border, 1px solid rgba(255, 255, 255, 0.5));
103105
box-sizing: content-box;
106+
background: var(--cropper-resize-square-bg, #53535C);
107+
border: var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, 0.5));
108+
}
109+
110+
&:hover {
111+
.ngx-ic-square {
112+
background: var(--cropper-resize-square-hover-bg, var(--cropper-resize-square-bg, #53535C));
113+
border: var(--cropper-resize-square-hover-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, 0.5)));
114+
}
104115
}
105116

106117
&.ngx-ic-topleft {
@@ -195,10 +206,10 @@
195206

196207
&:after {
197208
border-radius: 100%;
198-
box-shadow: 0 0 0 100vw (var(--cropper-outline-color, rgba(255, 255, 255, 0.3)));
209+
box-shadow: 0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
199210

200211
@media (orientation: portrait) {
201-
box-shadow: 0 0 0 100vh (var(--cropper-outline-color, rgba(255, 255, 255, 0.3)));
212+
box-shadow: 0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, 0.3));
202213
}
203214
}
204215

0 commit comments

Comments
 (0)