nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(design): animation + spacing search button

Browse source
This commit is contained in:
Shipow 2020-04-10 12:53:22 +02:00
parent 352592ecc9
commit a73d050c80
1 changed files with 8 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/style.css
View file

@ -131,7 +131,7 @@ html[data-theme='dark'] {
}
.DocSearch-SearchButton-Placeholder {
margin: 0 1em 0 .5em;
padding: 0 .5em;
font-size: 1rem;
}
@ -149,6 +149,7 @@ html[data-theme='dark'] {
color: var(--ifm-color-emphasis-600);
}
/* Body modifier */
.DocSearch--active {
@ -159,11 +160,6 @@ html[data-theme='dark'] {
overflow: hidden !important;
}
/* Hide Docusaurus hamburger button when modal is opened */
.DocSearch--active .menu__button {
display: none !important;
}
/* Container & Modal */
.DocSearch-Container,
@ -179,16 +175,6 @@ html[data-theme='dark'] {
left: 0;
top: 0;
background-color: var(--docsearch-container-background);
animation: container 0.1s ease-in forwards;
}
@keyframes container {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.DocSearch-Container a {
@ -289,12 +275,7 @@ html[data-theme='dark'] {
cursor: pointer;
stroke-width: var(--docsearch-icon-stroke-width);
color: var(--docsearch-icon-color);
animation: reset-button .1s ease-in forwards;
}
@keyframes reset-button {
0% {opacity: 0}
100% { opacity: 1}
animation: fade-in .1s ease-in forwards;
}
.DocSearch-Reset[hidden] {
@ -639,7 +620,6 @@ html[data-theme='dark'] {
.DocSearch-Container {
height: -webkit-fill-available;
position: absolute;
animation: none;
}
.DocSearch-Footer {
@ -678,18 +658,10 @@ html[data-theme='dark'] {
font-size: 1em;
font-weight: 500;
color: var(--docsearch-highlight-color);
animation: cancel-button ease-out 0.2s forwards;
outline: none;
transform: scale(0);
user-select: none;
}
@keyframes cancel-button {
100% {
transform: scale(1);
}
}
.DocSearch-Commands {
display: none;
}
@ -703,3 +675,8 @@ html[data-theme='dark'] {
@media (hover: none) and (pointer: coarse) {
/* ... */
}
@keyframes fade-in {
0% {opacity: 0}
100% { opacity: 1}
}