Last active
November 1, 2022 08:25
-
-
Save Kakulukian/4b2a349d74e01bef034d81cb5968f8a5 to your computer and use it in GitHub Desktop.
ModelSelect in vue3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div | |
| ref="root" | |
| class="ui fluid search selection dropdown" | |
| :class="{ | |
| 'active visible': showMenu, | |
| error: isError, | |
| disabled: isDisabled, | |
| }" | |
| @click="openOptions" | |
| @focus="openOptions" | |
| > | |
| <i class="dropdown icon"></i> | |
| <input | |
| class="search" | |
| autocomplete="off" | |
| :tabindex="isDisabled ? -1 : 0" | |
| :id="id" | |
| :name="name" | |
| :modelValue="searchText" | |
| @update:modelValue="searchText = $event.target.value" | |
| ref="input" | |
| @focus.prevent="openOptions" | |
| @keyup.esc="closeOptions" | |
| @blur="blurInput" | |
| @keydown.up="prevItem" | |
| @keydown.down="nextItem" | |
| @keydown.enter.prevent="" | |
| @keyup.enter.prevent="enterItem" | |
| @keydown.delete="deleteTextOrItem" | |
| /> | |
| <div | |
| class="text" | |
| :class="textClass" | |
| :data-vss-custom-attr="searchTextCustomAttr" | |
| > | |
| {{ inputText }} | |
| </div> | |
| <div | |
| class="menu" | |
| ref="menu" | |
| @mousedown.prevent | |
| :class="menuClass" | |
| :style="menuStyle" | |
| tabindex="-1" | |
| > | |
| <div | |
| v-for="(option, idx) in filteredOptions" | |
| :key="idx" | |
| class="item" | |
| :class="{ selected: option.selected || pointer === idx }" | |
| :data-vss-custom-attr="customAttrs[idx] ? customAttrs[idx] : ''" | |
| @click.stop="selectItem(option)" | |
| @mousedown="mousedownItem" | |
| @mouseenter="pointerSet(idx)" | |
| > | |
| {{ option.text }} | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| <script lang="ts" setup> | |
| import { mode } from "process"; | |
| import { escapedRegExp } from "../helpers/utils"; | |
| const showMenu = ref(false); | |
| const searchText = ref(""); | |
| const mousedownState = ref(false); // mousedown on option menu | |
| const pointer = ref(-1); | |
| const menu = ref(null); | |
| const input = ref(null); | |
| const root = ref(null); | |
| const props = defineProps({ | |
| id: { | |
| default: null, | |
| }, | |
| name: { | |
| type: String, | |
| default: "", | |
| }, | |
| isError: { | |
| type: Boolean, | |
| default: false, | |
| }, | |
| customAttr: { | |
| type: Function, | |
| default: () => "", | |
| }, | |
| isDisabled: { | |
| type: Boolean, | |
| default: false, | |
| }, | |
| placeholder: { | |
| type: String, | |
| default: "", | |
| }, | |
| filterPredicate: { | |
| type: Function, | |
| default: (text, inputText) => { | |
| return text.match(escapedRegExp(inputText)); | |
| }, | |
| }, | |
| modelValue: { | |
| type: [String, Number, Object, Boolean], | |
| }, | |
| options: { | |
| type: Array, | |
| default: () => [], | |
| }, | |
| }); | |
| const $emit = defineEmits(["searchchange", "update:modelValue", "blur"]); | |
| const { | |
| id, | |
| name, | |
| isDisabled, | |
| isError, | |
| placeholder, | |
| filterPredicate, | |
| customAttr, | |
| options, | |
| modelValue, | |
| } = toRefs(props); | |
| const searchTextCustomAttr = computed(() => { | |
| if (selectedOption && selectedOption.value) { | |
| return customAttr.value(selectedOption); | |
| } | |
| return ""; | |
| }); | |
| const selectedOption = computed(() => { | |
| return options.value.find((option) => { | |
| return optionValue(option) === optionValue(modelValue); | |
| }); | |
| }); | |
| const inputText = computed(() => { | |
| if (searchText.value) { | |
| return ""; | |
| } else { | |
| let text = placeholder.value; | |
| if (selectedOption.value) { | |
| text = selectedOption.value.text; | |
| } | |
| return text; | |
| } | |
| }); | |
| const customAttrs = computed(() => { | |
| try { | |
| if (Array.isArray(options.value)) { | |
| return options.value.map((o) => customAttr.value(o)); | |
| } | |
| } catch (e) { | |
| // if there is an error, just return an empty array | |
| } | |
| return []; | |
| }); | |
| const textClass = computed(() => { | |
| if (!selectedOption.value && placeholder.value) { | |
| return "default"; | |
| } else { | |
| return ""; | |
| } | |
| }); | |
| const menuClass = computed(() => { | |
| return { | |
| visible: showMenu.value, | |
| hidden: !showMenu.value, | |
| }; | |
| }); | |
| const menuStyle = computed(() => { | |
| return { | |
| display: showMenu.value ? "block" : "none", | |
| }; | |
| }); | |
| const filteredOptions = computed(() => { | |
| if (searchText.value) { | |
| return options.value.filter((option) => { | |
| try { | |
| return filterPredicate.value(option.text, searchText.value); | |
| } catch (e) { | |
| return true; | |
| } | |
| }); | |
| } else { | |
| return options.value; | |
| } | |
| }); | |
| watch(filteredOptions, () => { | |
| pointerAdjust(); | |
| }); | |
| watch(searchText, () => { | |
| $emit("searchchange", searchText); | |
| }); | |
| watch(modelValue, (newValue) => { | |
| pointer.value = filteredOptions.value.findIndex((option) => { | |
| return optionValue(option) === optionValue(newValue); | |
| }); | |
| }); | |
| function deleteTextOrItem() { | |
| if (!searchText.value && modelValue.value) { | |
| this.selectItem({}); | |
| this.openOptions(); | |
| } | |
| } | |
| function openOptions() { | |
| input.value.focus(); | |
| showMenu.value = true; | |
| mousedownState.value = false; | |
| } | |
| function blurInput() { | |
| if (!mousedownState.value) { | |
| searchText.value = ""; | |
| closeOptions(); | |
| } | |
| $emit("blur"); | |
| } | |
| function closeOptions() { | |
| showMenu.value = false; | |
| input.value.blur(); | |
| } | |
| function prevItem() { | |
| const prevIndex = pointer.value - 1; | |
| const prevIndexScrollTop = root.value.offsetHeight * prevIndex; | |
| if (prevIndex >= 0) { | |
| pointer.value = prevIndex; | |
| } | |
| // move scroll | |
| menu.value.scrollTop = prevIndexScrollTop; | |
| } | |
| function nextItem() { | |
| const nextIndex = pointer.value + 1; | |
| const nextIndexScrollTop = root.value.offsetHeight * nextIndex; | |
| if (nextIndex <= filteredOptions.value.length - 1) { | |
| pointer.value = nextIndex; | |
| } | |
| const currentMenuHeight = menu.value.offsetHeight; | |
| const currentPage = Math.ceil( | |
| (menu.value.scrollTop + root.value.offsetHeight) / currentMenuHeight | |
| ); | |
| const itemPage = Math.ceil(nextIndexScrollTop / currentMenuHeight); | |
| if (currentPage !== itemPage) { | |
| menu.value.scrollTop = (itemPage - 1) * menu.value.offsetHeight; | |
| } | |
| } | |
| function enterItem() { | |
| const currentItem = filteredOptions.value[pointer.value]; | |
| if (currentItem) { | |
| selectItem(currentItem); | |
| } | |
| } | |
| function pointerSet(index) { | |
| pointer.value = index; | |
| } | |
| function pointerAdjust() { | |
| if (pointer.value >= filteredOptions.value.length - 1) { | |
| pointer.value = filteredOptions.value.length | |
| ? filteredOptions.value.length - 1 | |
| : 0; | |
| } | |
| } | |
| function mousedownItem() { | |
| mousedownState.value = true; | |
| } | |
| function selectItem(option) { | |
| searchText.value = ""; | |
| closeOptions(); | |
| if (typeof modelValue.value === "object" && modelValue.value) { | |
| $emit("update:modelValue", option); | |
| } else { | |
| $emit("update:modelValue", option.value); | |
| if (option.value === option.text) { | |
| searchText.value = option.value; | |
| } | |
| } | |
| } | |
| function optionValue(value) { | |
| if (typeof value === "object" && value !== null) { | |
| return value.value; | |
| } else { | |
| return value; | |
| } | |
| } | |
| </script> | |
| <style lang="postcss"> | |
| /*! | |
| * # Semantic UI 2.4.0 - Dropdown | |
| */ | |
| /******************************* | |
| Dropdown | |
| *******************************/ | |
| .ui.dropdown { | |
| cursor: pointer; | |
| position: relative; | |
| display: inline-block; | |
| outline: none; | |
| text-align: left; | |
| transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; | |
| transition: box-shadow 0.1s ease, width 0.1s ease, | |
| -webkit-box-shadow 0.1s ease; | |
| } | |
| /******************************* | |
| Content | |
| *******************************/ | |
| /*-------------- | |
| Menu | |
| ---------------*/ | |
| .ui.dropdown .menu { | |
| cursor: auto; | |
| position: absolute; | |
| display: none; | |
| outline: none; | |
| top: 100%; | |
| min-width: -webkit-max-content; | |
| min-width: -moz-max-content; | |
| min-width: max-content; | |
| margin: 0em; | |
| padding: 0em 0em; | |
| background: #ffffff; | |
| font-size: 1em; | |
| text-shadow: none; | |
| text-align: left; | |
| border: 1px solid rgba(34, 36, 38, 0.15); | |
| border-radius: 0.28571429rem; | |
| transition: opacity 0.1s ease; | |
| z-index: 11; | |
| will-change: transform, opacity; | |
| } | |
| .ui.dropdown .menu > * { | |
| white-space: nowrap; | |
| } | |
| /*-------------- | |
| Hidden Input | |
| ---------------*/ | |
| .ui.dropdown > input:not(.search):first-child, | |
| .ui.dropdown > select { | |
| display: none !important; | |
| } | |
| /*-------------- | |
| Dropdown Icon | |
| ---------------*/ | |
| .ui.dropdown > .dropdown.icon { | |
| position: relative; | |
| width: auto; | |
| font-size: 0.85714286em; | |
| margin: 0em 0em 0em 1em; | |
| } | |
| .ui.dropdown .menu > .item .dropdown.icon { | |
| width: auto; | |
| float: right; | |
| margin: 0em 0em 0em 1em; | |
| } | |
| .ui.dropdown .menu > .item .dropdown.icon + .text { | |
| margin-right: 1em; | |
| } | |
| /*-------------- | |
| Text | |
| ---------------*/ | |
| .ui.dropdown > .text { | |
| display: inline-block; | |
| -webkit-transition: none; | |
| transition: none; | |
| } | |
| /*-------------- | |
| Menu Item | |
| ---------------*/ | |
| .ui.dropdown .menu > .item { | |
| position: relative; | |
| cursor: pointer; | |
| display: block; | |
| border: none; | |
| height: auto; | |
| text-align: left; | |
| border-top: none; | |
| line-height: 1em; | |
| color: rgba(0, 0, 0, 0.87); | |
| padding: 0.78571429rem 1.14285714rem !important; | |
| font-size: 1rem; | |
| text-transform: none; | |
| font-weight: normal; | |
| } | |
| .ui.dropdown .menu > .item:first-child { | |
| border-top-width: 0px; | |
| } | |
| /*-------------- | |
| Floated Content | |
| ---------------*/ | |
| .ui.dropdown > .text > [class*="right floated"], | |
| .ui.dropdown .menu .item > [class*="right floated"] { | |
| float: right !important; | |
| margin-right: 0em !important; | |
| margin-left: 1em !important; | |
| } | |
| .ui.dropdown > .text > [class*="left floated"], | |
| .ui.dropdown .menu .item > [class*="left floated"] { | |
| float: left !important; | |
| margin-left: 0em !important; | |
| margin-right: 1em !important; | |
| } | |
| .ui.dropdown .menu .item > .icon.floated, | |
| .ui.dropdown .menu .item > .flag.floated, | |
| .ui.dropdown .menu .item > .image.floated, | |
| .ui.dropdown .menu .item > img.floated { | |
| margin-top: 0em; | |
| } | |
| /*-------------- | |
| Menu Divider | |
| ---------------*/ | |
| .ui.dropdown .menu > .header { | |
| margin: 1rem 0rem 0.75rem; | |
| padding: 0em 1.14285714rem; | |
| color: rgba(0, 0, 0, 0.85); | |
| font-size: 0.78571429em; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| } | |
| .ui.dropdown .menu > .divider { | |
| border-top: 1px solid rgba(34, 36, 38, 0.1); | |
| height: 0em; | |
| margin: 0.5em 0em; | |
| } | |
| .ui.dropdown.dropdown .menu > .input { | |
| width: auto; | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin: 1.14285714rem 0.78571429rem; | |
| min-width: 10rem; | |
| } | |
| .ui.dropdown .menu > .header + .input { | |
| margin-top: 0em; | |
| } | |
| .ui.dropdown .menu > .input:not(.transparent) input { | |
| padding: 0.5em 1em; | |
| } | |
| .ui.dropdown .menu > .input:not(.transparent) .button, | |
| .ui.dropdown .menu > .input:not(.transparent) .icon, | |
| .ui.dropdown .menu > .input:not(.transparent) .label { | |
| padding-top: 0.5em; | |
| padding-bottom: 0.5em; | |
| } | |
| /*----------------- | |
| Item Description | |
| -------------------*/ | |
| .ui.dropdown > .text > .description, | |
| .ui.dropdown .menu > .item > .description { | |
| float: right; | |
| margin: 0em 0em 0em 1em; | |
| color: rgba(0, 0, 0, 0.4); | |
| } | |
| /*----------------- | |
| Message | |
| -------------------*/ | |
| .ui.dropdown .menu > .message { | |
| padding: 0.78571429rem 1.14285714rem; | |
| font-weight: normal; | |
| } | |
| .ui.dropdown .menu > .message:not(.ui) { | |
| color: rgba(0, 0, 0, 0.4); | |
| } | |
| /*-------------- | |
| Sub Menu | |
| ---------------*/ | |
| .ui.dropdown .menu .menu { | |
| top: 0% !important; | |
| left: 100%; | |
| right: auto; | |
| margin: 0em 0em 0em -0.5em !important; | |
| border-radius: 0.28571429rem !important; | |
| z-index: 21 !important; | |
| } | |
| /* Hide Arrow */ | |
| .ui.dropdown .menu .menu:after { | |
| display: none; | |
| } | |
| /*-------------- | |
| Sub Elements | |
| ---------------*/ | |
| /* Icons / Flags / Labels / Image */ | |
| .ui.dropdown > .text > .icon, | |
| .ui.dropdown > .text > .label, | |
| .ui.dropdown > .text > .flag, | |
| .ui.dropdown > .text > img, | |
| .ui.dropdown > .text > .image { | |
| margin-top: 0em; | |
| } | |
| .ui.dropdown .menu > .item > .icon, | |
| .ui.dropdown .menu > .item > .label, | |
| .ui.dropdown .menu > .item > .flag, | |
| .ui.dropdown .menu > .item > .image, | |
| .ui.dropdown .menu > .item > img { | |
| margin-top: 0em; | |
| } | |
| .ui.dropdown > .text > .icon, | |
| .ui.dropdown > .text > .label, | |
| .ui.dropdown > .text > .flag, | |
| .ui.dropdown > .text > img, | |
| .ui.dropdown > .text > .image, | |
| .ui.dropdown .menu > .item > .icon, | |
| .ui.dropdown .menu > .item > .label, | |
| .ui.dropdown .menu > .item > .flag, | |
| .ui.dropdown .menu > .item > .image, | |
| .ui.dropdown .menu > .item > img { | |
| margin-left: 0em; | |
| float: none; | |
| margin-right: 0.78571429rem; | |
| } | |
| /*-------------- | |
| Image | |
| ---------------*/ | |
| .ui.dropdown > .text > img, | |
| .ui.dropdown > .text > .image, | |
| .ui.dropdown .menu > .item > .image, | |
| .ui.dropdown .menu > .item > img { | |
| display: inline-block; | |
| vertical-align: top; | |
| width: auto; | |
| margin-top: -0.5em; | |
| margin-bottom: -0.5em; | |
| max-height: 2em; | |
| } | |
| /******************************* | |
| Coupling | |
| *******************************/ | |
| /*-------------- | |
| Menu | |
| ---------------*/ | |
| /* Remove Menu Item Divider */ | |
| .ui.dropdown .ui.menu > .item:before, | |
| .ui.menu .ui.dropdown .menu > .item:before { | |
| display: none; | |
| } | |
| /* Prevent Menu Item Border */ | |
| .ui.menu .ui.dropdown .menu .active.item { | |
| border-left: none; | |
| } | |
| /* Automatically float dropdown menu right on last menu item */ | |
| .ui.menu .right.menu .dropdown:last-child .menu, | |
| .ui.menu .right.dropdown.item .menu, | |
| .ui.buttons > .ui.dropdown:last-child .menu { | |
| left: auto; | |
| right: 0em; | |
| } | |
| /*-------------- | |
| Label | |
| ---------------*/ | |
| /* Dropdown Menu */ | |
| .ui.label.dropdown .menu { | |
| min-width: 100%; | |
| } | |
| /*-------------- | |
| Button | |
| ---------------*/ | |
| /* No Margin On Icon Button */ | |
| .ui.dropdown.icon.button > .dropdown.icon { | |
| margin: 0em; | |
| } | |
| .ui.button.dropdown .menu { | |
| min-width: 100%; | |
| } | |
| /******************************* | |
| Types | |
| *******************************/ | |
| /*-------------- | |
| Selection | |
| ---------------*/ | |
| /* Displays like a select box */ | |
| .ui.selection.dropdown { | |
| cursor: pointer; | |
| word-wrap: break-word; | |
| line-height: 1em; | |
| white-space: normal; | |
| outline: 0; | |
| -webkit-transform: rotateZ(0deg); | |
| transform: rotateZ(0deg); | |
| min-width: 14em; | |
| min-height: 2.71428571em; | |
| background: #ffffff; | |
| display: inline-block; | |
| padding: 0.78571429em 2.1em 0.78571429em 1em; | |
| color: rgba(0, 0, 0, 0.87); | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| border: 1px solid rgba(34, 36, 38, 0.15); | |
| border-radius: 0.28571429rem; | |
| -webkit-transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; | |
| transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; | |
| transition: box-shadow 0.1s ease, width 0.1s ease; | |
| transition: box-shadow 0.1s ease, width 0.1s ease, | |
| -webkit-box-shadow 0.1s ease; | |
| } | |
| .ui.selection.dropdown.visible, | |
| .ui.selection.dropdown.active { | |
| z-index: 10; | |
| } | |
| select.ui.dropdown { | |
| height: 38px; | |
| padding: 0.5em; | |
| border: 1px solid rgba(34, 36, 38, 0.15); | |
| visibility: visible; | |
| } | |
| .ui.selection.dropdown > .search.icon, | |
| .ui.selection.dropdown > .delete.icon, | |
| .ui.selection.dropdown > .dropdown.icon { | |
| cursor: pointer; | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| line-height: 1.21428571em; | |
| top: 0.78571429em; | |
| right: 1em; | |
| z-index: 3; | |
| margin: -0.78571429em; | |
| padding: 0.91666667em; | |
| opacity: 0.8; | |
| -webkit-transition: opacity 0.1s ease; | |
| transition: opacity 0.1s ease; | |
| } | |
| /* Compact */ | |
| .ui.compact.selection.dropdown { | |
| min-width: 0px; | |
| } | |
| /* Selection Menu */ | |
| .ui.selection.dropdown .menu { | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| backface-visibility: hidden; | |
| border-top-width: 0px !important; | |
| width: auto; | |
| outline: none; | |
| margin: 0px -1px; | |
| min-width: calc(100% + 2px); | |
| width: calc(100% + 2px); | |
| border-radius: 0em 0em 0.28571429rem 0.28571429rem; | |
| transition: opacity 0.1s ease; | |
| } | |
| .ui.selection.dropdown .menu:after, | |
| .ui.selection.dropdown .menu:before { | |
| display: none; | |
| } | |
| /*-------------- | |
| Message | |
| ---------------*/ | |
| .ui.selection.dropdown .menu > .message { | |
| padding: 0.78571429rem 1.14285714rem; | |
| } | |
| @media only screen and (max-width: 767px) { | |
| .ui.selection.dropdown .menu { | |
| max-height: 8.01428571rem; | |
| } | |
| } | |
| @media only screen and (min-width: 768px) { | |
| .ui.selection.dropdown .menu { | |
| max-height: 10.68571429rem; | |
| } | |
| } | |
| @media only screen and (min-width: 992px) { | |
| .ui.selection.dropdown .menu { | |
| max-height: 16.02857143rem; | |
| } | |
| } | |
| @media only screen and (min-width: 1920px) { | |
| .ui.selection.dropdown .menu { | |
| max-height: 21.37142857rem; | |
| } | |
| } | |
| /* Menu Item */ | |
| .ui.selection.dropdown .menu > .item { | |
| border-top: 1px solid #fafafa; | |
| padding: 0.78571429rem 1.14285714rem !important; | |
| white-space: normal; | |
| word-wrap: normal; | |
| } | |
| /* User Item */ | |
| .ui.selection.dropdown .menu > .hidden.addition.item { | |
| display: none; | |
| } | |
| /* Hover */ | |
| .ui.selection.dropdown:hover { | |
| border-color: rgba(34, 36, 38, 0.35); | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /* Active */ | |
| .ui.selection.active.dropdown { | |
| border-color: #96c8da; | |
| -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| } | |
| .ui.selection.active.dropdown .menu { | |
| border-color: #96c8da; | |
| -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| } | |
| /* Focus */ | |
| .ui.selection.dropdown:focus { | |
| border-color: #96c8da; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .ui.selection.dropdown:focus .menu { | |
| border-color: #96c8da; | |
| -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| } | |
| /* Visible */ | |
| .ui.selection.visible.dropdown > .text:not(.default) { | |
| font-weight: normal; | |
| color: rgba(0, 0, 0, 0.8); | |
| } | |
| /* Visible Hover */ | |
| .ui.selection.active.dropdown:hover { | |
| border-color: #96c8da; | |
| -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| } | |
| .ui.selection.active.dropdown:hover .menu { | |
| border-color: #96c8da; | |
| -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); | |
| } | |
| /* Dropdown Icon */ | |
| .ui.active.selection.dropdown > .dropdown.icon, | |
| .ui.visible.selection.dropdown > .dropdown.icon { | |
| opacity: ""; | |
| z-index: 3; | |
| } | |
| /* Connecting Border */ | |
| .ui.active.selection.dropdown { | |
| border-bottom-left-radius: 0em !important; | |
| border-bottom-right-radius: 0em !important; | |
| } | |
| /* Empty Connecting Border */ | |
| .ui.active.empty.selection.dropdown { | |
| border-radius: 0.28571429rem !important; | |
| -webkit-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| .ui.active.empty.selection.dropdown .menu { | |
| border: none !important; | |
| -webkit-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| /*-------------- | |
| Searchable | |
| ---------------*/ | |
| /* Search Selection */ | |
| .ui.search.dropdown { | |
| min-width: ""; | |
| } | |
| /* Search Dropdown */ | |
| .ui.search.dropdown > input.search { | |
| background: none transparent !important; | |
| border: none !important; | |
| -webkit-box-shadow: none !important; | |
| box-shadow: none !important; | |
| cursor: text; | |
| top: 0em; | |
| left: 1px; | |
| width: 100%; | |
| outline: none; | |
| -webkit-tap-highlight-color: rgba(255, 255, 255, 0); | |
| padding: inherit; | |
| } | |
| /* Text Layering */ | |
| .ui.search.dropdown > input.search { | |
| position: absolute; | |
| z-index: 2; | |
| } | |
| .ui.search.dropdown > .text { | |
| cursor: text; | |
| position: relative; | |
| left: 1px; | |
| z-index: 3; | |
| } | |
| /* Search Selection */ | |
| .ui.search.selection.dropdown > input.search { | |
| line-height: 1.21428571em; | |
| padding: 0.67857143em 2.1em 0.67857143em 1em; | |
| } | |
| /* Used to size multi select input to character width */ | |
| .ui.search.selection.dropdown > span.sizer { | |
| line-height: 1.21428571em; | |
| padding: 0.67857143em 2.1em 0.67857143em 1em; | |
| display: none; | |
| white-space: pre; | |
| } | |
| /* Active/Visible Search */ | |
| .ui.search.dropdown.active > input.search, | |
| .ui.search.dropdown.visible > input.search { | |
| cursor: auto; | |
| } | |
| .ui.search.dropdown.active > .text, | |
| .ui.search.dropdown.visible > .text { | |
| pointer-events: none; | |
| } | |
| /* Filtered Text */ | |
| .ui.active.search.dropdown input.search:focus + .text .icon, | |
| .ui.active.search.dropdown input.search:focus + .text .flag { | |
| opacity: 0.45; | |
| } | |
| .ui.active.search.dropdown input.search:focus + .text { | |
| color: rgba(115, 115, 115, 0.87) !important; | |
| } | |
| /* Search Menu */ | |
| .ui.search.dropdown .menu { | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| @media only screen and (max-width: 767px) { | |
| .ui.search.dropdown .menu { | |
| max-height: 8.01428571rem; | |
| } | |
| } | |
| @media only screen and (min-width: 768px) { | |
| .ui.search.dropdown .menu { | |
| max-height: 10.68571429rem; | |
| } | |
| } | |
| @media only screen and (min-width: 992px) { | |
| .ui.search.dropdown .menu { | |
| max-height: 16.02857143rem; | |
| } | |
| } | |
| @media only screen and (min-width: 1920px) { | |
| .ui.search.dropdown .menu { | |
| max-height: 21.37142857rem; | |
| } | |
| } | |
| /*-------------- | |
| Multiple | |
| ---------------*/ | |
| /* Multiple Selection */ | |
| .ui.multiple.dropdown { | |
| padding: 0.22619048em 2.1em 0.22619048em 0.35714286em; | |
| } | |
| .ui.multiple.dropdown .menu { | |
| cursor: auto; | |
| } | |
| /* Multiple Search Selection */ | |
| .ui.multiple.search.dropdown, | |
| .ui.multiple.search.dropdown > input.search { | |
| cursor: text; | |
| } | |
| /* Selection Label */ | |
| .ui.multiple.dropdown > .label { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| display: inline-block; | |
| vertical-align: top; | |
| white-space: normal; | |
| font-size: 1em; | |
| padding: 0.35714286em 0.78571429em; | |
| margin: 0.14285714rem 0.28571429rem 0.14285714rem 0em; | |
| -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; | |
| box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; | |
| } | |
| /* Dropdown Icon */ | |
| .ui.multiple.dropdown .dropdown.icon { | |
| margin: ""; | |
| padding: ""; | |
| } | |
| /* Text */ | |
| .ui.multiple.dropdown > .text { | |
| position: static; | |
| padding: 0; | |
| max-width: 100%; | |
| margin: 0.45238095em 0em 0.45238095em 0.64285714em; | |
| line-height: 1.21428571em; | |
| } | |
| .ui.multiple.dropdown > .label ~ input.search { | |
| margin-left: 0.14285714em !important; | |
| } | |
| .ui.multiple.dropdown > .label ~ .text { | |
| display: none; | |
| } | |
| /*----------------- | |
| Multiple Search | |
| -----------------*/ | |
| /* Prompt Text */ | |
| .ui.multiple.search.dropdown > .text { | |
| display: inline-block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| padding: inherit; | |
| margin: 0.45238095em 0em 0.45238095em 0.64285714em; | |
| line-height: 1.21428571em; | |
| } | |
| .ui.multiple.search.dropdown > .label ~ .text { | |
| display: none; | |
| } | |
| /* Search */ | |
| .ui.multiple.search.dropdown > input.search { | |
| position: static; | |
| padding: 0; | |
| max-width: 100%; | |
| margin: 0.45238095em 0em 0.45238095em 0.64285714em; | |
| width: 2.2em; | |
| line-height: 1.21428571em; | |
| } | |
| /*-------------- | |
| Inline | |
| ---------------*/ | |
| .ui.inline.dropdown { | |
| cursor: pointer; | |
| display: inline-block; | |
| color: inherit; | |
| } | |
| .ui.inline.dropdown .dropdown.icon { | |
| margin: 0em 0.21428571em 0em 0.21428571em; | |
| vertical-align: baseline; | |
| } | |
| .ui.inline.dropdown > .text { | |
| font-weight: bold; | |
| } | |
| .ui.inline.dropdown .menu { | |
| cursor: auto; | |
| margin-top: 0.21428571em; | |
| border-radius: 0.28571429rem; | |
| } | |
| /******************************* | |
| States | |
| *******************************/ | |
| /*-------------------- | |
| Active | |
| ----------------------*/ | |
| /* Menu Item Active */ | |
| .ui.dropdown .menu .active.item { | |
| background: transparent; | |
| font-weight: bold; | |
| color: rgba(0, 0, 0, 0.95); | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| z-index: 12; | |
| } | |
| /*-------------------- | |
| Hover | |
| ----------------------*/ | |
| /* Menu Item Hover */ | |
| .ui.dropdown .menu > .item:hover { | |
| background: rgba(0, 0, 0, 0.05); | |
| color: rgba(0, 0, 0, 0.95); | |
| z-index: 13; | |
| } | |
| /*-------------------- | |
| Loading | |
| ---------------------*/ | |
| .ui.loading.dropdown > i.icon { | |
| height: 1em !important; | |
| } | |
| .ui.loading.selection.dropdown > i.icon { | |
| padding: 1.5em 1.28571429em !important; | |
| } | |
| .ui.loading.dropdown > i.icon:before { | |
| position: absolute; | |
| content: ""; | |
| top: 50%; | |
| left: 50%; | |
| margin: -0.64285714em 0em 0em -0.64285714em; | |
| width: 1.28571429em; | |
| height: 1.28571429em; | |
| border-radius: 500rem; | |
| border: 0.2em solid rgba(0, 0, 0, 0.1); | |
| } | |
| .ui.loading.dropdown > i.icon:after { | |
| position: absolute; | |
| content: ""; | |
| top: 50%; | |
| left: 50%; | |
| -webkit-box-shadow: 0px 0px 0px 1px transparent; | |
| box-shadow: 0px 0px 0px 1px transparent; | |
| margin: -0.64285714em 0em 0em -0.64285714em; | |
| width: 1.28571429em; | |
| height: 1.28571429em; | |
| -webkit-animation: dropdown-spin 0.6s linear; | |
| animation: dropdown-spin 0.6s linear; | |
| -webkit-animation-iteration-count: infinite; | |
| animation-iteration-count: infinite; | |
| border-radius: 500rem; | |
| border-color: #767676 transparent transparent; | |
| border-style: solid; | |
| border-width: 0.2em; | |
| } | |
| /* Coupling */ | |
| .ui.loading.dropdown.button > i.icon:before, | |
| .ui.loading.dropdown.button > i.icon:after { | |
| display: none; | |
| } | |
| @-webkit-keyframes dropdown-spin { | |
| from { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes dropdown-spin { | |
| from { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /*-------------------- | |
| Default Text | |
| ----------------------*/ | |
| .ui.dropdown:not(.button) > .default.text, | |
| .ui.default.dropdown:not(.button) > .text { | |
| color: rgba(191, 191, 191, 0.87); | |
| } | |
| .ui.dropdown:not(.button) > input:focus ~ .default.text, | |
| .ui.default.dropdown:not(.button) > input:focus ~ .text { | |
| color: rgba(115, 115, 115, 0.87); | |
| } | |
| /*-------------------- | |
| Loading | |
| ----------------------*/ | |
| .ui.loading.dropdown > .text { | |
| -webkit-transition: none; | |
| transition: none; | |
| } | |
| /* Used To Check Position */ | |
| .ui.dropdown .loading.menu { | |
| display: block; | |
| visibility: hidden; | |
| z-index: -1; | |
| } | |
| .ui.dropdown > .loading.menu { | |
| left: 0px !important; | |
| right: auto !important; | |
| } | |
| .ui.dropdown > .menu .loading.menu { | |
| left: 100% !important; | |
| right: auto !important; | |
| } | |
| /*-------------------- | |
| Keyboard Select | |
| ----------------------*/ | |
| /* Selected Item */ | |
| .ui.dropdown.selected, | |
| .ui.dropdown .menu .selected.item { | |
| background: rgba(0, 0, 0, 0.03); | |
| color: rgba(0, 0, 0, 0.95); | |
| } | |
| /*-------------------- | |
| Search Filtered | |
| ----------------------*/ | |
| /* Filtered Item */ | |
| .ui.dropdown > .filtered.text { | |
| visibility: hidden; | |
| } | |
| .ui.dropdown .filtered.item { | |
| display: none !important; | |
| } | |
| /*-------------------- | |
| Error | |
| ----------------------*/ | |
| .ui.dropdown.error, | |
| .ui.dropdown.error > .text, | |
| .ui.dropdown.error > .default.text { | |
| color: #9f3a38; | |
| } | |
| .ui.selection.dropdown.error { | |
| background: #fff6f6; | |
| border-color: #e0b4b4; | |
| } | |
| .ui.selection.dropdown.error:hover { | |
| border-color: #e0b4b4; | |
| } | |
| .ui.dropdown.error > .menu, | |
| .ui.dropdown.error > .menu .menu { | |
| border-color: #e0b4b4; | |
| } | |
| .ui.dropdown.error > .menu > .item { | |
| color: #9f3a38; | |
| } | |
| .ui.multiple.selection.error.dropdown > .label { | |
| border-color: #e0b4b4; | |
| } | |
| /* Item Hover */ | |
| .ui.dropdown.error > .menu > .item:hover { | |
| background-color: #fff2f2; | |
| } | |
| /* Item Active */ | |
| .ui.dropdown.error > .menu .active.item { | |
| background-color: #fdcfcf; | |
| } | |
| /*-------------------- | |
| Clear | |
| ----------------------*/ | |
| .ui.dropdown > .clear.dropdown.icon { | |
| opacity: 0.8; | |
| -webkit-transition: opacity 0.1s ease; | |
| transition: opacity 0.1s ease; | |
| } | |
| .ui.dropdown > .clear.dropdown.icon:hover { | |
| opacity: 1; | |
| } | |
| /*-------------------- | |
| Disabled | |
| ----------------------*/ | |
| /* Disabled */ | |
| .ui.disabled.dropdown, | |
| .ui.dropdown .menu > .disabled.item { | |
| cursor: default; | |
| pointer-events: none; | |
| opacity: 0.45; | |
| } | |
| /******************************* | |
| Variations | |
| *******************************/ | |
| /*-------------- | |
| Direction | |
| ---------------*/ | |
| /* Flyout Direction */ | |
| .ui.dropdown .menu { | |
| left: 0px; | |
| } | |
| /* Default Side (Right) */ | |
| .ui.dropdown .right.menu > .menu, | |
| .ui.dropdown .menu .right.menu { | |
| left: 100% !important; | |
| right: auto !important; | |
| border-radius: 0.28571429rem !important; | |
| } | |
| /* Leftward Opening Menu */ | |
| .ui.dropdown > .left.menu { | |
| left: auto !important; | |
| right: 0px !important; | |
| } | |
| .ui.dropdown > .left.menu .menu, | |
| .ui.dropdown .menu .left.menu { | |
| left: auto; | |
| right: 100%; | |
| margin: 0em -0.5em 0em 0em !important; | |
| border-radius: 0.28571429rem !important; | |
| } | |
| .ui.dropdown .item .left.dropdown.icon, | |
| .ui.dropdown .left.menu .item .dropdown.icon { | |
| width: auto; | |
| float: left; | |
| margin: 0em 0em 0em 0em; | |
| } | |
| .ui.dropdown .item .left.dropdown.icon, | |
| .ui.dropdown .left.menu .item .dropdown.icon { | |
| width: auto; | |
| float: left; | |
| margin: 0em 0em 0em 0em; | |
| } | |
| .ui.dropdown .item .left.dropdown.icon + .text, | |
| .ui.dropdown .left.menu .item .dropdown.icon + .text { | |
| margin-left: 1em; | |
| margin-right: 0em; | |
| } | |
| /*-------------- | |
| Upward | |
| ---------------*/ | |
| /* Upward Main Menu */ | |
| .ui.upward.dropdown > .menu { | |
| top: auto; | |
| bottom: 100%; | |
| -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); | |
| box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); | |
| border-radius: 0.28571429rem 0.28571429rem 0em 0em; | |
| } | |
| /* Upward Sub Menu */ | |
| .ui.dropdown .upward.menu { | |
| top: auto !important; | |
| bottom: 0 !important; | |
| } | |
| /* Active Upward */ | |
| .ui.simple.upward.active.dropdown, | |
| .ui.simple.upward.dropdown:hover { | |
| border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; | |
| } | |
| .ui.upward.dropdown.button:not(.pointing):not(.floating).active { | |
| border-radius: 0.28571429rem 0.28571429rem 0em 0em; | |
| } | |
| /* Selection */ | |
| .ui.upward.selection.dropdown .menu { | |
| border-top-width: 1px !important; | |
| border-bottom-width: 0px !important; | |
| -webkit-box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); | |
| box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); | |
| } | |
| .ui.upward.selection.dropdown:hover { | |
| -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); | |
| box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); | |
| } | |
| /* Active Upward */ | |
| .ui.active.upward.selection.dropdown { | |
| border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; | |
| } | |
| /* Visible Upward */ | |
| .ui.upward.selection.dropdown.visible { | |
| -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); | |
| box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); | |
| border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; | |
| } | |
| /* Visible Hover Upward */ | |
| .ui.upward.active.selection.dropdown:hover { | |
| -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); | |
| box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); | |
| } | |
| .ui.upward.active.selection.dropdown:hover .menu { | |
| -webkit-box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); | |
| box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); | |
| } | |
| /*-------------- | |
| Simple | |
| ---------------*/ | |
| /* Selection Menu */ | |
| .ui.scrolling.dropdown .menu, | |
| .ui.dropdown .scrolling.menu { | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| } | |
| .ui.scrolling.dropdown .menu { | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| min-width: 100% !important; | |
| width: auto !important; | |
| } | |
| .ui.dropdown .scrolling.menu { | |
| position: static; | |
| overflow-y: auto; | |
| border: none; | |
| -webkit-box-shadow: none !important; | |
| box-shadow: none !important; | |
| border-radius: 0 !important; | |
| margin: 0 !important; | |
| min-width: 100% !important; | |
| width: auto !important; | |
| border-top: 1px solid rgba(34, 36, 38, 0.15); | |
| } | |
| .ui.scrolling.dropdown .menu .item.item.item, | |
| .ui.dropdown .scrolling.menu > .item.item.item { | |
| border-top: none; | |
| } | |
| .ui.scrolling.dropdown .menu .item:first-child, | |
| .ui.dropdown .scrolling.menu .item:first-child { | |
| border-top: none; | |
| } | |
| .ui.dropdown > .animating.menu .scrolling.menu, | |
| .ui.dropdown > .visible.menu .scrolling.menu { | |
| display: block; | |
| } | |
| /* Scrollbar in IE */ | |
| @media all and (-ms-high-contrast: none) { | |
| .ui.scrolling.dropdown .menu, | |
| .ui.dropdown .scrolling.menu { | |
| min-width: calc(100% - 17px); | |
| } | |
| } | |
| @media only screen and (max-width: 767px) { | |
| .ui.scrolling.dropdown .menu, | |
| .ui.dropdown .scrolling.menu { | |
| max-height: 10.28571429rem; | |
| } | |
| } | |
| @media only screen and (min-width: 768px) { | |
| .ui.scrolling.dropdown .menu, | |
| .ui.dropdown .scrolling.menu { | |
| max-height: 15.42857143rem; | |
| } | |
| } | |
| @media only screen and (min-width: 992px) { | |
| .ui.scrolling.dropdown .menu, | |
| .ui.dropdown .scrolling.menu { | |
| max-height: 20.57142857rem; | |
| } | |
| } | |
| @media only screen and (min-width: 1920px) { | |
| .ui.scrolling.dropdown .menu, | |
| .ui.dropdown .scrolling.menu { | |
| max-height: 20.57142857rem; | |
| } | |
| } | |
| /*-------------- | |
| Simple | |
| ---------------*/ | |
| /* Displays without javascript */ | |
| .ui.simple.dropdown .menu:before, | |
| .ui.simple.dropdown .menu:after { | |
| display: none; | |
| } | |
| .ui.simple.dropdown .menu { | |
| position: absolute; | |
| display: block; | |
| overflow: hidden; | |
| top: -9999px !important; | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| -webkit-transition: opacity 0.1s ease; | |
| transition: opacity 0.1s ease; | |
| } | |
| .ui.simple.active.dropdown, | |
| .ui.simple.dropdown:hover { | |
| border-bottom-left-radius: 0em !important; | |
| border-bottom-right-radius: 0em !important; | |
| } | |
| .ui.simple.active.dropdown > .menu, | |
| .ui.simple.dropdown:hover > .menu { | |
| overflow: visible; | |
| width: auto; | |
| height: auto; | |
| top: 100% !important; | |
| opacity: 1; | |
| } | |
| .ui.simple.dropdown > .menu > .item:active > .menu, | |
| .ui.simple.dropdown:hover > .menu > .item:hover > .menu { | |
| overflow: visible; | |
| width: auto; | |
| height: auto; | |
| top: 0% !important; | |
| left: 100% !important; | |
| opacity: 1; | |
| } | |
| .ui.simple.disabled.dropdown:hover .menu { | |
| display: none; | |
| height: 0px; | |
| width: 0px; | |
| overflow: hidden; | |
| } | |
| /* Visible */ | |
| .ui.simple.visible.dropdown > .menu { | |
| display: block; | |
| } | |
| /*-------------- | |
| Fluid | |
| ---------------*/ | |
| .ui.fluid.dropdown { | |
| display: block; | |
| width: 100%; | |
| min-width: 0em; | |
| } | |
| .ui.fluid.dropdown > .dropdown.icon { | |
| float: right; | |
| } | |
| /*-------------- | |
| Floating | |
| ---------------*/ | |
| .ui.floating.dropdown .menu { | |
| left: 0; | |
| right: auto; | |
| -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), | |
| 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; | |
| box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), | |
| 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; | |
| border-radius: 0.28571429rem !important; | |
| } | |
| .ui.floating.dropdown > .menu { | |
| margin-top: 0.5em !important; | |
| border-radius: 0.28571429rem !important; | |
| } | |
| /*-------------- | |
| Pointing | |
| ---------------*/ | |
| .ui.pointing.dropdown > .menu { | |
| top: 100%; | |
| margin-top: 0.78571429rem; | |
| border-radius: 0.28571429rem; | |
| } | |
| .ui.pointing.dropdown > .menu:after { | |
| display: block; | |
| position: absolute; | |
| pointer-events: none; | |
| content: ""; | |
| visibility: visible; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| width: 0.5em; | |
| height: 0.5em; | |
| -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); | |
| background: #ffffff; | |
| z-index: 2; | |
| } | |
| .ui.pointing.dropdown > .menu:after { | |
| top: -0.25em; | |
| left: 50%; | |
| margin: 0em 0em 0em -0.25em; | |
| } | |
| /* Top Left Pointing */ | |
| .ui.top.left.pointing.dropdown > .menu { | |
| top: 100%; | |
| bottom: auto; | |
| left: 0%; | |
| right: auto; | |
| margin: 1em 0em 0em; | |
| } | |
| .ui.top.left.pointing.dropdown > .menu { | |
| top: 100%; | |
| bottom: auto; | |
| left: 0%; | |
| right: auto; | |
| margin: 1em 0em 0em; | |
| } | |
| .ui.top.left.pointing.dropdown > .menu:after { | |
| top: -0.25em; | |
| left: 1em; | |
| right: auto; | |
| margin: 0em; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| /* Top Right Pointing */ | |
| .ui.top.right.pointing.dropdown > .menu { | |
| top: 100%; | |
| bottom: auto; | |
| right: 0%; | |
| left: auto; | |
| margin: 1em 0em 0em; | |
| } | |
| .ui.top.pointing.dropdown > .left.menu:after, | |
| .ui.top.right.pointing.dropdown > .menu:after { | |
| top: -0.25em; | |
| left: auto !important; | |
| right: 1em !important; | |
| margin: 0em; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| /* Left Pointing */ | |
| .ui.left.pointing.dropdown > .menu { | |
| top: 0%; | |
| left: 100%; | |
| right: auto; | |
| margin: 0em 0em 0em 1em; | |
| } | |
| .ui.left.pointing.dropdown > .menu:after { | |
| top: 1em; | |
| left: -0.25em; | |
| margin: 0em 0em 0em 0em; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| } | |
| .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { | |
| left: auto !important; | |
| right: 100% !important; | |
| margin: 0em 1em 0em 0em; | |
| } | |
| .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after { | |
| top: 1em; | |
| left: auto; | |
| right: -0.25em; | |
| margin: 0em 0em 0em 0em; | |
| -webkit-transform: rotate(135deg); | |
| transform: rotate(135deg); | |
| } | |
| /* Right Pointing */ | |
| .ui.right.pointing.dropdown > .menu { | |
| top: 0%; | |
| left: auto; | |
| right: 100%; | |
| margin: 0em 1em 0em 0em; | |
| } | |
| .ui.right.pointing.dropdown > .menu:after { | |
| top: 1em; | |
| left: auto; | |
| right: -0.25em; | |
| margin: 0em 0em 0em 0em; | |
| -webkit-transform: rotate(135deg); | |
| transform: rotate(135deg); | |
| } | |
| /* Bottom Pointing */ | |
| .ui.bottom.pointing.dropdown > .menu { | |
| top: auto; | |
| bottom: 100%; | |
| left: 0%; | |
| right: auto; | |
| margin: 0em 0em 1em; | |
| } | |
| .ui.bottom.pointing.dropdown > .menu:after { | |
| top: auto; | |
| bottom: -0.25em; | |
| right: auto; | |
| margin: 0em; | |
| -webkit-transform: rotate(-135deg); | |
| transform: rotate(-135deg); | |
| } | |
| /* Reverse Sub-Menu Direction */ | |
| .ui.bottom.pointing.dropdown > .menu .menu { | |
| top: auto !important; | |
| bottom: 0px !important; | |
| } | |
| /* Bottom Left */ | |
| .ui.bottom.left.pointing.dropdown > .menu { | |
| left: 0%; | |
| right: auto; | |
| } | |
| .ui.bottom.left.pointing.dropdown > .menu:after { | |
| left: 1em; | |
| right: auto; | |
| } | |
| /* Bottom Right */ | |
| .ui.bottom.right.pointing.dropdown > .menu { | |
| right: 0%; | |
| left: auto; | |
| } | |
| .ui.bottom.right.pointing.dropdown > .menu:after { | |
| left: auto; | |
| right: 1em; | |
| } | |
| /* Upward pointing */ | |
| .ui.pointing.upward.dropdown .menu, | |
| .ui.top.pointing.upward.dropdown .menu { | |
| top: auto !important; | |
| bottom: 100% !important; | |
| margin: 0em 0em 0.78571429rem; | |
| border-radius: 0.28571429rem; | |
| } | |
| .ui.pointing.upward.dropdown .menu:after, | |
| .ui.top.pointing.upward.dropdown .menu:after { | |
| top: 100% !important; | |
| bottom: auto !important; | |
| -webkit-box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15); | |
| margin: -0.25em 0em 0em; | |
| } | |
| /* Right Pointing Upward */ | |
| .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { | |
| top: auto !important; | |
| bottom: 0 !important; | |
| margin: 0em 1em 0em 0em; | |
| } | |
| .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { | |
| top: auto !important; | |
| bottom: 0 !important; | |
| margin: 0em 0em 1em 0em; | |
| -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); | |
| } | |
| /* Left Pointing Upward */ | |
| .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu { | |
| top: auto !important; | |
| bottom: 0 !important; | |
| margin: 0em 0em 0em 1em; | |
| } | |
| .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { | |
| top: auto !important; | |
| bottom: 0 !important; | |
| margin: 0em 0em 1em 0em; | |
| -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); | |
| box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); | |
| } | |
| /******************************* | |
| Theme Overrides | |
| *******************************/ | |
| /* Dropdown Carets */ | |
| @font-face { | |
| font-family: "Dropdown"; | |
| src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) | |
| format("woff"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .ui.dropdown > .dropdown.icon { | |
| font-family: "Dropdown"; | |
| line-height: 1; | |
| height: 1em; | |
| width: 1.23em; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| font-weight: normal; | |
| font-style: normal; | |
| text-align: center; | |
| } | |
| .ui.dropdown > .dropdown.icon { | |
| width: auto; | |
| } | |
| .ui.dropdown > .dropdown.icon:before { | |
| content: "\f0d7"; | |
| } | |
| /* Sub Menu */ | |
| .ui.dropdown .menu .item .dropdown.icon:before { | |
| content: "\f0da" /*rtl:'\f0d9'*/; | |
| } | |
| .ui.dropdown .item .left.dropdown.icon:before, | |
| .ui.dropdown .left.menu .item .dropdown.icon:before { | |
| content: "\f0d9" /*rtl:"\f0da"*/; | |
| } | |
| /* Vertical Menu Dropdown */ | |
| .ui.vertical.menu .dropdown.item > .dropdown.icon:before { | |
| content: "\f0da" /*rtl:"\f0d9"*/; | |
| } | |
| .ui.dropdown > .clear.icon:before { | |
| content: "\f00d"; | |
| } | |
| .ui.dropdown { | |
| box-sizing: border-box; /* for padding */ | |
| font-size: 14px; /* for em size */ | |
| input { | |
| font-size: 14px; | |
| } | |
| .menu { | |
| box-sizing: content-box; | |
| > .item { | |
| font-size: 14px; | |
| } | |
| } | |
| } | |
| .ui.selection.dropdown { | |
| min-height: 14px; | |
| .menu { | |
| min-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| /* label close icon */ | |
| .ui.multiple.dropdown > .label { | |
| position: relative; | |
| padding-right: calc(0.78571429em + 15px); | |
| i.icon.delete:before { | |
| content: "\00d7"; | |
| font-family: Arial, sans-serif; | |
| } | |
| i.icon.delete { | |
| box-sizing: border-box; | |
| position: absolute; | |
| right: 10px; | |
| display: inline-block; | |
| width: 18px; | |
| height: 24px; | |
| margin: -5px -10px; | |
| &:before, | |
| &:after { | |
| position: absolute; | |
| content: " "; | |
| height: 12px; | |
| width: 3px; | |
| top: 25%; | |
| left: 25%; | |
| transform: translate(-25%, -25%); | |
| background-color: #333; | |
| } | |
| &:before { | |
| transform: rotate(45deg); | |
| } | |
| &:after { | |
| transform: rotate(-45deg); | |
| } | |
| } | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment