diff --git a/Popover/index.html b/Popover/index.html new file mode 100644 index 00000000..e1757abe --- /dev/null +++ b/Popover/index.html @@ -0,0 +1,50 @@ + + + + + + + + Popover component without JavaScript + + + + + + +
+ + + +
+ + + + \ No newline at end of file diff --git a/Popover/styles.css b/Popover/styles.css new file mode 100644 index 00000000..27e44587 --- /dev/null +++ b/Popover/styles.css @@ -0,0 +1,34 @@ +body { + align-items: center; + display: flex; + justify-content: center; + height: 100vh; +} + +.btn-open-popover { + anchor-name: --btn-anchor; + cursor: pointer; + height: 50px; + width: 50px; +} + +#container-popover { + inset: unset; + position-anchor: --btn-anchor; + top: anchor(bottom); + left: anchor(center); + translate: -50% 0; + + button { + align-items: center; + display: flex; + font-weight: bold; + gap: 5px; + padding: 10px; + width: 100%; + + svg { + width: 30px; + } + } +} \ No newline at end of file diff --git a/README.md b/README.md index 30c1188a..93313d60 100644 --- a/README.md +++ b/README.md @@ -330,6 +330,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc [](http://codepen.io/cristina-silva/pen/XXOpga) [](http://codepen.io/SitePoint/pen/akAmPw) [](http://codepen.io/ekrof/pen/YqmXdQ) +[](https://codepen.io/theslladev/pen/oNKPwro) **[⬆ back to top](#quick-links)** diff --git a/images/Popover.gif b/images/Popover.gif new file mode 100644 index 00000000..e6166847 Binary files /dev/null and b/images/Popover.gif differ