Web Inspector: Elements tab: Classes toggle should use accent color on hover
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Apr 2019 01:31:54 +0000 (01:31 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Apr 2019 01:31:54 +0000 (01:31 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@244063 268f45cc-cd09-0410-ab3c-d52691b4dbfc

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

index c65feee..5026c6c 100644 (file)
@@ -1,3 +1,20 @@
+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>
 
         Web Inspector: REGRESSION: Audit: default audits aren't added when an existing audit is present
index e2c5cd6..0b141e4 100644 (file)
@@ -99,6 +99,7 @@
 }
 
 .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+    position: relative;
     margin: 0 0 1px;
     -webkit-margin-end: 5px;
     padding: 2px 4px 3px;
     -webkit-appearance: none;
 }
 
-.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
-    color: var(--selected-foreground-color);
-    background-color: var(--selected-background-color);
+.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:not(.selected):hover {
+.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-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);
 }
 
 .sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,