{"id":907,"date":"2018-05-22T21:44:57","date_gmt":"2018-05-22T21:44:57","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=907"},"modified":"2018-08-15T21:49:43","modified_gmt":"2018-08-15T21:49:43","slug":"dropdowns","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/dropdowns\/","title":{"rendered":"Dropdowns *"},"content":{"rendered":"\n<p>Components<\/p>\n<h1>\n\t\tDropdowns<br \/>\n\t<\/h1>\n<h4>\n\t\tA Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.<br \/>\n\t<\/h4>\n<h4>\n\t\t<a href=\"#\" title=\"Dropdown Default\" target=\"_self\"><br \/>\n\t\tDropdown Default<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/08\/dropdown.png\" alt=\"dropdown\" height=\"79\" width=\"219\" title=\"dropdown\" \/><br \/>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/08\/dropdown_size.png\" alt=\"dropdown_size\" height=\"79\" width=\"262\" title=\"dropdown_size\" \/><\/p>\n<pre>\r\n.neon_form_select.el-select .el-select__caret {\r\n  height: 32px;\r\n  line-height: 32px;\r\n  font-size: 13px;\r\n}\r\n.neon_form_select.el-select .el-input__inner {\r\n  height: 32px;\r\n  line-height: 32px;\r\n  font-size: 13px;\r\n  color: #54698D;\r\n}\r\n.neon_form_select.el-select .el-input__inner::placeholder { \/* Chrome, Firefox, Opera, Safari 10.1+ *\/\r\n  color: #54698D;\r\n  opacity: 1; \/* Firefox *\/\r\n}\r\n.neon_form_select.el-select .el-input__inner:-ms-input-placeholder { \/* Internet Explorer 10-11 *\/\r\n  color: #54698D;\r\n}\r\n.neon_form_select.el-select .el-input__inner::-ms-input-placeholder { \/* Microsoft Edge *\/\r\n  color: #54698D;\r\n}\r\n.neon_form_select.el-select .el-input__inner:focus {\r\n  border: 1px solid #d8dde6;\r\n}\r\n.neon_form_select.el-select .el-input.is-focus .el-input__inner {\r\n  background: #f4f6f9;\r\n  border: 1px solid #d8dde6;\r\n}\r\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Hover\" target=\"_self\"><br \/>\n\t\tHover<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Background color and text darken<\/p>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/08\/dropdown_hover.png\" alt=\"dropdown_hover\" height=\"87\" width=\"225\" title=\"dropdown_hover\" \/><\/p>\n<pre>\r\n.neon_form_select.el-select:hover .el-input__inner {\r\n  background: #f4f6f9;\r\n}\r\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Focused\" target=\"_self\"><br \/>\n\t\tFocused<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Border highlights<\/p>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/08\/dropdown_hover.png\" alt=\"dropdown_hover\" height=\"87\" width=\"225\" title=\"dropdown_hover\" \/><\/p>\n<pre>\r\n.neon_form_select.el-select .el-input__inner:focus {\r\n  background: #f4f6f9;\r\n  border: 1px solid #d8dde6;\r\n}\r\n.neon_form_select.el-select .el-input.is-focus .el-input__inner {\r\n  background: #f4f6f9;\r\n  border: 1px solid #d8dde6;\r\n}\r\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Single select\" target=\"_self\"><br \/>\n\t\tSingle select<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.<\/p>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/08\/dropdown_single_active.png\" alt=\"dropdown_single_active\" height=\"188\" width=\"219\" title=\"dropdown_single_active\" \/><\/p>\n<pre>\r\n    &lt;el-select\r\n        v-model=\"field.selectedValue\"\r\n        clearable placeholder=\"Select an option\"\r\n        popper-class=\"neon_form_select_option\"&gt;\r\n        &lt;el-option\r\n          v-for=\"item in types[field.typeName]\"\r\n          :key=\"item.name\"\r\n          :label=\"item.name\"\r\n          :value=\"item.name\"&gt;\r\n        &lt;\/el-option&gt;\r\n      &lt;\/el-select&gt;    \r\n.neon_form_select_option .el-select-dropdown__item {\r\n  padding: 0 10px;\r\n}\r\n.neon_form_select_option .el-select-dropdown__item.selected::before {\r\n  font-family: FontAwesome;\r\n  content: \"f00c \";\r\n  color: #0076DE;\r\n  font-weight: 400;\r\n  visibility: visible;\r\n  margin-right: 6px;\r\n}\r\n.neon_form_select_option .el-select-dropdown__item::before {\r\n  font-family: FontAwesome;\r\n  content: \"f00c \";\r\n  color: #0076DE;\r\n  font-weight: 400;\r\n  visibility: hidden;\r\n  margin-right: 6px;\r\n}\r\n.neon_form_select_option .el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after {\r\n  visibility: hidden;\r\n}\r\n.neon_form_select_option .el-select-dropdown__item.selected {\r\n  background-color: #f8f9fa;\r\n  font-weight: 700;\r\n  color: #002D41;\r\n}\r\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Multiple select\" target=\"_self\"><br \/>\n\t\tMultiple select<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/08\/dropdown_multiple_active.png\" alt=\"dropdown_multiple_active\" height=\"244\" width=\"217\" title=\"dropdown_multiple_active\" \/><\/p>\n<pre>\r\n      &lt;el-select\r\n        v-model=\"field.selectedValue\"\r\n        multiple\r\n        collapse-tags\r\n        placeholder=\"Select\"\r\n        popper-class=\"neon_form_select_option\"&gt;\r\n        &lt;el-option\r\n          v-for=\"item in types[field.typeName]\"\r\n          :key=\"item.name\"\r\n          :label=\"item.name\"\r\n          :value=\"item.name\"&gt;\r\n        &lt;\/el-option&gt;\r\n      &lt;\/el-select&gt;\r\n.neon_form_select_option.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {\r\n  background-color: #f8f9fa;\r\n  font-weight: 700;\r\n  color: #002D41;\r\n}\r\n.neon_form_select .el-select__tags .el-tag {\r\n  background: #d8dde6;\r\n  color: #002d41;\r\n  border-radius: 12px;\r\n}\r\n.neon_form_select_option .neon_form_select_phone_type {\r\n  width: 30%;\r\n}\r\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Search and addition \" target=\"_self\"><br \/>\n\t\tSearch and addition<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/08\/dropdown_search.png\" alt=\"dropdown_search\" height=\"316\" width=\"214\" title=\"dropdown_search\" \/><\/p>\n<pre>\r\n          &lt;el-select\r\n            v-if=\"field.selectConstituent\"\r\n            slot=\"reference\"\r\n            v-model=\"field.selectedValue\"\r\n            filterable\r\n            remote\r\n            :remote-method=\"searchAccount\"\r\n            placeholder=\"Select Account\"\r\n            popper-class=\"neon_form_select_option\"\r\n          &gt;\r\n            &lt;el-option\r\n              v-for=\"item in searchedAccount\"\r\n              :key=\"item.name\"\r\n              :label=\"item.label\"\r\n              :value=\"item.name\"\r\n            &gt;\r\n            &lt;\/el-option&gt;\r\n          &lt;\/el-select&gt;\r\n<\/pre>\n<h2>\n\t\tOverview of CSS Classes<br \/>\n\t<\/h2>\n<h5>\n\t\tSelector<br \/>\n\t<\/h5>\n<h5>\n\t\tSummary<br \/>\n\t<\/h5>\n<h5>\n\t\tParent Selector<br \/>\n\t<\/h5>\n<p><em>.dropdown-field<\/em><\/p>\n<p><em>.dropdown-text<\/em><\/p>\n<p><em>.dropdown-content-bg<\/em><\/p>\n<p><em>.dropdown-content-text<\/em><\/p>\n<p><em>.dropdown-highlight<\/em><\/p>\n<p>closed field\u00a0<\/p>\n<p>text in the closed field<\/p>\n<p>background for the open dropdown <\/p>\n<p>text for options in the open dropdown<\/p>\n<p>hover state background highlight when selecting items in dropdown<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Dropdowns A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button,&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-907","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=907"}],"version-history":[{"count":13,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/907\/revisions"}],"predecessor-version":[{"id":1368,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/907\/revisions\/1368"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}