diff --git a/packages/grafana-ui/src/themes/GlobalStyles/utilityClasses.ts b/packages/grafana-ui/src/themes/GlobalStyles/utilityClasses.ts index ac14021ea41..9a2fea24cf5 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/utilityClasses.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/utilityClasses.ts @@ -137,5 +137,8 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) { boxShadow: 'none', }, }, + '.typeahead': { + zIndex: theme.zIndex.typeahead, + }, }); } diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index b5a5605fedf..43f14cbba21 100644 --- a/public/sass/_angular.scss +++ b/public/sass/_angular.scss @@ -2351,3 +2351,220 @@ button.close { border: 0; -webkit-appearance: none; } + +.dropup, +.dropdown { + position: relative; +} + +.dropdown-toggle:active, +.open .dropdown-toggle { + outline: 0; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: $zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 140px; + margin: 2px 0 0; // override default ul + list-style: none; + background-color: $dropdownBackground; + border: 1px solid $dropdownBorder; + text-align: left; + + // Aligns the dropdown menu to right + &.pull-left { + right: 0; + left: auto; + } + + .divider { + height: 1px; + margin: $space-sm 0; // 8px 1px + overflow: hidden; + background-color: $dropdownDividerTop; + border-bottom: 1px solid $dropdownDividerBottom; + } + + // Links within the dropdown menu + > li { + > a, + > button { + display: block; + padding: 3px 20px 3px 15px; + clear: both; + font-weight: normal; + line-height: $line-height-base; + color: $dropdownLinkColor; + white-space: nowrap; + + i { + display: inline-block; + margin-right: 10px; + color: $link-color-disabled; + position: relative; + top: 3px; + } + + .gicon { + opacity: 0.7; + width: 18px; + height: 14px; + } + } + } + + &--menu { + background: $menu-dropdown-bg; + box-shadow: $menu-dropdown-shadow; + margin-top: 0px; + + > li > a, + > li > button { + display: flex; + padding: 5px 10px; + border-left: 2px solid transparent; + + &:hover { + color: $link-hover-color; + background: $menu-dropdown-hover-bg !important; + } + } + } +} + +.dropdown-item-text { + flex-grow: 1; +} + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a, +.dropdown-menu > li > button:hover, +.dropdown-menu > li > button:focus, +.dropdown-submenu:hover > button, +.dropdown-submenu:focus > button { + text-decoration: none; + color: $dropdownLinkColorHover; + background-color: $dropdownLinkBackgroundHover; +} + +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus, +.dropdown-menu > .active > button, +.dropdown-menu > .active > button:hover, +.dropdown-menu > .active > button:focus { + color: $dropdownLinkColorActive; + text-decoration: none; + outline: 0; + background-color: $dropdownLinkBackgroundHover; +} + +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus, +.dropdown-menu > .disabled > button, +.dropdown-menu > .disabled > button:hover, +.dropdown-menu > .disabled > button:focus { + color: $gray-2; +} +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus, +.dropdown-menu > .disabled > button:hover, +.dropdown-menu > .disabled > button:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + cursor: default; +} + +.open { + > .dropdown-menu { + display: block; + } + + > .dropdown > .dropdown-menu { + display: block; + } + + &.cascade-open { + .dropdown-menu { + display: block; + } + } +} + +.pull-right > .dropdown-menu { + left: 100%; + right: unset; +} + +.dropup { + // Reverse the caret + .caret { + border-top: 0; + border-bottom: 4px solid $black; + content: ''; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 0; + margin-bottom: 1px; + } +} + +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: 0px; + margin-left: -1px; +} +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; +} +.dropdown-submenu:hover > a::after, +.dropdown-submenu:hover > button::after { + border-left-color: $dropdownLinkColorHover; +} + +.dropdown-submenu.pull-left { + // Undo the float + // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. + float: none !important; + + // Positioning the submenu + > .dropdown-menu { + left: -100%; + width: 100%; + margin-left: 2px; + } +} + +.dropdown-submenu.pull-right { + float: none !important; +} + +.dropdown-menu-item-shortcut { + display: block; + margin-left: $spacer; + color: $text-muted; + min-width: 47px; +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index cd1f36c9bfc..755843375f3 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -7,8 +7,5 @@ // UTILS @import 'utils/widths'; -// COMPONENTS -@import 'components/dropdown'; - // ANGULAR @import 'angular'; diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss deleted file mode 100644 index ee69ba95656..00000000000 --- a/public/sass/components/_dropdown.scss +++ /dev/null @@ -1,330 +0,0 @@ -// -// Dropdown menus -// -------------------------------------------------- - -// Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropup, -.dropdown { - position: relative; -} - -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - -.dropdown-desc { - position: relative; - top: -3px; - width: 250px; - font-size: $font-size-sm; - margin-left: 22px; - color: $gray-2; - white-space: normal; -} - -// Dropdown arrow/caret -// -------------------- -.caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: top; - border-top: 4px solid $text-color-weak; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - content: ''; -} - -// Place the caret -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - -// The dropdown menu (ul) -// ---------------------- -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: $zindex-dropdown; - display: none; // none by default, but block on "open" of the menu - float: left; - min-width: 140px; - margin: 2px 0 0; // override default ul - list-style: none; - background-color: $dropdownBackground; - border: 1px solid $dropdownBorder; - text-align: left; - - // Aligns the dropdown menu to right - &.pull-left { - right: 0; - left: auto; - } - - .divider { - height: 1px; - margin: $space-sm 0; // 8px 1px - overflow: hidden; - background-color: $dropdownDividerTop; - border-bottom: 1px solid $dropdownDividerBottom; - } - - // Links within the dropdown menu - > li { - > a, - > button { - display: block; - padding: 3px 20px 3px 15px; - clear: both; - font-weight: normal; - line-height: $line-height-base; - color: $dropdownLinkColor; - white-space: nowrap; - - i { - display: inline-block; - margin-right: 10px; - color: $link-color-disabled; - position: relative; - top: 3px; - } - - .gicon { - opacity: 0.7; - width: 18px; - height: 14px; - } - } - } - - &--menu { - background: $menu-dropdown-bg; - box-shadow: $menu-dropdown-shadow; - margin-top: 0px; - - > li > a, - > li > button { - display: flex; - padding: 5px 10px; - border-left: 2px solid transparent; - - &:hover { - color: $link-hover-color; - background: $menu-dropdown-hover-bg !important; - } - } - } -} - -.dropdown-item-text { - flex-grow: 1; -} - -// Hover/Focus state -// ----------- -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-submenu:hover > a, -.dropdown-submenu:focus > a, -.dropdown-menu > li > button:hover, -.dropdown-menu > li > button:focus, -.dropdown-submenu:hover > button, -.dropdown-submenu:focus > button { - text-decoration: none; - color: $dropdownLinkColorHover; - background-color: $dropdownLinkBackgroundHover; -} - -// Active state -// ------------ -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus, -.dropdown-menu > .active > button, -.dropdown-menu > .active > button:hover, -.dropdown-menu > .active > button:focus { - color: $dropdownLinkColorActive; - text-decoration: none; - outline: 0; - background-color: $dropdownLinkBackgroundHover; -} - -// Disabled state -// -------------- -// Gray out text and ensure the hover/focus state remains gray -.dropdown-menu > .disabled > a, -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus, -.dropdown-menu > .disabled > button, -.dropdown-menu > .disabled > button:hover, -.dropdown-menu > .disabled > button:focus { - color: $gray-2; -} -// Nuke hover/focus effects -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus, -.dropdown-menu > .disabled > button:hover, -.dropdown-menu > .disabled > button:focus { - text-decoration: none; - background-color: transparent; - background-image: none; // Remove CSS gradient - cursor: default; -} - -// Open state for the dropdown -// --------------------------- -.open { - > .dropdown-menu { - display: block; - } - - > .dropdown > .dropdown-menu { - // Panel menu. TODO: See if we can merge this with above - display: block; - } - - &.cascade-open { - .dropdown-menu { - display: block; - } - } -} - -// Backdrop to catch body clicks on mobile, etc. -// --------------------------- -.dropdown-backdrop { - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: 0; - z-index: $zindex-dropdown - 10; -} - -// Right aligned dropdowns -// --------------------------- -.pull-right > .dropdown-menu { - left: 100%; - right: unset; -} - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// ------------------------------------------------------ -// Just add .dropup after the standard .dropdown class and you're set, bro. -// TODO: abstract this so that the navbar fixed styles are not placed here? -.dropup, -.navbar-fixed-bottom .dropdown { - // Reverse the caret - .caret { - border-top: 0; - border-bottom: 4px solid $black; - content: ''; - } - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 0; - margin-bottom: 1px; - } -} - -// Sub menus -// --------------------------- -.dropdown-submenu { - position: relative; -} - -// Default dropdowns -.dropdown-submenu > .dropdown-menu { - top: 0; - left: 100%; - margin-top: 0px; - margin-left: -1px; -} -.dropdown-submenu:hover > .dropdown-menu { - display: block; -} - -// Dropups -.dropup .dropdown-submenu > .dropdown-menu { - top: auto; - bottom: 0; - margin-top: 0; - margin-bottom: -2px; -} -// .dropdown-submenu > a::after { -// position: absolute; -// top: 35%; -// right: $space-sm; -// background-color: transparent; -// color: $text-color-weak; -// font: normal normal normal $font-size-sm/1 FontAwesome; -// content: '\f0da'; -// pointer-events: none; -// font-size: 11px; -// } -.dropdown-submenu:hover > a::after, -.dropdown-submenu:hover > button::after { - border-left-color: $dropdownLinkColorHover; -} - -// Left aligned submenus -.dropdown-submenu.pull-left { - // Undo the float - // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. - float: none !important; - - // Positioning the submenu - > .dropdown-menu { - left: -100%; - width: 100%; - margin-left: 2px; - } -} - -.dropdown-submenu.pull-right { - float: none !important; -} - -// Tweak nav headers -// ----------------- -// Increase padding from 15px to 20px on sides -.dropdown .dropdown-menu .nav-header { - padding-left: 20px; - padding-right: 20px; -} - -// Typeahead -// --------- -.typeahead { - z-index: $zindex-typeahead; -} - -.dropdown-menu-item-shortcut { - display: block; - margin-left: $spacer; - color: $text-muted; - min-width: 47px; -} - -.dropdown-menu.dropdown-menu--new { - li a, - li button { - padding: calc($spacer/2) $spacer; - border-left: 2px solid $side-menu-bg; - background: $side-menu-bg; - - i { - display: inline-block; - padding-right: 21px; - } - - &:hover { - color: $link-hover-color; - background: $input-label-bg; - } - } -}