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

style(dropdowns)

Browse source
This commit is contained in:
Lucas Larroche 2022-01-23 20:52:08 +07:00
parent f909542b1e
commit 75cfc082d8
5 changed files with 42 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

24
css/pico.slim.css
View file

@ -209,9 +209,11 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024); 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc; --card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: var(--card-background-color); --dropdown-background-color: #fbfbfc;
--dropdown-focus-background-color: #f6f8f9; --dropdown-border-color: #e1e6eb;
--dropdown-color: var(--form-element-color); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -309,9 +311,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: var(--card-background-color); --dropdown-background-color: #1b2832;
--dropdown-focus-background-color: rgba(115, 130, 140, 0.05); --dropdown-border-color: #24333e;
--dropdown-color: var(--form-element-color); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -408,9 +412,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: var(--card-background-color); --dropdown-background-color: #1b2832;
--dropdown-focus-background-color: rgba(115, 130, 140, 0.05); --dropdown-border-color: #24333e;
--dropdown-color: var(--form-element-color); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);

24
css/themes/default.css
View file

@ -273,9 +273,11 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024); 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc; --card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: var(--card-background-color); --dropdown-background-color: #fbfbfc;
--dropdown-focus-background-color: #f6f8f9; --dropdown-border-color: #e1e6eb;
--dropdown-color: var(--form-element-color); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -373,9 +375,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: var(--card-background-color); --dropdown-background-color: #1b2832;
--dropdown-focus-background-color: rgba(115, 130, 140, 0.05); --dropdown-border-color: #24333e;
--dropdown-color: var(--form-element-color); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -472,9 +476,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: var(--card-background-color); --dropdown-background-color: #1b2832;
--dropdown-focus-background-color: rgba(115, 130, 140, 0.05); --dropdown-border-color: #24333e;
--dropdown-color: var(--form-element-color); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);

3
scss/components/_dropdown.scss
View file

@ -51,12 +51,13 @@ details[role="list"] {
left: 0; left: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--dropdown-border-color);
border-top: none; border-top: none;
border-radius: var(--border-radius); border-radius: var(--border-radius);
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
background-color: var(--dropdown-background-color); background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color); color: var(--dropdown-color);
li { li {

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

@ -113,9 +113,11 @@
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)}; --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Dropdown (<details role="list">) // Dropdown (<details role="list">)
--dropdown-background-color: var(--card-background-color); --dropdown-background-color: #{$grey-900};
--dropdown-focus-background-color: #{rgba($grey-500, 0.05)}; --dropdown-border-color: #{mix($grey-900, $grey-800)};
--dropdown-color: var(--form-element-color); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)}; --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};

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

@ -113,9 +113,11 @@
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)}; --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">) // Dropdown (<details role="list">)
--dropdown-background-color: var(--card-background-color); --dropdown-background-color: #{mix($grey-50, $white, 25%)};
--dropdown-focus-background-color: #{mix($grey-50, $white)}; --dropdown-border-color: #{mix($grey-100, $grey-50)};
--dropdown-color: var(--form-element-color); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: #{$grey-50};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)}; --modal-overlay-background-color: #{rgba($grey-100, 0.8)};