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

Address issues for new dropdown

Browse source 
Added box-shadow, rtl alignment, works with vertical nav/aside, fix paddings and font-size, per @lucaslarroche suggestions
This commit is contained in:
ethanpil 2022-01-09 21:05:31 -08:00
parent b6ed37a9fc
commit 8d7b62c316
3 changed files with 35 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

29
scss/components/_nav.scss
View file

@ -30,7 +30,7 @@ nav {
display: inline-block;
margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5);
// Nested dropdown navigation
&:hover {
ul {
@ -41,22 +41,27 @@ nav {
display: none;
z-index: 500;
position: absolute;
padding: .5em 1.15em;
padding: calc(var(--spacing)*0.5) calc(var(--spacing)*1.15);;
background-color: var(--nav-dropdown-background-color);
box-shadow: var(--nav-dropdown-box-shadow);
li {
display: block;
padding: .3em .2em;
padding: calc(var(--spacing)*0.2);
float: none;
text-align: left;
[dir="rtl"] {
text-align: right;
}
}
a {
display: inline;
padding: 0;
font-size: .9em;
}
}
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
@ -95,5 +100,17 @@ aside {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
}
ul {
display:block;
position: inherit;
background-color: inherit;
box-shadow: none;
padding-bottom: 0;
li:last-of-type {
padding-bottom: 0;
}
}
}
}
}

6
scss/themes/default/_dark.scss
View file

@ -84,6 +84,12 @@
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
// Nav
--nav-dropdown-background-color: #{rgba($grey-500, 0.05)};
--nav-dropdown-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)},
0 0.125rem 2rem #{rgba($black, 0.12)},
0 0 0 0.0625rem #{rgba($black, 0.036)};
// Table
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};

6
scss/themes/default/_light.scss
View file

@ -85,6 +85,12 @@
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
// Nav
--nav-dropdown-background-color: #{mix($grey-50, $white)};
--nav-dropdown-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)},
0 0.125rem 2rem #{rgba($grey-900, 0.08)},
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
// Table
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #{mix($grey-50, $white)};