apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Migrate legacy `dropdown` styles to emotion/angular file (#92282)

Browse Source 
migrate legacy dropdown classes to emotion/angular file
pull/92476/head
Ashley Harrison 10 months ago committed by GitHub
parent 0f24c89c91
commit 2318e32c9f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 220 additions and 333 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      packages/grafana-ui/src/themes/GlobalStyles/utilityClasses.ts
  2. 217
      public/sass/_angular.scss
  3. 3
      public/sass/_grafana.scss
  4. 330
      public/sass/components/_dropdown.scss

3
packages/grafana-ui/src/themes/GlobalStyles/utilityClasses.ts
Unescape View File

@ -137,5 +137,8 @@ export function getUtilityClassStyles(theme: GrafanaTheme2) {
boxShadow: 'none',
},
},
'.typeahead': {
zIndex: theme.zIndex.typeahead,
},
});
}

217
public/sass/_angular.scss
Unescape View File

@ -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;
}

3
public/sass/_grafana.scss
Unescape View File

@ -7,8 +7,5 @@
// UTILS
@import 'utils/widths';
// COMPONENTS
@import 'components/dropdown';
// ANGULAR
@import 'angular';

330
public/sass/components/_dropdown.scss
Unescape View File

@ -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;
}
}
}
Write Preview
Loading…
Cancel
Save