mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 18:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

RTL Dropdown Nav corrected thanks to @64bitint

Browse source 
Added popovers to possibly replace the notifications.
Started adding popover toasts
This commit is contained in:
Yohn 2024-12-13 19:43:12 -05:00
parent 8a7b25a44f
commit 64373c2d44
244 changed files with 3461 additions and 724 deletions
Download patch file Download diff file Expand all files Collapse all files

43
docs/index.html
View file

@ -91,6 +91,7 @@
</header>
<!-- /Header -->
</div>
<main class="col-12 col-md-9 col-lg-10">
<article>
<header><h2>Yohns PicoCSS Fork v2.2.0</h2></header>
@ -125,11 +126,11 @@
<p>Add <code>role="list"</code> attribute to the <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> element for the hamburger menu, and then add <code>role="listitem"</code> attribute to each <code>&lt;li&gt;</code> element.</p>
<hr>
<hgroup>
<h3>Example Hamburger Menu</h3>
<h6>(resize width of screen if you don't see it)</h6>
</hgroup>
<h3>Example Hamburger Menu</h3>
<h6>(resize width of screen if you don't see it)</h6>
</hgroup>
<!-- Start Responsive Nav 1 -->
<!-- Start Responsive Nav 1 -->
<nav role="navigation" data-position="start" data-breakpoint="lg">
<ul>
<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
@ -138,7 +139,7 @@
<li><strong>Like Us on GitHub!</strong></li>
</ul>
<input type="checkbox" id="menu-btn" />
<!-- role="button" -->
<!-- role="button" -->
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" aria-controls="nav-example">
&#x2261;
</label>
@ -150,10 +151,10 @@
<li role="listitem"><a href="#">Sign Up</a></li>
</ol>
</nav>
<!-- End Responsive Nav 1 -->
<!-- End Responsive Nav 1 -->
<h3>Hamburger Menu Under Nav Example</h3>
<!-- Start Responsive Nav 2 -->
<h3>Hamburger Menu Under Nav Example</h3>
<!-- Start Responsive Nav 2 -->
<nav role="navigation" data-position="end" data-breakpoint="lg">
<ul>
<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
@ -173,9 +174,9 @@
<li role="listitem"><a href="#">Sign Up</a></li>
</ol>
</nav>
<!-- End Responsive Nav 2 -->
<!-- End Responsive Nav 2 -->
</article>
</article>
<!-- /hamburger-menu -->
<hr>
<!-- Tabs -->
@ -506,6 +507,28 @@
</article>
<!-- ./ Modal -->
<hr>
<article id="popover">
<header><h2>Popovers</h2><p>Popovers will replace the notifications below.</p></header>
<button class="action" popovertarget="popover-example1">Backdrop Close</button>
<button popovertarget="popover-example2" popovertargetaction="show">Manual Close</button>
<article id="popover-example1" popover>
<header>
<h2>Popover</h2>
</header>
Click/Tap everywhere else to close
<footer>Footer</footer>
</article>
<article id="popover-example2" popover="manual">
Some Feedback Message With Close Button
<button popovertarget="popover-example2" popovertargetaction="hide">&times;</button>
</article>
</article>
<hr>
<!-- notifications -->
<article id="notifications">
<header><h2>Notificaton</h2></header>