[SDC-29] catalog 1707 rebase commit.

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

1 files changed, 274 insertions, 0 deletions

diff --git a/catalog-ui/src/assets/styles/buttons.less b/catalog-ui/src/assets/styles/buttons.less
new file mode 100644
index 0000000000..7215d7a3d4
--- /dev/null
+++ b/catalog-ui/src/assets/styles/buttons.less
@@ -0,0 +1,274 @@
+.w-sdc-btn {
+    .c_4;
+    .hand;
+    .border-radius(5px);
+    border: 0;
+    height: 38px;
+    line-height: 38px;
+    width: 195px;
+    margin: 0 6px;
+    padding: 0;
+    vertical-align: middle;
+    outline: none;
+    &:disabled { .bg_e; }
+}
+
+.w-sdc-btn-small {
+    .c_9;
+    .hand;
+    .border-radius(5px);
+    border: 0;
+    height: 30px;
+    line-height: 30px;
+    width: 71px;
+    margin: 0 6px;
+    padding: 0;
+    outline: none;
+    vertical-align: middle;
+    position: relative;
+    &:disabled { .bg_e; }
+}
+
+
+
+.w-sdc-btn-red-small{
+
+    .w-sdc-btn-small;
+    .bg_h;
+    &:hover:enabled { .bg_h_hover; }
+    padding-left: 15px;
+
+    span {
+        position: absolute;
+        top: 7px;
+        left: 10px;
+    }
+}
+
+.w-sdc-btn-green-small{
+    .w-sdc-btn-small;
+    .bg_z;
+    &:hover:enabled { .bg_z_hover; }
+
+}
+
+
+.w-sdc-btn-light-green {
+    .w-sdc-btn;
+    .bg_z;
+    &:hover:enabled { .bg_z_hover; }
+}
+
+.w-sdc-btn-green {
+    .w-sdc-btn;
+    .bg_d;
+    &:hover:enabled { .bg_d_hover; }
+}
+
+.w-sdc-btn-blue {
+    .w-sdc-btn;
+    .bg_a;
+    &:hover:enabled { .bg_a_hover; }
+}
+
+.w-sdc-btn-dark-gray {
+    .w-sdc-btn;
+    .bg_i;
+    &:hover:enabled { .bg_i_hover; }
+}
+
+.w-sdc-form-action {
+    .c_6;
+    //.bg_d;
+    background-color: #28bd6e; //TO DO: add to variables
+    .border-radius(5px);
+    .hand;
+    border: 0;
+    height: 38px;
+    line-height: 38px;
+    width: 264px;
+
+    &:hover { background-color: #23aa63; } //TO DO: add to variables
+    &:disabled { background-color: #93deb6; } //TO DO: add to variables
+}
+
+/*
+CLASSIC BUTTON
+Examples:
+-------------------------------------------------------------------
+<button class="w-sdc-classic-btn blue">Text 1</button>
+<button class="w-sdc-classic-btn green">Text 1</button>
+<button class="w-sdc-classic-btn gray">Text 1</button>
+<button class="w-sdc-classic-btn white">Text 1</button>
+<button class="w-sdc-classic-btn blue disabled">Text 5</button>
+*/
+.w-sdc-classic-btn {
+    .p_14_m;
+    text-align: center;
+    .border-radius(2px);
+    border-style: solid;
+    border-width: 1px;
+    width: 94px;
+    height: 30px;
+    display: block;
+    vertical-align: middle;
+    line-height: 30px;
+    cursor: pointer;
+    text-decoration: none;
+    box-sizing: border-box;
+    .noselect;
+    position: relative;
+
+    &:focus,
+    &:active:focus {
+        outline: 0 none;
+    }
+
+    &.primary {
+        border-color: @main_color_b;
+        background-color:  @main_color_a;
+        color: @main_color_p;
+
+        &:hover     {
+            background-color:  #1ec2ff;
+        }
+    }
+
+    &.white {
+
+    }
+
+    &.grey {
+
+    }
+
+    &.positive {
+
+    }
+
+    &.negative {
+
+    }
+
+    &.blue {
+        .c_7;
+        ._w-sdc-classic-btn-configuration(#036698, #3b7b9b, #023c59);                   // Normal
+        &:hover     { ._w-sdc-classic-btn-configuration(#036698, #458eb2, #023c59); }   // Hover
+        &:active    { ._w-sdc-classic-btn-configuration(#036698, #336c88, #023c59); }   // Pressed
+        &:focus     { &:before { ._w-sdc-classic-btn-focus(#ffffff, 0px); } }                // Focus
+        &:disabled,
+        &.disabled {
+            .c_7;
+            opacity: 0.3;
+            ._w-sdc-classic-btn-configuration(#036698, #3b7b9b, #023c59);                // Disabled
+        }
+    }
+
+    &.green {
+        .c_7;
+        ._w-sdc-classic-btn-configuration(#25a762, #28bd6e, #235600);                   // Normal
+        &:hover     { ._w-sdc-classic-btn-configuration(#25a762, #2bcd77, #235600); }   // Hover
+        &:active    { ._w-sdc-classic-btn-configuration(#45a006, #24a862, #235600); }   // Pressed
+        &:focus     { &:before { ._w-sdc-classic-btn-focus(#ffffff, 0px); } }                // Focus
+        &:disabled,
+        &.disabled {
+            .c_7;
+            opacity: 0.3;
+            ._w-sdc-classic-btn-configuration(#45a006, #28bd6e, #235600);                // Disabled
+        }
+    }
+
+    &.gray {
+        .b_7;
+        ._w-sdc-classic-btn-configuration(#d8d8d8, #f6f6f6, #aaaaaa);                   // Normal
+        &:hover     { ._w-sdc-classic-btn-configuration(#d8d8d8, #ececec, #aaaaaa); }   // Hover
+        &:active    { ._w-sdc-classic-btn-configuration(#d8d8d8, #d7d7d7, #aaaaaa); }   // Pressed
+        &:focus     { &:before { ._w-sdc-classic-btn-focus(#666666, -1px); } }          // Focus
+        &:disabled,
+        &.disabled {
+            .b_7;
+            opacity: 0.3;
+            ._w-sdc-classic-btn-configuration(#d8d8d8, #f6f6f6, #aaaaaa);                // Disabled
+        }
+    }
+
+    &.white {
+        .b_7;
+        ._w-sdc-classic-btn-configuration(#d8d8d8, #ffffff, #aaaaaa);                   // Normal
+        &:hover     { ._w-sdc-classic-btn-configuration(#d8d8d8, #f6f6f6, #aaaaaa); }   // Hover
+        &:active    { ._w-sdc-classic-btn-configuration(#d8d8d8, #ececec, #aaaaaa); }   // Pressed
+        &:focus     { &:before { ._w-sdc-classic-btn-focus(#666666, -1px); } }                // Focus
+        &:disabled,
+        &.disabled {
+            .b_7;
+            opacity: 0.3;
+            ._w-sdc-classic-btn-configuration(#d8d8d8, #ffffff, #aaaaaa);                // Disabled
+        }
+    }
+}
+
+._w-sdc-classic-btn-configuration(@border-color; @background-color; @shadow-color) {
+    border-color:  @border-color;
+    background-color:  @background-color;
+    .box-shadow(0px 1px 0.99px 0.01px @shadow-color);
+}
+
+._w-sdc-classic-btn-focus(@border-color, @position) {
+    content: " ";
+    position: absolute;
+    top: @position;
+    left: @position;
+    right: @position;
+    bottom: -1px + @position;
+    border: 1px solid @border-color;
+    z-index: 1;
+    .border-radius(2px);
+}
+
+/*
+WIZARD STEP CIRCLE BUTTON
+Examples:
+-------------------------------------------------------------------
+<button class="w-sdc-wizard-step-btn">1</button>
+<button class="w-sdc-wizard-step-btn selected">2</button>
+<button class="w-sdc-wizard-step-btn valid">3</button>
+<button class="w-sdc-wizard-step-btn">4</button>
+<button class="w-sdc-wizard-step-btn disabled">5</button>
+*/
+.w-sdc-wizard-step-btn {
+    ._w-sdc-wizard-step-btn(18px);
+}
+._w-sdc-wizard-step-btn(@circle-radius) {
+    // I'm not using border, so the text inside will be vertical aligned.
+    .circle(@circle-radius * 2, #f6f6f6);
+    .noselect;
+    outline: 0 none;
+    position: relative;
+    vertical-align: top;
+    cursor: pointer;
+    vertical-align: middle;
+    border: none;
+    .box-shadow(inset 0px 0px 0px 1px #d8d8d8);
+    .b_17;
+
+    &:active    { .box-shadow(none); background-color: #eaeaea;}    // Pressed
+    &.disabled  { color: #a8b3b9; cursor: default; }
+    &.disabled:active { .box-shadow(inset 0px 0px 0px 1px #d8d8d8); background-color: #f6f6f6; }
+    &.valid {
+        .circle(@circle-radius * 2, #ffffff);
+        .box-shadow(inset 0px 0px 0px 2px #28bd6e);
+        .b_17;
+    }
+    &.selected  {
+        .c_17;
+        background-color: #3b7b9b;
+        .box-shadow(none);
+        &:active    {background-color: #336c88;}    // Pressed
+    }
+}
+
+
+
+
+
+