Skip to content

N
nexpie-grafana-theme
Commit e24e3461 by Torkel Ödegaard
Options

ux(): began long on tiresome work on color refactors, polished button styles,… 

ux(): began long on tiresome work on color refactors, polished button styles, added buttons to styleguide
parent ac1648c9
Showing with 57 additions and 51 deletions
public/app/features/styleguide/styleguide.html
......@@ -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>
public/app/partials/login.html
......@@ -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>
......
public/sass/_variables.dark.scss
......@@ -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;
......
public/sass/_variables.light.scss
......@@ -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%);
......
public/sass/_variables.scss
......@@ -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;
public/sass/components/_buttons.scss
......@@ -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);
......
public/sass/components/_tags.scss
......@@ -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%); }
}
public/sass/mixins/_buttons.scss
......@@ -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);
}
......
public/sass/pages/_styleguide.scss
......@@ -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) {
......
public/sass/utils/_utils.scss
......@@ -3,7 +3,7 @@
}
.highlight-word {
color: $orange;
color: $brand-primary;
}
// Close icons
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment