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

Merge branch 'develop-settings' into develop

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-12-12 12:03:10 +01:00
parent 515faa9ec5 7b0bbefb96
commit bbd0b98be9
52 changed files with 1139 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
public/sass/components/_dashboard_settings.scss Normal file
View File

@@ -0,0 +1,80 @@
.dashboard-settings {
opacity: 0;
height: 100%;
display: flex;
flex-direction: row;
}
.dashboard-page--settings-opening {
.dashboard-container {
display: none;
}
}
.dashboard-page--settings-open {
.dashboard-settings {
opacity: 1;
transition: opacity 300ms ease-in-out;
}
}
.dashboard-settings__content {
flex-grow: 1;
min-width: 0;
height: 100%;
padding: 30px;
}
.dashboard-settings__aside {
padding: 30px 0 0 30px;
background: $panel-bg;
display: flex;
flex-direction: column;
}
.dashboard-settings__aside-header {
color: $text-muted;
font-size: $font-size-h3;
padding-right: 60px;
white-space: nowrap;
i {
font-size: 25px;
position: relative;
top: 1px;
padding-right: 5px;
}
}
.dashboard-settings__header {
font-size: $font-size-h3;
margin-bottom: 20px;
}
.dashboard-settings__nav-item {
padding: 7px 12px;
color: $text-color;
font-size: $font-size-md;
@include left-brand-border;
&.active {
@include left-brand-border-gradient();
background: $page-bg;
}
i {
padding-right: 5px;
}
}
.dashboard-settings__aside-actions {
display: flex;
flex-direction: column;
height: 100%;
flex-grow: 1;
margin: $spacer*3 $spacer*2 0 0;
button {
margin-bottom: 10px;
}
}

27
public/sass/components/_empty_list_cta.scss
View File

@@ -1,21 +1,24 @@
.empty-list-cta {
background-color: $search-filter-box-bg;
text-align: center;
.empty-list-cta {
background-color: $search-filter-box-bg;
text-align: center;
padding: $spacer*2;
border-radius: $border-radius;
.grafana-info-box {
max-width: 700px;
margin: 0 auto;
}
}
.empty-list-cta__title {
padding-bottom: 30px;
font-style: italic;
padding-bottom: $spacer*3;
font-style: italic;
}
.empty-list-cta__button {
margin-bottom: 50px;
}
.empty-list-cta__pro-tip {
padding-bottom: 20px;
margin-bottom: $spacer*3;
}
.empty-list-cta__pro-tip-link {
margin-left: 5px;
}
margin-left: 5px;
}

12
public/sass/components/_gf-form.scss
View File

