refactor: group CSS vars

This commit is contained in:
Lucas Larroche 2023-04-10 10:48:10 +07:00
parent 4f2f597f9f
commit 1dfbf84833
10 changed files with 26 additions and 32 deletions

View file

@ -22,6 +22,9 @@
--pico-block-spacing-horizontal: var(--pico-spacing);
--pico-form-element-spacing-vertical: 0.75rem;
--pico-form-element-spacing-horizontal: 1rem;
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
--pico-modal-overlay-backdrop-filter: blur(0.375rem);
--pico-nav-element-spacing-vertical: 1rem;
--pico-nav-element-spacing-horizontal: 0.5rem;
@ -254,12 +257,6 @@ input:not([type=submit],
--pico-border-radius: 5rem;
}
[role=search],
[role=group] {
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
}
[role=search] button,
[role=search] [type=submit],
[role=search] [type=button],

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -24,6 +24,9 @@
--pico-grid-row-gap: var(--pico-spacing);
--pico-form-element-spacing-vertical: 0.75rem;
--pico-form-element-spacing-horizontal: 1rem;
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
--pico-modal-overlay-backdrop-filter: blur(0.375rem);
--pico-nav-element-spacing-vertical: 1rem;
--pico-nav-element-spacing-horizontal: 0.5rem;
@ -264,12 +267,6 @@ nav details.dropdown summary:focus-visible {
--pico-border-radius: 5rem;
}
[role=search],
[role=group] {
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
}
[role=search]:has(button.secondary:focus,
[type=submit].secondary:focus,
[type=button].secondary:focus,

File diff suppressed because one or more lines are too long

View file

@ -22,6 +22,9 @@
--pico-block-spacing-horizontal: var(--pico-spacing);
--pico-form-element-spacing-vertical: 0.75rem;
--pico-form-element-spacing-horizontal: 1rem;
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
--pico-modal-overlay-backdrop-filter: blur(0.375rem);
--pico-nav-element-spacing-vertical: 1rem;
--pico-nav-element-spacing-horizontal: 0.5rem;
@ -254,12 +257,6 @@ input:not([type=submit],
--pico-border-radius: 5rem;
}
[role=search],
[role=group] {
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
}
[role=search] button,
[role=search] [type=submit],
[role=search] [type=button],

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

View file

@ -71,6 +71,17 @@
#{$✨}form-label-font-weight: var(#{$}font-weight);
}
// Group (role="group")
@if map.get($modules, "components/group") {
#{$✨}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$}group-box-shadow-focus-with-button: 0
0
0
var(#{$}outline-width)
var(#{$}primary-focus);
#{$✨}group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(#{$}form-element-border-color);
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$✨}modal-overlay-backdrop-filter: blur(0.375rem);
@ -382,14 +393,6 @@
[role="search"],
[role="group"] {
#{$✨}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$}group-box-shadow-focus-with-button: 0
0
0
var(#{$}outline-width)
var(#{$}primary-focus);
#{$✨}group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(#{$}form-element-border-color);
@if $enable-classes {
&:has(
button.secondary:focus,