[base] Fix ChangeBar CSS

sanity-io · Oct 6, 2020 · 1079ae3 · 1079ae3
1 parent e09b66a
commit 1079ae3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/@sanity/base/src/change-indicators/ChangeBar.css b/packages/@sanity/base/src/change-indicators/ChangeBar.css
@@ -19,8 +19,9 @@
   opacity: 1;
   transition: opacity 100ms;
 
-  @nest .root:not([data-changed]) {
+  @nest .root:not([data-changed]) > & {
     opacity: 0;
+    pointer-events: none;
   }
 }
 
@@ -46,7 +47,7 @@
   transform: translate3d(-0.5px, -10px, 0) scale(0, 1);
   transition: transform 100ms;
 
-  @nest .root[data-hover] & {
+  @nest .root[data-hover] > .wrapper > & {
     transform: translate3d(-0.5px, -10px, 0) scale(1);
   }
 }
@@ -71,7 +72,7 @@
 .hitArea {
   position: absolute;
   left: calc(0 - var(--extra-small-padding));
-  width: calc(var(--extra-small-padding) + 2px + var(--medium-padding));
+  width: calc(var(--extra-small-padding) + var(--medium-padding));
   height: 100%;
   cursor: pointer;
 }

diff --git a/packages/@sanity/base/src/change-indicators/ChangeBar.tsx b/packages/@sanity/base/src/change-indicators/ChangeBar.tsx
@@ -58,7 +58,7 @@ export const ChangeBar = React.forwardRef(
       >
         <div className={styles.field}>{props.children}</div>
 
-        <Tooltip content={tooltipContent} placement="top">
+        <Tooltip content={tooltipContent} disabled={!props.isChanged} placement="top">
           <div className={styles.wrapper}>
             <div className={styles.bar} />