Hugging Face's logo

Spaces:
jasvir-singh1021
/
Image_Editor
Running

App Files Community
Image_Editor
File size: 3,135 Bytes 
b456468
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
/* ICON BUTTON */
.tie-icon-add-button
    &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active,
    &.icon-heart .{prefix}-button[data-icontype="icon-heart"] svg > use.active,
    &.icon-location .{prefix}-button[data-icontype="icon-location"] svg > use.active,
    &.icon-polygon .{prefix}-button[data-icontype="icon-polygon"] svg > use.active,
    &.icon-star .{prefix}-button[data-icontype="icon-star"] svg > use.active,
    &.icon-star-2 .{prefix}-button[data-icontype="icon-star-2"] svg > use.active,
    &.icon-arrow-3 .{prefix}-button[data-icontype="icon-arrow-3"] svg > use.active,
    &.icon-arrow-2 .{prefix}-button[data-icontype="icon-arrow-2"] svg > use.active,
    &.icon-arrow .{prefix}-button[data-icontype="icon-arrow"] svg > use.active,
    &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active
        display: block;

/* DRAW BUTTON */
.tie-draw-line-select-button
  &.line .{prefix}-button.line svg > use.normal,
  &.free .{prefix}-button.free svg > use.normal
    display: none;

  &.line .{prefix}-button.line svg > use.active,
  &.free .{prefix}-button.free svg > use.active
    display: block;

/* FLIP BUTTON */
.tie-flip-button
  &.resetFlip .{prefix}-button.resetFlip,
  &.flipX .{prefix}-button.flipX,
  &.flipY .{prefix}-button.flipY
    svg > use.normal
        display: none;
    svg > use.active
        display: block;

/*  MASK BUTTON */
.tie-mask-apply.apply.active .{prefix}-button.apply
    label
        color: #fff;
    svg > use.active
        display: block;

/* CROP BUTTON */
.tie-crop-button,
.tie-crop-preset-button
    .{prefix}-button.apply
        margin-right: 24px;
    .{prefix}-button.preset.active svg > use.active
        display: block;
    .{prefix}-button.apply.active svg > use.active
        display: block;

/* RESIZE BUTTON */
.tie-resize-button,
.tie-resize-preset-button
    .{prefix}-button.apply
        margin-right: 24px;
    .{prefix}-button.preset.active svg > use.active
        display: block;
    .{prefix}-button.apply.active svg > use.active
        display: block;


/* SHAPE BUTTON */
.tie-shape-button
  &.rect .{prefix}-button.rect,
  &.circle .{prefix}-button.circle,
  &.triangle .{prefix}-button.triangle
    svg > use.normal
        display: none;
    svg > use.active
        display: block;

/* TEXT BUTTON */
.tie-text-effect-button
    .{prefix}-button.active svg > use.active
        display: block;
.tie-text-align-button
    &.tie-text-align-left .{prefix}-button.left svg > use.active,
    &.tie-text-align-center .{prefix}-button.center svg > use.active,
    &.tie-text-align-right .{prefix}-button.right svg > use.active
        display: block;
.tie-mask-image-file,
.tie-icon-image-file
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid green;
    cursor: inherit;
    left: 0;
    top: 0;


/* FLIP BUTTON */
.tie-zoom-button
    &.resetFlip .{prefix}-button.resetFlip,
    &.flipX .{prefix}-button.flipX,
    &.flipY .{prefix}-button.flipY
        svg > use.normal
            display: none;
        svg > use.active
            display: block;