enhanced the tooltip to have a width of max-content and a max width of 250px. This will allow for the tooltips to not always be 250px wide even when the tooltip is short.

Added the ghost buttons from discussion #29
This commit is contained in:
Yohn 2025-01-13 21:02:05 -05:00
parent f8fbce367b
commit eb1304a8e4
262 changed files with 2039 additions and 646 deletions

View file

@ -1,6 +1,6 @@
@charset "UTF-8";
/*!
* Pico CSS v2.2.3 (https://github.com/Yohn/PicoCSS)
* Pico CSS v2.2.4 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2025 - Licensed under MIT
*/
/**
@ -1694,6 +1694,34 @@ main {
pointer-events: none;
}
/* Base ghost button style */
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost {
--pico-background-color: transparent;
--pico-border-color: transparent;
--pico-color: var(--pico-primary);
}
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
--pico-background-color: transparent;
--pico-border-color: transparent;
--pico-color: var(--pico-primary-hover);
}
/* Secondary ghost button */
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary {
--pico-color: var(--pico-secondary);
}
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
--pico-color: var(--pico-secondary-hover);
}
/* Contrast ghost button */
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast {
--pico-color: var(--pico-contrast);
}
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
--pico-color: var(--pico-contrast-hover);
}
/**
* Table
*/
@ -4122,7 +4150,8 @@ body:has(dialog[open]) {
position: absolute;
bottom: 100%;
left: 50%;
width: 250px;
width: -moz-max-content;
width: max-content;
max-width: 250px;
padding: 0.25rem 0.5rem;
overflow: hidden;