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

Styles & Theme: Inline form styles polish & tweaks (#23521)

Browse Source 
* Styles: Refactoring and tweaks to inline form styles

* Minor change

* Minor fix

* Updated snapshot

* tweaks

* minor tweak

* Updated modal style

* Updated snapshot

* Updated more snapshots
This commit is contained in:
Torkel Ödegaard
2020-04-13 09:58:40 +02:00
committed by GitHub
parent d4516439ec
commit 8b7decf57b
39 changed files with 133 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/sass/_variables.dark.generated.scss
View File

@@ -56,7 +56,6 @@ $gray-4: #d8d9da;
$gray-5: #ececec;
$gray-6: #f4f5f8;
$gray-blue: #212327;
$input-black: #0b0c0e;
$white: #ffffff;
@@ -68,7 +67,7 @@ $red: $red-base;
$yellow: #ecbb13;
$orange: #eb7b18;
$purple: #9933cc;
$variable: #32d1df;
$variable: #339ae5;
$brand-primary: #eb7b18;
$brand-success: #299c46;
@@ -79,10 +78,9 @@ $query-red: #e02f44;
$query-green: #74e680;
$query-purple: #fe85fc;
$query-orange: #eb7b18;
$query-keyword: #66d9ef;
// Status colors
// -------------------------
// -------------------------¨
$online: #299c46;
$warn: #f79520;
$critical: #e02f44;
@@ -98,6 +96,7 @@ $text-color-strong: #ffffff;
$text-color-weak: #8e8e8e;
$text-color-faint: #222426;
$text-color-emphasis: #ececec;
$text-blue: #339ae5;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none;
@@ -125,7 +124,7 @@ $hr-border-color: $dark-9;
// -------------------------
$panel-bg: #141619;
$panel-border: 1px solid #202226;
$panel-header-hover-bg: #343b40;
$panel-header-hover-bg: #202226;
$panel-corner: $panel-bg;
// page header
@@ -153,7 +152,7 @@ $list-item-bg: $card-background;
$list-item-hover-bg: $card-background-hover;
$list-item-shadow: $card-shadow;
$empty-list-cta-bg: $gray-blue;
$empty-list-cta-bg: #202226;
// Scrollbars
$scrollbarBackground: #404357;
@@ -206,13 +205,12 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: #c7d0d9;
$input-border-color: #202226;
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
$input-border-color: #343b40;
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: #555555;
$input-label-bg: #202226;
$input-label-border-color: #202226;
$input-color-select-arrow: $white;
// Search
@@ -252,14 +250,15 @@ $navbar-button-border: #2f2f32;
$side-menu-bg: $panel-bg;
$side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: $dark-3;
$side-menu-item-hover-bg: #202226;
$side-menu-shadow: 0 0 20px black;
$side-menu-link-color: #9fa7b3;
$side-menu-icon-color: #9fa7b3;
$side-menu-header-color: #c7d0d9;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $panel-bg;
$menu-dropdown-hover-bg: $dark-3;
$menu-dropdown-bg: #141619;
$menu-dropdown-hover-bg: #202226;
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
// Tabs
@@ -357,7 +356,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$switch-bg: $input-bg;
$switch-slider-color: $dark-3;
$switch-slider-off-bg: $gray-1;
$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
$switch-slider-on-bg: #5794f2;
$switch-slider-shadow: 0 0 3px black;
//Checkbox
@@ -381,7 +380,7 @@ $panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-blue;
$panel-options-group-header-bg: #202226;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;

8
public/sass/_variables.generated.scss
View File

@@ -145,13 +145,7 @@ $link-hover-decoration: none !default;
// Forms
$input-line-height: 18px !default;
$input-border-radius: 0 $border-radius $border-radius 0 !default;
$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
$label-border-radius: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
$input-border-radius: $border-radius;
$input-padding: 0 8px;
$input-height: 32px !default;

15
public/sass/_variables.light.generated.scss
View File

@@ -61,7 +61,7 @@ $red: $red-base;
$yellow: #ff851b;
$orange: #ff7941;
$purple: #9954bb;
$variable: #0083b3;
$variable: #339ae5;
$brand-primary: #ff7941;
$brand-success: #3eb15b;
@@ -72,7 +72,6 @@ $query-red: #e02f44;
$query-green: #3eb15b;
$query-purple: #9954bb;
$query-orange: #ff7941;
$query-keyword: #3274d9;
// Status colors
// -------------------------
@@ -91,6 +90,7 @@ $text-color-strong: #41444b;
$text-color-weak: #767980;
$text-color-faint: #35373f;
$text-color-emphasis: #41444b;
$text-blue: #339ae5;
$text-shadow-faint: none;
@@ -117,7 +117,7 @@ $hr-border-color: $gray-4 !default;
// -------------------------
$panel-bg: #ffffff;
$panel-border: 1px solid #e9edf2;
$panel-header-hover-bg: $gray-6;
$panel-header-hover-bg: #f7f8fa;
$panel-corner: $gray-4;
// Page header
@@ -198,13 +198,12 @@ $input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: #343b40;
$input-border-color: #e9edf2;
$input-border-color: #c7d0d9;
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: #5794f2;
$input-color-placeholder: #9fa7b3;
$input-label-bg: #e9edf2;
$input-label-border-color: #e9edf2;
$input-label-bg: #f7f8fa;
$input-color-select-arrow: #7b8087;
// search
@@ -248,6 +247,8 @@ $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: #343b40;
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
$side-menu-link-color: $gray-4;
$side-menu-icon-color: #9fa7b3;
$side-menu-header-color: #e9edf2;
// Menu dropdowns
// -------------------------
@@ -348,7 +349,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$switch-bg: $white;
$switch-slider-color: $gray-7;
$switch-slider-off-bg: $gray-5;
$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
$switch-slider-on-bg: #1f60c4;
$switch-slider-shadow: 0 0 3px $dark-2;
//Checkbox

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

@@ -9,7 +9,7 @@
font-size: $font-size-md;
min-height: 50px; // Include space for horizontal scrollbar
@include border-radius($input-border-radius-sm);
@include border-radius($input-border-radius);
border: $border-width solid $input-border-color;
}

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

