DevTools: Box-shadow editor initial implementation

third_party/WebKit/Source/devtools/front_end/ui/shadowEditor.css

Index: third_party/WebKit/Source/devtools/front_end/ui/shadowEditor.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/shadowEditor.css b/third_party/WebKit/Source/devtools/front_end/ui/shadowEditor.css
new file mode 100644
index 0000000000000000000000000000000000000000..de46b76421ac9941f77e3d6e1549598dd6ef6d74
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/ui/shadowEditor.css
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2016 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.
+ */
+:host {
+    padding: 8px;
+}
+
+.shadow-editor-field {
+    display: flex;
+    margin: 5px;
+    align-items: center;
+}
+
+.shadow-editor-button {
+    width: 80px;
+    height: 20px;
+    line-height: 20px;
+    border: 1px solid #c3c3c3;
+    text-align: center;
+    font-family: Menlo, Consolas, 'dejavu sans mono', monospace;

[dgozman, 2016/08/17 17:42:09]

Fonts are usually OS-specific? Do we really need anything custom here?

[flandy, 2016/08/24 18:10:07]

Removed.

+}
+
+.shadow-editor-button.right {
+    border-radius: 0 2px 2px 0;
+}
+
+.shadow-editor-button.left {
+    border-radius: 2px 0 0 2px;
+}
+
+.shadow-editor-button.enabled {
+    background-color: #3e82f7;
+    border-color: #3e82f7;
+    color: white;
+}
+
+.shadow-editor-field label {
+    flex: 1;
+    margin-right: 6px;
+    color: #757575;
+    text-align: right;
+    /*line-height: 22px;*/

[dgozman, 2016/08/17 17:42:09]

Commented code.

[flandy, 2016/08/24 18:10:07]

Removed.

+}
+
+.shadow-editor-field input {
+    width: 50px;
+    margin-right: 10px;
+}
+
+.shadow-editor-field input[type=text] {
+    border: 1px solid #DADADA;
+    padding: 2px 2px;
+    font-family: Menlo, Consolas, 'dejavu sans mono', monospace;
+    /*line-height: 16px;*/

[dgozman, 2016/08/17 17:42:09]

Commented code.

[flandy, 2016/08/24 18:10:07]

Removed.

+    border-radius: 2px;
+    text-align: right;
+}
+
+.shadow-editor-field input[type=text]:focus,
+.shadow-editor-field input[type=text].is-highlighted {
+    border-color: #3e82f7;
+    outline: 0;
+}
+
+.shadow-editor-slider {
+    padding: 8px 0;
+}
+
+.shadow-editor-slider-track {
+    background: #c3c3c3;
+    width: 100px;
+    height: 2px;
+    border-radius: 2px;
+}
+
+.shadow-editor-slider-thumb {
+    position: relative;
+    top: -5px;
+    left: -5px;
+    cursor: pointer;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #3e82f7;
+}