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 @@ ...@@ -15,13 +15,35 @@
</a> </a>
</div> </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> <div class="style-guide-button-list p-a-2">
<ul> <button class="btn btn-primary">btn-primary</button>
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}"> <button class="btn btn-info">btn-info</button>
<strong>${{color.name}}</strong> <button class="btn btn-inverse">btn-inverse</button>
<em>{{color.value}}</strong> <button class="btn btn-success">btn-success</button>
</li> <button class="btn btn-warning">btn-warning</button>
</ul> <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> </div>
public/app/partials/login.html
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
<div class="gf-form-button-row"> <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}} {{submitBtnText}}
</button> </button>
</div> </div>
......
public/sass/_variables.dark.scss
...@@ -20,14 +20,14 @@ $blue-dark: #005f81; ...@@ -20,14 +20,14 @@ $blue-dark: #005f81;
$green: #669900; $green: #669900;
$red: #CC3900; $red: #CC3900;
$yellow: #ECBB13; $yellow: #ECBB13;
$orange: #FF8800;
$pink: #FF4444; $pink: #FF4444;
$purple: #9933CC; $purple: #9933CC;
$variable: #32D1DF; $variable: #32D1DF;
$orange: #FF8800;
$brand-primary: $blue-dark; $brand-primary: $orange;
$brand-success: $green; $brand-success: $green;
$brand-warning: $orange; $brand-warning: $brand-primary;
$brand-danger: $red; $brand-danger: $red;
// Status colors // Status colors
...@@ -103,21 +103,18 @@ $table-border: $gray-dark; // table and cell border ...@@ -103,21 +103,18 @@ $table-border: $gray-dark; // table and cell border
// Buttons // Buttons
// ------------------------- // -------------------------
$btnBackground: $gray-dark;
$btnBackgroundHighlight: darken($gray-light, 15%);
$btnBorder: #bbb;
$btnPrimaryBackground: $blue-dark; $btn-primary-bg: $brand-primary;
$btnPrimaryBackgroundHighlight: lighten($blue-dark, 5%); $btn-primary-bg-hl: lighten($brand-primary, 8%);
$btnInfoBackground: lighten($purple, 3%); $btnInfoBackground: lighten($purple, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%); $btnInfoBackgroundHighlight: darken($purple, 3%);
$btnSuccessBackground: lighten($green, 3%);
$btnSuccessBackgroundHighlight: darken($green, 3%); $btnSuccessBackgroundHighlight: darken($green, 3%);
$btnSuccessBackground: lighten($green, 3%);
$btnWarningBackground: lighten($orange, 3%); $btnWarningBackground: $brand-warning;
$btnWarningBackgroundHighlight: darken($orange, 3%); $btnWarningBackgroundHighlight: lighten($brand-warning, 8%);
$btnDangerBackground: lighten($red, 3%); $btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%);
...@@ -216,8 +213,8 @@ $paginationActiveBackground: $blue; ...@@ -216,8 +213,8 @@ $paginationActiveBackground: $blue;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$state-warning-text: darken(#c09853, 10%); $state-warning-text: darken(#c09853, 10%);
$state-warning-bg: $orange; $state-warning-bg: $brand-warning;
$errorText: #b94a48; $errorText: #b94a48;
$errorBackground: $btnDangerBackground; $errorBackground: $btnDangerBackground;
......
public/sass/_variables.light.scss
...@@ -23,7 +23,7 @@ $white: #fff; ...@@ -23,7 +23,7 @@ $white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
$blue: #2AB2E4; $blue: #2AB2E4;
$blue-dark: #75CAEB; $blue-dark: #75CAEB;
$green: #28B62C; $green: #28B62C;
$red: #FF4136; $red: #FF4136;
$yellow: #FF851B; $yellow: #FF851B;
...@@ -32,7 +32,7 @@ $pink: #E671B8; ...@@ -32,7 +32,7 @@ $pink: #E671B8;
$purple: #9954BB; $purple: #9954BB;
$variable: #2AB2E4; $variable: #2AB2E4;
$brand-primary: $blue-dark; $brand-primary: $orange;
$brand-success: $green; $brand-success: $green;
$brand-warning: $orange; $brand-warning: $orange;
$brand-danger: $red; $brand-danger: $red;
...@@ -124,8 +124,8 @@ $btnBackground: $gray-lighter; ...@@ -124,8 +124,8 @@ $btnBackground: $gray-lighter;
$btnBackgroundHighlight: darken($gray-lighter, 15%); $btnBackgroundHighlight: darken($gray-lighter, 15%);
$btnBorder: #bbb; $btnBorder: #bbb;
$btnPrimaryBackground: lighten($blue, 3%); $btn-primary-bg: $brand-primary;
$btnPrimaryBackgroundHighlight: darken($blue, 3%); $btn-primary-bg-hl: lighten($brand-primary, 10%);
$btnInfoBackground: lighten($purple, 3%); $btnInfoBackground: lighten($purple, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%); $btnInfoBackgroundHighlight: darken($purple, 3%);
......
public/sass/_variables.scss
...@@ -218,7 +218,7 @@ $btn-padding-y-sm: .25rem !default; ...@@ -218,7 +218,7 @@ $btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.5rem !default; $btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default; $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 1px; $btn-border-radius: 3px;
// sidemenu // sidemenu
$side-menu-width: 15rem; $side-menu-width: 15rem;
public/sass/components/_buttons.scss
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
// Set the backgrounds // Set the backgrounds
// ------------------------- // -------------------------
.btn-primary { .btn-primary {
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
} }
// Warning appears are orange // Warning appears are orange
.btn-warning { .btn-warning {
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
} }
.btn-outline-primary { .btn-outline-primary {
@include button-outline-variant($btnPrimaryBackground); @include button-outline-variant($btn-primary-bg);
} }
.btn-outline-secondary { .btn-outline-secondary {
@include button-outline-variant($btnInverseBackground); @include button-outline-variant($btnInverseBackground);
......
public/sass/components/_tags.scss
...@@ -38,23 +38,3 @@ ...@@ -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 @@ ...@@ -9,7 +9,7 @@
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: $text-color; color: $text-color;
background-image: none; background-image: none;
background-color: darken($endColor, 2%); background-color: $startColor;
} }
} }
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x; padding: $padding-y $padding-x;
font-size: $font-size; 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); @include border-radius($border-radius);
} }
......
public/sass/pages/_styleguide.scss
...@@ -14,6 +14,13 @@ ...@@ -14,6 +14,13 @@
.color-card-page-bg { background-color: $page-bg; } .color-card-page-bg { background-color: $page-bg; }
.color-card-gray { background-color: $gray; } .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() { // define("areas/styleguide/static/script/app/colors", [], function() {
// "use strict"; // "use strict";
// var a = function(a) { // var a = function(a) {
......
public/sass/utils/_utils.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
} }
.highlight-word { .highlight-word {
color: $orange; color: $brand-primary;
} }
// Close icons // 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