Skip to content

N
nexpie-grafana-theme
Commit 35a1a04f by Torkel Ödegaard
Options

ux(buttons): began work on buttons consolidation and cleanup / refactor

parent 7c9728df
Showing with 64 additions and 1056 deletions
.bra.toml
......@@ -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",
......
public/less/bootstrap/bootstrap.less
......@@ -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
......
public/less/bootstrap/button-groups.less deleted 100644 → 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);
}
public/less/bootstrap/forms.less
//
// 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);
}
}
public/less/bootstrap/mixins.less
......@@ -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.
......
public/less/bootswatch.dark.less deleted 100644 → 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);
}
}
public/less/bootswatch.light.less deleted 100644 → 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;
}
}
public/less/bootstrap/buttons.less → public/less/components/buttons.less
......@@ -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;
}
......
public/less/components/navbar.less
......@@ -100,7 +100,7 @@
.top-nav-menu-btn {
a {
padding: 6px 20px 6px 13px;
padding: 7px 20px 6px 13px;
}
img {
width: 30px;
......
public/less/grafana.dark.less
@import "variables.dark.less";
@import "bootstrap/bootstrap.less";
@import "bootswatch.dark.less";
@import "grafana.less";
public/less/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";
......
public/less/grafana.light.less
@import "variables.light.less";
@import "bootstrap/bootstrap.less";
@import "bootswatch.light.less";
@import "grafana.less";
public/less/mixins/buttons.less 0 → 100644
// 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%);
}
}
public/less/variables.dark.less
......@@ -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;
......
public/less/variables.light.less
......@@ -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;
......
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