IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

added new icons, fixed so different icons in different themes, added animation to hover on icons, styled choose visualization and datasource for both themes, made som styling adjustments to whole panel editor

Browse Source
This commit is contained in:
ijin08
2018-11-28 15:51:45 +01:00
parent daee874ee6
commit 2c943d9aec
21 changed files with 732 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
public/sass/components/_panel_editor.scss
View File

@@ -34,10 +34,10 @@
flex-direction: column;
flex-grow: 1;
background: $page-bg;
margin: 0 62px;
border-left: 2px solid #ac5224;
margin: 0 20px 0 84px;
border-left: 2px solid $orange;
border-radius: 3px;
box-shadow: $popover-shadow;
box-shadow: $panel-editor-shadow;
}
.panel-editor__close {
@@ -69,7 +69,7 @@
}
.panel-editor__toolbar-view {
background: $black;
background: $panel-editor-toolbar-view-bg;
padding: 20px;
}
@@ -140,10 +140,10 @@
}
.viz-picker__item {
background: $panel-bg;
border: $panel-border;
background: $panel-editor-viz-item-bg;
border: $panel-editor-viz-item-border;
border-radius: 3px;
height: 90px;
height: 100px;
width: 150px;
flex-shrink: 0;
flex-direction: column;
@@ -152,15 +152,30 @@
display: flex;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid transparent;
//border: 1px solid transparent;
align-items: center;
justify-content: center;
padding-bottom: 6px;
transition: transform 1 ease;
&:hover {
background: $card-background-hover;
//background: $card-background-hover;
transform: scale(1.05);
box-shadow: $panel-editor-viz-item-shadow-hover;
background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover;
}
&--selected {
box-shadow: 0 0 12px #ff4d00;
box-shadow: 0 0 6px $orange;
border: 1px solid $orange;
&:hover {
transform: scale(1.05);
box-shadow: 0 0 6px $orange;
border: 1px solid $orange;
background: $panel-editor-viz-item-bg-hover-active;
}
}
}
@@ -173,6 +188,7 @@
flex-direction: column;
align-self: center;
height: 23px;
font-weight: 500;
}
.viz-picker__item-img {
@@ -185,19 +201,19 @@
display: flex;
flex-direction: column;
position: absolute;
top: 79px;
left: 9px;
top: 44px;
left: 20px;
align-items: flex-start;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
top: 10px;
bottom: 10px;
left: 21px;
width: 2px;
background: #8e8e8e;
background: $panel-editor-tabs-line-color;
}
}
@@ -219,8 +235,17 @@
position: relative;
}
img {
.gicon {
height: 44px;
width: 53px;
transition: transform 0.1s ease;
margin-right: 5px;
&:hover {
filter: $panel-editor-side-menu-shadow;
transform: translate(-2px, -2px);
transform: scale(1.1);
}
}
}
@@ -232,20 +257,28 @@
}
.ds-picker-list__item {
background: $panel-bg;
border: $panel-border;
background: $panel-editor-viz-item-bg;
border: $panel-editor-viz-item-border;
border-radius: 3px;
display: flex;
cursor: pointer;
margin-bottom: 3px;
padding: 5px 15px;
align-items: center;
height: 44px;
&:hover {
background: $card-background-hover;
transform: scaleY(1.1);
box-shadow: $panel-editor-viz-item-shadow-hover;
background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover;
}
&--selected {
box-shadow: 0 0 6px $orange;
border: 1px solid $orange;
.ds-picker-list__name {
color: $text-color;
}
@@ -290,3 +323,7 @@
.form-section__body {
padding: 0 10px;
}
.panel-editor-tabs__item-popover {
background: $orange;
}