Bug 1452206 - Tweak spacing and alignment of items in the Inspector Layout panel. r=jdescottes
MozReview-Commit-ID: HFnxL75WKBH
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -44,18 +44,20 @@
.accordion ._header:hover svg {
fill: var(--theme-comment-alt);
}
.accordion ._content {
border-bottom: 1px solid var(--theme-splitter-color);
font-size: 11px;
+ padding: 4px;
}
.accordion div:last-child ._content {
border-bottom: none;
}
.arrow {
vertical-align: middle;
display: inline-block;
+ padding: 0 2px 0 1px;
}
--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -20,17 +20,17 @@
}
/* Header */
.boxmodel-header,
.boxmodel-info {
display: flex;
align-items: center;
- padding: 4px 17px;
+ padding: 4px 19px;
}
.layout-geometry-editor::before {
background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
}
/* Main: contains the box-model regions */
@@ -342,26 +342,27 @@
.boxmodel-properties-header {
padding: 2px 3px;
}
.boxmodel-properties-expander {
vertical-align: middle;
display: inline-block;
+ margin: 0 2px 0 1px;
}
.boxmodel-properties-wrapper {
column-width: 250px;
column-gap: 20px;
column-rule: 1px solid var(--theme-splitter-color);
}
.boxmodel-properties-wrapper .computed-property-view {
- padding-inline-start: 17px;
+ padding-inline-start: 20px;
}
.boxmodel-properties-wrapper .computed-property-name-container {
flex: 1;
}
.boxmodel-properties-wrapper .computed-property-value-container {
flex: 1;
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -766,13 +766,12 @@ checkbox:-moz-focusring {
opacity: 1;
transform: scaleX(1);
}
/* No result message styles */
.devtools-sidepanel-no-result {
font-style: italic;
- text-align: center;
- padding: 0.5em;
+ padding: 0.5em 21px;
-moz-user-select: none;
font-size: 12px;
}
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -13,18 +13,18 @@
* Common styles for shared components
*/
.flexbox-container,
.grid-container {
display: flex;
flex-direction: column;
flex: 1 auto;
- align-items: center;
min-width: 140px;
+ margin-inline-start: 16px;
}
.grid-container:first-child {
margin-bottom: 10px;
}
.flexbox-container > span,
.grid-container > span {
@@ -39,28 +39,29 @@
margin: 0;
padding: 0;
}
.flexbox-container li,
.grid-container li {
display: flex;
align-items: center;
- padding: 4px 0;
+ padding: 3px 0;
}
.flexbox-container input
.grid-container input {
- margin: 0 5px;
+ margin-inline-end: 7px;
}
.flexbox-container label,
.grid-container label {
display: flex;
align-items: center;
+ margin-inline-start: -3px;
}
/**
* Grid Container
*/
#layout-flexbox-container,
#layout-grid-container {
@@ -81,17 +82,17 @@
margin: 5px 0;
}
/**
* Grid Outline
*/
.grid-outline-container {
- margin: 5px 0;
+ margin: 5px;
}
.grid-outline-container svg {
overflow: visible;
}
.grid-outline-border {
fill: none;
@@ -133,17 +134,17 @@
/**
* Grid Item
*/
.grid-color-swatch {
width: 12px;
height: 12px;
- margin-left: 5px;
+ margin-inline-start: -1px;
border: 1px solid var(--theme-highlight-gray);
border-radius: 50%;
cursor: pointer;
}
.grid-color-value {
display: none;
}