@vue-interface/dropdown-menu 2.0.0-beta.12 → 2.0.0-beta.13
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/package.json +1 -1
- package/tailwindcss/index.cjs +27 -88
package/package.json
CHANGED
package/tailwindcss/index.cjs
CHANGED
|
@@ -35,7 +35,7 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
35
35
|
padding: '.5rem 0',
|
|
36
36
|
// margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
|
|
37
37
|
fontSize: '1rem',
|
|
38
|
-
color: 'inherit',
|
|
38
|
+
// color: 'inherit',
|
|
39
39
|
textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
|
40
40
|
listStyle: 'none',
|
|
41
41
|
backgroundColor: colors.white,
|
|
@@ -44,6 +44,9 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
44
44
|
borderRadius: '.25rem',
|
|
45
45
|
boxShadow: `0 .25rem 1rem rgba(0, 0, 0, .5)`,
|
|
46
46
|
|
|
47
|
+
'@apply dark:bg-neutral-800': {},
|
|
48
|
+
'@apply dark:border-neutral-700': {},
|
|
49
|
+
|
|
47
50
|
// The dropdown wrapper (`<div>`)
|
|
48
51
|
'.dropup:has(&), .dropright:has(&), .dropdown:has(&), .dropleft:has(&)': {
|
|
49
52
|
position: 'relative'
|
|
@@ -59,33 +62,39 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
59
62
|
// Links, buttons, and more within the dropdown menu
|
|
60
63
|
//
|
|
61
64
|
// `<button>`-specific styles are denoted with `// For <button>s`
|
|
62
|
-
'.dropdown-item, & > :not(.dropdown-header, .dropdown-item-text, .dropdown-item-plain)': {
|
|
65
|
+
'.dropdown-item, & > :not(.dropdown-header, .dropdown-item-text, .dropdown-item-plain, .dropdown-divider)': {
|
|
63
66
|
display: 'block',
|
|
64
67
|
width: '100%', // For `<button>`s
|
|
65
68
|
padding: '.25rem 1rem',
|
|
66
69
|
clear: 'both',
|
|
67
70
|
fontWeight: 'normal',
|
|
68
|
-
color: theme('colors.
|
|
71
|
+
color: theme('colors.neutral.800', colors.neutral[800]),
|
|
69
72
|
textAlign: 'inherit', // For `<button>`s
|
|
70
73
|
textDecoration: 'none',
|
|
71
74
|
whiteSpace: 'nowrap', // prevent links from randomly breaking onto new lines
|
|
72
75
|
backgroundColor: 'transparent', // For `<button>`s
|
|
73
76
|
border: 0, // For `<button>`s
|
|
74
77
|
|
|
78
|
+
'@apply dark:text-neutral-300': {},
|
|
79
|
+
|
|
75
80
|
'&:hover, &:focus': {
|
|
76
|
-
color: theme('colors.
|
|
81
|
+
color: theme('colors.neutral.800', colors.neutral[900]),
|
|
77
82
|
textDecoration: 'none',
|
|
78
|
-
backgroundColor: theme('colors.
|
|
83
|
+
backgroundColor: theme('colors.neutral.100', colors.neutral[100]),
|
|
84
|
+
|
|
85
|
+
'@apply dark:bg-neutral-600 dark:text-neutral-200': {}
|
|
79
86
|
},
|
|
80
87
|
|
|
81
88
|
'&.active, &:active': {
|
|
82
89
|
color: theme('colors.white', colors.white),
|
|
83
90
|
textDecoration: 'none',
|
|
84
|
-
backgroundColor: theme('variations.primary', colors.blue[500])
|
|
91
|
+
backgroundColor: theme('variations.primary', colors.blue[500]),
|
|
92
|
+
|
|
93
|
+
'@apply dark:bg-blue-500 dark:text-neutral-200': {}
|
|
85
94
|
},
|
|
86
95
|
|
|
87
96
|
'&.disabled, &:disabled': {
|
|
88
|
-
color: theme('colors.
|
|
97
|
+
color: theme('colors.neutral.500', colors.neutral[500]),
|
|
89
98
|
pointerEvents: 'none',
|
|
90
99
|
backgroundColor: 'transparent',
|
|
91
100
|
backgroundImage: 'none'
|
|
@@ -99,8 +108,10 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
99
108
|
marginBottom: 0, // for use with heading elements
|
|
100
109
|
fontSize: '.875rem',
|
|
101
110
|
fontWeight: 'bold',
|
|
102
|
-
color: theme('colors.
|
|
103
|
-
whiteSpace: 'nowrap' // as with > li > a
|
|
111
|
+
color: theme('colors.neutral.500', colors.neutral[500]),
|
|
112
|
+
whiteSpace: 'nowrap', // as with > li > a
|
|
113
|
+
|
|
114
|
+
'@apply dark:text-neutral-400': {},
|
|
104
115
|
},
|
|
105
116
|
|
|
106
117
|
// Dividers (basically an `<hr>`) within the dropdown
|
|
@@ -108,14 +119,18 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
108
119
|
height: 0,
|
|
109
120
|
margin: 'calc(.125rem / 2) 0',
|
|
110
121
|
overflow: 'hidden',
|
|
111
|
-
borderTop: `1px solid ${theme('colors.
|
|
122
|
+
borderTop: `1px solid ${theme('colors.neutral.200', colors.neutral[200])}`,
|
|
123
|
+
|
|
124
|
+
'@apply dark:border-neutral-700': {},
|
|
112
125
|
},
|
|
113
126
|
|
|
114
127
|
// Dropdown text
|
|
115
128
|
'.dropdown-item-text': {
|
|
116
129
|
display: 'block',
|
|
117
130
|
padding: '.25rem 1rem',
|
|
118
|
-
color: theme('colors.
|
|
131
|
+
color: theme('colors.neutral.800', colors.neutral[800]),
|
|
132
|
+
|
|
133
|
+
'@apply dark:text-neutral-200': {},
|
|
119
134
|
},
|
|
120
135
|
|
|
121
136
|
'&.show': {
|
|
@@ -130,83 +145,7 @@ module.exports = plugin(function({ addComponents, theme }) {
|
|
|
130
145
|
'&.dropdown-menu-right': {
|
|
131
146
|
right: 0,
|
|
132
147
|
left: 'auto'
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// '.dropdown-toggle': {
|
|
136
|
-
// whiteSpace: 'nowrap',
|
|
137
|
-
// },
|
|
138
|
-
|
|
139
|
-
// '.dropdown-toggle::after': {
|
|
140
|
-
// display: 'inline-block',
|
|
141
|
-
// marginLeft: '.3em',
|
|
142
|
-
// verticalAlign: 'calc(.3em * .85)',
|
|
143
|
-
// content: '""',
|
|
144
|
-
// borderTop: '.3em solid',
|
|
145
|
-
// borderRight: '.3em solid transparent',
|
|
146
|
-
// borderBottom: 0,
|
|
147
|
-
// borderLeft: '.3em solid transparent'
|
|
148
|
-
// },
|
|
149
|
-
|
|
150
|
-
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
151
|
-
// Just add .dropup after the standard .dropdown class and you're set.
|
|
152
|
-
'.dropup &': {
|
|
153
|
-
top: 'auto',
|
|
154
|
-
bottom: '100%',
|
|
155
|
-
marginTop: 0,
|
|
156
|
-
},
|
|
157
|
-
|
|
158
|
-
// '.dropup .dropdown-toggle::after': {
|
|
159
|
-
// display: 'inline-block',
|
|
160
|
-
// marginLeft: '.3em',
|
|
161
|
-
// verticalAlign: 'calc(.3em * .85)',
|
|
162
|
-
// content: '""',
|
|
163
|
-
// borderTop: 0,
|
|
164
|
-
// borderRight: '.3em solid transparent',
|
|
165
|
-
// borderBottom: '.3em solid',
|
|
166
|
-
// borderLeft: '.3em solid transparent'
|
|
167
|
-
// },
|
|
168
|
-
|
|
169
|
-
'.dropright &': {
|
|
170
|
-
top: 0,
|
|
171
|
-
right: 'auto',
|
|
172
|
-
left: '100%',
|
|
173
|
-
marginTop: 0,
|
|
174
|
-
},
|
|
175
|
-
|
|
176
|
-
// '.dropright .dropdown-toggle::after': {
|
|
177
|
-
// display: 'inline-block',
|
|
178
|
-
// marginLeft: '.3em',
|
|
179
|
-
// verticalAlign: 'calc(.3em * .85)',
|
|
180
|
-
// content: '""',
|
|
181
|
-
// borderTop: '.3em solid transparent',
|
|
182
|
-
// borderRight: 0,
|
|
183
|
-
// borderBottom: '.3em solid transparent',
|
|
184
|
-
// borderLeft: '.3em solid',
|
|
185
|
-
// verticalAlign: 0
|
|
186
|
-
// },
|
|
187
|
-
|
|
188
|
-
'.dropleft &': {
|
|
189
|
-
top: 0,
|
|
190
|
-
right: '100%',
|
|
191
|
-
left: 'auto',
|
|
192
|
-
marginTop: 0,
|
|
193
|
-
},
|
|
194
|
-
|
|
195
|
-
// '.dropleft .dropdown-toggle::after': {
|
|
196
|
-
// display: 'none'
|
|
197
|
-
// },
|
|
198
|
-
|
|
199
|
-
// '.dropleft .dropdown-toggle::before': {
|
|
200
|
-
// display: 'inline-block',
|
|
201
|
-
// marginRight: '.3em',
|
|
202
|
-
// verticalAlign: 'calc(.3em * .85)',
|
|
203
|
-
// content: '""',
|
|
204
|
-
// borderTop: '.3em solid transparent',
|
|
205
|
-
// borderLeft: 0,
|
|
206
|
-
// borderBottom: '.3em solid transparent',
|
|
207
|
-
// borderRight: '.3em solid',
|
|
208
|
-
// verticalAlign: 0
|
|
209
|
-
// },
|
|
148
|
+
}
|
|
210
149
|
}
|
|
211
150
|
}
|
|
212
151
|
})
|