Title: [244063] trunk/Source/WebInspectorUI
Revision
244063
Author
mattba...@apple.com
Date
2019-04-08 18:31:54 -0700 (Mon, 08 Apr 2019)

Log 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.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (244062 => 244063)


--- trunk/Source/WebInspectorUI/ChangeLog	2019-04-09 01:26:23 UTC (rev 244062)
+++ trunk/Source/WebInspectorUI/ChangeLog	2019-04-09 01:31:54 UTC (rev 244063)
@@ -1,3 +1,20 @@
+2019-04-08  Matt Baker  <mattba...@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  <drou...@apple.com>
 
         Web Inspector: REGRESSION: Audit: default audits aren't added when an existing audit is present

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css (244062 => 244063)


--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css	2019-04-09 01:26:23 UTC (rev 244062)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css	2019-04-09 01:31:54 UTC (rev 244063)
@@ -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;
@@ -110,16 +111,34 @@
     -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,
 .sidebar > .panel.details.css-style > .content:not(.has-filter-bar) ~ .options-container > .filter-bar {
     display: none;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to