diff options
Diffstat (limited to 'catalog-ui/app/styles/buttons.less')
-rw-r--r-- | catalog-ui/app/styles/buttons.less | 274 |
1 files changed, 0 insertions, 274 deletions
diff --git a/catalog-ui/app/styles/buttons.less b/catalog-ui/app/styles/buttons.less deleted file mode 100644 index 7215d7a3d4..0000000000 --- a/catalog-ui/app/styles/buttons.less +++ /dev/null @@ -1,274 +0,0 @@ -.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 - } -} - - - - - - |