polymer 1.8 - use shadow dom if possible

mathieuancelin · Feb 24, 2017 · e550299 · e550299
1 parent cb59a5e
commit e550299
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/polymer/db-table.html b/polymer/db-table.html
@@ -1,10 +1,12 @@
 <link rel="import" href="../lib/polymer/bower_components/polymer/polymer.html">
+<link rel="import" href="shared-styles.html">
 
 <dom-module id="db-table">
 <!-- <link rel="import" type="css" href="../lib/bootstrap.min.css"> -->
 <!-- <link rel="import" type="css" href="../styles.css"> -->
-
 <template strip-whitespace>
+  <style include="shared-styles"></style>
+
   <table class="table table-striped latest-data">
     <tbody>
       <template is="dom-repeat" items="[[databases]]" as="db" strip-whitespace>

diff --git a/polymer/index.html b/polymer/index.html
@@ -2,6 +2,12 @@
 <html>
 <head>
 <meta name="description" content="DBMON Polymer" />
+  <script>
+      window.Polymer = {
+          dom: 'shadow',
+          lazyRegister: true
+      };
+  </script>
   <script src="../lib/polymer/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
   <link href="../styles.css" rel="stylesheet" type="text/css" />
 

diff --git a/polymer/shared-styles.html b/polymer/shared-styles.html
@@ -0,0 +1,29 @@
+<dom-module id="shared-styles">
+    <template>
+        <style>
+            table {border-collapse:collapse;border-spacing:0; }
+            :before,:after {box-sizing: border-box;}
+
+            .table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td {border-top:1px solid #ddd;line-height:1.42857143;padding:8px;vertical-align:top;}
+            .table {width:100%;}
+            .table-striped > tbody > tr:nth-child(odd) > td,.table-striped > tbody > tr:nth-child(odd) > th {background:#f9f9f9;}
+
+            .label {border-radius:.25em;color:#fff;display:inline;font-size:75%;font-weight:700;line-height:1;padding:.2em .6em .3em;text-align:center;vertical-align:baseline;white-space:nowrap;}
+            .label-success {background-color:#5cb85c;}
+            .label-warning {background-color:#f0ad4e;}
+
+            .popover {background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;box-shadow:0 5px 10px rgba(0,0,0,.2);display:none;left:0;max-width:276px;padding:1px;position:absolute;text-align:left;top:0;white-space:normal;z-index:1010;}
+            .popover>.arrow:after {border-width:10px;content:"";}
+            .popover.left {margin-left:-10px;}
+            .popover.left > .arrow {border-right-width:0;border-left-color:rgba(0,0,0,.25);margin-top:-11px;right:-11px;top:50%;}
+            .popover.left > .arrow:after {border-left-color:#fff;border-right-width:0;bottom:-10px;content:" ";right:1px;}
+            .popover > .arrow {border-width:11px;}
+            .popover > .arrow,.popover>.arrow:after {border-color:transparent;border-style:solid;display:block;height:0;position:absolute;width:0;}
+
+            .popover-content {padding:9px 14px;}
+
+            .Query {position:relative;}
+            .Query:hover .popover {display:block;left:-100%;width:100%;}
+        </style>
+    </template>
+</dom-module>