luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity
open-nomad/ui/app/styles/components/global-search-container.scss

67 lines
1.1 KiB
SCSS
Raw Normal View History

Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
.global-search-container {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
Update to v4 of Ember Power Select (#10226) This closes #10146. Because of cibernox/ember-power-select#1203, which documents the current impossibility of attaching test selectors to a PowerSelect invocation, this uses test selectors on parent containers instead, occasionally adding wrappers when needed. I chose to leave the existing test selectors in the hopes that we can return to using them eventually, but I could easily remove them if it seems like extra noise now. Presumably for the same reason, @class no longer works, so this adjusts the scoping of global search CSS to preserve the style of the search control. I also included an update to the latest version of ember-test-selectors, since we were far behind and I tried that before finding the aforelinked issue. Finally, this replaces ember-cli-uglify with ember-cli-terser to address production build failures as described at ember-cli/ember-cli#9290.
2021-03-26 13:55:12 +00:00
.ember-basic-dropdown-trigger {
Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
width: 30em;
@media #{$mq-hidden-gutter} {
width: 20em;
}
Update to v4 of Ember Power Select (#10226) This closes #10146. Because of cibernox/ember-power-select#1203, which documents the current impossibility of attaching test selectors to a PowerSelect invocation, this uses test selectors on parent containers instead, occasionally adding wrappers when needed. I chose to leave the existing test selectors in the hopes that we can return to using them eventually, but I could easily remove them if it seems like extra noise now. Presumably for the same reason, @class no longer works, so this adjusts the scoping of global search CSS to preserve the style of the search control. I also included an update to the latest version of ember-test-selectors, since we were far behind and I tried that before finding the aforelinked issue. Finally, this replaces ember-cli-uglify with ember-cli-terser to address production build failures as described at ember-cli/ember-cli#9290.
2021-03-26 13:55:12 +00:00
background: $nomad-green-darker;
border: 0;
Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
Update to v4 of Ember Power Select (#10226) This closes #10146. Because of cibernox/ember-power-select#1203, which documents the current impossibility of attaching test selectors to a PowerSelect invocation, this uses test selectors on parent containers instead, occasionally adding wrappers when needed. I chose to leave the existing test selectors in the hopes that we can return to using them eventually, but I could easily remove them if it seems like extra noise now. Presumably for the same reason, @class no longer works, so this adjusts the scoping of global search CSS to preserve the style of the search control. I also included an update to the latest version of ember-test-selectors, since we were far behind and I tried that before finding the aforelinked issue. Finally, this replaces ember-cli-uglify with ember-cli-terser to address production build failures as described at ember-cli/ember-cli#9290.
2021-03-26 13:55:12 +00:00
.icon {
margin-top: 1px;
margin-left: 2px;
Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
Update to v4 of Ember Power Select (#10226) This closes #10146. Because of cibernox/ember-power-select#1203, which documents the current impossibility of attaching test selectors to a PowerSelect invocation, this uses test selectors on parent containers instead, occasionally adding wrappers when needed. I chose to leave the existing test selectors in the hopes that we can return to using them eventually, but I could easily remove them if it seems like extra noise now. Presumably for the same reason, @class no longer works, so this adjusts the scoping of global search CSS to preserve the style of the search control. I also included an update to the latest version of ember-test-selectors, since we were far behind and I tried that before finding the aforelinked issue. Finally, this replaces ember-cli-uglify with ember-cli-terser to address production build failures as described at ember-cli/ember-cli#9290.
2021-03-26 13:55:12 +00:00
fill: white;
opacity: 0.7;
}
Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
Update to v4 of Ember Power Select (#10226) This closes #10146. Because of cibernox/ember-power-select#1203, which documents the current impossibility of attaching test selectors to a PowerSelect invocation, this uses test selectors on parent containers instead, occasionally adding wrappers when needed. I chose to leave the existing test selectors in the hopes that we can return to using them eventually, but I could easily remove them if it seems like extra noise now. Presumably for the same reason, @class no longer works, so this adjusts the scoping of global search CSS to preserve the style of the search control. I also included an update to the latest version of ember-test-selectors, since we were far behind and I tried that before finding the aforelinked issue. Finally, this replaces ember-cli-uglify with ember-cli-terser to address production build failures as described at ember-cli/ember-cli#9290.
2021-03-26 13:55:12 +00:00
.placeholder {
opacity: 0.7;
display: inline-block;
padding-left: 2px;
transform: translateY(-1px);
font-weight: $weight-semibold;
}
Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
Update to v4 of Ember Power Select (#10226) This closes #10146. Because of cibernox/ember-power-select#1203, which documents the current impossibility of attaching test selectors to a PowerSelect invocation, this uses test selectors on parent containers instead, occasionally adding wrappers when needed. I chose to leave the existing test selectors in the hopes that we can return to using them eventually, but I could easily remove them if it seems like extra noise now. Presumably for the same reason, @class no longer works, so this adjusts the scoping of global search CSS to preserve the style of the search control. I also included an update to the latest version of ember-test-selectors, since we were far behind and I tried that before finding the aforelinked issue. Finally, this replaces ember-cli-uglify with ember-cli-terser to address production build failures as described at ember-cli/ember-cli#9290.
2021-03-26 13:55:12 +00:00
.shortcut {
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
width: 1.4rem;
padding-top: 3px;
text-align: center;
opacity: 0.7;
background: $nomad-green-dark;
font-weight: $weight-semibold;
}
Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
Update to v4 of Ember Power Select (#10226) This closes #10146. Because of cibernox/ember-power-select#1203, which documents the current impossibility of attaching test selectors to a PowerSelect invocation, this uses test selectors on parent containers instead, occasionally adding wrappers when needed. I chose to leave the existing test selectors in the hopes that we can return to using them eventually, but I could easily remove them if it seems like extra noise now. Presumably for the same reason, @class no longer works, so this adjusts the scoping of global search CSS to preserve the style of the search control. I also included an update to the latest version of ember-test-selectors, since we were far behind and I tried that before finding the aforelinked issue. Finally, this replaces ember-cli-uglify with ember-cli-terser to address production build failures as described at ember-cli/ember-cli#9290.
2021-03-26 13:55:12 +00:00
&.ember-power-select-trigger--active {
background: white;
border-color: white;
Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
Update to v4 of Ember Power Select (#10226) This closes #10146. Because of cibernox/ember-power-select#1203, which documents the current impossibility of attaching test selectors to a PowerSelect invocation, this uses test selectors on parent containers instead, occasionally adding wrappers when needed. I chose to leave the existing test selectors in the hopes that we can return to using them eventually, but I could easily remove them if it seems like extra noise now. Presumably for the same reason, @class no longer works, so this adjusts the scoping of global search CSS to preserve the style of the search control. I also included an update to the latest version of ember-test-selectors, since we were far behind and I tried that before finding the aforelinked issue. Finally, this replaces ember-cli-uglify with ember-cli-terser to address production build failures as described at ember-cli/ember-cli#9290.
2021-03-26 13:55:12 +00:00
.icon {
fill: black;
opacity: 1;
Improve global search UX (#8249) This updates the look of the search control, adds a hint about the slash shortcut, adds highlighting of fuzzy search results, and addresses a few edge case UX failures. It moves to using a fork of Ember Power Select to handle an edge case where pressing escape would put the control in an undesirable active-but-not-open state.
2020-06-25 13:51:52 +00:00
}
}
.ember-basic-dropdown-content-wormhole-origin {
position: absolute;
top: 0;
width: 100%;
}
}
}
Reference in a new issue Copy permalink