@inntechcorp/it-design 2.0.114 → 2.0.116
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/dist/form/item/Item.d.ts +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +8 -7
- package/dist/{output-DCvuWNga.css → output-BwpNST6S.css} +41 -41
- package/dist/select/menu/Menu.d.ts +2 -1
- package/dist/types/SelectProps.d.ts +6 -5
- package/package.json +1 -1
- package/dist/output-DjWTgiS1.css +0 -241
package/dist/form/item/Item.d.ts
CHANGED
package/dist/index.d.mts
CHANGED
|
@@ -70,7 +70,7 @@ export type { AccordionSubMenuProps } from './types/AccordionSubMenuProps';
|
|
|
70
70
|
export type { AccordionItemProps } from './types/AccordionItemProps';
|
|
71
71
|
export type { InputProps, InputVariant } from './types/InputProps';
|
|
72
72
|
export type { TextAreaProps, TextAreaVariant, TextAreaEvent } from './types/TextAreaProps';
|
|
73
|
-
export type { SelectProps, SelectToggleProps, SelectOptionProps, SelectVariant, SelectDirection, SelectPosition } from './types/SelectProps';
|
|
73
|
+
export type { SelectProps, SelectToggleProps, SelectOptionProps, SelectValue, SelectVariant, SelectDirection, SelectPosition } from './types/SelectProps';
|
|
74
74
|
export type { CheckboxProps, CheckboxGroupProps, GroupCheckboxOptionType, CheckboxEvent } from './types/CheckboxProps';
|
|
75
75
|
export type { ITDImperativeFuncProps } from './types/ITDImperativeFuncProps';
|
|
76
76
|
export type { SingleQueryProps } from './types/SingleQueryProps';
|
package/dist/index.d.ts
CHANGED
|
@@ -394,7 +394,7 @@ type ItemProps = {
|
|
|
394
394
|
mask?: string | null;
|
|
395
395
|
locked?: boolean;
|
|
396
396
|
dependency?: string;
|
|
397
|
-
reset?: [];
|
|
397
|
+
reset?: any[];
|
|
398
398
|
query?: string;
|
|
399
399
|
children: ChildrenProps$1;
|
|
400
400
|
};
|
|
@@ -760,8 +760,8 @@ type TextAreaVariant = "default" | "filled" | "dashed";
|
|
|
760
760
|
|
|
761
761
|
type SelectProps = {
|
|
762
762
|
id?: string;
|
|
763
|
-
defaultValue?:
|
|
764
|
-
value?:
|
|
763
|
+
defaultValue?: SelectValue;
|
|
764
|
+
value?: SelectValue;
|
|
765
765
|
label?: string;
|
|
766
766
|
position?: SelectPosition;
|
|
767
767
|
direction?: SelectDirection;
|
|
@@ -778,13 +778,13 @@ type SelectProps = {
|
|
|
778
778
|
floating?: boolean;
|
|
779
779
|
style?: CSSProperties;
|
|
780
780
|
children?: ReactElement<SelectOptionProps> | Array<ReactElement<SelectOptionProps>> | ChildrenProps;
|
|
781
|
-
onChange?: ((value:
|
|
782
|
-
onUpdate?: ((value:
|
|
781
|
+
onChange?: ((value: SelectValue) => void) | null;
|
|
782
|
+
onUpdate?: ((value: SelectValue, update?: boolean, validation?: boolean) => void) | null;
|
|
783
783
|
};
|
|
784
784
|
type SelectToggleProps = {
|
|
785
785
|
id?: string;
|
|
786
786
|
label: string;
|
|
787
|
-
value:
|
|
787
|
+
value: SelectValue;
|
|
788
788
|
errorMessage: string;
|
|
789
789
|
isOpen: boolean;
|
|
790
790
|
showSearch: boolean;
|
|
@@ -802,6 +802,7 @@ type SelectToggleProps = {
|
|
|
802
802
|
onFilter: (value: string) => void;
|
|
803
803
|
onChange: (open: boolean) => void;
|
|
804
804
|
};
|
|
805
|
+
type SelectValue = string | number | any[];
|
|
805
806
|
type SelectVariant = "default" | "solid" | "filled" | "outline" | "custom";
|
|
806
807
|
type SelectPosition = "top" | "bottom";
|
|
807
808
|
type SelectDirection = "right" | "left";
|
|
@@ -1335,4 +1336,4 @@ declare enum FileExtensions {
|
|
|
1335
1336
|
OTF = ".otf"
|
|
1336
1337
|
}
|
|
1337
1338
|
|
|
1338
|
-
export { ALink, Accordion, type AccordionItemProps, type AccordionProps, type AccordionSubMenuProps, AddDefaultThemeStyle, AddZero, Alert, type AlertProps, type AlertSize, type AlertType, Arrow as ArrowIcon, BackToTop, BackTop, Button, type ButtonContentPosition, type ButtonProps, type ButtonState, type ButtonType, type ButtonVariant, Calendar, Card, type CardProps, CheckFileURL, Checkbox, type CheckboxEvent, type CheckboxGroupProps, type CheckboxProps, Checkmark, ChunkArray, Collapse, ConsoleLog, ConvertCurrency, DatePicker, DetermineNewHeight, DetermineNewWidth, type FieldUpdateProps, FileChecker, FileExtensions, FileTypes, FindSelector, Flex, type FlexAlignProps, type FlexGapProps, type FlexJustifyProps, type FlexProps, Form, type FormContextType, type FormItemProps, type FormProps, type FormRuleProps, type FormSubComponentProps, type FormValueProps, FormatBytes, FormatDate, FormatDateTime, FormatSimpleDate, FormatSimpleDateTime, FormatTime, GetByCurrency, GetCountryCodeByCurrencyCode, GetCountryCodeByLanguage, GetCurrencyFormat, GetCurrencySymbol, GetDecimalByCurrency, GetTypeByFileType, type GroupCheckboxOptionType, H1, H2, H3, H4, ITDContext, type ITDContextType, type ITDImperativeFuncProps, ITDProvider, type ITDProviderProps, type ITDSize, type ITDSizeSlug, _default as Image, InlineSelect, InlineSelectArrow, Input, type InputProps, type InputVariant, IsValidJSON, Lock as LockIcon, type ModalContentProps, ModalManager, type ModalProps, type ModalRefProps, ModalState, NoData, Notification, type NotificationContextType, type NotificationsProps, Picture, Progress, type ProgressProps, type ProgressStatus, Radio, RemoveUnits, Result, type ResultProps, SVGLoader, Select, type SelectDirection, type SelectOptionProps, type SelectPosition, type SelectProps, type SelectToggleProps, type SelectVariant, type SingleQueryProps, Spin, Status, type StatusProps, type StatusVariant, Switch, type SwitchProps, Table, type TableColumnType, type TableProps, Tabs, type TabsItemProps, type TabsProps, TextArea, type TextAreaEvent, type TextAreaProps, type TextAreaVariant, TinyScrollbar, Tooltip, Trash, UniUpperCase, UpdateThemeStyle, Upload, Upload$1 as UploadIcon, type UploadProgressProps, type UploadProps, type UploadResultMessageProps, Wait, ZoomIn, ZoomOut, useAddExternalCSS, useComponentSize, useConnectionStatus, useConstructor, useContextBridge, useCoreFetch, useCreateDynamicStyle, useCreateStyledStyle, useMultiQuery, useOnClickOutside, useOnESCKeyDown, useOnResize, useReCaptcha, useSingleQuery };
|
|
1339
|
+
export { ALink, Accordion, type AccordionItemProps, type AccordionProps, type AccordionSubMenuProps, AddDefaultThemeStyle, AddZero, Alert, type AlertProps, type AlertSize, type AlertType, Arrow as ArrowIcon, BackToTop, BackTop, Button, type ButtonContentPosition, type ButtonProps, type ButtonState, type ButtonType, type ButtonVariant, Calendar, Card, type CardProps, CheckFileURL, Checkbox, type CheckboxEvent, type CheckboxGroupProps, type CheckboxProps, Checkmark, ChunkArray, Collapse, ConsoleLog, ConvertCurrency, DatePicker, DetermineNewHeight, DetermineNewWidth, type FieldUpdateProps, FileChecker, FileExtensions, FileTypes, FindSelector, Flex, type FlexAlignProps, type FlexGapProps, type FlexJustifyProps, type FlexProps, Form, type FormContextType, type FormItemProps, type FormProps, type FormRuleProps, type FormSubComponentProps, type FormValueProps, FormatBytes, FormatDate, FormatDateTime, FormatSimpleDate, FormatSimpleDateTime, FormatTime, GetByCurrency, GetCountryCodeByCurrencyCode, GetCountryCodeByLanguage, GetCurrencyFormat, GetCurrencySymbol, GetDecimalByCurrency, GetTypeByFileType, type GroupCheckboxOptionType, H1, H2, H3, H4, ITDContext, type ITDContextType, type ITDImperativeFuncProps, ITDProvider, type ITDProviderProps, type ITDSize, type ITDSizeSlug, _default as Image, InlineSelect, InlineSelectArrow, Input, type InputProps, type InputVariant, IsValidJSON, Lock as LockIcon, type ModalContentProps, ModalManager, type ModalProps, type ModalRefProps, ModalState, NoData, Notification, type NotificationContextType, type NotificationsProps, Picture, Progress, type ProgressProps, type ProgressStatus, Radio, RemoveUnits, Result, type ResultProps, SVGLoader, Select, type SelectDirection, type SelectOptionProps, type SelectPosition, type SelectProps, type SelectToggleProps, type SelectValue, type SelectVariant, type SingleQueryProps, Spin, Status, type StatusProps, type StatusVariant, Switch, type SwitchProps, Table, type TableColumnType, type TableProps, Tabs, type TabsItemProps, type TabsProps, TextArea, type TextAreaEvent, type TextAreaProps, type TextAreaVariant, TinyScrollbar, Tooltip, Trash, UniUpperCase, UpdateThemeStyle, Upload, Upload$1 as UploadIcon, type UploadProgressProps, type UploadProps, type UploadResultMessageProps, Wait, ZoomIn, ZoomOut, useAddExternalCSS, useComponentSize, useConnectionStatus, useConstructor, useContextBridge, useCoreFetch, useCreateDynamicStyle, useCreateStyledStyle, useMultiQuery, useOnClickOutside, useOnESCKeyDown, useOnResize, useReCaptcha, useSingleQuery };
|
|
@@ -61,33 +61,30 @@
|
|
|
61
61
|
-webkit-box-shadow: 0 0 0 30px #151d3d inset !important;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
.
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
width:
|
|
69
|
-
|
|
70
|
-
fill: rgba(255, 255, 255, 0.6);
|
|
64
|
+
.option {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
min-width: max-content;
|
|
69
|
+
padding: 10px 30px 10px 15px;
|
|
71
70
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
.option:not(:last-child) {
|
|
72
|
+
margin-bottom: 1px;
|
|
73
|
+
}
|
|
74
|
+
.option:hover {
|
|
75
|
+
background-color: rgba(29, 38, 73, 0.5019607843);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
.
|
|
79
|
-
|
|
80
|
-
fill: #ffffff;
|
|
78
|
+
.selected .single, .selected .option span {
|
|
79
|
+
color: #ffffff;
|
|
81
80
|
}
|
|
82
81
|
|
|
83
|
-
.
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
display: flex;
|
|
90
|
-
align-items: center;
|
|
82
|
+
.single, .option span {
|
|
83
|
+
color: rgba(255, 255, 255, 0.6666666667);
|
|
84
|
+
font-weight: 400;
|
|
85
|
+
font-size: 12px;
|
|
86
|
+
line-height: 12px;
|
|
87
|
+
white-space: nowrap;
|
|
91
88
|
}
|
|
92
89
|
|
|
93
90
|
.menu {
|
|
@@ -156,30 +153,33 @@
|
|
|
156
153
|
transition: height 150ms ease-out;
|
|
157
154
|
}
|
|
158
155
|
|
|
159
|
-
.
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
.option:not(:last-child) {
|
|
167
|
-
margin-bottom: 1px;
|
|
156
|
+
.arrow {
|
|
157
|
+
transition: all 0.25s ease-out;
|
|
158
|
+
margin-left: auto;
|
|
159
|
+
transform: rotate(0deg);
|
|
160
|
+
width: 20px;
|
|
161
|
+
height: 20px;
|
|
162
|
+
fill: rgba(255, 255, 255, 0.6);
|
|
168
163
|
}
|
|
169
|
-
|
|
170
|
-
|
|
164
|
+
|
|
165
|
+
.arrowNormal {
|
|
166
|
+
margin-left: auto;
|
|
167
|
+
transform: rotate(-90deg);
|
|
171
168
|
}
|
|
172
169
|
|
|
173
|
-
.
|
|
174
|
-
|
|
170
|
+
.arrowOpen {
|
|
171
|
+
transform: rotate(-180deg);
|
|
172
|
+
fill: #ffffff;
|
|
175
173
|
}
|
|
176
174
|
|
|
177
|
-
.
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
175
|
+
.icon {
|
|
176
|
+
margin-right: 8px;
|
|
177
|
+
height: 22px;
|
|
178
|
+
width: 22px;
|
|
179
|
+
color: rgba(255, 255, 255, 0.6);
|
|
180
|
+
font-size: 22px;
|
|
181
|
+
display: flex;
|
|
182
|
+
align-items: center;
|
|
183
183
|
}
|
|
184
184
|
|
|
185
185
|
.container {
|
|
@@ -3,8 +3,8 @@ import { ChildrenProps } from "./ChildrenProps";
|
|
|
3
3
|
import { ITDSize } from "../index";
|
|
4
4
|
export type SelectProps = {
|
|
5
5
|
id?: string;
|
|
6
|
-
defaultValue?:
|
|
7
|
-
value?:
|
|
6
|
+
defaultValue?: SelectValue;
|
|
7
|
+
value?: SelectValue;
|
|
8
8
|
label?: string;
|
|
9
9
|
position?: SelectPosition;
|
|
10
10
|
direction?: SelectDirection;
|
|
@@ -21,13 +21,13 @@ export type SelectProps = {
|
|
|
21
21
|
floating?: boolean;
|
|
22
22
|
style?: CSSProperties;
|
|
23
23
|
children?: ReactElement<SelectOptionProps> | Array<ReactElement<SelectOptionProps>> | ChildrenProps;
|
|
24
|
-
onChange?: ((value:
|
|
25
|
-
onUpdate?: ((value:
|
|
24
|
+
onChange?: ((value: SelectValue) => void) | null;
|
|
25
|
+
onUpdate?: ((value: SelectValue, update?: boolean, validation?: boolean) => void) | null;
|
|
26
26
|
};
|
|
27
27
|
export type SelectToggleProps = {
|
|
28
28
|
id?: string;
|
|
29
29
|
label: string;
|
|
30
|
-
value:
|
|
30
|
+
value: SelectValue;
|
|
31
31
|
errorMessage: string;
|
|
32
32
|
isOpen: boolean;
|
|
33
33
|
showSearch: boolean;
|
|
@@ -45,6 +45,7 @@ export type SelectToggleProps = {
|
|
|
45
45
|
onFilter: (value: string) => void;
|
|
46
46
|
onChange: (open: boolean) => void;
|
|
47
47
|
};
|
|
48
|
+
export type SelectValue = string | number | any[];
|
|
48
49
|
export type SelectVariant = "default" | "solid" | "filled" | "outline" | "custom";
|
|
49
50
|
export type SelectPosition = "top" | "bottom";
|
|
50
51
|
export type SelectDirection = "right" | "left";
|
package/package.json
CHANGED
package/dist/output-DjWTgiS1.css
DELETED
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
.defaultInput {
|
|
2
|
-
height: 100%;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.floatingInput {
|
|
6
|
-
font-size: 13px;
|
|
7
|
-
color: rgba(0, 0, 0, 0.8509803922);
|
|
8
|
-
caret-color: rgba(0, 0, 0, 0.8509803922);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
/* --------------------------------- */
|
|
12
|
-
.floatingInput::placeholder {
|
|
13
|
-
color: rgba(0, 0, 0, 0);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.floatingInput:disabled:not(.floatingInput[data-locked=true]) {
|
|
17
|
-
opacity: 0.5;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.floatingInput:disabled :not(.floatingInput[data-locked=true]) {
|
|
21
|
-
opacity: 0.5;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.floatingLabel {
|
|
25
|
-
display: block;
|
|
26
|
-
position: relative;
|
|
27
|
-
max-height: 0;
|
|
28
|
-
font-weight: 500;
|
|
29
|
-
pointer-events: none;
|
|
30
|
-
font-size: 16px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.floatingLabel::before {
|
|
34
|
-
color: rgba(0, 0, 0, 0.6);
|
|
35
|
-
content: attr(data-content);
|
|
36
|
-
display: inline-block;
|
|
37
|
-
filter: blur(0);
|
|
38
|
-
backface-visibility: hidden;
|
|
39
|
-
transform-origin: left top;
|
|
40
|
-
transition: transform 0.2s ease-out;
|
|
41
|
-
position: relative;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.floatingInput:placeholder-shown + .floatingLabel::before {
|
|
45
|
-
transform: translate3d(0, -32px, 0) scale3d(0.8, 0.8, 1);
|
|
46
|
-
font-smooth: always;
|
|
47
|
-
-webkit-font-smoothing: antialiased;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.floatingLabel::before,
|
|
51
|
-
.floatingInput:focus + .floatingLabel::before {
|
|
52
|
-
transform: translate3d(0, -40px, 0) scale3d(0.8, 0.8, 1);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.floatingInput:focus + .floatingLabel::before {
|
|
56
|
-
color: rgba(0, 0, 0, 0.6);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.floatingInputinput:-webkit-autofill, .floatingInputinput:-webkit-autofill:focus, .floatingInputinput:-webkit-autofill:hover {
|
|
60
|
-
-webkit-text-fill-color: #3496fa !important;
|
|
61
|
-
-webkit-box-shadow: 0 0 0 30px #151d3d inset !important;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.arrow {
|
|
65
|
-
transition: all 0.25s ease-out;
|
|
66
|
-
margin-left: auto;
|
|
67
|
-
transform: rotate(0deg);
|
|
68
|
-
width: 20px;
|
|
69
|
-
height: 20px;
|
|
70
|
-
fill: rgba(255, 255, 255, 0.6);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.arrowNormal {
|
|
74
|
-
margin-left: auto;
|
|
75
|
-
transform: rotate(-90deg);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.arrowOpen {
|
|
79
|
-
transform: rotate(-180deg);
|
|
80
|
-
fill: #ffffff;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.icon {
|
|
84
|
-
margin-right: 8px;
|
|
85
|
-
height: 22px;
|
|
86
|
-
width: 22px;
|
|
87
|
-
color: rgba(255, 255, 255, 0.6);
|
|
88
|
-
font-size: 22px;
|
|
89
|
-
display: flex;
|
|
90
|
-
align-items: center;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.option {
|
|
94
|
-
display: flex;
|
|
95
|
-
align-items: center;
|
|
96
|
-
cursor: pointer;
|
|
97
|
-
min-width: max-content;
|
|
98
|
-
padding: 10px 30px 10px 15px;
|
|
99
|
-
}
|
|
100
|
-
.option:not(:last-child) {
|
|
101
|
-
margin-bottom: 1px;
|
|
102
|
-
}
|
|
103
|
-
.option:hover {
|
|
104
|
-
background-color: rgba(29, 38, 73, 0.5019607843);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.selected .single, .selected .option span {
|
|
108
|
-
color: #ffffff;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.single, .option span {
|
|
112
|
-
color: rgba(255, 255, 255, 0.6666666667);
|
|
113
|
-
font-weight: 400;
|
|
114
|
-
font-size: 12px;
|
|
115
|
-
line-height: 12px;
|
|
116
|
-
white-space: nowrap;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.menu {
|
|
120
|
-
background-color: #050A20;
|
|
121
|
-
border-radius: 0 5px 5px 5px;
|
|
122
|
-
overflow: hidden;
|
|
123
|
-
position: absolute;
|
|
124
|
-
z-index: 2;
|
|
125
|
-
box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.25);
|
|
126
|
-
transform-origin: 50% 1%;
|
|
127
|
-
transform-box: fill-box;
|
|
128
|
-
transition-timing-function: cubic-bezier(0.75, -0.5, 0, 1.25);
|
|
129
|
-
}
|
|
130
|
-
.menu ul {
|
|
131
|
-
min-width: max-content;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.bodyWrapper {
|
|
135
|
-
height: 300px;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.bodyWrapperLong {
|
|
139
|
-
height: 300px;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.bottom {
|
|
143
|
-
top: 100%;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.left {
|
|
147
|
-
left: 0;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
/* -------------------------------- */
|
|
151
|
-
.menuEnter {
|
|
152
|
-
opacity: 0;
|
|
153
|
-
height: 50px;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.menuEnterActive {
|
|
157
|
-
opacity: 1;
|
|
158
|
-
height: 300px;
|
|
159
|
-
transition: height 150ms ease-out;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.menuExit {
|
|
163
|
-
opacity: 1;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.menuExitActive {
|
|
167
|
-
opacity: 0;
|
|
168
|
-
height: 300px;
|
|
169
|
-
transition: height 150ms ease-out;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
/* -------------------------------- */
|
|
173
|
-
.menuEnterActiveLong {
|
|
174
|
-
opacity: 1;
|
|
175
|
-
height: 300px;
|
|
176
|
-
transition: height 150ms ease-out;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.menuExitActiveLong {
|
|
180
|
-
opacity: 0;
|
|
181
|
-
height: 300px;
|
|
182
|
-
transition: height 150ms ease-out;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.container {
|
|
186
|
-
display: flex;
|
|
187
|
-
align-items: center;
|
|
188
|
-
cursor: pointer;
|
|
189
|
-
user-select: none;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.label {
|
|
193
|
-
display: flex;
|
|
194
|
-
align-items: center;
|
|
195
|
-
position: relative;
|
|
196
|
-
}
|
|
197
|
-
.label span {
|
|
198
|
-
font-size: 12px;
|
|
199
|
-
font-weight: 400;
|
|
200
|
-
color: rgba(255, 255, 255, 0.6);
|
|
201
|
-
line-height: 1.2;
|
|
202
|
-
margin-left: 10px;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.checkmark {
|
|
206
|
-
height: 20px;
|
|
207
|
-
width: 20px;
|
|
208
|
-
border-radius: 6px;
|
|
209
|
-
background-color: #1D2649;
|
|
210
|
-
transition: background-color 0.25sn ease-out;
|
|
211
|
-
display: flex;
|
|
212
|
-
justify-content: center;
|
|
213
|
-
align-items: center;
|
|
214
|
-
}
|
|
215
|
-
.checkmark svg {
|
|
216
|
-
fill: #ffffff;
|
|
217
|
-
visibility: hidden;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.check {
|
|
221
|
-
background-color: #3396FB;
|
|
222
|
-
}
|
|
223
|
-
.check svg {
|
|
224
|
-
visibility: visible;
|
|
225
|
-
animation: bounce 0.5s;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
@keyframes bounce {
|
|
229
|
-
0% {
|
|
230
|
-
transform: scale(0.2) rotate(4deg);
|
|
231
|
-
}
|
|
232
|
-
50% {
|
|
233
|
-
transform: scale(1.2) rotate(-2deg);
|
|
234
|
-
}
|
|
235
|
-
75% {
|
|
236
|
-
transform: scale(0.9) rotate(1deg);
|
|
237
|
-
}
|
|
238
|
-
100% {
|
|
239
|
-
transform: scale(1) rotate(0deg);
|
|
240
|
-
}
|
|
241
|
-
}
|