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

refactor: dropdown

Browse source
This commit is contained in:
Lucas Larroche 2023-04-02 22:37:00 +07:00
parent 09dc2a75b5
commit f0a2480fc6
14 changed files with 56 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

6
scss/_index.scss
View file

@ -18,7 +18,7 @@
@use "content/link"; // a, role="link"
@use "content/typography"; // headings, p, ul, blockquote, ...
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/button"; // button, [role="button"], type="button", type="submit" ...
@use "content/button"; // button, role="button", type="button", type="submit" ...
@use "content/table"; // table, tr, td, ...
@use "content/code"; // pre, code, ...
@use "content/miscs"; // hr, template, [hidden], dialog, canvas
@ -35,8 +35,8 @@
// Components
@use "components/accordion"; // details, summary
@use "components/card"; // article
@use "components/dropdown"; // details[role="list"]
@use "components/group"; // details[role="list"]
@use "components/dropdown"; // details.dropdown
@use "components/group"; // role="group"
@use "components/loading"; // aria-busy=true
@use "components/modal"; // dialog
@use "components/nav"; // nav

20
scss/components/_dropdown.scss
View file

@ -1,14 +1,14 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/dropdown") {
@if map.get($modules, "components/dropdown") and $enable-classes {
/**
* Dropdown ([role="list"])
* Dropdown (details.dropdown)
*/
// Container
// ––––––––––––––––––––
details[role="list"] {
details.dropdown {
position: relative;
border-bottom: none;
@ -38,7 +38,7 @@
// Container type accordion
// inside a nav
// ––––––––––––––––––––
nav details[role="list"] {
nav details.dropdown {
// Override height
margin-bottom: 0;
}
@ -46,7 +46,7 @@
// Bouton as a select
// inside container type accordion
// ––––––––––––––––––––
details[role="list"] summary:not([role]) {
details.dropdown summary:not([role]) {
height: calc(
1rem *
var(#{$✨}line-height) +
@ -100,7 +100,7 @@
// Dropdown inside a nav
// ––––––––––––––––––––
nav details[role="list"] {
nav details.dropdown {
display: inline;
margin: calc(var(#{$✨}nav-element-spacing-vertical) * -1) 0;
@ -118,7 +118,7 @@
// Submenu
// ––––––––––––––––––––
details[role="list"] summary + ul {
details.dropdown summary + ul {
display: flex;
z-index: 99;
position: absolute;
@ -196,14 +196,14 @@
// Button opened
// inside container type accordion
// ––––––––––––––––––––
details[role="list"][open] summary {
details.dropdown[open] summary {
margin-bottom: 0;
}
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
details[role="list"][open] summary {
details.dropdown[open] summary {
+ ul {
transform: scaleY(1);
opacity: 1;
@ -217,7 +217,7 @@
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––
details[role="list"][open] summary {
details.dropdown[open] summary {
&::before {
display: block;
z-index: 1;

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

@ -167,8 +167,8 @@
#{$✨}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
}
// Dropdown (<details role="list">)
@if map.get($modules, "components/dropdown") {
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
#{$✨}dropdown-background-color: #{$slate-900};
#{$✨}dropdown-border-color: #{$slate-850};
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);

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

@ -167,8 +167,8 @@
#{$✨}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
}
// Dropdown (<details role="list">)
@if map.get($modules, "components/dropdown") {
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
#{$✨}dropdown-background-color: #{$white};
#{$✨}dropdown-border-color: #{$slate-50};
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);

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

@ -358,15 +358,15 @@
}
}
// Dropdown (<details role="list">)
@if map.get($modules, "components/dropdown") {
details[role="list"] {
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
details.dropdown {
summary:not([role="button"]) {
#{$✨}outline-width: 0.0625rem;
}
}
nav {
details[role="list"] {
details.dropdown {
summary:focus-visible {
#{$✨}outline-width: 0.1875rem;
}