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>
<div class="gf-form">
<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"
ng-model="editor.panel.pageSize"
ng-change="editor.render()"
ng-model-onblur>
</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">
<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"
ng-model="editor.panel.fontSize"
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-6: #f4f5f8;
$gray-7: #fbfbfb;
$gray-blue: #292a2d;
$white: #fff;
@ -108,14 +109,16 @@ $modal-backdrop-bg: #353c42 ;
$code-tag-bg: $gray-1;
$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
$grafanaListBackground: $dark-4;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black;
$grafanaListHighlight: #333;
$grafanaListMainLinkColor: $text-color;
$list-item-bg: $card-background;
$list-item-hover-bg: lighten($gray-blue, 5%);
$list-item-link-color: $text-color;
$list-item-shadow: $card-shadow;
// Scrollbars
$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-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: $gray-1 !default;
$input-label-bg: #292a2d;
$input-label-bg: $gray-blue;
$input-label-border-color: transparent;
$input-invalid-border-color: lighten($red, 5%);
@ -292,11 +295,6 @@ $graph-tooltip-bg: $dark-1;
// images
$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-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-border: darken($code-tag-bg, 3%);
// Lists
$grafanaListBackground: #eaebee;
$grafanaListAccent: $gray-5;
$grafanaListBorderTop: $gray-3;
$grafanaListBorderBottom: $gray-3;
$grafanaListHighlight: $gray-5;
$grafanaListMainLinkColor: $text-color;
// 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);
// 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
// -------------------------
@ -308,11 +310,6 @@ $graph-tooltip-bg: $gray-5;
// images
$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-background: linear-gradient(135deg, #f1fbff, #d7ebff);

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

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

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

@ -8,22 +8,17 @@
}
.dashlist-link {
display: block;
margin: 5px;
padding: 7px;
background-color: $tight-form-bg;
border: $input-btn-border-width solid $input-label-border-color;
@include list-item();
.fa {
padding-top: 3px;
}
.dashlist-star {
float: right;
}
.fa-star {
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) {
background-color: $grafanaListAccent;
background: $table-bg-accent;
}
.graph-legend-value {

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

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

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

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

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

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

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

@ -8,7 +8,7 @@
}
tr td {
background-color: $grafanaListBackground;
background-color: $list-item-bg;
padding: 5px 10px;
white-space: nowrap;
border-bottom: 4px solid $panel-bg;
@ -37,7 +37,7 @@
display: block;
padding: 1px 10px;
line-height: 34px;
background-color: $tight-form-bg;
background-color: $list-item-bg;
margin-bottom: 4px;
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);
}
@mixin left-brand-border() {
border-left: 2px solid transparent;
@mixin left-brand-border($color: transparent) {
border-left: 2px solid $color;
}
@mixin left-brand-border-gradient() {
@ -355,4 +355,16 @@
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;
.search-item:hover, .search-item.selected {
background-color: $grafanaListHighlight;
background-color: $list-item-hover-bg;
}
.selected {
@ -70,7 +70,7 @@
}
.search-result-link {
color: $grafanaListMainLinkColor;
color: $list-item-link-color;
.fa {
padding-right: 10px;
}
@ -80,7 +80,7 @@
display: block;
padding: 3px 10px;
white-space: nowrap;
background-color: $grafanaListBackground;
background-color: $list-item-bg;
margin-bottom: 4px;
.search-result-icon:before {
content: "\f009";