ux(less): more less cleanup, restructuring

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;

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;
+  }
+}

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%); }
+}
+

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;
+  }
+}
+

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;
+}
+

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; }
+}
+

public/less/components/tooltip.less

@@ -96,3 +96,7 @@
  border-bottom: 0px solid #c8c8c8;
 }
 
+.grafana-tip {
+  padding-left: 5px;
+}
+

public/less/components/typeahead.less

@@ -4,3 +4,8 @@
   max-height: 300px;
   overflow-y: auto;
 }
+
+.typeahead strong {
+  color: @yellow;
+}
+

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;
-  }
-}

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%;
 }
 

public/less/pages/login.less

@@ -98,6 +98,7 @@
     background: #dd4b39;
     color: white;
   }
+
   .btn-github {
     background: #555;
     color: white;

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;
+  }
+}
+

public/less/utils/utils.less

@@ -0,0 +1,4 @@
+.highlight-word {
+  color: @orange;
+}
+

public/less/variables.dark.less

@@ -148,7 +148,6 @@
 @btnInverseText:                    @textColor;
 @btnInverseBorder:                  #333;
 
-
 @btnText:              				@gray;
 
 @iconContainerBackground:			      @black;