resources/scss/components/_buttons.scss

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