mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Migrate legacy dropdown styles to emotion/angular file (#92282)
migrate legacy dropdown classes to emotion/angular file
This commit is contained in:
Ashley Harrison
GitHub
parent
0f24c89c91
commit
2318e32c9f
@ -137,5 +137,8 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) {
|
|||||||
boxShadow: 'none',
|
boxShadow: 'none',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
'.typeahead': {
|
||||||
|
zIndex: theme.zIndex.typeahead,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2351,3 +2351,220 @@ button.close {
|
|||||||
border: 0;
|
border: 0;
|
||||||
-webkit-appearance: none;
|
-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;
|
||||||
|
}
|
||||||
|
|||||||
@ -7,8 +7,5 @@
|
|||||||
// UTILS
|
// UTILS
|
||||||
@import 'utils/widths';
|
@import 'utils/widths';
|
||||||
|
|
||||||
// COMPONENTS
|
|
||||||
@import 'components/dropdown';
|
|
||||||
|
|
||||||
// ANGULAR
|
// ANGULAR
|
||||||
@import 'angular';
|
@import 'angular';
|
||||||
|
|||||||
@ -1,330 +0,0 @@
|
|||||||
//
|
|
||||||
// Dropdown menus
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// Use the .menu class on any <li> 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user