Create Button component
This component wraps around a <button> element and implements
common DevTools styles for primary and secondary buttons as
well as a button with an icon and text. Hover/focus/pressed
states are still in progress in the designs and the component
will be updated in the follow-ups to include those styles.
Screenshot: https://i.imgur.com/5EHND1v.png
Bug: none
Change-Id: Id0d11e49e678e1de007025b548fa1357f86ba8f2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3071224
Reviewed-by: Jack Franklin <[email protected]>
Reviewed-by: Peter Müller <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
diff --git a/front_end/ui/components/buttons/button.css b/front_end/ui/components/buttons/button.css
new file mode 100644
index 0000000..c8a2896
--- /dev/null
+++ b/front_end/ui/components/buttons/button.css
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+*:focus,
+*:focus-visible {
+ outline: none;
+}
+
+button {
+ display: inline-flex;
+ align-items: center;
+ border-radius: 4px;
+ border: 1px solid var(--color-details-hairline);
+ font-size: 12px;
+ height: 25px;
+ line-height: 14px;
+ padding: 5px 12px;
+ background: var(--color-background);
+ color: var(--color-primary);
+}
+
+button.primary {
+ border: 1px solid var(--color-primary);
+ background: var(--color-primary);
+ color: var(--color-background);
+}
+
+button.with-icon {
+ padding: 0 12px 0 4px;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+button devtools-icon {
+ width: 19px;
+ height: 19px;
+
+ --icon-color: var(--color-primary);
+}
+
+button.primary devtools-icon {
+ --icon-color: var(--color-background);
+}
