Bug 1525615: Introduce 'card' style. r=jdescottes,ladybenko
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 26 Feb 2019 12:42:45 +0000
changeset 461088 c58658cd01ef0145a5471811796dfc3b64a7de5e
parent 461087 b309d8c1cfa9857e81320e741cc3db325d364a09
child 461089 ea65fc3bc3a0fbf1f1fa5f7bb29f158faed54204
push id79005
push userdakatsuka@mozilla.com
push dateTue, 26 Feb 2019 12:47:22 +0000
treeherderautoland@9b8bdd92d93e [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(),
     );
   }
 }