Mailspring/static/components/search-bar.less
Juan Tejada d3dcf89e9f feat(event-search): Add event search to calendar
Summary:
This commit adds the ability to perform event search in the calendar window.
To achieve this, SearchBar has been moved from the thread-search package to be a part
of the nylas-component-kit, and reused by both thread-search and nylas-calendar

When an event is selected from search results, the calendar view is moved to the selected
event. Depends on D3396 to open the event popover.

Test Plan: Manual

Reviewers: halla, bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D3424
2016-11-15 17:27:31 -08:00

92 lines
1.5 KiB
Text

@import "ui-variables";
@import "ui-mixins";
.nylas-search-bar {
height: initial;
.menu .header-container {
padding: 0;
height: 23px;
background-color: transparent;
border: none;
input {
padding-left: 26px;
padding-right: 26px;
width: 100%;
height: 23px;
border: 1px solid transparent;
box-shadow: @shadow-border;
}
input.empty {
text-align: left;
}
input.empty:focus {
text-align: left;
}
}
.menu .footer-container {
border:none;
}
.menu .content-container {
position: absolute;
top: 23px;
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: @text-color-subtle;
display: inherit;
}
}
&.showing-query {
.clear { display: inherit; }
}
}
.search-accessory {
&.search {
position: absolute;
top: 8px;
left: @padding-base-horizontal;
&.loading {
top: 4px;
left: 7px;
width: 15px;
height: 15px;
}
}
&.clear {
position: absolute;
top: 3px;
right: 4px;
color: @text-color-subtle;
display: none;
}
}
}
body.is-blurred {
.search-bar .menu .header-container input {
background: none;
box-shadow: @shadow-border;
}
}