mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
cf38eef3b8
#4272 Menu Items Alignment and Display Icons Correctly if Creating New Process in Tablet View
69 lines
2.4 KiB
JavaScript
69 lines
2.4 KiB
JavaScript
const plugin = require('tailwindcss/plugin');
|
|
|
|
module.exports = plugin(function ({ addComponents, theme, addBase, matchUtilities }) {
|
|
addBase({
|
|
'.menu': {
|
|
'--menu-background': theme('colors.components.menu.DEFAULT'),
|
|
'--menu-content': theme('colors.components.menu.content'),
|
|
'--menu-item-height': theme('spacing.12'),
|
|
'--menu-item-padding': `${theme('spacing.1')} ${theme('spacing.3')}`,
|
|
'--menu-border-radius': theme('borderRadius.DEFAULT'),
|
|
'--menu-item-hover-background': theme('colors.components.menu.hover.DEFAULT'),
|
|
'--menu-item-hover-content': theme('colors.components.menu.hover.content'),
|
|
'--menu-item-hover-border': theme('colors.components.menu.hover.border'),
|
|
'--menu-item-seperator': theme('colors.components.menu.seperator'),
|
|
'--menu-shadow': '0 0.375rem 1.5rem rgba(206, 212, 219, 0.8)',
|
|
},
|
|
});
|
|
|
|
addComponents({
|
|
'.menu': {
|
|
display: 'inline-flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: 'var(--menu-background)',
|
|
color: 'var(--menu-content)',
|
|
borderRadius: 'var(--menu-border-radius)',
|
|
boxShadow: 'var(--menu-shadow)',
|
|
},
|
|
'.menu-item': {
|
|
display: 'inline-flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'left',
|
|
height: 'var(--menu-item-height)',
|
|
padding: 'var(--menu-item-padding)',
|
|
backgroundColor: 'var(--menu-background)',
|
|
color: 'var(--menu-content)',
|
|
border: '1px solid var(--menu-background)',
|
|
position: 'relative',
|
|
'&:not(:first-child)::before': {
|
|
position: 'absolute',
|
|
top: '-0.063rem',
|
|
left: '0.75rem',
|
|
right: '0.75rem',
|
|
content: '""',
|
|
display: 'block',
|
|
height: '0.125rem',
|
|
backgroundColor: 'var(--menu-item-seperator)',
|
|
},
|
|
'&:first-child': {
|
|
borderTopLeftRadius: 'var(--menu-border-radius)',
|
|
borderTopRightRadius: 'var(--menu-border-radius)',
|
|
},
|
|
'&:last-child': {
|
|
borderBottomLeftRadius: 'var(--menu-border-radius)',
|
|
borderBottomRightRadius: 'var(--menu-border-radius)',
|
|
},
|
|
'&:hover, &:active, &.active': {
|
|
backgroundColor: 'var(--menu-item-hover-background)',
|
|
color: 'var(--menu-item-hover-content)',
|
|
borderRadius: 'var(--menu-border-radius)',
|
|
borderColor: 'var(--menu-item-hover-border)',
|
|
'&::before': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|