grafana/public/sass/base/_icons.scss

280 lines
6.8 KiB
SCSS
Raw Normal View History

2017-10-14 14:17:16 -05:00
.gicon {
line-height: 1;
display: inline-block;
width: 1.1057142857em;
height: 1.1057142857em;
2017-10-14 14:17:16 -05:00
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
2017-10-14 14:17:16 -05:00
display: inline-block;
vertical-align: middle;
}
@grafana/ui: Create Icon component and replace part of the icons (#23402) * Part1: Unicons implementation (#23197) * Create a new Icon component * Update icons in main sidebar * Update icons in Useful links and in react components on main site * Update icons in Useful links and in main top navigation * Adjust sizing * Update panel navigation and timepicker * Update icons in Panel menu * NewPanelEditor: Fixed so that test alert rule works in new edit mode (#23179) * Update icons in add panel widget * Resolve merge conflict * Fix part of the test errors and type errors * Fix storybook errors * Update getAvailableIcons import in storybook knobs * Fix import path * Fix SyntaxError: Cannot use import statement outside a module in test environment error * Remove dynamic imports * Remove types as using @ts-ignore * Update snapshot test * Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax * Remove color prop from icon, remove color implemetation in mono icons * Update navbar styling * Move toPascalCase to utils/string Co-authored-by: Torkel Ödegaard <torkel@grafana.com> * Resolve type errors resulted from merge * Part2: Unicons implementation (#23266) * Create a new Icon component * Update icons in main sidebar * Update icons in Useful links and in react components on main site * Update icons in Useful links and in main top navigation * Adjust sizing * Update panel navigation and timepicker * Update icons in Panel menu * Update icons in add panel widget * Resolve merge conflict * Fix part of the test errors and type errors * Fix storybook errors * Update getAvailableIcons import in storybook knobs * Fix import path * Fix SyntaxError: Cannot use import statement outside a module in test environment error * Remove dynamic imports * Remove types as using @ts-ignore * Update snapshot test * Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax * Implment icons in Tabs * Implement icons in search items and empty list * Update buttons * Update button-related snapshot tests * Update icons in modals and page headers * Create anfular wrapper and update all icons on search screen * Update sizing, remove colors, update snapshot tests * Remove color prop from icon, remove color implemetation in mono icons * Remove color props from monochrome icons * Complete update of icons for search screen * Update icons for infor tooltips, playlist, permissions * Support temporarly font awesome icons used in enterprise grafana * Part1: Unicons implementation (#23197) * Create a new Icon component * Update icons in main sidebar * Update icons in Useful links and in react components on main site * Update icons in Useful links and in main top navigation * Adjust sizing * Update panel navigation and timepicker * Update icons in Panel menu * NewPanelEditor: Fixed so that test alert rule works in new edit mode (#23179) * Update icons in add panel widget * Resolve merge conflict * Fix part of the test errors and type errors * Fix storybook errors * Update getAvailableIcons import in storybook knobs * Fix import path * Fix SyntaxError: Cannot use import statement outside a module in test environment error * Remove dynamic imports * Remove types as using @ts-ignore * Update snapshot test * Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax * Remove color prop from icon, remove color implemetation in mono icons * Update navbar styling * Move toPascalCase to utils/string Co-authored-by: Torkel Ödegaard <torkel@grafana.com> * Icons update * Add optional chaining to for isFontAwesome variable Co-authored-by: Torkel Ödegaard <torkel@grafana.com> * Part3: Unicons implementation (#23356) * Create a new Icon component * Update icons in main sidebar * Update icons in Useful links and in react components on main site * Update icons in Useful links and in main top navigation * Adjust sizing * Update panel navigation and timepicker * Update icons in Panel menu * Update icons in add panel widget * Resolve merge conflict * Fix part of the test errors and type errors * Fix storybook errors * Update getAvailableIcons import in storybook knobs * Fix import path * Fix SyntaxError: Cannot use import statement outside a module in test environment error * Remove dynamic imports * Remove types as using @ts-ignore * Update snapshot test * Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax * Implment icons in Tabs * Implement icons in search items and empty list * Update buttons * Update button-related snapshot tests * Update icons in modals and page headers * Create anfular wrapper and update all icons on search screen * Update sizing, remove colors, update snapshot tests * Remove color prop from icon, remove color implemetation in mono icons * Remove color props from monochrome icons * Complete update of icons for search screen * Update icons for infor tooltips, playlist, permissions * Support temporarly font awesome icons used in enterprise grafana * Part1: Unicons implementation (#23197) * Create a new Icon component * Update icons in main sidebar * Update icons in Useful links and in react components on main site * Update icons in Useful links and in main top navigation * Adjust sizing * Update panel navigation and timepicker * Update icons in Panel menu * NewPanelEditor: Fixed so that test alert rule works in new edit mode (#23179) * Update icons in add panel widget * Resolve merge conflict * Fix part of the test errors and type errors * Fix storybook errors * Update getAvailableIcons import in storybook knobs * Fix import path * Fix SyntaxError: Cannot use import statement outside a module in test environment error * Remove dynamic imports * Remove types as using @ts-ignore * Update snapshot test * Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax * Remove color prop from icon, remove color implemetation in mono icons * Update navbar styling * Move toPascalCase to utils/string Co-authored-by: Torkel Ödegaard <torkel@grafana.com> * Update icons in Explore * Update icons in alerting * Update + and x buttons * Update icons in configurations and settings * Update close icons * Update icons in rich history * Update alert messages * Add optional chaining to for isFontAwesome variable * Remove icon mock, set up jest.config * Fix navbar plus icon * Fir enable-bacground to enableBackgournd Co-authored-by: Torkel Ödegaard <torkel@grafana.com> * Merge remote branch origin master to icons-unicons * Revert "Merge remote branch origin master to icons-unicons" This reverts commit 3f25d50a39a940883fefe73ce51219139c1ed37f. * Size-up dashnav icons * Fix alerting icons, panel headers, update tests * Fix typecheck error * Adjustments - add panel icon, spacing * Set TerserPlugin sourceMap to false to prevent running out of memory when publishing storybook Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2020-04-08 07:33:31 -05:00
.icon--has-hover {
2019-01-29 06:42:29 -06:00
opacity: 0.7;
&:hover {
opacity: 1;
}
}
2017-12-13 16:48:44 -06:00
.gicon-add-annotation {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation.svg');
2017-12-13 16:48:44 -06:00
}
// not used
2017-12-13 16:48:44 -06:00
.gicon-add-annotation-alt {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation_alt.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-add-datasources {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_data_sources.svg');
2017-12-13 16:48:44 -06:00
}
// not used
2017-12-13 16:48:44 -06:00
.gicon-add-user {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_user.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-add-team {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_team.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-add-panel {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-add-link {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_link.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-add-variable {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_variable.svg');
}
.gicon-add-alert-notification-channel {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_notification_channel.svg');
2017-12-13 16:48:44 -06:00
}
2017-10-14 14:17:16 -05:00
.gicon-alert {
background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg');
2017-10-14 14:17:16 -05:00
}
.gicon-remove {
background-image: url('../img/icons_#{$theme-name}_theme/icon_remove.svg');
}
.gicon-arrow-left {
background-image: url('../img/icons_#{$theme-name}_theme/icon_arrow_left.svg');
}
.gicon-arrow-left-circle {
background-image: url('../img/icons_#{$theme-name}_theme/icon_arrow_left_circle.svg');
}
//not used
.gicon-alert-alt {
background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg');
}
2017-12-13 16:48:44 -06:00
.gicon-alert-rules {
background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_rules.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-alert-notification-channel {
background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-annotation {
background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation.svg');
2017-12-13 16:48:44 -06:00
}
//not used
2017-12-13 16:48:44 -06:00
.gicon-annotation-alt {
background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation_alt.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-apikeys {
background-image: url('../img/icons_#{$theme-name}_theme/icon_apikeys.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-branding {
background-image: url('../img/grafana_icon.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-cog {
background-image: url('../img/icons_#{$theme-name}_theme/icon_cog.svg');
2017-10-27 01:33:04 -05:00
}
2017-10-14 14:17:16 -05:00
.gicon-dashboard {
background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard.svg');
2017-10-14 14:17:16 -05:00
}
//not used
2017-10-14 14:17:16 -05:00
.gicon-dashboard-starred {
background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg');
2017-10-14 14:17:16 -05:00
}
2017-12-13 16:48:44 -06:00
.gicon-dashboard-list {
background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_list.svg');
2017-12-13 16:48:44 -06:00
}
2017-10-14 14:17:16 -05:00
.gicon-dashboard-new {
background-image: url('../img/icons_#{$theme-name}_theme/icon_new_dashboard.svg');
2017-10-14 14:17:16 -05:00
}
2017-12-13 16:48:44 -06:00
.gicon-dashboard-import {
background-image: url('../img/icons_#{$theme-name}_theme/icon_import_dashboard.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-datasources {
background-image: url('../img/icons_#{$theme-name}_theme/icon_data_sources.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-editor {
background-image: url('../img/icons_#{$theme-name}_theme/icon_editor.svg');
}
2017-10-14 14:17:16 -05:00
.gicon-folder-new {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_folder.svg');
2017-10-14 14:17:16 -05:00
}
2017-12-13 16:48:44 -06:00
.gicon-home {
background-image: url('../img/icons_#{$theme-name}_theme/icon_home.svg');
2017-10-14 14:17:16 -05:00
}
2017-12-13 17:17:56 -06:00
.gicon-json {
background-image: url('../img/icons_#{$theme-name}_theme/icon_json.svg');
2017-12-13 17:17:56 -06:00
}
2017-12-13 16:48:44 -06:00
.gicon-link {
background-image: url('../img/icons_#{$theme-name}_theme/icon_link.svg');
2017-11-01 08:23:46 -05:00
}
2017-12-13 16:48:44 -06:00
.gicon-manage {
background-image: url('../img/icons_#{$theme-name}_theme/icon_sitemap.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-org {
background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-playlists {
background-image: url('../img/icons_#{$theme-name}_theme/icon_playlist.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-plugins {
background-image: url('../img/icons_#{$theme-name}_theme/icon_plugins.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-preferences {
background-image: url('../img/icons_#{$theme-name}_theme/icon_preferences.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-question {
background-image: url('../img/icons_#{$theme-name}_theme/icon_question.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-shield {
background-image: url('../img/icons_#{$theme-name}_theme/icon_shield.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-snapshots {
background-image: url('../img/icons_#{$theme-name}_theme/icon_snapshots.svg');
2017-11-30 04:31:38 -06:00
}
2017-12-08 09:25:45 -06:00
.gicon-team {
background-image: url('../img/icons_#{$theme-name}_theme/icon_team.svg');
2017-11-30 08:37:03 -06:00
}
2017-12-13 16:48:44 -06:00
.gicon-user {
background-image: url('../img/icons_#{$theme-name}_theme/icon_user.svg');
2017-12-13 16:48:44 -06:00
}
.gicon-variable {
background-image: url('../img/icons_#{$theme-name}_theme/icon_variable.svg');
2017-12-01 06:49:15 -06:00
}
2017-12-01 08:56:08 -06:00
.gicon-viewer {
background-image: url('../img/icons_#{$theme-name}_theme/icon_viewer.svg');
}
//not used
2017-12-01 08:56:08 -06:00
.gicon-zoom-out {
background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
2017-12-01 08:56:08 -06:00
}
.gicon-explore {
background-image: url('../img/icons_#{$theme-name}_theme/icon_explore.svg');
}
2020-02-28 02:51:03 -06:00
.gicon-reports {
background-image: url('../img/icons_#{$theme-name}_theme/icon_reports.svg');
}
.sidemenu {
.gicon-dashboard {
background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
}
.gicon-alert {
background-image: url('../img/icons_dark_theme/icon_alert.svg');
}
2017-12-15 04:18:22 -06:00
.gicon-cog {
background-image: url('../img/icons_dark_theme/icon_cog.svg');
2017-12-15 04:18:22 -06:00
}
.gicon-question {
background-image: url('../img/icons_dark_theme/icon_question.svg');
2017-12-15 04:18:22 -06:00
}
.gicon-explore {
background-image: url('../img/icons_dark_theme/icon_explore.svg');
}
.gicon-shield {
background-image: url('../img/icons_dark_theme/icon_shield.svg');
}
2020-02-28 02:51:03 -06:00
.gicon-reports {
background-image: url('../img/icons_dark_theme/icon_reports.svg');
}
2017-12-15 04:18:22 -06:00
}
// not used
.fa--permissions-list {
min-width: 20px;
padding-right: 5px;
}
.panel-editor-tabs,
.add-panel-widget__icon {
.gicon-advanced-active {
background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced_active.svg');
}
.gicon-advanced {
background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced.svg');
}
2018-12-14 12:34:51 -06:00
.gicon-alert-active {
background-image: url('../img/icons_#{$theme-name}_theme/icon_alerting_active.svg');
}
2018-12-14 12:34:51 -06:00
.gicon-alert {
background-image: url('../img/icons_#{$theme-name}_theme/icon_alerting.svg');
}
.gicon-queries-active {
background-image: url('../img/icons_#{$theme-name}_theme/icon_query_active.svg');
}
.gicon-queries {
background-image: url('../img/icons_#{$theme-name}_theme/icon_query.svg');
}
.gicon-visualization-active {
background-image: url('../img/icons_#{$theme-name}_theme/icon_visualize_active.svg');
}
.gicon-visualization {
background-image: url('../img/icons_#{$theme-name}_theme/icon_visualize.svg');
}
}