From fcc3a7f6e4211dc56d1d8afbbe0150b1b1c5f4b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 22:13:06 +0100 Subject: [PATCH] ux(less): more less refactoring and cleanup, modals, and dropdowns --- public/less/base/code.less | 10 +- public/less/bootstrap/bootstrap.less | 3 - .../less/bootstrap/component-animations.less | 22 -- public/less/bootstrap/modals.less | 87 ------ public/less/bootswatch.dark.less | 12 - .../dropdown.less} | 9 +- public/less/components/modals.less | 149 ++++++++++ public/less/components/tags.less | 24 ++ public/less/components/typeahead.less | 6 + public/less/grafana.dark.less | 1 - public/less/grafana.less | 100 +------ public/less/grafana.light.less | 1 - public/less/overrides.less | 266 ------------------ 13 files changed, 194 insertions(+), 496 deletions(-) delete mode 100644 public/less/bootstrap/component-animations.less delete mode 100644 public/less/bootstrap/modals.less rename public/less/{bootstrap/dropdowns.less => components/dropdown.less} (97%) create mode 100644 public/less/components/modals.less create mode 100644 public/less/components/tags.less create mode 100644 public/less/components/typeahead.less delete mode 100644 public/less/overrides.less diff --git a/public/less/base/code.less b/public/less/base/code.less index f45d0bbf52a..9304855475a 100644 --- a/public/less/base/code.less +++ b/public/less/base/code.less @@ -6,17 +6,18 @@ // Inline and block code styles code, pre { - padding: 0 3px 2px; #font > #family > .monospace; font-size: @baseFontSize - 2; - color: @grayDark; background-color: @codeTagBackground; + color: @textColor; + border: 1px solid darken(@codeTagBackground, 15%); + padding: 2px; + .border-radius(3px); } // Inline code code { - padding: 2px 4px; color: #d14; background-color: #f7f7f9; border: 1px solid #e1e1e8; @@ -26,7 +27,6 @@ code { // Blocks of code pre { display: block; - padding: (@baseLineHeight - 1) / 2; margin: 0 0 @baseLineHeight / 2; font-size: @baseFontSize - 1; // 14px to 13px line-height: @baseLineHeight; @@ -35,8 +35,6 @@ pre { white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; - border: 1px solid rgba(0,0,0,.15); - .border-radius(@baseBorderRadius); // Make prettyprint styles more spaced out for readability &.prettyprint { diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 641d36b80c2..7a3e9edc842 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -21,8 +21,6 @@ @import "forms.less"; // Components: common -@import "dropdowns.less"; -@import "component-animations.less"; @import "close.less"; // Components: Buttons & Alerts @@ -33,7 +31,6 @@ @import "navs.less"; // Components: Popovers -@import "modals.less"; @import "tooltip.less"; // Components: Misc diff --git a/public/less/bootstrap/component-animations.less b/public/less/bootstrap/component-animations.less deleted file mode 100644 index d614263a76a..00000000000 --- a/public/less/bootstrap/component-animations.less +++ /dev/null @@ -1,22 +0,0 @@ -// -// Component animations -// -------------------------------------------------- - - -.fade { - opacity: 0; - .transition(opacity .15s linear); - &.in { - opacity: 1; - } -} - -.collapse { - position: relative; - height: 0; - overflow: hidden; - .transition(height .35s ease); - &.in { - height: auto; - } -} diff --git a/public/less/bootstrap/modals.less b/public/less/bootstrap/modals.less deleted file mode 100644 index 7c4a7e95b1d..00000000000 --- a/public/less/bootstrap/modals.less +++ /dev/null @@ -1,87 +0,0 @@ -// -// Modals -// -------------------------------------------------- - -// Background -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: @zindexModalBackdrop; - background-color: @black; - // Fade for backdrop - &.fade { opacity: 0; } -} - -.modal-backdrop, -.modal-backdrop.fade.in { - .opacity(70); -} - -// Base modal -.modal { - position: fixed; - z-index: @zindexModal; - width: 100%; - background-color: @white; - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); - // Remove focus outline from opened modal - outline: none; - - &.fade { - .transition(e('opacity .3s linear, top .3s ease-out')); - top: -25%; - } - &.fade.in { top: 10%; } -} -.modal-header { - padding: 9px 15px; - border-bottom: 1px solid #eee; - // Close icon - .close { margin-top: 2px; } - // Heading - h3 { - margin: 0; - line-height: 30px; - } -} - -// Body (where all modal content resides) -.modal-body { - position: relative; - overflow-y: auto; - //max-height: 700px; - padding: 15px; -} -// Remove bottom margin if need be -.modal-form { - margin-bottom: 0; -} - -// Footer (for actions) -.modal-footer { - padding: 14px 15px 15px; - margin-bottom: 0; - text-align: right; // right align buttons - background-color: #f5f5f5; - border-top: 1px solid #ddd; - .box-shadow(inset 0 1px 0 @white); - .clearfix(); // clear it in case folks use .pull-* classes on buttons - - // Properly space out buttons - .btn + .btn { - margin-left: 5px; - margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs - } - // but override that for button groups - .btn-group .btn + .btn { - margin-left: -1px; - } - // and override it for block buttons as well - .btn-block + .btn-block { - margin-left: 0; - } -} diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 3ebc6b79152..550d5d601de 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -212,19 +212,7 @@ a:hover { .border-radius(0); } -.modal { - background-color: @grafanaPanelBackground; -} - -.modal-header { - border-bottom: 1px solid @grafanaPanelBackground; -} - .modal-footer { - background-color: @grafanaPanelBackground; - border-top: 1px solid @grafanaPanelBackground; - .border-radius(0 0 0px 0px); - .box-shadow(none); } diff --git a/public/less/bootstrap/dropdowns.less b/public/less/components/dropdown.less similarity index 97% rename from public/less/bootstrap/dropdowns.less rename to public/less/components/dropdown.less index ee098ef8e74..d7c46d92afa 100644 --- a/public/less/bootstrap/dropdowns.less +++ b/public/less/components/dropdown.less @@ -45,7 +45,7 @@ z-index: @zindexDropdown; display: none; // none by default, but block on "open" of the menu float: left; - min-width: 160px; + min-width: 140px; padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; @@ -67,12 +67,17 @@ // Links within the dropdown menu > li > a { display: block; - padding: 3px 20px; + padding: 3px 20px 3px 15px; clear: both; font-weight: normal; line-height: @baseLineHeight; color: @dropdownLinkColor; white-space: nowrap; + + i { + padding-right: 5px; + color: @linkColorDisabled; + } } } diff --git a/public/less/components/modals.less b/public/less/components/modals.less new file mode 100644 index 00000000000..5e4d730494f --- /dev/null +++ b/public/less/components/modals.less @@ -0,0 +1,149 @@ +// +// Modals +// -------------------------------------------------- + +// Background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindexModalBackdrop; + background-color: @black; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + .opacity(70); +} + +// Base modal +.modal { + position: fixed; + z-index: @zindexModal; + width: 100%; + background-color: @grafanaPanelBackground; + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + .background-clip(padding-box); + outline: none; + + max-width: 800px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + top: 20%; +} + +.modal-header { + padding: 9px 15px; + border-bottom: 1px solid @grafanaPanelBackground; +} + +// Body (where all modal content resides) +.modal-body { + position: relative; + overflow-y: auto; +} + +// Remove bottom margin if need be +.modal-form { + margin-bottom: 0; +} + +// Footer (for actions) +.modal-footer { + padding: 14px 15px 15px; + border-top: 1px solid @grafanaPanelBackground; + background-color: @grafanaPanelBackground; + text-align: right; // right align buttons + .clearfix(); // clear it in case folks use .pull-* classes on buttons +} + +.modal-no-header { + border: 1px solid @grafanaTargetFuncBackground; + text-align: center; + + h3 { + margin-top: 30px; + } + + .modal-close { + float: right; + font-size: 140%; + padding: 10px; + } + + .modal-tagline { + font-size: 16px; + } +} + +.confirm-modal { + max-width: 500px; + + .confirm-modal-icon { + padding-top: 41px; + font-size: 280%; + color: @green; + padding-bottom: 20px; + } + + .confirm-modal-title { + font-size: 18px; + color: @linkColor; + margin-bottom: 15px; + } + + .confirm-modal-buttons { + margin-top: 35px; + margin-bottom: 35px; + button { + margin-right: 5px + } + } +} + +.share-modal-body { + text-align: center; + padding: 10px 0; + + .tight-form { + text-align: left; + } + + .share-modal-options { + margin: 11px 20px 33px 20px; + } + + .share-modal-big-icon { + .fa, .icon-gf { + font-size: 70px; + } + } + + .share-snapshot-info-text { + margin: 10px 105px; + strong { + color: @headingsColor; + font-weight: 500; + } + } + + .share-snapshot-header { + margin: 20px 0 22px 0; + } + + .tight-form { + text-align: left; + } + + .share-snapshot-link { + max-width: 716px; + white-space: nowrap; + overflow: hidden; + display: block; + text-overflow: ellipsis; + } +} diff --git a/public/less/components/tags.less b/public/less/components/tags.less new file mode 100644 index 00000000000..b19eab1244a --- /dev/null +++ b/public/less/components/tags.less @@ -0,0 +1,24 @@ + +// Labels & Badges +.label-tag { + background-color: @purple; + color: darken(@white, 5%); + white-space: nowrap; + border-radius: 3px; + text-shadow: none; + font-size: 13px; + padding: 2px 6px; + border-width: 1px; + border-style: solid; + .icon-tag { + position: relative; + top: 1px; + padding-right: 4px; + } +} + +.label-tag:hover { + opacity: 0.85; + background-color: darken(@purple, 10%); +} + diff --git a/public/less/components/typeahead.less b/public/less/components/typeahead.less new file mode 100644 index 00000000000..23802504b0b --- /dev/null +++ b/public/less/components/typeahead.less @@ -0,0 +1,6 @@ + +// typeahead max height +.typeahead { + max-height: 300px; + overflow-y: auto; +} diff --git a/public/less/grafana.dark.less b/public/less/grafana.dark.less index 96f24eeec02..ba8897f5aac 100644 --- a/public/less/grafana.dark.less +++ b/public/less/grafana.dark.less @@ -1,5 +1,4 @@ @import "variables.dark.less"; @import "bootstrap/bootstrap.less"; @import "bootswatch.dark.less"; -@import "overrides.less"; @import "grafana.less"; diff --git a/public/less/grafana.less b/public/less/grafana.less index 875c314c770..bd557bcde83 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -39,6 +39,10 @@ @import "./components/navbar.less"; @import "./components/popovers.less"; @import "./components/alerts.less"; +@import "./components/typeahead.less"; +@import "./components/tags.less"; +@import "./components/modals.less"; +@import "./components/dropdown.less"; // PAGES @import "./pages/login.less"; @@ -81,15 +85,6 @@ width: 24px; } -.modal { - max-width: 800px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - top: 20%; -} - .histogram-chart { position:relative; } @@ -237,93 +232,6 @@ td:first-child { text-align: right; } } -.modal-no-header { - border: 1px solid @grafanaTargetFuncBackground; - text-align: center; - - h3 { - margin-top: 30px; - } - - .modal-close { - float: right; - font-size: 140%; - padding: 10px; - } - - .modal-tagline { - font-size: 16px; - } -} - -.confirm-modal { - max-width: 500px; - - .confirm-modal-icon { - padding-top: 41px; - font-size: 280%; - color: @green; - padding-bottom: 20px; - } - - .confirm-modal-title { - font-size: 18px; - color: @linkColor; - margin-bottom: 15px; - } - - .confirm-modal-buttons { - margin-top: 35px; - margin-bottom: 35px; - button { - margin-right: 5px - } - } -} - -.share-modal-body { - text-align: center; - padding: 10px 0; - - .tight-form { - text-align: left; - } - - .share-modal-options { - margin: 11px 20px 33px 20px; - } - - .share-modal-big-icon { - .fa, .icon-gf { - font-size: 70px; - } - } - - .share-snapshot-info-text { - margin: 10px 105px; - strong { - color: @headingsColor; - font-weight: 500; - } - } - - .share-snapshot-header { - margin: 20px 0 22px 0; - } - - .tight-form { - text-align: left; - } - - .share-snapshot-link { - max-width: 716px; - white-space: nowrap; - overflow: hidden; - display: block; - text-overflow: ellipsis; - } -} - .query-keyword { font-weight: bold; color: @blue; diff --git a/public/less/grafana.light.less b/public/less/grafana.light.less index 601e0cbf15a..6f07f7f9075 100644 --- a/public/less/grafana.light.less +++ b/public/less/grafana.light.less @@ -1,5 +1,4 @@ @import "variables.light.less"; @import "bootstrap/bootstrap.less"; @import "bootswatch.light.less"; -@import "overrides.less"; @import "grafana.less"; diff --git a/public/less/overrides.less b/public/less/overrides.less deleted file mode 100644 index 6ea47048342..00000000000 --- a/public/less/overrides.less +++ /dev/null @@ -1,266 +0,0 @@ -// Backgrounds -// --------------------- - - -/* =================================================== - * popover-extra-placements.css v0.1 - * http://twitter.github.com/bootstrap-popover-extra-placements - * =================================================== - * Copyright 2012 Daniel Kleehammer - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ========================================================== */ - - -/************************* - * Top Positions - *************************/ - -/** Top Left **/ -.popover.topLeft { - margin-top: -10px; -} - -.popover.topLeft .arrow { - bottom: -10px; - left: 25%; - margin-left: -10px; - border-width: 10px 10px 0; - border-top-color: @popoverTitleBackground; -} - -.popover.topLeft .arrow:after { - border-width: 11px 11px 0; - border-top-color: rgba(0, 0, 0, 0.25); - bottom: -1px; - left: -11px; -} - -/** Top Right **/ -.popover.topRight { - margin-top: -10px; -} - -.popover.topRight .arrow { - bottom: -10px; - left: 75%; - margin-left: -10px; - border-width: 10px 10px 0; - border-top-color: @popoverTitleBackground;; -} - -.popover.topRight .arrow:after { - border-width: 11px 11px 0; - border-top-color: rgba(0, 0, 0, 0.25); - bottom: -1px; - left: -11px; -} - - -/************************* - * Right Positions - *************************/ -.popover { - &.rightTop .arrow { - top: 10%; - left: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-left-width: 0; - border-right-color: #999; // IE8 fallback - border-right-color: @popoverArrowOuterColor; - &:after { - left: 1px; - bottom: -@popoverArrowWidth; - border-left-width: 0; - border-right-color: @popoverArrowColor; - } - } - &.rightBottom .arrow { - top: 90%; - left: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-left-width: 0; - border-right-color: #999; // IE8 fallback - border-right-color: @popoverArrowOuterColor; - &:after { - left: 1px; - bottom: -@popoverArrowWidth; - border-left-width: 0; - border-right-color: @popoverArrowColor; - } - } - &.bottomLeft .arrow { - left: 10%; - margin-left: -@popoverArrowOuterWidth; - border-top-width: 0; - border-bottom-color: #999; // IE8 fallback - border-bottom-color: @popoverArrowOuterColor; - top: -@popoverArrowOuterWidth; - &:after { - top: 1px; - margin-left: -@popoverArrowWidth; - border-top-width: 0; - border-bottom-color: @popoverArrowColor; - } - } - &.bottomRight .arrow { - left: 90%; - margin-left: -@popoverArrowOuterWidth; - border-top-width: 0; - border-bottom-color: #999; // IE8 fallback - border-bottom-color: @popoverArrowOuterColor; - top: -@popoverArrowOuterWidth; - &:after { - top: 1px; - margin-left: -@popoverArrowWidth; - border-top-width: 0; - border-bottom-color: @popoverArrowColor; - } - } - &.leftTop .arrow { - top: 10%; - right: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-right-width: 0; - border-left-color: #999; // IE8 fallback - border-left-color: @popoverArrowOuterColor; - &:after { - right: 1px; - border-right-width: 0; - border-left-color: @popoverArrowColor; - bottom: -@popoverArrowWidth; - } - } - &.leftBottom .arrow { - top: 90%; - right: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-right-width: 0; - border-left-color: #999; // IE8 fallback - border-left-color: @popoverArrowOuterColor; - &:after { - right: 1px; - border-right-width: 0; - border-left-color: @popoverArrowColor; - bottom: -@popoverArrowWidth; - } - } - &.topLeft .arrow { - left: 10%; - margin-left: -@popoverArrowOuterWidth; - border-bottom-width: 0; - border-top-color: #999; // IE8 fallback - border-top-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - &:after { - bottom: 1px; - margin-left: -@popoverArrowWidth; - border-bottom-width: 0; - border-top-color: @popoverArrowColor; - } - } - &.topRight .arrow { - left: 90%; - margin-left: -@popoverArrowOuterWidth; - border-bottom-width: 0; - border-top-color: #999; // IE8 fallback - border-top-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - &:after { - bottom: 1px; - margin-left: -@popoverArrowWidth; - border-bottom-width: 0; - border-top-color: @popoverArrowColor; - } - } -} - -// typeahead max height -.typeahead { - max-height: 300px; - overflow-y: auto; -} - -// Labels & Badges -.label-tag { - background-color: @purple; - color: darken(@white, 5%); - white-space: nowrap; - border-radius: 3px; - text-shadow: none; - font-size: 13px; - padding: 2px 6px; - border-width: 1px; - border-style: solid; - .icon-tag { - position: relative; - top: 1px; - padding-right: 4px; - } -} - -.label-tag:hover { - opacity: 0.85; - background-color: darken(@purple, 10%); -} - -.label-tag-email { - padding-left: 25px; - background: @black url(/img/envelope.png) 5px 50% no-repeat !important; - border-color: @black !important; - font-size: 12px; - font-weight: normal; - border-radius: 5px; -} - - -// inspector -.inspector-request-table { - td { - padding: 5px; - } - - td:first-child { - white-space: nowrap; - } -} - -.modal-body { - padding: 0; -} - -// pre -code, pre { - background-color: @codeTagBackground; - color: @textColor; - border: 1px solid darken(@codeTagBackground, 15%); - padding: 2px; -} - -.dropdown-menu { - min-width: 140px; - > li > a { - padding: 3px 20px 3px 15px; - i { - padding-right: 5px; - color: @linkColorDisabled; - } - } -} - -.dropdown-submenu>.dropdown-menu.dropdown-submenu-left { - left: auto; - right: 100%; - margin-left: 0; - margin-right: -1px; -}