mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 10:26:13 -04:00
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:
parent
f8fbce367b
commit
eb1304a8e4
262 changed files with 2039 additions and 646 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue