public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(less): more less refactoring and cleanup, consolidating alerts

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-14 21:50:06 +01:00
parent 9e0ed7bc8e
commit 5836a6ec4b
13 changed files with 85 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/datasources/edit_ctrl.js
-2
View File
@@ -105,8 +105,6 @@ function (angular, _, config) {
$scope.updateFrontendSettings().then(function() {
if (test) {
$scope.testDatasource();
} else {
$location.path('datasources');
}
});
});
public/less/base/base.less
+1
View File
@@ -6,3 +6,4 @@ body {
height: 100%;
background: @bodyBackground;
}
public/less/base/type.less
+2 -1
View File
@@ -21,7 +21,8 @@ p {
// -------------------------
// Ex: 14px base font * 85% = about 12px
small { font-size: 85%; }
.small, small { font-size: 85%; }
.large { font-size: 120%; }
strong { font-weight: bold; }
em { font-style: italic; color: @headingsColor; }
public/less/bootstrap/alerts.less
-79
View File
@@ -1,79 +0,0 @@
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @baseLineHeight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground;
border: 1px solid @warningBorder;
.border-radius(@baseBorderRadius);
}
.alert,
.alert h4 {
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: @warningText;
}
.alert h4 {
margin: 0;
}
// Adjust close link position
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: @baseLineHeight;
}
// Alternate styles
// -------------------------
.alert-success {
background-color: @successBackground;
border-color: @successBorder;
color: @successText;
}
.alert-success h4 {
color: @successText;
}
.alert-danger,
.alert-error {
background-color: @errorBackground;
border-color: @errorBorder;
color: @errorText;
}
.alert-danger h4,
.alert-error h4 {
color: @errorText;
}
.alert-info {
background-color: @infoBackground;
border-color: @infoBorder;
color: @infoText;
}
.alert-info h4 {
color: @infoText;
}
// Block alerts
// -------------------------
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}
public/less/bootstrap/bootstrap.less
Vendored
-1
View File
@@ -28,7 +28,6 @@
// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Nav
@import "navs.less";
public/less/bootswatch.dark.less
+2 -20
View File
@@ -49,11 +49,11 @@ hr {
.btn {
padding: 8px 12px;
margin-right:10px;
margin-right: 10px;
background-image: none;
border: none;
.border-radius(0px);
text-shadow: none;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
&.disabled {
box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
@@ -155,24 +155,6 @@ legend, label {
}
}
// ALERTS, LABELS, BADGES
// -----------------------------------------------------
.alert,
.alert .alert-heading,
.alert-success,
.alert-success .alert-heading,
.alert-danger,
.alert-error,
.alert-danger .alert-heading,
.alert-error .alert-heading,
.alert-info,
.alert-info .alert-heading {
color: @white;
text-shadow: none;
border: none;
}
.label {
color: @white;
}
public/less/bootswatch.light.less
+2 -13
View File
@@ -140,12 +140,12 @@ a.text-success:hover { color: darken(@green, 10%); }
// -----------------------------------------------------
.btn {
padding: 5px 12px;
padding: 8px 12px;
background-image: none;
.box-shadow(none);
border: none;
.border-radius(3px);
text-shadow: none;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
&.disabled {
box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
@@ -289,17 +289,6 @@ legend {
// -----------------------------------------------------
// ALERTS, LABELS, BADGES
// -----------------------------------------------------
.alert {
text-shadow: none;
&-heading, h1, h2, h3, h4, h5, h6 {
color: @white;
}
}
.label {
&-success {
public/less/components/alerts.less
+68
View File
@@ -0,0 +1,68 @@
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: 8px 35px 13px 14px;
margin-bottom: @baseLineHeight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground;
position: relative;
color: @white;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
border-radius: 2px;
}
// Alternate styles
// -------------------------
.alert-success {
background-color: @successBackground;
}
.alert-danger,
.alert-error {
background-color: @errorBackground;
}
.alert-info {
background-color: @infoBackground;
}
.alert-warning {
background-color: @warningBackground;
}
.page-alert-list {
z-index: 8000;
min-width: 300px;
max-width: 300px;
position: fixed;
right: 20px;
top: 56px;
}
.alert-close {
position: absolute;
top: -4px;
right: -2px;
width: 18px;
height: 18px;
padding: 0;
background: @white;
border-radius: 50%;
border: none;
font-size: 1.1rem;
color: @grayDarker;
.fa {
position: relative;
top: -2px;
}
}
.alert-title {
font-weight: @fontWeightSemi;
padding-bottom: 2px;
}
public/less/components/dashboard.less
+4
View File
@@ -66,6 +66,10 @@
}
}
div.flot-text {
color: @textColor !important;
}
.panel {
display: inline-block;
float: left;
public/less/grafana.less
+1
View File
@@ -38,6 +38,7 @@
@import "./components/old_stuff.less";
@import "./components/navbar.less";
@import "./components/popovers.less";
@import "./components/alerts.less";
// PAGES
@import "./pages/login.less";
public/less/overrides.less
-101
View File
@@ -2,107 +2,6 @@
// ---------------------
.tiny {
font-size: 50%;
}
.smaller {
font-size: 70%;
}
.small {
font-size: 85%;
}
.large {
font-size: 120%;
}
.strong {
font-weight: bold;
}
a {
cursor: pointer;
}
.normal {
font-weight: normal;
}
.light {
font-weight: 200;
}
.input-smaller {
width: 75px;
}
.string {color:lighten(@textColor, 5%)}
.number {color:lighten(@infoText, 5%)}
.boolean {color:lighten(@warningText, 5%)}
.key {color:lighten(@errorText, 5%)}
.btn-active {
background-color: #E6E6E6;
background-image: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
outline: 0 none
}
.remove:hover {
background-color: @btnDangerBackgroundHighlight;
}
.faded {
opacity: 0.2;
}
div.flot-text {
color: @textColor !important;
}
.page-alert-list {
z-index:8000;
min-width: 300px;
max-width: 300px;
position: fixed;
right: 20px;
top: 56px;
}
.alert {
color: @white;
padding-bottom: 13px;
position: relative;
}
.alert-close {
position: absolute;
top: -4px;
right: -2px;
width: 19px;
height: 19px;
padding: 0;
background: @grayLighter;
border-radius: 50%;
border: none;
font-size: 1.1rem;
color: @grayDarker;
}
.alert-title {
font-weight: bold;
padding-bottom: 2px;
}
.alert-warning {
background-color: @warningBackground;
border-color: @warningBorder;
}
/* ===================================================
* popover-extra-placements.css v0.1
* http://twitter.github.com/bootstrap-popover-extra-placements
public/less/variables.dark.less
+4 -8
View File
@@ -76,6 +76,7 @@
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@fontWeightSemi: 600;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: 400; // instead of browser default, bold
@@ -273,20 +274,15 @@
// -------------------------
@warningText: darken(#c09853, 10%);
@warningBackground: @orange;
@warningBorder: transparent;
@errorText: #b94a48;
@errorBackground: @grayLighter;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@errorBackground: @btnDangerBackground;
@successText: #468847;
@successBackground: @grayLighter;
@successBorder: darken(spin(@successBackground, -10), 5%);
@successBackground: @btnSuccessBackground;
@infoText: @blueDark;
@infoBackground: @grayLighter;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
@infoBackground: @btnInfoBackground;
// Tooltips and popovers
// -------------------------
public/less/variables.light.less
+1
View File
@@ -85,6 +85,7 @@
@baseFontSize: 14px;
@baseFontWeight: 400;
@fontWeightSemi: 600;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;