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

style: selection and focus color

Browse source
This commit is contained in:
Lucas Larroche 2023-01-28 12:22:55 +07:00
parent dfa4041b77
commit 6c3e126943
13 changed files with 52 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scss/components/_accordion.scss
View file

@ -70,6 +70,8 @@
&:focus-visible {
&:not([role]) {
outline: var(#{$✨}outline-width) solid var(#{$✨}primary-focus);
outline-offset: calc(var(#{$✨}spacing, 1rem) * 0.5);
color: var(#{$✨}primary);
}
}

5
scss/components/_dropdown.scss
View file

@ -104,6 +104,11 @@
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
}
// Reset focus visible from accordion component
&:focus-visible {
outline: none;
}
// Aria-invalid
&[aria-invalid="false"] {
#{$✨}form-element-border-color: var(#{$✨}form-element-valid-border-color);

2
scss/content/_code.scss
View file

@ -55,7 +55,7 @@
display: block;
padding: var(#{$✨}spacing);
background: none;
font-size: 14px;
font-size: inherit;
line-height: var(#{$✨}line-height);
}
}

10
scss/content/_link.scss
View file

@ -30,7 +30,7 @@
}
&:focus-visible {
#{$✨}background-color: var(#{$✨}primary-focus);
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
}
@if $enable-classes {
@ -43,10 +43,6 @@
#{$✨}color: var(#{$✨}secondary-hover);
#{$✨}underline: var(#{$✨}secondary-underline-hover);
}
&:focus-visible {
#{$✨}background-color: var(#{$✨}secondary-focus);
}
}
// Contrast
@ -58,10 +54,6 @@
#{$✨}color: var(#{$✨}contrast-hover);
#{$✨}underline: var(#{$✨}contrast-underline-hover);
}
&:focus-visible {
#{$✨}background-color: var(#{$✨}contrast-focus);
}
}
}
}

2
scss/content/_typography.scss
View file

@ -210,6 +210,6 @@
// selection
::selection {
background-color: var(#{$✨}primary-focus);
background-color: var(#{$✨}text-selection-color);
}
}

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

@ -11,6 +11,9 @@
// Text color
#{$✨}color: #{$zinc-200};
// Text selection color
#{$✨}text-selection-color: #{rgba($azure-350, 0.1875)};
// Muted colors
#{$✨}muted-color: #{$zinc-450};
#{$✨}muted-border-color: #{$slate-850};
@ -24,7 +27,7 @@
#{$✨}primary-background-hover: #{$azure-500};
#{$✨}primary-border: var(#{$✨}primary-background);
#{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
#{$✨}primary-focus: #{rgba($azure-350, 0.25)};
#{$✨}primary-focus: #{rgba($azure-350, 0.375)};
#{$✨}primary-inverse: #{$white};
// Secondary colors

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

@ -11,6 +11,9 @@
// Text color
#{$✨}color: #{$zinc-750};
// Text selection color
#{$✨}text-selection-color: #{rgba($azure-400, 0.25)};
// Muted colors
#{$✨}muted-color: #{$zinc-550};
#{$✨}muted-border-color: #{mix($slate-100, $slate-50)};
@ -24,7 +27,7 @@
#{$✨}primary-background-hover: #{$azure-600};
#{$✨}primary-border: var(#{$✨}primary-background);
#{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
#{$✨}primary-focus: #{rgba($azure-400, 0.25)};
#{$✨}primary-focus: #{rgba($azure-400, 0.5)};
#{$✨}primary-inverse: #{$white};
// Secondary colors