196 lines
4.3 KiB
SCSS
196 lines
4.3 KiB
SCSS
/*-----------------------------------------------------------------------------------*/
|
|
/* Festgelegte Bereiche zur Suche
|
|
/*-----------------------------------------------------------------------------------*/
|
|
.search-open {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 50%;
|
|
|
|
:focus,
|
|
:hover {
|
|
border-radius: 50%;
|
|
}
|
|
&:before {
|
|
@include px2rem($font-size-search-icons);
|
|
@extend .fa;
|
|
@extend .fa-search;
|
|
}
|
|
span {
|
|
@extend .screen-reader-text;
|
|
}
|
|
|
|
.no-js & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#footer-search {
|
|
@include px2rem($font-size-smaller);
|
|
|
|
.search-field {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
padding: 5px;
|
|
letter-spacing: 0.5px;
|
|
font-weight: bolder;
|
|
}
|
|
input#submit,
|
|
input[type="submit"] {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (min-width: $breakpoint-1060) {
|
|
/* --- Search Desktop --- */
|
|
#masthead {
|
|
position: relative;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
}
|
|
.search-open,
|
|
.desktop-search {
|
|
display: block;
|
|
}
|
|
.search-open {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 9.23611111111111%;
|
|
right: auto;
|
|
border: none;
|
|
z-index: 1000;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
|
|
&:before {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.desktop-search {
|
|
position: absolute;
|
|
top: 100%;
|
|
width: 100%;
|
|
opacity: 0;
|
|
height: 0;
|
|
z-index: 10000;
|
|
text-align: center;
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
-webkit-transition: all .3s ease-in-out;
|
|
-moz-transition: all .3s ease-in-out;
|
|
-o-transition: all .3s ease-in-out;
|
|
transition: all .3s ease-in-out;
|
|
|
|
input {
|
|
&.search-field {
|
|
width: 33%;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
padding: 9px 0;
|
|
letter-spacing: 0.5px;
|
|
font-weight: bolder;
|
|
}
|
|
&[type="submit"] {
|
|
margin-left: 10px;
|
|
padding: 8px 20px;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
font-size: 15px;
|
|
font-size: 0.9375rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
}
|
|
}
|
|
.searchform {
|
|
height: 0;
|
|
-webkit-transition: all .3s ease-in-out;
|
|
-moz-transition: all .3s ease-in-out;
|
|
-o-transition: all .3s ease-in-out;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
}
|
|
|
|
.searchbar-maincolor .desktop-search {
|
|
input {
|
|
&.search-field {
|
|
&:hover,
|
|
&:focus {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
&[type="submit"] {
|
|
font-weight: bold;
|
|
}
|
|
&[type="submit"]:focus,
|
|
&[type="submit"]:hover {
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.desktop-search-show .desktop-search {
|
|
position: absolute;
|
|
top: 100%;
|
|
opacity: 1;
|
|
height: 118px;
|
|
-webkit-transition: all .3s ease-in-out;
|
|
-moz-transition: all .3s ease-in-out;
|
|
-o-transition: all .3s ease-in-out;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
.desktop-search-show .desktop-search .searchform {
|
|
height: 118px;
|
|
padding-top: 35px;
|
|
-webkit-transition: all .3s ease-in-out;
|
|
-moz-transition: all .3s ease-in-out;
|
|
-o-transition: all .3s ease-in-out;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
.desktop-search
|
|
.header-stick {
|
|
#search-open-sticky {
|
|
z-index: 9999;
|
|
}
|
|
.desktop-search {
|
|
position: fixed;
|
|
top: 59px;
|
|
border-top: none;
|
|
height: 0;
|
|
-webkit-transition: all .3s ease-in-out;
|
|
-moz-transition: all .3s ease-in-out;
|
|
-o-transition: all .3s ease-in-out;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
&.desktop-search-show .desktop-search {
|
|
height: 118px;
|
|
}
|
|
}
|
|
#overlay-open-sticky {
|
|
position: absolute;
|
|
height: 59px;
|
|
text-align: center;
|
|
top: 0px;
|
|
left: 10px;
|
|
width: 59px;
|
|
}
|
|
#search-open-sticky {
|
|
top: 17px;
|
|
left: 69px;
|
|
}
|
|
} |