mirror of
https://github.com/grafana/grafana.git
synced 2025-08-02 06:12:59 +08:00
ux(): began long on tiresome work on color refactors, polished button styles, added buttons to styleguide
This commit is contained in:
Torkel Ödegaard
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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%); }
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.highlight-word {
|
||||
color: $orange;
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
// Close icons
|
||||
|
||||
Reference in New Issue
Block a user