mirror of
https://github.com/primer/css.git
synced 2025-01-05 21:22:57 +03:00
Update subnav
This commit is contained in:
simurai
parent
a6107245e7
commit
cd76c84b82
@ -436,18 +436,7 @@ You can have `subnav-search` in the subnav bar.
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-search subnav-search-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -462,53 +451,16 @@ You can also use a `subnav-search-context` to display search help in a select me
|
||||
<a class="subnav-item" href="#url">Item 3</a>
|
||||
</nav>
|
||||
|
||||
<div class="float-left ml-3 select-menu js-menu-container js-select-menu subnav-search-context">
|
||||
<button
|
||||
type="button"
|
||||
name="button"
|
||||
class="btn select-menu-button js-menu-target"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<div class="float-left ml-3 subnav-search-context">
|
||||
<button class="btn" type="button" name="button" aria-expanded="false" aria-haspopup="true">
|
||||
Filters
|
||||
<span class="dropdown-caret"></span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder js-menu-content js-navigation-container" aria-hidden="true">
|
||||
<div class="select-menu-modal">
|
||||
<div class="select-menu-list">
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 1
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 2
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 3
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-search subnav-search-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -20,12 +20,12 @@
|
||||
.subnav-item {
|
||||
position: relative;
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px 14px;
|
||||
font-weight: $font-weight-bold;
|
||||
padding: 6px $spacer-3;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-weight: 500;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray;
|
||||
color: $text-gray-dark;
|
||||
border: $border;
|
||||
|
||||
+ .subnav-item {
|
||||
@ -46,7 +46,7 @@
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $blue;
|
||||
border-color: $blue-600;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@ -63,13 +63,12 @@
|
||||
.subnav-search {
|
||||
position: relative;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 10px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.subnav-search-input {
|
||||
width: 320px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: 30px;
|
||||
padding-left: $spacer-5;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
@ -83,7 +82,7 @@
|
||||
left: 8px;
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: darken($gray-300, 4%);
|
||||
color: $gray-400;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -128,5 +127,5 @@
|
||||
|
||||
.subnav-spacer-right {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-right: 10px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user