Merge branch 'develop'

Author: Fred Heusschen

README.md

@@ -1,21 +1,18 @@
-mburger CSS
-================
+# mburger
 
-A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.<br />
+A webcomponent for animated hamburgers,
+all set up to work out of the box with the mmenu.js and mmenu-light plugins.<br />
 [Examples](https://www.mmenujs.com/mburger)
 
-<img src="https://mmenujs.com/img/preview-mburger.png" alt="CSS animated hamburgers" width="100%" />
+<img src="https://mmenujs.com/img/preview-mburger.png" alt="animated hamburgers" width="100%" />
 
 ### Customize the hamburger
+
 By default, the hamburger adopts to its environment pretty good,
-the bars scale to fit and inherit their color for the parent element.<br />
+the bars scale to fit and it inherit its color for the parent element.<br />
 
 Need help? Have a look at [the documentation](http://mmenujs.com/mburger) for examples and documentation.
 
 ### Licence
-The mburger CSS is licensed under the [CC-BY-4.0 license](http://creativecommons.org/licenses/by/4.0/).
 
-### Development
-This project uses [Gulp(4)](http://gulpjs.com/) to transpile and minify SCSS to CSS.
-If you are unfamiliar with Gulp, check [this tutorial](https://travismaynard.com/writing/getting-started-with-gulp) on how to get started.<br />
-Run `gulp watch` in the command-line to put a watch on the files and run all scripts immediately after saving your changes.
+The mburger webcomponent is licensed under the [CC-BY-4.0 license](http://creativecommons.org/licenses/by/4.0/).

bin/demo.css

@@ -0,0 +1,129 @@
+html,
+body {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+body {
+    position: relative;
+    background-color: #5888aa;
+    -webkit-text-size-adjust: none;
+    font-family: Arial, Helvetica, Verdana;
+    font-size: 20px;
+    line-height: 30px;
+    color: #fff;
+}
+h1 {
+    margin: 0 0 100px;
+    text-shadow: 8px 10px 1px rgba(0, 0, 0, 0.1);
+    text-transform: lowercase;
+    font-family: "Pacifico", Arial, sans-serif;
+    font-weight: normal;
+    font-size: 150px;
+    line-height: 1;
+    letter-spacing: -6px;
+}
+
+pre {
+    font-size: 16px;
+    line-height: 24px;
+    width: 100%;
+    overflow: auto;
+    margin: 75px 0;
+}
+
+@media (max-width: 500px) {
+    h1 {
+        font-size: 105px;
+        letter-spacing: -2px;
+    }
+}
+
+a,
+a:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
+#page {
+    max-width: 600px;
+    min-width: 300px;
+    width: 90%;
+    padding: 100px 10px;
+    margin: auto;
+}
+
+.xmpls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 75px -10px;
+}
+
+.xmpl {
+    position: relative;
+    box-sizing: border-box;
+    width: calc(50% - 20px);
+    padding-top: calc(50% - 20px);
+    margin: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    box-shadow: 6px 8px 1px rgba(0, 0, 0, 0.1);
+    transition: none 0.2s ease;
+    transition-property: background-color, box-shadow, transform;
+    text-align: center;
+    cursor: pointer;
+}
+.xmpl:hover {
+    background: rgba(255, 255, 255, 0.15);
+    box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.15);
+    transform: translateY(2px);
+}
+
+@media (min-width: 1280px) {
+    .xmpls {
+        margin-left: -320px;
+        margin-right: -320px;
+    }
+    .xmpl {
+        width: calc(25% - 20px);
+        padding-top: calc(25% - 20px);
+    }
+}
+.xmpl > mm-burger {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.xmpl > span {
+    position: absolute;
+    bottom: 10%;
+    left: 0;
+    right: 0;
+}
+
+mm-burger {
+    padding: 5px;
+}
+
+mm-burger.custom-burger-1 {
+    --mb-bar-height: 5px;
+    --mb-bar-spacing: 5px;
+
+    padding: 10px 15px;
+    border-radius: 10px;
+    border: 2px solid #fff;
+}
+
+mm-burger.custom-burger-2 {
+    --mb-bar-width: 50px;
+    --mb-bar-height: 2px;
+    --mb-bar-spacing: 12px;
+
+    width: 80px;
+    height: 80px;
+    padding: 25px 15px;
+    border-radius: 40px;
+    background-color: rgba(255, 255, 255, 0.7);
+    color: #3ea7e1;
+}