Title: [287870] trunk/Source/WebInspectorUI
- Revision
- 287870
- Author
- nvasil...@apple.com
- Date
- 2022-01-10 23:27:23 -0800 (Mon, 10 Jan 2022)
Log Message
Web Inspector: Increase padding around icons in Alignment editor
https://bugs.webkit.org/show_bug.cgi?id=234036
<rdar://problem/86543279>
Reviewed by Devin Rousso.
Increase margin and padding around the icons, making the icons more visually appealing
and easier to distinguish and from each other.
* UserInterface/Images/AlignContentStretch.svg:
The gap between rectangles was only 0.5px. Increase it to 2px.
* UserInterface/Views/AlignmentEditor.css:
(.alignment-editor .glyph):
(.alignment-editor .glyph:not(:first-child)):
(.alignment-editor .glyph.selected):
(.alignment-editor .glyph.selected:active):
(.alignment-editor .glyph:not(:last-child)): Deleted.
(.alignment-editor .glyph.selected + .glyph): Deleted.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (287869 => 287870)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-01-11 06:34:39 UTC (rev 287869)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-01-11 07:27:23 UTC (rev 287870)
@@ -1,3 +1,25 @@
+2022-01-10 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Increase padding around icons in Alignment editor
+ https://bugs.webkit.org/show_bug.cgi?id=234036
+ <rdar://problem/86543279>
+
+ Reviewed by Devin Rousso.
+
+ Increase margin and padding around the icons, making the icons more visually appealing
+ and easier to distinguish and from each other.
+
+ * UserInterface/Images/AlignContentStretch.svg:
+ The gap between rectangles was only 0.5px. Increase it to 2px.
+
+ * UserInterface/Views/AlignmentEditor.css:
+ (.alignment-editor .glyph):
+ (.alignment-editor .glyph:not(:first-child)):
+ (.alignment-editor .glyph.selected):
+ (.alignment-editor .glyph.selected:active):
+ (.alignment-editor .glyph:not(:last-child)): Deleted.
+ (.alignment-editor .glyph.selected + .glyph): Deleted.
+
2022-01-10 Alex Christensen <achristen...@webkit.org>
Start using C++20
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg (287869 => 287870)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg 2022-01-11 06:34:39 UTC (rev 287869)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg 2022-01-11 07:27:23 UTC (rev 287870)
@@ -1,5 +1,5 @@
<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
- <rect x="2" y="1" width="12" height="6.5" fill="currentColor"/>
- <rect x="2" y="8" width="12" height="6.5" fill="currentColor"/>
+ <rect x="2" y="1" width="12" height="6" fill="currentColor"/>
+ <rect x="2" y="9" width="12" height="6" fill="currentColor"/>
</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css (287869 => 287870)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2022-01-11 06:34:39 UTC (rev 287869)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2022-01-11 07:27:23 UTC (rev 287870)
@@ -27,6 +27,7 @@
display: inline-block;
width: 16px;
height: 16px;
+ padding: 2px;
background-color: var(--background-color-content);
box-sizing: content-box;
border: 1px solid var(--border-color);
@@ -33,8 +34,8 @@
color: var(--glyph-color);
}
-.alignment-editor .glyph:not(:last-child) {
- border-inline-end-width: 0;
+.alignment-editor .glyph:not(:first-child) {
+ margin-inline-start: 2px;
}
.alignment-editor .glyph:active {
@@ -42,17 +43,14 @@
}
.alignment-editor .glyph.selected {
- color: var(--glyph-color-active);
+ background-color: var(--glyph-color-active);
border-color: var(--glyph-color-active);
+ color: var(--selected-foreground-color);
}
-.alignment-editor .glyph.selected + .glyph {
- border-inline-start-color: var(--glyph-color-active);
-}
-
.alignment-editor .glyph.selected:active {
- color: var(--glyph-color-active-pressed);
- outline-color: var(--glyph-color-active-pressed);
+ background-color: var(--glyph-color-active-pressed);
+ border-color: var(--glyph-color-active-pressed);
}
.alignment-editor .glyph.rotate-left > svg {
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
