@vuetify/nightly 3.8.1-master.2025-04-16 → 3.8.1-next.2025-04-15

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.
Files changed (217) hide show
  1. package/CHANGELOG.md +33 -32
  2. package/dist/json/attributes.json +653 -653
  3. package/dist/json/importMap-labs.json +16 -16
  4. package/dist/json/importMap.json +182 -182
  5. package/dist/json/web-types.json +1133 -1093
  6. package/dist/vuetify-labs.cjs +346 -197
  7. package/dist/vuetify-labs.css +26038 -27768
  8. package/dist/vuetify-labs.d.ts +244 -647
  9. package/dist/vuetify-labs.esm.js +347 -198
  10. package/dist/vuetify-labs.esm.js.map +1 -1
  11. package/dist/vuetify-labs.js +346 -197
  12. package/dist/vuetify-labs.min.css +3 -4
  13. package/dist/vuetify.cjs +328 -173
  14. package/dist/vuetify.cjs.map +1 -1
  15. package/dist/vuetify.css +22491 -24217
  16. package/dist/vuetify.d.ts +316 -719
  17. package/dist/vuetify.esm.js +329 -174
  18. package/dist/vuetify.esm.js.map +1 -1
  19. package/dist/vuetify.js +328 -173
  20. package/dist/vuetify.js.map +1 -1
  21. package/dist/vuetify.min.css +3 -4
  22. package/dist/vuetify.min.js +1152 -1161
  23. package/dist/vuetify.min.js.map +1 -1
  24. package/lib/blueprints/md3.js +5 -18
  25. package/lib/blueprints/md3.js.map +1 -1
  26. package/lib/components/VAlert/VAlert.css +207 -215
  27. package/lib/components/VApp/VApp.css +16 -15
  28. package/lib/components/VAppBar/VAppBar.css +14 -12
  29. package/lib/components/VAutocomplete/VAutocomplete.css +85 -84
  30. package/lib/components/VAutocomplete/VAutocomplete.d.ts +18 -9
  31. package/lib/components/VAutocomplete/VAutocomplete.js +6 -3
  32. package/lib/components/VAutocomplete/VAutocomplete.js.map +1 -1
  33. package/lib/components/VAvatar/VAvatar.css +108 -106
  34. package/lib/components/VBadge/VBadge.css +77 -77
  35. package/lib/components/VBanner/VBanner.css +161 -166
  36. package/lib/components/VBottomNavigation/VBottomNavigation.css +65 -64
  37. package/lib/components/VBottomSheet/VBottomSheet.css +34 -31
  38. package/lib/components/VBreadcrumbs/VBreadcrumbs.css +54 -57
  39. package/lib/components/VBtn/VBtn.css +385 -408
  40. package/lib/components/VBtn/VBtn.sass +4 -4
  41. package/lib/components/VBtnGroup/VBtnGroup.css +63 -64
  42. package/lib/components/VBtnToggle/VBtnToggle.css +16 -14
  43. package/lib/components/VCard/VCard.css +294 -302
  44. package/lib/components/VCarousel/VCarousel.css +63 -65
  45. package/lib/components/VCarousel/VCarousel.sass +1 -1
  46. package/lib/components/VCheckbox/VCheckbox.css +7 -5
  47. package/lib/components/VChip/VChip.css +378 -411
  48. package/lib/components/VChipGroup/VChipGroup.css +19 -18
  49. package/lib/components/VCode/VCode.css +10 -11
  50. package/lib/components/VCode/VCode.sass +0 -3
  51. package/lib/components/VColorPicker/VColorPicker.css +23 -23
  52. package/lib/components/VColorPicker/VColorPickerCanvas.css +24 -22
  53. package/lib/components/VColorPicker/VColorPickerEdit.css +29 -28
  54. package/lib/components/VColorPicker/VColorPickerPreview.css +69 -67
  55. package/lib/components/VColorPicker/VColorPickerPreview.sass +4 -2
  56. package/lib/components/VColorPicker/VColorPickerSwatches.css +34 -34
  57. package/lib/components/VCombobox/VCombobox.css +85 -84
  58. package/lib/components/VCombobox/VCombobox.d.ts +18 -9
  59. package/lib/components/VCombobox/VCombobox.js +6 -3
  60. package/lib/components/VCombobox/VCombobox.js.map +1 -1
  61. package/lib/components/VCounter/VCounter.css +7 -5
  62. package/lib/components/VDataTable/VDataTable.css +189 -186
  63. package/lib/components/VDataTable/VDataTable.sass +21 -11
  64. package/lib/components/VDataTable/VDataTableFooter.css +33 -31
  65. package/lib/components/VDatePicker/VDatePicker.css +8 -6
  66. package/lib/components/VDatePicker/VDatePicker.d.ts +7 -7
  67. package/lib/components/VDatePicker/VDatePickerControls.css +55 -57
  68. package/lib/components/VDatePicker/VDatePickerHeader.css +56 -60
  69. package/lib/components/VDatePicker/VDatePickerMonth.css +51 -55
  70. package/lib/components/VDatePicker/VDatePickerMonth.d.ts +7 -7
  71. package/lib/components/VDatePicker/VDatePickerMonths.css +20 -19
  72. package/lib/components/VDatePicker/VDatePickerYears.css +16 -15
  73. package/lib/components/VDialog/VDialog.css +98 -98
  74. package/lib/components/VDivider/VDivider.css +52 -52
  75. package/lib/components/VEmptyState/VEmptyState.css +62 -67
  76. package/lib/components/VExpansionPanel/VExpansionPanel.css +203 -209
  77. package/lib/components/VExpansionPanel/VExpansionPanel.sass +27 -25
  78. package/lib/components/VFab/VFab.css +78 -73
  79. package/lib/components/VFab/VFab.sass +5 -4
  80. package/lib/components/VField/VField.css +548 -589
  81. package/lib/components/VFileInput/VFileInput.css +30 -28
  82. package/lib/components/VFooter/VFooter.css +38 -36
  83. package/lib/components/VForm/VForm.d.ts +111 -531
  84. package/lib/components/VForm/VForm.js +11 -1
  85. package/lib/components/VForm/VForm.js.map +1 -1
  86. package/lib/components/VGrid/VGrid.css +565 -592
  87. package/lib/components/VIcon/VIcon.css +52 -53
  88. package/lib/components/VImg/VImg.css +50 -51
  89. package/lib/components/VInfiniteScroll/VInfiniteScroll.css +36 -37
  90. package/lib/components/VInput/VInput.css +136 -147
  91. package/lib/components/VItemGroup/VItemGroup.css +7 -5
  92. package/lib/components/VKbd/VKbd.css +13 -11
  93. package/lib/components/VLabel/VLabel.css +16 -15
  94. package/lib/components/VLayout/VLayout.css +10 -8
  95. package/lib/components/VLayout/VLayoutItem.css +8 -7
  96. package/lib/components/VList/VList.css +104 -108
  97. package/lib/components/VList/VList.sass +1 -1
  98. package/lib/components/VList/VListItem.css +440 -452
  99. package/lib/components/VList/VListItem.sass +2 -1
  100. package/lib/components/VLocaleProvider/VLocaleProvider.css +4 -2
  101. package/lib/components/VMain/VMain.css +32 -30
  102. package/lib/components/VMenu/VMenu.css +21 -19
  103. package/lib/components/VMessages/VMessages.css +17 -15
  104. package/lib/components/VNavigationDrawer/VNavigationDrawer.css +102 -104
  105. package/lib/components/VNumberInput/VNumberInput.css +48 -46
  106. package/lib/components/VOtpInput/VOtpInput.css +56 -58
  107. package/lib/components/VOverlay/VOverlay.css +61 -64
  108. package/lib/components/VOverlay/VOverlay.sass +14 -13
  109. package/lib/components/VPagination/VPagination.css +10 -8
  110. package/lib/components/VParallax/VParallax.css +8 -6
  111. package/lib/components/VProgressCircular/VProgressCircular.css +95 -101
  112. package/lib/components/VProgressLinear/VProgressLinear.css +209 -222
  113. package/lib/components/VRadioGroup/VRadioGroup.css +14 -12
  114. package/lib/components/VRating/VRating.css +52 -53
  115. package/lib/components/VResponsive/VResponsive.css +25 -26
  116. package/lib/components/VSelect/VSelect.css +53 -51
  117. package/lib/components/VSelect/VSelect.d.ts +18 -9
  118. package/lib/components/VSelect/VSelect.js +6 -3
  119. package/lib/components/VSelect/VSelect.js.map +1 -1
  120. package/lib/components/VSelectionControl/VSelectionControl.css +98 -100
  121. package/lib/components/VSelectionControlGroup/VSelectionControlGroup.css +10 -8
  122. package/lib/components/VSheet/VSheet.css +38 -36
  123. package/lib/components/VSkeletonLoader/VSkeletonLoader.css +225 -224
  124. package/lib/components/VSlideGroup/VSlideGroup.css +53 -55
  125. package/lib/components/VSlider/VSlider.css +53 -57
  126. package/lib/components/VSlider/VSliderThumb.css +142 -153
  127. package/lib/components/VSlider/VSliderTrack.css +155 -174
  128. package/lib/components/VSnackbar/VSnackbar.css +140 -140
  129. package/lib/components/VSpeedDial/VSpeedDial.css +43 -41
  130. package/lib/components/VStepper/VStepper.css +55 -56
  131. package/lib/components/VStepper/VStepperItem.css +112 -115
  132. package/lib/components/VSwitch/VSwitch.css +129 -139
  133. package/lib/components/VSystemBar/VSystemBar.css +45 -43
  134. package/lib/components/VTable/VTable.css +140 -141
  135. package/lib/components/VTable/VTable.sass +4 -2
  136. package/lib/components/VTabs/VTab.css +30 -29
  137. package/lib/components/VTabs/VTabs.css +59 -65
  138. package/lib/components/VTextField/VTextField.css +77 -85
  139. package/lib/components/VTextarea/VTextarea.css +48 -40
  140. package/lib/components/VTextarea/VTextarea.sass +4 -2
  141. package/lib/components/VThemeProvider/VThemeProvider.css +5 -3
  142. package/lib/components/VTimeline/VTimeline.css +388 -427
  143. package/lib/components/VToolbar/VToolbar.css +137 -144
  144. package/lib/components/VTooltip/VTooltip.css +27 -23
  145. package/lib/components/VTooltip/VTooltip.sass +8 -6
  146. package/lib/components/VVirtualScroll/VVirtualScroll.css +11 -9
  147. package/lib/components/VWindow/VWindow.css +73 -70
  148. package/lib/composables/calendar.d.ts +2 -2
  149. package/lib/composables/calendar.js +7 -5
  150. package/lib/composables/calendar.js.map +1 -1
  151. package/lib/composables/date/DateAdapter.d.ts +0 -1
  152. package/lib/composables/date/DateAdapter.js.map +1 -1
  153. package/lib/composables/date/adapters/vuetify.d.ts +0 -1
  154. package/lib/composables/date/adapters/vuetify.js +160 -101
  155. package/lib/composables/date/adapters/vuetify.js.map +1 -1
  156. package/lib/composables/date/date.d.ts +1 -1
  157. package/lib/composables/date/date.js +20 -0
  158. package/lib/composables/date/date.js.map +1 -1
  159. package/lib/composables/filter.js +1 -2
  160. package/lib/composables/filter.js.map +1 -1
  161. package/lib/composables/theme.d.ts +6 -1
  162. package/lib/composables/theme.js +98 -30
  163. package/lib/composables/theme.js.map +1 -1
  164. package/lib/composables/validation.js +0 -5
  165. package/lib/composables/validation.js.map +1 -1
  166. package/lib/composables/virtual.js +6 -1
  167. package/lib/composables/virtual.js.map +1 -1
  168. package/lib/directives/ripple/VRipple.css +38 -36
  169. package/lib/entry-bundler.d.ts +0 -1
  170. package/lib/entry-bundler.js +1 -1
  171. package/lib/entry-bundler.js.map +1 -1
  172. package/lib/framework.d.ts +71 -69
  173. package/lib/framework.js +1 -1
  174. package/lib/framework.js.map +1 -1
  175. package/lib/labs/VCalendar/VCalendar.css +219 -225
  176. package/lib/labs/VCalendar/VCalendar.d.ts +7 -7
  177. package/lib/labs/VCalendar/VCalendarDay.css +33 -32
  178. package/lib/labs/VCalendar/VCalendarHeader.css +13 -13
  179. package/lib/labs/VCalendar/VCalendarInterval.css +43 -42
  180. package/lib/labs/VCalendar/VCalendarInterval.js +19 -25
  181. package/lib/labs/VCalendar/VCalendarInterval.js.map +1 -1
  182. package/lib/labs/VCalendar/VCalendarIntervalEvent.css +7 -5
  183. package/lib/labs/VCalendar/VCalendarMonthDay.css +61 -58
  184. package/lib/labs/VCalendar/VCalendarMonthDay.sass +3 -2
  185. package/lib/labs/VDateInput/VDateInput.d.ts +7 -7
  186. package/lib/labs/VFileUpload/VFileUpload.css +74 -77
  187. package/lib/labs/VIconBtn/VIconBtn.css +162 -164
  188. package/lib/labs/VPicker/VPicker.css +58 -63
  189. package/lib/labs/VTimePicker/VTimePicker.css +9 -7
  190. package/lib/labs/VTimePicker/VTimePickerClock.css +126 -129
  191. package/lib/labs/VTimePicker/VTimePickerControls.css +102 -103
  192. package/lib/labs/VTreeview/VTreeviewItem.css +30 -28
  193. package/lib/labs/VTreeview/VTreeviewItem.sass +3 -2
  194. package/lib/labs/entry-bundler.d.ts +0 -1
  195. package/lib/styles/elements/_global.sass +1 -1
  196. package/lib/styles/generic/_colors.scss +3 -3
  197. package/lib/styles/generic/_layers.scss +13 -1
  198. package/lib/styles/generic/_reset.scss +0 -1
  199. package/lib/styles/generic/_transitions.scss +32 -32
  200. package/lib/styles/main.css +14668 -16143
  201. package/lib/styles/settings/_utilities.scss +0 -5
  202. package/lib/styles/settings/_variables.scss +1 -2
  203. package/lib/styles/tools/_border.sass +4 -4
  204. package/lib/styles/tools/_display.sass +0 -10
  205. package/lib/styles/tools/_elevation.sass +2 -2
  206. package/lib/styles/tools/_index.sass +0 -2
  207. package/lib/styles/tools/_layer.scss +4 -2
  208. package/lib/styles/tools/_position.sass +2 -2
  209. package/lib/styles/tools/_rounded.sass +2 -2
  210. package/lib/styles/tools/_utilities.sass +1 -5
  211. package/lib/styles/utilities/_elevation.scss +1 -1
  212. package/lib/util/globals.d.ts +1 -0
  213. package/lib/util/globals.js +1 -0
  214. package/lib/util/globals.js.map +1 -1
  215. package/package.json +45 -46
  216. package/lib/styles/tools/_bootable.sass +0 -3
  217. package/lib/styles/tools/_radius.sass +0 -10
