166 lines
3.7 KiB
SCSS
166 lines
3.7 KiB
SCSS
// Replaces magic_search.scss with styles for bootstrap/Horizon.
|
|
|
|
/* Disclaimer : Tread carefully with changes to this file.
|
|
The contents of this scss file are somewhat fragile. They allow
|
|
for dynamic growth of both the token string and the input box,
|
|
while also accounting for text ellipsis overflowing of token
|
|
strings. Any change to this file must vet ALL the cases
|
|
mentioned above. */
|
|
|
|
/*-----------------------------------------
|
|
Magic Search bar
|
|
----------------------------------------- */
|
|
|
|
.hz-magic-search-bar {
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
|
|
.magic-search-bar {
|
|
&, .input-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.input-group {
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: inline-flex;
|
|
|
|
.input-group-btn,
|
|
.input-group-addon {
|
|
align-items: center;
|
|
display: flex;
|
|
width: auto;
|
|
}
|
|
|
|
.form-control {
|
|
max-width: calc(100% - 2em);
|
|
padding: 0;
|
|
height: 100%;
|
|
line-height: $input-height-base - 2;
|
|
}
|
|
}
|
|
|
|
.input-group-btn {
|
|
// Notes:
|
|
// * We may need a better solution than this if we
|
|
// ever want to support button groups that are
|
|
// small or large, or a state other than default.
|
|
// But, until then, this does the trick for our
|
|
// standard use case!
|
|
// * If this seems odds, its because Bootstrap button
|
|
// groups don't allow the trailing button to grow in
|
|
// height so we have to make the whole span look like
|
|
// the button instead. This can be confusing: the
|
|
// click event needs to live on the span now, not the button.
|
|
border-radius: 0 $border-radius-base $border-radius-base 0;
|
|
border: 1px solid $btn-default-border;
|
|
border-left: none;
|
|
cursor: pointer;
|
|
outline: 0;
|
|
background-image: none;
|
|
&:active {
|
|
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
|
}
|
|
|
|
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
|
|
button {
|
|
&,
|
|
&:hover {
|
|
background-color: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
&:active {
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-bar {
|
|
|
|
.search-main-area {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
padding: 0 $padding-small-vertical;
|
|
align-items: center;
|
|
|
|
.search-entry {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
left: initial;
|
|
}
|
|
}
|
|
|
|
.fi-filter {
|
|
display: none;
|
|
}
|
|
|
|
// Input Text Box
|
|
.search-input {
|
|
border: none;
|
|
padding: 0;
|
|
width: calc(100% - 1.5em);
|
|
background: transparent;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// Token
|
|
.item {
|
|
max-width: calc(100% - 1.5em);
|
|
font-size: $font-size-small;
|
|
border-radius: $border-radius-base;
|
|
display: inline-flex;
|
|
background-color: $gray-lighter;
|
|
padding: $padding-base-vertical;
|
|
margin-right: $padding-small-vertical;
|
|
margin-bottom: $padding-xs-vertical;
|
|
|
|
.remove {
|
|
color: $brand-danger;
|
|
line-height: 1;
|
|
padding-left: $padding-small-vertical;
|
|
}
|
|
}
|
|
|
|
// Pre-Token Label
|
|
.search-selected {
|
|
color: $gray-light;
|
|
padding-right: $padding-small-vertical;
|
|
}
|
|
|
|
// Search Bar Clear Icon
|
|
.magic-search-clear {
|
|
font-size: $font-size-base;
|
|
color: $gray;
|
|
position: absolute;
|
|
right: 0.5em;
|
|
top: calc(50% - 0.5em);
|
|
line-height: 1;
|
|
}
|
|
|
|
.magic-search-result {
|
|
&-string {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
|
|
&-title {
|
|
padding: 0 $padding-small-vertical;
|
|
line-height: 1;
|
|
flex: 1 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|