@vuetify/nightly 3.9.0-master.2025-07-09 → 3.9.0-next.2025-07-09

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 (209) hide show
  1. package/CHANGELOG.md +20 -9
  2. package/dist/json/attributes.json +3539 -3539
  3. package/dist/json/importMap-labs.json +14 -14
  4. package/dist/json/importMap.json +130 -130
  5. package/dist/json/web-types.json +6434 -6398
  6. package/dist/vuetify-labs.cjs +55 -36
  7. package/dist/vuetify-labs.css +26440 -28193
  8. package/dist/vuetify-labs.d.ts +197 -590
  9. package/dist/vuetify-labs.esm.js +55 -36
  10. package/dist/vuetify-labs.esm.js.map +1 -1
  11. package/dist/vuetify-labs.js +55 -36
  12. package/dist/vuetify-labs.min.css +3 -4
  13. package/dist/vuetify.cjs +47 -28
  14. package/dist/vuetify.cjs.map +1 -1
  15. package/dist/vuetify.css +22837 -24587
  16. package/dist/vuetify.d.ts +197 -590
  17. package/dist/vuetify.esm.js +47 -28
  18. package/dist/vuetify.esm.js.map +1 -1
  19. package/dist/vuetify.js +47 -28
  20. package/dist/vuetify.js.map +1 -1
  21. package/dist/vuetify.min.css +3 -4
  22. package/dist/vuetify.min.js +18 -18
  23. package/dist/vuetify.min.js.map +1 -1
  24. package/lib/components/VAlert/VAlert.css +211 -220
  25. package/lib/components/VApp/VApp.css +16 -15
  26. package/lib/components/VAppBar/VAppBar.css +14 -12
  27. package/lib/components/VAutocomplete/VAutocomplete.css +85 -84
  28. package/lib/components/VAutocomplete/VAutocomplete.d.ts +18 -9
  29. package/lib/components/VAutocomplete/VAutocomplete.js +6 -3
  30. package/lib/components/VAutocomplete/VAutocomplete.js.map +1 -1
  31. package/lib/components/VAvatar/VAvatar.css +108 -106
  32. package/lib/components/VBadge/VBadge.css +77 -77
  33. package/lib/components/VBanner/VBanner.css +161 -166
  34. package/lib/components/VBottomNavigation/VBottomNavigation.css +65 -64
  35. package/lib/components/VBottomSheet/VBottomSheet.css +34 -31
  36. package/lib/components/VBreadcrumbs/VBreadcrumbs.css +54 -57
  37. package/lib/components/VBtn/VBtn.css +400 -436
  38. package/lib/components/VBtn/VBtn.sass +10 -23
  39. package/lib/components/VBtn/_variables.scss +1 -1
  40. package/lib/components/VBtnGroup/VBtnGroup.css +87 -88
  41. package/lib/components/VBtnToggle/VBtnToggle.css +16 -14
  42. package/lib/components/VCard/VCard.css +294 -302
  43. package/lib/components/VCarousel/VCarousel.css +62 -64
  44. package/lib/components/VCarousel/VCarousel.sass +1 -1
  45. package/lib/components/VCheckbox/VCheckbox.css +7 -5
  46. package/lib/components/VChip/VChip.css +378 -411
  47. package/lib/components/VChipGroup/VChipGroup.css +19 -18
  48. package/lib/components/VCode/VCode.css +13 -11
  49. package/lib/components/VColorPicker/VColorPicker.css +23 -23
  50. package/lib/components/VColorPicker/VColorPickerCanvas.css +24 -22
  51. package/lib/components/VColorPicker/VColorPickerEdit.css +29 -28
  52. package/lib/components/VColorPicker/VColorPickerPreview.css +69 -67
  53. package/lib/components/VColorPicker/VColorPickerPreview.sass +4 -2
  54. package/lib/components/VColorPicker/VColorPickerSwatches.css +34 -34
  55. package/lib/components/VCombobox/VCombobox.css +85 -84
  56. package/lib/components/VCombobox/VCombobox.d.ts +18 -9
  57. package/lib/components/VCombobox/VCombobox.js +6 -3
  58. package/lib/components/VCombobox/VCombobox.js.map +1 -1
  59. package/lib/components/VCounter/VCounter.css +7 -5
  60. package/lib/components/VDataTable/VDataTable.css +202 -200
  61. package/lib/components/VDataTable/VDataTable.sass +20 -10
  62. package/lib/components/VDataTable/VDataTableFooter.css +33 -31
  63. package/lib/components/VDataTable/VDataTableFooter.js +7 -7
  64. package/lib/components/VDataTable/VDataTableFooter.js.map +1 -1
  65. package/lib/components/VDatePicker/VDatePicker.css +8 -6
  66. package/lib/components/VDatePicker/VDatePickerControls.css +56 -58
  67. package/lib/components/VDatePicker/VDatePickerHeader.css +56 -60
  68. package/lib/components/VDatePicker/VDatePickerMonth.css +46 -50
  69. package/lib/components/VDatePicker/VDatePickerMonths.css +20 -19
  70. package/lib/components/VDatePicker/VDatePickerYears.css +16 -15
  71. package/lib/components/VDialog/VDialog.css +98 -98
  72. package/lib/components/VDivider/VDivider.css +52 -52
  73. package/lib/components/VEmptyState/VEmptyState.css +62 -67
  74. package/lib/components/VExpansionPanel/VExpansionPanel.css +203 -209
  75. package/lib/components/VExpansionPanel/VExpansionPanel.sass +27 -25
  76. package/lib/components/VFab/VFab.css +78 -73
  77. package/lib/components/VFab/VFab.sass +5 -4
  78. package/lib/components/VField/VField.css +541 -589
  79. package/lib/components/VField/VField.sass +4 -11
  80. package/lib/components/VField/_variables.scss +1 -1
  81. package/lib/components/VFileInput/VFileInput.css +34 -32
  82. package/lib/components/VFileInput/VFileInput.js +1 -1
  83. package/lib/components/VFileInput/VFileInput.js.map +1 -1
  84. package/lib/components/VFooter/VFooter.css +38 -36
  85. package/lib/components/VForm/VForm.d.ts +111 -531
  86. package/lib/components/VForm/VForm.js +11 -1
  87. package/lib/components/VForm/VForm.js.map +1 -1
  88. package/lib/components/VGrid/VGrid.css +565 -592
  89. package/lib/components/VIcon/VIcon.css +52 -53
  90. package/lib/components/VImg/VImg.css +50 -51
  91. package/lib/components/VInfiniteScroll/VInfiniteScroll.css +36 -37
  92. package/lib/components/VInput/VInput.css +136 -147
  93. package/lib/components/VItemGroup/VItemGroup.css +7 -5
  94. package/lib/components/VKbd/VKbd.css +33 -31
  95. package/lib/components/VLabel/VLabel.css +16 -15
  96. package/lib/components/VLayout/VLayout.css +10 -8
  97. package/lib/components/VLayout/VLayoutItem.css +8 -7
  98. package/lib/components/VList/VList.css +104 -108
  99. package/lib/components/VList/VList.sass +1 -1
  100. package/lib/components/VList/VListItem.css +442 -454
  101. package/lib/components/VList/VListItem.sass +2 -1
  102. package/lib/components/VLocaleProvider/VLocaleProvider.css +4 -2
  103. package/lib/components/VMain/VMain.css +32 -30
  104. package/lib/components/VMenu/VMenu.css +21 -19
  105. package/lib/components/VMessages/VMessages.css +17 -15
  106. package/lib/components/VNavigationDrawer/VNavigationDrawer.css +102 -104
  107. package/lib/components/VNumberInput/VNumberInput.css +59 -57
  108. package/lib/components/VOtpInput/VOtpInput.css +56 -58
  109. package/lib/components/VOtpInput/VOtpInput.js +2 -2
  110. package/lib/components/VOtpInput/VOtpInput.js.map +1 -1
  111. package/lib/components/VOverlay/VOverlay.css +61 -64
  112. package/lib/components/VOverlay/VOverlay.sass +14 -13
  113. package/lib/components/VPagination/VPagination.css +10 -8
  114. package/lib/components/VParallax/VParallax.css +8 -6
  115. package/lib/components/VProgressCircular/VProgressCircular.css +95 -101
  116. package/lib/components/VProgressLinear/VProgressLinear.css +209 -222
  117. package/lib/components/VRadioGroup/VRadioGroup.css +14 -12
  118. package/lib/components/VRating/VRating.css +52 -53
  119. package/lib/components/VResponsive/VResponsive.css +25 -26
  120. package/lib/components/VSelect/VSelect.css +59 -57
  121. package/lib/components/VSelect/VSelect.d.ts +18 -9
  122. package/lib/components/VSelect/VSelect.js +6 -3
  123. package/lib/components/VSelect/VSelect.js.map +1 -1
  124. package/lib/components/VSelectionControl/VSelectionControl.css +98 -100
  125. package/lib/components/VSelectionControlGroup/VSelectionControlGroup.css +10 -8
  126. package/lib/components/VSheet/VSheet.css +38 -36
  127. package/lib/components/VSkeletonLoader/VSkeletonLoader.css +225 -224
  128. package/lib/components/VSlideGroup/VSlideGroup.css +53 -55
  129. package/lib/components/VSlider/VSlider.css +53 -57
  130. package/lib/components/VSlider/VSliderThumb.css +142 -153
  131. package/lib/components/VSlider/VSliderTrack.css +155 -174
  132. package/lib/components/VSnackbar/VSnackbar.css +140 -140
  133. package/lib/components/VSnackbar/VSnackbar.js +1 -1
  134. package/lib/components/VSnackbar/VSnackbar.js.map +1 -1
  135. package/lib/components/VSpeedDial/VSpeedDial.css +43 -41
  136. package/lib/components/VStepper/VStepper.css +55 -56
  137. package/lib/components/VStepper/VStepperItem.css +112 -115
  138. package/lib/components/VSwitch/VSwitch.css +129 -139
  139. package/lib/components/VSystemBar/VSystemBar.css +45 -43
  140. package/lib/components/VTable/VTable.css +142 -143
  141. package/lib/components/VTable/VTable.sass +4 -2
  142. package/lib/components/VTabs/VTab.css +30 -29
  143. package/lib/components/VTabs/VTabs.css +59 -65
  144. package/lib/components/VTextField/VTextField.css +77 -85
  145. package/lib/components/VTextarea/VTextarea.css +48 -40
  146. package/lib/components/VTextarea/VTextarea.sass +4 -2
  147. package/lib/components/VThemeProvider/VThemeProvider.css +5 -3
  148. package/lib/components/VTimePicker/VTimePicker.css +4 -2
  149. package/lib/components/VTimePicker/VTimePickerClock.css +127 -130
  150. package/lib/components/VTimePicker/VTimePickerControls.css +103 -104
  151. package/lib/components/VTimeline/VTimeline.css +388 -427
  152. package/lib/components/VToolbar/VToolbar.css +137 -144
  153. package/lib/components/VTooltip/VTooltip.css +27 -23
  154. package/lib/components/VTooltip/VTooltip.sass +8 -6
  155. package/lib/components/VTreeview/VTreeview.js +1 -1
  156. package/lib/components/VTreeview/VTreeview.js.map +1 -1
  157. package/lib/components/VTreeview/VTreeviewItem.css +83 -85
  158. package/lib/components/VVirtualScroll/VVirtualScroll.css +11 -9
  159. package/lib/components/VWindow/VWindow.css +88 -85
  160. package/lib/composables/theme.js +3 -3
  161. package/lib/composables/theme.js.map +1 -1
  162. package/lib/directives/ripple/VRipple.css +38 -36
  163. package/lib/entry-bundler.js +1 -1
  164. package/lib/entry-bundler.js.map +1 -1
  165. package/lib/framework.d.ts +45 -45
  166. package/lib/framework.js +1 -1
  167. package/lib/framework.js.map +1 -1
  168. package/lib/labs/VCalendar/VCalendar.css +219 -225
  169. package/lib/labs/VCalendar/VCalendarDay.css +40 -41
  170. package/lib/labs/VCalendar/VCalendarHeader.css +13 -13
  171. package/lib/labs/VCalendar/VCalendarInterval.css +43 -42
  172. package/lib/labs/VCalendar/VCalendarIntervalEvent.css +7 -5
  173. package/lib/labs/VCalendar/VCalendarMonthDay.css +61 -58
  174. package/lib/labs/VCalendar/VCalendarMonthDay.sass +3 -2
  175. package/lib/labs/VColorInput/VColorInput.css +5 -3
  176. package/lib/labs/VColorInput/VColorInput.js +1 -1
  177. package/lib/labs/VColorInput/VColorInput.js.map +1 -1
  178. package/lib/labs/VDateInput/VDateInput.js +1 -1
  179. package/lib/labs/VDateInput/VDateInput.js.map +1 -1
  180. package/lib/labs/VFileUpload/VFileUpload.css +74 -77
  181. package/lib/labs/VFileUpload/VFileUpload.js +1 -1
  182. package/lib/labs/VFileUpload/VFileUpload.js.map +1 -1
  183. package/lib/labs/VHotkey/VHotkey.css +242 -241
  184. package/lib/labs/VIconBtn/VIconBtn.css +162 -164
  185. package/lib/labs/VPicker/VPicker.css +62 -67
  186. package/lib/labs/VStepperVertical/VStepperVertical.js +4 -4
  187. package/lib/labs/VStepperVertical/VStepperVertical.js.map +1 -1
  188. package/lib/labs/VStepperVertical/VStepperVerticalItem.js +1 -1
  189. package/lib/labs/VStepperVertical/VStepperVerticalItem.js.map +1 -1
  190. package/lib/styles/elements/_global.sass +1 -1
  191. package/lib/styles/generic/_colors.scss +3 -3
  192. package/lib/styles/generic/_layers.scss +13 -1
  193. package/lib/styles/generic/_reset.scss +0 -1
  194. package/lib/styles/generic/_transitions.scss +32 -32
  195. package/lib/styles/main.css +14677 -16153
  196. package/lib/styles/settings/_utilities.scss +0 -5
  197. package/lib/styles/settings/_variables.scss +2 -3
  198. package/lib/styles/tools/_border.sass +4 -4
  199. package/lib/styles/tools/_display.sass +0 -10
  200. package/lib/styles/tools/_elevation.sass +2 -2
  201. package/lib/styles/tools/_index.sass +0 -2
  202. package/lib/styles/tools/_layer.scss +4 -2
  203. package/lib/styles/tools/_position.sass +2 -2
  204. package/lib/styles/tools/_rounded.sass +2 -2
  205. package/lib/styles/tools/_utilities.sass +1 -5
  206. package/lib/styles/utilities/_elevation.scss +1 -1
  207. package/package.json +1 -1
  208. package/lib/styles/tools/_bootable.sass +0 -3
  209. package/lib/styles/tools/_radius.sass +0 -10
