@porsche-design-system/components-js
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
33 lines (29 loc) • 1.43 kB
JavaScript
;
var borderRadiusSmall = require('../border/borderRadiusSmall.cjs');
var borderRadiusMedium = require('../border/borderRadiusMedium.cjs');
var motionDurationShort = require('../motion/motionDurationShort.cjs');
var motionEasingBase = require('../motion/motionEasingBase.cjs');
var themeLightStateHover = require('../theme/themeLightStateHover.cjs');
const offsetHorizontal = '2px';
const getHoverStyles = (borderRadius = 'small') => {
const borderRadiusValue = borderRadius === 'small'
? borderRadiusSmall.borderRadiusSmall
: borderRadius === 'medium'
? borderRadiusMedium.borderRadiusMedium
: borderRadius || borderRadiusSmall.borderRadiusSmall;
return {
borderRadius: borderRadiusValue, // it's visually being reflected on both (when placed here), element and hover
marginLeft: `-${offsetHorizontal}`,
marginRight: `-${offsetHorizontal}`,
paddingLeft: offsetHorizontal,
paddingRight: offsetHorizontal,
transition: `background var(--p-transition-duration, ${motionDurationShort.motionDurationShort}) ${motionEasingBase.motionEasingBase}`,
};
};
const getHoverNestedStyles = () => {
return {
background: themeLightStateHover.themeLightStateHover, // hover color is equal for light and dark theme
};
};
exports.getHoverNestedStyles = getHoverNestedStyles;
exports.getHoverStyles = getHoverStyles;