From 45426dd4b3d9b4c0bc45152726687bd006bfb4e6 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sun, 23 Jan 2022 17:03:03 +0700 Subject: [PATCH] Dropdown component --- css/pico.slim.css | 9 ++ css/themes/default.css | 9 ++ docs/dropdowns.html | 95 +++++++++++++ docs/src/_sidebar.html | 2 +- docs/src/dropdown.html | 128 ------------------ docs/src/dropdowns.html | 229 ++++++++++++++++++++++++++++++++ scss/components/_dropdown.scss | 121 ++++++++++------- scss/themes/default/_dark.scss | 5 + scss/themes/default/_light.scss | 5 + 9 files changed, 426 insertions(+), 177 deletions(-) create mode 100644 docs/dropdowns.html delete mode 100644 docs/src/dropdown.html create mode 100644 docs/src/dropdowns.html diff --git a/css/pico.slim.css b/css/pico.slim.css index fc67fe53..8b3647be 100644 --- a/css/pico.slim.css +++ b/css/pico.slim.css @@ -209,6 +209,9 @@ kbd { 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --card-sectionning-background-color: #fbfbfc; + --dropdown-background-color: var(--card-background-color); + --dropdown-focus-background-color: #f6f8f9; + --dropdown-color: var(--form-element-color); --modal-overlay-background-color: rgba(213, 220, 226, 0.8); --progress-background-color: #d5dce2; --progress-color: var(--primary); @@ -306,6 +309,9 @@ kbd { 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); --card-sectionning-background-color: #18232c; + --dropdown-background-color: var(--card-background-color); + --dropdown-focus-background-color: rgba(115, 130, 140, 0.05); + --dropdown-color: var(--form-element-color); --modal-overlay-background-color: rgba(36, 51, 62, 0.9); --progress-background-color: #24333e; --progress-color: var(--primary); @@ -402,6 +408,9 @@ kbd { 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); --card-sectionning-background-color: #18232c; + --dropdown-background-color: var(--card-background-color); + --dropdown-focus-background-color: rgba(115, 130, 140, 0.05); + --dropdown-color: var(--form-element-color); --modal-overlay-background-color: rgba(36, 51, 62, 0.9); --progress-background-color: #24333e; --progress-color: var(--primary); diff --git a/css/themes/default.css b/css/themes/default.css index 22c48465..038741d4 100644 --- a/css/themes/default.css +++ b/css/themes/default.css @@ -273,6 +273,9 @@ kbd { 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --card-sectionning-background-color: #fbfbfc; + --dropdown-background-color: var(--card-background-color); + --dropdown-focus-background-color: #f6f8f9; + --dropdown-color: var(--form-element-color); --modal-overlay-background-color: rgba(213, 220, 226, 0.8); --progress-background-color: #d5dce2; --progress-color: var(--primary); @@ -370,6 +373,9 @@ kbd { 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); --card-sectionning-background-color: #18232c; + --dropdown-background-color: var(--card-background-color); + --dropdown-focus-background-color: rgba(115, 130, 140, 0.05); + --dropdown-color: var(--form-element-color); --modal-overlay-background-color: rgba(36, 51, 62, 0.9); --progress-background-color: #24333e; --progress-color: var(--primary); @@ -466,6 +472,9 @@ kbd { 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); --card-sectionning-background-color: #18232c; + --dropdown-background-color: var(--card-background-color); + --dropdown-focus-background-color: rgba(115, 130, 140, 0.05); + --dropdown-color: var(--form-element-color); --modal-overlay-background-color: rgba(36, 51, 62, 0.9); --progress-background-color: #24333e; --progress-color: var(--primary); diff --git a/docs/dropdowns.html b/docs/dropdowns.html new file mode 100644 index 00000000..195a55cf --- /dev/null +++ b/docs/dropdowns.html @@ -0,0 +1,95 @@ +Dropdowns • Pico.css

Code licensed MIT

\ No newline at end of file diff --git a/docs/src/_sidebar.html b/docs/src/_sidebar.html index a6eab849..ec0c3940 100644 --- a/docs/src/_sidebar.html +++ b/docs/src/_sidebar.html @@ -43,7 +43,7 @@