Bug 1525615: Introduce 'card' style. r=jdescottes,ladybenko
☠☠ backed out by 894e76afd6ba ☠ ☠
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 26 Feb 2019 10:21:29 +0000
changeset 461077 383b6665578306219dd34b178353e100ca2848eb
parent 461076 c5fa70d3ef1e261de5ef1a5f6988e63182bfe00e
child 461078 54455c6ac7cac2fad4d50d3c0b28e3dc2cb2ff3b
push id78999
push userdakatsuka@mozilla.com
push dateTue, 26 Feb 2019 11:14:31 +0000
treeherderautoland@c6f3144fb731 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, ladybenko
bugs1525615
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1525615: Introduce 'card' style. r=jdescottes,ladybenko Depends on D20295 Differential Revision: https://phabricator.services.mozilla.com/D20640
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -353,13 +353,24 @@ Form controls
 .badge--warning {
   background: var(--warning-50);
 }
 
 .badge--error {
   background: var(--error-50);
 }
 
+/*
+ * Card style which is used in debug target item and so on.
+ */
+.card {
+  background-color: var(--white-100); /* from common.inc.css */
+  border-radius: var(--base-unit); /* from common.inc.css */
+  box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
+  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
+  padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
+}
+
 .undecorated-link,
 .undecorated-link:hover {
   text-decoration: none;
   color: currentColor;
 }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
@@ -58,17 +58,17 @@ class DebugTargetItem extends PureCompon
       },
       this.props.target.name,
     );
   }
 
   render() {
     return dom.li(
       {
-        className: "debug-target-item js-debug-target-item",
+        className: "card debug-target-item js-debug-target-item",
       },
       this.renderIcon(),
       this.renderName(),
       this.renderAction(),
       this.renderDetail(),
     );
   }
 }