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

style: select[multiple] selected option

Browse source
This commit is contained in:
Lucas Larroche 2023-03-08 11:47:37 +07:00
parent 5e04b841bd
commit cd0aee31cf
9 changed files with 28 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
css/pico.classless.css
View file

@ -65,6 +65,7 @@
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: #fbfcfc;
--pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
--pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-placeholder-color: var(--pico-muted-color);
@ -195,6 +196,7 @@
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: #1c212c;
--pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
@ -318,6 +320,7 @@
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: #1c212c;
--pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
@ -1136,6 +1139,7 @@ kbd {
*/ */
hr { hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-top: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
@ -1400,6 +1404,9 @@ select:not([multiple], [size]) {
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
select[multiple] option:checked {
background: var(--pico-form-element-selected-background-color);
}
[dir=rtl] select:not([multiple], [size]) { [dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

7
css/pico.css
View file

@ -65,6 +65,7 @@
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: #fbfcfc;
--pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
--pico-form-element-placeholder-color: var(--pico-muted-color); --pico-form-element-placeholder-color: var(--pico-muted-color);
@ -195,6 +196,7 @@
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: #1c212c;
--pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
@ -318,6 +320,7 @@
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: #1c212c;
--pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
@ -1227,6 +1230,7 @@ kbd {
*/ */
hr { hr {
height: 0; height: 0;
margin: var(--pico-typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(--pico-muted-border-color); border-top: 1px solid var(--pico-muted-border-color);
color: inherit; color: inherit;
@ -1491,6 +1495,9 @@ select:not([multiple], [size]) {
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
select[multiple] option:checked {
background: var(--pico-form-element-selected-background-color);
}
[dir=rtl] select:not([multiple], [size]) { [dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

8
scss/forms/_basics.scss
View file

@ -351,6 +351,14 @@
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
&[multiple] {
option {
&:checked {
background: var(#{$✨}form-element-selected-background-color);
}
}
}
} }
[dir="rtl"] { [dir="rtl"] {

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

@ -105,6 +105,7 @@
// Form elements // Form elements
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$✨}form-element-background-color: #{mix($slate-900, $slate-850)}; #{$✨}form-element-background-color: #{mix($slate-900, $slate-850)};
#{$✨}form-element-selected-background-color: #{$slate-800};
#{$✨}form-element-border-color: #{$slate-800}; #{$✨}form-element-border-color: #{$slate-800};
#{$✨}form-element-color: #{$zinc-100}; #{$✨}form-element-color: #{$zinc-100};
#{$✨}form-element-placeholder-color: #{$zinc-400}; #{$✨}form-element-placeholder-color: #{$zinc-400};

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

@ -105,6 +105,7 @@
// Form elements // Form elements
@if map.get($modules, "forms/basics") { @if map.get($modules, "forms/basics") {
#{$✨}form-element-background-color: #{mix($slate-50, $white, 25%)}; #{$✨}form-element-background-color: #{mix($slate-50, $white, 25%)};
#{$✨}form-element-selected-background-color: #{$slate-100};
#{$✨}form-element-border-color: #{$slate-150}; #{$✨}form-element-border-color: #{$slate-150};
#{$✨}form-element-color: #{$zinc-850}; #{$✨}form-element-color: #{$zinc-850};
#{$✨}form-element-placeholder-color: var(#{$✨}muted-color); #{$✨}form-element-placeholder-color: var(#{$✨}muted-color);