diff --git a/stylelint.config.js b/stylelint.config.js index 42edf76f43..3e6be3c248 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -125,7 +125,7 @@ export default { 'csstools/value-no-unknown-custom-properties': [true, {importFrom: cssVarFiles}], 'declaration-block-no-duplicate-properties': [true, {ignore: ['consecutive-duplicates-with-different-values']}], 'declaration-block-no-redundant-longhand-properties': [true, {ignoreShorthands: ['flex-flow', 'overflow', 'grid-template']}], - 'declaration-property-unit-disallowed-list': {'line-height': ['em']}, + 'declaration-property-unit-disallowed-list': null, 'declaration-property-value-disallowed-list': {'word-break': ['break-word']}, 'font-family-name-quotes': 'always-where-recommended', 'function-name-case': 'lower', diff --git a/web_src/css/base.css b/web_src/css/base.css index 3fa5c1246c..59072839a9 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -243,9 +243,7 @@ progress::-moz-progress-bar { color: var(--color-white); } -::placeholder, -.ui.dropdown:not(.button) > .default.text, -.ui.default.dropdown:not(.button) > .text { +::placeholder { color: var(--color-placeholder-text) !important; opacity: 1 !important; } @@ -397,83 +395,6 @@ a.label, color: var(--color-text-light-2); } -.ui.dropdown .menu { - background: var(--color-menu); - border-color: var(--color-secondary); -} - -.ui.dropdown .menu > .header { - text-transform: none; /* reset fomantic's "uppercase" */ -} - -.ui.dropdown .menu > .header:not(.ui) { - color: var(--color-text); - font-size: 0.95em; /* reset fomantic's small font-size */ -} - -.ui.dropdown .menu > .item { - color: var(--color-text); - line-height: var(--line-height-default); -} - -.ui.dropdown .menu > .item:hover { - color: var(--color-text); - background: var(--color-hover); -} - -.ui.dropdown .menu > .item:active { - color: var(--color-text); - background: var(--color-active); -} - -.ui.dropdown .menu .active.item { - color: var(--color-text); - background: var(--color-active); - border-radius: 0; - font-weight: var(--font-weight-normal); -} - -/* fix misaligned images in webhook dropdown */ -.ui.dropdown .menu > .item > img { - margin-top: -0.25rem; - margin-bottom: -0.25rem; -} -.ui.dropdown .menu > .item > svg { - margin-right: .78rem; /* use the same margin as for */ -} - -.ui.selection.dropdown .menu > .item { - border-color: var(--color-secondary); -} -.ui.selection.dropdown .menu .item:first-of-type { - border-radius: 0; -} -.ui.selection.visible.dropdown > .text:not(.default) { - color: var(--color-text); -} - -.ui.dropdown.selected, -.ui.dropdown .menu .selected.item { - color: var(--color-text); - background: var(--color-hover); -} - -.ui.dropdown .menu > .message:not(.ui) { - color: var(--color-text-light-2); -} - -/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */ -.ui.dropdown > .text > .img { - margin-left: 0; - float: none; - margin-right: 0.78571429rem; -} - -.ui.dropdown > .text > .description, -.ui.dropdown .menu > .item > .description { - color: var(--color-text-light-2); -} - /* styles from removed fomantic transition module */ .hidden.transition { visibility: hidden; @@ -484,23 +405,6 @@ a.label, visibility: visible !important; } -.ui.selection.active.dropdown, -.ui.selection.active.dropdown:hover, -.ui.selection.active.dropdown .menu, -.ui.selection.active.dropdown:hover .menu { - border-color: var(--color-primary); -} - -.ui.pointing.dropdown > .menu:not(.hidden)::after { - background: var(--color-menu); - box-shadow: -1px -1px 0 0 var(--color-secondary); -} - -.ui.pointing.upward.dropdown .menu::after, -.ui.top.pointing.upward.dropdown .menu::after { - box-shadow: 1px 1px 0 0 var(--color-secondary); -} - .ui.comments .comment .metadata { color: var(--color-text-light-2); } @@ -553,20 +457,6 @@ img.ui.avatar, margin-top: calc(var(--page-spacing) - 1rem); } -/* popover box shadows */ -.ui.dropdown .menu, -.ui.upward.dropdown > .menu, -.ui.menu .dropdown.item .menu, -.ui.selection.active.dropdown .menu, -.ui.upward.selection.dropdown .menu, -.ui.selection.active.dropdown:hover .menu, -.ui.upward.active.selection.dropdown:hover .menu { - box-shadow: 0 6px 18px var(--color-shadow); -} -.ui.floating.dropdown .menu { - box-shadow: 0 6px 18px var(--color-shadow) !important; -} - .ui .message.flash-message { text-align: center; } @@ -618,27 +508,11 @@ img.ui.avatar, border: 1px solid; } -.ui.dropdown .menu.context-user-switch .scrolling.menu { - border-radius: 0 !important; - box-shadow: none !important; - border-bottom: 1px solid var(--color-secondary); - max-width: 80vw; -} - .user-menu > .item { width: 100%; border-radius: 0 !important; } -.scrolling.menu .item.selected { - font-weight: var(--font-weight-semibold) !important; -} - -.ui.dropdown .scrolling.menu { - border-color: var(--color-secondary); - border-radius: 0 0 var(--border-radius) var(--border-radius) !important; -} - .color-preview { display: inline-block; margin-left: 0.4em; @@ -914,22 +788,6 @@ table th[data-sortt-desc] .svg { margin-left: 0.25rem; } -.ui.dropdown .menu .item { - border-radius: 0; -} - -.ui.dropdown .menu .item:first-of-type { - border-radius: var(--border-radius) var(--border-radius) 0 0; -} - -.ui.dropdown .menu .item:last-of-type { - border-radius: 0 0 var(--border-radius) var(--border-radius); -} - -.ui.multiple.dropdown > .label { - box-shadow: 0 0 0 1px var(--color-secondary) inset; -} - /* for "image" emojis like ":git:" ":gitea:" and ":github:" (see CUSTOM_EMOJIS config option) */ .emoji img { border-width: 0 !important; @@ -978,54 +836,6 @@ table th[data-sortt-desc] .svg { min-height: 0; } -.ui.dropdown:not(.button) { - line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */ -} - -/* dropdown has some kinds of icons: -- "> .dropdown.icon": the arrow for opening the dropdown -- "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown -- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown -*/ - -.ui.dropdown.mini.button, -.ui.dropdown.tiny.button { - padding-right: 20px; -} -.ui.dropdown.button { - padding-right: 22px; -} -.ui.dropdown.large.button { - padding-right: 24px; -} - -/* Gitea uses SVG images instead of Fomantic builtin "" font icons, so we need to reset the icon styles */ -.ui.ui.dropdown > .icon.icon { - position: initial; /* plain dropdown and button dropdown use flex layout for icons */ - padding: 0; - margin: 0; - height: auto; -} - -.ui.ui.dropdown > .icon.icon:hover { - opacity: 1; -} - -.ui.ui.button.dropdown > .icon.icon, -.ui.ui.selection.dropdown > .icon.icon { - position: absolute; /* selection dropdown uses absolute layout for icons */ - top: 50%; - transform: translateY(-50%); -} - -.ui.ui.dropdown > .dropdown.icon { - right: 0.5em; -} - -.ui.ui.dropdown > .remove.icon { - right: 2em; -} - .btn, .ui.ui.dropdown, .flex-text-inline, @@ -1038,18 +848,6 @@ table th[data-sortt-desc] .svg { min-width: 0; /* make ellipsis work */ } -.ui.multiple.selection.dropdown { - flex-wrap: wrap; -} - -.ui.ui.dropdown.selection { - min-width: 14em; /* match the default min width */ -} - -.ui.dropdown .ui.label .svg { - vertical-align: middle; -} - .ui.ui.labeled.button { gap: 0; align-items: stretch; @@ -1066,44 +864,11 @@ table th[data-sortt-desc] .svg { min-width: 0; } -.ui.dropdown > .ui.button, .flex-text-block > .ui.button, .flex-text-inline > .ui.button { margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */ } -/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content -the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */ -.ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) { - display: flex !important; - align-items: center; - gap: var(--gap-block); - min-width: 0; -} -.ui.dropdown .menu.flex-items-menu > .item img, -.ui.dropdown .menu.flex-items-menu > .item svg { - margin: 0; /* use gap, but not margin */ -} - -.ui.dropdown.ellipsis-text-items { - /* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */ - padding-top: 0; - padding-bottom: 0; -} - -.ui.dropdown.ellipsis-text-items > .text { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - line-height: 2.71; /* matches fomantic dropdown's default min-height */ -} - -.ui.dropdown.ellipsis-text-items .menu > .item { - white-space: nowrap !important; - overflow: hidden !important; - text-overflow: ellipsis !important; -} - .svg.octicon-file-directory-fill, .svg.octicon-file-directory-open-fill, .svg.octicon-file-submodule { diff --git a/web_src/css/index.css b/web_src/css/index.css index 699ba221ca..3edb3df6c1 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -20,6 +20,7 @@ @import "./modules/modal.css"; @import "./modules/tab.css"; @import "./modules/form.css"; +@import "./modules/dropdown.css"; @import "./modules/shortcut.css"; @import "./modules/tippy.css"; diff --git a/web_src/css/modules/divider.css b/web_src/css/modules/divider.css index acc8408f37..a60b7d52cb 100644 --- a/web_src/css/modules/divider.css +++ b/web_src/css/modules/divider.css @@ -36,8 +36,3 @@ h4.divider { .divider.divider-text::after { margin-left: .75em; } - -.ui.dropdown .menu > .divider { - border-top: 1px solid var(--color-secondary); - margin: 4px 0; -} diff --git a/web_src/css/modules/dropdown.css b/web_src/css/modules/dropdown.css new file mode 100644 index 0000000000..2008ece2ed --- /dev/null +++ b/web_src/css/modules/dropdown.css @@ -0,0 +1,958 @@ +/* These are the remnants of the fomantic dropdown module */ + +.ui.dropdown { + cursor: pointer; + position: relative; + display: inline-block; + outline: none; + text-align: left; + user-select: none; + -webkit-tap-highlight-color: transparent; +} + +.ui.dropdown .menu { + cursor: auto; + position: absolute; + display: none; + outline: none; + top: 100%; + min-width: max-content; + margin: 0; + padding: 0; + background: var(--color-menu); + font-size: 1em; + text-align: left; + box-shadow: 0 6px 18px var(--color-shadow); + border: 1px solid var(--color-secondary); + border-radius: 0.28571429rem; + z-index: 11; + left: 0; +} + +.ui.dropdown .menu > * { + white-space: nowrap; +} + +.ui.dropdown > input:not(.search):first-child, +.ui.dropdown > select { + display: none !important; +} + +.ui.dropdown > .dropdown.icon { + line-height: 1; + height: 1em; + width: auto; + backface-visibility: hidden; + text-align: center; +} + +.ui.dropdown:not(.labeled) > .dropdown.icon { + position: relative; + width: auto; + font-size: 0.85714286em; + margin: 0 0 0 1em; +} + +.ui.dropdown > .text { + display: inline-block; +} + +.ui.dropdown .menu > .item { + position: relative; + cursor: pointer; + display: block; + border: none; + height: auto; + min-height: 2.57142857rem; + text-align: left; + border-top: none; + line-height: var(--line-height-default); + font-size: 1rem; + color: var(--color-text); + padding: 0.78571429rem 1.14285714rem !important; + text-transform: none; + font-weight: var(--font-weight-normal); + box-shadow: none; + -webkit-touch-callout: none; +} + +.ui.dropdown .menu > .item:first-child { + border-top-width: 0; +} + +.ui.dropdown .menu > .header { + margin: 1rem 0 0.75rem; + padding: 0 1.14285714rem; + font-weight: var(--font-weight-medium); + text-transform: none; +} + +.ui.dropdown .menu > .header:not(.ui) { + color: var(--color-text); + font-size: 0.95em; +} + +.ui.dropdown .menu > .divider { + border-top: 1px solid var(--color-secondary); + height: 0; + margin: 4px 0; +} + +.ui.dropdown.dropdown .menu > .input { + width: auto; + display: flex; + margin: 1.14285714rem 0.78571429rem; + min-width: 10rem; +} + +.ui.dropdown .menu > .header + .input { + margin-top: 0; +} + +.ui.dropdown .menu > .input:not(.transparent) input { + padding: 0.5em 1em; +} + +.ui.dropdown .menu > .input:not(.transparent) .button, +.ui.dropdown .menu > .input:not(.transparent) i.icon, +.ui.dropdown .menu > .input:not(.transparent) .label { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +.ui.dropdown > .text > .description, +.ui.dropdown .menu > .item > .description { + float: right; + margin: 0 0 0 1em; + color: var(--color-text-light-2); +} + +.ui.dropdown .menu > .message { + padding: 0.78571429rem 1.14285714rem; + font-weight: var(--font-weight-normal); +} + +.ui.dropdown .menu > .message:not(.ui) { + color: var(--color-text-light-2); +} + +/* 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:not(.left), +.ui.menu .right.dropdown.item > .menu:not(.left), +.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) { + left: auto; + right: 0; +} + +.ui.button.dropdown .menu { + min-width: 100%; +} + +select.ui.dropdown { + height: 38px; + padding: 0.5em; + border: 1px solid var(--color-input-border); + visibility: visible; +} + +.ui.selection.dropdown { + cursor: pointer; + overflow-wrap: break-word; + line-height: 1em; + white-space: normal; + outline: 0; + transform: rotateZ(0deg); + min-width: 14em; + min-height: 2.71428571em; + background: var(--color-input-background); + display: inline-block; + padding: 0.78571429em 3.2em 0.78571429em 1em; + color: var(--color-input-text); + box-shadow: none; + border: 1px solid var(--color-input-border); + border-radius: 0.28571429rem; +} + +.ui.selection.dropdown.visible, +.ui.selection.dropdown.active { + z-index: 10; +} + +.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; +} + +.ui.selection.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; + border-top-width: 0 !important; + outline: none; + margin: 0 -1px; + min-width: calc(100% + 2px); + width: calc(100% + 2px); + border-radius: 0 0 0.28571429rem 0.28571429rem; + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.selection.dropdown .menu::after, +.ui.selection.dropdown .menu::before { + display: none; +} + +.ui.selection.dropdown .menu > .message { + padding: 0.78571429rem 1.14285714rem; +} + +@media only screen and (max-width: 767.98px) { + .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; + } +} + +.ui.selection.dropdown .menu > .item { + border-top: 1px solid var(--color-secondary); + padding: 0.78571429rem 1.14285714rem !important; + white-space: normal; + overflow-wrap: normal; +} + +.ui.selection.dropdown .menu .item:first-of-type { + border-radius: 0; +} + +.ui.selection.dropdown .menu > .hidden.addition.item { + display: none; +} + +.ui.selection.dropdown:hover { + border-color: var(--color-input-border-hover); + box-shadow: none; +} + +.ui.selection.active.dropdown { + border-color: var(--color-primary); + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.selection.active.dropdown .menu { + border-color: var(--color-primary); + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.selection.dropdown:focus { + border-color: var(--color-primary); + box-shadow: none; +} + +.ui.selection.dropdown:focus .menu { + border-color: var(--color-primary); + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.selection.visible.dropdown > .text:not(.default) { + font-weight: var(--font-weight-normal); + color: var(--color-text); +} + +.ui.selection.active.dropdown:hover { + border-color: var(--color-primary); + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.selection.active.dropdown:hover .menu { + border-color: var(--color-primary); + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.active.selection.dropdown > .dropdown.icon, +.ui.visible.selection.dropdown > .dropdown.icon { + z-index: 3; +} + +.ui.active.selection.dropdown { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.ui.active.empty.selection.dropdown { + border-radius: 0.28571429rem !important; + box-shadow: none !important; +} + +.ui.active.empty.selection.dropdown .menu { + border: none !important; + box-shadow: none !important; +} + +.ui.search.dropdown > input.search { + background: none transparent !important; + border: none !important; + box-shadow: none !important; + cursor: text; + top: 0; + left: 1px; + width: 100%; + outline: none; + -webkit-tap-highlight-color: transparent; + padding: inherit; + position: absolute; + z-index: 2; +} + +.ui.search.dropdown > .text { + cursor: text; + position: relative; + left: 1px; + z-index: auto; +} + +.ui.search.selection.dropdown > input.search { + line-height: 1.21428571em; + padding: 0.67857143em 3.2em 0.67857143em 1em; +} + +.ui.search.selection.dropdown > span.sizer { + line-height: 1.21428571em; + padding: 0.67857143em 3.2em 0.67857143em 1em; + display: none; + white-space: pre; +} + +.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; +} + +.ui.active.search.dropdown input.search:focus + .text i.icon { + opacity: var(--opacity-disabled); +} + +.ui.active.search.dropdown input.search:focus + .text { + color: var(--color-placeholder-text) !important; +} + +.ui.search.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; +} + +@media only screen and (max-width: 767.98px) { + .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; + } +} + +.ui.dropdown > .remove.icon { + cursor: pointer; + font-size: 0.85714286em; + margin: -0.78571429em; + padding: 0.91666667em; + right: 3em; + top: 0.78571429em; + position: absolute; + opacity: 0.6; + z-index: 3; +} + +.ui.clearable.dropdown .text, +.ui.clearable.dropdown a:last-of-type { + margin-right: 1.5em; +} + +.ui.dropdown select.noselection ~ .remove.icon, +.ui.dropdown input[value=""] ~ .remove.icon, +.ui.dropdown input:not([value]) ~ .remove.icon, +.ui.dropdown.loading > .remove.icon { + display: none; +} + +.ui.ui.multiple.dropdown { + padding: 0.22619048em 3.2em 0.22619048em 0.35714286em; +} + +.ui.multiple.dropdown .menu { + cursor: auto; +} + +.ui.multiple.dropdown > .label { + display: inline-block; + white-space: normal; + font-size: 1em; + padding: 0.35714286em 0.78571429em; + margin: 0.14285714rem 0.28571429rem 0.14285714rem 0; + box-shadow: 0 0 0 1px var(--color-secondary) inset; +} + +/* Text */ +.ui.multiple.dropdown > .text { + position: static; + padding: 0; + max-width: 100%; + margin: 0.45238095em 0 0.45238095em 0.64285714em; + line-height: 1.21428571em; +} + +.ui.multiple.dropdown > .text.default { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.ui.multiple.dropdown > .label ~ input.search { + margin-left: 0.14285714em !important; +} + +.ui.multiple.dropdown > .label ~ .text { + display: none; +} + +.ui.multiple.search.dropdown, +.ui.multiple.search.dropdown > input.search { + cursor: text; +} + +.ui.multiple.search.dropdown > .text { + display: inline-block; + position: absolute; + top: 0; + left: 0; + padding: inherit; + margin: 0.45238095em 0 0.45238095em 0.64285714em; + line-height: 1.21428571em; +} + +.ui.multiple.search.dropdown > .label ~ .text { + display: none; +} + +.ui.multiple.search.dropdown > input.search { + position: static; + padding: 0; + max-width: 100%; + margin: 0.45238095em 0 0.45238095em 0.64285714em; + width: 2.2em; + line-height: 1.21428571em; +} + +.ui.dropdown .menu .active.item { + background: var(--color-active); + font-weight: var(--font-weight-normal); + color: var(--color-text); + box-shadow: none; + z-index: 12; + border-radius: 0; +} + +.ui.dropdown .menu > .item:hover { + background: var(--color-hover); + color: var(--color-text); + z-index: 13; +} + +.ui.dropdown .menu > .item:active { + color: var(--color-text); + background: var(--color-active); +} + +.ui.dropdown:not(.button) > .default.text, +.ui.default.dropdown:not(.button) > .text { + color: var(--color-placeholder-text); +} + +.ui.dropdown:not(.button) > input:focus ~ .default.text, +.ui.default.dropdown:not(.button) > input:focus ~ .text { + color: var(--color-placeholder-text); +} + +.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 0 0 -0.64285714em; + width: 1.28571429em; + height: 1.28571429em; + border-radius: 500rem; + border: 0.2em solid var(--color-secondary); +} + +.ui.loading.dropdown > i.icon::after { + position: absolute; + content: ""; + top: 50%; + left: 50%; + box-shadow: 0 0 0 1px transparent; + margin: -0.64285714em 0 0 -0.64285714em; + width: 1.28571429em; + height: 1.28571429em; + animation: loader 0.6s infinite linear; + border: 0.2em solid var(--color-text-light-2); + border-radius: 500rem; +} + +.ui.dropdown .loading.menu { + display: block; + visibility: hidden; + z-index: -1; +} + +.ui.dropdown > .loading.menu { + left: 0 !important; + right: auto !important; +} + +.ui.dropdown > .menu .loading.menu { + left: 100% !important; + right: auto !important; +} + +.ui.dropdown.selected, +.ui.dropdown .menu .selected.item { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.dropdown > .filtered.text { + visibility: hidden; +} + +.ui.dropdown .filtered.item { + display: none !important; +} + +.ui.disabled.dropdown, +.ui.dropdown .menu > .disabled.item { + cursor: default; + pointer-events: none; + opacity: var(--opacity-disabled); +} + +.ui.dropdown > .left.menu { + left: auto !important; + right: 0 !important; +} + +.ui.upward.dropdown > .menu { + top: auto; + bottom: 100%; + box-shadow: 0 6px 18px var(--color-shadow); + border-radius: 0.28571429rem 0.28571429rem 0 0; +} + +.ui.dropdown .upward.menu { + top: auto !important; + bottom: 0 !important; +} + +.ui.upward.selection.dropdown .menu { + border-top-width: 1px !important; + border-bottom-width: 0 !important; + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.upward.selection.dropdown:hover { + box-shadow: 0 0 2px 0 var(--color-shadow); +} + +.ui.active.upward.selection.dropdown { + border-radius: 0 0 0.28571429rem 0.28571429rem !important; +} + +.ui.upward.selection.dropdown.visible { + box-shadow: 0 0 3px 0 var(--color-shadow); + border-radius: 0 0 0.28571429rem 0.28571429rem !important; +} + +.ui.upward.active.selection.dropdown:hover { + box-shadow: 0 0 3px 0 var(--color-shadow); +} + +.ui.upward.active.selection.dropdown:hover .menu { + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.scrolling.dropdown .menu, +.ui.dropdown .scrolling.menu { + overflow-x: hidden; + overflow-y: auto; +} + +.ui.scrolling.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + 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; + box-shadow: none !important; + margin: 0 !important; + min-width: 100% !important; + width: auto !important; + border-top: 1px solid var(--color-secondary); + border-color: var(--color-secondary); + border-radius: 0 0 var(--border-radius) var(--border-radius) !important; +} + +.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; +} + +@media only screen and (max-width: 767.98px) { + .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; + } +} + +.ui.fluid.dropdown { + display: block; + width: 100% !important; + min-width: 0; +} + +.ui.fluid.dropdown > .dropdown.icon { + float: right; +} + +.ui.floating.dropdown .menu { + left: 0; + right: auto; + box-shadow: 0 6px 18px var(--color-shadow) !important; + border-radius: 0.28571429rem !important; +} + +.ui.floating.dropdown > .menu { + border-radius: 0.28571429rem !important; +} + +.ui:not(.upward).floating.dropdown > .menu { + margin-top: 0.5em; +} + +.ui.upward.floating.dropdown > .menu { + margin-bottom: 0.5em; +} + +.ui.pointing.dropdown > .menu { + top: 100%; + margin-top: 0.78571429rem; + border-radius: 0.28571429rem; +} + +.ui.pointing.dropdown > .menu:not(.hidden)::after { + display: block; + position: absolute; + pointer-events: none; + content: ""; + visibility: visible; + transform: rotate(45deg); + width: 0.5em; + height: 0.5em; + box-shadow: -1px -1px 0 0 var(--color-secondary); + background: var(--color-menu); + z-index: 2; + top: -0.25em; + left: 50%; + margin: 0 0 0 -0.25em; +} + +.ui.top.right.pointing.dropdown > .menu { + inset: 100% 0 auto auto; + margin: 1em 0 0; +} + +.ui.top.pointing.dropdown > .left.menu::after, +.ui.top.right.pointing.dropdown > .menu::after { + top: -0.25em; + left: auto !important; + right: 1em !important; + margin: 0; + transform: rotate(45deg); +} + +.ui.dropdown, +.ui.dropdown .menu > .item { + font-size: 1rem; +} + +.ui.mini.dropdown, +.ui.mini.dropdown .menu > .item { + font-size: 0.78571429rem; +} + +.ui.tiny.dropdown, +.ui.tiny.dropdown .menu > .item { + font-size: 0.85714286rem; +} + +.ui.small.dropdown, +.ui.small.dropdown .menu > .item { + font-size: 0.92857143rem; +} + +/* This rule must come AFTER .ui.selection.dropdown because both have + specificity (0,3,0) and source order determines the winner. + In the original codebase this was in base.css which loaded after fomantic. */ +.ui.dropdown:not(.button) { + line-height: var(--line-height-default); +} + +/* Icons / Flags / Labels / Image */ +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + margin-left: 0; + float: none; + margin-right: 0.78571429rem; +} + +.ui.dropdown .menu > .item > svg { + margin-right: 0.78rem; +} + +/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */ +.ui.dropdown > .text > .img { + margin-left: 0; + float: none; + margin-right: 0.78571429rem; +} + +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image:not(.icon), +.ui.dropdown .menu > .item > .image:not(.icon), +.ui.dropdown .menu > .item > img { + display: inline-block; + vertical-align: top; + width: auto; + margin-top: -0.25rem; + margin-bottom: -0.25rem; + max-height: 2em; +} + +.ui.dropdown .menu .item { + border-radius: 0; +} + +.ui.dropdown .menu .item:first-of-type { + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.ui.dropdown .menu .item:last-of-type { + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +/* Gitea uses SVG images instead of Fomantic builtin "" font icons, so we need to reset the icon styles */ +.ui.ui.dropdown > .icon.icon { + position: initial; + padding: 0; + margin: 0; + height: auto; +} + +.ui.ui.dropdown > .icon.icon:hover { + opacity: 1; +} + +.ui.ui.button.dropdown > .icon.icon, +.ui.ui.selection.dropdown > .icon.icon { + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.ui.ui.dropdown > .dropdown.icon { + right: 0.5em; +} + +.ui.ui.dropdown > .remove.icon { + right: 2em; +} + +.ui.dropdown.mini.button, +.ui.dropdown.tiny.button { + padding-right: 20px; +} + +.ui.dropdown.button { + padding-right: 22px; +} + +.ui.multiple.selection.dropdown { + flex-wrap: wrap; +} + +.ui.ui.dropdown.selection { + min-width: 14em; +} + +.ui.dropdown .ui.label .svg { + vertical-align: middle; +} + +.ui.dropdown > .ui.button { + margin: 0; +} + +/* popover box shadow for menu dropdown */ +.ui.menu .dropdown.item .menu { + box-shadow: 0 6px 18px var(--color-shadow); +} + +.ui.dropdown .menu.context-user-switch .scrolling.menu { + border-radius: 0 !important; + box-shadow: none !important; + border-bottom: 1px solid var(--color-secondary); + max-width: 80vw; +} + +.scrolling.menu .item.selected { + font-weight: var(--font-weight-semibold) !important; +} + +/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content +the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */ +.ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) { + display: flex !important; + align-items: center; + gap: var(--gap-block); + min-width: 0; +} + +.ui.dropdown .menu.flex-items-menu > .item img, +.ui.dropdown .menu.flex-items-menu > .item svg { + margin: 0; +} + +.ui.dropdown.ellipsis-text-items { + /* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */ + padding-top: 0; + padding-bottom: 0; +} + +.ui.dropdown.ellipsis-text-items > .text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + line-height: 2.71; +} + +.ui.dropdown.ellipsis-text-items .menu > .item { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} diff --git a/web_src/fomantic/build/components/dropdown.css b/web_src/fomantic/build/components/dropdown.css deleted file mode 100644 index b7b35a2f05..0000000000 --- a/web_src/fomantic/build/components/dropdown.css +++ /dev/null @@ -1,1755 +0,0 @@ -/*! - * # Fomantic-UI - Dropdown - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Dropdown -*******************************/ - -.ui.dropdown { - cursor: pointer; - position: relative; - display: inline-block; - outline: none; - text-align: left; - transition: box-shadow 0.1s ease, width 0.1s ease; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - - -/******************************* - Content -*******************************/ - - -/*-------------- - Menu ----------------*/ - -.ui.dropdown .menu { - cursor: auto; - position: absolute; - display: none; - outline: none; - top: 100%; - min-width: -moz-max-content; - min-width: max-content; - margin: 0; - padding: 0 0; - background: #FFFFFF; - font-size: 1em; - text-shadow: none; - text-align: left; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); - 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:not(.labeled) > .dropdown.icon { - position: relative; - width: auto; - font-size: 0.85714286em; - margin: 0 0 0 1em; -} -.ui.dropdown .menu > .item .dropdown.icon { - width: auto; - float: right; - margin: 0em 0 0 1em; -} -.ui.dropdown .menu > .item .dropdown.icon + .text { - margin-right: 1em; -} - -/*-------------- - Text ----------------*/ - -.ui.dropdown > .text { - display: inline-block; - transition: none; -} - -/*-------------- - Menu Item ----------------*/ - -.ui.dropdown .menu > .item { - position: relative; - cursor: pointer; - display: block; - border: none; - height: auto; - min-height: 2.57142857rem; - text-align: left; - border-top: none; - line-height: 1em; - font-size: 1rem; - color: rgba(0, 0, 0, 0.87); - padding: 0.78571429rem 1.14285714rem !important; - text-transform: none; - font-weight: normal; - box-shadow: none; - -webkit-touch-callout: none; -} -.ui.dropdown .menu > .item:first-child { - border-top-width: 0; -} -.ui.dropdown .menu > .item.vertical { - display: flex; - flex-direction: column-reverse; -} - -/*-------------- - Floated Content ----------------*/ - -.ui.dropdown > .text > [class*="right floated"], -.ui.dropdown .menu .item > [class*="right floated"] { - float: right !important; - margin-right: 0 !important; - margin-left: 1em !important; -} -.ui.dropdown > .text > [class*="left floated"], -.ui.dropdown .menu .item > [class*="left floated"] { - float: left !important; - margin-left: 0 !important; - margin-right: 1em !important; -} -.ui.dropdown .menu .item > i.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 0 0.75rem; - padding: 0 1.14285714rem; - font-weight: 500; - text-transform: uppercase; -} -.ui.dropdown .menu > .header:not(.ui) { - color: rgba(0, 0, 0, 0.85); - font-size: 0.78571429em; -} -.ui.dropdown .menu > .divider { - border-top: 1px solid rgba(34, 36, 38, 0.1); - height: 0; - margin: 0.5em 0; -} -.ui.dropdown .menu > .horizontal.divider { - border-top: none; -} -.ui.dropdown.dropdown .menu > .input { - width: auto; - display: flex; - margin: 1.14285714rem 0.78571429rem; - min-width: 10rem; -} -.ui.dropdown .menu > .header + .input { - margin-top: 0; -} -.ui.dropdown .menu > .input:not(.transparent) input { - padding: 0.5em 1em; -} -.ui.dropdown .menu > .input:not(.transparent) .button, -.ui.dropdown .menu > .input:not(.transparent) i.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: 0 0 0 1em; - color: rgba(0, 0, 0, 0.4); -} -.ui.dropdown .menu > .item.vertical > .description { - margin: 0; -} - -/*----------------- - Item Text --------------------*/ - -.ui.dropdown .menu > .item.vertical > .text { - margin-bottom: 0.25em; -} - -/*----------------- - 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; - left: 100%; - right: auto; - margin: 0 -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 > i.icon, -.ui.dropdown > .text > .label, -.ui.dropdown > .text > .flag, -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image { - margin-top: 0em; -} -.ui.dropdown .menu > .item > i.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 > i.icon, -.ui.dropdown > .text > .label, -.ui.dropdown > .text > .flag, -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image, -.ui.dropdown .menu > .item > i.icon, -.ui.dropdown .menu > .item > .label, -.ui.dropdown .menu > .item > .flag, -.ui.dropdown .menu > .item > .image, -.ui.dropdown .menu > .item > img { - margin-left: 0; - float: none; - margin-right: 0.78571429rem; -} - -/*-------------- - Image ----------------*/ - -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image:not(.icon), -.ui.dropdown .menu > .item > .image:not(.icon), -.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:not(.left), -.ui.menu .right.dropdown.item > .menu:not(.left), -.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) { - left: auto; - right: 0; -} - -/*-------------- - Label - ---------------*/ - - -/* Dropdown Menu */ -.ui.label.dropdown .menu { - min-width: 100%; -} - -/*-------------- - Button - ---------------*/ - - -/* No Margin On Icon Button */ -.ui.dropdown.icon.button > .dropdown.icon { - margin: 0; -} -.ui.button.dropdown .menu { - min-width: 100%; -} - - -/******************************* - Types -*******************************/ - -select.ui.dropdown { - height: 38px; - padding: 0.5em; - border: 1px solid rgba(34, 36, 38, 0.15); - visibility: visible; -} - -/*-------------- - Selection - ---------------*/ - - -/* Displays like a select box */ -.ui.selection.dropdown { - cursor: pointer; - word-wrap: break-word; - line-height: 1em; - white-space: normal; - outline: 0; - transform: rotateZ(0deg); - min-width: 14em; - min-height: 2.71428571em; - background: #FFFFFF; - display: inline-block; - padding: 0.78571429em 3.2em 0.78571429em 1em; - color: rgba(0, 0, 0, 0.87); - box-shadow: none; - border: 1px solid rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; - transition: box-shadow 0.1s ease, width 0.1s ease; -} -.ui.selection.dropdown.visible, -.ui.selection.dropdown.active { - z-index: 10; -} -.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; - transition: opacity 0.1s ease; -} - -/* Compact */ -.ui.compact.selection.dropdown { - min-width: 0; -} - -/* Selection Menu */ -.ui.selection.dropdown .menu { - overflow-x: hidden; - overflow-y: auto; - backface-visibility: hidden; - -webkit-overflow-scrolling: touch; - border-top-width: 0 !important; - width: auto; - outline: none; - margin: 0 -1px; - min-width: calc(100% + 2px); - width: calc(100% + 2px); - border-radius: 0 0 0.28571429rem 0.28571429rem; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); - 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: 767.98px) { - .ui.selection.dropdown.short .menu { - max-height: 6.01071429rem; - } - .ui.selection.dropdown[class*="very short"] .menu { - max-height: 4.00714286rem; - } - .ui.selection.dropdown .menu { - max-height: 8.01428571rem; - } - .ui.selection.dropdown.long .menu { - max-height: 16.02857143rem; - } - .ui.selection.dropdown[class*="very long"] .menu { - max-height: 24.04285714rem; - } -} -@media only screen and (min-width: 768px) { - .ui.selection.dropdown.short .menu { - max-height: 8.01428571rem; - } - .ui.selection.dropdown[class*="very short"] .menu { - max-height: 5.34285714rem; - } - .ui.selection.dropdown .menu { - max-height: 10.68571429rem; - } - .ui.selection.dropdown.long .menu { - max-height: 21.37142857rem; - } - .ui.selection.dropdown[class*="very long"] .menu { - max-height: 32.05714286rem; - } -} -@media only screen and (min-width: 992px) { - .ui.selection.dropdown.short .menu { - max-height: 12.02142857rem; - } - .ui.selection.dropdown[class*="very short"] .menu { - max-height: 8.01428571rem; - } - .ui.selection.dropdown .menu { - max-height: 16.02857143rem; - } - .ui.selection.dropdown.long .menu { - max-height: 32.05714286rem; - } - .ui.selection.dropdown[class*="very long"] .menu { - max-height: 48.08571429rem; - } -} -@media only screen and (min-width: 1920px) { - .ui.selection.dropdown.short .menu { - max-height: 16.02857143rem; - } - .ui.selection.dropdown[class*="very short"] .menu { - max-height: 10.68571429rem; - } - .ui.selection.dropdown .menu { - max-height: 21.37142857rem; - } - .ui.selection.dropdown.long .menu { - max-height: 42.74285714rem; - } - .ui.selection.dropdown[class*="very long"] .menu { - max-height: 64.11428571rem; - } -} - -/* 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); - box-shadow: none; -} - -/* Active */ -.ui.selection.active.dropdown { - border-color: #96C8DA; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); -} -.ui.selection.active.dropdown .menu { - border-color: #96C8DA; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); -} - -/* Focus */ -.ui.selection.dropdown:focus { - border-color: #96C8DA; - box-shadow: none; -} -.ui.selection.dropdown:focus .menu { - border-color: #96C8DA; - box-shadow: 0 2px 3px 0 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; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); -} -.ui.selection.active.dropdown:hover .menu { - border-color: #96C8DA; - box-shadow: 0 2px 3px 0 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: 0 !important; - border-bottom-right-radius: 0 !important; -} - -/* Empty Connecting Border */ -.ui.active.empty.selection.dropdown { - border-radius: 0.28571429rem !important; - box-shadow: none !important; -} -.ui.active.empty.selection.dropdown .menu { - border: none !important; - box-shadow: none !important; -} - -/* CSS specific to iOS devices or firefox mobile only */ -@supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) { - @media (-moz-touch-enabled), (pointer: coarse) { - .ui.dropdown .scrollhint.menu:not(.hidden):before { - animation: scrollhint 2s ease 2; - content: ''; - z-index: 15; - display: block; - position: absolute; - opacity: 0; - right: 0.25em; - top: 0; - height: 100%; - border-right: 0.25em solid; - border-left: 0; - -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%; - border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%; - } - .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before { - -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%; - border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%; - } - @keyframes scrollhint { - 0% { - opacity: 1; - top: 100%; - } - 100% { - opacity: 0; - top: 0; - } - } - } -} - -/*-------------- - Searchable - ---------------*/ - - -/* Search Selection */ -.ui.search.dropdown { - min-width: ''; -} - -/* Search Dropdown */ -.ui.search.dropdown > input.search { - background: none transparent !important; - border: none !important; - box-shadow: none !important; - cursor: text; - top: 0; - 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: auto; -} - -/* Search Selection */ -.ui.search.selection.dropdown > input.search { - line-height: 1.21428571em; - padding: 0.67857143em 3.2em 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 3.2em 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 i.icon, -.ui.active.search.dropdown input.search:focus + .text .flag { - opacity: var(--opacity-disabled); -} -.ui.active.search.dropdown input.search:focus + .text { - color: rgba(115, 115, 115, 0.87) !important; -} -.ui.search.dropdown.button > span.sizer { - display: none; -} - -/* Search Menu */ -.ui.search.dropdown .menu { - overflow-x: hidden; - overflow-y: auto; - backface-visibility: hidden; - -webkit-overflow-scrolling: touch; -} -@media only screen and (max-width: 767.98px) { - .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; - } -} - -/* Clearable Selection */ -.ui.dropdown > .remove.icon { - cursor: pointer; - font-size: 0.85714286em; - margin: -0.78571429em; - padding: 0.91666667em; - right: 3em; - top: 0.78571429em; - position: absolute; - opacity: 0.6; - z-index: 3; -} -.ui.clearable.dropdown .text, -.ui.clearable.dropdown a:last-of-type { - margin-right: 1.5em; -} -.ui.dropdown select.noselection ~ .remove.icon, -.ui.dropdown input[value=''] ~ .remove.icon, -.ui.dropdown input:not([value]) ~ .remove.icon, -.ui.dropdown.loading > .remove.icon { - display: none; -} - -/*-------------- - Multiple - ---------------*/ - - -/* Multiple Selection */ -.ui.ui.multiple.dropdown { - padding: 0.22619048em 3.2em 0.22619048em 0.35714286em; -} -.ui.multiple.dropdown .menu { - cursor: auto; -} - -/* Selection Label */ -.ui.multiple.dropdown > .label { - display: inline-block; - white-space: normal; - font-size: 1em; - padding: 0.35714286em 0.78571429em; - margin: 0.14285714rem 0.28571429rem 0.14285714rem 0; - box-shadow: 0 0 0 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 0 0.45238095em 0.64285714em; - line-height: 1.21428571em; -} -.ui.multiple.dropdown > .text.default { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.ui.multiple.dropdown > .label ~ input.search { - margin-left: 0.14285714em !important; -} -.ui.multiple.dropdown > .label ~ .text { - display: none; -} -.ui.multiple.dropdown > .label:not(.image) > img:not(.centered) { - margin-right: 0.78571429rem; -} -.ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) { - margin-bottom: 0.39285714rem; -} -.ui.multiple.dropdown > .image.label img { - margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em; - height: 1.71428571em; -} - -/*----------------- - Multiple Search - -----------------*/ - - -/* Multiple Search Selection */ -.ui.multiple.search.dropdown, -.ui.multiple.search.dropdown > input.search { - cursor: text; -} - -/* Prompt Text */ -.ui.multiple.search.dropdown > .text { - display: inline-block; - position: absolute; - top: 0; - left: 0; - padding: inherit; - margin: 0.45238095em 0 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 0 0.45238095em 0.64285714em; - width: 2.2em; - line-height: 1.21428571em; -} -.ui.multiple.search.dropdown.button { - min-width: 14em; -} - -/*-------------- - Inline - ---------------*/ - -.ui.inline.dropdown { - cursor: pointer; - display: inline-block; - color: inherit; -} -.ui.inline.dropdown .dropdown.icon { - margin: 0 0.21428571em 0 0.21428571em; - vertical-align: baseline; -} -.ui.inline.dropdown > .text { - font-weight: 500; -} -.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: 500; - color: rgba(0, 0, 0, 0.95); - 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; -} - -/*-------------------- - 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 > 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 0 0 -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%; - box-shadow: 0 0 0 1px transparent; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; -} - -/* Coupling */ -.ui.loading.dropdown.button > i.icon:before, -.ui.loading.dropdown.button > i.icon:after { - display: none; -} -.ui.loading.dropdown > .text { - transition: none; -} - -/* Used To Check Position */ -.ui.dropdown .loading.menu { - display: block; - visibility: hidden; - z-index: -1; -} -.ui.dropdown > .loading.menu { - left: 0 !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; -} - -/*-------------------- - States - ----------------------*/ - -.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.multiple.selection.error.dropdown > .label { - border-color: #E0B4B4; -} -.ui.dropdown.error > .menu, -.ui.dropdown.error > .menu .menu { - border-color: #E0B4B4; -} -.ui.dropdown.error > .menu > .item { - color: #9F3A38; -} - -/* Item Hover */ -.ui.dropdown.error > .menu > .item:hover { - background-color: #FBE7E7; -} - -/* Item Active */ -.ui.dropdown.error > .menu .active.item { - background-color: #FDCFCF; -} -.ui.dropdown.info, -.ui.dropdown.info > .text, -.ui.dropdown.info > .default.text { - color: #276F86; -} -.ui.selection.dropdown.info { - background: #F8FFFF; - border-color: #A9D5DE; -} -.ui.selection.dropdown.info:hover { - border-color: #A9D5DE; -} -.ui.multiple.selection.info.dropdown > .label { - border-color: #A9D5DE; -} -.ui.dropdown.info > .menu, -.ui.dropdown.info > .menu .menu { - border-color: #A9D5DE; -} -.ui.dropdown.info > .menu > .item { - color: #276F86; -} - -/* Item Hover */ -.ui.dropdown.info > .menu > .item:hover { - background-color: #e9f2fb; -} - -/* Item Active */ -.ui.dropdown.info > .menu .active.item { - background-color: #cef1fd; -} -.ui.dropdown.success, -.ui.dropdown.success > .text, -.ui.dropdown.success > .default.text { - color: #2C662D; -} -.ui.selection.dropdown.success { - background: #FCFFF5; - border-color: #A3C293; -} -.ui.selection.dropdown.success:hover { - border-color: #A3C293; -} -.ui.multiple.selection.success.dropdown > .label { - border-color: #A3C293; -} -.ui.dropdown.success > .menu, -.ui.dropdown.success > .menu .menu { - border-color: #A3C293; -} -.ui.dropdown.success > .menu > .item { - color: #2C662D; -} - -/* Item Hover */ -.ui.dropdown.success > .menu > .item:hover { - background-color: #e9fbe9; -} - -/* Item Active */ -.ui.dropdown.success > .menu .active.item { - background-color: #dafdce; -} -.ui.dropdown.warning, -.ui.dropdown.warning > .text, -.ui.dropdown.warning > .default.text { - color: #573A08; -} -.ui.selection.dropdown.warning { - background: #FFFAF3; - border-color: #C9BA9B; -} -.ui.selection.dropdown.warning:hover { - border-color: #C9BA9B; -} -.ui.multiple.selection.warning.dropdown > .label { - border-color: #C9BA9B; -} -.ui.dropdown.warning > .menu, -.ui.dropdown.warning > .menu .menu { - border-color: #C9BA9B; -} -.ui.dropdown.warning > .menu > .item { - color: #573A08; -} - -/* Item Hover */ -.ui.dropdown.warning > .menu > .item:hover { - background-color: #fbfbe9; -} - -/* Item Active */ -.ui.dropdown.warning > .menu .active.item { - background-color: #fdfdce; -} - -/*-------------------- - Clear -----------------------*/ - -.ui.dropdown > .clear.dropdown.icon { - opacity: 0.8; - 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: var(--opacity-disabled); -} - - -/******************************* - Variations -*******************************/ - - -/*-------------- - Direction ----------------*/ - - -/* Flyout Direction */ -.ui.dropdown .menu { - left: 0; -} - -/* 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: 0 !important; -} -.ui.dropdown > .left.menu .menu, -.ui.dropdown .menu .left.menu { - left: auto; - right: 100%; - margin: 0 -0.5em 0 0 !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 0 0 0; -} -.ui.dropdown .item .left.dropdown.icon, -.ui.dropdown .left.menu .item .dropdown.icon { - width: auto; - float: left; - margin: 0em 0 0 0; -} -.ui.dropdown .item .left.dropdown.icon + .text, -.ui.dropdown .left.menu .item .dropdown.icon + .text { - margin-left: 1em; - margin-right: 0; -} - -/*-------------- - Upward - ---------------*/ - - -/* Upward Main Menu */ -.ui.upward.dropdown > .menu { - top: auto; - bottom: 100%; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -/* 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 0 0 !important; -} -.ui.upward.dropdown.button:not(.pointing):not(.floating).active { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -/* Selection */ -.ui.upward.selection.dropdown .menu { - border-top-width: 1px !important; - border-bottom-width: 0 !important; - box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); -} -.ui.upward.selection.dropdown:hover { - box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); -} - -/* Active Upward */ -.ui.active.upward.selection.dropdown { - border-radius: 0 0 0.28571429rem 0.28571429rem !important; -} - -/* Visible Upward */ -.ui.upward.selection.dropdown.visible { - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); - border-radius: 0 0 0.28571429rem 0.28571429rem !important; -} - -/* Visible Hover Upward */ -.ui.upward.active.selection.dropdown:hover { - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05); -} -.ui.upward.active.selection.dropdown:hover .menu { - box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); -} - -/*-------------- - Scrolling - ---------------*/ - - -/* 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; - 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; - 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: 767.98px) { - .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; - } -} - -/*-------------- - Columnar ----------------*/ - -.ui.column.dropdown > .menu { - flex-wrap: wrap; -} -.ui.dropdown[class*="two column"] > .menu > .item { - width: 50%; -} -.ui.dropdown[class*="three column"] > .menu > .item { - width: 33%; -} -.ui.dropdown[class*="four column"] > .menu > .item { - width: 25%; -} -.ui.dropdown[class*="five column"] > .menu > .item { - width: 20%; -} - -/*-------------- - Simple - ---------------*/ - - -/* Displays without javascript */ -.ui.simple.dropdown .menu:before, -.ui.simple.dropdown .menu:after { - display: none; -} -.ui.simple.dropdown .menu { - position: absolute; - -/* IE hack to make dropdown icons appear inline */ - display: -ms-inline-flexbox !important; - display: block; - overflow: hidden; - top: -9999px; - opacity: 0; - width: 0; - height: 0; - transition: opacity 0.1s ease; - margin-top: 0 !important; -} -.ui.simple.active.dropdown, -.ui.simple.dropdown:hover { - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} -.ui.simple.active.dropdown > .menu, -.ui.simple.dropdown:hover > .menu { - overflow: visible; - width: auto; - height: auto; - top: 100%; - opacity: 1; -} -.ui.simple.dropdown > .menu > .item:active > .menu, -.ui.simple.dropdown .menu .item:hover > .menu { - overflow: visible; - width: auto; - height: auto; - top: 0 !important; - left: 100%; - opacity: 1; -} -.ui.simple.dropdown > .menu > .item:active > .left.menu, -.ui.simple.dropdown .menu .item:hover > .left.menu, -.right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right), -.right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) { - left: auto; - right: 100%; -} -.ui.simple.disabled.dropdown:hover .menu { - display: none; - height: 0; - width: 0; - overflow: hidden; -} - -/* Visible */ -.ui.simple.visible.dropdown > .menu { - display: block; -} - -/* Scrolling */ -.ui.simple.scrolling.active.dropdown > .menu, -.ui.simple.scrolling.dropdown:hover > .menu { - overflow-x: hidden; - overflow-y: auto; -} - -/*-------------- - Fluid - ---------------*/ - -.ui.fluid.dropdown { - display: block; - width: 100% !important; - min-width: 0; -} -.ui.fluid.dropdown > .dropdown.icon { - float: right; -} - -/*-------------- - Floating - ---------------*/ - -.ui.floating.dropdown .menu { - left: 0; - right: auto; - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important; - border-radius: 0.28571429rem !important; -} -.ui.floating.dropdown > .menu { - border-radius: 0.28571429rem !important; -} -.ui:not(.upward).floating.dropdown > .menu { - margin-top: 0.5em; -} -.ui.upward.floating.dropdown > .menu { - margin-bottom: 0.5em; -} - -/*-------------- - Pointing - ---------------*/ - -.ui.pointing.dropdown > .menu { - top: 100%; - margin-top: 0.78571429rem; - border-radius: 0.28571429rem; -} -.ui.pointing.dropdown > .menu:not(.hidden):after { - display: block; - position: absolute; - pointer-events: none; - content: ''; - visibility: visible; - transform: rotate(45deg); - width: 0.5em; - height: 0.5em; - box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); - background: #FFFFFF; - z-index: 2; -} -.ui.pointing.dropdown > .menu:not(.hidden):after { - top: -0.25em; - left: 50%; - margin: 0 0 0 -0.25em; -} - -/* Top Left Pointing */ -.ui.top.left.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - left: 0; - right: auto; - margin: 1em 0 0; -} -.ui.top.left.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - left: 0; - right: auto; - margin: 1em 0 0; -} -.ui.top.left.pointing.dropdown > .menu:after { - top: -0.25em; - left: 1em; - right: auto; - margin: 0; - transform: rotate(45deg); -} - -/* Top Right Pointing */ -.ui.top.right.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - right: 0; - left: auto; - margin: 1em 0 0; -} -.ui.top.pointing.dropdown > .left.menu:after, -.ui.top.right.pointing.dropdown > .menu:after { - top: -0.25em; - left: auto !important; - right: 1em !important; - margin: 0; - transform: rotate(45deg); -} - -/* Left Pointing */ -.ui.left.pointing.dropdown > .menu { - top: 0; - left: 100%; - right: auto; - margin: 0 0 0 1em; -} -.ui.left.pointing.dropdown > .menu:after { - top: 1em; - left: -0.25em; - margin: 0 0 0 0; - transform: rotate(-45deg); -} -.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { - left: auto !important; - right: 100% !important; - margin: 0 1em 0 0; -} -.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after { - top: 1em; - left: auto; - right: -0.25em; - margin: 0 0 0 0; - transform: rotate(135deg); -} - -/* Right Pointing */ -.ui.right.pointing.dropdown > .menu { - top: 0; - left: auto; - right: 100%; - margin: 0 1em 0 0; -} -.ui.right.pointing.dropdown > .menu:after { - top: 1em; - left: auto; - right: -0.25em; - margin: 0 0 0 0; - transform: rotate(135deg); -} - -/* Bottom Pointing */ -.ui.bottom.pointing.dropdown > .menu { - top: auto; - bottom: 100%; - left: 0; - right: auto; - margin: 0 0 1em; -} -.ui.bottom.pointing.dropdown > .menu:after { - top: auto; - bottom: -0.25em; - right: auto; - margin: 0; - transform: rotate(-135deg); -} - -/* Reverse Sub-Menu Direction */ -.ui.bottom.pointing.dropdown > .menu .menu { - top: auto !important; - bottom: 0 !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: 0 0 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; - box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15); - margin: -0.25em 0 0; -} - -/* Right Pointing Upward */ -.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { - top: auto !important; - bottom: 0 !important; - margin: 0 1em 0 0; -} -.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { - top: auto !important; - bottom: 0 !important; - margin: 0 0 1em 0; - box-shadow: -1px -1px 0 0 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: 0 0 0 1em; -} -.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { - top: auto !important; - bottom: 0 !important; - margin: 0 0 1em 0; - box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); -} - -/*-------------------- - Sizes ----------------------*/ - -.ui.dropdown, -.ui.dropdown .menu > .item { - font-size: 1rem; -} -.ui.mini.dropdown, -.ui.mini.dropdown .menu > .item { - font-size: 0.78571429rem; -} -.ui.tiny.dropdown, -.ui.tiny.dropdown .menu > .item { - font-size: 0.85714286rem; -} -.ui.small.dropdown, -.ui.small.dropdown .menu > .item { - font-size: 0.92857143rem; -} -.ui.large.dropdown, -.ui.large.dropdown .menu > .item { - font-size: 1.14285714rem; -} -.ui.big.dropdown, -.ui.big.dropdown .menu > .item { - font-size: 1.28571429rem; -} -.ui.huge.dropdown, -.ui.huge.dropdown .menu > .item { - font-size: 1.42857143rem; -} -.ui.massive.dropdown, -.ui.massive.dropdown .menu > .item { - font-size: 1.71428571rem; -} - - -/******************************* - Theme Overrides -*******************************/ - - -/* Dropdown Carets */ -@font-face { - font-family: 'Dropdown'; - src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); - font-weight: normal; - font-style: normal; -} -.ui.dropdown > .dropdown.icon { - font-family: 'Dropdown'; - line-height: 1; - height: 1em; - width: 1.23em; - 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"*/; -} -/* Icons for Reference -.dropdown.down.icon { - content: "\f0d7"; -} -.dropdown.up.icon { - content: "\f0d8"; -} -.dropdown.left.icon { - content: "\f0d9"; -} -.dropdown.icon.icon { - content: "\f0da"; -} -*/ - - -/******************************* - User Overrides -*******************************/ - diff --git a/web_src/fomantic/build/components/dropdown.js b/web_src/fomantic/build/components/dropdown.js index 47d815490d..b8f066db74 100644 --- a/web_src/fomantic/build/components/dropdown.js +++ b/web_src/fomantic/build/components/dropdown.js @@ -4158,7 +4158,7 @@ $.fn.dropdown.settings.templates = { html = '', escape = $.fn.dropdown.settings.templates.escape ; - html += ''; + html += ''; if(placeholder) { html += '
' + escape(placeholder,preserveHTML) + '
'; } diff --git a/web_src/fomantic/build/fomantic.css b/web_src/fomantic/build/fomantic.css index e3dd4dcfe2..9b5f654a8e 100644 --- a/web_src/fomantic/build/fomantic.css +++ b/web_src/fomantic/build/fomantic.css @@ -1,3 +1,2 @@ -@import "./components/dropdown.css"; @import "./components/modal.css"; @import "./components/search.css"; diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index a70bfdd16f..e135528f8f 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -22,7 +22,6 @@ "admin": false, "components": [ "api", - "dropdown", "modal", "search", "tab"