Initial OpenECOMP SDC commit
Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>
diff --git a/catalog-ui/app/styles/buttons.less b/catalog-ui/app/styles/buttons.less
new file mode 100644
index 0000000..7215d7a
--- /dev/null
+++ b/catalog-ui/app/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
+ }
+}
+
+
+
+
+
+