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 518943 383b6665578306219dd34b178353e100ca2848eb
parent 518942 c5fa70d3ef1e261de5ef1a5f6988e63182bfe00e
child 518944 54455c6ac7cac2fad4d50d3c0b28e3dc2cb2ff3b
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [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(),
     );
   }
 }