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

sass refactoring and updating styles for list item elements

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-11-23 12:54:12 +01:00
parent a1d47d36f6
commit 458f6fc4b2
13 changed files with 60 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/panel/table/editor.html
View File

@ -35,16 +35,16 @@
<h5 class="section-heading">Paging</h5> <h5 class="section-heading">Paging</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Rows per page</label> <label class="gf-form-label width-8">Rows per page</label>
<input type="number" class="gf-form-input width-6" <input type="number" class="gf-form-input width-7"
placeholder="100" data-placement="right" placeholder="100" data-placement="right"
ng-model="editor.panel.pageSize" ng-model="editor.panel.pageSize"
ng-change="editor.render()" ng-change="editor.render()"
ng-model-onblur> ng-model-onblur>
</div> </div>
<gf-form-switch class="gf-form" label-class="width-8" switch-class="max-width-6" label="Scroll" checked="editor.panel.scroll" on-change="editor.render()"></gf-form-switch> <gf-form-switch class="gf-form" label-class="width-8" switch-class="max-width-7" label="Scroll" checked="editor.panel.scroll" on-change="editor.render()"></gf-form-switch>
<div class="gf-form max-width-17"> <div class="gf-form max-width-17">
<label class="gf-form-label width-8">Font size</label> <label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper width-6"> <div class="gf-form-select-wrapper width-7">
<select class="gf-form-input" <select class="gf-form-input"
ng-model="editor.panel.fontSize" ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes" ng-options="f for f in editor.fontSizes"

22
public/sass/_variables.dark.scss
View File

@ -21,6 +21,7 @@ $gray-4: #D8D9DA;
$gray-5: #ECECEC; $gray-5: #ECECEC;
$gray-6: #f4f5f8; $gray-6: #f4f5f8;
$gray-7: #fbfbfb; $gray-7: #fbfbfb;
$gray-blue: #292a2d;
$white: #fff; $white: #fff;
@ -108,14 +109,16 @@ $modal-backdrop-bg: #353c42 ;
$code-tag-bg: $gray-1; $code-tag-bg: $gray-1;
$code-tag-border: lighten($code-tag-bg, 2%); $code-tag-border: lighten($code-tag-bg, 2%);
// cards
$card-background: linear-gradient(135deg, #2f2f32, #262628);
$card-background-hover: linear-gradient(135deg, #343436, #262628);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
// Lists // Lists
$grafanaListBackground: $dark-4; $list-item-bg: $card-background;
$grafanaListAccent: lighten($dark-2, 2%); $list-item-hover-bg: lighten($gray-blue, 5%);
$grafanaListBorderTop: $dark-3; $list-item-link-color: $text-color;
$grafanaListBorderBottom: $black; $list-item-shadow: $card-shadow;
$grafanaListHighlight: #333;
$grafanaListMainLinkColor: $text-color;
// Scrollbars // Scrollbars
$scrollbarBackground: #3a3a3a; $scrollbarBackground: #3a3a3a;
@ -171,7 +174,7 @@ $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.
$input-border-focus: $input-border-color !default; $input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: $gray-1 !default; $input-color-placeholder: $gray-1 !default;
$input-label-bg: #292a2d; $input-label-bg: $gray-blue;
$input-label-border-color: transparent; $input-label-border-color: transparent;
$input-invalid-border-color: lighten($red, 5%); $input-invalid-border-color: lighten($red, 5%);
@ -292,11 +295,6 @@ $graph-tooltip-bg: $dark-1;
// images // images
$checkboxImageUrl: '../img/checkbox.png'; $checkboxImageUrl: '../img/checkbox.png';
// cards
$card-background: linear-gradient(135deg, #2f2f32, #262628);
$card-background-hover: linear-gradient(135deg, #343436, #262628);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
// info box // info box
$info-box-background: linear-gradient(100deg, #1a4552, #00374a); $info-box-background: linear-gradient(100deg, #1a4552, #00374a);

21
public/sass/_variables.light.scss
View File

@ -115,14 +115,16 @@ $modal-backdrop-bg: $body-bg;
$code-tag-bg: $gray-6; $code-tag-bg: $gray-6;
$code-tag-border: darken($code-tag-bg, 3%); $code-tag-border: darken($code-tag-bg, 3%);
// Lists // cards
$grafanaListBackground: #eaebee; $card-background: linear-gradient(135deg, $gray-5, $gray-6);
$grafanaListAccent: $gray-5; $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
$grafanaListBorderTop: $gray-3; $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
$grafanaListBorderBottom: $gray-3;
$grafanaListHighlight: $gray-5;
$grafanaListMainLinkColor: $text-color;
// Lists
$list-item-bg: $card-background;
$list-item-hover-bg: darken($gray-5, 5%);
$list-item-link-color: $text-color;
$list-item-shadow: $card-shadow;
// Tables // Tables
// ------------------------- // -------------------------
@ -308,11 +310,6 @@ $graph-tooltip-bg: $gray-5;
// images // images
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';
// cards
$card-background: linear-gradient(135deg, $gray-5, $gray-6);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
// info box // info box
$info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff); $info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff);

3
public/sass/components/_filter-table.scss
View File

@ -14,11 +14,10 @@
.filter-table { .filter-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
// table-layout: fixed;
} }
.filter-table tr { .filter-table tr {
background: $grafanaListBackground; background-color: $list-item-bg;
border-bottom: 3px solid $page-bg; border-bottom: 3px solid $page-bg;
} }

13
public/sass/components/_panel_dashlist.scss
View File

@ -8,22 +8,17 @@
} }
.dashlist-link { .dashlist-link {
display: block; @include list-item();
margin: 5px;
padding: 7px;
background-color: $tight-form-bg;
border: $input-btn-border-width solid $input-label-border-color;
.fa { .fa {
padding-top: 3px; padding-top: 3px;
} }
.dashlist-star { .dashlist-star {
float: right; float: right;
} }
.fa-star { .fa-star {
color: $orange; color: $orange;
} }
&:hover {
background-color: $tight-form-func-bg;
}
} }

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