@@ -1,19 +1,20 @@
1
- .v-chip-group {
2
- display: flex;
3
- max-width: 100%;
4
- min-width: 0;
5
- overflow-x: auto;
6
- padding: 4px 0;
7
- }
8
- .v-chip-group .v-chip {
9
- margin: 4px 8px 4px 0;
10
- }
11
- .v-chip-group .v-chip.v-chip--selected:not(.v-chip--disabled) .v-chip__overlay {
12
- opacity: var(--v-activated-opacity);
13
- }
14
-
15
- .v-chip-group--column .v-slide-group__content {
16
- white-space: normal;
17
- flex-wrap: wrap;
18
- max-width: 100%;
1
+ @layer vuetify.components {
2
+ .v-chip-group {
3
+ display: flex;
4
+ max-width: 100%;
5
+ min-width: 0;
6
+ overflow-x: auto;
7
+ padding: 4px 0;
8
+ }
9
+ .v-chip-group .v-chip {
10
+ margin: 4px 8px 4px 0;
11
+ }
12
+ .v-chip-group .v-chip.v-chip--selected:not(.v-chip--disabled) .v-chip__overlay {
13
+ opacity: var(--v-activated-opacity);
14
+ }
15
+ .v-chip-group--column .v-slide-group__content {
16
+ white-space: normal;
17
+ flex-wrap: wrap;
18
+ max-width: 100%;
19
+ }
19
20
  }
@@ -1,12 +1,14 @@
1
- .v-code {
2
- background-color: rgb(var(--v-theme-code));
3
- color: rgb(var(--v-theme-on-code));
4
- border-radius: 4px;
5
- line-height: 1.8;
6
- font-size: 0.9em;
7
- font-weight: normal;
8
- padding: 0.2em 0.4em;
9
- }
10
- .v-code:has(> pre) {
11
- display: inline-block;
1
+ @layer vuetify.components {
2
+ .v-code {
3
+ background-color: rgb(var(--v-theme-code));
4
+ color: rgb(var(--v-theme-on-code));
5
+ border-radius: 4px;
6
+ line-height: 1.8;
7
+ font-size: 0.9em;
8
+ font-weight: normal;
9
+ padding: 0.2em 0.4em;
10
+ }
11
+ .v-code:has(> pre) {
12
+ display: inline-block;
13
+ }
12
14
  }
@@ -1,24 +1,24 @@
1
- .v-color-picker {
2
- align-self: flex-start;
3
- contain: content;
4
- width: 300px;
5
- }
6
- .v-color-picker.v-sheet.v-picker {
7
- 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));
8
- }
9
- .v-color-picker.v-sheet.v-picker {
10
- border-radius: 4px;
11
- }
12
-
13
- .v-color-picker__controls {
14
- display: flex;
15
- flex-direction: column;
16
- padding: 16px;
17
- }
18
-
19
- .v-color-picker--flat {
20
- box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
21
- }
22
- .v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb {
23
- box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
1
+ @layer vuetify.components {
2
+ .v-color-picker {
3
+ align-self: flex-start;
4
+ contain: content;
5
+ width: 300px;
6
+ }
7
+ .v-color-picker.v-sheet.v-picker {
8
+ 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));
9
+ }
10
+ .v-color-picker.v-sheet.v-picker {
11
+ border-radius: 4px;
12
+ }
13
+ .v-color-picker__controls {
14
+ display: flex;
15
+ flex-direction: column;
16
+ padding: 16px;
17
+ }
18
+ .v-color-picker--flat {
19
+ box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
20
+ }
21
+ .v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb {
22
+ box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
23
+ }
24
24
  }
