disabled highlighting for the entire page except for the tree

rydang · rydang · commit bd08edaf6684 · 2019-08-01T15:47:21.000-04:00
diff --git a/src/app/styles/base/_helpers.scss b/src/app/styles/base/_helpers.scss
@@ -0,0 +1,6 @@
+%disable-highlight {
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
diff --git a/src/app/styles/components/_actionComponent.scss b/src/app/styles/components/_actionComponent.scss
@@ -10,20 +10,13 @@
   border-color: $border-color;
   cursor: pointer;
   text-overflow: ellipsis;
+  @extend %disable-highlight
 }
 
 .action-component.selected {
   background-color: $light-grey-one;
 }
 
-.action-component .empty-button {
-  // grid-column: 1 / span 4;
-}
-
-.action-component:hover .jump-button {
-  visibility: visible;
-}
-
 .action-component.exclude {
   display: flex;
   justify-content: center;
diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss
@@ -3,19 +3,18 @@
   width: 120px;
 }
 
+.action-component:hover .jump-button {
+  opacity: 1;
+  transform: rotateX(0deg);
+  transition: opacity 300ms, transform 0.15s linear;
+}
+
 .jump-button {
   @extend %button-shared;
   width: 50px;
-  visibility: hidden;
-}
-
-.jump-button:focus {
-  outline: 0;
-  // make the text in the button not highlightable
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+/Edge */
-  user-select: none; /* Standard */
+  opacity: 0;
+  transform: rotateX(90deg);
+  transition: opacity 300ms, transform 0.15s linear;
 }
 
 .jump-button:hover {
@@ -68,4 +67,6 @@
   line-height: 1.5em;
   font: normal 13px monaco, Consolas, "Lucida Console", monospace, Arial, sans-serif;
   font-size: $button-text-size;
+
+  @extend %disable-highlight;
 }
diff --git a/src/app/styles/layout/_stateContainer.scss b/src/app/styles/layout/_stateContainer.scss
@@ -19,6 +19,7 @@
   top: 0px;
   left: 0px;
   z-index: 1;
+  @extend %disable-highlight
 }
 
 .state-container {
diff --git a/src/app/styles/layout/_travelContainer.scss b/src/app/styles/layout/_travelContainer.scss
@@ -15,6 +15,7 @@
   .react-select__control,
   .react-select__menu {
     background-color: $light-grey-one;
+    @extend %disable-highlight;
   }
   .react-select__single-value {
     color: white;
diff --git a/src/extension/build/panel.html b/src/extension/build/panel.html
@@ -9,7 +9,6 @@
 
   <body>
     <div id="root"></div>
-    <link rel="stylesheet" type="text/css" href="./styles/panel.css" />
     <script type="text/javascript" src="bundles/app.bundle.js"></script>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@`
`19`	`19`	`top: 0px;`
`20`	`20`	`left: 0px;`
`21`	`21`	`z-index: 1;`
	`22`	`+ @extend %disable-highlight`
`22`	`23`	`}`
`23`	`24`
`24`	`25`	`.state-container {`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`.react-select__control,`
`16`	`16`	`.react-select__menu {`
`17`	`17`	`background-color: $light-grey-one;`
	`18`	`+ @extend %disable-highlight;`
`18`	`19`	`}`
`19`	`20`	`.react-select__single-value {`
`20`	`21`	`color: white;`