@keyframes loading { 0% { transform: rotate(0deg); } to { transform: rotate(360deg); } } .icon.delete { display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; border: 0; background: 0 0; height: 8px; width: 8px; min-height: 8px; min-width: 8px; max-height: 8px; max-width: 8px; cursor: pointer; } .icon.arrow-downward { color: #999; border-style: solid; border-width: 4px 4px 0; border-color: #999 transparent transparent; content: ''; transition: transform 0.2s linear; cursor: pointer; } .icon.arrow-downward.active { transform: rotate(180deg); } .vue-select { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; width: 150px; border-radius: 4px; border: 1px solid #999; box-sizing: border-box; outline: 0; } .vue-select[aria-disabled='true'] { background-color: rgba(239, 239, 239); } .vue-dropdown[data-removable='false'] .vue-dropdown-item.selected:hover, .vue-select[aria-disabled='true'] *, .vue-select[aria-disabled='true'] input, .vue-tags[data-removable='false'] .vue-tag.selected img:hover { cursor: not-allowed; } .vue-select-header { display: flex; width: 100%; align-items: center; justify-content: space-between; } .vue-select-header .icon.arrow-downward, .vue-select-header .icon.loading, .vue-select-input-wrapper .icon.loading, .vue-tag span { margin-right: 4px; } .vue-tags { display: flex; flex-wrap: wrap; margin: 0; padding: 2px; min-height: calc(1rem + 4px); user-select: none; } .vue-tags.collapsed { flex-wrap: nowrap; overflow: auto; } .vue-tag, .vue-tag.selected { justify-content: center; background-color: #999; padding: 0 4px; font-size: 0.8rem; } .vue-tag { display: none; align-items: center; list-style-type: none; border-radius: 4px; margin: 2px; min-height: 1rem; } .vue-tag.selected { display: flex; } .vue-select-input-wrapper { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; } .vue-input, .vue-tag.selected { align-items: center; border-radius: 4px; } .vue-input { display: inline-flex; border: 0; outline: 0; max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; padding: 4px; } .vue-select[data-is-focusing='false'][aria-disabled='false'] .vue-input input, input[readonly] { cursor: default; } .vue-dropdown, .vue-input input { width: 100%; min-width: 0; padding: 0; } .vue-input input { border: 0; outline: 0; font-size: 0.8rem; } .vue-input input[disabled] { background-color: rgba(239, 239, 239); } .vue-input input[readonly], .vue-select-header .vue-input input[disabled] { background-color: unset; } .vue-dropdown { display: none; position: absolute; background-color: #fff; z-index: 1; overflow-y: auto; margin: 0; left: -1px; box-sizing: content-box; border: 1px solid #999; list-style-type: none; } .vue-select[aria-expanded='true'] .vue-dropdown { display: unset; } .vue-dropdown[data-visible-length='0'] { border: 0; } .vue-dropdown-item { list-style-type: none; padding: 4px; cursor: pointer; min-height: 1rem; } .vue-dropdown-item.highlighted { background-color: #41b883; } .vue-dropdown-item.disabled { background-color: rgba(239, 239, 239); cursor: not-allowed; } .vue-dropdown-item.selected { background-color: #f3f3f3; } .vue-dropdown-item.selected.highlighted { background-color: #ff6a6a; } .vue-dropdown[data-addable='false'][data-multiple='true'] .vue-dropdown-item:not(.selected):hover { cursor: not-allowed; } .icon.loading { display: inline-block; position: relative; width: 8px; min-width: 8px; height: 8px; min-height: 8px; } .icon.loading div { box-sizing: border-box; display: block; position: absolute; border: 1px solid #999; width: 8px; height: 8px; border-radius: 50%; animation: loading 1s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #999 transparent transparent; } .icon.loading div:nth-child(1) { animation-delay: -0.08s; } .icon.loading div:nth-child(2) { animation-delay: -0.16s; } .inline-flex { display: inline-flex; } .vue-select[aria-expanded='true'].direction-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .vue-select[aria-expanded='true'].direction-top { border-top-left-radius: 0; border-top-right-radius: 0; } .vue-select.direction-top .vue-dropdown { bottom: 100%; border-top-left-radius: 3px; border-top-right-radius: 3px; } .vue-select.direction-bottom .vue-dropdown { top: 100%; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }