Changeset 244063 in webkit

Timestamp:

Apr 8, 2019, 6:31:54 PM (7 years ago)

Author:

Matt Baker

Message:

Web Inspector: Elements tab: Classes toggle should use accent color on hover
​https://bugs.webkit.org/show_bug.cgi?id=196266

Reviewed by Devin Rousso.

• UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:

(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle::before):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:matches(.selected, :hover)):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:matches(.selected, :hover)::before):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover::before):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected:active::before):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected): Deleted.
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover): Deleted.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/GeneralStyleDetailsSidebarPanel.css (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-04-08  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Elements tab: Classes toggle should use accent color on hover
+        https://bugs.webkit.org/show_bug.cgi?id=196266
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle::before):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:matches(.selected, :hover)):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:matches(.selected, :hover)::before):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover::before):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected:active::before):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected): Deleted.
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover): Deleted.
+
 2019-04-08  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css

@@ -100 +100 @@
 
 .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+    position: relative;
     margin: 0 0 1px;
     -webkit-margin-end: 5px;
@@ -111 +112 @@
 }
 
-.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    opacity: var(--glyph-opacity);
+    z-index: -1;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:matches(.selected, :hover) {
     color: var(--selected-foreground-color);
-    background-color: var(--selected-background-color);
-}
-
-.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover {
-    color: var(--selected-foreground-color);
-    background-color: var(--selected-background-color-hover);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:matches(.selected, :hover)::before {
+    background-color: var(--glyph-color-active);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover::before {
+    opacity: 0.5;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected:active::before {
+    filter: brightness(0.8);
 }