copy css to dist/ in the build step

2019-02-26 19:49:42 -08:00 · 2019-02-26 19:49:42 -08:00 · 63395381be
--- a/README.md
+++ b/README.md
@ -52,7 +52,7 @@ This polyfill works on modern versions of all major browsers. It also supports I

 ```html
 <head>
-  <link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
+  <link rel="stylesheet" type="text/css" href="dist/dialog-polyfill.css" />
 </head>
 <body>
  <dialog>
--- a/dist/dialog-polyfill.css
+++ b/dist/dialog-polyfill.css
@ -0,0 +1,37 @@
+dialog {
+  position: absolute;
+  left: 0; right: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  border: solid;
+  padding: 1em;
+  background: white;
+  color: black;
+  display: block;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+dialog + .backdrop {
+  position: fixed;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background: rgba(0,0,0,0.1);
+}
+
+._dialog_overlay {
+  position: fixed;
+  top: 0; right: 0; bottom: 0; left: 0;
+}
+
+dialog.fixed {
+  position: fixed;
+  top: 50%;
+  transform: translate(0, -50%);
+}
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
  },
  "scripts": {
    "build": "npm-run-all -p build:*",
+    "build:css": "cp dialog-polyfill.css dist/dialog-polyfill.css",
    "build:esm": "rollup index.js --file dist/dialog-polyfill.js --format umd --name dialogPolyfill",
    "build:umd": "rollup index.js --file dist/dialog-polyfill.esm.js --format esm",
    "prepublishOnly": "npm run build",
--- a/test.html
+++ b/test.html
@ -18,7 +18,7 @@
 <link rel="stylesheet" href="node_modules/mocha/mocha.css" />
 <script src="node_modules/mocha/mocha.js"></script>
 <script src="node_modules/chai/chai.js"></script>
-<link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
+<link rel="stylesheet" type="text/css" href="dist/dialog-polyfill.css" />
 <script src="dist/dialog-polyfill.js"></script>
 <script>

--- a/tests/actionbar.html
+++ b/tests/actionbar.html
@ -4,7 +4,7 @@
 <meta charset="UTF-8" />
 <head>
  <script src="../dist/dialog-polyfill.js"></script>
-  <link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+  <link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
  <style>

  dialog.actionbar {
--- a/tests/backdrop.html
+++ b/tests/backdrop.html
@ -3,7 +3,7 @@
 <meta charset='utf-8'>
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 <style>
 dialog {
  height: 100px;
--- a/tests/dialog-centering.html
+++ b/tests/dialog-centering.html
@ -3,7 +3,7 @@
 <meta charset='utf-8'>
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 </head>
 <body>
 <p>Test that dialog is centered in the viewport. The test passes if you see a
--- a/tests/dialog-recentering.html
+++ b/tests/dialog-recentering.html
@ -3,7 +3,7 @@
 <meta charset='utf-8'>
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 <style>
 body {
  height: 10000px;
--- a/tests/fancy-modal-dialog.html
+++ b/tests/fancy-modal-dialog.html
@ -2,7 +2,7 @@
 <html>
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 <style>
 #close-button {
    position: absolute;
--- a/tests/form.html
+++ b/tests/form.html
@ -3,7 +3,7 @@
 <meta charset='utf-8'>
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 </head>
 <body>

--- a/tests/modal-dialog-stacking.html
+++ b/tests/modal-dialog-stacking.html
@ -3,7 +3,7 @@
 <meta charset='utf-8'>
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 <style>
 dialog {
    padding: 0px;
--- a/tests/modal-dialog.html
+++ b/tests/modal-dialog.html
@ -4,7 +4,7 @@
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
 <meta name="viewport" content="width=device-width, user-scalable=no">
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 <style>
  html {
    border: 4px solid white;
--- a/tests/respect-positioned-dialog.html
+++ b/tests/respect-positioned-dialog.html
@ -3,7 +3,7 @@
 <meta charset='utf-8'>
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 <style>
 dialog {
  display: none;
--- a/tests/stacking.html
+++ b/tests/stacking.html
@ -3,7 +3,7 @@
 <meta charset='utf-8'>
 <head>
 <script src="../dist/dialog-polyfill.js"></script>
-<link rel="stylesheet" type="text/css" href="../dialog-polyfill.css">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
 </head>
 <body>