@ -139,7 +139,7 @@
} }
.graph-legend-series:nth-child(odd) { .graph-legend-series:nth-child(odd) {
background-color: $grafanaListAccent; background: $table-bg-accent;
} }
.graph-legend-value { .graph-legend-value {

9
public/sass/components/_panel_pluginlist.scss
View File

@ -8,14 +8,7 @@
} }
.pluginlist-link { .pluginlist-link {
display: block; @include list-item();
margin: 5px;
padding: 7px;
background-color: $tight-form-bg;
&:hover {
background-color: $tight-form-func-bg;
}
} }
.pluginlist-icon { .pluginlist-icon {

29
public/sass/components/_panel_singlestat.scss
View File

@ -19,35 +19,6 @@
padding-right: 20px; padding-right: 20px;
} }
.singlestat-panel-table {
width: 100%;
td {
padding: 5px 10px;
white-space: nowrap;
text-align: right;
border-bottom: 1px solid $grafanaListBorderBottom;
}
th {
text-align: right;
padding: 5px 10px;
font-weight: bold;
color: $blue
}
td:first-child {
text-align: left;
}
tr:nth-child(odd) td {
background-color: $grafanaListAccent;
}
tr:last-child td {
border: none;
}
}
#flotGagueValue0 { #flotGagueValue0 {
font-weight: bold; //please dont hurt me for this! font-weight: bold; //please dont hurt me for this!
} }

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

