From c11322a01688f561c3d44afdd434438d6197b50a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 13:51:56 +0100 Subject: [PATCH] ux(less): more less cleanup, restructuring --- public/less/components/buttons.less | 61 ------------- public/less/components/dashboard.less | 17 ++++ public/less/components/footer.less | 9 ++ public/less/components/infobox.less | 20 +++++ public/less/components/query_editor.less | 16 ++++ public/less/components/shortcuts.less | 6 ++ public/less/components/tooltip.less | 4 + public/less/components/typeahead.less | 5 ++ public/less/grafana.less | 107 ++--------------------- public/less/layout/page.less | 6 +- public/less/pages/login.less | 1 + public/less/pages/signup.less | 17 ++++ public/less/utils/utils.less | 4 + public/less/variables.dark.less | 1 - 14 files changed, 108 insertions(+), 166 deletions(-) create mode 100644 public/less/components/footer.less create mode 100644 public/less/components/infobox.less create mode 100644 public/less/components/query_editor.less create mode 100644 public/less/components/shortcuts.less create mode 100644 public/less/pages/signup.less create mode 100644 public/less/utils/utils.less diff --git a/public/less/components/buttons.less b/public/less/components/buttons.less index 1ffc8f3e6cb..cd0095cf8e0 100644 --- a/public/less/components/buttons.less +++ b/public/less/components/buttons.less @@ -96,67 +96,6 @@ border: 1px solid @grafanaTargetFuncHightlight; } - -// Cross-browser Jank -// -------------------------------------------------- - -button.btn, -input[type="submit"].btn { - - // Firefox 3.6 only I believe - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - // IE7 has some default padding on button controls - *padding-top: 3px; - *padding-bottom: 3px; - - &.btn-large { - *padding-top: 7px; - *padding-bottom: 7px; - } - &.btn-small { - *padding-top: 3px; - *padding-bottom: 3px; - } - &.btn-mini { - *padding-top: 1px; - *padding-bottom: 1px; - } -} - - -// Link buttons -// -------------------------------------------------- - -// Make a button look and behave like a link -.btn-link, -.btn-link:active, -.btn-link[disabled] { - background-color: transparent; - background-image: none; - .box-shadow(none); -} -.btn-link { - border-color: transparent; - cursor: pointer; - color: @linkColor; - .border-radius(0); -} -.btn-link:hover, -.btn-link:focus { - color: @linkColorHover; - text-decoration: underline; - background-color: transparent; -} -.btn-link[disabled]:hover, -.btn-link[disabled]:focus { - color: @grayDark; - text-decoration: none; -} - .btn-text { color: @btnText; margin: 0; diff --git a/public/less/components/dashboard.less b/public/less/components/dashboard.less index 38172d89044..cc19bf0a1b6 100644 --- a/public/less/components/dashboard.less +++ b/public/less/components/dashboard.less @@ -1,3 +1,6 @@ +.template-variable { + color: @variable; +} .grafana-row { margin-bottom: 5px; @@ -266,3 +269,17 @@ div.flot-text { height: 15px; display: block; } + +.dashboard-header { + font-family: "grafana-icons"; + font-size: 22px; + text-align: center; + span { + display: inline-block; + border: none; + border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); + border-image-slice: 1; + border-bottom: 2px solid transparent; + padding: 1.2rem .2rem .4rem .2rem; + } +} diff --git a/public/less/components/footer.less b/public/less/components/footer.less new file mode 100644 index 00000000000..9c25c837b3f --- /dev/null +++ b/public/less/components/footer.less @@ -0,0 +1,9 @@ +.grafana-version-info { + position: absolute; + bottom: 2px; + left: 3px; + font-size: 80%; + color: darken(@gray, 25%); + a { color: darken(@gray, 25%); } +} + diff --git a/public/less/components/infobox.less b/public/less/components/infobox.less new file mode 100644 index 00000000000..be446e9eb8a --- /dev/null +++ b/public/less/components/infobox.less @@ -0,0 +1,20 @@ +.grafana-info-box:before { + content: "\f05a"; + font-family:'FontAwesome'; + position: absolute; + top: -8px; + left: -8px; + font-size: 20px; + color: @blue; +} + +.grafana-info-box { + position: relative; + padding: 5px 15px; + background-color: @grafanaTargetBackground; + border: 1px solid @grafanaTargetBorder; + h5 { + margin-top: 5px; + } +} + diff --git a/public/less/components/query_editor.less b/public/less/components/query_editor.less new file mode 100644 index 00000000000..de7df012c46 --- /dev/null +++ b/public/less/components/query_editor.less @@ -0,0 +1,16 @@ +.query-keyword { + font-weight: bold; + color: @blue; +} + +.query-segment-key { + border-right: none; + padding-right: 1px; +} + +.query-segment-operator { + padding-right: 1px; + border-right: none; + color: @orange; +} + diff --git a/public/less/components/shortcuts.less b/public/less/components/shortcuts.less new file mode 100644 index 00000000000..ed639b6292c --- /dev/null +++ b/public/less/components/shortcuts.less @@ -0,0 +1,6 @@ +.shortcut-table { + td { padding: 3px; } + th:last-child { text-align: left; } + td:first-child { text-align: right; } +} + diff --git a/public/less/components/tooltip.less b/public/less/components/tooltip.less index 1922128d4d3..03be011f72a 100644 --- a/public/less/components/tooltip.less +++ b/public/less/components/tooltip.less @@ -96,3 +96,7 @@ border-bottom: 0px solid #c8c8c8; } +.grafana-tip { + padding-left: 5px; +} + diff --git a/public/less/components/typeahead.less b/public/less/components/typeahead.less index 23802504b0b..6d63ed05a99 100644 --- a/public/less/components/typeahead.less +++ b/public/less/components/typeahead.less @@ -4,3 +4,8 @@ max-height: 300px; overflow-y: auto; } + +.typeahead strong { + color: @yellow; +} + diff --git a/public/less/grafana.less b/public/less/grafana.less index 8e0b80470db..76b199224f9 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -7,6 +7,7 @@ @import "./base/code.less"; // UTILS +@import "./utils/utils.less"; @import "./utils/validation.less"; @import "./utils/angular.less"; @@ -49,6 +50,10 @@ @import "./components/color_picker.less"; @import "./components/tooltip.less"; @import "./components/buttons.less"; +@import "./components/footer.less"; +@import "./components/infobox.less"; +@import "./components/shortcuts.less"; +@import "./components/query_editor.less"; // PAGES @import "./pages/login.less"; @@ -56,105 +61,5 @@ @import "./pages/admin.less"; @import "./pages/alerting.less"; @import "./pages/apps.less"; +@import "./pages/signup.less"; -.grafana-version-info { - position: absolute; - bottom: 2px; - left: 3px; - font-size: 80%; - color: darken(@gray, 25%); - a { color: darken(@gray, 25%); } -} - -.template-variable { - color: @variable; -} - -.grafana-info-box:before { - content: "\f05a"; - font-family:'FontAwesome'; - position: absolute; - top: -8px; - left: -8px; - font-size: 20px; - color: @blue; -} - -.grafana-info-box { - position: relative; - padding: 5px 15px; - background-color: @grafanaTargetBackground; - border: 1px solid @grafanaTargetBorder; - h5 { - margin-top: 5px; - } -} - -.grafana-tip { - padding-left: 5px; -} - -.shortcut-table { - td { padding: 3px; } - th:last-child { text-align: left; } - td:first-child { text-align: right; } -} - -.query-keyword { - font-weight: bold; - color: @blue; -} - -.query-segment-key { - border-right: none; - padding-right: 1px; -} - -.query-segment-operator { - padding-right: 1px; - border-right: none; - color: @orange; -} - -.highlight-word { - color: @orange; -} - -.body-copy-emphasis { - color: @headingsColor; -} - -.signup-page-container { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - background-image: url(/img/background_tease.jpg); - - .signup-logo-container { - width: 150px; - margin: 0 auto; - padding: 80px 0; - } -} - -.typeahead strong { - color: @yellow; -} - -.dashboard-header { - font-family: "grafana-icons"; - font-size: 22px; - text-align: center; - span { - display: inline-block; - border: none; - border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); - border-image-slice: 1; - border-bottom: 2px solid transparent; - padding: 1.2rem .2rem .4rem .2rem; - } -} diff --git a/public/less/layout/page.less b/public/less/layout/page.less index ed775ecb07c..11b37da2f96 100644 --- a/public/less/layout/page.less +++ b/public/less/layout/page.less @@ -10,9 +10,9 @@ } .main-view { - background-image: url(/img/grafana_pattern.png); - background-position: 100% -550px; - background-repeat: no-repeat; + // background-image: url(/img/grafana_pattern.png); + // background-position: 100% -550px; + // background-repeat: no-repeat; height: 100%; } diff --git a/public/less/pages/login.less b/public/less/pages/login.less index 98942b660ba..16dd1f342fb 100644 --- a/public/less/pages/login.less +++ b/public/less/pages/login.less @@ -98,6 +98,7 @@ background: #dd4b39; color: white; } + .btn-github { background: #555; color: white; diff --git a/public/less/pages/signup.less b/public/less/pages/signup.less new file mode 100644 index 00000000000..7b2b0b0e84a --- /dev/null +++ b/public/less/pages/signup.less @@ -0,0 +1,17 @@ +.signup-page-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + background-image: url(/img/background_tease.jpg); + + .signup-logo-container { + width: 150px; + margin: 0 auto; + padding: 80px 0; + } +} + diff --git a/public/less/utils/utils.less b/public/less/utils/utils.less new file mode 100644 index 00000000000..3e145a2bc58 --- /dev/null +++ b/public/less/utils/utils.less @@ -0,0 +1,4 @@ +.highlight-word { + color: @orange; +} + diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 7784d3c6dac..9303f017496 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -148,7 +148,6 @@ @btnInverseText: @textColor; @btnInverseBorder: #333; - @btnText: @gray; @iconContainerBackground: @black;