resources/scss/components/_buttons.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  *
  21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  22  */
  23
  24 $plus-circle-icon-size: 18px;
  25 .plus-icon-button {
  26   background: url($plus-circle-icon) no-repeat;
  27   background-size: $plus-circle-icon-size;
  28   width: $plus-circle-icon-size;
  29   height: $plus-circle-icon-size;
  30   cursor: pointer;
  31   &.small {
  32     background-size: $plus-circle-icon-size - 6;
  33     width: $plus-circle-icon-size - 6;
  34     height: $plus-circle-icon-size - 6;
  35   }
  36 }
  37
  38 .primary-btn{
  39   border: 1px solid;
  40   border-color: $border-color3;
  41   color: $text-color4;
  42   font-weight: bolder;
  43   @extend .body-1;
  44   text-align: center;
  45   padding: 7px;
  46   border-radius: 5px;
  47   cursor: pointer;
  48   align-self: center;
  49   background-color: $primary-background-color;
  50   .primary-btn-text {
  51     width: 100%;
  52   }
  53   &:hover {
  54     color: $background-color5;
  55     border-color: $border-color3;
  56     background-color: $background-color12;
  57     &:active {
  58       color: $background-color5;
  59       border-color: $border-color3;
  60     }
  61   }
  62
  63   &:focus:not(:hover) {
  64     color: $background-color5;
  65     border-color: $border-color3;
  66     background-color: $primary-background-color;
  67   }
  68 }