@eaera-com/eaera-widgets-v2 0.1.66 → 0.1.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// ============================================================================
|
|
4
4
|
// CHECKBOX COMPONENT STYLES
|
|
5
5
|
// ============================================================================
|
|
6
|
-
// Source: Figma UI Kit Production - Checkboxes (node-id=40091:
|
|
6
|
+
// Source: Figma UI Kit Production - Checkboxes (node-id=40091:3351)
|
|
7
7
|
// Based on: EaeraCheckbox.vue component (wraps Element Plus ElCheckbox)
|
|
8
8
|
// IMPORTANT: Colors use Layer 3 tokens only
|
|
9
9
|
//
|
|
@@ -11,14 +11,27 @@
|
|
|
11
11
|
// .el-checkbox
|
|
12
12
|
// .el-checkbox__input ← State classes here (.is-checked, .is-disabled, .is-indeterminate)
|
|
13
13
|
// .el-checkbox__inner ← The checkbox box (visual)
|
|
14
|
-
// ::after ← The
|
|
15
|
-
// ::before ← The indeterminate dash (
|
|
14
|
+
// ::after ← The check icon (SVG mask, exact Figma glyph)
|
|
15
|
+
// ::before ← The indeterminate dash (SVG mask, exact Figma glyph)
|
|
16
16
|
// .el-checkbox__label ← Text label (sibling of __input)
|
|
17
|
+
//
|
|
18
|
+
// DISABLED (per Figma): opacity 0.5 is applied to the WHOLE component
|
|
19
|
+
// (box + label) — label keeps its state color. Do not restyle label colors
|
|
20
|
+
// per-disabled-state.
|
|
17
21
|
// ============================================================================
|
|
18
22
|
|
|
23
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
24
|
+
// ICONS — exact SVG glyphs exported from Figma (node 40091:3351)
|
|
25
|
+
// check: 11×8, stroke 2px, round caps
|
|
26
|
+
// minus: 10×2, stroke 2px, round caps
|
|
27
|
+
// Rendered 1:1 via mask so strokes keep the designed 2px weight.
|
|
28
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
29
|
+
$chk-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M10 1L3.8125 7L1 4.27273' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
30
|
+
$chk-minus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' fill='none'%3E%3Cpath d='M1 1H9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
31
|
+
|
|
19
32
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
20
33
|
// MIXIN — reusable checkbox visual styles
|
|
21
|
-
// Used by: .custom-checkbox
|
|
34
|
+
// Used by: .custom-checkbox, .custom-tree, tree-select, table, transfer
|
|
22
35
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
23
36
|
@mixin checkbox-styles {
|
|
24
37
|
height: unset;
|
|
@@ -38,12 +51,37 @@
|
|
|
38
51
|
border-radius: var(--er-shape-corner-50);
|
|
39
52
|
border: 1.5px solid var(--er-border-strong);
|
|
40
53
|
background-color: transparent;
|
|
54
|
+
|
|
55
|
+
// Check icon: full-size SVG mask layer, animated scale(0) → scale(1)
|
|
56
|
+
&::after {
|
|
57
|
+
inset: 0;
|
|
58
|
+
margin: auto;
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
box-sizing: border-box;
|
|
62
|
+
border: none;
|
|
63
|
+
background-color: var(--er-icon-on-action);
|
|
64
|
+
-webkit-mask: $chk-check-icon center / 11px 8px no-repeat;
|
|
65
|
+
mask: $chk-check-icon center / 11px 8px no-repeat;
|
|
66
|
+
transform: scale(0);
|
|
67
|
+
transition: transform 0.15s ease-in 50ms;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// Indeterminate dash: hidden unless .is-indeterminate
|
|
71
|
+
&::before {
|
|
72
|
+
content: '';
|
|
73
|
+
display: none;
|
|
74
|
+
}
|
|
41
75
|
}
|
|
42
76
|
|
|
43
77
|
// Checked
|
|
44
78
|
&.is-checked .el-checkbox__inner {
|
|
45
79
|
background-color: var(--er-action-primary-default);
|
|
46
80
|
border-color: var(--er-action-primary-default);
|
|
81
|
+
|
|
82
|
+
&::after {
|
|
83
|
+
transform: scale(1);
|
|
84
|
+
}
|
|
47
85
|
}
|
|
48
86
|
|
|
49
87
|
// Indeterminate
|
|
@@ -52,29 +90,40 @@
|
|
|
52
90
|
border-color: var(--er-action-primary-default);
|
|
53
91
|
|
|
54
92
|
&::before {
|
|
55
|
-
|
|
93
|
+
display: block;
|
|
94
|
+
inset: 0;
|
|
95
|
+
margin: auto;
|
|
96
|
+
width: 100%;
|
|
97
|
+
height: 100%;
|
|
56
98
|
background-color: var(--er-icon-on-action);
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
transform: translateY(-50%);
|
|
99
|
+
-webkit-mask: $chk-minus-icon center / 10px 2px no-repeat;
|
|
100
|
+
mask: $chk-minus-icon center / 10px 2px no-repeat;
|
|
101
|
+
transform: scale(1);
|
|
102
|
+
transition: transform 0.15s ease-in 50ms;
|
|
62
103
|
}
|
|
63
|
-
}
|
|
64
104
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
105
|
+
&::after {
|
|
106
|
+
transform: scale(0);
|
|
107
|
+
}
|
|
68
108
|
}
|
|
69
109
|
}
|
|
70
110
|
|
|
111
|
+
// Disabled — Figma: fade the WHOLE component (box + label); the label keeps
|
|
112
|
+
// its state color. Tree cancels this and fades the whole node instead.
|
|
113
|
+
&.is-disabled,
|
|
114
|
+
& .el-checkbox.is-disabled {
|
|
115
|
+
opacity: 0.5;
|
|
116
|
+
cursor: not-allowed;
|
|
117
|
+
}
|
|
118
|
+
|
|
71
119
|
// Hover
|
|
72
120
|
&:hover:not(.is-disabled) {
|
|
73
|
-
.el-checkbox__input:not(.is-checked) .el-checkbox__inner {
|
|
121
|
+
.el-checkbox__input:not(.is-checked):not(.is-indeterminate) .el-checkbox__inner {
|
|
74
122
|
border-color: var(--er-border-action-hover);
|
|
75
123
|
}
|
|
76
124
|
|
|
77
|
-
.el-checkbox__input.is-checked .el-checkbox__inner
|
|
125
|
+
.el-checkbox__input.is-checked .el-checkbox__inner,
|
|
126
|
+
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
78
127
|
background-color: var(--er-action-primary-hover);
|
|
79
128
|
border-color: var(--er-action-primary-hover);
|
|
80
129
|
}
|
|
@@ -86,6 +135,7 @@
|
|
|
86
135
|
|
|
87
136
|
// ───────────────────────────────────────────────────────────────────────
|
|
88
137
|
// LABEL STYLING — state-specific colors per Figma
|
|
138
|
+
// Disabled keeps its state color (whole-component opacity handles the fade)
|
|
89
139
|
// ───────────────────────────────────────────────────────────────────────
|
|
90
140
|
|
|
91
141
|
// Default (unchecked): text-secondary
|
|
@@ -104,14 +154,4 @@
|
|
|
104
154
|
.el-checkbox__input.is-indeterminate + .el-checkbox__label {
|
|
105
155
|
color: var(--er-text-primary) !important;
|
|
106
156
|
}
|
|
107
|
-
|
|
108
|
-
// Disabled (uncheck/indeterminate): text-disabled
|
|
109
|
-
.el-checkbox__input.is-disabled + .el-checkbox__label {
|
|
110
|
-
color: var(--er-text-muted) !important;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// Disabled + Checked: still blue but translucent (opacity-50)
|
|
114
|
-
.el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
|
|
115
|
-
color: var(--er-action-primary-default) !important;
|
|
116
|
-
}
|
|
117
157
|
}
|
|
@@ -99,7 +99,11 @@
|
|
|
99
99
|
margin-right: var(--er-shape-spacing-50);
|
|
100
100
|
|
|
101
101
|
@include checkbox.checkbox-styles;
|
|
102
|
+
// Tree fades the whole node via :has(.el-checkbox.is-disabled) above —
|
|
103
|
+
// cancel the mixin's checkbox-level fade to avoid double dimming.
|
|
102
104
|
&.is-disabled {
|
|
105
|
+
opacity: 1 !important;
|
|
106
|
+
|
|
103
107
|
.el-checkbox__input {
|
|
104
108
|
opacity: 1 !important;
|
|
105
109
|
}
|