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

feat: group

Browse source
This commit is contained in:
Lucas Larroche 2023-04-02 10:06:47 +07:00
parent 395ceca401
commit 2c202a420d
13 changed files with 741 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

1
scss/_index.scss
View file

@ -36,6 +36,7 @@
@use "components/accordion"; // details, summary
@use "components/card"; // article
@use "components/dropdown"; // details[role="list"]
@use "components/group"; // details[role="list"]
@use "components/loading"; // aria-busy=true
@use "components/modal"; // dialog
@use "components/nav"; // nav

1
scss/_settings.scss
View file

@ -124,6 +124,7 @@ $modules: map.merge(
"components/accordion": true,
"components/card": true,
"components/dropdown": true,
"components/group": true,
"components/loading": true,
"components/modal": true,
"components/nav": true,

83
scss/components/_group.scss Normal file
View file

@ -0,0 +1,83 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/group") {
/**
* Group ([role="group"], [role="search"])
*/
form {
&[role="search"],
&[role="group"] {
width: 100%;
}
}
[role="search"] {
> * {
&:first-child {
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
}
&:last-child {
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
}
}
}
[role="search"],
[role="group"] {
display: inline-flex;
position: relative;
margin-bottom: var(#{$✨}spacing);
border-radius: var(#{$✨}border-radius);
box-shadow: var(#{$✨}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle;
transition: box-shadow var(#{$✨}transition);
> *,
input:not([type="checkbox"], [type="radio"]),
select {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
&:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:focus {
z-index: 2;
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select {
&:not(:first-child) {
margin-left: calc(var(#{$✨}border-width) * -1);
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"] {
width: auto;
}
}
}

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

@ -342,6 +342,10 @@
#{$✨}outline-width: 0.0625rem;
}
[type="search"] {
#{$✨}border-radius: 5rem;
}
// Checkboxes, Radios and Switches
@if map.get($modules, "forms/checkbox-radio-switch") {
[type="checkbox"],
@ -369,4 +373,69 @@
}
}
}
// Group (role="group")
@if map.get($modules, "components/group") {
[role="search"] {
#{$✨}border-radius: 5rem;
}
[role="search"],
[role="group"] {
#{$✨}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$✨}form-element-spacing-horizontal: 2rem;
}
@supports selector(:has(*)) {
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
}
@if $enable-classes {
&:has(
button.secondary:focus,
[type="submit"].secondary:focus,
[type="button"].secondary:focus,
[role="button"].secondary:focus
) {
#{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
}
&:has(
button.contrast:focus,
[type="submit"].contrast:focus,
[type="button"].contrast:focus,
[role="button"].contrast:focus
) {
#{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}contrast-focus);
}
}
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$✨}group-box-shadow: 0 0 0 0.0625rem var(#{$✨}form-element-border-color);
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$✨}button-box-shadow: 0 0 0 0.0625rem var(#{$✨}primary-border);
#{$✨}button-hover-box-shadow: 0 0 0 0.0625rem var(#{$✨}primary-border-hover);
}
}
button,
[type="submit"],
[type="button"],
[role="button"] {
&:focus {
box-shadow: none;
}
}
}
}
}
}