magicsearch
Version:
An input plugin based on jquery.
171 lines (161 loc) • 3.24 kB
CSS
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
font-size: 62.5%;
height: 100%;
}
body {
font: 1.4rem/1.5 Consolas, Helvetica, Arial, sans-serif;
color: #414a51;
height: 100%;
text-align: center;
}
h1 {
font-size: 7rem;
color: #fff;
}
nav {
font-size: 3rem;
}
nav a {
text-decoration: none;
}
nav a:not(:last-child) {
margin-right: 20px;
}
nav a.active {
color: #fff;
}
section {
margin-top: 10%;
}
#container {
padding: 0 20px;
}
/*magicsearch*/
.magicsearch {
border: 3px solid #fff;
height: 56px;
width: 350px;
border-radius: 8px;
outline: none;
color: #fff;
background-color: transparent;
transition: all .5s cubic-bezier(.19,1,.5,1);
padding: 5px 10px;
font-size: 1.8rem;
}
.magicsearch:focus {
background-color: #fff;
}
.adjust {
height: 1px;
}
/*theme*/
body.theme1 {
background-color: #3498db;
}
body.theme1 nav a {
color: #1e6fa4;
}
body.theme1 nav a:hover {
color: #125480;
}
body.theme1 .magicsearch:focus {
color: #3498db;
}
body.theme1 .magicsearch-wrapper .magicsearch-box li.ishover {
background-color: #3498db;
}
body.theme1::-moz-placeholder {
color: #3498db;
}
body.theme1::-webkit-input-placeholder {
color: #3498db;
}
body.theme2 {
background-color: #415c71;
}
body.theme2 nav a {
color: #7ad7ee;
}
body.theme2 nav a:hover {
color: #539eb1;
}
body.theme2 .magicsearch:focus {
color: #415c71;
}
body.theme2 .magicsearch-wrapper .magicsearch-box li.ishover {
background-color: #415c71;
}
body.theme2 .magicsearch-wrapper .multi-item {
background-color: #415c71;
color: #fff;
border-color: #fff;
}
body.theme2 .magicsearch-wrapper .multi-item span {
font-size: 1.6rem;
}
body.theme2 .magicsearch-wrapper.focus .multi-item {
background-color: #fff;
color: #415c71;
border-color: #415c71;
}
body.theme2::-moz-placeholder {
color: #415c71;
}
body.theme2::-webkit-input-placeholder {
color: #415c71;
}
body.theme3 {
background-color: #00b6ad;
}
body.theme3 nav a {
color: #04706b;
}
body.theme3 nav a:hover {
color: #03514d;
}
body.theme3 .magicsearch:focus {
color: #00b6ad;
}
body.theme3 .magicsearch-wrapper .magicsearch-box li.ishover {
background-color: #00b6ad;
}
body.theme3 .magicsearch-wrapper .magicsearch-arrow i:before {
border-top-color: #fff;
}
body.theme3 .magicsearch-wrapper.focus .magicsearch-arrow i:before {
border-top-color: #00b6ad;
}
body.theme3::-moz-placeholder {
color: #00b6ad;
}
body.theme3::-webkit-input-placeholder {
color: #00b6ad;
}
body.theme4 {
background-color: #f06d54;
}
body.theme4 nav a {
color: #a35749;
}
body.theme4 nav a:hover {
color: #6d3126;
}
body.theme4 .magicsearch:focus {
color: #f06d54;
}
body.theme4 .magicsearch-wrapper .magicsearch-box li.ishover {
background-color: #f06d54;
}
body.theme4::-moz-placeholder {
color: #f06d54;
}
body.theme4::-webkit-input-placeholder {
color: #f06d54;
}