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

Add disabled state to .form-control

Browse Source
This commit is contained in:
simurai 2020-02-28 15:24:55 +09:00
parent 0826b442d1
commit 0b8beb76e3
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/content/components/forms.md
View File

@ -76,12 +76,17 @@ Textual form controls have a white background by default. You can change this to
```html live
<form>
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
<input
class="form-control input-contrast"
type="text"
placeholder="Input with contrast"
aria-label="Input with contrast"
/>
<input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
</form>
```
#### Disabled state
Add the `disabled` attribute to make a `.form-control` appear disabled.
```html live
<form>
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
</form>
```

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

@ -39,6 +39,13 @@ label {
box-shadow: $focus-shadow;
}
&[disabled] {
// stylelint-disable-next-line primer/colors
color: $gray-400;
// stylelint-disable-next-line primer/colors
background-color: #f3f4f6; // custom gray
}
// Ensures inputs don't zoom on mobile but are body-font size on desktop
@include breakpoint(md) {
font-size: $body-font-size;