@@ -66,6 +66,7 @@ $input-border: 1px solid $input-border-color;
padding: $input-padding-y $input-padding-x;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
font-size: $font-size-sm;
background-color: $input-label-bg;
display: block;
@@ -84,6 +85,14 @@ $input-border: 1px solid $input-border-color;
}
}
.gf-form-label + .gf-form-label {
margin-right: $gf-form-margin;
}
.gf-form + .gf-form {
margin-right: $gf-form-margin;
}
.gf-form-pre {
display: block;
flex-grow: 1;
@@ -253,9 +262,6 @@ $input-border: 1px solid $input-border-color;
margin-right: $gf-form-margin;
line-height: $input-line-height;
font-size: $font-size-sm;
box-shadow: none;
@include border-radius($label-border-radius-sm);
border: $input-btn-border-width solid transparent;
flex-shrink: 0;
flex-grow: 0;

10
public/sass/components/_infobox.scss
View File

@@ -1,13 +1,3 @@
// .grafana-info-box::before {
// content: "\f05a";
// font-family:'FontAwesome';
// position: absolute;
// top: -13px;
// left: -8px;
// font-size: 20px;
// color: $text-color;
// }
.grafana-info-box {
position: relative;
background: $info-box-background;

83
public/sass/components/_navbar.scss
View File

@@ -2,13 +2,57 @@
.navbar {
position: relative;
margin-left: 40px;
// box-shadow: $navbarShadow;
z-index: $zindex-navbar-fixed;
// background: $navbarBackground;
height: $navbarHeight;
padding-right: $spacer;
display: flex;
flex-grow: 1;
border-bottom: 1px solid transparent;
transition: all 350ms ease-in-out;
}
@mixin navbar-alt-look() {
background: $page-header-bg;
box-shadow: $search-shadow;
border-bottom: $navbarBorder;
}
.dashboard-page--settings-open {
.navbar {
@include navbar-alt-look();
}
.navbar-button--add-panel,
.navbar-button--star,
.navbar-button--share,
.navbar-button--settings,
.navbar-page-btn .fa-caret-down,
.gf-timepicker-nav {
display: none;
}
.navbar-buttons--close {
display: flex;
}
}
.panel-in-fullscreen {
.navbar {
@include navbar-alt-look();
}
.navbar-button--add-panel,
.navbar-button--star,
.navbar-button--save,
.navbar-button--settings,
.navbar-page-btn .fa-caret-down {
display: none;
}
.navbar-buttons--close {
display: flex;
}
}
.navbar-page-btn {
@@ -19,8 +63,9 @@
margin: 0;
color: darken($link-color, 5%);
font-size: $font-size-lg;
padding: 1rem 1rem 0.75rem 1rem;
padding-left: 1rem;
min-height: $navbarHeight;
line-height: $navbarHeight;
.fa-caret-down {
font-size: 60%;
@@ -43,26 +88,17 @@
}
}
.navbar-page-btn-wrapper {
display: inline-block;
position: relative;
}
.navbar-section-wrapper {
position: relative;
float: left;
}
.navbar-mini-btn-wrapper {
padding: 15px;
}
.navbar-buttons {
height: $navbarHeight;
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: $spacer;
&--close {
display: none;
margin-right: 0;
}
}
.navbar__spacer {
@@ -74,7 +110,7 @@
display: inline-block;
font-weight: $btn-font-weight;
padding: 8px 11px;
padding: 6px 11px;
line-height: 16px;
color: $text-muted;
border: 1px solid $navbar-button-border;
@@ -90,7 +126,7 @@
}
&--add-panel {
padding: 5px 10px;
padding: 3px 10px;
.gicon {
font-size: 22px;
@@ -98,7 +134,7 @@
}
&--tight {
padding: 9px 4px;
padding: 7px 4px;
.fa {
font-size: 14px;
@@ -106,6 +142,10 @@
top: 2px;
}
}
&--primary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
}
}
@include media-breakpoint-up(sm) {
@@ -115,7 +155,8 @@
.sidemenu-open {
.navbar {
margin-left: 15px;
padding-left: 15px;
margin-left: 0;
}
}

4
public/sass/components/_query_editor.scss
View File

@@ -33,6 +33,10 @@
.gf-form-label {
margin-right: 2px;
}
.gf-form + .gf-form {
margin-right: 0;
}
}
.gf-form-query-content {

2
public/sass/components/_switch.scss
View File

@@ -27,6 +27,7 @@
background: $input-bg;
border: 1px solid $input-border-color;
border-left: none;
border-radius: $input-border-radius;
}
input + label::before, input + label::after {
@@ -45,7 +46,6 @@
display: flex;
flex-direction: column;
justify-content: center;
border-radius: $input-border-radius;
}
&:hover {

3
public/sass/components/_tabbed_view.scss
View File

@@ -6,7 +6,8 @@
padding: 0;
.tabbed-view-header {
padding: 1.5em 1rem 0 1rem;
padding: 0px 25px;
background: none;
}
}
}

6
public/sass/components/_tabs.scss
View File

@@ -18,11 +18,17 @@
border: solid transparent;
border-width: 0 1px 1px;
border-radius: 3px 3px 0 0;
color: $text-color;
i {
margin-right: 5px;
}
.gicon {
position: relative;
top: -2px;
}
&:hover,
&:focus {
color: $link-hover-color;

15
public/sass/components/_timepicker.scss
View File

@@ -13,17 +13,18 @@
}
.gf-timepicker-dropdown {
margin: -8px -10px 10px 5px;
position: absolute;
top: $navbarHeight;
right: 0;
padding: 10px 20px;
float: right;
background-color: $panel-bg;
@include box-shadow($navbarDropdownShadow);
background-color: $page-bg;
border-radius: 0 0 0 4px;
box-shadow: $search-shadow;
}
.gf-timepicker-absolute-section {
width: 290px;
float: left;
border-right: 1px solid $divider-border-color;
padding: 0 10px;
select {
width: 183px;
@@ -41,7 +42,7 @@
font-size: 75%;
padding: 3px;
border-radius: 2px;
font-weight: bold;
font-weight: 500;
margin-left: 4px;
}
@@ -59,7 +60,7 @@
li.active {
border-bottom: 1px solid $blue;
margin: 3px 0;
font-weight: bold;
font-weight: 500;
}
}
}

16
public/sass/components/_view_states.scss
View File

@@ -1,19 +1,5 @@
@mixin hide-controls() {
.add-row-panel-hint,
.dash-row-menu-container {
display: none;
}
.panel-drop-zone {
visibility: hidden;
}
}
.hide-controls {
@include hide-controls();
}
.page-kiosk-mode {
@include hide-controls();
dashnav {
display: none;
}
@@ -45,7 +31,7 @@
background: transparent;
transform: translate3d(-40px, 0, 0);
transition: all 1.5s ease-in-out 1s;
.icon-gf {
i {
opacity: 0;
transition: all 1.5s ease-in-out 1s;
}