wordpress-preseed/wp-content/themes/Pirate-Rogue/css/sass/structure/_search.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;
    }
}