Home Explore Help
Sign In
owen
/
vue-roaster
mirror of https://github.com/jonathan-grah/vue-roaster.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

fix: styles loaded via webpack instead of example

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 5 years ago
parent
f60f402a5e
commit
06df801c39
7 changed files with 241 additions and 62 deletions
Split View Show Diff Stats
  1. 19 0
      dist/toasters.js
  2. 0 61
      example/index.html
  3. 158 0
      package-lock.json
  4. 2 0
      package.json
  5. 58 0
      src/index.css
  6. 2 0
      src/index.js
  7. 2 1
      webpack.config.js

File diff suppressed because it is too large
+ 19 - 0
dist/toasters.js


+ 0 - 61
example/index.html
View File 

@@ -7,66 +7,5 @@
 
 <body>

         <div id="toasts-container" class="position-right position-bottom"></div>

         <script src="../dist/example.js"></script>

-        <style>

-                :root {

-                        --max-width: 250px;

-                }

-

-                body {

-                        padding: 0;

-                        margin: 0;

-                }

-

-                #toasts-container {

-                        position: fixed;

-                        height: 100vh;

-                        display: flex;

-                        flex-direction: column;

-                        top: 20px;

-                        left: 20px;

-                }

-                

-                #toasts-container.position-left {

-                        right: 0;

-                        left: 20px;

-                        align-items: flex-start;

-                }

-

-                #toasts-container.position-right {

-                        left: 0;

-                        right: 20px;

-                        align-items: flex-end;

-                }

-

-                #toasts-container.position-top {

-                        bottom: 0;

-                        top: 20px;

-                        justify-content: flex-start;

-                }

-

-                #toasts-container.position-bottom {

-                        top: 0;

-                        margin-top: -20px;

-                        justify-content: flex-end;

-                }

-

-                .toast {

-                        margin-bottom: 5px;

-                        user-select: none;

-                        z-index: 10000 !important;

-                        border-radius: 2px;

-                        cursor: pointer;

-                        position: relative;

-                        top: 0;

-                        height: auto;

-                        background-color: #323232;

-                        color: #fff;

-                        padding: 10px 25px;

-                        font-size: 1rem;

-                        font-weight: 300;

-                        width: var(--max-width);

-                        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

-                }

-        </style>

 </body>

 </html>

+ 158 - 0
package-lock.json
View File 

@@ -1838,6 +1838,44 @@
 
         "randomfill": "^1.0.3"
 
       }
 
     },
 
+    "css-loader": {
 
+      "version": "3.2.0",
 
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.2.0.tgz",
 
+      "integrity": "sha512-QTF3Ud5H7DaZotgdcJjGMvyDj5F3Pn1j/sC6VBEOVp94cbwqyIBdcs/quzj4MC1BKQSrTpQznegH/5giYbhnCQ==",
 
+      "dev": true,
 
+      "requires": {
 
+        "camelcase": "^5.3.1",
 
+        "cssesc": "^3.0.0",
 
+        "icss-utils": "^4.1.1",
 
+        "loader-utils": "^1.2.3",
 
+        "normalize-path": "^3.0.0",
 
+        "postcss": "^7.0.17",
 
+        "postcss-modules-extract-imports": "^2.0.0",
 
+        "postcss-modules-local-by-default": "^3.0.2",
 
+        "postcss-modules-scope": "^2.1.0",
 
+        "postcss-modules-values": "^3.0.0",
 
+        "postcss-value-parser": "^4.0.0",
 
+        "schema-utils": "^2.0.0"
 
+      },
 
+      "dependencies": {
 
+        "schema-utils": {
 
+          "version": "2.2.0",
 
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.2.0.tgz",
 
+          "integrity": "sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==",
 
+          "dev": true,
 
+          "requires": {
 
+            "ajv": "^6.10.2",
 
+            "ajv-keywords": "^3.4.1"
 
+          }
 
+        }
 
+      }
 
+    },
 
+    "cssesc": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 
+      "dev": true
 
+    },
 
     "cyclist": {
 
       "version": "0.2.2",
 
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
 
@@ -3099,6 +3137,15 @@
 
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
 
       "dev": true
 
     },
 
+    "icss-utils": {
 
+      "version": "4.1.1",
 
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
 
+      "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
 
+      "dev": true,
 
+      "requires": {
 
+        "postcss": "^7.0.14"
 
+      }
 
+    },
 
     "ieee754": {
 
       "version": "1.1.13",
 
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
 
@@ -3127,6 +3174,12 @@
 
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
 
       "dev": true
 
     },
 
+    "indexes-of": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
 
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
 
+      "dev": true
 
+    },
 
     "infer-owner": {
 
       "version": "1.0.4",
 
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
 
@@ -4025,6 +4078,83 @@
 
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
 
       "dev": true
 
     },
 
+    "postcss": {
 
+      "version": "7.0.18",
 
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.18.tgz",
 
+      "integrity": "sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==",
 
+      "dev": true,
 
+      "requires": {
 
+        "chalk": "^2.4.2",
 
+        "source-map": "^0.6.1",
 
+        "supports-color": "^6.1.0"
 
+      },
 
+      "dependencies": {
 
+        "source-map": {
 
+          "version": "0.6.1",
 
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
 
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
 
+          "dev": true
 
+        }
 
+      }
 
+    },
 
+    "postcss-modules-extract-imports": {
 
+      "version": "2.0.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
 
+      "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
 
+      "dev": true,
 
+      "requires": {
 
+        "postcss": "^7.0.5"
 
+      }
 
+    },
 