@@ -1,594 +1,553 @@
1
- /* region INPUT */
2
- .v-field {
3
- display: grid;
4
- grid-template-areas: "prepend-inner field clear append-inner";
5
- grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
6
- font-size: 16px;
7
- letter-spacing: 0.009375em;
8
- max-width: 100%;
9
- border-radius: 4px;
10
- contain: layout;
11
- flex: 1 0;
12
- grid-area: control;
13
- position: relative;
14
- --v-theme-overlay-multiplier: 1;
15
- --v-field-padding-start: 16px;
16
- --v-field-padding-end: 16px;
17
- --v-field-padding-top: 8px;
18
- --v-field-padding-bottom: 4px;
19
- --v-field-input-padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0px));
20
- --v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
21
- }
22
- .v-field--disabled {
23
- opacity: var(--v-disabled-opacity);
24
- pointer-events: none;
25
- }
26
- .v-field .v-chip {
27
- --v-chip-height: 24px;
28
- }
29
-
30
- /* endregion */
31
- /* region MODIFIERS */
32
- .v-field--prepended {
33
- padding-inline-start: 12px;
34
- }
35
- .v-field--appended {
36
- padding-inline-end: 12px;
37
- }
38
- .v-field--variant-solo, .v-field--variant-solo-filled {
39
- background: rgb(var(--v-theme-surface));
40
- border-color: transparent;
41
- color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
42
- }
43
- .v-field--variant-solo, .v-field--variant-solo-filled {
44
- box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
45
- }
46
- .v-field--variant-solo-inverted {
47
- background: rgb(var(--v-theme-surface));
48
- border-color: transparent;
49
- color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
50
- }
51
- .v-field--variant-solo-inverted {
52
- box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
53
- }
54
- .v-field--variant-solo-inverted.v-field--focused {
55
- color: rgb(var(--v-theme-on-surface-variant));
56
- }
57
- .v-field--variant-filled {
58
- border-bottom-left-radius: 0;
59
- border-bottom-right-radius: 0;
60
- }
61
- .v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
62
- --v-input-control-height: 56px;
63
- --v-field-padding-bottom: 4px;
64
- }
65
-
66
- .v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
67
- --v-input-control-height: 48px;
68
- --v-field-padding-bottom: 0px;
69
- }
70
-
71
- .v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
72
- --v-input-control-height: 40px;
73
- --v-field-padding-bottom: 0px;
74
- }
75
-
76
- .v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
77
- --v-field-padding-top: 0px;
78
- }
79
- .v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
80
- --v-field-padding-bottom: 16px;
81
- }
82
-
83
- .v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
84
- --v-field-padding-bottom: 12px;
85
- }
86
-
87
- .v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
88
- --v-field-padding-bottom: 8px;
89
- }
90
-
91
- .v-field--variant-plain, .v-field--variant-underlined {
92
- border-radius: 0;
93
- padding: 0;
94
- }
95
- .v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
96
- --v-field-padding-start: 0px;
97
- --v-field-padding-end: 0px;
98
- }
99
- .v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
100
- --v-input-control-height: 48px;
101
- --v-field-padding-top: 4px;
102
- --v-field-padding-bottom: 4px;
103
- }
104
-
105
- .v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
106
- --v-input-control-height: 40px;
107
- --v-field-padding-top: 2px;
108
- --v-field-padding-bottom: 0px;
109
- }
110
-
111
- .v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
112
- --v-input-control-height: 32px;
113
- --v-field-padding-top: 0px;
114
- --v-field-padding-bottom: 0px;
115
- }
116
-
117
- .v-field--flat {
118
- box-shadow: none;
119
- }
120
- .v-field--rounded {
121
- border-radius: 24px;
122
- }
123
- .v-field.v-field--prepended {
124
- --v-field-padding-start: 6px;
125
- }
126
- .v-field.v-field--appended {
127
- --v-field-padding-end: 6px;
128
- }
129
-
130
- /* endregion */
131
- /* region ELEMENTS */
132
- .v-field__input {
133
- align-items: center;
134
- color: inherit;
135
- column-gap: 2px;
136
- display: flex;
137
- flex-wrap: wrap;
138
- letter-spacing: 0.009375em;
139
- opacity: var(--v-high-emphasis-opacity);
140
- min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
141
- min-width: 0;
142
- padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
143
- padding-top: var(--v-field-input-padding-top);
144
- padding-bottom: var(--v-field-input-padding-bottom);
145
- position: relative;
146
- width: 100%;
147
- }
148
- .v-input--density-default .v-field__input {
149
- row-gap: 8px;
150
- }
151
-
152
- .v-input--density-comfortable .v-field__input {
153
- row-gap: 6px;
154
- }
155
-
156
- .v-input--density-compact .v-field__input {
157
- row-gap: 4px;
158
- }
159
-
160
- .v-field__input input {
161
- letter-spacing: inherit;
162
- }
163
- .v-field__input input::placeholder,
164
- input.v-field__input::placeholder,
165
- textarea.v-field__input::placeholder {
166
- color: currentColor;
167
- opacity: var(--v-disabled-opacity);
168
- }
169
-
170
- .v-field__input:focus, .v-field__input:active {
171
- outline: none;
172
- }
173
- .v-field__input:invalid {
174
- box-shadow: none;
175
- }
176
-
177
- .v-field__field {
178
- flex: 1 0;
179
- grid-area: field;
180
- position: relative;
181
- align-items: flex-start;
182
- display: flex;
183
- }
184
-
185
- /* endregion */
186
- /* region AFFIXES */
187
- .v-field__prepend-inner {
188
- grid-area: prepend-inner;
189
- padding-inline-end: var(--v-field-padding-after);
190
- }
191
-
192
- .v-field__clearable {
193
- grid-area: clear;
194
- }
195
-
196
- .v-field__append-inner {
197
- grid-area: append-inner;
198
- padding-inline-start: var(--v-field-padding-after);
199
- }
200
-
201
- .v-field__append-inner,
202
- .v-field__clearable,
203
- .v-field__prepend-inner {
204
- display: flex;
205
- align-items: flex-start;
206
- padding-top: var(--v-input-padding-top, 8px);
207
- }
208
- .v-field--center-affix .v-field__append-inner,
209
- .v-field--center-affix .v-field__clearable,
210
- .v-field--center-affix .v-field__prepend-inner {
211
- align-items: center;
212
- padding-top: 0;
213
- }
214
-
215
- .v-field.v-field--variant-underlined .v-field__append-inner,
216
- .v-field.v-field--variant-underlined .v-field__clearable,
217
- .v-field.v-field--variant-underlined .v-field__prepend-inner,
218
- .v-field.v-field--variant-plain .v-field__append-inner,
219
- .v-field.v-field--variant-plain .v-field__clearable,
220
- .v-field.v-field--variant-plain .v-field__prepend-inner {
221
- align-items: flex-start;
222
- padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0px));
223
- padding-bottom: var(--v-field-padding-bottom, 4px);
224
- }
225
-
226
- .v-field--focused .v-field__prepend-inner,
227
- .v-field--focused .v-field__append-inner {
228
- opacity: 1;
229
- }
230
-
231
- .v-field__prepend-inner > .v-icon,
232
- .v-field__append-inner > .v-icon,
233
- .v-field__clearable > .v-icon {
234
- opacity: var(--v-medium-emphasis-opacity);
235
- }
236
- .v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon, .v-field--glow.v-field--focused .v-field__prepend-inner > .v-icon,
237
- .v-field--disabled .v-field__append-inner > .v-icon,
238
- .v-field--error .v-field__append-inner > .v-icon,
239
- .v-field--glow.v-field--focused .v-field__append-inner > .v-icon,
240
- .v-field--disabled .v-field__clearable > .v-icon,
241
- .v-field--error .v-field__clearable > .v-icon,
242
- .v-field--glow.v-field--focused .v-field__clearable > .v-icon {
243
- opacity: 1;
244
- }
245
- .v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
246
- .v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
247
- .v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
248
- color: rgb(var(--v-theme-error));
249
- }
250
-
251
- .v-field__clearable {
252
- cursor: pointer;
253
- opacity: 0;
254
- overflow: hidden;
255
- margin-inline: 4px;
256
- transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
257
- transition-property: opacity, transform, width;
258
- }
259
- .v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
260
- opacity: 1;
261
- }
262
- @media (hover: hover) {
263
- .v-field:hover .v-field__clearable {
1
+ @layer vuetify.components {
2
+ /* region INPUT */
3
+ .v-field {
4
+ display: grid;
5
+ grid-template-areas: "prepend-inner field clear append-inner";
6
+ grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
7
+ font-size: 16px;
8
+ letter-spacing: 0.009375em;
9
+ max-width: 100%;
10
+ border-radius: 4px;
11
+ contain: layout;
12
+ flex: 1 0;
13
+ grid-area: control;
14
+ position: relative;
15
+ --v-theme-overlay-multiplier: 1;
16
+ --v-field-padding-start: 16px;
17
+ --v-field-padding-end: 16px;
18
+ --v-field-padding-top: 8px;
19
+ --v-field-padding-bottom: 4px;
20
+ --v-field-input-padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0px));
21
+ --v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
22
+ }
23
+ .v-field--disabled {
24
+ opacity: var(--v-disabled-opacity);
25
+ pointer-events: none;
26
+ }
27
+ .v-field .v-chip {
28
+ --v-chip-height: 24px;
29
+ }
30
+ /* endregion */
31
+ /* region MODIFIERS */
32
+ .v-field--prepended {
33
+ padding-inline-start: 12px;
34
+ }
35
+ .v-field--appended {
36
+ padding-inline-end: 12px;
37
+ }
38
+ .v-field--variant-solo, .v-field--variant-solo-filled {
39
+ background: rgb(var(--v-theme-surface));
40
+ border-color: transparent;
41
+ color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
42
+ }
43
+ .v-field--variant-solo, .v-field--variant-solo-filled {
44
+ box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
45
+ }
46
+ .v-field--variant-solo-inverted {
47
+ background: rgb(var(--v-theme-surface));
48
+ border-color: transparent;
49
+ color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
50
+ }
51
+ .v-field--variant-solo-inverted {
52
+ box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
53
+ }
54
+ .v-field--variant-solo-inverted.v-field--focused {
55
+ color: rgb(var(--v-theme-on-surface-variant));
56
+ }
57
+ .v-field--variant-filled {
58
+ border-bottom-left-radius: 0;
59
+ border-bottom-right-radius: 0;
60
+ }
61
+ .v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
62
+ --v-input-control-height: 56px;
63
+ --v-field-padding-bottom: 4px;
64
+ }
65
+ .v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
66
+ --v-input-control-height: 48px;
67
+ --v-field-padding-bottom: 0px;
68
+ }
69
+ .v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
70
+ --v-input-control-height: 40px;
71
+ --v-field-padding-bottom: 0px;
72
+ }
73
+ .v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
74
+ --v-field-padding-top: 0px;
75
+ }
76
+ .v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
77
+ --v-field-padding-bottom: 16px;
78
+ }
79
+ .v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
80
+ --v-field-padding-bottom: 12px;
81
+ }
82
+ .v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
83
+ --v-field-padding-bottom: 8px;
84
+ }
85
+ .v-field--variant-plain, .v-field--variant-underlined {
86
+ border-radius: 0;
87
+ padding: 0;
88
+ }
89
+ .v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
90
+ --v-field-padding-start: 0px;
91
+ --v-field-padding-end: 0px;
92
+ }
93
+ .v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
94
+ --v-input-control-height: 48px;
95
+ --v-field-padding-top: 4px;
96
+ --v-field-padding-bottom: 4px;
97
+ }
98
+ .v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
99
+ --v-input-control-height: 40px;
100
+ --v-field-padding-top: 2px;
101
+ --v-field-padding-bottom: 0px;
102
+ }
103
+ .v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
104
+ --v-input-control-height: 32px;
105
+ --v-field-padding-top: 0px;
106
+ --v-field-padding-bottom: 0px;
107
+ }
108
+ .v-field--flat {
109
+ box-shadow: none;
110
+ }
111
+ .v-field--rounded {
112
+ border-radius: 24px;
113
+ }
114
+ .v-field.v-field--prepended {
115
+ --v-field-padding-start: 6px;
116
+ }
117
+ .v-field.v-field--appended {
118
+ --v-field-padding-end: 6px;
119
+ }
120
+ /* endregion */
121
+ /* region ELEMENTS */
122
+ .v-field__input {
123
+ align-items: center;
124
+ color: inherit;
125
+ column-gap: 2px;
126
+ display: flex;
127
+ flex-wrap: wrap;
128
+ letter-spacing: 0.009375em;
129
+ opacity: var(--v-high-emphasis-opacity);
130
+ min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
131
+ min-width: 0;
132
+ padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
133
+ padding-top: var(--v-field-input-padding-top);
134
+ padding-bottom: var(--v-field-input-padding-bottom);
135
+ position: relative;
136
+ width: 100%;
137
+ }
138
+ .v-input--density-default .v-field__input {
139
+ row-gap: 8px;
140
+ }
141
+ .v-input--density-comfortable .v-field__input {
142
+ row-gap: 6px;
143
+ }
144
+ .v-input--density-compact .v-field__input {
145
+ row-gap: 4px;
146
+ }
147
+ .v-field__input input {
148
+ letter-spacing: inherit;
149
+ }
150
+ .v-field__input input::placeholder,
151
+ input.v-field__input::placeholder,
152
+ textarea.v-field__input::placeholder {
153
+ color: currentColor;
154
+ opacity: var(--v-disabled-opacity);
155
+ }
156
+ .v-field__input:focus, .v-field__input:active {
157
+ outline: none;
158
+ }
159
+ .v-field__input:invalid {
160
+ box-shadow: none;
161
+ }
162
+ .v-field__field {
163
+ flex: 1 0;
164
+ grid-area: field;
165
+ position: relative;
166
+ align-items: flex-start;
167
+ display: flex;
168
+ }
169
+ /* endregion */
170
+ /* region AFFIXES */
171
+ .v-field__prepend-inner {
172
+ grid-area: prepend-inner;
173
+ padding-inline-end: var(--v-field-padding-after);
174
+ }
175
+ .v-field__clearable {
176
+ grid-area: clear;
177
+ }
178
+ .v-field__append-inner {
179
+ grid-area: append-inner;
180
+ padding-inline-start: var(--v-field-padding-after);
181
+ }
182
+ .v-field__append-inner,
183
+ .v-field__clearable,
184
+ .v-field__prepend-inner {
185
+ display: flex;
186
+ align-items: flex-start;
187
+ padding-top: var(--v-input-padding-top, 8px);
188
+ }
189
+ .v-field--center-affix .v-field__append-inner,
190
+ .v-field--center-affix .v-field__clearable,
191
+ .v-field--center-affix .v-field__prepend-inner {
192
+ align-items: center;
193
+ padding-top: 0;
194
+ }
195
+ .v-field.v-field--variant-underlined .v-field__append-inner,
196
+ .v-field.v-field--variant-underlined .v-field__clearable,
197
+ .v-field.v-field--variant-underlined .v-field__prepend-inner,
198
+ .v-field.v-field--variant-plain .v-field__append-inner,
199
+ .v-field.v-field--variant-plain .v-field__clearable,
200
+ .v-field.v-field--variant-plain .v-field__prepend-inner {
201
+ align-items: flex-start;
202
+ padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0px));
203
+ padding-bottom: var(--v-field-padding-bottom, 4px);
204
+ }
205
+ .v-field--focused .v-field__prepend-inner,
206
+ .v-field--focused .v-field__append-inner {
207
+ opacity: 1;
208
+ }
209
+ .v-field__prepend-inner > .v-icon,
210
+ .v-field__append-inner > .v-icon,
211
+ .v-field__clearable > .v-icon {
212
+ opacity: var(--v-medium-emphasis-opacity);
213
+ }
214
+ .v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon, .v-field--glow.v-field--focused .v-field__prepend-inner > .v-icon,
215
+ .v-field--disabled .v-field__append-inner > .v-icon,
216
+ .v-field--error .v-field__append-inner > .v-icon,
217
+ .v-field--glow.v-field--focused .v-field__append-inner > .v-icon,
218
+ .v-field--disabled .v-field__clearable > .v-icon,
219
+ .v-field--error .v-field__clearable > .v-icon,
220
+ .v-field--glow.v-field--focused .v-field__clearable > .v-icon {
264
221
  opacity: 1;
265
222
  }