@ -27,9 +27,11 @@
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;
} }
ul > li { ul > li {
display: inline; // Remove list-style and block-level defaults display: inline; // Remove list-style and block-level defaults
} }
ul > li > a { ul > li > a {
float: left; // Collapse white-space float: left; // Collapse white-space
padding: 4px 12px; padding: 4px 12px;
@ -109,7 +111,7 @@
} }
.table-panel-header-bg { .table-panel-header-bg {
background: $grafanaListAccent; background: $list-item-bg;
border-top: 2px solid $body-bg; border-top: 2px solid $body-bg;
border-bottom: 2px solid $body-bg; border-bottom: 2px solid $body-bg;
height: 2.0em; height: 2.0em;

20
public/sass/components/_search.scss
View File

@ -120,21 +120,20 @@
} }
.search-item { .search-item {
display: flex; @include list-item();
height: 37px;
padding: 0px;
white-space: nowrap;
background-color: $tight-form-bg;
margin-bottom: 4px;
@include left-brand-border(); @include left-brand-border();
display: flex;
height: 37px;
white-space: nowrap;
padding: 0px;
&:hover { &:hover {
@include left-brand-border-gradient(); @include left-brand-border-gradient($gray-blue);
background-color: $tight-form-func-bg;
} }
&.selected { &.selected {
background-color: $tight-form-func-bg; background: $list-item-hover-bg;
} }
// .fa-star, .fa-star-o { // .fa-star, .fa-star-o {
@ -156,11 +155,10 @@
} }
.search-item__body-title { .search-item__body-title {
color: $grafanaListMainLinkColor; color: $list-item-link-color;
} }
.search-item__body-sub-title { .search-item__body-sub-title {
color: $grafanaListMainLinkColor;
color: $text-muted; color: $text-muted;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: 9pt; line-height: 9pt;

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

@ -8,7 +8,7 @@
} }
tr td { tr td {
background-color: $grafanaListBackground; background-color: $list-item-bg;
padding: 5px 10px; padding: 5px 10px;
white-space: nowrap; white-space: nowrap;
border-bottom: 4px solid $panel-bg; border-bottom: 4px solid $panel-bg;
@ -37,7 +37,7 @@
display: block; display: block;
padding: 1px 10px; padding: 1px 10px;
line-height: 34px; line-height: 34px;
background-color: $tight-form-bg; background-color: $list-item-bg;
margin-bottom: 4px; margin-bottom: 4px;
cursor: pointer; cursor: pointer;
} }

16
public/sass/mixins/_mixins.scss
View File

@ -330,8 +330,8 @@
background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
} }
@mixin left-brand-border() { @mixin left-brand-border($color: transparent) {
border-left: 2px solid transparent; border-left: 2px solid $color;
} }
@mixin left-brand-border-gradient() { @mixin left-brand-border-gradient() {
@ -355,4 +355,16 @@
border-bottom-width: 1px; border-bottom-width: 1px;
} }
@mixin list-item() {
display: block;
margin: 3px;
padding: 7px;
background: $list-item-bg;
box-shadow: $list-item-shadow;
color: $list-item-link-color;
&:hover {
background-color: $list-item-hover-bg;
}
}

6
public/sass/pages/_playlist.scss
View File

@ -51,7 +51,7 @@
line-height: 28px; line-height: 28px;
.search-item:hover, .search-item.selected { .search-item:hover, .search-item.selected {
background-color: $grafanaListHighlight; background-color: $list-item-hover-bg;
} }
.selected { .selected {
@ -70,7 +70,7 @@
} }
.search-result-link { .search-result-link {
color: $grafanaListMainLinkColor; color: $list-item-link-color;
.fa { .fa {
padding-right: 10px; padding-right: 10px;
} }
@ -80,7 +80,7 @@
display: block; display: block;
padding: 3px 10px; padding: 3px 10px;
white-space: nowrap; white-space: nowrap;
background-color: $grafanaListBackground; background-color: $list-item-bg;
margin-bottom: 4px; margin-bottom: 4px;
.search-result-icon:before { .search-result-icon:before {
content: "\f009"; content: "\f009";