mirror of
https://github.com/picocss/pico.git
synced 2025-04-27 03:36:13 -04:00
Build CSS
This commit is contained in:
github-actions[bot]
parent
ddf41a191a
commit
951aae3801
77 changed files with 7702 additions and 7702 deletions
|
|
@ -1,210 +1,210 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/group") {
|
||||
/**
|
||||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
|
||||
#{$parent-selector} fieldset[role="group"] > legend {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#{$parent-selector} [role="search"],
|
||||
#{$parent-selector} [role="group"] {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
vertical-align: middle;
|
||||
transition: box-shadow var(#{$css-var-prefix}transition);
|
||||
|
||||
> label,
|
||||
> legend {
|
||||
border-color: var(#{$css-var-prefix}secondary-background);
|
||||
background-color: var(#{$css-var-prefix}secondary-background);
|
||||
color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
||||
> *,
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
> label,
|
||||
> legend,
|
||||
> details {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
> details {
|
||||
&:not(:first-child) > summary {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) > summary {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
> summary,
|
||||
> summary:not([role]) {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@supports selector(:has(*)) {
|
||||
// Group box shadow when a button is focused
|
||||
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
||||
#{$css-var-prefix}group-box-shadow: var(
|
||||
#{$css-var-prefix}group-box-shadow-focus-with-button
|
||||
);
|
||||
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Group box shadow when an input is focused
|
||||
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
||||
#{$css-var-prefix}group-box-shadow: var(
|
||||
#{$css-var-prefix}group-box-shadow-focus-with-input
|
||||
);
|
||||
|
||||
// Adapt box shadow for buttons
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
||||
var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
||||
var(#{$css-var-prefix}primary-hover-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove button box shadow if we have a group box shadow
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} [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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
#{$parent-selector} [role="search"],
|
||||
#{$parent-selector} [role="group"] {
|
||||
> *,
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-top-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-right: calc(var(#{$css-var-prefix}border-width) * -1);
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/group") {
|
||||
/**
|
||||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
|
||||
#{$parent-selector} fieldset[role="group"] > legend {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#{$parent-selector} [role="search"],
|
||||
#{$parent-selector} [role="group"] {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
vertical-align: middle;
|
||||
transition: box-shadow var(#{$css-var-prefix}transition);
|
||||
|
||||
> label,
|
||||
> legend {
|
||||
border-color: var(#{$css-var-prefix}secondary-background);
|
||||
background-color: var(#{$css-var-prefix}secondary-background);
|
||||
color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
||||
> *,
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
> label,
|
||||
> legend,
|
||||
> details {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
> details {
|
||||
&:not(:first-child) > summary {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) > summary {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
> summary,
|
||||
> summary:not([role]) {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@supports selector(:has(*)) {
|
||||
// Group box shadow when a button is focused
|
||||
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
||||
#{$css-var-prefix}group-box-shadow: var(
|
||||
#{$css-var-prefix}group-box-shadow-focus-with-button
|
||||
);
|
||||
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
> label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Group box shadow when an input is focused
|
||||
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
||||
#{$css-var-prefix}group-box-shadow: var(
|
||||
#{$css-var-prefix}group-box-shadow-focus-with-input
|
||||
);
|
||||
|
||||
// Adapt box shadow for buttons
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
||||
var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
||||
var(#{$css-var-prefix}primary-hover-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove button box shadow if we have a group box shadow
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} [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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
#{$parent-selector} [role="search"],
|
||||
#{$parent-selector} [role="group"] {
|
||||
> *,
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-top-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
label,
|
||||
> legend,
|
||||
> details > summary {
|
||||
&:not(:first-child) {
|
||||
margin-right: calc(var(#{$css-var-prefix}border-width) * -1);
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue