From 50c79df70f76c4174276d1e4ffd2ce3ded42e322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 20:44:41 +0100 Subject: [PATCH] ux(less): less cleanup of unused styles, restructuring and consolidating --- public/app/core/components/navbar/navbar.html | 36 ++- .../features/panel/partials/soloPanel.html | 2 +- public/app/partials/dashboard.html | 4 +- public/less/base/base.less | 8 + public/less/{bootstrap => base}/code.less | 7 +- public/less/bootstrap/bootstrap.less | 3 - public/less/bootstrap/layouts.less | 16 -- public/less/bootstrap/media.less | 55 ----- public/less/bootstrap/navbar.less | 205 ------------------ public/less/bootswatch.dark.less | 55 ----- public/less/components/navbar.less | 57 ++++- public/less/components/old_stuff.less | 20 ++ public/less/components/scrollbar.less | 41 ++++ public/less/grafana.less | 46 +--- public/less/overrides.less | 131 +---------- public/less/utils/validation.less | 4 + 16 files changed, 155 insertions(+), 535 deletions(-) create mode 100644 public/less/base/base.less rename public/less/{bootstrap => base}/code.less (88%) delete mode 100644 public/less/bootstrap/layouts.less delete mode 100644 public/less/bootstrap/media.less delete mode 100644 public/less/bootstrap/navbar.less create mode 100644 public/less/components/old_stuff.less create mode 100644 public/less/components/scrollbar.less diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 8f070616d6e..aeb2c8b04fd 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,24 +1,22 @@
-
- -
- - - - - - - -
- - -
- - -
- -
+
+
+ + + + + + +
+ + +
+ + +
+ +
diff --git a/public/app/features/panel/partials/soloPanel.html b/public/app/features/panel/partials/soloPanel.html index eb0c95baaec..e76ad724343 100644 --- a/public/app/features/panel/partials/soloPanel.html +++ b/public/app/features/panel/partials/soloPanel.html @@ -1,4 +1,4 @@ -
+
diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 3d1f44042fe..685429d5e84 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -16,14 +16,14 @@
- +
-
+
diff --git a/public/less/base/base.less b/public/less/base/base.less new file mode 100644 index 00000000000..871abc436c0 --- /dev/null +++ b/public/less/base/base.less @@ -0,0 +1,8 @@ +html { + height: 100%; +} + +body { + height: 100%; + background: @bodyBackground; +} diff --git a/public/less/bootstrap/code.less b/public/less/base/code.less similarity index 88% rename from public/less/bootstrap/code.less rename to public/less/base/code.less index 266a926e73d..f45d0bbf52a 100644 --- a/public/less/bootstrap/code.less +++ b/public/less/base/code.less @@ -10,6 +10,7 @@ pre { #font > #family > .monospace; font-size: @baseFontSize - 2; color: @grayDark; + background-color: @codeTagBackground; .border-radius(3px); } @@ -34,7 +35,6 @@ pre { white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; - border: 1px solid #ccc; // fallback for IE7-8 border: 1px solid rgba(0,0,0,.15); .border-radius(@baseBorderRadius); @@ -54,8 +54,3 @@ pre { } } -// Enable scrollable blocks of code -.pre-scrollable { - max-height: 340px; - overflow-y: scroll; -} \ No newline at end of file diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 5fbb1439bbc..5001c873541 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -16,7 +16,6 @@ // Grid system and page structure @import "scaffolding.less"; @import "grid.less"; -@import "layouts.less"; // Base CSS @import "type.less"; @@ -35,7 +34,6 @@ // Components: Nav @import "navs.less"; -@import "navbar.less"; // Components: Popovers @import "modals.less"; @@ -43,7 +41,6 @@ @import "popovers.less"; // Components: Misc -@import "media.less"; @import "labels-badges.less"; // Utility classes diff --git a/public/less/bootstrap/layouts.less b/public/less/bootstrap/layouts.less deleted file mode 100644 index 24a2062117c..00000000000 --- a/public/less/bootstrap/layouts.less +++ /dev/null @@ -1,16 +0,0 @@ -// -// Layouts -// -------------------------------------------------- - - -// Container (centered, fixed-width layouts) -.container { - .container-fixed(); -} - -// Fluid layouts (left aligned, with sidebar, min- & max-width content) -.container-fluid { - padding-right: @gridGutterWidth; - padding-left: @gridGutterWidth; - .clearfix(); -} \ No newline at end of file diff --git a/public/less/bootstrap/media.less b/public/less/bootstrap/media.less deleted file mode 100644 index e461e446d23..00000000000 --- a/public/less/bootstrap/media.less +++ /dev/null @@ -1,55 +0,0 @@ -// Media objects -// Source: http://stubbornella.org/content/?p=497 -// -------------------------------------------------- - - -// Common styles -// ------------------------- - -// Clear the floats -.media, -.media-body { - overflow: hidden; - *overflow: visible; - zoom: 1; -} - -// Proper spacing between instances of .media -.media, -.media .media { - margin-top: 15px; -} -.media:first-child { - margin-top: 0; -} - -// For images and videos, set to block -.media-object { - display: block; -} - -// Reset margins on headings for tighter default spacing -.media-heading { - margin: 0 0 5px; -} - - -// Media image alignment -// ------------------------- - -.media > .pull-left { - margin-right: 10px; -} -.media > .pull-right { - margin-left: 10px; -} - - -// Media list variation -// ------------------------- - -// Undo default ul/ol styles -.media-list { - margin-left: 0; - list-style: none; -} diff --git a/public/less/bootstrap/navbar.less b/public/less/bootstrap/navbar.less deleted file mode 100644 index dd8d91bf1e7..00000000000 --- a/public/less/bootstrap/navbar.less +++ /dev/null @@ -1,205 +0,0 @@ -// -// Navbars (Redux) -// -------------------------------------------------- - - -// COMMON STYLES -// ------------- - -// Base class and wrapper -.navbar { - overflow: visible; - margin-bottom: @baseLineHeight; - - // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar - *position: relative; - *z-index: 2; -} - -// Inner for background effects -// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present -.navbar-inner { - min-height: @navbarHeight; - padding-left: 20px; - padding-right: 20px; - background-color: @navbarBackground; - border: 1px solid @navbarBorder; - - // Prevent floats from breaking the navbar - .clearfix(); -} - -// Set width to auto for default container -// We then reset it for fixed navbars in the #gridSystem mixin -.navbar .container { - width: auto; -} - -// NAVIGATION -// ---------- - -.navbar .nav { - position: relative; - left: 0; - float: left; - margin: 0 10px 0 0; -} - -.nav { - display: block; -} - -.navbar .nav.pull-right { - float: right; // redeclare due to specificity - margin-right: 0; // remove margin on float right nav -} -.navbar .nav > li { - float: left; -} - -// Links -.navbar .nav > li > a { - float: none; - // Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2); - color: @navbarLinkColor; - text-decoration: none; - text-shadow: 0 1px 0 @navbarBackgroundHighlight; -} -.navbar .nav .dropdown-toggle .caret { - margin-top: 8px; -} - -// Hover/focus -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active - color: @navbarLinkColorHover; - text-decoration: none; -} - -// Active nav items -.navbar .nav > .active > a, -.navbar .nav > .active > a:hover, -.navbar .nav > .active > a:focus { - color: @navbarLinkColorActive; - text-decoration: none; - background-color: @navbarLinkBackgroundActive; - .box-shadow(inset 0 3px 8px rgba(0,0,0,.125)); -} - -// Navbar button for toggling navbar items in responsive layouts -// These definitions need to come after '.navbar .btn' -.navbar .btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); -} -.navbar .btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - .border-radius(1px); - .box-shadow(0 1px 0 rgba(0,0,0,.25)); -} -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} - - - -// Dropdown menus -// -------------- - -// Menu position and menu carets -.navbar .nav > li > .dropdown-menu { - &:before { - content: ''; - display: inline-block; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-bottom-color: @dropdownBorder; - position: absolute; - top: -7px; - left: 9px; - } - &:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid @dropdownBackground; - position: absolute; - top: -6px; - left: 10px; - } -} -// Menu position and menu caret support for dropups via extra dropup class -.navbar-fixed-bottom .nav > li > .dropdown-menu { - &:before { - border-top: 7px solid #ccc; - border-top-color: @dropdownBorder; - border-bottom: 0; - bottom: -7px; - top: auto; - } - &:after { - border-top: 6px solid @dropdownBackground; - border-bottom: 0; - bottom: -6px; - top: auto; - } -} - -// Caret should match text color on hover/focus -.navbar .nav li.dropdown > a:hover .caret, -.navbar .nav li.dropdown > a:focus .caret { - border-top-color: @navbarLinkColorHover; - border-bottom-color: @navbarLinkColorHover; -} - -// Remove background color from open dropdown -.navbar .nav li.dropdown.open > .dropdown-toggle, -.navbar .nav li.dropdown.active > .dropdown-toggle, -.navbar .nav li.dropdown.open.active > .dropdown-toggle { - background-color: @navbarLinkBackgroundActive; - color: @navbarLinkColorActive; -} -.navbar .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: @navbarLinkColor; - border-bottom-color: @navbarLinkColor; -} -.navbar .nav li.dropdown.open > .dropdown-toggle .caret, -.navbar .nav li.dropdown.active > .dropdown-toggle .caret, -.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: @navbarLinkColorActive; - border-bottom-color: @navbarLinkColorActive; -} - -// Right aligned menus need alt position -.navbar .pull-right > li > .dropdown-menu, -.navbar .nav > li > .dropdown-menu.pull-right { - left: auto; - right: 0; - &:before { - left: auto; - right: 12px; - } - &:after { - left: auto; - right: 13px; - } - .dropdown-menu { - left: auto; - right: 100%; - margin-left: 0; - margin-right: -1px; - .border-radius(6px 0 6px 6px); - } -} diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index b92ec592fe4..4cece97d3f9 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -21,61 +21,6 @@ hr { // NAVBAR // ----------------------------------------------------- -.navbar { - - .navbar-inner { - .border-radius(0); - .box-shadow(none); - } - - .brand { - padding: 0px 15px; - color: @navbarBrandColor; - font-weight: normal; - text-shadow: none; - } - - .nav > li > a { - padding: 15px 15px 14px; - border-bottom: 1px solid transparent; - } - - .nav > li > a:hover, - .nav > .active > a, - .nav > .active > a:hover { - } - - .nav > .active > a, - .nav > .active > a:hover, - .nav > .active > a:focus { - .box-shadow(none); - } - - .navbar-text { - margin-bottom: 1px; - padding: 15px 15px 14px; - line-height: inherit; - } - - .divider-vertical { - margin: 0; - border-left: 1px solid @grayDark; - border-right-width: 0; - } - - .search-query, - .search-query:focus, - .search-query.focused { - .border-radius(1px); - background-color: @grayDark; - line-height: normal; - color: @grayLight; - text-shadow: none; - .placeholder(@gray); - } -} - - // NAV // ----------------------------------------------------- diff --git a/public/less/components/navbar.less b/public/less/components/navbar.less index 8aeb8de3e7d..2b8ed23a8f4 100644 --- a/public/less/components/navbar.less +++ b/public/less/components/navbar.less @@ -1,19 +1,68 @@ + + .navbar { + overflow: visible; position: relative; z-index: 110; - margin-bottom: 0; } -.navbar .navbar-inner { - padding-left: 0px; +.navbar-inner { + min-height: @navbarHeight; + padding-right: 20px; + background-color: @navbarBackground; border-bottom: @navbarBorder; + + .clearfix(); } -.navbar .nav>li>a { +.navbar .nav { + position: relative; + left: 0; + float: left; + margin: 0 10px 0 0; +} + +.nav { + display: block; +} + +.navbar .nav.pull-right { + float: right; // redeclare due to specificity + margin-right: 0; // remove margin on float right nav +} + +.navbar .nav > li { + float: left; +} + +// Links +.navbar .nav > li > a { + float: none; padding: 17px 13px 13px; + color: @navbarLinkColor; + text-decoration: none; + .fa { font-size: 115%; } } +// Hover/focus +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active + color: @navbarLinkColorHover; + text-decoration: none; +} + +// Active nav items +.navbar .nav > .active > a, +.navbar .nav > .active > a:hover, +.navbar .nav > .active > a:focus { + color: @navbarLinkColorActive; + text-decoration: none; + background-color: @navbarLinkBackgroundActive; +} + + .fa.top-nav-breadcrumb-icon { margin: 18px 0 6px 5px; float: left; diff --git a/public/less/components/old_stuff.less b/public/less/components/old_stuff.less new file mode 100644 index 00000000000..eae5eb558ce --- /dev/null +++ b/public/less/components/old_stuff.less @@ -0,0 +1,20 @@ + +div.editor-row { + vertical-align: top; +} + +div.editor-row div.section { + margin-right: 20px; + vertical-align: top; + display: inline-block; +} + +div.editor-option { + vertical-align: top; + display: inline-block; + margin-right: 10px; +} + +div.editor-option label { + display: block; +} diff --git a/public/less/components/scrollbar.less b/public/less/components/scrollbar.less new file mode 100644 index 00000000000..8c9d13303c8 --- /dev/null +++ b/public/less/components/scrollbar.less @@ -0,0 +1,41 @@ +// +// Srollbars +// + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar:hover { + height: 8px; +} + +::-webkit-scrollbar-button:start:decrement, +::-webkit-scrollbar-button:end:increment { display: none; } +::-webkit-scrollbar-button:horizontal:decrement { display: none; } +::-webkit-scrollbar-button:horizontal:increment { display: none; } +::-webkit-scrollbar-button:vertical:decrement { display: none; } +::-webkit-scrollbar-button:vertical:increment { display: none; } +::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } +::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } +::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } +::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } +::-webkit-scrollbar-track-piece { background-color: transparent; } + +::-webkit-scrollbar-thumb:vertical { + height: 50px; + background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); + border: 1px solid @scrollbarBorder; + border-top: 1px solid @scrollbarBorder; + border-left: 1px solid @scrollbarBorder; +} + +::-webkit-scrollbar-thumb:horizontal { + width: 50px; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); + border: 1px solid @scrollbarBorder; + border-top: 1px solid @scrollbarBorder; + border-left: 1px solid @scrollbarBorder; +} + diff --git a/public/less/grafana.less b/public/less/grafana.less index 8f01c5e9429..b57b3eaa1c4 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -1,8 +1,10 @@ // BASE +@import "./base/base.less"; @import "./base/type.less"; @import "./base/forms.less"; @import "./base/fonts.less"; +@import "./base/code.less"; // UTILS @import "./utils/validation.less"; @@ -31,6 +33,9 @@ @import "./components/filter-controls.less"; @import "./components/filter-list.less"; @import "./components/filter-table.less"; +@import "./components/scrollbar.less"; +@import "./components/old_stuff.less"; +@import "./components/navbar.less"; // PAGES @import "./pages/login.less"; @@ -92,47 +97,6 @@ } -// -// Srollbars -// - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar:hover { - height: 8px; -} - -::-webkit-scrollbar-button:start:decrement, -::-webkit-scrollbar-button:end:increment { display: none; } -::-webkit-scrollbar-button:horizontal:decrement { display: none; } -::-webkit-scrollbar-button:horizontal:increment { display: none; } -::-webkit-scrollbar-button:vertical:decrement { display: none; } -::-webkit-scrollbar-button:vertical:increment { display: none; } -::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } -::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } -::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } -::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } -::-webkit-scrollbar-track-piece { background-color: transparent; } - -::-webkit-scrollbar-thumb:vertical { - height: 50px; - background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); - border: 1px solid @scrollbarBorder; - border-top: 1px solid @scrollbarBorder; - border-left: 1px solid @scrollbarBorder; -} - -::-webkit-scrollbar-thumb:horizontal { - width: 50px; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); - border: 1px solid @scrollbarBorder; - border-top: 1px solid @scrollbarBorder; - border-left: 1px solid @scrollbarBorder; -} - // SPECTRUM CSS overrides diff --git a/public/less/overrides.less b/public/less/overrides.less index a1e923ea28b..2f2aedb373b 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -1,134 +1,6 @@ -// Containers -// --------------------- -.container-fluid { - padding-left: 0px; - padding-right: 0px; -} - // Backgrounds // --------------------- -.bgNav { - background: @navbarBackground; -} - -.bgPrimary { - background: @btnPrimaryBackground; - color: rgba(255,255,255,.90); -} - -.bgInfo { - background: @btnInfoBackground; - color: rgba(255,255,255,.90); - -} - -.bgSuccess { - background: @btnSuccessBackground; - color: rgba(255,255,255,.90); - -} - -.bgWarning { - background: @btnWarningBackground; - color: rgba(255,255,255,.90); -} - -.bgDanger { - background: @btnDangerBackground; - color: rgba(255,255,255,.90); - -} - -.bgInverse { - background: @btnInverseBackground; - color: rgba(255,255,255,.90); -} - -code, pre { - background-color: @codeTagBackground; -} - -div.editor-row { - vertical-align: top; -} - -div.editor-row div.section { - margin-right: 20px; - vertical-align: top; - display: inline-block; -} - -div.editor-option { - vertical-align: top; - display: inline-block; - margin-right: 10px; -} - -div.editor-option label { - display: block; -} - -#events { - font-size: 12px; -} - -.version { - font-size: 85%; -} - -.legend { - color: @black; -} - -div.fake-input { - background-color: @inputBackground; - border: 1px solid @inputBorder; - .border-radius(@inputBorderRadius @inputBorderRadius @inputBorderRadius @inputBorderRadius); -} - -hr.small { - margin: 5px 0px; -} - -form input.ng-invalid { - color: @errorText; -} - -.editor-title { - margin-right: 10px; - font-size: 1.7em; - font-weight: bold; - text-transform:capitalize; -} - -.editor-title small { - opacity: 0.5; - font-size: 0.7em; - font-weight: normal; -} - -.bordered { - border: 1px solid @tableBorder; -} - -.table-unpadded { - th, - td { - padding: 0px 2px; - } -} - -.spy { - position:absolute; - right:0px; - top:0px; -} - -.navbar-inner { - border-width: 0 0 0px; -} - .grafana-row { margin-bottom: 5px; } @@ -149,6 +21,8 @@ form input.ng-invalid { text-align: center; display: inline-block; line-height: 30px; + background: @btnSuccessBackground; + color: rgba(255,255,255,.90); } .row-button { @@ -156,6 +30,7 @@ form input.ng-invalid { float: left; cursor: pointer; line-height: 31px; + background-color: @blueDark; } .row-text { diff --git a/public/less/utils/validation.less b/public/less/utils/validation.less index fdb398f2245..cdc9e45ac4c 100644 --- a/public/less/utils/validation.less +++ b/public/less/utils/validation.less @@ -1,3 +1,7 @@ input[type=text].ng-dirty.ng-invalid { box-shadow: inset 0 0px 7px @red; } + +form input.ng-invalid { + color: @errorText; +}