github.com/sl1pm4t/consul@v1.4.5-0.20190325224627-74c31c540f9c/ui/styles/_buttons.scss (about)

     1  .btn {
     2      text-transform: uppercase;
     3      font-weight: 600;
     4      font-size: 12px;
     5      border-width: 2px;
     6      color: $gray;
     7      @include transition(background-color .2s ease-in-out);
     8      @include transition(border-color .2s ease-in-out);
     9      @include transition(color .2s ease-in-out);
    10      outline: none;
    11      outline-color: white;
    12      white-space: nowrap;
    13      overflow: hidden;
    14      text-overflow: ellipsis;
    15      -webkit-transform: translateZ(0);
    16  
    17      &:hover {
    18          color: darken($gray, 10%);
    19          background-color: lighten($gray-background, 5%);
    20      }
    21  
    22      &:focus {
    23          outline: none;
    24          outline-color: white;
    25          outline: none;
    26          box-shadow: none;
    27      }
    28  
    29      &.active {
    30          outline-color: white;
    31          outline: none;
    32          box-shadow: none;
    33      }
    34  
    35      &.btn-primary {
    36          color: $pink-dark;
    37          background-color: transparent;
    38          border: 2px solid $pink;
    39  
    40          &:hover {
    41              background-color: $light-pink;
    42              color: darken($pink, 10%);
    43          }
    44      }
    45  
    46      &.btn-warning {
    47          color: $orange-faded;
    48          background-color: transparent;
    49          border: 2px solid $orange-faded;
    50  
    51          &:hover {
    52              background-color: lighten($orange-faded, 29%);
    53              color: darken($orange-faded, 10%);
    54          }
    55  
    56      }
    57  
    58      &.btn-success {
    59          color: $green-dark;
    60          background-color: transparent;
    61          border: 2px solid $green-dark;
    62  
    63          &:hover {
    64              background-color: lighten($green-faded, 24%);
    65              color: darken($green-dark, 10%);
    66          }
    67      }
    68  
    69      &.btn-danger {
    70          color: $red;
    71          background-color: transparent;
    72          border: 2px solid $red;
    73  
    74          &:hover {
    75              background-color: lighten($red, 38%);
    76              color: darken($red, 10%);
    77          }
    78      }
    79  
    80  
    81      &.active {
    82          color: $pink-dark;
    83          background-color: transparent;
    84          border: 2px solid $pink;
    85  
    86          &:hover {
    87              background-color: $light-pink;
    88              color: darken($pink, 10%);
    89          }
    90  
    91          &.btn-noactive {
    92              color: inherit;
    93              background-color: inherit;
    94              border: 2px solid #ccc;
    95          }
    96  
    97      }
    98  
    99      &.btn-mini {
   100          font-size: 10px;
   101          padding: 8px;
   102      }
   103  
   104      &.btn-list {
   105          font-size: 10px;
   106          padding: 3px 5px 3px 5px;
   107          margin-right: 5px;
   108          border-radius: 3px;
   109      }
   110  
   111  }
   112  
   113  .topbar {
   114    .btn.icon {
   115      min-width: 50px;
   116      height: 33px;
   117      padding: 6px 0;
   118      svg {
   119        height: 20px;
   120        fill: currentColor;
   121      }
   122    }
   123  }