@pathscale/ui 0.0.87 → 0.0.88
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.
|
@@ -5,6 +5,7 @@ export { type ValidatedFormProps } from "./ValidatedForm";
|
|
|
5
5
|
export { type FormFieldProps } from "./FormField";
|
|
6
6
|
export { type PasswordFieldProps } from "./PasswordField";
|
|
7
7
|
export { type NumberFieldProps } from "./NumberField";
|
|
8
|
+
export { type FormDropdownProps, type DropdownOption } from "./FormDropdown";
|
|
8
9
|
export type FormProps = Omit<JSX.HTMLAttributes<HTMLFormElement>, "ref"> & IComponentBaseProps & {
|
|
9
10
|
autoFocus?: boolean;
|
|
10
11
|
cycleOnEnter?: boolean;
|
|
@@ -16,5 +17,6 @@ declare const _default: ParentComponent<FormProps> & {
|
|
|
16
17
|
Field: import("solid-js").Component<import("./FormField").FormFieldProps>;
|
|
17
18
|
Password: import("solid-js").Component<import("./PasswordField").PasswordFieldProps>;
|
|
18
19
|
Number: import("solid-js").Component<import("./NumberField").NumberFieldProps>;
|
|
20
|
+
Dropdown: import("solid-js").Component<import("./FormDropdown").FormDropdownProps>;
|
|
19
21
|
};
|
|
20
22
|
export default _default;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Component, JSX } from "solid-js";
|
|
2
|
+
export interface DropdownOption {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
}
|
|
6
|
+
export interface FormDropdownProps {
|
|
7
|
+
label: string;
|
|
8
|
+
name: string;
|
|
9
|
+
options: DropdownOption[];
|
|
10
|
+
value?: string;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
required?: boolean;
|
|
13
|
+
labelClass?: string;
|
|
14
|
+
errorClass?: string;
|
|
15
|
+
containerClass?: string;
|
|
16
|
+
description?: string;
|
|
17
|
+
descriptionClass?: string;
|
|
18
|
+
class?: string;
|
|
19
|
+
className?: string;
|
|
20
|
+
icon?: JSX.Element;
|
|
21
|
+
onChange?: (value: string) => void;
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
}
|
|
24
|
+
export declare const FormDropdown: Component<FormDropdownProps>;
|
|
25
|
+
export default FormDropdown;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default } from "./Form";
|
|
2
2
|
export { type FormProps, type ValidatedFormProps, type FormFieldProps, type PasswordFieldProps, type NumberFieldProps, useFormValidation, } from "./Form";
|
|
3
3
|
export { type LabelProps } from "./Label";
|
|
4
|
+
export { default as FormDropdown, type FormDropdownProps, type DropdownOption, } from "./FormDropdown";
|
package/dist/index.js
CHANGED
|
@@ -7243,7 +7243,7 @@ const DropdownDetails = Object.assign(Details, {
|
|
|
7243
7243
|
Toggle: DropdownToggle_Summary
|
|
7244
7244
|
});
|
|
7245
7245
|
var DropdownItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li role=menuitem>"), DropdownItem_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), DropdownItem_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
|
|
7246
|
-
const
|
|
7246
|
+
const DropdownItem_DropdownItem = (props)=>{
|
|
7247
7247
|
const dropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);
|
|
7248
7248
|
const defaultProps = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
|
|
7249
7249
|
closeOnClick: true
|
|
@@ -7285,7 +7285,7 @@ const DropdownItem = (props)=>{
|
|
|
7285
7285
|
return _el$;
|
|
7286
7286
|
})();
|
|
7287
7287
|
};
|
|
7288
|
-
const
|
|
7288
|
+
const DropdownItem = DropdownItem_DropdownItem;
|
|
7289
7289
|
var DropdownMenu_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul>");
|
|
7290
7290
|
const DropdownMenu = (props)=>{
|
|
7291
7291
|
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
@@ -7486,7 +7486,7 @@ const dropdown_Dropdown = Object.assign(Dropdown, {
|
|
|
7486
7486
|
Details: DropdownDetails,
|
|
7487
7487
|
Toggle: dropdown_DropdownToggle,
|
|
7488
7488
|
Menu: dropdown_DropdownMenu,
|
|
7489
|
-
Item:
|
|
7489
|
+
Item: DropdownItem
|
|
7490
7490
|
});
|
|
7491
7491
|
const dropdown = dropdown_Dropdown;
|
|
7492
7492
|
var FileInput_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
|
|
@@ -8076,6 +8076,136 @@ const NumberField = (props)=>{
|
|
|
8076
8076
|
})();
|
|
8077
8077
|
};
|
|
8078
8078
|
const form_NumberField = NumberField;
|
|
8079
|
+
var FormDropdown_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), FormDropdown_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>"), FormDropdown_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), FormDropdown_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-error ml-1">*'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=ml-2>");
|
|
8080
|
+
const FormDropdown_FormDropdown = (props)=>{
|
|
8081
|
+
const { errors, touched, setData } = useFormValidation();
|
|
8082
|
+
const [local, _] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
8083
|
+
"label",
|
|
8084
|
+
"name",
|
|
8085
|
+
"options",
|
|
8086
|
+
"value",
|
|
8087
|
+
"placeholder",
|
|
8088
|
+
"required",
|
|
8089
|
+
"labelClass",
|
|
8090
|
+
"errorClass",
|
|
8091
|
+
"containerClass",
|
|
8092
|
+
"description",
|
|
8093
|
+
"descriptionClass",
|
|
8094
|
+
"class",
|
|
8095
|
+
"className",
|
|
8096
|
+
"icon",
|
|
8097
|
+
"onChange",
|
|
8098
|
+
"disabled"
|
|
8099
|
+
]);
|
|
8100
|
+
const containerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("flex flex-col gap-2", local.containerClass));
|
|
8101
|
+
const descriptionClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("text-sm text-base-content/70", local.descriptionClass));
|
|
8102
|
+
const errorClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("text-error text-sm", local.errorClass));
|
|
8103
|
+
const dropdownClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("border border-base-300 rounded px-4 py-2 w-full flex justify-between items-center", local.disabled ? "opacity-70 cursor-not-allowed" : "", local.class, local.className));
|
|
8104
|
+
const hasError = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>touched(local.name) && !!errors(local.name));
|
|
8105
|
+
const selectedOption = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.options.find((opt)=>opt.value === local.value));
|
|
8106
|
+
const handleSelect = (value)=>{
|
|
8107
|
+
setData(local.name, value);
|
|
8108
|
+
if (local.onChange) local.onChange(value);
|
|
8109
|
+
};
|
|
8110
|
+
return (()=>{
|
|
8111
|
+
var _el$ = FormDropdown_tmpl$3();
|
|
8112
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(form_Form.Label, {
|
|
8113
|
+
get title () {
|
|
8114
|
+
return local.label;
|
|
8115
|
+
},
|
|
8116
|
+
get ["class"] () {
|
|
8117
|
+
return local.labelClass;
|
|
8118
|
+
},
|
|
8119
|
+
get children () {
|
|
8120
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.required)() && FormDropdown_tmpl$4();
|
|
8121
|
+
}
|
|
8122
|
+
}), null);
|
|
8123
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
|
|
8124
|
+
var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.description);
|
|
8125
|
+
return ()=>_c$() && (()=>{
|
|
8126
|
+
var _el$5 = FormDropdown_tmpl$2();
|
|
8127
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.description);
|
|
8128
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, descriptionClasses()));
|
|
8129
|
+
return _el$5;
|
|
8130
|
+
})();
|
|
8131
|
+
})(), null);
|
|
8132
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(dropdown, {
|
|
8133
|
+
fullWidth: true,
|
|
8134
|
+
get children () {
|
|
8135
|
+
return [
|
|
8136
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(dropdown.Toggle, {
|
|
8137
|
+
get ["class"] () {
|
|
8138
|
+
return dropdownClasses();
|
|
8139
|
+
},
|
|
8140
|
+
get ["aria-invalid"] () {
|
|
8141
|
+
return hasError();
|
|
8142
|
+
},
|
|
8143
|
+
get ["aria-required"] () {
|
|
8144
|
+
return local.required;
|
|
8145
|
+
},
|
|
8146
|
+
get id () {
|
|
8147
|
+
return local.name;
|
|
8148
|
+
},
|
|
8149
|
+
get disabled () {
|
|
8150
|
+
return local.disabled;
|
|
8151
|
+
},
|
|
8152
|
+
get children () {
|
|
8153
|
+
return [
|
|
8154
|
+
(()=>{
|
|
8155
|
+
var _el$2 = FormDropdown_tmpl$();
|
|
8156
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>selectedOption()?.label || local.placeholder || "Select an option");
|
|
8157
|
+
return _el$2;
|
|
8158
|
+
})(),
|
|
8159
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>local.icon || (()=>{
|
|
8160
|
+
var _el$6 = _tmpl$5();
|
|
8161
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(icon_Icon, {
|
|
8162
|
+
name: "icon-[mdi-light--chevron-down]",
|
|
8163
|
+
width: 20,
|
|
8164
|
+
height: 20
|
|
8165
|
+
}));
|
|
8166
|
+
return _el$6;
|
|
8167
|
+
})())
|
|
8168
|
+
];
|
|
8169
|
+
}
|
|
8170
|
+
}),
|
|
8171
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(dropdown.Menu, {
|
|
8172
|
+
class: "w-full",
|
|
8173
|
+
get children () {
|
|
8174
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
|
|
8175
|
+
get each () {
|
|
8176
|
+
return local.options;
|
|
8177
|
+
},
|
|
8178
|
+
children: (option)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(dropdown.Item, {
|
|
8179
|
+
onClick: ()=>handleSelect(option.value),
|
|
8180
|
+
get ["class"] () {
|
|
8181
|
+
return local.value === option.value ? "bg-base-200" : "";
|
|
8182
|
+
},
|
|
8183
|
+
get children () {
|
|
8184
|
+
return option.label;
|
|
8185
|
+
}
|
|
8186
|
+
})
|
|
8187
|
+
});
|
|
8188
|
+
}
|
|
8189
|
+
})
|
|
8190
|
+
];
|
|
8191
|
+
}
|
|
8192
|
+
}), null);
|
|
8193
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
8194
|
+
get when () {
|
|
8195
|
+
return hasError();
|
|
8196
|
+
},
|
|
8197
|
+
get children () {
|
|
8198
|
+
var _el$3 = FormDropdown_tmpl$2();
|
|
8199
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>errors(local.name));
|
|
8200
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, errorClasses()));
|
|
8201
|
+
return _el$3;
|
|
8202
|
+
}
|
|
8203
|
+
}), null);
|
|
8204
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, containerClasses()));
|
|
8205
|
+
return _el$;
|
|
8206
|
+
})();
|
|
8207
|
+
};
|
|
8208
|
+
const FormDropdown = FormDropdown_FormDropdown;
|
|
8079
8209
|
var Form_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<form role=form>");
|
|
8080
8210
|
const Form = (props)=>{
|
|
8081
8211
|
const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
|
|
@@ -8150,7 +8280,8 @@ const form_Form = Object.assign(Form, {
|
|
|
8150
8280
|
Validated: form_ValidatedForm,
|
|
8151
8281
|
Field: form_FormField,
|
|
8152
8282
|
Password: form_PasswordField,
|
|
8153
|
-
Number: form_NumberField
|
|
8283
|
+
Number: form_NumberField,
|
|
8284
|
+
Dropdown: FormDropdown
|
|
8154
8285
|
});
|
|
8155
8286
|
const colsMap = {
|
|
8156
8287
|
1: "grid-cols-1",
|
|
@@ -10374,7 +10505,7 @@ const steps_Steps = Object.assign(Steps, {
|
|
|
10374
10505
|
Step: steps_Step
|
|
10375
10506
|
});
|
|
10376
10507
|
const steps = steps_Steps;
|
|
10377
|
-
var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false),
|
|
10508
|
+
var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), SvgBackground_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div><svg viewBox="0 0 400 400"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg></div><canvas></canvas><div class="relative z-10 h-full w-full">'), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
|
|
10378
10509
|
function hexToRgb(hex) {
|
|
10379
10510
|
hex = hex.replace(/^#/, '');
|
|
10380
10511
|
const bigint = parseInt(hex, 16);
|
|
@@ -10529,7 +10660,7 @@ function SvgBackground(props) {
|
|
|
10529
10660
|
return _el$5;
|
|
10530
10661
|
})(),
|
|
10531
10662
|
(()=>{
|
|
10532
|
-
var _el$6 =
|
|
10663
|
+
var _el$6 = SvgBackground_tmpl$5();
|
|
10533
10664
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "fill", getIntermediateColor(0.75)));
|
|
10534
10665
|
return _el$6;
|
|
10535
10666
|
})(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.iconify{background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.iconify,.iconify-color{display:inline-block;height:1em;width:1em}.iconify-color{background-repeat:no-repeat;background-size:100% 100%}.icon-[mdi-light--chevron-left]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.41 18.16 8.75 12.5l5.66-5.66.7.71-4.95 4.95 4.95 4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-left].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-left].iconify-color{background-image:var(--svg)}.icon-[mdi-light--chevron-right]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m8.59 18.16 5.66-5.66-5.66-5.66-.7.71 4.95 4.95-4.95 4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-right].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-right].iconify-color{background-image:var(--svg)}.icon-[mdi-light--eye]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17 7 15 7 12.5 9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5 3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9'/%3E%3C/svg%3E")}.icon-[mdi-light--eye].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--eye].iconify-color{background-image:var(--svg)}.icon-[mdi-light--eye-off]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M2.54 4.71 3.25 4 20 20.75l-.71.71-3.34-3.35c-1.37.57-2.87.89-4.45.89-4.56 0-8.5-2.65-10.36-6.5.97-2 2.49-3.67 4.36-4.82zM11.5 18c1.29 0 2.53-.23 3.67-.66l-1.12-1.13c-.73.5-1.6.79-2.55.79C9 17 7 15 7 12.5c0-.95.29-1.82.79-2.55L6.24 8.41a10.64 10.64 0 0 0-3.98 4.09C4.04 15.78 7.5 18 11.5 18m9.24-5.5C18.96 9.22 15.5 7 11.5 7c-1.15 0-2.27.19-3.31.53l-.78-.78C8.68 6.26 10.06 6 11.5 6c4.56 0 8.5 2.65 10.36 6.5a11.47 11.47 0 0 1-4.07 4.63l-.72-.73c1.53-.96 2.8-2.3 3.67-3.9M11.5 8C14 8 16 10 16 12.5c0 .82-.22 1.58-.6 2.24l-.74-.74c.22-.46.34-.96.34-1.5A3.5 3.5 0 0 0 11.5 9c-.54 0-1.04.12-1.5.34l-.74-.74c.66-.38 1.42-.6 2.24-.6M8 12.5a3.5 3.5 0 0 0 3.5 3.5c.67 0 1.29-.19 1.82-.5L8.5 10.68c-.31.53-.5 1.15-.5 1.82'/%3E%3C/svg%3E")}.icon-[mdi-light--eye-off].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--eye-off].iconify-color{background-image:var(--svg)}
|
|
1
|
+
.iconify{background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.iconify,.iconify-color{display:inline-block;height:1em;width:1em}.iconify-color{background-repeat:no-repeat;background-size:100% 100%}.icon-[mdi-light--chevron-down]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m5.84 9.59 5.66 5.66 5.66-5.66-.71-.7-4.95 4.95-4.95-4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-down].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-down].iconify-color{background-image:var(--svg)}.icon-[mdi-light--chevron-left]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.41 18.16 8.75 12.5l5.66-5.66.7.71-4.95 4.95 4.95 4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-left].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-left].iconify-color{background-image:var(--svg)}.icon-[mdi-light--chevron-right]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m8.59 18.16 5.66-5.66-5.66-5.66-.7.71 4.95 4.95-4.95 4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-right].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-right].iconify-color{background-image:var(--svg)}.icon-[mdi-light--eye]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17 7 15 7 12.5 9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5 3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9'/%3E%3C/svg%3E")}.icon-[mdi-light--eye].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--eye].iconify-color{background-image:var(--svg)}.icon-[mdi-light--eye-off]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M2.54 4.71 3.25 4 20 20.75l-.71.71-3.34-3.35c-1.37.57-2.87.89-4.45.89-4.56 0-8.5-2.65-10.36-6.5.97-2 2.49-3.67 4.36-4.82zM11.5 18c1.29 0 2.53-.23 3.67-.66l-1.12-1.13c-.73.5-1.6.79-2.55.79C9 17 7 15 7 12.5c0-.95.29-1.82.79-2.55L6.24 8.41a10.64 10.64 0 0 0-3.98 4.09C4.04 15.78 7.5 18 11.5 18m9.24-5.5C18.96 9.22 15.5 7 11.5 7c-1.15 0-2.27.19-3.31.53l-.78-.78C8.68 6.26 10.06 6 11.5 6c4.56 0 8.5 2.65 10.36 6.5a11.47 11.47 0 0 1-4.07 4.63l-.72-.73c1.53-.96 2.8-2.3 3.67-3.9M11.5 8C14 8 16 10 16 12.5c0 .82-.22 1.58-.6 2.24l-.74-.74c.22-.46.34-.96.34-1.5A3.5 3.5 0 0 0 11.5 9c-.54 0-1.04.12-1.5.34l-.74-.74c.66-.38 1.42-.6 2.24-.6M8 12.5a3.5 3.5 0 0 0 3.5 3.5c.67 0 1.29-.19 1.82-.5L8.5 10.68c-.31.53-.5 1.15-.5 1.82'/%3E%3C/svg%3E")}.icon-[mdi-light--eye-off].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--eye-off].iconify-color{background-image:var(--svg)}
|