Merge 0da0946 into 967e719

helpscout · Feb 17, 2021 · d2d60ef · d2d60ef
2 parents 967e719 + 0da0946
commit d2d60ef
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/components/CheckMarkCard/CheckMarkCard.css.js b/src/components/CheckMarkCard/CheckMarkCard.css.js
@@ -1,7 +1,8 @@
-import styled from 'styled-components'
-import { getColor } from '../../styles/utilities/color'
 import { d400, d400Effect } from '../../styles/mixins/depth.css'
+
+import { getColor } from '../../styles/utilities/color'
 import { rgba } from '../../utilities/color'
+import styled from 'styled-components'
 
 export const CheckMarkCardUI = styled('label')`
   box-sizing: border-box;
@@ -16,6 +17,8 @@ export const CheckMarkCardUI = styled('label')`
   min-height: 100px;
   border-radius: 4px;
   ${d400}
+  will-change: transform, box-shadow;
+  transition: transform 0.16s ease-in-out, box-shadow 0.16s ease-in-out;
   cursor: pointer;
 
   &:hover {
@@ -36,9 +39,11 @@ export const CheckMarkCardUI = styled('label')`
     color: ${rgba(getColor('charcoal.500'), 0.85)};
     opacity: 0.8;
     cursor: not-allowed;
+    transition: none;
 
     &:hover {
       ${d400}
+      transition: none;
       transform: translateY(0);
     }
   }
@@ -63,9 +68,9 @@ export const MarkUI = styled('div')`
   width: 28px;
   border-radius: 4px 0px 5px;
   opacity: ${({ markShown }) => (markShown ? '1' : '0')};
-  transition: opacity 0.15s;
+  transition: opacity 0.15s cubic-bezier(0.55, 0, 1, 0.45);
   will-change: opacity;
-  background: ${({ color }) => color};
+  background-color: ${({ color }) => color};
   z-index: 100;
 
   .mark-icon {

diff --git a/src/components/CheckMarkCard/CheckMarkCard.jsx b/src/components/CheckMarkCard/CheckMarkCard.jsx
@@ -1,14 +1,15 @@
-import React from 'react'
+import { CheckMarkCardUI, MarkUI } from './CheckMarkCard.css'
+
+import Checkbox from '../Checkbox'
+import Icon from '../Icon'
 import PropTypes from 'prop-types'
+import React from 'react'
+import Tooltip from '../Tooltip'
+import VisuallyHidden from '../VisuallyHidden'
 import { classNames } from '../../utilities/classNames'
 import { createUniqueIDFactory } from '../../utilities/id'
-import { noop } from '../../utilities/other'
 import { getColor } from '../../styles/utilities/color'
-import Icon from '../Icon'
-import Checkbox from '../Checkbox'
-import Tooltip from '../Tooltip'
-import VisuallyHidden from '../VisuallyHidden'
-import { CheckMarkCardUI, MarkUI } from './CheckMarkCard.css'
+import { noop } from '../../utilities/other'
 
 const uniqueID = createUniqueIDFactory('CheckMarkCard')