@robuust-digital/vue-components 1.2.3 → 1.2.4
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.
|
@@ -23,6 +23,8 @@ export default (theme) => ({
|
|
|
23
23
|
'--rvc-base-border-color': theme('colors.slate.200'),
|
|
24
24
|
'--rvc-base-border-dark-color': theme('colors.slate.300'),
|
|
25
25
|
'--rvc-base-box-shadow': 'none',
|
|
26
|
+
'--rvc-base-font-size': '0.9375rem',
|
|
27
|
+
'--rvc-base-line-height': '1.5rem',
|
|
26
28
|
|
|
27
29
|
// Base Dialog styling
|
|
28
30
|
'--rvc-dialog-backdrop-bg-color': withAlphaValue(theme('colors.slate.900'), 0.5),
|
|
@@ -40,6 +42,14 @@ export default (theme) => ({
|
|
|
40
42
|
'--rvc-dialog-footer-bg-color': theme('colors.slate.50'),
|
|
41
43
|
'--rvc-dialog-footer-gap': theme('gap.2'),
|
|
42
44
|
|
|
45
|
+
// Base Input styling
|
|
46
|
+
'--rvc-input-color': theme('colors.slate.600'),
|
|
47
|
+
'--rvc-input-bg-color': theme('colors.white'),
|
|
48
|
+
'--rvc-input-icon-color': theme('colors.slate.400'),
|
|
49
|
+
'--rvc-input-icon-size': theme('width.5'),
|
|
50
|
+
'--rvc-input-padding-y': theme('padding[1.5]'),
|
|
51
|
+
'--rvc-input-padding-x': theme('padding.8'),
|
|
52
|
+
|
|
43
53
|
...theme('components.base'),
|
|
44
54
|
|
|
45
55
|
[`@media (min-width: ${theme('screens.sm')})`]: {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select component
|
|
3
|
+
*
|
|
4
|
+
* @param {Object} theme - The global theme object
|
|
5
|
+
*/
|
|
6
|
+
export default (theme) => ({
|
|
7
|
+
':root': {
|
|
8
|
+
'--rvc-select-border-radius': 'var(--rvc-base-border-radius)',
|
|
9
|
+
'--rvc-select-border-width': 'var(--rvc-base-border-width)',
|
|
10
|
+
'--rvc-select-border-color': 'var(--rvc-base-border-color)',
|
|
11
|
+
'--rvc-select-font-size': 'var(--rvc-base-font-size)',
|
|
12
|
+
'--rvc-select-box-shadow': 'var(--rvc-base-box-shadow)',
|
|
13
|
+
'--rvc-select-color': 'var(--rvc-input-color)',
|
|
14
|
+
'--rvc-select-bg-color': 'var(--rvc-input-bg-color)',
|
|
15
|
+
'--rvc-select-icon-size': 'var(--rvc-input-icon-size)',
|
|
16
|
+
'--rvc-select-icon-color': 'var(--rvc-input-icon-color)',
|
|
17
|
+
'--rvc-select-padding-y': 'var(--rvc-input-padding-y)',
|
|
18
|
+
'--rvc-select-padding-x': 'var(--rvc-input-padding-x)',
|
|
19
|
+
'--rvc-select-line-height': '1.375rem',
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
'.rvc-select': {
|
|
23
|
+
display: 'grid',
|
|
24
|
+
gridTemplateColumns: theme('gridTemplateColumns.1'),
|
|
25
|
+
...theme('components.select'),
|
|
26
|
+
|
|
27
|
+
select: {
|
|
28
|
+
borderRadius: 'var(--rvc-select-border-radius)',
|
|
29
|
+
borderWidth: 'var(--rvc-select-border-width)',
|
|
30
|
+
borderColor: 'var(--rvc-select-border-color)',
|
|
31
|
+
paddingTop: 'var(--rvc-select-padding-y)',
|
|
32
|
+
paddingRight: 'var(--rvc-select-padding-x)',
|
|
33
|
+
paddingBottom: 'var(--rvc-select-padding-y)',
|
|
34
|
+
paddingLeft: 'calc(var(--rvc-select-padding-x) - var(--rvc-select-icon-size))',
|
|
35
|
+
backgroundColor: 'var(--rvc-select-bg-color)',
|
|
36
|
+
fontSize: 'var(--rvc-select-font-size)',
|
|
37
|
+
lineHeight: 'var(--rvc-select-line-height)',
|
|
38
|
+
color: 'var(--rvc-select-color)',
|
|
39
|
+
boxShadow: 'var(--rvc-select-box-shadow)',
|
|
40
|
+
width: '100%',
|
|
41
|
+
gridColumnStart: '1',
|
|
42
|
+
gridRowStart: '1',
|
|
43
|
+
appearance: 'none',
|
|
44
|
+
outlineWidth: 0,
|
|
45
|
+
...theme('components.select.select'),
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
svg: {
|
|
49
|
+
width: 'var(--rvc-select-icon-size)',
|
|
50
|
+
height: 'var(--rvc-select-icon-size)',
|
|
51
|
+
marginRight: 'calc(var(--rvc-select-padding-x) - var(--rvc-select-icon-size) - 2px)',
|
|
52
|
+
color: 'var(--rvc-select-icon-color)',
|
|
53
|
+
gridColumnStart: '1',
|
|
54
|
+
gridRowStart: '1',
|
|
55
|
+
alignSelf: 'center',
|
|
56
|
+
justifySelf: 'end',
|
|
57
|
+
pointerEvents: 'none',
|
|
58
|
+
...theme('components.select.svg'),
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
});
|
package/dist/tailwind/index.js
CHANGED
|
@@ -12,6 +12,7 @@ import checkbox from './components/checkbox.js';
|
|
|
12
12
|
import drawer from './components/drawer.js';
|
|
13
13
|
import lightswitch from './components/lightswitch.js';
|
|
14
14
|
import modal from './components/modal.js';
|
|
15
|
+
import select from './components/select.js';
|
|
15
16
|
import table from './components/table.js';
|
|
16
17
|
import tooltip from './components/tooltip.js';
|
|
17
18
|
|
|
@@ -37,6 +38,7 @@ export default plugin.withOptions(
|
|
|
37
38
|
drawer(theme),
|
|
38
39
|
lightswitch(theme),
|
|
39
40
|
modal(theme),
|
|
41
|
+
select(theme),
|
|
40
42
|
table(theme),
|
|
41
43
|
tooltip(theme),
|
|
42
44
|
], { respectPrefix: false });
|
|
@@ -54,6 +56,7 @@ export default plugin.withOptions(
|
|
|
54
56
|
'rvc-drawer',
|
|
55
57
|
'rvc-lightswitch-group',
|
|
56
58
|
'rvc-modal',
|
|
59
|
+
'rvc-select',
|
|
57
60
|
'rvc-table',
|
|
58
61
|
'rvc-tooltip',
|
|
59
62
|
],
|