+    "postcss-modules-local-by-default": {
 
+      "version": "3.0.2",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz",
 
+      "integrity": "sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==",
 
+      "dev": true,
 
+      "requires": {
 
+        "icss-utils": "^4.1.1",
 
+        "postcss": "^7.0.16",
 
+        "postcss-selector-parser": "^6.0.2",
 
+        "postcss-value-parser": "^4.0.0"
 
+      }
 
+    },
 
+    "postcss-modules-scope": {
 
+      "version": "2.1.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz",
 
+      "integrity": "sha512-91Rjps0JnmtUB0cujlc8KIKCsJXWjzuxGeT/+Q2i2HXKZ7nBUeF9YQTZZTNvHVoNYj1AthsjnGLtqDUE0Op79A==",
 
+      "dev": true,
 
+      "requires": {
 
+        "postcss": "^7.0.6",
 
+        "postcss-selector-parser": "^6.0.0"
 
+      }
 
+    },
 
+    "postcss-modules-values": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
 
+      "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
 
+      "dev": true,
 
+      "requires": {
 
+        "icss-utils": "^4.0.0",
 
+        "postcss": "^7.0.6"
 
+      }
 
+    },
 
+    "postcss-selector-parser": {
 
+      "version": "6.0.2",
 
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
 
+      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
 
+      "dev": true,
 
+      "requires": {
 
+        "cssesc": "^3.0.0",
 
+        "indexes-of": "^1.0.1",
 
+        "uniq": "^1.0.1"
 
+      }
 
+    },
 
+    "postcss-value-parser": {
 
+      "version": "4.0.2",
 
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
 
+      "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
 
+      "dev": true
 
+    },
 
     "private": {
 
       "version": "0.1.8",
 
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
 
@@ -4724,6 +4854,28 @@
 
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
 
       "dev": true
 
     },
 
+    "style-loader": {
 
+      "version": "1.0.0",
 
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.0.0.tgz",
 
+      "integrity": "sha512-B0dOCFwv7/eY31a5PCieNwMgMhVGFe9w+rh7s/Bx8kfFkrth9zfTZquoYvdw8URgiqxObQKcpW51Ugz1HjfdZw==",
 
+      "dev": true,
 
+      "requires": {
 
+        "loader-utils": "^1.2.3",
 
+        "schema-utils": "^2.0.1"
 
+      },
 
+      "dependencies": {
 
+        "schema-utils": {
 
+          "version": "2.2.0",
 
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.2.0.tgz",
 
+          "integrity": "sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==",
 
+          "dev": true,
 
+          "requires": {
 
+            "ajv": "^6.10.2",
 
+            "ajv-keywords": "^3.4.1"
 
+          }
 
+        }
 
+      }
 
+    },
 
     "supports-color": {
 
       "version": "6.1.0",
 
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
 
@@ -4914,6 +5066,12 @@
 
         "set-value": "^2.0.1"
 
       }
 
     },
 
+    "uniq": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
 
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
 
+      "dev": true
 
+    },
 
     "unique-filename": {
 
       "version": "1.1.1",
 
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",

+ 2 - 0
package.json
View File 

@@ -12,6 +12,8 @@
 
     "@babel/core": "^7.5.5",
 
     "@babel/preset-env": "^7.5.5",
 
     "babel-loader": "^8.0.6",
 
+    "css-loader": "^3.2.0",
 
+    "style-loader": "^1.0.0",
 
     "webpack": "^4.39.2",
 
     "webpack-cli": "^3.3.7"
 
   },

+ 58 - 0
src/index.css
View File 

@@ -0,0 +1,58 @@
 
+:root {
 
+	--max-width: 250px;
 
+}
 
+
 
+body {
 
+	padding: 0;
 
+	margin: 0;
 
+}
 
+
 
+#toasts-container {
 
+	position: fixed;
 
+	height: 100vh;
 
+	display: flex;
 
+	flex-direction: column;
 
+	top: 20px;
 
+	left: 20px;
 
+}
 
+
 
+#toasts-container.position-left {
 
+	right: 0;
 
+	left: 20px;
 
+	align-items: flex-start;
 
+}
 
+
 
+#toasts-container.position-right {
 
+	left: 0;
 
+	right: 20px;
 
+	align-items: flex-end;
 
+}
 
+
 
+#toasts-container.position-top {
 
+	bottom: 0;
 
+	top: 20px;
 
+	justify-content: flex-start;
 
+}
 
+
 
+#toasts-container.position-bottom {
 
+	top: 0;
 
+	margin-top: -20px;
 
+	justify-content: flex-end;
 
+}
 
+
 
+.toast {
 
+	user-select: none;
 
+	z-index: 10000 !important;
 
+	border-radius: 2px;
 
+	cursor: pointer;
 
+	position: relative;
 
+	top: 0;
 
+	height: auto;
 
+	background-color: #323232;
 
+	color: #fff;
 
+	padding: 10px 25px;
 
+	font-size: 1rem;
 
+	font-weight: 300;
 
+	width: var(--max-width);
 
+	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
+}

+ 2 - 0
src/index.js
View File 

@@ -1 +1,3 @@
 
+import "./index.css";
 
+
 
 export default require('./toasters').default;

+ 2 - 1
webpack.config.js
View File 

@@ -13,7 +13,8 @@ module.exports = {
 
   },
 
   module: {
 
     rules: [
 
-      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
 
+      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
 
+      { test: /\.css$/i, use: [ "style-loader", "css-loader" ] },
 
     ]
 
   }
 
 }

Some files were not shown because too many files changed in this diff