From 35a1a04f500fb36f548789591f3bf1386e044c25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 11:50:31 +0100 Subject: [PATCH] ux(buttons): began work on buttons consolidation and cleanup / refactor --- .bra.toml | 2 +- public/less/bootstrap/bootstrap.less | 6 - public/less/bootstrap/button-groups.less | 229 ----------- public/less/bootstrap/forms.less | 242 ------------ public/less/bootstrap/mixins.less | 24 -- public/less/bootswatch.dark.less | 87 ----- public/less/bootswatch.light.less | 359 ------------------ .../{bootstrap => components}/buttons.less | 96 +---- public/less/components/navbar.less | 2 +- public/less/grafana.dark.less | 1 - public/less/grafana.less | 4 + public/less/grafana.light.less | 1 - public/less/mixins/buttons.less | 18 + public/less/variables.dark.less | 25 +- public/less/variables.light.less | 26 +- 15 files changed, 65 insertions(+), 1057 deletions(-) delete mode 100644 public/less/bootstrap/button-groups.less delete mode 100644 public/less/bootswatch.dark.less delete mode 100644 public/less/bootswatch.light.less rename public/less/{bootstrap => components}/buttons.less (62%) create mode 100644 public/less/mixins/buttons.less diff --git a/.bra.toml b/.bra.toml index 5ff554bfc75..ef1a925158d 100644 --- a/.bra.toml +++ b/.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", diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 1b4e2d8824a..9bc162acaaa 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/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 diff --git a/public/less/bootstrap/button-groups.less b/public/less/bootstrap/button-groups.less deleted file mode 100644 index 55cdc603387..00000000000 --- a/public/less/bootstrap/button-groups.less +++ /dev/null @@ -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); -} diff --git a/public/less/bootstrap/forms.less b/public/less/bootstrap/forms.less index b20642c064c..8b137891791 100644 --- a/public/less/bootstrap/forms.less +++ b/public/less/bootstrap/forms.less @@ -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); - } -} - - - diff --git a/public/less/bootstrap/mixins.less b/public/less/bootstrap/mixins.less index 9a8ee6676c4..d7f16cfc246 100644 --- a/public/less/bootstrap/mixins.less +++ b/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. diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less deleted file mode 100644 index a75730ab7b3..00000000000 --- a/public/less/bootswatch.dark.less +++ /dev/null @@ -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); - } -} - diff --git a/public/less/bootswatch.light.less b/public/less/bootswatch.light.less deleted file mode 100644 index 3b9ec72de87..00000000000 --- a/public/less/bootswatch.light.less +++ /dev/null @@ -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; - } - -} - diff --git a/public/less/bootstrap/buttons.less b/public/less/components/buttons.less similarity index 62% rename from public/less/bootstrap/buttons.less rename to public/less/components/buttons.less index 358b2120e6a..1ffc8f3e6cb 100644 --- a/public/less/bootstrap/buttons.less +++ b/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; } @@ -231,4 +161,4 @@ input[type="submit"].btn { color: @btnText; margin: 0; vertical-align: middle; -} \ No newline at end of file +} diff --git a/public/less/components/navbar.less b/public/less/components/navbar.less index 2b8ed23a8f4..4a1d0861060 100644 --- a/public/less/components/navbar.less +++ b/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; diff --git a/public/less/grafana.dark.less b/public/less/grafana.dark.less index ba8897f5aac..e4c834c6aa8 100644 --- a/public/less/grafana.dark.less +++ b/public/less/grafana.dark.less @@ -1,4 +1,3 @@ @import "variables.dark.less"; @import "bootstrap/bootstrap.less"; -@import "bootswatch.dark.less"; @import "grafana.less"; diff --git a/public/less/grafana.less b/public/less/grafana.less index 813ba26b312..8e0b80470db 100644 --- a/public/less/grafana.less +++ b/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"; diff --git a/public/less/grafana.light.less b/public/less/grafana.light.less index 6f07f7f9075..68a8f13dece 100644 --- a/public/less/grafana.light.less +++ b/public/less/grafana.light.less @@ -1,4 +1,3 @@ @import "variables.light.less"; @import "bootstrap/bootstrap.less"; -@import "bootswatch.light.less"; @import "grafana.less"; diff --git a/public/less/mixins/buttons.less b/public/less/mixins/buttons.less new file mode 100644 index 00000000000..de055f918e8 --- /dev/null +++ b/public/less/mixins/buttons.less @@ -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%); + } +} + + diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 07a6da7f278..7784d3c6dac 100644 --- a/public/less/variables.dark.less +++ b/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; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index ae8fcef2df3..29236f734a9 100644 --- a/public/less/variables.light.less +++ b/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;