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

Enabled multiline tooltips, and disabled dotted lines for tooltips when child elements contain links of form elements.

Browse source
This commit is contained in:
Yohn 2024-11-30 18:00:11 -05:00
parent 68a9fb92ee
commit fdf5c83210
241 changed files with 514 additions and 480 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
docs/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

6
docs/favicon.svg Normal file
View file

@ -0,0 +1,6 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="pico-logo" viewBox="0 0 120 120">
<path d="m70.98,95.71a2,2 0 0 0 -1.15,1.15l-7.81,20.32c-0.66,1.71 -3.08,1.71 -3.74,0l-7.81,-20.32a2,2 0 0 0 -1.15,-1.15l-20.32,-7.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l20.32,-7.81a2,2 0 0 0 1.15,-1.15l7.81,-20.32c0.66,-1.71 3.08,-1.71 3.74,0l7.81,20.32c0.2,0.53 0.62,0.95 1.15,1.15l20.32,7.81c1.71,0.66 1.71,3.08 0,3.74l-20.32,7.81z" fill="#ffbf00"/>
<path d="m91.72,51.1c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81a2,2 0 0 0 -1.15,1.15l-2.81,7.32z" fill="#ff9500"/>
<path d="m35.85,54.98a2,2 0 0 0 -1.15,1.15l-2.81,7.32c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81z" fill="#ff9500"/>
<path d="m50.77,28.99c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81a2,2 0 0 0 -1.15,1.15l-2.81,7.32z" fill="#ffbf00"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

36
docs/index.html
View file