266
- }
267
- @media (hover: none) {
223
+ .v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
224
+ .v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
225
+ .v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
226
+ color: rgb(var(--v-theme-error));
227
+ }
268
228
  .v-field__clearable {
229
+ cursor: pointer;
230
+ opacity: 0;
231
+ overflow: hidden;
232
+ margin-inline: 4px;
233
+ transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
234
+ transition-property: opacity, transform, width;
235
+ }
236
+ .v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
237
+ opacity: 1;
238
+ }
239
+ @media (hover: hover) {
240
+ .v-field:hover .v-field__clearable {
241
+ opacity: 1;
242
+ }
243
+ }
244
+ @media (hover: none) {
245
+ .v-field__clearable {
246
+ opacity: 1;
247
+ }
248
+ }
249
+ /* endregion */
250
+ /* region LABEL */
251
+ .v-label.v-field-label {
252
+ contain: layout paint;
253
+ display: block;
254
+ margin-inline-start: var(--v-field-padding-start);
255
+ margin-inline-end: var(--v-field-padding-end);
256
+ max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
257
+ pointer-events: none;
258
+ position: absolute;
259
+ top: var(--v-input-padding-top);
260
+ transform-origin: left center;
261
+ transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
262
+ transition-property: opacity, transform;
263
+ z-index: 1;
264
+ }
265
+ .v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
266
+ top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
267
+ }
268
+ .v-field--center-affix .v-label.v-field-label {
269
+ top: 50%;
270
+ transform: translateY(-50%);
271
+ }
272
+ .v-field--active .v-label.v-field-label {
273
+ visibility: hidden;
274
+ }
275
+ .v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
269
276
  opacity: 1;
