@rogieking/figui3 2.0.8 → 2.0.10
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.
- package/components.css +8 -0
- package/example.html +92 -0
- package/package.json +1 -1
package/components.css
CHANGED
|
@@ -2351,6 +2351,14 @@ fig-input-color {
|
|
|
2351
2351
|
text-transform: uppercase;
|
|
2352
2352
|
}
|
|
2353
2353
|
}
|
|
2354
|
+
& > .input-combo > fig-chit:not(:only-child),
|
|
2355
|
+
& > .input-combo > fig-chit:not(:only-child) > input,
|
|
2356
|
+
& > .input-combo > fig-fill-picker:not(:only-child),
|
|
2357
|
+
& > .input-combo > fig-fill-picker:not(:only-child) > fig-chit > input,
|
|
2358
|
+
& fig-fill-picker:not(:only-child) {
|
|
2359
|
+
border-top-right-radius: 0 !important;
|
|
2360
|
+
border-bottom-right-radius: 0 !important;
|
|
2361
|
+
}
|
|
2354
2362
|
|
|
2355
2363
|
& fig-input-text[type="number"],
|
|
2356
2364
|
& fig-input-number {
|
package/example.html
CHANGED
|
@@ -1079,6 +1079,98 @@
|
|
|
1079
1079
|
|
|
1080
1080
|
<h4>No Picker with Alpha</h4>
|
|
1081
1081
|
<fig-input-color value="#9747FF" text="true" alpha="true" picker="false"></fig-input-color>
|
|
1082
|
+
|
|
1083
|
+
<h3>Width Test (Resizable)</h3>
|
|
1084
|
+
<p class="description">Drag the right edge of each container to test at different widths.</p>
|
|
1085
|
+
|
|
1086
|
+
<style>
|
|
1087
|
+
.resize-test {
|
|
1088
|
+
resize: horizontal;
|
|
1089
|
+
overflow: hidden;
|
|
1090
|
+
border: 1px dashed var(--figma-color-border);
|
|
1091
|
+
padding: 0.5rem;
|
|
1092
|
+
margin-bottom: 0.75rem;
|
|
1093
|
+
min-width: 60px;
|
|
1094
|
+
max-width: 100%;
|
|
1095
|
+
width: 200px;
|
|
1096
|
+
border-radius: 4px;
|
|
1097
|
+
}
|
|
1098
|
+
.resize-test fig-input-color {
|
|
1099
|
+
width: 100%;
|
|
1100
|
+
}
|
|
1101
|
+
.resize-test-label {
|
|
1102
|
+
font-size: 0.7rem;
|
|
1103
|
+
color: var(--figma-color-text-tertiary);
|
|
1104
|
+
margin-bottom: 0.25rem;
|
|
1105
|
+
font-family: monospace;
|
|
1106
|
+
}
|
|
1107
|
+
</style>
|
|
1108
|
+
|
|
1109
|
+
<h4>Swatch Only</h4>
|
|
1110
|
+
<div class="resize-test">
|
|
1111
|
+
<div class="resize-test-label">value="#FF5733"</div>
|
|
1112
|
+
<fig-input-color value="#FF5733"></fig-input-color>
|
|
1113
|
+
</div>
|
|
1114
|
+
|
|
1115
|
+
<h4>Text Only</h4>
|
|
1116
|
+
<div class="resize-test">
|
|
1117
|
+
<div class="resize-test-label">text="true"</div>
|
|
1118
|
+
<fig-input-color value="#33FF57" text="true"></fig-input-color>
|
|
1119
|
+
</div>
|
|
1120
|
+
|
|
1121
|
+
<h4>Text + Alpha</h4>
|
|
1122
|
+
<div class="resize-test">
|
|
1123
|
+
<div class="resize-test-label">text="true" alpha="true"</div>
|
|
1124
|
+
<fig-input-color value="#3357FF" text="true" alpha="true"></fig-input-color>
|
|
1125
|
+
</div>
|
|
1126
|
+
|
|
1127
|
+
<h4>Picker="figma"</h4>
|
|
1128
|
+
<div class="resize-test">
|
|
1129
|
+
<div class="resize-test-label">picker="figma"</div>
|
|
1130
|
+
<fig-input-color value="#FF33A1" picker="figma"></fig-input-color>
|
|
1131
|
+
</div>
|
|
1132
|
+
|
|
1133
|
+
<h4>Picker="figma" + Text</h4>
|
|
1134
|
+
<div class="resize-test">
|
|
1135
|
+
<div class="resize-test-label">picker="figma" text="true"</div>
|
|
1136
|
+
<fig-input-color value="#A133FF" picker="figma" text="true"></fig-input-color>
|
|
1137
|
+
</div>
|
|
1138
|
+
|
|
1139
|
+
<h4>Picker="figma" + Text + Alpha</h4>
|
|
1140
|
+
<div class="resize-test">
|
|
1141
|
+
<div class="resize-test-label">picker="figma" text="true" alpha="true"</div>
|
|
1142
|
+
<fig-input-color value="#33FFA1" picker="figma" text="true" alpha="true"></fig-input-color>
|
|
1143
|
+
</div>
|
|
1144
|
+
|
|
1145
|
+
<h4>Picker="false" + Text</h4>
|
|
1146
|
+
<div class="resize-test">
|
|
1147
|
+
<div class="resize-test-label">picker="false" text="true"</div>
|
|
1148
|
+
<fig-input-color value="#FFD700" picker="false" text="true"></fig-input-color>
|
|
1149
|
+
</div>
|
|
1150
|
+
|
|
1151
|
+
<h4>Picker="false" + Text + Alpha</h4>
|
|
1152
|
+
<div class="resize-test">
|
|
1153
|
+
<div class="resize-test-label">picker="false" text="true" alpha="true"</div>
|
|
1154
|
+
<fig-input-color value="#00CED1" picker="false" text="true" alpha="true"></fig-input-color>
|
|
1155
|
+
</div>
|
|
1156
|
+
|
|
1157
|
+
<h4>Full Attribute</h4>
|
|
1158
|
+
<div class="resize-test">
|
|
1159
|
+
<div class="resize-test-label">text="true" alpha="true" full</div>
|
|
1160
|
+
<fig-input-color value="#DC143C" text="true" alpha="true" full></fig-input-color>
|
|
1161
|
+
</div>
|
|
1162
|
+
|
|
1163
|
+
<h4>With Alpha in Value (#RRGGBBAA)</h4>
|
|
1164
|
+
<div class="resize-test">
|
|
1165
|
+
<div class="resize-test-label">value="#8B008B80" text="true" alpha="true"</div>
|
|
1166
|
+
<fig-input-color value="#8B008B80" text="true" alpha="true"></fig-input-color>
|
|
1167
|
+
</div>
|
|
1168
|
+
|
|
1169
|
+
<h4>Picker="native" + Text + Alpha</h4>
|
|
1170
|
+
<div class="resize-test">
|
|
1171
|
+
<div class="resize-test-label">picker="native" text="true" alpha="true"</div>
|
|
1172
|
+
<fig-input-color value="#20B2AA" picker="native" text="true" alpha="true"></fig-input-color>
|
|
1173
|
+
</div>
|
|
1082
1174
|
</section>
|
|
1083
1175
|
<hr>
|
|
1084
1176
|
|