ember-visual-search
Version:
A Powerful Visual Search Box Addon
1 lines • 6.45 kB
CSS
.json-pretty pre{outline:#bbb solid 1px;padding:5px;margin:5px;font-size:8pt}.json-pretty pre .string{color:red}.json-pretty pre .boolean,.json-pretty pre .null,.json-pretty pre .number{color:#000}.json-pretty pre .key{color:#f0f}.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:#fff;border:1px solid silver;border-radius:3px;cursor:text;align-content:stretch}.vs-facet-block,.vs-search-button{cursor:pointer;font-weight:700;position:relative;align-self:center}.visual-search-container.in-focus>.visual-search-box{box-shadow:0 0 2px rgba(32,153,204,.7);border-color:rgba(32,153,204,.8)}.vs-search-button{height:18px;padding:4px 8px;border-radius:3px;color:#fff;font-size:11px;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);flex-grow:0;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}.vs-facet-block{font-size:13px;display:flex;flex-wrap:nowrap;height:24px;border-radius:5px;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);margin:2px 4px 2px 0}.vs-facet-block>.vs-facet-key{display:flex;align-self:center;padding:4px}.vs-facet-block.in-focus,.vs-facet-block:active,.vs-facet-block:focus{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:0}.vs-facet-input-container>input[type=text],.vs-search-inner>input[type=text],input.is-facet-key{font-size:13px;background:0 0;border:0;outline:0;color:#101010;margin:0;padding:0;align-self:center;position:relative}input.is-facet-key{font-weight:700}.vs-search-inner>input[type=text].is-available{margin-left:4px}.vs-placeholder{opacity:.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:0;opacity:.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==) no-repeat;align-self:center;margin:2px 4px 0 0;transition:all .3s ease-in-out}.vs-facet-close:focus,.vs-facet-close:hover{opacity:1}.vs-facet-block:active .vs-facet-close,.vs-facet-block:focus .vs-facet-close{opacity:.4;outline:0;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ieC1jbG9zZSI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiMxMTY2QkIiIGN4PSI2LjUiIGN5PSI2LjUiIHI9IjYuNSI+PC9jaXJjbGU+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LDQgTDksOSIgaWQ9IlBhdGgtMiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNNCw0IEw5LDkiIGlkPSJQYXRoLTItQ29weSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi41MDAwMDAsIDYuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC02LjUwMDAwMCwgLTYuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat}.vs-facet-block:active .vs-facet-close:hover,.vs-facet-block:focus .vs-facet-close:hover{opacity:1}.suggestions{background-color:#444;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,.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,.9);font-weight:400}.suggestions>li>a strong{color:#FFA70B;font-weight:700}.suggestions>li.active>a,.suggestions>li>a:hover{background-color:#373737;color:#FFA70B;text-decoration:none;cursor:pointer}