You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
roundcubemail/skins/elastic/styles/widgets/searchbar.less

136 lines
2.6 KiB
Plaintext

/**
* Roundcube webmail styles for the Elastic skin
*
* Copyright (c) 2017-2018, The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Searchbar and searchoptions widgets ***/
.searchbar {
height: @layout-searchbar-height;
line-height: @layout-searchbar-height;
background-color: @color-layout-header-background;
border-bottom: 1px solid @color-list-border;
display: flex;
align-items: center;
white-space: nowrap;
padding: 0 .5rem;
overflow: hidden;
position: relative;
form {
flex: 1;
display: flex;
&:before {
&:extend(.font-icon-class);
content: @fa-var-search;
height: @layout-searchbar-height;
}
}
input {
width: 100%;
border: 0;
background: transparent;
padding: .5rem;
}
a.button {
height: @layout-searchbar-height;
min-width: auto;
&:before {
&:extend(.font-icon-class);
}
&.options {
&:before {
content: @fa-var-filter;
font-size: 1em;
}
}
&.reset {
display: none;
position: absolute;
right: .5rem;
&:before {
content: @fa-var-times;
font-size: 1em;
}
}
&.options + .reset {
right: 2.5rem;
}
&.search {
display: none;
}
}
span.inner {
display: none;
}
&.active {
form:before {
color: @color-searchbar-icon-active;
}
a.button.reset {
display: inline;
}
}
&.open a.button.options:before {
content: @fa-var-angle-up;
font-size: 1.25em;
line-height: 1.25;
}
}
.searchoptions {
button.search {
width: 100%;
}
ul.proplist {
li {
margin: 0;
}
& + div {
margin-top: 1rem;
}
}
.input-group {
&:not(:last-child) {
margin-bottom: .5rem;
}
.input-group-prepend {
width: 30%;
}
label {
width: 100%;
}
}
.formbuttons {
// this is needed because we hide .formbuttons on small devices
// we don't want it for search options form
display: block !important;
}
}