base_ui/assets/common/scss/components/_search-form.scss

126 lines
2.7 KiB
SCSS
Raw Normal View History

2025-02-01 09:34:55 +00:00
.search-form {
margin-right: 2em;
max-width: 100%;
width: 15em;
.form-group {
margin-bottom: 0;
.input-group {
//width: 256px;
height: 40px;
border-radius: 20px;
background: #fff;
border: 1px solid #00b6e3;
.form-control {
border-radius: 0 20px 20px 0;
font-size: 14px;
font-weight: 300;
text-align: right;
color: #707b87;
height: 100%;
border-color: transparent;
padding-right: 0;
padding-left: 0;
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-weight: 300;
font-size: 14px;
text-align: right;
color: #92a2b2;
}
&::-moz-placeholder { /* Firefox 19+ */
font-weight: 300;
font-size: 14px;
text-align: right;
color: #92a2b2;
}
&:-ms-input-placeholder { /* IE 10+ */
font-weight: 300;
font-size: 14px;
text-align: right;
color: #92a2b2;
}
&:-moz-placeholder { /* Firefox 18- */
font-weight: 300;
font-size: 14px;
text-align: right;
color: #92a2b2;
}
&:focus {
box-shadow: none;
outline: 0;
}
}
.input-group-prepend {
margin-right: auto;
margin-left: -1px;
.input-group-text {
background-color: transparent;
border-color: transparent;
border-radius: 0 20px 20px 0;
font-size: 14px;
font-weight: 300;
color: #707b87;
transition: all 0.2s;
svg {
width: 1em;
color: var(--falcon-gray-400);
}
}
}
.input-group-append {
margin-left: auto;
margin-right: -1px;
.input-group-text {
background-color: transparent;
border-color: transparent;
border-radius: 20px 0 0 20px;
font-size: 14px;
font-weight: 300;
color: #707b87;
transition: all 0.2s;
visibility: hidden;
&.show-reset-btn {
visibility: visible;
}
&:hover {
background-color: #eee;
i {
font-weight: bold;
//color: var(--red);
transition: all 0.2s;
}
}
&:focus {
box-shadow: none;
outline: 0;
}
}
}
}
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
}