mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 17:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dropdown component

Browse source
This commit is contained in:
Lucas Larroche 2022-01-23 17:03:03 +07:00
parent f1a6e50461
commit 45426dd4b3
9 changed files with 426 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/pico.slim.css
View file

@ -209,6 +209,9 @@ 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-focus-background-color: #f6f8f9;
--dropdown-color: var(--form-element-color);
--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);
@ -306,6 +309,9 @@ 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-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); --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);
@ -402,6 +408,9 @@ 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-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); --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);

9
css/themes/default.css
View file

@ -273,6 +273,9 @@ 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-focus-background-color: #f6f8f9;
--dropdown-color: var(--form-element-color);
--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);
@ -370,6 +373,9 @@ 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-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); --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);
@ -466,6 +472,9 @@ 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-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); --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);

95
docs/dropdowns.html Normal file
View file

File diff suppressed because one or more lines are too long

2
docs/src/_sidebar.html
View file

@ -43,7 +43,7 @@
<ul> <ul>
<li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li> <li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
<li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li> <li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
<li><a href="./dropdown.html" id="dropdown-link" class="secondary">Dropdown</a></li> <li><a href="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</a></li>
<li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li> <li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
<li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li> <li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li> <li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>

128
docs/src/dropdown.html
View file

@ -1,128 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
${require('./_head.html') title="Dropdown" description="a dropdown
component, without JavaScript." canonical="dropdown.html" }
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdown-link"}
<div role="document">
<section id="dropdown">
<hgroup>
<h1>Dropdown</h1>
<h2>single / multi select dropdown, without JavaScript.</h2>
</hgroup>
<article aria-label="Dropdown examples">
<details role="list">
<summary aria-haspopup="listbox">Single select</summary>
<ul role="listbox">
<li>
<label for="01">
<input type="radio" id="01" name="option1" />
Option 1
</label>
</li>
<li>
<label for="02">
<input type="radio" id="02" name="option1" />
Option 2
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Multi-select</summary>
<ul role="listbox">
<li>
<label for="11">
<input type="checkbox" id="11" name="option2" />
Option 1
</label>
</li>
<li>
<label for="12">
<input type="checkbox" id="12" name="option2" />
Option 2
</label>
</li>
</ul>
</details>
</article>
<label><strong>Usage notes</strong></label>
<ul>
<li>
in order to use dropdown component, use
<code>role='list'</code> on details tag.
</li>
<li>
no need to use javascript to close the dropdown when clicked
outside.
</li>
<li>
for both single / multi-select case, need javascript to update
<code>summary</code> tag text when any option selected.
</li>
<li>
in case of single select, remove <code>open</code> attribute on
<code>details</code> tag using javascript when an option is
selected.
</li>
</ul>
<footer class="code">
<pre>
<code>
<em>&lt;!-- For Single-select --&gt;</em>
&lt;<b>details role="list"</b>&gt;
&lt;<b>summary aria-haspopup="listbox"</b>&gt;Single select&lt;<b>/summary</b>&gt;
&lt;<b>ul role="listbox"</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
Option 1
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="02"</b>&gt;
&lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
Option 2
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/details</b>&gt;
<em>&lt;!-- For Multi-select --&gt;</em>
&lt;<b>details role="list"</b>&gt;
&lt;<b>summary aria-haspopup="listbox"</b>&gt;Multi select&lt;<b>/summary</b>&gt;
&lt;<b>ul role="listbox"</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
Option 1
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
Option 2
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/details</b>&gt;
</code>
</pre>
</footer>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>

229
docs/src/dropdowns.html Normal file
View file

@ -0,0 +1,229 @@
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Dropdowns"
description="Dropdown menus and custom selects without JavaScript."
canonical="dropdowns.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdowns-link"}
<div role="document">
<section id="dropdown">
<hgroup>
<h1>Dropdowns</h1>
<h2>Dropdown menus and custom selects without JavaScript.</h2>
</hgroup>
<p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct childs.</p>
<p>For style consistency with the form elements, dropdowns are styled as a <a href="forms.html"><code>&lt;<b>select</b>&gt;</code></a> by default.</p>
<article aria-label="Dropdown style">
<details role="list">
<summary aria-haspopup="listbox">Dropdown</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
</ul>
</details>
<select required>
<option value="" disabled selected>Select</option>
</select>
<footer class="code">
<pre><code><em>&lt;!-- Dropdown --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Mauris vehicula velit&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Nunc dignissim sapien&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Aenean egestas quam&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Select --&gt;</em>
&lt;<b>select</b></u>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>&gt;Select&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;
</code></pre>
</footer>
</article>
<p><code><i>role</i>=<u>"button"</u></code> on the <code>&lt;<b>summary</b>&gt;</code> element can be used to turn the dropdown into a button.</p>
<article aria-label="Dropdown style">
<details role="list">
<summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- Primary --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;
Dropdown as a button 1
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Secondary --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;
Dropdown as a button 2
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Contrast --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;
Dropdown as a button 3
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</code></pre>
</footer>
</article>
<p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or <code>&lt;<b>input <i>type</i>=<u>"checkbox"</u></b>&gt;</code></p>
<article aria-label="Dropdown style">
<details role="list">
<summary aria-haspopup="listbox">Select single element</summary>
<ul role="listbox">
<li>
<label for="small">
<input type="radio" id="small" name="size" value="small" />
Small
</label>
</li>
<li>
<label for="medium">
<input type="radio" id="medium" name="size" value="medium" />
Medium
</label>
</li>
<li>
<label for="large">
<input type="radio" id="large" name="size" value="large" />
Large
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Select multiple elements</summary>
<ul role="listbox">
<li>
<label>
<input type="checkbox" />
Banana
</label>
</li>
<li>
<label>
<input type="checkbox" />
Watermelon
</label>
</li>
<li>
<label>
<input type="checkbox" />
Apple
</label>
</li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- With radio buttons --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u>&gt;
Small
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
Medium
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- With checkboxes --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Banana
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Watermelon
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Apple
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>

