.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: $caret-width-base dashed; border-right: $caret-width-base solid transparent; border-left: $caret-width-base solid transparent; } .dropdown { position: relative; } .open { .dropdown-menu { display: block; } .dropdown-menu-toggle { border-color: $dropdown-toggle-hover-border-color; .fa { color: $dropdown-toggle-hover-icon-color; } } } .dropdown-menu-toggle { position: relative; width: 160px; padding: 6px 20px 6px 10px; background-color: $dropdown-toggle-bg; color: $dropdown-toggle-color; font-size: 15px; text-align: left; border: 1px solid $dropdown-toggle-border-color; border-radius: 2px; outline: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; .fa { position: absolute; top: 50%; right: 6px; margin-top: -4px; color: $dropdown-toggle-icon-color; font-size: 10px; } &:hover, { border-color: $dropdown-toggle-hover-border-color; .fa { color: $dropdown-toggle-hover-icon-color; } } } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 9; width: 240px; margin-top: 2px; margin-bottom: 0; padding: 10px 10px; font-size: 14px; font-weight: normal; background-color: $dropdown-bg; border: 1px solid $dropdown-border-color; border-radius: $border-radius-base; box-shadow: 0 2px 4px $dropdown-shadow-color; &.is-loading { .dropdown-content { display: none; } .dropdown-loading { display: block; } } ul { margin: 0; padding: 0; } li { text-align: left; list-style: none; } .divider { width: 100%; height: 1px; margin-top: 8px; margin-bottom: 8px; background-color: $dropdown-divider-color; } a { display: block; position: relative; padding-left: 10px; padding-right: 10px; color: $dropdown-link-color; line-height: 34px; text-overflow: ellipsis; border-radius: 2px; white-space: nowrap; overflow: hidden; &:hover, &:focus, &.is-focused { background-color: $dropdown-link-hover-bg; text-decoration: none; outline: 0; } } } .dropdown-menu-paging { .dropdown-page-two, .dropdown-menu-back { display: none; } &.is-page-two { .dropdown-page-one { display: none; } .dropdown-page-two, .dropdown-menu-back { display: block; } } } .dropdown-menu-user { .avatar { float: left; width: 30px; height: 30px; margin: 0 10px 0 0; } } .dropdown-menu-user-link { padding-top: 7px; padding-bottom: 7px; } .dropdown-menu-user-full-name { display: block; font-weight: 600; line-height: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .dropdown-menu-user-username { display: block; line-height: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .dropdown-select { width: 280px; } .dropdown-menu-align-right { left: auto; right: 0; } .dropdown-menu-selectable { a { padding-left: 25px; &.is-active { &::before { content: "\f00c"; position: absolute; left: 5px; top: 50%; margin-top: -7px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } } } .dropdown-header { padding-left: 5px; padding-right: 5px; color: $dropdown-header-color; font-size: 13px; line-height: 22px; } .dropdown-title { position: relative; margin-bottom: 10px; padding-left: 30px; padding-right: 30px; padding-bottom: 10px; font-weight: 600; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid $dropdown-divider-color; overflow: hidden; } .dropdown-title-button { position: absolute; top: -1px; padding: 0; color: $dropdown-title-btn-color; font-size: 14px; border: 0; background: none; outline: 0; &:hover { color: darken($dropdown-title-btn-color, 15%); } } .dropdown-menu-close { right: 0; } .dropdown-menu-back { left: 0; } .dropdown-input { position: relative; margin-bottom: 10px; .fa { position: absolute; top: 10px; right: 10px; color: #c7c7c7; font-size: 12px; pointer-events: none; } } .dropdown-input-field { width: 100%; padding: 0 7px; color: $dropdown-input-color; line-height: 30px; border: 1px solid $dropdown-divider-color; border-radius: 2px; outline: 0; &:focus { color: $dropdown-link-color; border-color: $dropdown-input-focus-border; box-shadow: 0 0 4px $dropdown-input-focus-shadow; + .fa { color: $dropdown-link-color; } } &:hover { + .fa { color: $dropdown-link-color; } } } .dropdown-content { max-height: 215px; overflow-y: scroll; } .dropdown-footer { padding-top: 10px; margin-top: 10px; font-size: 13px; border-top: 1px solid $dropdown-divider-color; } .dropdown-footer-list { font-size: 14px; a { padding-left: 10px; } } .dropdown-loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; z-index: 9; background-color: $dropdown-loading-bg; font-size: 28px; .fa { position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -14px; } } .dropdown-menu-labels { .label { position: relative; width: 30px; margin-right: 5px; text-indent: -99999px; } }