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

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);
}
}
}
}