@servicetitan/design-system 10.8.0 → 11.0.0
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/components/Backdrop/Backdrop.css +2 -21
- package/dist/components/Backdrop/Backdrop.css.map +1 -1
- package/dist/components/Backdrop/Backdrop.d.ts +5 -7
- package/dist/components/Backdrop/Backdrop.js +13 -44
- package/dist/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/components/Backdrop/index.css +2 -21
- package/dist/components/Backdrop/index.css.map +1 -1
- package/dist/components/Button/Button.d.ts +18 -18
- package/dist/components/DateRangePicker/DateRangePicker.d.ts +9 -0
- package/dist/components/DateRangePicker/DateRangePicker.js +9 -16
- package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.test.js +2 -2
- package/dist/components/DateRangePicker/DateRangePicker.test.js.map +1 -1
- package/dist/components/DateRangePicker/components/DateRangeInput.d.ts +6 -0
- package/dist/components/DateRangePicker/components/DateRangeInput.js +9 -4
- package/dist/components/DateRangePicker/components/DateRangeInput.js.map +1 -1
- package/dist/components/DateRangePicker/components/DateRangeTrigger.d.ts +6 -0
- package/dist/components/DateRangePicker/components/DateRangeTrigger.js +4 -5
- package/dist/components/DateRangePicker/components/DateRangeTrigger.js.map +1 -1
- package/dist/components/Dialog/Dialog.d.ts +7 -5
- package/dist/components/Dialog/Dialog.js +4 -9
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Drawer/Drawer.css +6 -1
- package/dist/components/Drawer/Drawer.css.map +1 -1
- package/dist/components/Drawer/Drawer.d.ts +16 -25
- package/dist/components/Drawer/Drawer.js +34 -24
- package/dist/components/Drawer/Drawer.js.map +1 -1
- package/dist/components/Drawer/index.css +6 -1
- package/dist/components/Drawer/index.css.map +1 -1
- package/dist/components/FilterButton/FilterButton.css +46 -0
- package/dist/components/FilterButton/FilterButton.css.map +1 -0
- package/dist/components/FilterButton/FilterButton.d.ts +20 -0
- package/dist/components/FilterButton/FilterButton.js +62 -0
- package/dist/components/FilterButton/FilterButton.js.map +1 -0
- package/dist/components/FilterButton/index.css +46 -0
- package/dist/components/FilterButton/index.css.map +1 -0
- package/dist/components/FilterButton/index.d.ts +1 -0
- package/dist/components/FilterButton/index.js +14 -0
- package/dist/components/FilterButton/index.js.map +1 -0
- package/dist/components/Input/Input.css +135 -201
- package/dist/components/Input/Input.css.map +1 -1
- package/dist/components/Input/Input.js +36 -60
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/index.css +135 -201
- package/dist/components/Input/index.css.map +1 -1
- package/dist/components/Modal/Modal.css +5 -2
- package/dist/components/Modal/Modal.css.map +1 -1
- package/dist/components/Modal/Modal.d.ts +9 -7
- package/dist/components/Modal/Modal.js +3 -3
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/components.d.ts +5 -6
- package/dist/components/Modal/components.js +34 -13
- package/dist/components/Modal/components.js.map +1 -1
- package/dist/components/Modal/index.css +5 -2
- package/dist/components/Modal/index.css.map +1 -1
- package/dist/components/Popover/Popover.d.ts +3 -3
- package/dist/components/Popover/Popover.js +3 -10
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.js +5 -2
- package/dist/components/Sidebar/Sidebar.js.map +1 -1
- package/dist/components/Table/Table.css +3 -0
- package/dist/components/Table/Table.css.map +1 -1
- package/dist/components/Table/index.css +3 -0
- package/dist/components/Table/index.css.map +1 -1
- package/dist/components/Takeover/Takeover.css +10 -0
- package/dist/components/Takeover/Takeover.css.map +1 -1
- package/dist/components/Takeover/Takeover.d.ts +11 -4
- package/dist/components/Takeover/Takeover.js +33 -12
- package/dist/components/Takeover/Takeover.js.map +1 -1
- package/dist/components/Takeover/TakeoverFooter.css +10 -0
- package/dist/components/Takeover/TakeoverFooter.css.map +1 -1
- package/dist/components/Takeover/TakeoverSection.css +10 -0
- package/dist/components/Takeover/TakeoverSection.css.map +1 -1
- package/dist/components/Takeover/index.css +10 -0
- package/dist/components/Takeover/index.css.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +1 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/index.css +205 -225
- package/dist/components/index.css.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/global/index.css +1 -1
- package/dist/global/version.css +1 -1
- package/dist/hooks/index.d.ts +0 -1
- package/dist/hooks/index.js +0 -1
- package/dist/hooks/index.js.map +1 -1
- package/dist/internal/Overlay/Overlay.css +18 -0
- package/dist/internal/Overlay/Overlay.css.map +1 -0
- package/dist/internal/Overlay/Overlay.d.ts +15 -0
- package/dist/internal/Overlay/Overlay.js +46 -0
- package/dist/internal/Overlay/Overlay.js.map +1 -0
- package/dist/internal/Overlay/index.css +18 -0
- package/dist/internal/Overlay/index.css.map +1 -0
- package/dist/internal/Overlay/index.d.ts +1 -0
- package/dist/internal/Overlay/index.js +14 -0
- package/dist/internal/Overlay/index.js.map +1 -0
- package/dist/internal/Popper/Popper.css +7 -0
- package/dist/internal/Popper/Popper.css.map +1 -1
- package/dist/internal/Popper/Popper.d.ts +3 -1
- package/dist/internal/Popper/Popper.js +20 -11
- package/dist/internal/Popper/Popper.js.map +1 -1
- package/dist/internal/Popper/index.css +7 -0
- package/dist/internal/Popper/index.css.map +1 -1
- package/dist/internal/index.css +24 -0
- package/dist/internal/index.css.map +1 -1
- package/dist/internal/index.d.ts +1 -0
- package/dist/internal/index.js +1 -0
- package/dist/internal/index.js.map +1 -1
- package/dist/system-light.css +137 -1
- package/dist/system-light.css.map +1 -1
- package/dist/system-light.min.css +1 -1
- package/dist/system.css +344 -234
- package/dist/system.css.map +1 -1
- package/dist/system.min.css +2 -2
- package/dist/utilities/FocusTrap/FocusTrap.d.ts +8 -0
- package/dist/utilities/FocusTrap/FocusTrap.js +73 -0
- package/dist/utilities/FocusTrap/FocusTrap.js.map +1 -0
- package/dist/utilities/FocusTrap/index.d.ts +1 -0
- package/dist/utilities/FocusTrap/index.js +14 -0
- package/dist/utilities/FocusTrap/index.js.map +1 -0
- package/dist/utilities/OverlayContext.js +2 -7
- package/dist/utilities/OverlayContext.js.map +1 -1
- package/dist/utilities/dateFormat.d.ts +10 -2
- package/dist/utilities/dateFormat.js +12 -10
- package/dist/utilities/dateFormat.js.map +1 -1
- package/dist/utilities/index.d.ts +1 -1
- package/dist/utilities/index.js +1 -1
- package/dist/utilities/index.js.map +1 -1
- package/package.json +9 -9
- package/dist/hooks/useFocusScope.d.ts +0 -16
- package/dist/hooks/useFocusScope.js +0 -89
- package/dist/hooks/useFocusScope.js.map +0 -1
- package/dist/utilities/focus-utils.d.ts +0 -4
- package/dist/utilities/focus-utils.js +0 -49
- package/dist/utilities/focus-utils.js.map +0 -1
|
@@ -64,38 +64,28 @@
|
|
|
64
64
|
|
|
65
65
|
/* Input variables are stored in Form.scss */
|
|
66
66
|
/* Paddings are set in em's for internal parts of .Input */
|
|
67
|
-
.Input.Input
|
|
68
|
-
.Input.Input--has-addon > .InputAddon:first-child,
|
|
69
|
-
.Input.Input--has-addon > .Dropdown:first-child,
|
|
70
|
-
.Input.Input--has-addon > .Button:first-child,
|
|
71
|
-
.Input.Input--has-addon > .ButtonGroup .Button:first-child, .Input.Input--has-action > input:first-child,
|
|
72
|
-
.Input.Input--has-action > .InputAddon:first-child,
|
|
73
|
-
.Input.Input--has-action > .Dropdown:first-child,
|
|
74
|
-
.Input.Input--has-action > .Button:first-child,
|
|
75
|
-
.Input.Input--has-action > .ButtonGroup .Button:first-child {
|
|
67
|
+
.Input.Input > .Input__InnerWrapper:first-child {
|
|
76
68
|
border-top-left-radius: 3px;
|
|
77
69
|
border-bottom-left-radius: 3px;
|
|
78
70
|
}
|
|
79
71
|
|
|
80
|
-
.Input.Input
|
|
81
|
-
.Input.Input--has-addon > .InputAddon:last-child,
|
|
82
|
-
.Input.Input--has-addon > .Dropdown:last-child,
|
|
83
|
-
.Input.Input--has-addon > .Button:last-child,
|
|
84
|
-
.Input.Input--has-addon > .ButtonGroup .Button:last-child, .Input.Input--has-action > input:last-child,
|
|
85
|
-
.Input.Input--has-action > .InputAddon:last-child,
|
|
86
|
-
.Input.Input--has-action > .Dropdown:last-child,
|
|
87
|
-
.Input.Input--has-action > .Button:last-child,
|
|
88
|
-
.Input.Input--has-action > .ButtonGroup .Button:last-child {
|
|
72
|
+
.Input.Input > .Input__InnerWrapper:last-child {
|
|
89
73
|
border-top-right-radius: 3px;
|
|
90
74
|
border-bottom-right-radius: 3px;
|
|
91
75
|
}
|
|
92
76
|
|
|
93
|
-
.Input.Input--
|
|
94
|
-
|
|
77
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Dropdown:last-child,
|
|
78
|
+
.Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button:last-child,
|
|
79
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Button:last-child {
|
|
80
|
+
border-top-left-radius: 0;
|
|
81
|
+
border-bottom-left-radius: 0;
|
|
95
82
|
}
|
|
96
83
|
|
|
97
|
-
.Input.Input--
|
|
98
|
-
|
|
84
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Dropdown:first-child,
|
|
85
|
+
.Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button:first-child,
|
|
86
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Button:first-child {
|
|
87
|
+
border-top-right-radius: 0;
|
|
88
|
+
border-bottom-right-radius: 0;
|
|
99
89
|
}
|
|
100
90
|
|
|
101
91
|
/*** Input styles ***/
|
|
@@ -112,18 +102,16 @@
|
|
|
112
102
|
background-color: #ffffff;
|
|
113
103
|
/* Sizes */
|
|
114
104
|
/*** States ***/
|
|
105
|
+
/* Readonly */
|
|
115
106
|
/* Disabled */
|
|
116
107
|
/* Focus */
|
|
117
108
|
/* Error */
|
|
118
109
|
/* Loading */
|
|
119
110
|
/*** Variations ***/
|
|
120
111
|
/* Transparent */
|
|
121
|
-
/* Transparent Icon */
|
|
122
112
|
/* Icon */
|
|
123
|
-
/*
|
|
124
|
-
|
|
125
|
-
/* Input.Addon */
|
|
126
|
-
/* Handling with duplicate borders */
|
|
113
|
+
/* Icon size in case it was not set explicitly */
|
|
114
|
+
/* Handling with rounded corners */
|
|
127
115
|
/* Action */
|
|
128
116
|
/* Fluid */
|
|
129
117
|
}
|
|
@@ -136,20 +124,37 @@
|
|
|
136
124
|
.Input, .Input.Input--small, .Input.Input--medium, .Input.Input--large {
|
|
137
125
|
font-size: 16px;
|
|
138
126
|
}
|
|
139
|
-
.Input.Input--
|
|
127
|
+
.Input input, .Input.Input--medium input {
|
|
128
|
+
padding: 0.4375em 0.6875em;
|
|
129
|
+
}
|
|
130
|
+
.Input.Input--xsmall input {
|
|
140
131
|
padding: 0.185em 0.7857142857em;
|
|
141
132
|
}
|
|
142
|
-
.Input.Input--small
|
|
133
|
+
.Input.Input--small input {
|
|
143
134
|
padding: 0.185em 0.6875em;
|
|
144
135
|
}
|
|
145
|
-
.Input.Input--
|
|
146
|
-
padding: 0.4375em 0.6875em;
|
|
147
|
-
}
|
|
148
|
-
.Input.Input--large > input {
|
|
136
|
+
.Input.Input--large input {
|
|
149
137
|
padding: 0.7em 0.6875em;
|
|
150
138
|
}
|
|
151
|
-
.Input >
|
|
152
|
-
|
|
139
|
+
.Input > .Input__InnerWrapper {
|
|
140
|
+
display: inline-flex;
|
|
141
|
+
flex: 1 1 auto;
|
|
142
|
+
margin: 0;
|
|
143
|
+
padding: 0;
|
|
144
|
+
max-width: 100%;
|
|
145
|
+
/* ... */
|
|
146
|
+
background-color: #ffffff;
|
|
147
|
+
border: 1px solid #dfe0e1;
|
|
148
|
+
color: #141414;
|
|
149
|
+
border-radius: 3px;
|
|
150
|
+
transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
|
|
151
|
+
box-shadow: none;
|
|
152
|
+
}
|
|
153
|
+
.Input > .Input__InnerWrapper > * {
|
|
154
|
+
flex: 0 0 auto;
|
|
155
|
+
}
|
|
156
|
+
.Input > .Input__InnerWrapper > input {
|
|
157
|
+
/* Disabling effects of bootstrap.css on .Input > input */
|
|
153
158
|
display: initial;
|
|
154
159
|
height: initial;
|
|
155
160
|
vertical-align: initial;
|
|
@@ -164,88 +169,85 @@
|
|
|
164
169
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
165
170
|
text-align: left;
|
|
166
171
|
line-height: 1.5;
|
|
167
|
-
padding: 0.4375em 0.6875em;
|
|
168
172
|
/* ... */
|
|
169
|
-
background-color:
|
|
170
|
-
border:
|
|
173
|
+
background-color: transparent;
|
|
174
|
+
border: none;
|
|
171
175
|
color: #141414;
|
|
172
|
-
border-radius: 3px;
|
|
173
176
|
transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
|
|
174
177
|
box-shadow: none;
|
|
175
178
|
/* Chrome autofill styling */
|
|
176
179
|
}
|
|
177
|
-
.Input > input[readonly] {
|
|
180
|
+
.Input > .Input__InnerWrapper > input[readonly] {
|
|
178
181
|
background-color: #f7f7f7;
|
|
179
182
|
}
|
|
180
|
-
.Input > input
|
|
181
|
-
color: rgba(20, 20, 20, 0.4);
|
|
182
|
-
}
|
|
183
|
-
.Input > input::placeholder {
|
|
183
|
+
.Input > .Input__InnerWrapper > input::placeholder {
|
|
184
184
|
color: rgba(20, 20, 20, 0.4);
|
|
185
185
|
}
|
|
186
|
-
.Input > input::-webkit-autofill {
|
|
186
|
+
.Input > .Input__InnerWrapper > input::-webkit-autofill {
|
|
187
187
|
box-shadow: 0 0 0 100px #fffff0 inset !important;
|
|
188
188
|
border-color: #e5dfa1 !important;
|
|
189
189
|
}
|
|
190
|
+
.Input.Input--readonly > .Input__InnerWrapper {
|
|
191
|
+
background-color: #f7f7f7;
|
|
192
|
+
}
|
|
190
193
|
.Input.Input--disabled, .Input:not(.Input--disabled) input[disabled] {
|
|
191
194
|
opacity: 0.6;
|
|
192
195
|
}
|
|
193
|
-
.Input.Input--disabled
|
|
196
|
+
.Input.Input--disabled *, .Input:not(.Input--disabled) input[disabled] * {
|
|
197
|
+
pointer-events: none;
|
|
198
|
+
}
|
|
199
|
+
.Input.Input--disabled input, .Input:not(.Input--disabled) input[disabled], .Input.Input--disabled .InputAddon {
|
|
194
200
|
background-color: #f7f7f7;
|
|
195
201
|
pointer-events: none;
|
|
196
202
|
}
|
|
197
|
-
.Input.Input--disabled
|
|
203
|
+
.Input.Input--disabled input::placeholder, .Input:not(.Input--disabled) input[disabled]::placeholder, .Input.Input--disabled .InputAddon::placeholder {
|
|
198
204
|
color: rgba(20, 20, 20, 0.4);
|
|
199
205
|
}
|
|
200
206
|
.Input:focus-within, .Input.Input--focus {
|
|
201
207
|
box-shadow: 0 0 0 3px #a9d1ff;
|
|
202
208
|
border-radius: 3px;
|
|
203
209
|
}
|
|
204
|
-
.Input:focus-within
|
|
210
|
+
.Input:focus-within > .Input__InnerWrapper, .Input.Input--focus > .Input__InnerWrapper {
|
|
205
211
|
background-color: #ffffff;
|
|
206
212
|
border-color: #2270ee;
|
|
213
|
+
}
|
|
214
|
+
.Input:focus-within > .Input__InnerWrapper > input, .Input.Input--focus > .Input__InnerWrapper > input {
|
|
207
215
|
color: #141414;
|
|
208
216
|
}
|
|
209
|
-
.Input:focus-within input::-webkit-autofill, .Input.Input--focus input::-webkit-autofill {
|
|
217
|
+
.Input:focus-within > .Input__InnerWrapper > input::-webkit-autofill, .Input.Input--focus > .Input__InnerWrapper > input::-webkit-autofill {
|
|
210
218
|
box-shadow: 0 0 0 100px #fffff0 inset !important;
|
|
211
219
|
border-color: #d5c315 !important;
|
|
212
220
|
}
|
|
213
|
-
.Input:focus-within.
|
|
214
|
-
border-color:
|
|
215
|
-
}
|
|
216
|
-
.Input:focus-within.Input--has-addon-right input, .Input:focus-within.Input--has-action-right input, .Input.Input--focus.Input--has-addon-right input, .Input.Input--focus.Input--has-action-right input {
|
|
217
|
-
border-right-color: transparent;
|
|
218
|
-
}
|
|
219
|
-
.Input:focus-within.Input--has-addon-left input, .Input:focus-within.Input--has-action-left input, .Input.Input--focus.Input--has-addon-left input, .Input.Input--focus.Input--has-action-left input {
|
|
220
|
-
border-left-color: transparent;
|
|
221
|
+
.Input:focus-within > .Input__InnerWrapper > .InputAddon, .Input.Input--focus > .Input__InnerWrapper > .InputAddon {
|
|
222
|
+
border-color: transparent;
|
|
221
223
|
}
|
|
222
224
|
.Input.Input--error {
|
|
223
225
|
/* Error Focus */
|
|
224
226
|
}
|
|
225
|
-
.Input.Input--error >
|
|
227
|
+
.Input.Input--error > .Input__InnerWrapper {
|
|
226
228
|
background-color: #ffece9;
|
|
227
229
|
border-color: #e63717;
|
|
230
|
+
}
|
|
231
|
+
.Input.Input--error > .Input__InnerWrapper > input {
|
|
228
232
|
color: #e63717;
|
|
229
233
|
box-shadow: none;
|
|
230
234
|
/* Error Placeholder */
|
|
231
235
|
/* Error */
|
|
232
236
|
}
|
|
233
|
-
.Input.Input--error > input::-webkit-input-placeholder {
|
|
237
|
+
.Input.Input--error > .Input__InnerWrapper > input::-webkit-input-placeholder {
|
|
234
238
|
color: rgba(230, 55, 23, 0.6);
|
|
235
239
|
}
|
|
236
|
-
.Input.Input--error > input::-moz-placeholder {
|
|
240
|
+
.Input.Input--error > .Input__InnerWrapper > input::-moz-placeholder {
|
|
237
241
|
color: rgba(230, 55, 23, 0.6);
|
|
238
242
|
}
|
|
239
|
-
.Input.Input--error > input:-ms-input-placeholder {
|
|
243
|
+
.Input.Input--error > .Input__InnerWrapper > input:-ms-input-placeholder {
|
|
240
244
|
color: rgba(230, 55, 23, 0.6);
|
|
241
245
|
}
|
|
242
|
-
.Input.Input--error > input::-webkit-autofill {
|
|
246
|
+
.Input.Input--error > .Input__InnerWrapper > input::-webkit-autofill {
|
|
243
247
|
box-shadow: 0 0 0 100px #ffece9 inset !important;
|
|
244
248
|
border-color: #e63717 !important;
|
|
245
249
|
}
|
|
246
|
-
.Input.Input--error.
|
|
247
|
-
background-color: #ffece9;
|
|
248
|
-
border-color: #e63717;
|
|
250
|
+
.Input.Input--error > .Input__InnerWrapper > .InputAddon {
|
|
249
251
|
color: #e63717;
|
|
250
252
|
}
|
|
251
253
|
.Input.Input--error:focus-within, .Input.Input--error.Input--focus {
|
|
@@ -254,207 +256,139 @@
|
|
|
254
256
|
.Input.Input--error:focus-within input, .Input.Input--error.Input--focus input {
|
|
255
257
|
border-color: #e63717;
|
|
256
258
|
}
|
|
257
|
-
.Input.Input--error:focus-within
|
|
259
|
+
.Input.Input--error:focus-within .InputAddon, .Input.Input--error.Input--focus .InputAddon {
|
|
258
260
|
border-color: #e63717;
|
|
259
261
|
}
|
|
260
|
-
.Input.Input--error.
|
|
262
|
+
.Input.Input--error .InputAddon > i.a-Icon {
|
|
261
263
|
color: #e63717;
|
|
262
264
|
}
|
|
263
|
-
.Input.Input--loading.Input--loading > input {
|
|
264
|
-
padding-right: 2.475em !important;
|
|
265
|
-
}
|
|
266
|
-
.Input.Input--loading.Input--loading.Input--xsmall > input {
|
|
267
|
-
padding-right: 2.3375em !important;
|
|
268
|
-
}
|
|
269
265
|
.Input.Input--loading.Input--loading .Spinner {
|
|
270
|
-
position: absolute;
|
|
271
266
|
line-height: 1;
|
|
272
267
|
text-align: center;
|
|
273
|
-
top: 0;
|
|
274
|
-
right: 8px;
|
|
275
|
-
margin: 0;
|
|
276
268
|
height: 100%;
|
|
277
|
-
/* ... */
|
|
278
269
|
width: 1.1em;
|
|
279
270
|
}
|
|
280
|
-
.Input.Input--transparent
|
|
271
|
+
.Input.Input--transparent input {
|
|
281
272
|
border-color: transparent !important;
|
|
282
273
|
background-color: transparent !important;
|
|
283
274
|
padding: 0 !important;
|
|
284
275
|
box-shadow: none !important;
|
|
285
276
|
border-radius: 0 !important;
|
|
286
277
|
}
|
|
287
|
-
.Input
|
|
288
|
-
width: 1.1em;
|
|
289
|
-
}
|
|
290
|
-
.Input.Input--transparent.Input--has-icon > input {
|
|
291
|
-
padding-left: 0 !important;
|
|
292
|
-
padding-right: 2em !important;
|
|
293
|
-
}
|
|
294
|
-
.Input.Input--transparent[class*="left icon"] > input {
|
|
295
|
-
padding-left: 2em !important;
|
|
296
|
-
padding-right: 0 !important;
|
|
297
|
-
}
|
|
298
|
-
.Input.Input > i.a-Icon {
|
|
299
|
-
pointer-events: none;
|
|
300
|
-
}
|
|
301
|
-
.Input.Input--has-icon {
|
|
302
|
-
/* Respecting large icon width */
|
|
303
|
-
}
|
|
304
|
-
.Input.Input--has-icon > i.a-Icon {
|
|
278
|
+
.Input > .Input__InnerWrapper i.a-Icon {
|
|
305
279
|
cursor: default;
|
|
306
|
-
position: absolute;
|
|
307
|
-
line-height: 1;
|
|
308
|
-
text-align: center;
|
|
309
|
-
top: 0;
|
|
310
|
-
right: 0;
|
|
311
|
-
margin: 0;
|
|
312
|
-
height: 100%;
|
|
313
280
|
color: #737475;
|
|
314
|
-
|
|
315
|
-
border-radius: 0 3px 3px 0;
|
|
281
|
+
pointer-events: none;
|
|
316
282
|
transition: opacity 0.3s ease;
|
|
283
|
+
line-height: inherit;
|
|
317
284
|
}
|
|
318
|
-
.Input.
|
|
319
|
-
padding-right: 2.475em;
|
|
320
|
-
}
|
|
321
|
-
.Input.Input--has-icon.Input--large > input {
|
|
322
|
-
padding-right: 3.09375em;
|
|
323
|
-
}
|
|
324
|
-
.Input.Input--has-icon.Input--large > i.a-Icon {
|
|
325
|
-
width: 3.09375em;
|
|
326
|
-
}
|
|
327
|
-
.Input.Input--has-icon.Input--large.Input--has-icon-left > input {
|
|
328
|
-
padding-left: 3.09375em !important;
|
|
329
|
-
padding-right: 0.6875em !important;
|
|
330
|
-
}
|
|
331
|
-
.Input.Input--has-icon > i.a-Icon svg {
|
|
285
|
+
.Input > .Input__InnerWrapper i.a-Icon svg {
|
|
332
286
|
font-size: inherit;
|
|
333
|
-
left: 0;
|
|
334
|
-
position: absolute;
|
|
335
287
|
text-align: center;
|
|
336
|
-
|
|
337
|
-
transform: translateY(-50%);
|
|
338
|
-
width: 100%;
|
|
339
|
-
}
|
|
340
|
-
.Input.Input--has-icon-left > i.a-Icon {
|
|
341
|
-
right: auto;
|
|
342
|
-
left: 1px;
|
|
343
|
-
border-radius: 3px 0 0 3px;
|
|
344
|
-
}
|
|
345
|
-
.Input.Input--has-icon-left > input {
|
|
346
|
-
padding-left: 2.475em !important;
|
|
347
|
-
padding-right: 0.6875em !important;
|
|
348
|
-
}
|
|
349
|
-
.Input.Input--has-addon {
|
|
350
|
-
/* ... */
|
|
351
|
-
/* Proper Icon size in case it was not set explicitly */
|
|
288
|
+
vertical-align: middle;
|
|
352
289
|
}
|
|
353
|
-
.Input.
|
|
290
|
+
.Input > .Input__InnerWrapper > .InputAddon {
|
|
354
291
|
flex: 0 0 auto;
|
|
355
292
|
margin: 0;
|
|
356
293
|
font-size: 16px;
|
|
357
294
|
z-index: 0;
|
|
358
295
|
/* Differ from Semantic UI */
|
|
359
296
|
color: #737475;
|
|
360
|
-
border: 1px solid #dfe0e1;
|
|
361
|
-
border-radius: 3px;
|
|
362
297
|
height: auto;
|
|
363
298
|
display: flex;
|
|
364
299
|
align-items: center;
|
|
365
300
|
transition: color 0.1s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
366
|
-
padding: 0.4375em 0.6875em;
|
|
367
301
|
}
|
|
368
|
-
.Input.Input--
|
|
369
|
-
|
|
370
|
-
font-size: 14px;
|
|
371
|
-
}
|
|
372
|
-
.Input.Input--has-addon.Input--small > .InputAddon {
|
|
373
|
-
padding: 0.185em 0.6875em;
|
|
374
|
-
}
|
|
375
|
-
.Input.Input--has-addon.Input--medium > .InputAddon {
|
|
376
|
-
padding: 0.4375em 0.6875em;
|
|
377
|
-
}
|
|
378
|
-
.Input.Input--has-addon.Input--large > .InputAddon {
|
|
379
|
-
padding: 0.7em 0.6875em;
|
|
380
|
-
}
|
|
381
|
-
.Input.Input--has-addon.Input--has-addon-left > .InputAddon {
|
|
382
|
-
padding-right: 0;
|
|
383
|
-
}
|
|
384
|
-
.Input.Input--has-addon.Input--has-addon-right > .InputAddon {
|
|
385
|
-
padding-left: 0;
|
|
302
|
+
.Input.Input--xsmall > .Input__InnerWrapper > .InputAddon .a-Icon {
|
|
303
|
+
font-size: 16px;
|
|
386
304
|
}
|
|
387
|
-
.Input.Input--
|
|
388
|
-
|
|
305
|
+
.Input.Input--small > .Input__InnerWrapper > .InputAddon .a-Icon {
|
|
306
|
+
font-size: 20px;
|
|
389
307
|
}
|
|
390
|
-
.Input.Input--
|
|
391
|
-
|
|
308
|
+
.Input.Input--medium > .Input__InnerWrapper > .InputAddon .a-Icon {
|
|
309
|
+
font-size: 20px;
|
|
392
310
|
}
|
|
393
|
-
.Input.Input--
|
|
394
|
-
font-size:
|
|
311
|
+
.Input.Input--large > .Input__InnerWrapper > .InputAddon .a-Icon {
|
|
312
|
+
font-size: 24px;
|
|
395
313
|
}
|
|
396
|
-
.Input.Input--
|
|
314
|
+
.Input.Input--xsmall > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
|
|
397
315
|
margin: 0 -2px;
|
|
398
316
|
}
|
|
399
|
-
.Input.Input--
|
|
400
|
-
|
|
401
|
-
}
|
|
402
|
-
.Input.Input--has-addon.Input--small > .InputAddon .a-Icon > svg, .Input.Input--has-addon.Input--medium > .InputAddon .a-Icon > svg {
|
|
403
|
-
margin: -2px 0;
|
|
317
|
+
.Input.Input--small > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
|
|
318
|
+
margin: 0;
|
|
404
319
|
}
|
|
405
|
-
.Input.Input--
|
|
406
|
-
|
|
320
|
+
.Input.Input--medium > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
|
|
321
|
+
margin: 0;
|
|
407
322
|
}
|
|
408
|
-
.Input.Input--
|
|
323
|
+
.Input.Input--large > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
|
|
409
324
|
margin: -6px 0;
|
|
410
325
|
}
|
|
411
|
-
.Input.Input--
|
|
326
|
+
.Input.Input--xsmall > .Input__InnerWrapper > .InputAddon *:not(input) {
|
|
412
327
|
line-height: 12px;
|
|
413
328
|
}
|
|
414
|
-
.Input.Input--
|
|
329
|
+
.Input.Input--small > .Input__InnerWrapper > .InputAddon *:not(input) {
|
|
415
330
|
line-height: 16px;
|
|
416
331
|
}
|
|
417
|
-
.Input.Input--
|
|
332
|
+
.Input.Input--medium > .Input__InnerWrapper > .InputAddon *:not(input) {
|
|
418
333
|
line-height: 16px;
|
|
419
334
|
}
|
|
420
|
-
.Input.Input--
|
|
335
|
+
.Input.Input--large > .Input__InnerWrapper > .InputAddon *:not(input) {
|
|
421
336
|
line-height: 20px;
|
|
422
337
|
}
|
|
423
|
-
.Input.Input--
|
|
424
|
-
|
|
338
|
+
.Input.Input--xsmall > .Input__InnerWrapper > .InputAddon {
|
|
339
|
+
padding: 0.185em 0.7857142857em;
|
|
340
|
+
font-size: 14px;
|
|
341
|
+
}
|
|
342
|
+
.Input.Input--small > .Input__InnerWrapper > .InputAddon {
|
|
343
|
+
padding: 0.185em 0.6875em;
|
|
344
|
+
}
|
|
345
|
+
.Input.Input--medium > .Input__InnerWrapper > .InputAddon {
|
|
346
|
+
padding: 0.4375em 0.6875em;
|
|
347
|
+
}
|
|
348
|
+
.Input.Input--large > .Input__InnerWrapper > .InputAddon {
|
|
349
|
+
padding: 0.7em 0.6875em;
|
|
350
|
+
}
|
|
351
|
+
.Input.Input > .Input__InnerWrapper > input + .InputAddon, .Input.Input > .Input__InnerWrapper > .InputAddon + input, .Input.Input > .Input__InnerWrapper > .InputAddon + .InputAddon {
|
|
352
|
+
padding-left: 0;
|
|
425
353
|
}
|
|
426
|
-
.Input.Input
|
|
427
|
-
border-left-width: 1px;
|
|
428
|
-
}
|
|
429
|
-
.Input.Input--has-addon:not(.Input--has-addon-right):not(.Input--has-action-right) > input, .Input.Input--has-action:not(.Input--has-addon-right):not(.Input--has-action-right) > input {
|
|
430
|
-
border-right-width: 1px;
|
|
431
|
-
}
|
|
432
|
-
.Input.Input--has-addon > input,
|
|
433
|
-
.Input.Input--has-addon > .InputAddon,
|
|
434
|
-
.Input.Input--has-addon > .Dropdown,
|
|
435
|
-
.Input.Input--has-addon > .Button,
|
|
436
|
-
.Input.Input--has-addon > .ButtonGroup .Button, .Input.Input--has-action > input,
|
|
437
|
-
.Input.Input--has-action > .InputAddon,
|
|
438
|
-
.Input.Input--has-action > .Dropdown,
|
|
439
|
-
.Input.Input--has-action > .Button,
|
|
440
|
-
.Input.Input--has-action > .ButtonGroup .Button {
|
|
354
|
+
.Input.Input > .Input__InnerWrapper {
|
|
441
355
|
border-radius: 0;
|
|
442
356
|
}
|
|
443
|
-
.Input.Input--
|
|
357
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Dropdown,
|
|
358
|
+
.Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button,
|
|
359
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Button {
|
|
360
|
+
margin-top: -1px;
|
|
361
|
+
margin-bottom: -1px;
|
|
362
|
+
}
|
|
363
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Dropdown:first-child,
|
|
364
|
+
.Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button:first-child,
|
|
365
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Button:first-child {
|
|
366
|
+
margin-left: -1px;
|
|
367
|
+
}
|
|
368
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Dropdown:last-child,
|
|
369
|
+
.Input.Input--with-children > .Input__InnerWrapper > .ButtonGroup .Button:last-child,
|
|
370
|
+
.Input.Input--with-children > .Input__InnerWrapper > .Button:last-child {
|
|
371
|
+
margin-right: -1px;
|
|
372
|
+
}
|
|
373
|
+
.Input > .Button,
|
|
374
|
+
.Input > .ButtonGroup {
|
|
444
375
|
display: flex;
|
|
445
376
|
align-items: center;
|
|
446
377
|
flex: 0 0 auto;
|
|
447
|
-
}
|
|
448
|
-
.Input.Input--has-action > .Button,
|
|
449
|
-
.Input.Input--has-action > .ButtonGroup > .Button {
|
|
450
378
|
margin: 0;
|
|
451
379
|
}
|
|
452
380
|
.Input.Input--fluid {
|
|
453
381
|
display: flex;
|
|
454
382
|
}
|
|
455
|
-
.Input.Input--fluid
|
|
383
|
+
.Input.Input--fluid input {
|
|
456
384
|
width: 100%;
|
|
457
385
|
}
|
|
386
|
+
.Input:not(.Input--with-children) > .Button.Button--outline:first-child {
|
|
387
|
+
margin-right: -1px;
|
|
388
|
+
}
|
|
389
|
+
.Input:not(.Input--with-children) > .Button.Button--outline:last-child {
|
|
390
|
+
margin-left: -1px;
|
|
391
|
+
}
|
|
458
392
|
|
|
459
393
|
@keyframes button-spin {
|
|
460
394
|
from {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Input/Input.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCec;EDdd,cCkBc;EDjBd,OCiBc;EDhBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCOc;EDNd,cCUc;EDTd,OCSc;EDRd;EACA;;;AE7EF;AAGA;AAqBA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Input/Input.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss"],"names":[],"mappings":"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","file":"Input.css"}
|