1 files changed, 97 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/dashboard-style.html b/tensorflow/tensorboard/components/tf-dashboard-common/dashboard-style.html
new file mode 100644
index 0000000000..795cbbcac3
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-dashboard-common/dashboard-style.html
@@ -0,0 +1,97 @@
+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
+<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
+
+<dom-module id="dashboard-style">
+  <template>
+    <style>
+      .card {
+        height: 200px;
+        width: 300px;
+        display: flex;
+        flex-direction: column;
+        margin: 5px 5px;
+        padding: 5px;
+        border: 1px solid var(--paper-grey-500);
+        border-radius: 3px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        position: relative;
+      }
+
+      .card .card-title {
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-bottom: 2px;
+        font-size: 14px;
+        font-weight: bold;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .card .card-content {
+        flex-grow: 1;
+        flex-shrink: 1;
+        display: flex;
+      }
+      .card .card-bottom-row {
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+
+      .card.selected {
+        height: 400px;
+        width: 100%;
+      }
+
+      [shift] {
+        bottom: 20px !important;
+      }
+
+      .expand-button {
+        position: absolute;
+        left: 0px;
+        bottom: 0px;
+        color: #2196F3;
+        display: block;
+      }
+
+      #content-container{
+        display: block;
+      }
+
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      #categorizer {
+        flex-shrink: 0;
+      }
+
+      #xTypeSelector {
+        flex-shrink: 0;
+        margin: 20px 0;
+      }
+
+      #runSelector {
+        flex-shrink: 1;
+        flex-grow: 1;
+      }
+
+      #download-option {
+        padding-left: 55px;
+        color: var(--paper-grey-700);
+        font-size: 14px;
+      }
+
+      #download-option paper-toggle-button {
+        --paper-toggle-button-checked-button-color: var(--tb-orange-strong);
+        --paper-toggle-button-checked-bar-color: var(--tb-orange-weak);
+
+      }
+    </style>
+  </template>
+</dom-module>