Mailspring/internal_packages/search-bar/stylesheets/search-bar.less
2016-02-22 10:14:34 -08:00

90 lines
1.7 KiB
Plaintext

@import "ui-variables";
@import "ui-mixins";
.search-bar {
position: relative;
order: -100;
overflow: visible;
z-index: 100;
width:450px;
margin-top: (38px - 23px) / 2;
.menu .header-container {
padding:0;
height:23px;
background-color: transparent;
border:none;
input {
padding-left: 26px;
padding-right: 26px;
width: 100%;
height: 23px;
border: 0;
box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
}
input.empty {
text-align: left;
}
input.empty:focus {
text-align: left;
}
}
.menu .footer-container {
border:none;
}
.menu .content-container {
position: absolute;
z-index: 2;
width: 100%;
box-shadow: @standard-shadow;
.item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.search-container {
position: relative;
&.showing-suggestions {
.suggestions { display: inherit; }
.clear {
color: @input-accessory-color;
display: inherit;
}
}
&.showing-query {
.clear { display: inherit; }
}
}
.search-accessory {
&.search {
position: absolute;
top: 8px;
left: @padding-base-horizontal;
}
&.clear {
position: absolute;
top: 3px;
right: 4px;
color: @input-accessory-color;
display: none;
}
}
}
body.is-blurred {
.search-bar .menu .header-container input {
background: none;
box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
}
}