#searchBoxMobile {
transition: width 0.3s ease-in-out;
}
.homesearch {
cursor: pointer;
}
.suggestions{
background: rgb(255, 255, 255);
padding: 0px 0px 0px 0px;
border-radius: 5px !important;
width:225px;
font-size:14px;
line-height:20px;
position: absolute;
top: 13px;
right: 0;
}
.suggestions ul{
padding:0px;
}
.search-icon {
border: 2px solid transparent;
padding: 4px;
cursor: pointer;
}
.search-icon:hover {
border: 2px solid #36D6D9;
border-radius: 18px;
}
/ Disable hover when search box is expanded /
.searchBox.open .search-icon:hover {
border: 2px solid transparent !important;
}
.search-container.has-value {
border-color: #36D6D9!important;
border-width: 2px;
outline: none;
transition: border-color 0.5s ease, border-width 0.5s ease;
}
.search-container {
position:absolute;
margin-left: -40px;
top: -20px;
display: flex;
align-items: center;
border-radius: 5px;
overflow: hidden;
width: 50px;
transition: width 0.3s ease-in-out;
transition: z-index 0.8s, width 0.5s, background 0.3s ease, border 0.3s;
border: none;
}
.search-container input {
flex: 1;
border: none;
padding: 8px;
outline: none;
width: 0;
opacity: 0;
transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.search-icon img{
max-width:none !important;
width:24px;
height:24px;
}
.search-container.open {
width: 225px;
border: 2px solid black;
border-radius:18px;
height: 40px;
position: absolute;
z-index: 5;
right: 0;
top: -20px;
background: white;
}
.search-container.open input {
width: 100%;
opacity: 1;
cursor: pointer;
}
.search-icon.active {
border: 2px solid blue;
}
search-icon {
padding:4px;
cursor: pointer;
/ background-color: #f8f8f8; /
transition: border 0.3s;
border-radius:17px;
}
Resources
HCLSoftware U
Ready to upgrade to the latest version of HCL Digital Experience
Get to know how you can get HCL Digital Experience up and
running in no time.