270
277
  }
271
- }
272
-
273
- /* endregion */
274
- /* region LABEL */
275
- .v-label.v-field-label {
276
- contain: layout paint;
277
- display: block;
278
- margin-inline-start: var(--v-field-padding-start);
279
- margin-inline-end: var(--v-field-padding-end);
280
- max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
281
- pointer-events: none;
282
- position: absolute;
283
- top: var(--v-input-padding-top);
284
- transform-origin: left center;
285
- transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
286
- transition-property: opacity, transform;
287
- z-index: 1;
288
- }
289
- .v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
290
- top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
291
- }
292
- .v-field--center-affix .v-label.v-field-label {
293
- top: 50%;
294
- transform: translateY(-50%);
295
- }
296
- .v-field--active .v-label.v-field-label {
297
- visibility: hidden;
298
- }
299
- .v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
300
- opacity: 1;
301
- }
302
- .v-field--error:not(.v-field--disabled) .v-label.v-field-label {
303
- color: rgb(var(--v-theme-error));
304
- }
305
- .v-label.v-field-label--floating {
306
- --v-field-label-scale: 0.75em;
307
- font-size: var(--v-field-label-scale);
308
- visibility: hidden;
309
- }
310
- .v-field--variant-outlined .v-label.v-field-label--floating {
311
- max-width: 100%;
312
- }
313
- .v-field--center-affix .v-label.v-field-label--floating {
314
- transform: none;
315
- }
316
- .v-field.v-field--active .v-label.v-field-label--floating {
317
- visibility: unset;
318
- }
319
- .v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
320
- top: 7px;
321
- }
322
-
323
- .v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
324
- top: 5px;
325
- }
326
-
327
- .v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
328
- top: 3px;
329
- }
330
-
331
- .v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
332
- transform: translateY(-16px);
333
- margin: 0;
334
- top: var(--v-input-padding-top);
335
- }
336
- .v-field--variant-outlined .v-label.v-field-label--floating {
337
- transform: translateY(-50%);
338
- transform-origin: center;
339
- position: static;
340
- margin: 0 4px;
341
- }
342
-
343
- /* endregion */
344
- /* region OUTLINE */
345
- .v-field__outline {
346
- --v-field-border-width: 1px;
347
- --v-field-border-opacity: 0.38;
348
- align-items: stretch;
349
- contain: layout;
350
- display: flex;
351
- height: 100%;
352
- left: 0;
353
- pointer-events: none;
354
- position: absolute;
355
- right: 0;
356
- width: 100%;
357
- }
358
- @media (hover: hover) {
359
- .v-field:hover .v-field__outline {
360
- --v-field-border-opacity: var(--v-high-emphasis-opacity);
361
- }
362
- }
363
- .v-field--error:not(.v-field--disabled) .v-field__outline {
364
- color: rgb(var(--v-theme-error));
365
- }
366
- .v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
367
- --v-field-border-opacity: 1;
368
- }
369
- .v-field--variant-outlined.v-field--focused .v-field__outline {
370
- --v-field-border-width: 2px;
371
- }
372
- .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
373
- border-color: currentColor;
374
- border-style: solid;
375
- border-width: 0 0 var(--v-field-border-width);
376
- opacity: var(--v-field-border-opacity);
377
- transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
378
- }
379
- .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
380
- content: "";
381
- position: absolute;
382
- top: 0;
383
- left: 0;
384
- width: 100%;
385
- height: 100%;
386
- }
387
- .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
388
- border-color: currentColor;
389
- border-style: solid;
390
- border-width: 0 0 2px;
391
- transform: scaleX(0);
392
- transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
393
- }
394
- .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
395
- content: "";
396
- position: absolute;
397
- top: 0;
398
- left: 0;
399
- width: 100%;
400
- height: 100%;
401
- }
402
- .v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
403
- transform: scaleX(1);
404
- }
405
-
406
- .v-field--variant-outlined .v-field__outline {
407
- border-radius: inherit;
408
- }
409
- .v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
410
- border: 0 solid currentColor;
411
- opacity: var(--v-field-border-opacity);
412
- transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
413
- }
414
- .v-field--variant-outlined .v-field__outline__start {
415
- flex: 0 0 12px;
416
- border-top-width: var(--v-field-border-width);
417
- border-bottom-width: var(--v-field-border-width);
418
- border-inline-start-width: var(--v-field-border-width);
419
- border-start-start-radius: inherit;
420
- border-start-end-radius: 0;
421
- border-end-end-radius: 0;
422
- border-end-start-radius: inherit;
423
- }
424
- .v-field--rounded.v-field--variant-outlined .v-field__outline__start,
425
- [class^=rounded-].v-field--variant-outlined .v-field__outline__start,
426
- [class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
427
- flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
428
- }
429
-
430
- .v-field--reverse.v-field--variant-outlined .v-field__outline__start {
431
- border-start-start-radius: 0;
432
- border-start-end-radius: inherit;
433
- border-end-end-radius: inherit;
434
- border-end-start-radius: 0;
435
- border-inline-end-width: var(--v-field-border-width);
436
- border-inline-start-width: 0;
437
- }
438
-
439
- .v-field--variant-outlined .v-field__outline__notch {
440
- flex: none;
441
- position: relative;
442
- max-width: calc(100% - 24px);
443
- }
444
- .v-field--rounded.v-field--variant-outlined .v-field__outline__notch,
445
- [class^=rounded-].v-field--variant-outlined .v-field__outline__notch,
446
- [class*=" rounded-"].v-field--variant-outlined .v-field__outline__notch {
447
- max-width: calc(100% - var(--v-input-control-height));
448
- }
449
-
450
- .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
451
- opacity: var(--v-field-border-opacity);
452
- transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
453
- }
454
- .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
455
- content: "";
456
- position: absolute;
457
- top: 0;
458
- left: 0;
459
- width: 100%;
460
- height: 100%;
461
- }
462
- .v-field--variant-outlined .v-field__outline__notch::before {
463
- border-width: var(--v-field-border-width) 0 0;
464
- }
465
- .v-field--variant-outlined .v-field__outline__notch::after {
466
- bottom: 0;
467
- border-width: 0 0 var(--v-field-border-width);
468
- }
469
- .v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
470
- opacity: 0;
471
- }
472
-
473
- .v-field--variant-outlined .v-field__outline__end {
474
- flex: 1;
475
- border-top-width: var(--v-field-border-width);
476
- border-bottom-width: var(--v-field-border-width);
477
- border-inline-end-width: var(--v-field-border-width);
478
- border-start-start-radius: 0;
479
- border-start-end-radius: inherit;
480
- border-end-end-radius: inherit;
481
- border-end-start-radius: 0;
482
- }
483
- .v-field--reverse.v-field--variant-outlined .v-field__outline__end {
484
- border-start-start-radius: inherit;
485
- border-start-end-radius: 0;
486
- border-end-end-radius: 0;
487
- border-end-start-radius: inherit;
488
- border-inline-end-width: 0;
489
- border-inline-start-width: var(--v-field-border-width);
490
- }
491
-
492
- /* endregion */
493
- /* region LOADER */
494
- .v-field__loader {
495
- top: calc(100% - 2px);
496
- left: 0;
497
- position: absolute;
498
- right: 0;
499
- width: 100%;
500
- border-top-left-radius: 0;
501
- border-top-right-radius: 0;
502
- border-bottom-left-radius: inherit;
503
- border-bottom-right-radius: inherit;
504
- overflow: hidden;
505
- }
506
- .v-field--variant-outlined .v-field__loader {
507
- top: calc(100% - 3px);
508
- width: calc(100% - 1px * 2);
509
- left: 1px;
510
- }
511
-
512
- /* endregion */
513
- /* region OVERLAY */
514
- .v-field__overlay {
515
- border-radius: inherit;
516
- pointer-events: none;
517
- }
518
- .v-field__overlay {
519
- position: absolute;
520
- top: 0;
521
- left: 0;
522
- width: 100%;
523
- height: 100%;
524
- }
525
-
526
- .v-field--variant-filled .v-field__overlay {
527
- background-color: currentColor;
528
- opacity: 0.04;
529
- transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
530
- }
531
- .v-field--variant-filled.v-field--has-background .v-field__overlay {
532
- opacity: 0;
533
- }
534
- @media (hover: hover) {
535
- .v-field--variant-filled:hover .v-field__overlay {
536
- opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
537
- }
538
- }
539
- .v-field--variant-filled.v-field--focused .v-field__overlay {
540
- opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
541
- }
542
-
543
- .v-field--variant-solo-filled .v-field__overlay {
544
- background-color: currentColor;
545
- opacity: 0.04;
546
- transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
547
- }
548
- @media (hover: hover) {
549
- .v-field--variant-solo-filled:hover .v-field__overlay {
550
- opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
551
- }
552
- }
553
- .v-field--variant-solo-filled.v-field--focused .v-field__overlay {
554
- opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
555
- }
556
-
557
- .v-field--variant-solo-inverted .v-field__overlay {
558
- transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
559
- }
560
- .v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
561
- opacity: 0;
562
- }
563
- @media (hover: hover) {
564
- .v-field--variant-solo-inverted:hover .v-field__overlay {
565
- opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
566
- }
567
- }
568
- .v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
569
- background-color: rgb(var(--v-theme-surface-variant));
570
- opacity: 1;
571
- }
572
-
573
- /* endregion */
574
- /* region MODIFIERS */
575
- .v-field--reverse .v-field__field,
576
- .v-field--reverse .v-field__input,
577
- .v-field--reverse .v-field__outline {
578
- flex-direction: row-reverse;
579
- }
580
- .v-field--reverse .v-field__input, .v-field--reverse input {
581
- text-align: end;
582
- }
583
-
584
- .v-input--disabled .v-field--variant-filled .v-field__outline::before,
585
- .v-input--disabled .v-field--variant-underlined .v-field__outline::before {
586
- border-image: repeating-linear-gradient(to right, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
587
- }
588
-
589
- .v-field--loading .v-field__outline::after,
590
- .v-field--loading .v-field__outline::before {
591
- opacity: 0;
592
- }
593
-
594
- /* endregion */
278
+ .v-field--error:not(.v-field--disabled) .v-label.v-field-label {
279
+ color: rgb(var(--v-theme-error));
280
+ }
281
+ .v-label.v-field-label--floating {
282
+ --v-field-label-scale: 0.75em;
283
+ font-size: var(--v-field-label-scale);
284
+ visibility: hidden;
285
+ }
286
+ .v-field--variant-outlined .v-label.v-field-label--floating {
287
+ max-width: 100%;
288
+ }
289
+ .v-field--center-affix .v-label.v-field-label--floating {
290
+ transform: none;
291
+ }
292
+ .v-field.v-field--active .v-label.v-field-label--floating {
293
+ visibility: unset;
294
+ }
295
+ .v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
296
+ top: 7px;
297
+ }
298
+ .v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
299
+ top: 5px;
300
+ }
301
+ .v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
302
+ top: 3px;
303
+ }
304
+ .v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
305
+ transform: translateY(-16px);
306
+ margin: 0;
307
+ top: var(--v-input-padding-top);
308
+ }
309
+ .v-field--variant-outlined .v-label.v-field-label--floating {
310
+ transform: translateY(-50%);
311
+ transform-origin: center;
312
+ position: static;
313
+ margin: 0 4px;
314
+ }
315
+ /* endregion */
316
+ /* region OUTLINE */
317
+ .v-field__outline {
318
+ --v-field-border-width: 1px;
319
+ --v-field-border-opacity: 0.38;
320
+ align-items: stretch;
321
+ contain: layout;
322
+ display: flex;
323
+ height: 100%;
324
+ left: 0;
325
+ pointer-events: none;
326
+ position: absolute;
327
+ right: 0;
328
+ width: 100%;
329
+ }
330
+ @media (hover: hover) {
331
+ .v-field:hover .v-field__outline {
332
+ --v-field-border-opacity: var(--v-high-emphasis-opacity);
333
+ }
334
+ }
335
+ .v-field--error:not(.v-field--disabled) .v-field__outline {
336
+ color: rgb(var(--v-theme-error));
337
+ }
338
+ .v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
339
+ --v-field-border-opacity: 1;
340
+ }
341
+ .v-field--variant-outlined.v-field--focused .v-field__outline {
342
+ --v-field-border-width: 2px;
343
+ }
344
+ .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
345
+ border-color: currentColor;
346
+ border-style: solid;
347
+ border-width: 0 0 var(--v-field-border-width);
348
+ opacity: var(--v-field-border-opacity);
349
+ transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
350
+ }
351
+ .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
352
+ content: "";
353
+ position: absolute;
354
+ top: 0;
355
+ left: 0;
356
+ width: 100%;
357
+ height: 100%;
358
+ }
359
+ .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
360
+ border-color: currentColor;
361
+ border-style: solid;
362
+ border-width: 0 0 2px;
363
+ transform: scaleX(0);
364
+ transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
365
+ }
366
+ .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
367
+ content: "";
368
+ position: absolute;
369
+ top: 0;
370
+ left: 0;
371
+ width: 100%;
372
+ height: 100%;
373
+ }
374
+ .v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
375
+ transform: scaleX(1);
376
+ }
377
+ .v-field--variant-outlined .v-field__outline {
378
+ border-radius: inherit;
379
+ }
380
+ .v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
381
+ border: 0 solid currentColor;
382
+ opacity: var(--v-field-border-opacity);
383
+ transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
384
+ }
385
+ .v-field--variant-outlined .v-field__outline__start {
386
+ flex: 0 0 12px;
387
+ border-top-width: var(--v-field-border-width);
388
+ border-bottom-width: var(--v-field-border-width);
389
+ border-inline-start-width: var(--v-field-border-width);
390
+ border-start-start-radius: inherit;
391
+ border-start-end-radius: 0;
392
+ border-end-end-radius: 0;
393
+ border-end-start-radius: inherit;
394
+ }
395
+ .v-field--rounded.v-field--variant-outlined .v-field__outline__start,
396
+ [class^=rounded-].v-field--variant-outlined .v-field__outline__start,
397
+ [class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
398
+ flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
399
+ }
400
+ .v-field--reverse.v-field--variant-outlined .v-field__outline__start {
401
+ border-start-start-radius: 0;
402
+ border-start-end-radius: inherit;
403
+ border-end-end-radius: inherit;
404
+ border-end-start-radius: 0;
405
+ border-inline-end-width: var(--v-field-border-width);
406
+ border-inline-start-width: 0;
407
+ }
408
+ .v-field--variant-outlined .v-field__outline__notch {
409
+ flex: none;
410
+ position: relative;
411
+ max-width: calc(100% - 24px);
412
+ }
413
+ .v-field--rounded.v-field--variant-outlined .v-field__outline__notch,
414
+ [class^=rounded-].v-field--variant-outlined .v-field__outline__notch,
415
+ [class*=" rounded-"].v-field--variant-outlined .v-field__outline__notch {
416
+ max-width: calc(100% - var(--v-input-control-height));
417
+ }
418
+ .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
419
+ opacity: var(--v-field-border-opacity);
420
+ transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
421
+ }
422
+ .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
423
+ content: "";
424
+ position: absolute;
425
+ top: 0;
426
+ left: 0;
427
+ width: 100%;
428
+ height: 100%;
429
+ }
430
+ .v-field--variant-outlined .v-field__outline__notch::before {
431
+ border-width: var(--v-field-border-width) 0 0;
432
+ }
433
+ .v-field--variant-outlined .v-field__outline__notch::after {
434
+ bottom: 0;
435
+ border-width: 0 0 var(--v-field-border-width);
436
+ }
437
+ .v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
438
+ opacity: 0;
439
+ }
440
+ .v-field--variant-outlined .v-field__outline__end {
441
+ flex: 1;
442
+ border-top-width: var(--v-field-border-width);
443
+ border-bottom-width: var(--v-field-border-width);
444
+ border-inline-end-width: var(--v-field-border-width);
445
+ border-start-start-radius: 0;
446
+ border-start-end-radius: inherit;
447
+ border-end-end-radius: inherit;
448
+ border-end-start-radius: 0;
449
+ }
450
+ .v-field--reverse.v-field--variant-outlined .v-field__outline__end {
451
+ border-start-start-radius: inherit;
452
+ border-start-end-radius: 0;
453
+ border-end-end-radius: 0;
454
+ border-end-start-radius: inherit;
455
+ border-inline-end-width: 0;
456
+ border-inline-start-width: var(--v-field-border-width);
457
+ }
458
+ /* endregion */
459
+ /* region LOADER */
460
+ .v-field__loader {
461
+ top: calc(100% - 2px);
462
+ left: 0;
463
+ position: absolute;
464
+ right: 0;
465
+ width: 100%;
466
+ border-top-left-radius: 0;
467
+ border-top-right-radius: 0;
468
+ border-bottom-left-radius: inherit;
469
+ border-bottom-right-radius: inherit;
470
+ overflow: hidden;
471
+ }
472
+ .v-field--variant-outlined .v-field__loader {
473
+ top: calc(100% - 3px);
474
+ width: calc(100% - 1px * 2);
475
+ left: 1px;
476
+ }
477
+ /* endregion */
478
+ /* region OVERLAY */
479
+ .v-field__overlay {
480
+ border-radius: inherit;
481
+ pointer-events: none;
482
+ }
483
+ .v-field__overlay {
484
+ position: absolute;
485
+ top: 0;
486
+ left: 0;
487
+ width: 100%;
488
+ height: 100%;
489
+ }
490
+ .v-field--variant-filled .v-field__overlay {
491
+ background-color: currentColor;
492
+ opacity: 0.04;
493
+ transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
494
+ }
495
+ .v-field--variant-filled.v-field--has-background .v-field__overlay {
496
+ opacity: 0;
497
+ }
498
+ @media (hover: hover) {
499
+ .v-field--variant-filled:hover .v-field__overlay {
500
+ opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
501
+ }
502
+ }
503
+ .v-field--variant-filled.v-field--focused .v-field__overlay {
504
+ opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
505
+ }
506
+ .v-field--variant-solo-filled .v-field__overlay {
507
+ background-color: currentColor;
508
+ opacity: 0.04;
509
+ transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
510
+ }
511
+ @media (hover: hover) {
512
+ .v-field--variant-solo-filled:hover .v-field__overlay {
513
+ opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
514
+ }
515
+ }
516
+ .v-field--variant-solo-filled.v-field--focused .v-field__overlay {
517
+ opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
518
+ }
519
+ .v-field--variant-solo-inverted .v-field__overlay {
520
+ transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
521
+ }
522
+ .v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
523
+ opacity: 0;
524
+ }
525
+ @media (hover: hover) {
526
+ .v-field--variant-solo-inverted:hover .v-field__overlay {
527
+ opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
528
+ }
529
+ }
530
+ .v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
531
+ background-color: rgb(var(--v-theme-surface-variant));
532
+ opacity: 1;
533
+ }
534
+ /* endregion */
535
+ /* region MODIFIERS */
536
+ .v-field--reverse .v-field__field,
537
+ .v-field--reverse .v-field__input,
538
+ .v-field--reverse .v-field__outline {
539
+ flex-direction: row-reverse;
540
+ }
541
+ .v-field--reverse .v-field__input, .v-field--reverse input {
542
+ text-align: end;
543
+ }
544
+ .v-input--disabled .v-field--variant-filled .v-field__outline::before,
545
+ .v-input--disabled .v-field--variant-underlined .v-field__outline::before {
546
+ border-image: repeating-linear-gradient(to right, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
547
+ }
548
+ .v-field--loading .v-field__outline::after,
549
+ .v-field--loading .v-field__outline::before {
550
+ opacity: 0;
551
+ }
552
+ /* endregion */
553
+ }