@@ -1,23 +1,25 @@
1
- .v-color-picker-canvas {
2
- display: flex;
3
- position: relative;
4
- overflow: hidden;
5
- contain: content;
6
- touch-action: none;
7
- }
8
- .v-color-picker-canvas__dot {
9
- position: absolute;
10
- top: 0;
11
- left: 0;
12
- width: 15px;
13
- height: 15px;
14
- background: transparent;
15
- border-radius: 50%;
16
- box-shadow: 0px 0px 0px 1.5px rgb(255, 255, 255), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
17
- }
18
- .v-color-picker-canvas__dot--disabled {
19
- box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
20
- }
21
- .v-color-picker-canvas:hover .v-color-picker-canvas__dot {
22
- will-change: transform;
1
+ @layer vuetify.components {
2
+ .v-color-picker-canvas {
3
+ display: flex;
4
+ position: relative;
5
+ overflow: hidden;
6
+ contain: content;
7
+ touch-action: none;
8
+ }
9
+ .v-color-picker-canvas__dot {
10
+ position: absolute;
11
+ top: 0;
12
+ left: 0;
13
+ width: 15px;
14
+ height: 15px;
15
+ background: transparent;
16
+ border-radius: 50%;
17
+ box-shadow: 0px 0px 0px 1.5px rgb(255, 255, 255), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
18
+ }
19
+ .v-color-picker-canvas__dot--disabled {
20
+ box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
21
+ }
22
+ .v-color-picker-canvas:hover .v-color-picker-canvas__dot {
23
+ will-change: transform;
24
+ }
23
25
  }
@@ -1,29 +1,30 @@
1
- .v-color-picker-edit {
2
- display: flex;
3
- margin-top: 24px;
4
- }
5
-
6
- .v-color-picker-edit__input {
7
- width: 100%;
8
- display: flex;
9
- flex-wrap: wrap;
10
- justify-content: center;
11
- text-align: center;
12
- }
13
- .v-color-picker-edit__input:not(:last-child) {
14
- margin-inline-end: 8px;
15
- }
16
- .v-color-picker-edit__input input {
17
- border-radius: 4px;
18
- margin-bottom: 8px;
19
- min-width: 0;
20
- outline: none;
21
- text-align: center;
22
- width: 100%;
23
- height: 32px;
24
- background: rgba(var(--v-theme-surface-variant), 0.2);
25
- color: rgba(var(--v-theme-on-surface));
26
- }
27
- .v-color-picker-edit__input span {
28
- font-size: 0.75rem;
1
+ @layer vuetify.components {
2
+ .v-color-picker-edit {
3
+ display: flex;
4
+ margin-top: 24px;
5
+ }
6
+ .v-color-picker-edit__input {
7
+ width: 100%;
8
+ display: flex;
9
+ flex-wrap: wrap;
10
+ justify-content: center;
11
+ text-align: center;
12
+ }
13
+ .v-color-picker-edit__input:not(:last-child) {
14
+ margin-inline-end: 8px;
15
+ }
16
+ .v-color-picker-edit__input input {
17
+ border-radius: 4px;
18
+ margin-bottom: 8px;
19
+ min-width: 0;
20
+ outline: none;
21
+ text-align: center;
22
+ width: 100%;
23
+ height: 32px;
24
+ background: rgba(var(--v-theme-surface-variant), 0.2);
25
+ color: rgba(var(--v-theme-on-surface));
26
+ }
27
+ .v-color-picker-edit__input span {
28
+ font-size: 0.75rem;
29
+ }
29
30
  }
@@ -1,71 +1,73 @@
1
- .v-color-picker-preview__alpha .v-slider-track__background {
2
- background-color: transparent !important;
1
+ @layer vuetify.components {}
2
+ @layer vuetify.overrides {
3
+ .v-color-picker-preview__alpha .v-slider-track__background {
4
+ background-color: transparent;
5
+ }
3
6
  }
4
- .v-locale--is-ltr.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__alpha .v-slider-track__background {
5
- background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv));
7
+ @layer vuetify.components {
8
+ .v-locale--is-ltr.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__alpha .v-slider-track__background {
9
+ background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv));
10
+ }
11
+ .v-locale--is-rtl.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__alpha .v-slider-track__background {
12
+ background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv));
13
+ }
14
+ .v-color-picker-preview__alpha .v-slider-track__background::after {
15
+ content: "";
16
+ z-index: -1;
17
+ left: 0;
18
+ top: 0;
19
+ width: 100%;
20
+ height: 100%;
21
+ position: absolute;
22
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
23
+ border-radius: inherit;
24
+ }
25
+ .v-color-picker-preview__sliders {
26
+ display: flex;
27
+ flex: 1 0 auto;
28
+ flex-direction: column;
29
+ padding-inline-end: 16px;
30
+ }
31
+ .v-color-picker-preview__dot {
32
+ position: relative;
33
+ height: 30px;
34
+ width: 30px;
35
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
36
+ border-radius: 50%;
37
+ overflow: hidden;
38
+ margin-inline-end: 24px;
39
+ }
40
+ .v-color-picker-preview__dot > div {
41
+ width: 100%;
42
+ height: 100%;
43
+ }
44
+ .v-locale--is-ltr.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
45
+ background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
46
+ }
47
+ .v-locale--is-rtl.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
48
+ background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
49
+ }
50
+ .v-color-picker-preview__track {
51
+ position: relative;
52
+ width: 100%;
53
+ }
6
54
  }
