mirror of
https://github.com/10h30/full-screen-morphing-search.git
synced 2026-06-05 15:08:32 +09:00
Update styles
Remove transition css, change color
This commit is contained in:
@@ -4,75 +4,70 @@
|
||||
|
||||
/* 1- hide the main div (<div id="morphsearch" class="morphsearch">) containing the Morphing Search Page */
|
||||
|
||||
.morphsearch {
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f1f1f1;
|
||||
position: absolute;
|
||||
z-index: 99997;
|
||||
top: 0;
|
||||
right: 0;
|
||||
-webkit-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
-webkit-transition-property: min-height, width, top, right;
|
||||
transition-property: min-height, width, top, right;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
.morphsearch:not(.open) {
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transition: 0s;
|
||||
-o-transition: 0s;
|
||||
transition: 0s;
|
||||
}
|
||||
|
||||
/* 2- Showing the Morphing Search Page once the .open class is added to the main div */
|
||||
|
||||
.morphsearch.open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
.morphsearch {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 0 solid transparent;
|
||||
min-height: 50px;
|
||||
background-color: rgba(20,20,20,0.95);
|
||||
-webkit-transition: 0s;
|
||||
-o-transition: 0s;
|
||||
transition: 0s;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
padding: 50px 10%;
|
||||
}
|
||||
|
||||
/* Morphing Search Page Search Form */
|
||||
|
||||
.morphsearch-form {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
-webkit-transition-property: width, height, -webkit-transform;
|
||||
transition-property: width, height, transform;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.morphsearch.open .morphsearch-form {
|
||||
width: 80%;
|
||||
height: 160px;
|
||||
-webkit-transform: translate3d(0, 3em, 0);
|
||||
transform: translate3d(0, 3em, 0);
|
||||
}
|
||||
|
||||
|
||||
/* Morphing Search Page Search Input */
|
||||
|
||||
.morphsearch-input {
|
||||
padding: 0 10% 0 10px !important;
|
||||
font-weight: 700;
|
||||
border: none !important;
|
||||
padding: 0 10px 0 10px !important;
|
||||
border-width: 0 0 1px!important;
|
||||
background: transparent !important;
|
||||
font-size: 0.8em;
|
||||
-webkit-transition: font-size 0.5s cubic-bezier(0.7, 0, 0.3, 1);
|
||||
transition: font-size 0.5s cubic-bezier(0.7, 0, 0.3, 1);
|
||||
font-size: 5em;
|
||||
|
||||
}
|
||||
|
||||
#morphsearch .morphsearch-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-style: italic;
|
||||
color: #ec5a62;
|
||||
/* font-style: italic; */
|
||||
color: #FFF;
|
||||
outline: none;
|
||||
/* Using ID '#morphsearch' to avoid using !important */
|
||||
}
|
||||
@@ -83,7 +78,7 @@
|
||||
}
|
||||
|
||||
.morphsearch.open .morphsearch-input {
|
||||
font-size: 7em;
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
/* Morphing Search Page Search Placeholder */
|
||||
@@ -122,7 +117,7 @@ input[type="search"] {
|
||||
.morphsearch-submit:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-color: #FFF!important;
|
||||
}
|
||||
|
||||
.morphsearch-submit {
|
||||
@@ -140,10 +135,6 @@ input[type="search"] {
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
transform-origin: 50% 50%;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-30px, -50%, 0) scale3d(0, 0, 1);
|
||||
transform: translate3d(-30px, -50%, 0) scale3d(0, 0, 1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.morphsearch.open .morphsearch-submit {
|
||||
@@ -151,10 +142,8 @@ input[type="search"] {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-30px, -50%, 0) scale3d(1, 1, 1);
|
||||
transform: translate3d(-30px, -50%, 0) scale3d(1, 1, 1);
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0s;
|
||||
transition: opacity 0.3s, transform 0s;
|
||||
}
|
||||
|
||||
.morphsearch-submit:hover {
|
||||
@@ -178,9 +167,9 @@ input[type="search"] {
|
||||
.morphsearch-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
/* position: absolute; */
|
||||
/* right: 2em; */
|
||||
/* top: 2em; */
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
cursor: pointer;
|
||||
@@ -188,6 +177,8 @@ input[type="search"] {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
transform: scale3d(0, 0, 1);
|
||||
align-self: flex-end;
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
.morphsearch.open .morphsearch-close {
|
||||
@@ -195,10 +186,8 @@ input[type="search"] {
|
||||
pointer-events: auto;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0s;
|
||||
transition: opacity 0.3s, transform 0s;
|
||||
}
|
||||
|
||||
.morphsearch-close::before,
|
||||
@@ -210,8 +199,8 @@ input[type="search"] {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
border-radius: 3px;
|
||||
opacity: 0.2;
|
||||
background: var(--morphsearch-close-background, black);
|
||||
/* opacity: 0.2; */
|
||||
background: #FFF;
|
||||
/* @see https://stackoverflow.com/a/49618941/6837428 */
|
||||
}
|
||||
|
||||
@@ -347,12 +336,16 @@ input[type="search"] {
|
||||
|
||||
/* Morphing Search Page Media Queries */
|
||||
|
||||
@media screen and (max-width: 53.125em) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.morphsearch {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
.morphsearch-input {
|
||||
padding: 0 25% 0 10px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.morphsearch.open .morphsearch-input {
|
||||
font-size: 2em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.dummy-column {
|
||||
float: none;
|
||||
@@ -363,14 +356,14 @@ input[type="search"] {
|
||||
margin: 0;
|
||||
}
|
||||
.morphsearch.open .morphsearch-submit {
|
||||
-webkit-transform: translate3d(0, -50%, 0) scale3d(0.5, 0.5, 1);
|
||||
transform: translate3d(0, -50%, 0) scale3d(0.5, 0.5, 1);
|
||||
-webkit-transform: translate3d(0, -55%, 0) scale3d(0.4, 0.4, 1);
|
||||
transform: translate3d(20%, -55%, 0) scale3d(0.4, 0.4, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80em) {
|
||||
.morphsearch-close {
|
||||
top: 3em;
|
||||
/* top: 3em; */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -387,161 +380,4 @@ input[type="search"] {
|
||||
.morphsearch.open {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* autoComplete styles */
|
||||
|
||||
.autoComplete_wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
#autoComplete {
|
||||
height: 3rem;
|
||||
width: 370px;
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 3.2rem;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
color: rgba(255, 122, 122, 0.3);
|
||||
outline: none;
|
||||
border-radius: 10rem;
|
||||
border: 0;
|
||||
border: 0.05rem solid rgba(255, 122, 122, 0.5);
|
||||
background-image: url(./images/search.svg);
|
||||
background-size: 1.4rem;
|
||||
background-position: left 1.05rem top 0.8rem;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
background-color: #fff;
|
||||
transition: all 0.4s ease;
|
||||
-webkit-transition: all -webkit-transform 0.4s ease;
|
||||
}
|
||||
|
||||
#autoComplete::placeholder {
|
||||
color: rgba(255, 122, 122, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
-webkit-transition: all -webkit-transform 0.3s ease;
|
||||
}
|
||||
|
||||
#autoComplete:hover::placeholder {
|
||||
color: rgba(255, 122, 122, 0.6);
|
||||
transition: all 0.3s ease;
|
||||
-webkit-transition: all -webkit-transform 0.3s ease;
|
||||
}
|
||||
|
||||
#autoComplete:focus::placeholder {
|
||||
padding: 0.1rem 0.6rem;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 122, 122, 0.4);
|
||||
}
|
||||
|
||||
#autoComplete:focus::selection {
|
||||
background-color: rgba(255, 122, 122, 0.15);
|
||||
}
|
||||
|
||||
#autoComplete::selection {
|
||||
background-color: rgba(255, 122, 122, 0.15);
|
||||
}
|
||||
|
||||
#autoComplete:hover {
|
||||
color: rgba(255, 122, 122, 0.8);
|
||||
transition: all 0.3s ease;
|
||||
-webkit-transition: all -webkit-transform 0.3s ease;
|
||||
}
|
||||
|
||||
#autoComplete:focus {
|
||||
color: rgba(255, 122, 122, 1);
|
||||
border: 0.06rem solid rgba(255, 122, 122, 0.8);
|
||||
}
|
||||
|
||||
#autoComplete_list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.6rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
|
||||
border: 1px solid rgba(33, 33, 33, 0.07);
|
||||
z-index: 1000;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.autoComplete_result {
|
||||
margin: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
font-size: 1.5em;
|
||||
color: #212121;
|
||||
transition: all 0.1s ease-in-out;
|
||||
border-radius: 0.35rem;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.autoComplete_result::selection {
|
||||
color: rgba(#ffffff, 0);
|
||||
background-color: rgba(#ffffff, 0);
|
||||
}
|
||||
|
||||
.autoComplete_result:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(255, 122, 122, 0.15);
|
||||
}
|
||||
|
||||
.autoComplete_highlighted {
|
||||
color: rgba(255, 122, 122, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.autoComplete_highlighted::selection {
|
||||
color: rgba(#ffffff, 0);
|
||||
background-color: rgba(#ffffff, 0);
|
||||
}
|
||||
|
||||
.autoComplete_selected {
|
||||
cursor: pointer;
|
||||
background-color: rgba(255, 122, 122, 0.15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.autoComplete_wrapper {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
#autoComplete {
|
||||
width: 18rem;
|
||||
background-size: 1.6rem;
|
||||
background-position: left 1.1rem top 0.75rem;
|
||||
}
|
||||
|
||||
#autoComplete_list {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
#autoComplete {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
#autoComplete {
|
||||
background-size: 1.2rem;
|
||||
background-origin: border-box;
|
||||
border-width: 1px;
|
||||
background-position: left 1.1rem top 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,7 @@ for (const searchInput of searchInputs) {
|
||||
// Focus on the Full Screen Morphing Search Input Field.
|
||||
setTimeout(function () {
|
||||
morphSearchInputField.focus();
|
||||
}, 500);
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -49,4 +49,3 @@ let fsmspBackgrounds = document.querySelectorAll('#morphsearch, div.morphsearch-
|
||||
fsmspColumns = document.querySelectorAll('div.dummy-media-object'),
|
||||
fsmspLinks = document.querySelectorAll('div.dummy-media-object h3 a');
|
||||
|
||||
// Output default options' values !
|
||||
|
||||
Reference in New Issue
Block a user