Skip to content

Commit eb1304a

Browse files
YohnYohn
committed
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
1 parent f8fbce3 commit eb1304a

File tree

262 files changed

+2039
-646
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

262 files changed

+2039
-646
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ There are 4 ways to get started with pico.css:
7777
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
7878

7979
```html
80-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].3/css/pico.min.css" />
80+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].4/css/pico.min.css" />
8181
```
8282

8383
### Install with NPM
@@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
135135
```html
136136
<link
137137
rel="stylesheet"
138-
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].3/css/pico.classless.min.css"
138+
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].4/css/pico.classless.min.css"
139139
/>
140140
```
141141

@@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
144144
```html
145145
<link
146146
rel="stylesheet"
147-
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].3/css/pico.fluid.classless.min.css"
147+
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].4/css/pico.fluid.classless.min.css"
148148
/>
149149
```
150150

@@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
159159
<meta name="color-scheme" content="light dark" />
160160
<link
161161
rel="stylesheet"
162-
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].3/css/pico.classless.min.css"
162+
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].4/css/pico.classless.min.css"
163163
/>
164164
<title>Hello, world!</title>
165165
</head>

‎css/pico.amber.css‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22
/*!
3-
* Pico CSS ✨ v2.2.3 (https://github.com/Yohn/PicoCSS)
3+
* Pico CSS ✨ v2.2.4 (https://github.com/Yohn/PicoCSS)
44
* Copyright 2019-2025 - Licensed under MIT
55
*/
66
/**
@@ -1694,6 +1694,34 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
16941694
pointer-events: none;
16951695
}
16961696

1697+
/* Base ghost button style */
1698+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost {
1699+
--pico-background-color: transparent;
1700+
--pico-border-color: transparent;
1701+
--pico-color: var(--pico-primary);
1702+
}
1703+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1704+
--pico-background-color: transparent;
1705+
--pico-border-color: transparent;
1706+
--pico-color: var(--pico-primary-hover);
1707+
}
1708+
1709+
/* Secondary ghost button */
1710+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary {
1711+
--pico-color: var(--pico-secondary);
1712+
}
1713+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1714+
--pico-color: var(--pico-secondary-hover);
1715+
}
1716+
1717+
/* Contrast ghost button */
1718+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast {
1719+
--pico-color: var(--pico-contrast);
1720+
}
1721+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1722+
--pico-color: var(--pico-contrast-hover);
1723+
}
1724+
16971725
/**
16981726
* Table
16991727
*/
@@ -4122,7 +4150,8 @@ progress::-moz-progress-bar {
41224150
position: absolute;
41234151
bottom: 100%;
41244152
left: 50%;
4125-
width: 250px;
4153+
width: -moz-max-content;
4154+
width: max-content;
41264155
max-width: 250px;
41274156
padding: 0.25rem 0.5rem;
41284157
overflow: hidden;

‎css/pico.amber.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.azure.css‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22
/*!
3-
* Pico CSS ✨ v2.2.3 (https://github.com/Yohn/PicoCSS)
3+
* Pico CSS ✨ v2.2.4 (https://github.com/Yohn/PicoCSS)
44
* Copyright 2019-2025 - Licensed under MIT
55
*/
66
/**
@@ -1694,6 +1694,34 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
16941694
pointer-events: none;
16951695
}
16961696

1697+
/* Base ghost button style */
1698+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost {
1699+
--pico-background-color: transparent;
1700+
--pico-border-color: transparent;
1701+
--pico-color: var(--pico-primary);
1702+
}
1703+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1704+
--pico-background-color: transparent;
1705+
--pico-border-color: transparent;
1706+
--pico-color: var(--pico-primary-hover);
1707+
}
1708+
1709+
/* Secondary ghost button */
1710+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary {
1711+
--pico-color: var(--pico-secondary);
1712+
}
1713+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1714+
--pico-color: var(--pico-secondary-hover);
1715+
}
1716+
1717+
/* Contrast ghost button */
1718+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast {
1719+
--pico-color: var(--pico-contrast);
1720+
}
1721+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1722+
--pico-color: var(--pico-contrast-hover);
1723+
}
1724+
16971725
/**
16981726
* Table
16991727
*/
@@ -4122,7 +4150,8 @@ progress::-moz-progress-bar {
41224150
position: absolute;
41234151
bottom: 100%;
41244152
left: 50%;
4125-
width: 250px;
4153+
width: -moz-max-content;
4154+
width: max-content;
41264155
max-width: 250px;
41274156
padding: 0.25rem 0.5rem;
41284157
overflow: hidden;

‎css/pico.azure.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.blue.css‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22
/*!
3-
* Pico CSS ✨ v2.2.3 (https://github.com/Yohn/PicoCSS)
3+
* Pico CSS ✨ v2.2.4 (https://github.com/Yohn/PicoCSS)
44
* Copyright 2019-2025 - Licensed under MIT
55
*/
66
/**
@@ -1694,6 +1694,34 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
16941694
pointer-events: none;
16951695
}
16961696

1697+
/* Base ghost button style */
1698+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost {
1699+
--pico-background-color: transparent;
1700+
--pico-border-color: transparent;
1701+
--pico-color: var(--pico-primary);
1702+
}
1703+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1704+
--pico-background-color: transparent;
1705+
--pico-border-color: transparent;
1706+
--pico-color: var(--pico-primary-hover);
1707+
}
1708+
1709+
/* Secondary ghost button */
1710+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary {
1711+
--pico-color: var(--pico-secondary);
1712+
}
1713+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1714+
--pico-color: var(--pico-secondary-hover);
1715+
}
1716+
1717+
/* Contrast ghost button */
1718+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast {
1719+
--pico-color: var(--pico-contrast);
1720+
}
1721+
:is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
1722+
--pico-color: var(--pico-contrast-hover);
1723+
}
1724+
16971725
/**
16981726
* Table
16991727
*/
@@ -4122,7 +4150,8 @@ progress::-moz-progress-bar {
41224150
position: absolute;
41234151
bottom: 100%;
41244152
left: 50%;
4125-
width: 250px;
4153+
width: -moz-max-content;
4154+
width: max-content;
41264155
max-width: 250px;
41274156
padding: 0.25rem 0.5rem;
41284157
overflow: hidden;

‎css/pico.blue.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.classless.amber.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22
/*!
3-
* Pico CSS ✨ v2.2.3 (https://github.com/Yohn/PicoCSS)
3+
* Pico CSS ✨ v2.2.4 (https://github.com/Yohn/PicoCSS)
44
* Copyright 2019-2025 - Licensed under MIT
55
*/
66
/**
@@ -3172,7 +3172,8 @@ progress::-moz-progress-bar {
31723172
position: absolute;
31733173
bottom: 100%;
31743174
left: 50%;
3175-
width: 250px;
3175+
width: -moz-max-content;
3176+
width: max-content;
31763177
max-width: 250px;
31773178
padding: 0.25rem 0.5rem;
31783179
overflow: hidden;

‎css/pico.classless.amber.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.classless.azure.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22
/*!
3-
* Pico CSS ✨ v2.2.3 (https://github.com/Yohn/PicoCSS)
3+
* Pico CSS ✨ v2.2.4 (https://github.com/Yohn/PicoCSS)
44
* Copyright 2019-2025 - Licensed under MIT
55
*/
66
/**
@@ -3172,7 +3172,8 @@ progress::-moz-progress-bar {
31723172
position: absolute;
31733173
bottom: 100%;
31743174
left: 50%;
3175-
width: 250px;
3175+
width: -moz-max-content;
3176+
width: max-content;
31763177
max-width: 250px;
31773178
padding: 0.25rem 0.5rem;
31783179
overflow: hidden;

0 commit comments

Comments
 (0)