mirror of https://github.com/grafana/grafana
Chore: Migrate legacy `dropdown` styles to emotion/angular file (#92282)
migrate legacy dropdown classes to emotion/angular filepull/92476/head
Ashley Harrison
10 months ago
committed by
GitHub
parent
0f24c89c91
commit
2318e32c9f
@ -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