mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 18:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added submenus to work with hamburger menu

Browse source
This commit is contained in:
Yohn 2025-01-17 04:45:55 -05:00
parent 39da3b69cc
commit ddd46d9875
254 changed files with 2946 additions and 398 deletions
Download patch file Download diff file Expand all files Collapse all files

64
css/pico.classless.css
View file

@ -203,18 +203,18 @@ input:not([type=submit],
color-scheme: light;
--pico-background-color: #fff;
--pico-color: #373c44;
--pico-text-selection-color: rgba(247, 72, 183, 0.25);
--pico-text-selection-color: rgba(71, 164, 23, 0.25);
--pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c1208b;
--pico-primary-background: #c1208b;
--pico-primary: #33790f;
--pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(193, 32, 139, 0.5);
--pico-primary-hover: #98176d;
--pico-primary-hover-background: #ac1c7c;
--pico-primary-underline: rgba(51, 121, 15, 0.5);
--pico-primary-hover: #265e09;
--pico-primary-hover-background: #33790f;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(247, 72, 183, 0.5);
--pico-primary-focus: rgba(71, 164, 23, 0.5);
--pico-primary-inverse: #fff;
--pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a;
@ -343,18 +343,18 @@ input:not([type=submit],
color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(248, 105, 191, 0.1875);
--pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #f869bf;
--pico-primary-background: #c1208b;
--pico-primary: #4eb31b;
--pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(248, 105, 191, 0.5);
--pico-primary-hover: #fa9acf;
--pico-primary-hover-background: #d9269d;
--pico-primary-underline: rgba(78, 179, 27, 0.5);
--pico-primary-hover: #5dd121;
--pico-primary-hover-background: #409614;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(248, 105, 191, 0.375);
--pico-primary-focus: rgba(78, 179, 27, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-background: #525f7a;
@ -473,18 +473,18 @@ input:not([type=submit],
color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(248, 105, 191, 0.1875);
--pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #f869bf;
--pico-primary-background: #c1208b;
--pico-primary: #4eb31b;
--pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(248, 105, 191, 0.5);
--pico-primary-hover: #fa9acf;
--pico-primary-hover-background: #d9269d;
--pico-primary-underline: rgba(78, 179, 27, 0.5);
--pico-primary-hover: #5dd121;
--pico-primary-hover-background: #409614;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(248, 105, 191, 0.375);
--pico-primary-focus: rgba(78, 179, 27, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-background: #525f7a;
@ -2952,7 +2952,7 @@ nav[role=navigation] {
z-index: 1;
align-items: center;
width: 100%;
overflow: hidden;
overflow: visible;
}
nav[role=navigation][data-position=start] {
/* remove the 'flex-direction' to move menu to the right */
@ -2975,6 +2975,10 @@ nav[role=navigation] > label {
@media (max-width: 510px) {
nav[role=navigation] {
flex-wrap: wrap;
overflow: hidden;
}
nav[role=navigation]:has(input[type=checkbox]:checked) {
overflow: visible;
}
nav[role=navigation] label {
display: block;
@ -3012,6 +3016,10 @@ nav[role=navigation] > label {
@media (max-width: 700px) {
nav[role=navigation][data-breakpoint=md] {
flex-wrap: wrap;
overflow: hidden;
}
nav[role=navigation][data-breakpoint=md]:has(input[type=checkbox]:checked) {
overflow: visible;
}
nav[role=navigation][data-breakpoint=md] label {
display: block;
@ -3049,6 +3057,10 @@ nav[role=navigation] > label {
@media (max-width: 950px) {
nav[role=navigation][data-breakpoint=lg] {
flex-wrap: wrap;
overflow: hidden;
}
nav[role=navigation][data-breakpoint=lg]:has(input[type=checkbox]:checked) {
overflow: visible;
}
nav[role=navigation][data-breakpoint=lg] label {
display: block;
@ -3086,6 +3098,10 @@ nav[role=navigation] > label {
@media (max-width: 1200px) {
nav[role=navigation][data-breakpoint=xl] {
flex-wrap: wrap;
overflow: hidden;
}
nav[role=navigation][data-breakpoint=xl]:has(input[type=checkbox]:checked) {
overflow: visible;
}
nav[role=navigation][data-breakpoint=xl] label {
display: block;
@ -3123,6 +3139,10 @@ nav[role=navigation] > label {
@media (max-width: 1450px) {
nav[role=navigation][data-breakpoint=xxl] {
flex-wrap: wrap;
overflow: hidden;
}
nav[role=navigation][data-breakpoint=xxl]:has(input[type=checkbox]:checked) {
overflow: visible;
}
nav[role=navigation][data-breakpoint=xxl] label {
display: block;