DevTools: Box-shadow editor initial implementation

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

+/*
+ * 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 {
+    -webkit-user-select: none;
+    padding: 4px 12px 12px 12px;
+}
+
+.shadow-editor-field {
+    margin-top: 8px;
+    font-size: 12px;
+}
+
+.shadow-editor-label {
+    display: inline-block;
+    width: 52px;
+    height: 24px;
+    line-height: 24px;
+    margin-right: 8px;
+    text-align: right;
+}
+
+.shadow-editor-button-left, .shadow-editor-button-right {
+    width: 74px;
+    height: 24px;
+    padding: 3px 7px;
+    line-height: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    background-color: #ffffff;
+    text-align: center;
+}
+
+.shadow-editor-button-left {
+    border-radius: 2px 0 0 2px;
+}
+
+.shadow-editor-button-right {
+    border-radius: 0 2px 2px 0;
+    border-left-width: 0;
+}
+
+.shadow-editor-button-left:hover, .shadow-editor-button-right:hover {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-editor-button-left:focus, .shadow-editor-button-right:focus {
+    background-color: #eeeeee;
+}
+
+.shadow-editor-button-left.enabled, .shadow-editor-button-right.enabled {
+    background-color: #4285F4;
+    color: #ffffff;
+}
+
+.shadow-editor-button-left.enabled:focus, .shadow-editor-button-right.enabled:focus {
+    background-color: #3B78E7;
+}
+
+.shadow-editor-text-input {
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    width: 52px;
+    height: 24px;
+    margin-right: 8px;
+    padding: 3px 7px;
+    line-height: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    border-radius: 2px;
+    border-color: rgba(0, 0, 0, 0.14);
+    background-color: #ffffff;
+    color: #333;
+    text-align: right;
+}
+
+.shadow-editor-text-input:focus {
+    border-color: #4285F4;
+}
+
+.shadow-editor-text-input.invalid {
+    border-color: #E67C73;
+}