Starting css refactor for grafana-target

2015-01-16 08:35:32 +01:00
parent af3aa81d71
commit e1f410d32e
6 changed files with 524 additions and 533 deletions
@@ -0,0 +1,165 @@
+
+// old graphite-target
+.tight-form:last-child {
+  border-bottom: 1px solid @grafanaTargetBorder;
+  .dropdown {
+    padding: 0; margin: 0;
+  }
+}
+
+// old graphite-target-inner
+.tight-form-row {
+  border-top: 1px solid @grafanaTargetBorder;
+  border-left: 1px solid @grafanaTargetBorder;
+  border-right: 1px solid @grafanaTargetBorder;
+  background: @grafanaTargetBackground;
+  width: 100%;
+}
+
+// old graphite-segment-list
+.tight-form-list {
+  list-style: none;
+  margin: 0;
+  >li {
+    float: left;
+  }
+}
+
+.grafana-metric-options {
+  margin-top: 35px;
+}
+
+// old grafana-target-segment {
+.tight-form-item {
+  padding: 8px 7px;
+  display: inline-block;
+  font-weight: normal;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  color: @grafanaTargetColor;
+  display: inline-block;
+
+  .has-open-function & {
+    padding-top: 25px;
+  }
+
+  // old .grafana-target-hidden & {
+  .tight-form-disabled & {
+    color: @grafanaTargetColorHide;
+  }
+
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &a:hover {
+    background: @grafanaTargetFuncBackground;
+  }
+
+  &.template-param-name {
+    border-right: none;
+    padding-right: 3px;
+  }
+  &.annotation-segment {
+    padding: 8px 15px;
+  }
+
+  &.last {
+    border-right: none;
+  }
+}
+
+//.grafana-target-segment-icon {
+.tight-form-item-icon {
+  i {
+    width: 15px;
+    text-align: center;
+    display: inline-block;
+  }
+}
+
+//.grafana-target-function {
+.tight-form-item-func {
+  background: @grafanaTargetFuncBackground;
+  > a {
+    color: @grafanaTargetColor;
+  }
+  > a:hover {
+    color: @linkColor;
+  }
+
+  &.show-function-controls {
+    padding-top: 5px;
+    min-width: 100px;
+    text-align: center;
+  }
+}
+
+//input[type=text].grafana-function-param-input {
+input[type=text].tight-form-func-param {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+//input[type=text].grafana-target-text-input {
+// input[type=text].tight-form-input {
+//   padding: 8px 7px;
+//   border: none;
+//   margin: 0px;
+//   background: transparent;
+//   float: left;
+//   color: @grafanaTargetColor;
+//   border-radius: 0;
+//   border-right: 1px solid @grafanaTargetSegmentBorder;
+// }
+
+//[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
+[type=text].tight-form-input, [type=number].tight-form-input {
+  border: none;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  padding: 8px 4px;
+  &.last {
+    border-right: none;
+  }
+}
+
+// input[type=checkbox].grafana-target-option-checkbox {
+//   margin: 0;
+// }
+
+select.tight-form-input {
+  border: none;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  height: 36px;
+  padding: 8px 5px;
+  &.last {
+    border-right: none;
+  }
+}
+
+//.graphite-func-controls {
+.tight-form-func-controls {
+  display: none;
+  text-align: center;
+
+  .fa-arrow-left {
+    float: left;
+    position: relative;
+    top: 2px;
+  }
+  .fa-arrow-right {
+    float: right;
+    position: relative;
+    top: 2px;
+  }
+  .fa-remove {
+    margin-left: 10px;
+  }
+}
+
+