RD Shell - Navigation

tailwind-plugins/button.plugin.js

@@ -1,6 +1,72 @@
 const plugin = require('tailwindcss/plugin');
 
-module.exports = plugin(function ({ addComponents, theme }) {
+module.exports = plugin(function ({ addComponents, theme, addBase, addUtilities }) {
+  addBase({
+    '.btn': {
+      '--btn-height': theme('spacing.12'),
+      '--btn-padding': `${theme('spacing.1')} ${theme('spacing.4')}`,
+      '--btn-min-width': theme('spacing.12'),
+      '--btn-background-color': theme('colors.components.button.DEFAULT'),
+      '--btn-color': theme('colors.components.button.content'),
+      '--btn-border-radius': theme('borderRadius.button'),
+      '--btn-hover-background-color': theme('colors.components.button.hover.DEFAULT'),
+      '--btn-hover-color': theme('colors.components.button.hover.content'),
+      '--btn-active-background-color': theme('colors.components.button.active.DEFAULT'),
+      '--btn-active-color': theme('colors.components.button.active.content'),
+      '--btn-disabled-background-color': theme('colors.components.button.disabled.DEFAULT'),
+      '--btn-disabled-color': theme('colors.components.button.disabled.content'),
+    },
+    '.btn-icon': {
+      '--btn-padding': theme('spacing.0'),
+    },
+    '.btn-light': {
+      '--btn-background-color': theme('colors.button.light.DEFAULT'),
+      '--btn-color': theme('colors.button.light.content'),
+    },
+  });
+
+  for (const key in theme('colors.accent')) {
+    addUtilities({
+      [`.btn-accent-${key}`]: {
+        '--btn-background-color': theme(`colors.accent.${key}.DEFAULT`),
+        '--btn-color': theme(`colors.accent.${key}.content`),
+        '--btn-hover-background-color': theme(`colors.accent.${key}.hover.DEFAULT`),
+        '--btn-hover-color': theme(`colors.accent.${key}.hover.content`),
+        '--btn-active-background-color': theme(`colors.accent.${key}.active.DEFAULT`),
+        '--btn-active-color': theme(`colors.accent.${key}.active.content`),
+      },
+    });
+  }
+
+  addComponents({
+    '.btn': {
+      display: 'inline-grid',
+      placeItems: 'center',
+      gridGap: theme('spacing.2'),
+      gridAutoFlow: 'column',
+      padding: 'var(--btn-padding)',
+      height: 'var(--btn-height)',
+      minWidth: 'var(--btn-min-width)',
+      backgroundColor: 'var(--btn-background-color)',
+      color: 'var(--btn-color)',
+      borderRadius: 'var(--btn-border-radius)',
+      '&:hover': {
+        backgroundColor: 'var(--btn-hover-background-color)',
+        color: 'var(--btn-hover-color)',
+      },
+      '&:active': {
+        backgroundColor: 'var(--btn-active-background-color)',
+        color: 'var(--btn-active-color)',
+      },
+      '&:disabled': {
+        backgroundColor: 'var(--btn-disabled-background-color)',
+        color: 'var(--btn-disabled-color)',
+        cursor: 'default',
+      },
+    },
+  });
+
+  /** Bitte nicht mehr benutzen!! */
   addComponents({
     '.isa-button, .isa-cta-button, .isa-icon-button': {
       display: 'inline-block',

tailwind-plugins/menu.plugin.js

@@ -0,0 +1,68 @@
+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.menu'),
+      '--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: 'center',
+      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',
+        },
+      },
+    },
+  });
+});

tailwind-plugins/section.plugin.js

@@ -0,0 +1,7 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(function ({ addComponents, theme, addBase, matchUtilitie, addVariant }) {
+  addVariant('customer', ['[data-section="customer"] &', '[data-section="customer"]&']);
+
+  addVariant('branch', ['[data-section="branch"] &', '[data-section="branch"]&']);
+});