diff --git a/src/plugins/chatview/styles/chatbox.scss b/src/plugins/chatview/styles/chatbox.scss index bb8583d6c..bc73fa3d3 100644 --- a/src/plugins/chatview/styles/chatbox.scss +++ b/src/plugins/chatview/styles/chatbox.scss @@ -191,15 +191,6 @@ } } - .dropdown { /* status dropdown styles */ - background-color: var(--light-background-color); - dd { - margin: 0; - padding: 0; - position: relative; - } - } - .dragresize { background: transparent; border: 0; diff --git a/src/plugins/chatview/styles/index.scss b/src/plugins/chatview/styles/index.scss index 2bb3551c3..498aae41a 100644 --- a/src/plugins/chatview/styles/index.scss +++ b/src/plugins/chatview/styles/index.scss @@ -69,12 +69,6 @@ .chatbox-title--no-desc { padding: 0.5rem 0.75rem; } - converse-dropdown { - .btn--standalone { - padding: 0 0.2em; - margin: 0 0 0 0.5em; - } - } } } } diff --git a/src/shared/components/dropdown.js b/src/shared/components/dropdown.js index 2e1c386b8..4df6285ce 100644 --- a/src/shared/components/dropdown.js +++ b/src/shared/components/dropdown.js @@ -5,6 +5,8 @@ import { html } from 'lit'; import { until } from 'lit/directives/until.js'; import DropdownBase from 'shared/components/dropdownbase.js'; +import './styles/dropdown.scss'; + export default class Dropdown extends DropdownBase { diff --git a/src/shared/components/styles/dropdown.scss b/src/shared/components/styles/dropdown.scss new file mode 100644 index 000000000..81b317761 --- /dev/null +++ b/src/shared/components/styles/dropdown.scss @@ -0,0 +1,40 @@ +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; + +.conversejs { + @import "bootstrap/scss/dropdown"; + converse-dropdown { + &.dropup { + &.dropup--left { + .dropdown-menu { + right: 100%; + left: auto; + } + } + } + + .btn--standalone { + padding: 0 0.2em; + margin: 0; + } + .dropdown-menu { + margin-top: -0.2em !important; + } + + .dropdown-item { + padding: 0.5rem 1rem; + .fa { + width: 1.25em; + margin-right: 0.75rem; + } + &:active, &.selected { + color: white !important; + background-color: var(--list-item-open-color); + .fa { + color: white !important; + } + } + } + } +} diff --git a/src/shared/styles/_core.scss b/src/shared/styles/_core.scss index 3dcd5b332..e26b72926 100644 --- a/src/shared/styles/_core.scss +++ b/src/shared/styles/_core.scss @@ -10,15 +10,6 @@ direction: ltr; z-index: 1031; // One more than bootstrap navbar - .dropup { - &.dropup--left { - .dropdown-menu { - right: 100%; - left: auto; - } - } - } - textarea:disabled { background-color: #EEE !important; } @@ -121,21 +112,6 @@ } } - .dropdown-item { - padding: 0.5rem 1rem; - .fa { - width: 1.25em; - margin-right: 0.75rem; - } - &:active, &.selected { - color: white !important; - background-color: var(--list-item-open-color); - .fa { - color: white !important; - } - } - } - .popover { position: fixed; } diff --git a/src/shared/styles/buttons.scss b/src/shared/styles/buttons.scss index 165895847..f303588aa 100644 --- a/src/shared/styles/buttons.scss +++ b/src/shared/styles/buttons.scss @@ -13,11 +13,12 @@ color: var(--button-text-color); margin-right: 0.5em; &.only-icon { - margin-right: 0; + margin-right: 0; } } } converse-icon { + display: inline-block; margin-right: 0; } }