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

ux(): began long on tiresome work on color refactors, polished button styles, added buttons to styleguide

Browse Source
pull/4072/head
Torkel Ödegaard 10 years ago
parent ac1648c946
commit e24e34619a
10 changed files with 57 additions and 51 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. 36
      public/app/features/styleguide/styleguide.html
  2. 2
      public/app/partials/login.html
  3. 23
      public/sass/_variables.dark.scss
  4. 8
      public/sass/_variables.light.scss
  5. 2
      public/sass/_variables.scss
  6. 4
      public/sass/components/_buttons.scss
  7. 20
      public/sass/components/_tags.scss
  8. 4
      public/sass/mixins/_buttons.scss
  9. 7
      public/sass/pages/_styleguide.scss
  10. 2
      public/sass/utils/_utils.scss

36
public/app/features/styleguide/styleguide.html
Unescape View File

@ -15,13 +15,35 @@
</a>
</div>
<tabset>
<tab heading="Colors">
<ul>
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
<strong>${{color.name}}</strong>
<em>{{color.value}}</em>
</li>
</ul>
</tab>
<tab heading="Buttons">
<h3 class="page-heading">Colors</h3>
<ul>
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
<strong>${{color.name}}</strong>
<em>{{color.value}}</strong>
</li>
</ul>
<div class="style-guide-button-list p-a-2">
<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-info">btn-info</button>
<button class="btn btn-inverse">btn-inverse</button>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-warning">btn-warning</button>
<button class="btn btn-danger">btn-danger</button>
</div>
<div class="style-guide-button-list p-a-2">
<button class="btn btn-primary btn-small">btn-small</button>
<button class="btn btn-success btn-large">btn-large</button>
</div>
</tab>
<tab heading="Forms">
</tab>
</tabset>
</div>

2
public/app/partials/login.html
Unescape View File

@ -33,7 +33,7 @@
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-large" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
<button type="submit" class="btn btn-large p-x-3" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
{{submitBtnText}}
</button>
</div>

23
public/sass/_variables.dark.scss
Unescape View File

@ -20,14 +20,14 @@ $blue-dark: #005f81;
$green: #669900;
$red: #CC3900;
$yellow: #ECBB13;
$orange: #FF8800;
$pink: #FF4444;
$purple: #9933CC;
$variable: #32D1DF;
$orange: #FF8800;
$brand-primary: $blue-dark;
$brand-primary: $orange;
$brand-success: $green;
$brand-warning: $orange;
$brand-warning: $brand-primary;
$brand-danger: $red;
// Status colors
@ -103,21 +103,18 @@ $table-border: $gray-dark; // table and cell border
// Buttons
// -------------------------
$btnBackground: $gray-dark;
$btnBackgroundHighlight: darken($gray-light, 15%);
$btnBorder: #bbb;
$btnPrimaryBackground: $blue-dark;
$btnPrimaryBackgroundHighlight: lighten($blue-dark, 5%);
$btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btnInfoBackground: lighten($purple, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%);
$btnSuccessBackground: lighten($green, 3%);
$btnSuccessBackgroundHighlight: darken($green, 3%);
$btnSuccessBackground: lighten($green, 3%);
$btnWarningBackground: lighten($orange, 3%);
$btnWarningBackgroundHighlight: darken($orange, 3%);
$btnWarningBackground: $brand-warning;
$btnWarningBackgroundHighlight: lighten($brand-warning, 8%);
$btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%);
@ -216,8 +213,8 @@ $paginationActiveBackground: $blue;
// Form states and alerts
// -------------------------
$state-warning-text: darken(#c09853, 10%);
$state-warning-bg: $orange;
$state-warning-text: darken(#c09853, 10%);
$state-warning-bg: $brand-warning;
$errorText: #b94a48;
$errorBackground: $btnDangerBackground;

8
public/sass/_variables.light.scss
Unescape View File

@ -23,7 +23,7 @@ $white: #fff;
// Accent colors
// -------------------------
$blue: #2AB2E4;
$blue-dark: #75CAEB;
$blue-dark: #75CAEB;
$green: #28B62C;
$red: #FF4136;
$yellow: #FF851B;
@ -32,7 +32,7 @@ $pink: #E671B8;
$purple: #9954BB;
$variable: #2AB2E4;
$brand-primary: $blue-dark;
$brand-primary: $orange;
$brand-success: $green;
$brand-warning: $orange;
$brand-danger: $red;
@ -124,8 +124,8 @@ $btnBackground: $gray-lighter;
$btnBackgroundHighlight: darken($gray-lighter, 15%);
$btnBorder: #bbb;
$btnPrimaryBackground: lighten($blue, 3%);
$btnPrimaryBackgroundHighlight: darken($blue, 3%);
$btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 10%);
$btnInfoBackground: lighten($purple, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%);

2
public/sass/_variables.scss
Unescape View File

@ -218,7 +218,7 @@ $btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default;
$btn-border-radius: 1px;
$btn-border-radius: 3px;
// sidemenu
$side-menu-width: 15rem;

4
public/sass/components/_buttons.scss
Unescape View File

@ -67,7 +67,7 @@
// Set the backgrounds
// -------------------------
.btn-primary {
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
}
// Warning appears are orange
.btn-warning {
@ -93,7 +93,7 @@
}
.btn-outline-primary {
@include button-outline-variant($btnPrimaryBackground);
@include button-outline-variant($btn-primary-bg);
}
.btn-outline-secondary {
@include button-outline-variant($btnInverseBackground);

20
public/sass/components/_tags.scss
Unescape View File

@ -38,23 +38,3 @@
}
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label,
.badge {
// Important (red)
&-important { background-color: $errorText; }
&-important[href] { background-color: darken($errorText, 10%); }
// Warnings (orange)
&-warning { background-color: $orange; }
&-warning[href] { background-color: darken($orange, 10%); }
// Success (green)
&-success { background-color: $successText; }
&-success[href] { background-color: darken($successText, 10%); }
// Info (turquoise)
&-info { background-color: $infoText; }
&-info[href] { background-color: darken($infoText, 10%); }
// Inverse (black)
&-inverse { background-color: $gray-dark; }
&-inverse[href] { background-color: darken($gray-dark, 10%); }
}

4
public/sass/mixins/_buttons.scss
Unescape View File

@ -9,7 +9,7 @@
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: $text-color;
background-image: none;
background-color: darken($endColor, 2%);
background-color: $startColor;
}
}
@ -18,7 +18,7 @@
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
box-shadow: inset 0 (-$padding-y/2) rgba(0,0,0,0.2);
//box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15);
@include border-radius($border-radius);
}

7
public/sass/pages/_styleguide.scss
Unescape View File

@ -14,6 +14,13 @@
.color-card-page-bg { background-color: $page-bg; }
.color-card-gray { background-color: $gray; }
.style-guide-button-list {
padding: $spacer;
button {
margin: 0 $spacer $spacer 0;
}
}
// define("areas/styleguide/static/script/app/colors", [], function() {
// "use strict";
// var a = function(a) {

2
public/sass/utils/_utils.scss
Unescape View File

@ -3,7 +3,7 @@
}
.highlight-word {
color: $orange;
color: $brand-primary;
}
// Close icons

Write Preview
Loading…
Cancel
Save