primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-19 04:37:38 +03:00
Code Issues Projects Releases Wiki Activity

Creating Header-input class for dark header inputs (#1506)

Browse Source 
* Creating Header-input class for dark header inputs

* Create unlucky-cooks-punch.md

* Adding placeholder color
This commit is contained in:
Jon Rohan 2021-07-20 08:29:25 -07:00 committed by GitHub
parent 94458470dd
commit 13cda22638
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/unlucky-cooks-punch.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": minor
---
Creating `.Header-input` class for dark header inputs. This `Header-input` will be used with a `form-control` class.

4
docs/content/components/header.md
View File

@ -22,7 +22,7 @@ The `.Header` class is the wrapping class that aligns all the items properly and
</a>
</div>
<div class="Header-item">
<input type="search" class="form-control input-dark" />
<input type="search" class="form-control Header-input" />
</div>
<div class="Header-item Header-item--full">
Menu
@ -49,7 +49,7 @@ All items directly under the `.Header` component should be a `.Header-item` comp
<!-- Form item -->
<div class="Header-item">
<input class="form-control input-dark" type="text"/>
<input class="form-control Header-input" type="text"/>
</div>
<!-- Image item -->

12
src/header/header.scss
View File

@ -34,3 +34,15 @@
text-decoration: none;
}
}
.Header-input {
color: var(--color-header-text);
background-color: var(--color-header-search-bg);
border: $border-width $border-style var(--color-header-search-border);
box-shadow: none;
&::placeholder {
// stylelint-disable-next-line primer/colors
color: rgba(255, 255, 255, 0.75);
}
}