Unify search input and buttons size
This commit is contained in:
Guillaume Gomez
parent
cbaeec14f9
commit
f0525da124
5 changed files with 33 additions and 106 deletions
|
|
@ -873,11 +873,11 @@ h2.small-section-header > .anchor {
|
|||
|
||||
.search-container {
|
||||
position: relative;
|
||||
max-width: 960px;
|
||||
display: flex;
|
||||
height: 34px;
|
||||
}
|
||||
.search-container > div {
|
||||
display: inline-flex;
|
||||
width: calc(100% - 63px);
|
||||
.search-container > * {
|
||||
height: 100%;
|
||||
}
|
||||
.search-results-title {
|
||||
display: inline;
|
||||
|
|
@ -908,10 +908,8 @@ h2.small-section-header > .anchor {
|
|||
background-position: calc(100% - 1px) 56%;
|
||||
background-image: /* AUTOREPLACE: */url("down-arrow.svg");
|
||||
}
|
||||
.search-container > .top-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
.search-container {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.search-input {
|
||||
/* Override Normalize.css: it has a rule that sets
|
||||
|
|
@ -924,23 +922,14 @@ h2.small-section-header > .anchor {
|
|||
-moz-box-sizing: border-box !important;
|
||||
box-sizing: border-box !important;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 1px;
|
||||
margin-top: 5px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid;
|
||||
border-radius: 2px;
|
||||
padding: 5px 8px;
|
||||
font-size: 1.0625rem;
|
||||
transition: border-color 300ms ease;
|
||||
transition: border-radius 300ms ease-in-out;
|
||||
transition: box-shadow 300ms ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: none;
|
||||
padding-bottom: 2em;
|
||||
|
|
@ -1414,8 +1403,8 @@ pre.rust {
|
|||
|
||||
.theme-picker {
|
||||
position: absolute;
|
||||
left: -34px;
|
||||
top: 9px;
|
||||
left: -38px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.theme-picker button {
|
||||
|
|
@ -1423,34 +1412,27 @@ pre.rust {
|
|||
}
|
||||
|
||||
#settings-menu, #help-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#settings-menu {
|
||||
right: 0;
|
||||
margin-left: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#theme-picker, #copy-path {
|
||||
height: 34px;
|
||||
}
|
||||
#theme-picker, #settings-menu, #help-button, #copy-path {
|
||||
padding: 4px;
|
||||
/* Rare exception to specifying font sizes in rem. Since these are acting
|
||||
as icons, it's okay to specify their sizes in pixels. */
|
||||
font-size: 16px;
|
||||
width: 27px;
|
||||
height: 29px;
|
||||
padding: 5px;
|
||||
width: 33px;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#help-button {
|
||||
right: 30px;
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
text-align: center;
|
||||
/* Rare exception to specifying font sizes in rem. Since this is acting
|
||||
as an icon, it's okay to specify their sizes in pixels. */
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -1887,10 +1869,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-picker {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.notable-traits {
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
|
|
@ -1977,10 +1955,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.search-container > div {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
/* Display an alternating layout on tablets and phones */
|
||||
.search-results > a {
|
||||
border-bottom: 1px solid #aaa9;
|
||||
|
|
@ -2025,30 +1999,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.search-container > div {
|
||||
display: block;
|
||||
width: calc(100% - 37px);
|
||||
}
|
||||
|
||||
#crate-search {
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#theme-picker, #settings-menu {
|
||||
padding: 5px;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
#theme-picker {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#settings-menu {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.docblock {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -233,22 +233,14 @@ details.undocumented > summary::before {
|
|||
filter: invert(100%);
|
||||
}
|
||||
|
||||
#crate-search {
|
||||
color: #c5c5c5;
|
||||
#crate-search, .search-input {
|
||||
background-color: #141920;
|
||||
box-shadow: 0 0 0 1px #424c57,0 0 0 2px transparent;
|
||||
border-color: #424c57;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: #ffffff;
|
||||
background-color: #141920;
|
||||
box-shadow: 0 0 0 1px #424c57,0 0 0 2px transparent;
|
||||
transition: box-shadow 150ms ease-in-out;
|
||||
}
|
||||
|
||||
#crate-search+.search-input:focus {
|
||||
box-shadow: 0 0 0 1px #148099,0 0 0 2px transparent;
|
||||
}
|
||||
|
||||
.module-item .stab,
|
||||
|
|
|
|||
|
|
@ -194,27 +194,20 @@ details.undocumented > summary::before {
|
|||
filter: invert(100%);
|
||||
}
|
||||
|
||||
#crate-search {
|
||||
#crate-search, .search-input {
|
||||
color: #111;
|
||||
background-color: #f0f0f0;
|
||||
border-color: #000;
|
||||
box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: #111;
|
||||
background-color: #f0f0f0;
|
||||
box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #008dfd;
|
||||
}
|
||||
|
||||
#crate-search + .search-input:focus {
|
||||
box-shadow: 0 0 8px 4px #078dd8;
|
||||
}
|
||||
|
||||
.module-item .stab,
|
||||
.import-item .stab {
|
||||
color: #ddd;
|
||||
|
|
|
|||
|
|
@ -186,27 +186,16 @@ details.undocumented > summary::before {
|
|||
color: #999;
|
||||
}
|
||||
|
||||
#crate-search {
|
||||
#crate-search, .search-input {
|
||||
color: #555;
|
||||
background-color: white;
|
||||
border-color: #e0e0e0;
|
||||
box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: #555;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #66afe9;
|
||||
}
|
||||
|
||||
#crate-search + .search-input:focus {
|
||||
box-shadow: 0 0 8px #078dd8;
|
||||
}
|
||||
|
||||
.module-item .stab,
|
||||
.import-item .stab {
|
||||
color: #000;
|
||||
|
|
|
|||
|
|
@ -110,25 +110,23 @@
|
|||
<nav class="sub"> {#- -#}
|
||||
<div class="theme-picker hidden"> {#- -#}
|
||||
<button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
|
||||
<img width="18" height="18" alt="Pick another theme!" {# -#}
|
||||
<img width="22" height="22" alt="Pick another theme!" {# -#}
|
||||
src="{{static_root_path|safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
|
||||
</button> {#- -#}
|
||||
<div id="theme-choices" role="menu"></div> {#- -#}
|
||||
</div> {#- -#}
|
||||
<form class="search-form"> {#- -#}
|
||||
<div class="search-container"> {#- -#}
|
||||
<div>
|
||||
<input {# -#}
|
||||
class="search-input" {# -#}
|
||||
name="search" {# -#}
|
||||
autocomplete="off" {# -#}
|
||||
spellcheck="false" {# -#}
|
||||
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
|
||||
type="search"> {#- -#}
|
||||
</div> {#- -#}
|
||||
<input {# -#}
|
||||
class="search-input" {# -#}
|
||||
name="search" {# -#}
|
||||
autocomplete="off" {# -#}
|
||||
spellcheck="false" {# -#}
|
||||
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
|
||||
type="search"> {#- -#}
|
||||
<button type="button" id="help-button" title="help">?</button> {#- -#}
|
||||
<a id="settings-menu" href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
|
||||
<img width="18" height="18" alt="Change settings" {# -#}
|
||||
<img width="22" height="22" alt="Change settings" {# -#}
|
||||
src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
|
||||
</a> {#- -#}
|
||||
</div> {#- -#}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue