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

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.

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

1
scss/_settings.scss
View file

@ -177,6 +177,7 @@ $modules: map.merge(
"components/nav": true,
"components/progress": true,
"components/tab": true,
// [role=tablist]
// I wish role="tablist|tab|tabpanel" could be used on <details> and <summary> tag.
"components/tab-region": false,

2
scss/components/_tooltip.scss
View file

@ -24,7 +24,7 @@
position: absolute;
bottom: 100%;
left: 50%;
width: 250px;
width: max-content;
max-width: 250px;
padding: 0.25rem 0.5rem;
overflow: hidden;

35
scss/content/_button.scss
View file

@ -206,4 +206,39 @@
opacity: 0.5;
pointer-events: none;
}
// Ghost buttons
// See: https://github.com/Yohn/PicoCSS/discussions/29
@if $enable-classes {
$btn-elements: 'button, [type="button"], [type="submit"], [type="reset"], [role="button"]';
$btn-is: ':hover, :focus, :active, [aria-current]:not([aria-current="false"])';
/* Base ghost button style */
#{$parent-selector} :is(#{$btn-elements}).ghost {
#{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}border-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
&:is(#{$btn-is}) {
#{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}border-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
}
}
/* Secondary ghost button */
#{$parent-selector} :is(#{$btn-elements}).ghost.secondary {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
&:is(#{$btn-is}) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
}
}
/* Contrast ghost button */
#{$parent-selector} :is(#{$btn-elements}).ghost.contrast {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
&:is(#{$btn-is}) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
}
}
}
}

2
scss/helpers/_copyright.scss
View file

@ -1,4 +1,4 @@
/*!
* 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
*/