7
-
8
- .v-locale--is-rtl.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__alpha .v-slider-track__background {
9
- background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv));
55
+ @layer vuetify.overrides {
56
+ .v-color-picker-preview__track {
57
+ margin: 0;
58
+ }
10
59
  }
11
-
12
- .v-color-picker-preview__alpha .v-slider-track__background::after {
13
- content: "";
14
- z-index: -1;
15
- left: 0;
16
- top: 0;
17
- width: 100%;
18
- height: 100%;
19
- position: absolute;
20
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
21
- border-radius: inherit;
22
- }
23
-
24
- .v-color-picker-preview__sliders {
25
- display: flex;
26
- flex: 1 0 auto;
27
- flex-direction: column;
28
- padding-inline-end: 16px;
29
- }
30
-
31
- .v-color-picker-preview__dot {
32
- position: relative;
33
- height: 30px;
34
- width: 30px;
35
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
36
- border-radius: 50%;
37
- overflow: hidden;
38
- margin-inline-end: 24px;
39
- }
40
- .v-color-picker-preview__dot > div {
41
- width: 100%;
42
- height: 100%;
43
- }
44
-
45
- .v-locale--is-ltr.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
46
- background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
47
- }
48
-
49
- .v-locale--is-rtl.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
50
- background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
51
- }
52
-
53
- .v-color-picker-preview__track {
54
- position: relative;
55
- width: 100%;
56
- margin: 0 !important;
57
- }
58
- .v-color-picker-preview__track .v-slider-track__fill {
59
- display: none;
60
- }
61
-
62
- .v-color-picker-preview {
63
- align-items: center;
64
- display: flex;
65
- margin-bottom: 0;
66
- }
67
-
68
- .v-color-picker-preview__eye-dropper {
69
- position: relative;
70
- margin-right: 12px;
60
+ @layer vuetify.components {
61
+ .v-color-picker-preview__track .v-slider-track__fill {
62
+ display: none;
63
+ }
64
+ .v-color-picker-preview {
65
+ align-items: center;
66
+ display: flex;
67
+ margin-bottom: 0;
68
+ }
69
+ .v-color-picker-preview__eye-dropper {
70
+ position: relative;
71
+ margin-right: 12px;
72
+ }
71
73
  }
@@ -4,7 +4,8 @@
4
4
  @include tools.layer('components')
5
5
  .v-color-picker-preview__alpha
6
6
  .v-slider-track__background
7
- background-color: transparent !important
7
+ @include tools.layer('overrides')
8
+ background-color: transparent
8
9
 
9
10
  @include tools.ltr()
10
11
  background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
@@ -54,7 +55,8 @@
54
55
  position: relative
55
56
  width: 100%
56
57
 
57
- margin: 0 !important
58
+ @include tools.layer('overrides')
59
+ margin: 0
58
60
 
59
61
  .v-slider-track__fill
60
62
  display: none
@@ -1,35 +1,35 @@
1
- .v-color-picker-swatches {
2
- overflow-y: auto;
3
- }
4
- .v-color-picker-swatches > div {
5
- display: flex;
6
- flex-wrap: wrap;
7
- justify-content: center;
8
- padding: 8px;
9
- }
10
-
11
- .v-color-picker-swatches__swatch {
12
- display: flex;
13
- flex-direction: column;
14
- margin-bottom: 10px;
15
- }
16
-
17
- .v-color-picker-swatches__color {
18
- position: relative;
19
- height: 18px;
20
- max-height: 18px;
21
- width: 45px;
22
- margin: 2px 4px;
23
- border-radius: 2px;
24
- user-select: none;
25
- overflow: hidden;
26
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
27
- cursor: pointer;
28
- }
29
- .v-color-picker-swatches__color > div {
30
- display: flex;
31
- align-items: center;
32
- justify-content: center;
33
- width: 100%;
34
- height: 100%;
1
+ @layer vuetify.components {
2
+ .v-color-picker-swatches {
3
+ overflow-y: auto;
4
+ }
5
+ .v-color-picker-swatches > div {
6
+ display: flex;
7
+ flex-wrap: wrap;
8
+ justify-content: center;
9
+ padding: 8px;
10
+ }
11
+ .v-color-picker-swatches__swatch {
12
+ display: flex;
13
+ flex-direction: column;
14
+ margin-bottom: 10px;
15
+ }
16
+ .v-color-picker-swatches__color {
17
+ position: relative;
18
+ height: 18px;
19
+ max-height: 18px;
20
+ width: 45px;
21
+ margin: 2px 4px;
22
+ border-radius: 2px;
23
+ user-select: none;
24
+ overflow: hidden;
25
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
26
+ cursor: pointer;
27
+ }
28
+ .v-color-picker-swatches__color > div {
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ width: 100%;
33
+ height: 100%;
34
+ }
35
35
  }
@@ -1,85 +1,86 @@
1
- .v-combobox--chips.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating,
2
- .v-combobox--chips.v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating,
3
- .v-combobox--chips.v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating,
4
- .v-combobox--chips.v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
5
- top: 0px;
6
- }
7
- .v-combobox .v-field .v-text-field__prefix,
8
- .v-combobox .v-field .v-text-field__suffix,
9
- .v-combobox .v-field .v-field__input, .v-combobox .v-field.v-field {
10
- cursor: text;
11
- }
12
- .v-combobox .v-field .v-field__input > input {
13
- flex: 1 1;
14
- }
15
- .v-combobox .v-field input {
16
- min-width: 64px;
17
- }
18
- .v-combobox .v-field:not(.v-field--focused) input {
19
- min-width: 0;
20
- }
21
- .v-combobox .v-field--dirty .v-combobox__selection {
22
- margin-inline-end: 2px;
23
- }
24
- .v-combobox .v-combobox__selection-text {
25
- overflow: hidden;
26
- text-overflow: ellipsis;
27
- white-space: nowrap;
28
- }
29
-
30
- .v-combobox__content {
31
- overflow: hidden;
32
- }
33
- .v-combobox__content {
34
- box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
35
- }
36
- .v-combobox__content {
37
- border-radius: 4px;
38
- }
39
- .v-combobox__mask {
40
- background: rgb(var(--v-theme-surface-light));
41
- }
42
- .v-combobox__selection {
43
- display: inline-flex;
44
- align-items: center;
45
- height: 1.5rem;
46
- letter-spacing: inherit;
47
- line-height: inherit;
48
- max-width: calc(100% - 2px - 2px);
49
- }
50
- .v-combobox__selection:first-child {
51
- margin-inline-start: 0;
52
- }
53
- .v-combobox--selecting-index .v-combobox__selection {
54
- opacity: var(--v-medium-emphasis-opacity);
55
- }
56
- .v-combobox--selecting-index .v-combobox__selection--selected {
57
- opacity: 1;
58
- }
59
- .v-combobox--selecting-index .v-field__input > input {
60
- caret-color: transparent;
61
- }
62
- .v-combobox--single:not(.v-combobox--selection-slot).v-text-field input {
63
- flex: 1 1;
64
- position: absolute;
65
- left: 0;
66
- right: 0;
67
- width: 100%;
68
- padding-inline: inherit;
69
- }
70
- .v-combobox--single:not(.v-combobox--selection-slot) .v-field--active input {
71
- transition: none;
72
- }
73
- .v-combobox--single:not(.v-combobox--selection-slot) .v-field--dirty:not(.v-field--focused) input {
74
- opacity: 0;
75
- }
76
- .v-combobox--single:not(.v-combobox--selection-slot) .v-field--focused .v-combobox__selection {
77
- opacity: 0;
78
- }
79
- .v-combobox__menu-icon {
80
- margin-inline-start: 4px;
81
- transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
82
- }
83
- .v-combobox--active-menu .v-combobox__menu-icon {
84
- transform: rotate(180deg);
1
+ @layer vuetify.components {
2
+ .v-combobox--chips.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating,
3
+ .v-combobox--chips.v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating,
4
+ .v-combobox--chips.v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating,
5
+ .v-combobox--chips.v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
6
+ top: 0px;
7
+ }
8
+ .v-combobox .v-field .v-text-field__prefix,
9
+ .v-combobox .v-field .v-text-field__suffix,
10
+ .v-combobox .v-field .v-field__input, .v-combobox .v-field.v-field {
11
+ cursor: text;
12
+ }
13
+ .v-combobox .v-field .v-field__input > input {
14
+ flex: 1 1;
15
+ }
16
+ .v-combobox .v-field input {
17
+ min-width: 64px;
18
+ }
19
+ .v-combobox .v-field:not(.v-field--focused) input {
20
+ min-width: 0;
21
+ }
22
+ .v-combobox .v-field--dirty .v-combobox__selection {
23
+ margin-inline-end: 2px;
24
+ }
25
+ .v-combobox .v-combobox__selection-text {
26
+ overflow: hidden;
27
+ text-overflow: ellipsis;
28
+ white-space: nowrap;
29
+ }
30
+ .v-combobox__content {
31
+ overflow: hidden;
32
+ }
33
+ .v-combobox__content {
34
+ box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
35
+ }
36
+ .v-combobox__content {
37
+ border-radius: 4px;
38
+ }
39
+ .v-combobox__mask {
40
+ background: rgb(var(--v-theme-surface-light));
41
+ }
42
+ .v-combobox__selection {
43
+ display: inline-flex;
44
+ align-items: center;
45
+ height: 1.5rem;
46
+ letter-spacing: inherit;
47
+ line-height: inherit;
48
+ max-width: calc(100% - 2px - 2px);
49
+ }
50
+ .v-combobox__selection:first-child {
51
+ margin-inline-start: 0;
52
+ }
53
+ .v-combobox--selecting-index .v-combobox__selection {
54
+ opacity: var(--v-medium-emphasis-opacity);
55
+ }
56
+ .v-combobox--selecting-index .v-combobox__selection--selected {
57
+ opacity: 1;
58
+ }
59
+ .v-combobox--selecting-index .v-field__input > input {
60
+ caret-color: transparent;
61
+ }
62
+ .v-combobox--single:not(.v-combobox--selection-slot).v-text-field input {
63
+ flex: 1 1;
64
+ position: absolute;
65
+ left: 0;
66
+ right: 0;
67
+ width: 100%;
68
+ padding-inline: inherit;
69
+ }
70
+ .v-combobox--single:not(.v-combobox--selection-slot) .v-field--active input {
71
+ transition: none;
72
+ }
73
+ .v-combobox--single:not(.v-combobox--selection-slot) .v-field--dirty:not(.v-field--focused) input {
74
+ opacity: 0;
75
+ }
76
+ .v-combobox--single:not(.v-combobox--selection-slot) .v-field--focused .v-combobox__selection {
77
+ opacity: 0;
78
+ }
79
+ .v-combobox__menu-icon {
80
+ margin-inline-start: 4px;
81
+ transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
82
+ }
83
+ .v-combobox--active-menu .v-combobox__menu-icon {
84
+ transform: rotate(180deg);
85
+ }
85
86
  }