91
scss/components/_dropdown.scss
View file

@ -1,81 +1,110 @@
details[role='list'] { details[role="list"] {
position: relative; position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
summary { summary {
margin: 0;
&:not([role="button"]) {
height: calc( height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
var(--border-width) * 2 var(--border-width) * 2
); );
margin-bottom: 0; padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit; line-height: inherit;
cursor: pointer; cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
// Active & Focus
&:active,
&:focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
// Focus
&:focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
// Marker
&::after { &::after {
height: 100%; height: 100%;
transform: rotate(0deg); }
} }
& + ul { & + ul {
z-index: 100; z-index: 99;
position: absolute; position: absolute;
top: auto; top: auto;
right: 0px; right: 0;
left: 0px; 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(--form-element-border-color);
border-top: none; border-top: none;
border-bottom-right-radius: var(--border-radius); border-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius); border-top-right-radius: 0;
background-color: var(--background-color); border-top-left-radius: 0;
list-style: none; background-color: var(--dropdown-background-color);
color: var(--dropdown-color);
li { li {
margin-bottom: 0; margin-bottom: 0;
&::marker { padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
content: ''; list-style: none;
&:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
} }
label {
position: relative;
width: 100%;
margin: 0;
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
cursor: pointer;
&:hover { &:hover {
background-color: var(--secondary-focus); background-color: var(--dropdown-focus-background-color);
} }
input[type='radio'], a {
input[type='checkbox'] { display: block;
appearance: none; width: 100%;
color: var(--dropdown-color);
text-decoration: none;
} }
} }
} }
&::after {
transform: rotate(0deg);
} }
} }
&[disabled] summary, &[disabled] summary,
&.disabled summary { &.disabled summary {
color: var(--muted-color); border-color: var(--form-element-disabled-border-color);
cursor: not-allowed; background-color: var(--form-element-disabled-background-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
&[open] summary { &[open] summary {
margin-bottom: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
&::before { &::before {
display: block; display: block;
z-index: 80; z-index: 1;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -85,9 +114,5 @@ details[role='list'] {
content: ''; content: '';
cursor: default; cursor: default;
} }
&::after {
transform: rotate(180deg);
}
} }
} }

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

@ -112,6 +112,11 @@
0 0 0 0.0625rem #{rgba($black, 0.036)}; 0 0 0 0.0625rem #{rgba($black, 0.036)};
--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-background-color: var(--card-background-color);
--dropdown-focus-background-color: #{rgba($grey-500, 0.05)};
--dropdown-color: var(--form-element-color);
// 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)};

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

@ -112,6 +112,11 @@
0 0 0 0.0625rem #{rgba($grey-900, 0.024)}; 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)}; --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">)
--dropdown-background-color: var(--card-background-color);
--dropdown-focus-background-color: #{mix($grey-50, $white)};
--dropdown-color: var(--form-element-color);
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)}; --modal-overlay-background-color: #{rgba($grey-100, 0.8)};