mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(buttons): began work on buttons consolidation and cleanup / refactor
This commit is contained in:
Torkel Ödegaard
parent
7c9728df47
commit
35a1a04f50
@ -3,7 +3,7 @@ init_cmds = [
|
||||
["go", "build", "-o", "./bin/grafana-server"],
|
||||
["./bin/grafana-server"]
|
||||
]
|
||||
watch_all = false
|
||||
watch_all = true
|
||||
watch_dirs = [
|
||||
"$WORKDIR/pkg",
|
||||
"$WORKDIR/public/views",
|
||||
|
||||
6
public/less/bootstrap/bootstrap.less
vendored
6
public/less/bootstrap/bootstrap.less
vendored
@ -19,13 +19,7 @@
|
||||
// Components: common
|
||||
@import "close.less";
|
||||
|
||||
// Components: Buttons & Alerts
|
||||
@import "buttons.less";
|
||||
@import "button-groups.less";
|
||||
|
||||
// Components: Nav
|
||||
@import "navs.less";
|
||||
|
||||
@import "labels-badges.less";
|
||||
|
||||
// Utility classes
|
||||
|
||||
@ -1,229 +0,0 @@
|
||||
//
|
||||
// Button groups
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.ie7-inline-block();
|
||||
font-size: 0; // remove as part 1 of font-size inline-block hack
|
||||
vertical-align: middle; // match .btn alignment given font-size hack above
|
||||
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
|
||||
.ie7-restore-left-whitespace();
|
||||
}
|
||||
|
||||
// Space out series of button groups
|
||||
.btn-group + .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
font-size: 0; // Hack to remove whitespace that results from using inline-block
|
||||
margin-top: @baseLineHeight / 2;
|
||||
margin-bottom: @baseLineHeight / 2;
|
||||
> .btn + .btn,
|
||||
> .btn-group + .btn,
|
||||
> .btn + .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Float them, remove border radius, then re-add to first and last elements
|
||||
.btn-group > .btn {
|
||||
position: relative;
|
||||
.border-radius(0);
|
||||
}
|
||||
.btn-group > .btn + .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.btn-group > .btn,
|
||||
.btn-group > .dropdown-menu,
|
||||
.btn-group > .popover {
|
||||
font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
|
||||
}
|
||||
|
||||
// Reset fonts for other sizes
|
||||
.btn-group > .btn-mini {
|
||||
font-size: @fontSizeMini;
|
||||
}
|
||||
.btn-group > .btn-small {
|
||||
font-size: @fontSizeSmall;
|
||||
}
|
||||
.btn-group > .btn-large {
|
||||
font-size: @fontSizeLarge;
|
||||
}
|
||||
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
.btn-group > .btn:first-child {
|
||||
margin-left: 0;
|
||||
.border-top-left-radius(@baseBorderRadius);
|
||||
.border-bottom-left-radius(@baseBorderRadius);
|
||||
}
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
||||
.btn-group > .btn:last-child,
|
||||
.btn-group > .dropdown-toggle {
|
||||
.border-top-right-radius(@baseBorderRadius);
|
||||
.border-bottom-right-radius(@baseBorderRadius);
|
||||
}
|
||||
// Reset corners for large buttons
|
||||
.btn-group > .btn.large:first-child {
|
||||
margin-left: 0;
|
||||
.border-top-left-radius(@borderRadiusLarge);
|
||||
.border-bottom-left-radius(@borderRadiusLarge);
|
||||
}
|
||||
.btn-group > .btn.large:last-child,
|
||||
.btn-group > .large.dropdown-toggle {
|
||||
.border-top-right-radius(@borderRadiusLarge);
|
||||
.border-bottom-right-radius(@borderRadiusLarge);
|
||||
}
|
||||
|
||||
// On hover/focus/active, bring the proper btn to front
|
||||
.btn-group > .btn:hover,
|
||||
.btn-group > .btn:focus,
|
||||
.btn-group > .btn:active,
|
||||
.btn-group > .btn.active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// On active and open, don't show outline
|
||||
.btn-group .dropdown-toggle:active,
|
||||
.btn-group.open .dropdown-toggle {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Split button dropdowns
|
||||
// ----------------------
|
||||
|
||||
// Give the line between buttons some depth
|
||||
.btn-group > .btn + .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
.box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
*padding-top: 5px;
|
||||
*padding-bottom: 5px;
|
||||
}
|
||||
.btn-group > .btn-mini + .dropdown-toggle {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
*padding-top: 2px;
|
||||
*padding-bottom: 2px;
|
||||
}
|
||||
.btn-group > .btn-small + .dropdown-toggle {
|
||||
*padding-top: 5px;
|
||||
*padding-bottom: 4px;
|
||||
}
|
||||
.btn-group > .btn-large + .dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
*padding-top: 7px;
|
||||
*padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.btn-group.open {
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Remove the gradient and set the same inset shadow as the :active state
|
||||
.dropdown-toggle {
|
||||
background-image: none;
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
}
|
||||
|
||||
// Keep the hover's background when dropdown is open
|
||||
.btn.dropdown-toggle {
|
||||
background-color: @btnBackgroundHighlight;
|
||||
}
|
||||
.btn-primary.dropdown-toggle {
|
||||
background-color: @btnPrimaryBackgroundHighlight;
|
||||
}
|
||||
.btn-warning.dropdown-toggle {
|
||||
background-color: @btnWarningBackgroundHighlight;
|
||||
}
|
||||
.btn-danger.dropdown-toggle {
|
||||
background-color: @btnDangerBackgroundHighlight;
|
||||
}
|
||||
.btn-success.dropdown-toggle {
|
||||
background-color: @btnSuccessBackgroundHighlight;
|
||||
}
|
||||
.btn-info.dropdown-toggle {
|
||||
background-color: @btnInfoBackgroundHighlight;
|
||||
}
|
||||
.btn-inverse.dropdown-toggle {
|
||||
background-color: @btnInverseBackgroundHighlight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Reposition the caret
|
||||
.btn .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
// Carets in other button sizes
|
||||
.btn-large .caret {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.btn-large .caret {
|
||||
border-left-width: 5px;
|
||||
border-right-width: 5px;
|
||||
border-top-width: 5px;
|
||||
}
|
||||
.btn-mini .caret,
|
||||
.btn-small .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
// Upside down carets for .dropup
|
||||
.dropup .btn-large .caret {
|
||||
border-bottom-width: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Account for other colors
|
||||
.btn-primary,
|
||||
.btn-warning,
|
||||
.btn-danger,
|
||||
.btn-info,
|
||||
.btn-success,
|
||||
.btn-inverse {
|
||||
.caret {
|
||||
border-top-color: @white;
|
||||
border-bottom-color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Vertical button groups
|
||||
// ----------------------
|
||||
|
||||
.btn-group-vertical {
|
||||
display: inline-block; // makes buttons only take up the width they need
|
||||
.ie7-inline-block();
|
||||
}
|
||||
.btn-group-vertical > .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
max-width: 100%;
|
||||
.border-radius(0);
|
||||
}
|
||||
.btn-group-vertical > .btn + .btn {
|
||||
margin-left: 0;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.btn-group-vertical > .btn:first-child {
|
||||
.border-radius(@baseBorderRadius @baseBorderRadius 0 0);
|
||||
}
|
||||
.btn-group-vertical > .btn:last-child {
|
||||
.border-radius(0 0 @baseBorderRadius @baseBorderRadius);
|
||||
}
|
||||
.btn-group-vertical > .btn-large:first-child {
|
||||
.border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
|
||||
}
|
||||
.btn-group-vertical > .btn-large:last-child {
|
||||
.border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
|
||||
}
|
||||
@ -1,243 +1 @@
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// GENERAL STYLES
|
||||
// --------------
|
||||
|
||||
// Make all forms have space below them
|
||||
form {
|
||||
margin: 0 0 @baseLineHeight;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Groups of fields with labels on top (legends)
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: @baseLineHeight;
|
||||
font-size: @baseFontSize * 1.5;
|
||||
line-height: @baseLineHeight * 2;
|
||||
color: @grayDark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: @baseLineHeight * .75;
|
||||
color: @grayLight;
|
||||
}
|
||||
}
|
||||
|
||||
// Set font for forms
|
||||
label,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
||||
}
|
||||
|
||||
// Identify controls by their labels
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// Form controls
|
||||
// -------------------------
|
||||
|
||||
// Shared size and type resets
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: @baseLineHeight;
|
||||
padding: 4px 6px;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @inputText;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Reset appearance properties for textual inputs and textarea
|
||||
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
width: 206px; // plus 12px padding and 2px border
|
||||
}
|
||||
// Reset height since textareas have rows
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Everything else
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: @inputBackground;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
.transition(~"border linear .2s, box-shadow linear .2s");
|
||||
|
||||
// Focus state
|
||||
&:focus {
|
||||
border-color: rgba(82,168,236, .8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
|
||||
}
|
||||
}
|
||||
|
||||
// Position radios and checkboxes better
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// Reset width of input images, buttons, radios, checkboxes
|
||||
input[type="file"],
|
||||
input[type="image"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
width: auto; // Override of generic input selector
|
||||
}
|
||||
|
||||
// Set the height of select and file controls to match text inputs
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
line-height: @inputHeight;
|
||||
}
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: 1px solid @inputBorder;
|
||||
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Focus for select, file, radio, and checkbox
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
// -------------------------
|
||||
|
||||
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
|
||||
input,
|
||||
textarea {
|
||||
.placeholder();
|
||||
}
|
||||
|
||||
|
||||
// INPUT SIZES
|
||||
// -----------
|
||||
|
||||
// General classes for quick sizes
|
||||
.input-mini { width: 60px; }
|
||||
.input-small { width: 90px; }
|
||||
.input-medium { width: 150px; }
|
||||
.input-large { width: 210px; }
|
||||
.input-xlarge { width: 270px; }
|
||||
.input-xxlarge { width: 530px; }
|
||||
|
||||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
// Grid sizes
|
||||
#grid > .input(@gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
// DISABLED STATE
|
||||
// --------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: @inputDisabledBackground;
|
||||
}
|
||||
// Explicitly reset the colors here
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"][readonly],
|
||||
input[type="checkbox"][readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
// HTML5 invalid states
|
||||
// Shares styles with the .control-group.error above
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
&:focus {
|
||||
border-color: darken(#ee5f5b, 10%);
|
||||
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -508,30 +508,6 @@
|
||||
border-bottom: 1px solid @bottom;
|
||||
}
|
||||
|
||||
// Button backgrounds
|
||||
// ------------------
|
||||
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
||||
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
|
||||
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
box-shadow: inset 0 -3px rgba(0,0,0,0.3);
|
||||
.reset-filter();
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
|
||||
color: @textColor;
|
||||
background-color: @endColor;
|
||||
*background-color: darken(@endColor, 5%);
|
||||
box-shadow: inset 0 -3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken(@endColor, 10%) e("\9");
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar vertical align
|
||||
// -------------------------
|
||||
// Vertically center elements in the navbar.
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
// Cyborg 2.3.2
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
// TYPOGRAPHY
|
||||
// -----------------------------------------------------
|
||||
|
||||
|
||||
hr {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// NAVBAR
|
||||
// -----------------------------------------------------
|
||||
|
||||
// NAV
|
||||
// -----------------------------------------------------
|
||||
|
||||
.nav-tabs {
|
||||
|
||||
border-bottom: none;
|
||||
|
||||
& > li > a {
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
li > a:hover,
|
||||
li.active > a,
|
||||
li.active > a:focus,
|
||||
li.active > a:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid @blue;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
li.disabled > a {
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.open .dropdown-toggle {
|
||||
background-color: #060606;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
// -----------------------------------------------------
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
margin-right: 10px;
|
||||
background-image: none;
|
||||
border: none;
|
||||
.border-radius(0px);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-inverse {
|
||||
border: 1px solid #444;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 6px 20px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 2px 6px;
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
& > .btn + .dropdown-toggle {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,359 +0,0 @@
|
||||
// Cosmo 2.3.2
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
|
||||
// TYPOGRAPHY
|
||||
// -----------------------------------------------------
|
||||
|
||||
body {
|
||||
font-weight: 300;
|
||||
background: @bodyBackground;
|
||||
//url('../img/light.png') repeat right top;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
||||
padding: 10px 15px;
|
||||
background-color: @grayLighter;
|
||||
border-left-color: @gray;
|
||||
|
||||
&.pull-right {
|
||||
padding: 10px 15px;
|
||||
border-right-color: @gray;
|
||||
}
|
||||
|
||||
small {
|
||||
color: @gray;
|
||||
}
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: @gray;
|
||||
}
|
||||
|
||||
.text-warning { color: @orange; }
|
||||
a.text-warning:hover { color: darken(@orange, 10%); }
|
||||
|
||||
.text-error { color: @red; }
|
||||
a.text-error:hover { color: darken(@red, 10%); }
|
||||
|
||||
.text-info { color: @purple; }
|
||||
a.text-info:hover { color: darken(@purple, 10%); }
|
||||
|
||||
.text-success { color: @green; }
|
||||
a.text-success:hover { color: darken(@green, 10%); }
|
||||
|
||||
// SCAFFOLDING
|
||||
// -----------------------------------------------------
|
||||
|
||||
// NAVBAR
|
||||
// -----------------------------------------------------
|
||||
|
||||
.navbar {
|
||||
|
||||
.navbar-inner {
|
||||
background-image: none;
|
||||
.box-shadow(none);
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
.brand {
|
||||
padding: 0px 15px;
|
||||
|
||||
&:hover {
|
||||
color: @navbarLinkColorHover;
|
||||
}
|
||||
}
|
||||
|
||||
.nav > .active > a,
|
||||
.nav > .active > a:hover,
|
||||
.nav > .active > a:focus {
|
||||
.box-shadow(none);
|
||||
border-bottom: 1px solid @blue;
|
||||
background-color: @navbarLinkBackgroundHover;
|
||||
}
|
||||
|
||||
.nav li.dropdown.open > .dropdown-toggle,
|
||||
.nav li.dropdown.active > .dropdown-toggle,
|
||||
.nav li.dropdown.open.active > .dropdown-toggle {
|
||||
color: @navbarLinkColorActive;
|
||||
|
||||
&:hover {
|
||||
color: @grayLighter;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search .search-query {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// NAV
|
||||
// -----------------------------------------------------
|
||||
|
||||
.nav {
|
||||
.open .dropdown-toggle,
|
||||
& > li.dropdown.open.active > a:hover {
|
||||
color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
|
||||
& > li > a {
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
li > a:hover,
|
||||
li.active > a,
|
||||
li.active > a:focus,
|
||||
li.active > a:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid @blue;
|
||||
color: @blue
|
||||
}
|
||||
|
||||
li.disabled > a {
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.open .dropdown-toggle {
|
||||
background-color: #060606;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-below,
|
||||
.tabs-left,
|
||||
.tabs-right {
|
||||
|
||||
& > .nav-tabs > li > a{
|
||||
.border-radius(0);
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// BUTTONS
|
||||
// -----------------------------------------------------
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
background-image: none;
|
||||
.box-shadow(none);
|
||||
border: none;
|
||||
.border-radius(3px);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 14px 23px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
& > .btn:first-child,
|
||||
& > .btn:last-child,
|
||||
& > .dropdown-toggle {
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
& > .btn + .dropdown-toggle {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
legend, label {
|
||||
color: @textColor;
|
||||
border-bottom: 0px solid #222;
|
||||
}
|
||||
|
||||
// TABLES
|
||||
// -----------------------------------------------------
|
||||
|
||||
.table {
|
||||
|
||||
tbody tr.success td {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
tbody tr.error td {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
tbody tr.info td {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&-bordered {
|
||||
.border-radius(0);
|
||||
|
||||
thead:first-child tr:first-child th:first-child,
|
||||
tbody:first-child tr:first-child td:first-child {
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
thead:last-child tr:last-child th:first-child,
|
||||
tbody:last-child tr:last-child td:first-child,
|
||||
tfoot:last-child tr:last-child td:first-child {
|
||||
.border-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FORMS
|
||||
// -----------------------------------------------------
|
||||
|
||||
select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
|
||||
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
|
||||
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
|
||||
input[type="search"], input[type="tel"], input[type="color"] {
|
||||
color: @grayDarker;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
|
||||
&.warning {
|
||||
|
||||
.control-label,
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-color: @orange;
|
||||
color: @grayDarker;
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
|
||||
.control-label,
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-color: @red;
|
||||
color: @grayDarker;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
|
||||
.control-label,
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: @green;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-color: @green;
|
||||
color: @grayDarker;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
border-bottom: none;
|
||||
color: @grayDarker;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
border-top: none;
|
||||
background-color: @grayLighter;
|
||||
}
|
||||
|
||||
// DROPDOWNS
|
||||
// -----------------------------------------------------
|
||||
|
||||
|
||||
.label {
|
||||
|
||||
&-success {
|
||||
background-color: @green;
|
||||
}
|
||||
|
||||
&-important {
|
||||
background-color: @red;
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: @purple;
|
||||
}
|
||||
|
||||
&-inverse {
|
||||
background-color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 0;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
// MISC
|
||||
// -----------------------------------------------------
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
border: none;
|
||||
.border-radius(0);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.well {
|
||||
border: none;
|
||||
.border-radius(0);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
a.thumbnail {
|
||||
background-color: @grayLight;
|
||||
|
||||
&:hover {
|
||||
background-color: @gray;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: @grayLighter;
|
||||
background-image: none;
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
.popover {
|
||||
.border-radius(0);
|
||||
|
||||
&-title {
|
||||
border-bottom: none;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -2,39 +2,28 @@
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Core
|
||||
.btn {
|
||||
display: inline-block;
|
||||
.ie7-inline-block();
|
||||
padding: 4px 12px;
|
||||
margin-bottom: 0; // For input.btn
|
||||
padding: 8px 12px;
|
||||
margin-right: 10px;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
|
||||
border: none;
|
||||
*border: 0; // Remove the border to prevent IE7's black border on input:focus
|
||||
border-bottom-color: darken(@btnBorder, 10%);
|
||||
.border-radius(@baseBorderRadius);
|
||||
.ie7-restore-left-whitespace(); // Give IE7 some love
|
||||
|
||||
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
|
||||
// Hover/focus state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @grayDark;
|
||||
text-decoration: none;
|
||||
background-position: 0 -15px;
|
||||
|
||||
// transition is only when going to hover/focus, otherwise the background
|
||||
// behind the gradient (there for IE<=9 fallback) gets mismatched
|
||||
.transition(background-position .1s linear);
|
||||
}
|
||||
|
||||
// Focus state for keyboard and accessibility
|
||||
@ -47,7 +36,6 @@
|
||||
&:active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
@ -56,88 +44,28 @@
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
.opacity(65);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
// Large
|
||||
.btn-large {
|
||||
padding: @paddingLarge;
|
||||
padding: 6px 20px;
|
||||
font-size: @fontSizeLarge;
|
||||
.border-radius(@borderRadiusLarge);
|
||||
}
|
||||
.btn-large [class^="icon-"],
|
||||
.btn-large [class*=" icon-"] {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
// Small
|
||||
.btn-small {
|
||||
padding: @paddingSmall;
|
||||
padding: 2px 10px;
|
||||
font-size: @fontSizeSmall;
|
||||
.border-radius(@borderRadiusSmall);
|
||||
}
|
||||
.btn-small [class^="icon-"],
|
||||
.btn-small [class*=" icon-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
.btn-mini [class^="icon-"],
|
||||
.btn-mini [class*=" icon-"] {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.btn-mini {
|
||||
padding: @paddingMini;
|
||||
padding: 2px 6px;
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
font-size: @fontSizeMini;
|
||||
.border-radius(@borderRadiusSmall);
|
||||
}
|
||||
|
||||
|
||||
// Block button
|
||||
// -------------------------
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Alternate buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Provide *some* extra contrast for those who can get it
|
||||
.btn-primary.active,
|
||||
.btn-warning.active,
|
||||
.btn-danger.active,
|
||||
.btn-success.active,
|
||||
.btn-info.active,
|
||||
.btn-inverse.active {
|
||||
color: rgba(255,255,255,.75);
|
||||
}
|
||||
|
||||
// Set the backgrounds
|
||||
@ -163,7 +91,9 @@ input[type="button"] {
|
||||
}
|
||||
// Inverse appears as dark gray
|
||||
.btn-inverse {
|
||||
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
|
||||
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight, @btnInverseText);
|
||||
box-shadow: none;
|
||||
border: 1px solid @grafanaTargetFuncHightlight;
|
||||
}
|
||||
|
||||
|
||||
@ -231,4 +161,4 @@ input[type="submit"].btn {
|
||||
color: @btnText;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
.top-nav-menu-btn {
|
||||
a {
|
||||
padding: 6px 20px 6px 13px;
|
||||
padding: 7px 20px 6px 13px;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
@import "variables.dark.less";
|
||||
@import "bootstrap/bootstrap.less";
|
||||
@import "bootswatch.dark.less";
|
||||
@import "grafana.less";
|
||||
|
||||
@ -10,6 +10,9 @@
|
||||
@import "./utils/validation.less";
|
||||
@import "./utils/angular.less";
|
||||
|
||||
// MIXINS
|
||||
@import "./mixins/buttons.less";
|
||||
|
||||
// LAYOUTS
|
||||
@import "./layout/page.less";
|
||||
|
||||
@ -45,6 +48,7 @@
|
||||
@import "./components/dropdown.less";
|
||||
@import "./components/color_picker.less";
|
||||
@import "./components/tooltip.less";
|
||||
@import "./components/buttons.less";
|
||||
|
||||
// PAGES
|
||||
@import "./pages/login.less";
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
@import "variables.light.less";
|
||||
@import "bootstrap/bootstrap.less";
|
||||
@import "bootswatch.light.less";
|
||||
@import "grafana.less";
|
||||
|
||||
18
public/less/mixins/buttons.less
Normal file
18
public/less/mixins/buttons.less
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
// Button backgrounds
|
||||
// ------------------
|
||||
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
||||
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
|
||||
|
||||
box-shadow: inset 0 -4px rgba(0,0,0,0.3);
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
|
||||
color: @textColor;
|
||||
background-image: none;
|
||||
background-color: darken(@endColor, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -129,22 +129,25 @@
|
||||
@btnBorder: #bbb;
|
||||
|
||||
@btnPrimaryBackground: @blueDark;
|
||||
@btnPrimaryBackgroundHighlight: lighten(@blueDark, 10%);
|
||||
@btnPrimaryBackgroundHighlight: lighten(@blueDark, 5%);
|
||||
|
||||
@btnInfoBackground: lighten(@purple, 5%);
|
||||
@btnInfoBackgroundHighlight: darken(@purple, 5%);
|
||||
@btnInfoBackground: lighten(@purple, 3%);
|
||||
@btnInfoBackgroundHighlight: darken(@purple, 3%);
|
||||
|
||||
@btnSuccessBackground: lighten(@green, 5%);
|
||||
@btnSuccessBackgroundHighlight: darken(@green, 5%);
|
||||
@btnSuccessBackground: lighten(@green, 3%);
|
||||
@btnSuccessBackgroundHighlight: darken(@green, 3%);
|
||||
|
||||
@btnWarningBackground: lighten(@orange, 5%);
|
||||
@btnWarningBackgroundHighlight: darken(@orange, 5%);
|
||||
@btnWarningBackground: lighten(@orange, 3%);
|
||||
@btnWarningBackgroundHighlight: darken(@orange, 3%);
|
||||
|
||||
@btnDangerBackground: lighten(@red, 5%);
|
||||
@btnDangerBackgroundHighlight: darken(@red, 5%);
|
||||
@btnDangerBackground: lighten(@red, 3%);
|
||||
@btnDangerBackgroundHighlight: darken(@red, 3%);
|
||||
|
||||
@btnInverseBackground: @grayDark;
|
||||
@btnInverseBackgroundHighlight: lighten(@grayDark, 5%);
|
||||
@btnInverseBackgroundHighlight: lighten(@grayDark, 1%);
|
||||
@btnInverseText: @textColor;
|
||||
@btnInverseBorder: #333;
|
||||
|
||||
|
||||
@btnText: @gray;
|
||||
|
||||
@ -242,7 +245,7 @@
|
||||
@navbarHeight: 52px;
|
||||
@navbarBackgroundHighlight: @grayDark;
|
||||
@navbarBackground: @grayDark;
|
||||
@navbarBorder: 1px solid @grayDark;
|
||||
@navbarBorder: 1px solid @bodyBackground;
|
||||
|
||||
@navbarText: @grayLight;
|
||||
@navbarLinkColor: @grayLight;
|
||||
|
||||
@ -140,23 +140,25 @@
|
||||
@btnBackgroundHighlight: darken(@grayLighter, 15%);
|
||||
@btnBorder: #bbb;
|
||||
|
||||
@btnPrimaryBackground: lighten(@blue, 5%);
|
||||
@btnPrimaryBackgroundHighlight: darken(@blue, 5%);
|
||||
@btnPrimaryBackground: lighten(@blue, 3%);
|
||||
@btnPrimaryBackgroundHighlight: darken(@blue, 3%);
|
||||
|
||||
@btnInfoBackground: lighten(@purple, 5%);
|
||||
@btnInfoBackgroundHighlight: darken(@purple, 5%);
|
||||
@btnInfoBackground: lighten(@purple, 3%);
|
||||
@btnInfoBackgroundHighlight: darken(@purple, 3%);
|
||||
|
||||
@btnSuccessBackground: lighten(@green, 5%);
|
||||
@btnSuccessBackgroundHighlight: darken(@green, 5%);
|
||||
@btnSuccessBackground: lighten(@green, 3%);
|
||||
@btnSuccessBackgroundHighlight: darken(@green, 3%);
|
||||
|
||||
@btnWarningBackground: lighten(@orange, 5%);
|
||||
@btnWarningBackgroundHighlight: darken(@orange, 5%);
|
||||
@btnWarningBackground: lighten(@orange, 3%);
|
||||
@btnWarningBackgroundHighlight: darken(@orange, 3%);
|
||||
|
||||
@btnDangerBackground: lighten(@red, 5%);
|
||||
@btnDangerBackgroundHighlight: darken(@red, 5%);
|
||||
@btnDangerBackground: lighten(@red, 3%);
|
||||
@btnDangerBackgroundHighlight: darken(@red, 3%);
|
||||
|
||||
@btnInverseBackground: @white;
|
||||
@btnInverseBackgroundHighlight: darken(@grayLight, 15%);
|
||||
@btnInverseBackground: @grayLighter;
|
||||
@btnInverseBackgroundHighlight: darken(@grayLighter, 5%);
|
||||
@btnInverseText: @black;
|
||||
@btnInverseBorder: @grayLight;
|
||||
|
||||
@btnText: @grayLighter;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user