@ -7,8 +7,16 @@
<title>Preview • Pico CSS</title>
<meta name="description" content="A pure HTML example, without dependencies." />
<!-- Pico.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.0/css/pico.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.0/css/pico.colors.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.1/css/pico.min.css" />
<!--<link rel="stylesheet" href="/css/pico.min.css" />-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.1/css/pico.colors.min.css" />
<style>
:root {
--pico-logo-wordmark: #fff;
--pico-logo-small-sparkles: #ff9500;
--pico-logo-big-sparkle: #ffbf00;
}
</style>
</head>
<body>
<div class="container-fluid">
@ -17,7 +25,15 @@
<!-- Header -->
<header>
<hgroup>
<h1>Pico</h1>
<h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="pico-logo" viewBox="0 0 370 164">
<path fill="var(--pico-logo-wordmark)" d="m0,164l0,-101.28l21.18,0l1.29,13.31l0,87.97l-22.47,0zm42.93,-27.2c-5.95,0 -10.95,-1.49 -14.98,-4.49c-4.04,-3.08 -7.06,-7.47 -9.08,-13.16c-2.01,-5.69 -3.02,-12.44 -3.02,-20.26c0,-7.91 1.01,-14.66 3.02,-20.25c2.02,-5.69 5.04,-10.03 9.08,-13.02c4.03,-3.09 9.03,-4.63 14.98,-4.63c6.72,0 12.53,1.54 17.43,4.63c4.9,2.99 8.64,7.33 11.24,13.02c2.59,5.59 3.89,12.34 3.89,20.25c0,7.82 -1.3,14.57 -3.89,20.26c-2.6,5.69 -6.34,10.08 -11.24,13.16c-4.9,3 -10.71,4.49 -17.43,4.49zm-5.76,-20.83c2.88,0 5.42,-0.73 7.63,-2.17s3.99,-3.43 5.33,-5.94c1.35,-2.6 2.02,-5.59 2.02,-8.97c0,-3.37 -0.62,-6.31 -1.87,-8.82c-1.25,-2.61 -3.03,-4.63 -5.33,-6.08c-2.21,-1.45 -4.76,-2.17 -7.64,-2.17c-2.88,0 -5.47,0.72 -7.78,2.17c-2.21,1.45 -3.94,3.47 -5.18,6.08c-1.25,2.6 -1.88,5.54 -1.88,8.82c0,3.38 0.63,6.37 1.88,8.97c1.24,2.51 2.97,4.49 5.18,5.94c2.21,1.44 4.76,2.17 7.64,2.17zm50.63,19.09l0,-72.34l22.47,0l0,72.34l-22.47,0zm11.24,-81.6c-3.36,0 -6.34,-1.25 -8.93,-3.76c-2.5,-2.6 -3.75,-5.59 -3.75,-8.97c0,-3.57 1.25,-6.56 3.75,-8.97c2.59,-2.51 5.57,-3.76 8.93,-3.76c3.45,0 6.43,1.25 8.93,3.76c2.5,2.41 3.74,5.4 3.74,8.97c0,3.38 -1.24,6.37 -3.74,8.97c-2.5,2.51 -5.48,3.76 -8.93,3.76zm63.15,83.34c-7.69,0 -14.55,-1.59 -20.6,-4.77c-5.96,-3.28 -10.62,-7.77 -13.98,-13.46c-3.36,-5.79 -5.04,-12.35 -5.04,-19.68c0,-7.42 1.68,-13.98 5.04,-19.67c3.36,-5.69 7.97,-10.13 13.83,-13.31c5.96,-3.28 12.78,-4.92 20.46,-4.92c7.39,0 14.17,1.88 20.31,5.64c6.15,3.76 10.57,9.21 13.26,16.35l-21.33,7.23c-1.05,-2.31 -2.83,-4.19 -5.33,-5.64c-2.4,-1.54 -5.09,-2.31 -8.06,-2.31c-2.98,0 -5.62,0.72 -7.93,2.17c-2.2,1.35 -3.98,3.28 -5.33,5.78c-1.24,2.51 -1.87,5.4 -1.87,8.68s0.63,6.18 1.87,8.68c1.35,2.42 3.17,4.35 5.48,5.79c2.4,1.45 5.09,2.17 8.07,2.17c2.97,0 5.66,-0.77 8.06,-2.31s4.18,-3.57 5.33,-6.08l21.32,7.23c-2.78,7.24 -7.25,12.79 -13.39,16.64c-6.05,3.86 -12.78,5.79 -20.17,5.79zm78.63,0c-7.58,0 -14.31,-1.59 -20.16,-4.77c-5.77,-3.28 -10.33,-7.77 -13.69,-13.46c-3.27,-5.69 -4.9,-12.25 -4.9,-19.68c0,-7.42 1.63,-13.98 4.9,-19.67c3.26,-5.69 7.78,-10.13 13.54,-13.31c5.86,-3.28 12.49,-4.92 19.88,-4.92c7.59,0 14.26,1.64 20.03,4.92c5.85,3.18 10.42,7.62 13.68,13.31c3.27,5.69 4.9,12.25 4.9,19.67c0,7.43 -1.63,13.99 -4.9,19.68c-3.26,5.69 -7.78,10.18 -13.54,13.46c-5.67,3.18 -12.25,4.77 -19.74,4.77zm-0.14,-21.41c2.98,0 5.52,-0.68 7.63,-2.03c2.21,-1.44 3.94,-3.37 5.19,-5.79c1.25,-2.5 1.87,-5.4 1.87,-8.68c0,-3.28 -0.67,-6.12 -2.01,-8.53c-1.25,-2.51 -2.98,-4.44 -5.19,-5.79c-2.21,-1.45 -4.75,-2.17 -7.63,-2.17c-2.89,0 -5.43,0.72 -7.64,2.17c-2.21,1.35 -3.94,3.28 -5.19,5.79c-1.24,2.41 -1.87,5.25 -1.87,8.53c0,3.19 0.63,6.03 1.87,8.54c1.25,2.51 2.98,4.49 5.19,5.93c2.31,1.35 4.9,2.03 7.78,2.03z"></path>
<path d="m337.67,104.6a2,2 0 0 0 -1.15,1.15l-7.81,20.32c-0.66,1.71 -3.08,1.71 -3.74,0l-7.81,-20.32a2,2 0 0 0 -1.15,-1.15l-20.32,-7.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l20.32,-7.81a2,2 0 0 0 1.15,-1.15l7.81,-20.32c0.66,-1.71 3.08,-1.71 3.74,0l7.81,20.32c0.2,0.53 0.62,0.95 1.15,1.15l20.32,7.81c1.71,0.66 1.71,3.08 0,3.74l-20.32,7.81z" fill="var(--pico-logo-big-sparkle)"></path>
<path fill="var(--pico-logo-small-sparkles)" d="m358.41,59.99c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81a2,2 0 0 0 -1.15,1.15l-2.81,7.32z"></path>
<path fill="var(--pico-logo-small-sparkles)" d="m302.54,63.87a2,2 0 0 0 -1.15,1.15l-2.81,7.32c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81z"></path>
<path d="m317.46,37.88c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81a2,2 0 0 0 -1.15,1.15l-2.81,7.32z" fill="var(--pico-logo-big-sparkle)"></path>
</svg>
</h1>
<p>A Pico CSS + example with addition to the standard Pico CSS library.</p>
<p>Demo page from <a href="https://picocss.com/docs/modal#utilities">picocss.com model docs</a></p>
</hgroup>
@ -32,6 +48,7 @@
<aside>
<nav>
<ul>
<li><a href="#tooltip">Tooltip</a></li>
<li><a href="#validation">Validation</a></li>
<li><a href="#group">Group</a></li>
<li><a href="#rows">Row</a></li>
@ -55,9 +72,20 @@
<p>Some of the demos on this page do require <a href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as the preview here. I may get a build script going to compile the javascript plugins / components later. Let me know if this feature would help you.</p>
<footer>If this fork has helped you, please <a href="https://github.com/Yohn/PicoCSS">Like</a> this fork!</footer>
</article>
<!-- Tooltip -->
<article id="tooltip">
<header><h2>Tooltip</h2></header>
<p>For multi-line tooltips, you can now add <code>&amp;#xa;</code> where the line break should go within your tooltip area.</core></p>
<label for="test-tooltip" data-tooltip="this is &#xa; a test">
<input type="text" id="test-tooltip" placeholder="Testing">
</label>
<p>I also wanted to remove the dotted line on input fileds when they are contained within the tooltip element, so that is why this example has the input field with the tooltip on the <code>&lt;label&gt;</code> wrapper.</p>
<code> data-tooltip="this is &amp;#xa; a test"</code>
</article>
<!-- /Tooltip -->
<!-- Validation -->
<form action="javascript:void(0);">
<article id="group">
<article id="validation">
<header><h2>Validation</h2></header>
<p>
Form :user-valid and :user-invalid