style.js
6.17 KB
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
export default ({
subMenuLabelActive,
subMenuLabelNormal,
subMenuRangeTitle,
submenuPartitionVertical,
submenuPartitionHorizontal,
submenuCheckbox,
submenuRangePointer,
submenuRangeValue,
submenuColorpickerTitle,
submenuColorpickerButton,
submenuRangeBar,
submenuRangeSubbar,
submenuDisabledRangePointer,
submenuDisabledRangeBar,
submenuDisabledRangeSubbar,
submenuIconSize,
menuIconSize,
biSize,
menuIconStyle,
submenuIconStyle,
}) => `
.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label,
.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] label,
.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] label,
.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] label,
.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] label,
.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] label,
.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] label,
.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] label,
.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] label,
.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label,
.tie-draw-line-select-button.line .tui-image-editor-button.line label,
.tie-draw-line-select-button.free .tui-image-editor-button.free label,
.tie-flip-button.flipX .tui-image-editor-button.flipX label,
.tie-flip-button.flipY .tui-image-editor-button.flipY label,
.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label,
.tie-crop-button .tui-image-editor-button.apply.active label,
.tie-crop-preset-button .tui-image-editor-button.preset.active label,
.tie-shape-button.rect .tui-image-editor-button.rect label,
.tie-shape-button.circle .tui-image-editor-button.circle label,
.tie-shape-button.triangle .tui-image-editor-button.triangle label,
.tie-text-effect-button .tui-image-editor-button.active label,
.tie-text-align-button.left .tui-image-editor-button.left label,
.tie-text-align-button.center .tui-image-editor-button.center label,
.tie-text-align-button.right .tui-image-editor-button.right label,
.tie-mask-apply.apply.active .tui-image-editor-button.apply label,
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,
.tui-image-editor-container .tui-image-editor-checkbox label > span {
${subMenuLabelActive}
}
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,
.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label,
.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label > span {
${subMenuLabelNormal}
}
.tui-image-editor-container .tui-image-editor-range-wrap label > span {
${subMenuRangeTitle}
}
.tui-image-editor-container .tui-image-editor-partition > div {
${submenuPartitionVertical}
}
.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,
.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {
${submenuPartitionHorizontal}
}
.tui-image-editor-container .tui-image-editor-checkbox label > span:before {
${submenuCheckbox}
}
.tui-image-editor-container .tui-image-editor-checkbox label > input:checked + span:before {
border: 0;
}
.tui-image-editor-container .tui-image-editor-virtual-range-pointer {
${submenuRangePointer}
}
.tui-image-editor-container .tui-image-editor-virtual-range-bar {
${submenuRangeBar}
}
.tui-image-editor-container .tui-image-editor-virtual-range-subbar {
${submenuRangeSubbar}
}
.tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-pointer {
${submenuDisabledRangePointer}
}
.tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-subbar {
${submenuDisabledRangeSubbar}
}
.tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-bar {
${submenuDisabledRangeBar}
}
.tui-image-editor-container .tui-image-editor-range-value {
${submenuRangeValue}
}
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label {
${submenuColorpickerTitle}
}
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value {
${submenuColorpickerButton}
}
.tui-image-editor-container .svg_ic-menu {
${menuIconSize}
}
.tui-image-editor-container .svg_ic-submenu {
${submenuIconSize}
}
.tui-image-editor-container .tui-image-editor-controls-logo > img,
.tui-image-editor-container .tui-image-editor-header-logo > img {
${biSize}
}
.tui-image-editor-menu use.normal.use-default {
fill-rule: evenodd;
fill: ${menuIconStyle.normal.color};
stroke: ${menuIconStyle.normal.color};
}
.tui-image-editor-menu use.active.use-default {
fill-rule: evenodd;
fill: ${menuIconStyle.active.color};
stroke: ${menuIconStyle.active.color};
}
.tui-image-editor-menu use.hover.use-default {
fill-rule: evenodd;
fill: ${menuIconStyle.hover.color};
stroke: ${menuIconStyle.hover.color};
}
.tui-image-editor-menu use.disabled.use-default {
fill-rule: evenodd;
fill: ${menuIconStyle.disabled.color};
stroke: ${menuIconStyle.disabled.color};
}
.tui-image-editor-submenu use.normal.use-default {
fill-rule: evenodd;
fill: ${submenuIconStyle.normal.color};
stroke: ${submenuIconStyle.normal.color};
}
.tui-image-editor-submenu use.active.use-default {
fill-rule: evenodd;
fill: ${submenuIconStyle.active.color};
stroke: ${submenuIconStyle.active.color};
}
`;