ecomp-portal-FE/client/app/styles/buttons.less

   1 /*-
   2  * ================================================================================
   3  * eCOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ================================================================================
  19  */
  20  .ecomp-btn {
  21     .u14m;
  22     border-style: solid;
  23     border-width: 1px;
  24     border-radius: 6px;
  25     box-shadow: 0px 1px 0.99px 0.01px rgba(2, 60, 89, 0.004);
  26     height: 29px;
  27     line-height: 29px;
  28     cursor: pointer;
  29     text-align: center;
  30
  31     &:disabled {
  32         opacity: .5;
  33         cursor: default;
  34     }
  35     &:focus {
  36         outline: 0;
  37         border: 1px solid @k;
  38     }
  39 }
  40 .btn-green {
  41     .ecomp-btn;
  42     border-color: @green-border;
  43     background: @green-active;
  44     &:hover {
  45         &:disabled {
  46             background: @green-active;
  47         }
  48         background: @green-hover;
  49     }
  50 }
  51 .btn-blue {
  52     .ecomp-btn;
  53     background: @blue-active;
  54
  55     &:hover {
  56         -webkit-transition: background-color .3s ease-out;
  57         -moz-transition: background-color .3s ease-out;
  58         transition: background-color .3s ease-out;
  59         background: @blue-hover;
  60         color : #f2f2f2;
  61         &.disabled {
  62             background: @blue-active;
  63             opacity: 0.5;
  64             cursor: default;
  65         }
  66     }
  67
  68     &.disabled {
  69         opacity: 0.5;
  70         cursor: default;
  71     }
  72 }