apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

sass refactoring and updating styles for list item elements

Browse Source
pull/9984/head
Torkel Ödegaard 8 years ago
parent a1d47d36f6
commit 458f6fc4b2
13 changed files with 58 additions and 93 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      public/app/plugins/panel/table/editor.html
  2. 22
      public/sass/_variables.dark.scss
  3. 21
      public/sass/_variables.light.scss
  4. 3
      public/sass/components/_filter-table.scss
  5. 13
      public/sass/components/_panel_dashlist.scss
  6. 2
      public/sass/components/_panel_graph.scss
  7. 9
      public/sass/components/_panel_pluginlist.scss
  8. 29
      public/sass/components/_panel_singlestat.scss
  9. 4
      public/sass/components/_panel_table.scss
  10. 16
      public/sass/components/_search.scss
  11. 4
      public/sass/components/_tables_lists.scss
  12. 16
      public/sass/mixins/_mixins.scss
  13. 6
      public/sass/pages/_playlist.scss

6
public/app/plugins/panel/table/editor.html
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;

16
public/sass/components/_search.scss
Unescape View File

@ -120,21 +120,20 @@
}
.search-item {
@include list-item();
@include left-brand-border();
display: flex;
height: 37px;
padding: 0px;
white-space: nowrap;
background-color: $tight-form-bg;
margin-bottom: 4px;
@include left-brand-border();
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
Unescape 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
Unescape 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
Unescape 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";

Write Preview
Loading…
Cancel
Save