mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge branch 'develop' into 9879-login
This commit is contained in:
Johannes Schill
81
public/sass/components/_dashboard_settings.scss
Normal file
81
public/sass/components/_dashboard_settings.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
.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;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
i {
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-settings__header {
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $spacer*2;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,19 +1,57 @@
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
padding-left: $side-menu-width;
|
||||
// box-shadow: $navbarShadow;
|
||||
margin-left: 40px;
|
||||
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;
|
||||
}
|
||||
|
||||
.sidemenu-open {
|
||||
@mixin navbar-alt-look() {
|
||||
background: $page-header-bg;
|
||||
box-shadow: $search-shadow;
|
||||
border-bottom: $navbarBorder;
|
||||
}
|
||||
|
||||
|
||||
.dashboard-page--settings-open {
|
||||
.navbar {
|
||||
padding-left: 15px;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,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%;
|
||||
@@ -44,29 +83,22 @@
|
||||
line-height: 8px;
|
||||
opacity: 0.75;
|
||||
margin-right: 8px;
|
||||
// icon hidden on smaller screens
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -78,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;
|
||||
@@ -94,7 +126,7 @@
|
||||
}
|
||||
|
||||
&--add-panel {
|
||||
padding: 5px 10px;
|
||||
padding: 3px 10px;
|
||||
|
||||
.gicon {
|
||||
font-size: 22px;
|
||||
@@ -102,7 +134,7 @@
|
||||
}
|
||||
|
||||
&--tight {
|
||||
padding: 9px 4px;
|
||||
padding: 7px 4px;
|
||||
|
||||
.fa {
|
||||
font-size: 14px;
|
||||
@@ -110,4 +142,28 @@
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.navbar {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.sidemenu-open {
|
||||
.navbar {
|
||||
padding-left: 15px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-page-btn {
|
||||
.gicon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -193,7 +193,7 @@
|
||||
}
|
||||
|
||||
.graph-legend-popover {
|
||||
width: 200px;
|
||||
width: 210px;
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -33,6 +33,10 @@
|
||||
.gf-form-label {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.gf-form + .gf-form {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-query-content {
|
||||
|
||||
@@ -83,6 +83,20 @@
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
.search-filter-box-link {
|
||||
display:block;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i, img {
|
||||
font-size: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-container {
|
||||
height: 100%;
|
||||
display: block;
|
||||
@@ -108,31 +122,27 @@
|
||||
.search-section {
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
padding: $panel-padding;
|
||||
padding: 0px 4px 4px 4px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.search-section__header {
|
||||
font-size: $font-size-h6;
|
||||
padding: 8px 0 2px 0;
|
||||
padding: 7px 4px 3px 0;
|
||||
color: $text-color-weak;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover, &.selected {
|
||||
color: $link-hover-color;
|
||||
|
||||
.search-section__header__toggle {
|
||||
background: $tight-form-func-bg;
|
||||
color: $link-hover-color;
|
||||
}
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.search-section__header__icon {
|
||||
padding: 2px 10px;
|
||||
width: 35px;
|
||||
padding: 5px 0px;
|
||||
width: 43px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-section__header__toggle {
|
||||
@@ -141,11 +151,11 @@
|
||||
|
||||
.search-section__header__text {
|
||||
flex-grow: 1;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
@include list-item();
|
||||
@include left-brand-border();
|
||||
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
@@ -154,7 +164,6 @@
|
||||
padding: 0px;
|
||||
|
||||
&:hover, &.selected {
|
||||
@include left-brand-border-gradient();
|
||||
background: $list-item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
.sidemenu__close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// body class that hides sidemenu
|
||||
@@ -191,12 +190,6 @@ li.sidemenu-org-switcher {
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.sidemenu-open {
|
||||
.navbar {
|
||||
padding-left: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-open--xs {
|
||||
.sidemenu {
|
||||
width: 100%;
|
||||
@@ -227,7 +220,7 @@ li.sidemenu-org-switcher {
|
||||
}
|
||||
|
||||
.sidemenu__logo_small_breakpoint {
|
||||
padding: 12px 10px 26px;
|
||||
padding: 16px 10px 26px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -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 {
|
||||
@@ -104,10 +104,12 @@
|
||||
.gf-form-switch--transparent {
|
||||
input + label {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input + label::before, input + label::after {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
padding: 0;
|
||||
|
||||
.tabbed-view-header {
|
||||
padding: 1.5em 1rem 0 1rem;
|
||||
padding: 0px 25px;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user