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',
|
||||
},
|
||||
},
|
||||
'.typeahead': {
|
||||
zIndex: theme.zIndex.typeahead,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -7,8 +7,5 @@
|
||||
// UTILS
|
||||
@import 'utils/widths';
|
||||
|
||||
// COMPONENTS
|
||||
@import 'components/dropdown';
|
||||
|
||||
// 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