mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
- Updated form validation to not validate when form[novalidate]
- Updated tooltips to go multiline, max width of 250px. -Updated card footer, to remove the margin from the last element if they are buttons or groups when in the footer - Made container, grid, and row classes to have a parent class, so they will not effect rest of page. This will only work if you use that style css. - Added tabs - Added floating labels - Added responsive nav hamburger menu Let me know if you find any bugs or have ideas for improvements!
This commit is contained in:
Yohn
parent
a937be4b4a
commit
f25840f51a
260 changed files with 71329 additions and 11561 deletions
|
|
@ -51,6 +51,23 @@
|
|||
var(#{$css-var-prefix}card-border-color);
|
||||
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
|
||||
|
||||
// https://github.com/picocss/pico/issues/557#issuecomment-2393213110
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="group"] {
|
||||
margin-bottom: 0px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/* Also remove if next input after button is a hidden input */
|
||||
&:has(+ [type="hidden"]) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
84
scss/components/_nav-hamburger.scss
Normal file
84
scss/components/_nav-hamburger.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
@use "sass:string";
|
||||
@use "sass:map";
|
||||
@use "sass:math";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/nav") {
|
||||
/**
|
||||
* Nav hamburger menu
|
||||
* modified from https: //codepen.io/brentarias/pen/gOQybod
|
||||
*/
|
||||
#{$parent-selector} nav[role="navigation"] {
|
||||
z-index: 1;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&[data-position="start"] {
|
||||
/* remove the 'flex-direction' to move menu to the right */
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
> input[type="checkbox"] {
|
||||
display: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> label {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint, $values in $breakpoints {
|
||||
$databp: 'nav[role="navigation"]';
|
||||
@if $breakpoint != sm {
|
||||
$databp: #{$databp} + "[data-breakpoint='" + $breakpoint + "']";
|
||||
}
|
||||
|
||||
$viewport: map.get($values, "viewport");
|
||||
@media (max-width: $viewport) {
|
||||
#{$parent-selector} #{$databp} {
|
||||
flex-wrap: wrap;
|
||||
& label {
|
||||
display: block;
|
||||
}
|
||||
& > [role="list"] {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 90vw;
|
||||
max-height: 0;
|
||||
margin: 0 auto;
|
||||
background-color: var(--pico-muted-border-color); //muted-border-color);
|
||||
box-shadow: var(--pico-box-shadow);
|
||||
transition: max-height var(--pico-transition);
|
||||
& li {
|
||||
width: calc(100% - calc(var(--pico-nav-link-spacing-vertical) * 2));
|
||||
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5)
|
||||
var(--pico-nav-link-spacing-vertical);
|
||||
padding: 0;
|
||||
}
|
||||
& a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
transition:
|
||||
border-color var(--pico-transition),
|
||||
color var(--pico-transition);
|
||||
}
|
||||
& a:hover {
|
||||
border-bottom-color: var(--pico-underline);
|
||||
text-decoration: none;
|
||||
//background-color: var(--pico-primary-background) !important;
|
||||
//color: var(--pico-primary-inverse);
|
||||
}
|
||||
}
|
||||
& input[type="checkbox"]:checked ~ [role="list"] {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
scss/components/_tab-region.scss
Normal file
79
scss/components/_tab-region.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/tab-region") {
|
||||
/**
|
||||
* Tab region
|
||||
* styling help from: https://github.com/picocss/pico/discussions/608
|
||||
* and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
|
||||
*/
|
||||
#{$parent-selector} section[role="region"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
|
||||
details {
|
||||
display: contents;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
summary {
|
||||
flex-grow: 1;
|
||||
order: 0;
|
||||
margin: 0;
|
||||
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.75)
|
||||
calc(var(#{$css-var-prefix}block-spacing-horizontal) * 1.5);
|
||||
border-bottom: 1px solid transparent;
|
||||
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
|
||||
list-style-type: none;
|
||||
touch-action: manipulation;
|
||||
transition: all var(#{$css-var-prefix}transition);
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: var(#{$css-var-prefix}primary-border);
|
||||
background-color: var(#{$css-var-prefix}card-background-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
// with the - icon instead of chevron
|
||||
//transform: rotate(0deg);
|
||||
//background-image: var(#{$css-var-prefix}icon-minus);
|
||||
//background-position: center;
|
||||
//background-size: .75em auto;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
> summary {
|
||||
background-color: var(#{$css-var-prefix}primary-background);
|
||||
color: var(#{$css-var-prefix}primary-inverse) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(#{$css-var-prefix}primary-hover-background);
|
||||
}
|
||||
|
||||
//&::after {
|
||||
// black chevron icon
|
||||
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
//}
|
||||
}
|
||||
|
||||
// end for summary, keep here
|
||||
|
||||
> div {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
padding: var(#{$css-var-prefix}spacing);
|
||||
padding-bottom: 0;
|
||||
opacity: 1;
|
||||
transition: opacity var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +24,8 @@
|
|||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
width: 250px;
|
||||
max-width: 250px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
|
|
@ -34,9 +36,10 @@
|
|||
font-style: normal;
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
white-space: normal;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue