[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

1 files changed, 234 insertions, 0 deletions

diff --git a/catalog-ui/src/assets/styles/tlv-buttons.less b/catalog-ui/src/assets/styles/tlv-buttons.less
new file mode 100644
index 0000000000..0e42a92231
--- /dev/null
+++ b/catalog-ui/src/assets/styles/tlv-buttons.less
@@ -0,0 +1,234 @@
+.tlv-btn {
+  border-radius: 2px;
+  cursor: pointer;
+  display: inline-block;
+  font-family: omnes-medium, Sans-Serif;
+  height: 32px;
+  min-width: 96px;
+  line-height: 30px;
+  padding: 0 16px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 14px;
+
+  &:disabled {
+    opacity: .4;
+    pointer-events: none;
+  }
+
+  &.blue {
+    background-color: #009fdb;
+    border: 1px solid #0091c8;
+    color: #fff;
+
+    &:hover {
+      background-color: #1ec2ff;
+    }
+
+    &:active {
+      background-color: #0091c7;
+      border: 1px solid #006186;
+      outline: none;
+    }
+
+    &:focus {
+      border-color: #009fdb;
+      box-shadow: inset 0 0 0 1px #fff;
+      outline: none;
+    }
+  }
+
+  &.white {
+    background-color: #fff;
+    border: 1px solid #d8d8d8;
+    color: @main_color_n;
+
+    &:hover {
+      border-color: #959595;
+    }
+
+    &:active {
+      background-color: #f2f2f2;
+      border: 1px solid #595959;
+      outline: none;
+    }
+
+    &:focus {
+      border-color: #959595;
+      box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #959595;
+      outline: none;
+
+    }
+
+  }
+
+  &.grey {
+    background-color: #f8f8f8;
+    border: 1px solid #d8d8d8;
+    color: #000;
+
+    &:hover {
+      border-color: #959595;
+    }
+
+    &:active {
+      background-color: #d7d7d7;
+      border: 1px solid #595959;
+      outline: none;
+    }
+
+    &:focus {
+      background-color: @tlv_color_t;
+      border-color: @main_color_n;
+      box-shadow: inset 0 0 0 1px @main_color_p, inset 0 0 0 2px @main_color_n;
+      outline: none;
+
+    }
+
+  }
+
+
+  &.green {
+    background-color: #4ca90c;
+    border: 1px solid #45a006;
+    color: #fff;
+
+    &:hover {
+      background-color: #5ec616;
+    }
+
+    &:active {
+      background-color: #3f8c0a;
+      border: 1px solid #2c6604;
+      outline: none;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 1px #fff;
+      outline: none;
+    }
+  }
+
+  &.red {
+    background-color: #fc2727;
+    border: 1px solid #a01a1a;
+    color: #fff;
+
+    &:hover {
+      background-color: #fc2727;
+    }
+
+    &:active {
+      background-color: #a01a1a;
+      border: 1px solid #730202;
+      outline: none;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 1px @main_color_p;
+      outline: none;
+    }
+  }
+
+
+  &.outline {
+    &.blue {
+      background-color: #fff;
+      border: 1px solid #009fdb;
+      color: #009fdb;
+
+      &:hover {
+        background-color: #e5f5fb;
+      }
+
+      &:active {
+        background-color: #b2e2f4;
+        border: 1px solid #009fdb;
+        outline: none;
+      }
+
+      &:focus {
+        background-color: #fff;
+        border-color: #009fdb;
+        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #009fdb;
+        outline: none;
+      }
+    }
+
+    &.grey {
+      background-color: #ffffff;
+      border: 1px solid #959595;
+      color: #5a5a5a;
+
+      &:hover {
+        background-color: #f4f4f4;
+        border-color: #959595;
+      }
+
+      &:active {
+        background-color: #dfdfdf;
+        border: 1px solid #959595;
+        outline: none;
+      }
+
+      &:focus {
+        background-color: #fff;
+        border-color: #959595;
+        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #959595;
+        outline: none;
+
+      }
+
+    }
+
+
+    &.green {
+      background-color: #ffffff;
+      border: 1px solid #4ca90c;
+      color: #4ca90c;
+
+      &:hover {
+        background-color: #edf6e6;
+        border-color: #4ca90c;
+      }
+
+      &:active {
+        background-color: #c9e5b6;
+        border: 1px solid #4ca90c;
+        outline: none;
+      }
+
+      &:focus {
+        background-color: #fff;
+        border-color: #4ca90c;
+        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #4ca90c;
+        outline: none;
+      }
+    }
+
+    &.red {
+      background-color: #ffffff;
+      border: 1px solid #cf2a2a;
+      color: #cf2a2a;
+
+      &:hover {
+        background-color: #fae9e9;
+        border-color: #cf2a2a;
+      }
+
+      &:active {
+        background-color: #c9e5b6;
+        border: 1px solid #cf2a2a;
+        outline: none;
+      }
+
+      &:focus {
+        background-color: #fff;
+        border-color: #cf2a2a;
+        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #cf2a2a;
+        outline: none;
+      }
+    }
+  }
+}
+