Skip to content

Commit

Permalink
Unify search input and buttons size
Browse files Browse the repository at this point in the history
  • Loading branch information
@GuillaumeGomez
GuillaumeGomez committed Jan 21, 2022
1 parent cbaeec1 commit f0525da
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 106 deletions.
83 changes: 19 additions & 64 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -1414,43 +1403,36 @@ pre.rust {

.theme-picker {
position: absolute;
left: -34px;
top: 9px;
left: -38px;
top: 4px;
}

.theme-picker button {
outline: none;
}

#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;
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
12 changes: 2 additions & 10 deletions src/librustdoc/html/static/css/themes/ayu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 2 additions & 9 deletions src/librustdoc/html/static/css/themes/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 1 addition & 12 deletions src/librustdoc/html/static/css/themes/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
20 changes: 9 additions & 11 deletions src/librustdoc/html/templates/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,25 +110,23 @@ <h2 class="location"></h2>
<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> {#- -#}
Expand Down

0 comments on commit f0525da

Please sign in to comment.