@codecademy/gamut
73.3.073.3.1-alpha.0e5de6.0
dist/Pagination/styles.js~
dist/Pagination/styles.jsModified+11−11
Index: package/dist/Pagination/styles.js
===================================================================
--- package/dist/Pagination/styles.js
+++ package/dist/Pagination/styles.js
@@ -1,43 +1,43 @@
import { states, theme, transitionConcat } from '@codecademy/gamut-styles';
import { templateVariants } from '../Button/shared/styles';
-import { ButtonSelectors } from '../ButtonBase/ButtonBase';
+import { InteractiveSelectors } from '../ButtonBase/ButtonBase';
const paginationBaseStyles = {
color: 'text',
fontSize: 16,
height: 40,
mx: 4,
width: 40,
- [ButtonSelectors.ACTIVE]: {
+ [InteractiveSelectors.ACTIVE]: {
fontWeight: 'title',
color: 'text'
},
- [ButtonSelectors.DISABLED]: {
+ [InteractiveSelectors.DISABLED]: {
color: 'text-disabled',
bg: 'transparent'
},
- [ButtonSelectors.OUTLINE]: {
+ [InteractiveSelectors.OUTLINE]: {
borderColor: 'border-primary'
},
- [ButtonSelectors.SHADOW_ACTIVE]: {
+ [InteractiveSelectors.SHADOW_ACTIVE]: {
opacity: 0
},
- [ButtonSelectors.SHADOW_HOVER]: {
+ [InteractiveSelectors.SHADOW_HOVER]: {
opacity: 0
}
};
export const paginationTextVariant = templateVariants(['secondary'], () => ({
...paginationBaseStyles,
borderColor: 'transparent',
- [ButtonSelectors.ACTIVE]: {
+ [InteractiveSelectors.ACTIVE]: {
fontWeight: 'title',
color: 'text',
bg: 'background-selected'
},
- [ButtonSelectors.SHADOW]: {
+ [InteractiveSelectors.SHADOW]: {
transition: transitionConcat(['opacity'], 'fast', 'ease-in')
},
- [ButtonSelectors.HOVER]: {
+ [InteractiveSelectors.HOVER]: {
transition: transitionConcat(['background-color', 'font-weight'], 'fast', 'ease-in'),
fontWeight: 'title',
bg: 'background-selected'
}
@@ -50,12 +50,12 @@
}
});
export const paginationStrokeVariant = templateVariants(['secondary'], () => ({
...paginationBaseStyles,
- [ButtonSelectors.ACTIVE]: {
+ [InteractiveSelectors.ACTIVE]: {
borderColor: 'currentColor'
},
- [ButtonSelectors.SHADOW]: {
+ [InteractiveSelectors.SHADOW]: {
transition: transitionConcat(['opacity', 'border-color'], 'fast', 'ease-in')
},
'&:hover': {
transition: transitionConcat(['color', 'font-weight'], 'fast', 'ease-in'),