primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

Update form-control

Browse Source 
Also rename `--color-shadow-focus` to `--color-state-focus-shadow`
This commit is contained in:
simurai 2020-10-22 12:06:48 +09:00
parent b90a667a93
commit fdd9051799
5 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
MIGRATING.md
View File

@ -223,7 +223,7 @@ n/a | `var(--color-bg-canvas)`
`$box-shadow-extra-large` | `var(--color-shadow-extra-large)`
`$box-shadow-highlight` | `var(--color-shadow-highlight)`
`$box-shadow-inset` | `var(--color-shadow-inset)`
`$box-shadow-focus` | `var(--color-shadow-focus)`
`$box-shadow-focus` | `var(--color-state-focus-shadow)`
## Color System

2
src/buttons/button.scss
View File

@ -100,7 +100,7 @@
&.focus {
outline: 1px dotted transparent; // Support Firfox custom colors
outline-offset: 2px;
box-shadow: var(--color-shadow-focus);
box-shadow: var(--color-state-focus-shadow);
}
}

2
src/buttons/misc.scss
View File

@ -190,6 +190,6 @@
&:focus {
z-index: 1;
outline: 0;
box-shadow: var(--color-shadow-focus);
box-shadow: var(--color-state-focus-shadow);
}
}

12
src/forms/form-control.scss
View File

@ -24,19 +24,19 @@ label {
line-height: 20px;
color: var(--color-text-primary);
vertical-align: middle;
background-color: var(--color-bg-primary);
background-color: var(--color-input-bg);
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
border: $border-width $border-style var(--color-border-primary);
border: $border-width $border-style var(--color-input-border);
border-radius: $border-radius;
outline: none;
box-shadow: var(--color-shadow-inset);
&.focus,
&:focus {
border-color: var(--color-border-info);
border-color: var(--color-state-focus-border);
outline: none;
box-shadow: var(--color-shadow-focus);
box-shadow: var(--color-state-focus-shadow);
}
&[disabled] {
@ -62,9 +62,9 @@ textarea.form-control {
// Inputs with contrast for easy light gray backgrounds against white.
.input-contrast {
background-color: var(--color-bg-secondary);
background-color: var(--color-input-contrast-bg);
&:focus { background-color: var(--color-bg-primary); }
&:focus { background-color: var(--color-input-bg); }
}
// Inputs to be used against dark backgrounds.

2
src/support/variables/colors.scss
View File

@ -73,7 +73,7 @@ $box-shadow-extra-large: var(--color-shadow-extra-large) !default;
$box-shadow-highlight: var(--color-shadow-highlight) !default; // top highlight
$box-shadow-inset: var(--color-shadow-inset) !default; // top inner shadow
$box-shadow-focus: var(--color-shadow-focus) !default; // blue focus ring
$box-shadow-focus: var(--color-state-focus-shadow) !default; // blue focus ring
// Button variables
$border-color-button: var(--color-btn-border) !default;