@@ -55,7 +55,6 @@
margin: 2px 0 0; // override default ul
list-style: none;
background-color: $dropdownBackground;
border: 1px solid #ccc; // Fallback for IE7-8
border: 1px solid $dropdownBorder;
text-align: left;
@@ -111,7 +110,6 @@
background: $menu-dropdown-bg;
box-shadow: $menu-dropdown-shadow;
margin-top: 0px;
border: none;
> li > a {
display: flex;

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

@@ -1,12 +1,12 @@
$input-border: 1px solid $input-border-color;
.gf-form {
margin-bottom: $space-xxs;
display: flex;
flex-direction: row;
align-items: flex-start;
text-align: left;
position: relative;
margin-bottom: $space-xs;
&--offset-1 {
margin-left: $spacer;
@@ -83,13 +83,13 @@ $input-border: 1px solid $input-border-color;
flex-wrap: wrap;
align-content: flex-start;
.gf-form + .gf-form {
margin-left: $space-xs;
}
&--nowrap {
flex-wrap: nowrap;
}
.select-container {
margin-right: $space-xs;
}
}
.gf-form-button-row {
@@ -107,13 +107,11 @@ $input-border: 1px solid $input-border-color;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
font-size: $font-size-sm;
background-color: $input-label-bg;
height: $input-height;
border: $border-width solid $input-label-border-color;
border-right: none;
border-radius: $label-border-radius;
margin-right: $space-xs;
border-radius: $input-border-radius;
justify-content: space-between;
&--grow {
flex-grow: 1;
@@ -134,11 +132,10 @@ $input-border: 1px solid $input-border-color;
color: $variable;
background: $panel-bg;
border: $panel-border;
border-right: none;
}
&--btn {
border-right: $border-width solid $input-label-border-color;
border: none;
border-radius: $border-radius;
&:hover {
@@ -167,7 +164,7 @@ $input-border: 1px solid $input-border-color;
margin-right: $space-xs;
border: $border-width solid transparent;
border-left: none;
@include border-radius($label-border-radius-sm);
@include border-radius($input-border-radius);
}
.gf-form-textarea {
@@ -187,7 +184,7 @@ $input-border: 1px solid $input-border-color;
background-clip: padding-box;
border: $input-border;
border-radius: $input-border-radius;
@include box-shadow($input-box-shadow);
margin-right: $space-xs;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -274,6 +271,7 @@ $input-border: 1px solid $input-border-color;
.gf-form-select-wrapper {
position: relative;
background-color: $input-bg;
margin-right: $space-xs;
.gf-form-select-icon {
position: absolute;

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

@@ -124,7 +124,6 @@ i.navbar-page-btn__search {
align-items: center;
font-weight: $btn-font-weight;
padding: 0 $space-sm;
line-height: 32px;
height: 32px;
color: $text-muted;
border: 1px solid $navbar-button-border;

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

@@ -1,6 +1,6 @@
.query-keyword {
font-weight: $font-weight-semi-bold;
color: $blue;
color: $text-blue;
}
.query-segment-operator {

7
public/sass/components/_sidemenu.scss
View File

@@ -65,6 +65,7 @@ $mobile-menu-breakpoint: md;
@include left-brand-border-gradient();
.dropdown-menu {
border: none;
margin: 0;
display: block;
opacity: 0;
@@ -84,7 +85,7 @@ $mobile-menu-breakpoint: md;
}
.sidemenu-link {
color: $side-menu-link-color !important;
color: $side-menu-icon-color !important;
line-height: 42px;
padding: 0px 10px 0px 10px;
display: block;
@@ -128,11 +129,11 @@ $mobile-menu-breakpoint: md;
white-space: nowrap;
background-color: $side-menu-item-hover-bg;
font-size: 17px;
color: $side-menu-link-color;
color: $side-menu-header-color;
}
.side-menu-header-link {
color: $side-menu-link-color !important;
color: $side-menu-header-color !important;
border: none !important;
padding: 0 !important;
}

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

@@ -130,7 +130,7 @@
.token.atrule,
.token.keyword,
.token.class-name {
color: $query-keyword;
color: $text-blue;
}
.token.punctuation,

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

@@ -21,6 +21,7 @@ gf-form-switch[disabled] {
.gf-form-switch-container {
display: flex;
cursor: pointer;
margin-right: $space-xs;
}
.gf-form-switch {
@@ -30,7 +31,6 @@ gf-form-switch[disabled] {
height: $input-height;
background: $switch-bg;
border: 1px solid $input-border-color;
border-left: none;
border-radius: $input-border-radius;
align-items: center;
justify-content: center;