diff --git "a/public/img/icons_dark_theme/Icon\r" "b/public/img/icons_dark_theme/Icon\r"
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/public/img/icons_dark_theme/icon_add_folder.svg b/public/img/icons_dark_theme/icon_add_folder.svg
new file mode 100644
index 00000000000..d7ac00099e3
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_add_folder.svg
@@ -0,0 +1,31 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_alert.svg b/public/img/icons_dark_theme/icon_alert.svg
new file mode 100644
index 00000000000..2a3a764a925
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_alert.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_alert_alt.svg b/public/img/icons_dark_theme/icon_alert_alt.svg
new file mode 100644
index 00000000000..a6c6e9bd051
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_alert_alt.svg
@@ -0,0 +1,108 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_alert_off.svg b/public/img/icons_dark_theme/icon_alert_off.svg
new file mode 100644
index 00000000000..cebbe532ce4
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_alert_off.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_dashboard.svg b/public/img/icons_dark_theme/icon_dashboard.svg
new file mode 100644
index 00000000000..a5d4e9b491d
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_dashboard.svg
@@ -0,0 +1,18 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_dashboard_fav.svg b/public/img/icons_dark_theme/icon_dashboard_fav.svg
new file mode 100644
index 00000000000..22d2462e922
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_dashboard_fav.svg
@@ -0,0 +1,30 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_import_dashboard.svg b/public/img/icons_dark_theme/icon_import_dashboard.svg
new file mode 100644
index 00000000000..20b3e6c27e8
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_import_dashboard.svg
@@ -0,0 +1,32 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_new_dashboard.svg b/public/img/icons_dark_theme/icon_new_dashboard.svg
new file mode 100644
index 00000000000..326cbf1ca7f
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_new_dashboard.svg
@@ -0,0 +1,32 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_notification_channels.svg b/public/img/icons_dark_theme/icon_notification_channels.svg
new file mode 100644
index 00000000000..d3bad3f78f4
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_notification_channels.svg
@@ -0,0 +1,14 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_org.svg b/public/img/icons_dark_theme/icon_org.svg
new file mode 100644
index 00000000000..b9aa21c3a9c
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_org.svg
@@ -0,0 +1,40 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_user.svg b/public/img/icons_dark_theme/icon_user.svg
new file mode 100644
index 00000000000..e488d9ffcf4
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_user.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/public/img/icons_dark_theme/icon_user_group.svg b/public/img/icons_dark_theme/icon_user_group.svg
new file mode 100644
index 00000000000..15dade3d289
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_user_group.svg
@@ -0,0 +1,25 @@
+
+
+
diff --git "a/public/img/icons_light_theme/Icon\r" "b/public/img/icons_light_theme/Icon\r"
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/public/img/icons_light_theme/icon_add_folder.svg b/public/img/icons_light_theme/icon_add_folder.svg
new file mode 100644
index 00000000000..ad4638e7e32
--- /dev/null
+++ b/public/img/icons_light_theme/icon_add_folder.svg
@@ -0,0 +1,29 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_alert.svg b/public/img/icons_light_theme/icon_alert.svg
new file mode 100644
index 00000000000..a3109c23fa1
--- /dev/null
+++ b/public/img/icons_light_theme/icon_alert.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_alert_alt.svg b/public/img/icons_light_theme/icon_alert_alt.svg
new file mode 100644
index 00000000000..0d105481a7d
--- /dev/null
+++ b/public/img/icons_light_theme/icon_alert_alt.svg
@@ -0,0 +1,108 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_alert_off.svg b/public/img/icons_light_theme/icon_alert_off.svg
new file mode 100644
index 00000000000..b8fd5b000a3
--- /dev/null
+++ b/public/img/icons_light_theme/icon_alert_off.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_dashboard.svg b/public/img/icons_light_theme/icon_dashboard.svg
new file mode 100644
index 00000000000..2e275b87568
--- /dev/null
+++ b/public/img/icons_light_theme/icon_dashboard.svg
@@ -0,0 +1,18 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_dashboard_fav.svg b/public/img/icons_light_theme/icon_dashboard_fav.svg
new file mode 100644
index 00000000000..6ec8730e3ad
--- /dev/null
+++ b/public/img/icons_light_theme/icon_dashboard_fav.svg
@@ -0,0 +1,28 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_import_dashboard.svg b/public/img/icons_light_theme/icon_import_dashboard.svg
new file mode 100644
index 00000000000..3a83c0fe829
--- /dev/null
+++ b/public/img/icons_light_theme/icon_import_dashboard.svg
@@ -0,0 +1,32 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_new_dashboard.svg b/public/img/icons_light_theme/icon_new_dashboard.svg
new file mode 100644
index 00000000000..a4ea6c4f4b0
--- /dev/null
+++ b/public/img/icons_light_theme/icon_new_dashboard.svg
@@ -0,0 +1,32 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_notification_channels.svg b/public/img/icons_light_theme/icon_notification_channels.svg
new file mode 100644
index 00000000000..aa6ada13c8a
--- /dev/null
+++ b/public/img/icons_light_theme/icon_notification_channels.svg
@@ -0,0 +1,14 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_org.svg b/public/img/icons_light_theme/icon_org.svg
new file mode 100644
index 00000000000..2c4b738bda2
--- /dev/null
+++ b/public/img/icons_light_theme/icon_org.svg
@@ -0,0 +1,40 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_user.svg b/public/img/icons_light_theme/icon_user.svg
new file mode 100644
index 00000000000..2a68115129d
--- /dev/null
+++ b/public/img/icons_light_theme/icon_user.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/public/img/icons_light_theme/icon_user_group.svg b/public/img/icons_light_theme/icon_user_group.svg
new file mode 100644
index 00000000000..2ec7caf796e
--- /dev/null
+++ b/public/img/icons_light_theme/icon_user_group.svg
@@ -0,0 +1,25 @@
+
+
+
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index a4e99987576..739b9848338 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -21,6 +21,7 @@
@import "base/grid";
@import "base/fonts";
@import "base/code";
+@import "base/icons";
// UTILS
@import "utils/utils";
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 3c015383103..2f45ecca5e6 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -27,8 +27,8 @@ $white: #fff;
// -------------------------
$blue: #33B5E5;
$blue-dark: #005f81;
-$green: #609000;
-$red: #CC3900;
+$green: #3aa655;
+$red: #d44939;
$yellow: #ECBB13;
$pink: #FF4444;
$purple: #9933CC;
@@ -139,7 +139,7 @@ $btn-primary-bg-hl: #bc3e06;
$btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 5%);
-$btn-success-bg: lighten($green, 3%);
+$btn-success-bg: $green;
$btn-success-bg-hl: darken($green, 3%);
$btn-warning-bg: $brand-warning;
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
new file mode 100644
index 00000000000..b35f39eb24f
--- /dev/null
+++ b/public/sass/base/_icons.scss
@@ -0,0 +1,38 @@
+.gicon {
+ line-height: 1;
+ display: inline-block;
+ width: 1.2057142857em;
+ height: 1.2057142857em;
+ text-align: center;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% 100%;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.gicon-alert {
+ background-image: url('../img/icons_dark_theme/icon_alert.svg');
+}
+
+.gicon-dashboard {
+ background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
+}
+
+.gicon-dashboard-starred {
+ background-image: url('../img/icons_dark_theme/icon_dashboard_fav.svg');
+}
+
+.gicon-dashboard-new {
+ background-image: url('../img/icons_dark_theme/icon_new_dashboard.svg');
+}
+
+.gicon-folder-new {
+ background-image: url('../img/icons_dark_theme/icon_add_folder.svg');
+}
+
+.gicon-dashboard-import {
+ background-image: url('../img/icons_dark_theme/icon_import_dashboard.svg');
+}
+
+
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index 0be45ea0e37..c10c1ecd0ab 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -91,6 +91,11 @@
color: $link-color-disabled;
position: relative;
top: 3px;
+ padding-left: 5px;
+ }
+
+ .gicon {
+ opacity: 0.9;
}
}
}
diff --git a/public/sass/components/_icon-picker.scss b/public/sass/components/_icon-picker.scss
deleted file mode 100644
index 796f3f95db5..00000000000
--- a/public/sass/components/_icon-picker.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.gf-icon-picker {
- width: 400px;
- height: 450px;
-
- .icon-filter {
- padding-bottom: 10px;
- margin: auto;
- width: 50%;
- }
-
- .icon-container {
- max-height: 350px;
- overflow: auto;
-
- .gf-event-icon {
- margin: 0.4rem;
- height: 1.5rem;
- }
- }
-}
-
-.gf-icon-picker-button {
- .gf-event-icon {
- height: 1.2rem;
- }
-}
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index ab1cba4fd23..b4692e49dcc 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -12,6 +12,7 @@
min-height: $navbarHeight;
padding-right: $spacer;
background-color: $navbarBackground;
+ display: flex;
@include clearfix();
}
@@ -25,12 +26,12 @@
position: relative;
left: 0;
float: left;
+
+ &--grow {
+ flex-grow: 1;
+ }
}
-.navbar .nav.pull-right {
- float: right; // redeclare due to specificity
- margin-right: 0; // remove margin on float right nav
-}
.navbar .nav > li {
float: left;
@@ -62,6 +63,19 @@
background-color: $navbarLinkBackgroundActive;
}
+.navbar-page-icon {
+ font-size: $font-size-lg;
+ padding: 1rem 0rem 0.75rem 1rem;
+ min-height: $navbarHeight;
+
+ .gicon {
+ position: relative;
+ top: -1px;
+ font-size: 20px;
+ line-height: 8px;
+ }
+}
+
.navbar-page-btn {
text-overflow: ellipsis;
overflow: hidden;
@@ -78,19 +92,6 @@
padding-left: 0.2rem;
}
- .icon-gf {
- position: relative;
- top: 2px;
- font-size: 20px;
- line-height: 8px;
- margin-right: 0.5rem;
- }
-
- > img {
- max-width: 27px;
- max-height: 27px;
- }
-
&--search {
padding: 1rem 1.5rem 0.75rem 1.5rem;
}
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 86011f41c28..aea9cc4e69d 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -73,6 +73,7 @@
position: relative;
font-size: 16px;
border: 1px solid transparent;
+ text-align: center;
img {
border-radius: 50%;
@@ -97,16 +98,17 @@
width: 35px;
height: 35px;
display: inline-block;
- i {
+
+ .fa, .icon-gf, .gicon {
color: $link-color;
- opacity: .7;
position: relative;
- left: 3px;
+ opacity: .7;
font-size: 130%;
}
.fa {
top: 2px;
+ position: relative;
}
.icon-gf {
@@ -114,7 +116,6 @@
}
img {
- left: 3px;
position: relative;
}
}