ember-visual-search/vendor/visual-search.css

A Powerful Visual Search Box Addon

.visual-search-container, .visual-search-container * {
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  text-size-adjust: 100%;
}

.visual-search-container {
  display: block;
  width: 100%;
  min-height: 30px;
}

.visual-search-container > .visual-search-box {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 34px;
  background-color: #ffffff;
  border: silver 1px solid;
  border-radius: 3px;
  cursor: text;
  align-content: stretch;
}

.visual-search-container.in-focus > .visual-search-box {
  box-shadow: 0 0 2px rgba(32, 153, 204, 0.7);
  border-color: rgba(32, 153, 204, 0.8);
}

.vs-search-button {
  align-self: center;
  height: 18px;
  padding: 4px 8px;
  border-radius: 3px;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  border: 1px solid #16b;
  background: #2378CD;
  background: -webkit-linear-gradient(top, #38d 0%, #16b);
  background: -moz-linear-gradient(top, #38d 0%, #16b);
  background: -ms-linear-gradient(top, #38d 0%, #16b);
  background: linear-gradient(top, #38d 0%, #16b);
  -webkit-box-shadow: 0 0 0 rgba(000, 000, 000, 0), inset 0 0 2px rgba(119, 170, 204, 1);
  -moz-box-shadow: 0 0 0 rgba(000, 000, 000, 0), inset 0 0 2px rgba(119, 170, 204, 1);
  -ms-box-shadow: 0 0 0 rgba(000, 000, 000, 0), inset 0 0 2px rgba(119, 170, 204, 1);
  box-shadow: 0 0 0 rgba(000, 000, 000, 0), inset 0 0 2px rgba(119, 170, 204, 1);
  text-shadow: 0 1px 0 rgba(025, 084, 167, 1), 0 0 0 rgba(255, 255, 255, 0);
  cursor: pointer;
  flex-grow: 0;
  position: relative;
  left: -3px;
}

.vs-search-button:focus,
.vs-search-button:hover {
  background: #2480d7;
  background: -webkit-linear-gradient(top, #2480d7 0%, #1170c6);
  background: -moz-linear-gradient(top, #2480d7 0%, #1170c6);
  background: -ms-linear-gradient(top, #2480d7 0%, #1170c6);
  background: linear-gradient(top, #2480d7 0%, #1170c6);
}

.vs-search-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 2px 0 2px 4px;
  flex-grow: 2;
}

/* block */
.vs-facet-block {
  font-size: 13px;
  font-weight: bold;
  display: flex;
  flex-wrap: nowrap;
  height: 24px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #d2d2d2;
  background: #F1F1F1;
  background: -webkit-linear-gradient(top, #FDFDFD 0%, #E3E3E3);
  background: -moz-linear-gradient(top, #FDFDFD 0%, #E3E3E3);
  background: -ms-linear-gradient(top, #FDFDFD 0%, #E3E3E3);
  background: linear-gradient(top, #FDFDFD 0%, #E3E3E3);
  align-self: center;
  margin: 2px 4px 2px 0;
  position: relative;
}

.vs-facet-block > .vs-facet-key {
  display: flex;
  align-self: center;
  padding: 4px;
}

.vs-facet-block.in-focus, .vs-facet-block:focus, .vs-facet-block:active {
  border-color: #2099cc;
  background: #DDEEFE;
  background: -webkit-linear-gradient(top, #FDFDFD 0%, #BCDEFF);
  background: -moz-linear-gradient(top, #FDFDFD 0%, #BCDEFF);
  background: -ms-linear-gradient(top, #FDFDFD 0%, #BCDEFF);
  background: linear-gradient(top, #FDFDFD 0%, #BCDEFF);
  outline: none;
}


/* input */
.vs-search-inner > input[type=text], .vs-facet-input-container > input[type=text], input.is-facet-key {
  font-size: 13px;
  background: transparent;
  border: 0;
  outline: none;
  color: #101010;
  margin: 0;
  padding: 0;
  align-self: center;
  position: relative;
}

input.is-facet-key {
  font-weight: bold;
}

.vs-search-inner > input[type=text].is-available {
  margin-left: 4px;
}

.vs-placeholder {
  opacity: 0.9;
  position: relative;
  font-size: 12px;
  color: #909090;
  align-self: center;
  padding: 3px 0;
}


.vs-facet-block > .vs-facet-input-container {
  display: flex;
  padding: 1px 4px 0 0;
}

.vs-icon-search {
  align-self: center;
  padding: 0 2px;
  flex-grow: 0;
}

.vs-icon > svg {
  position: relative;
  left: 2px;
  top: 2px;
  height: 20px;
  max-width: 20px;
}


.vs-facet-close {
  outline: none;
  opacity: 0.6;
  padding: 0;
  border: 0;
  height: 14px;
  width: 14px;
  overflow: hidden;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ieC1jbG9zZSI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiNCREJEQkQiIGN4PSI2LjUiIGN5PSI2LjUiIHI9IjYuNSI+PC9jaXJjbGU+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LDQgTDksOSIgaWQ9IlBhdGgtMiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNNCw0IEw5LDkiIGlkPSJQYXRoLTItQ29weSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi41MDAwMDAsIDYuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC02LjUwMDAwMCwgLTYuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") -0px -0px no-repeat;
  align-self: center;
  margin: 2px 4px 0 0;
  transition: all 300ms ease-in-out;
}

.vs-facet-close:hover, .vs-facet-close:focus {
  opacity: 1.0;
}

.vs-facet-block:focus .vs-facet-close, .vs-facet-block:active .vs-facet-close {
  opacity: 0.4;
  outline: none;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ieC1jbG9zZSI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiMxMTY2QkIiIGN4PSI2LjUiIGN5PSI2LjUiIHI9IjYuNSI+PC9jaXJjbGU+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LDQgTDksOSIgaWQ9IlBhdGgtMiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNNCw0IEw5LDkiIGlkPSJQYXRoLTItQ29weSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi41MDAwMDAsIDYuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC02LjUwMDAwMCwgLTYuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") -0px -0px no-repeat;
}

.vs-facet-block:focus .vs-facet-close:hover, .vs-facet-block:active .vs-facet-close:hover {
  opacity: 1;
}

/* suggestions component */
.suggestions {
  background-color: #444444;
  font-size: 13px;
  list-style: none;
  margin: 0;
  position: absolute;
  left: 0;
  text-align: left;
  top: 100%;
  z-index: 1;
  min-width: 240px;
  box-shadow: 0 0 2px rgba(9, 49, 63, 0.48);
  border-radius: 3px;
  padding: 4px 0;
}

.suggestions > li > a {
  clear: both;
  cursor: default;
  display: block;
  padding: 5px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: normal;
}

.suggestions > li > a strong {
  color: #FFA70B;
  font-weight: bold;
}

.suggestions > li.active > a,
.suggestions > li > a:hover {
  background-color: #373737;
  color: #FFA70B;
  text-decoration: none;
  cursor: pointer;
}