quarante-douze/qdouze-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

scss/global : add style for the navbar searchbox

Browse source
This commit is contained in:
Kazhnuz 2018-10-24 18:42:46 +02:00
parent 2340d35476
commit 177510c2df
2 changed files with 53 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
scss/_global.scss
View file

@ -53,6 +53,36 @@ header {
padding-bottom:0; padding-bottom:0;
} }
@include li-no-margin(); @include li-no-margin();
.form-control {
opacity: 0.3;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color, opacity .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;
@include border-radius();
&::placeholder {
color: #FFF;
transition: color .15s ease-in-out;
}
&:hover {
opacity: 0.7;
background-color: #FFF;
color: #444;
&::placeholder {
color: #444;
}
}
&:focus, &:hover:focus {
opacity: 1;
background-color: #FFF;
color: #444;
box-shadow: $inset-shadow-inverted;
&::placeholder {
color: #444;
}
}
}
} }
.dropdown-menu { .dropdown-menu {

23
style.css
View file

@ -515,6 +515,29 @@ header {
padding-bottom: 0; } padding-bottom: 0; }
.navbar li { .navbar li {
margin: 0; } margin: 0; }
.navbar .form-control {
opacity: 0.3;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color, opacity .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;
border-radius: 0px 0px 0px 0px; }
.navbar .form-control::placeholder {
color: #FFF;
transition: color .15s ease-in-out; }
.navbar .form-control:hover {
opacity: 0.7;
background-color: #FFF;
color: #444; }
.navbar .form-control:hover::placeholder {
color: #444; }
.navbar .form-control:focus, .navbar .form-control:hover:focus {
opacity: 1;
background-color: #FFF;
color: #444;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2); }
.navbar .form-control:focus::placeholder, .navbar .form-control:hover:focus::placeholder {
color: #444; }
.dropdown-menu { .dropdown-menu {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); } box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }