github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/buttons/skin.scss (about)

     1  /* decor */
     2  %button {
     3    @extend %user-select-none;
     4    cursor: pointer;
     5    white-space: nowrap;
     6  }
     7  %button:disabled {
     8    cursor: default;
     9    box-shadow: none;
    10  }
    11  %copy-button {
    12    @extend %button, %with-clipboard;
    13    min-height: 17px;
    14  }
    15  %copy-button:not(:empty) {
    16    padding-left: 38px !important;
    17  }
    18  %primary-button,
    19  %secondary-button,
    20  %dangerous-button {
    21    @extend %button;
    22    border-width: 1px;
    23    border-radius: $radius-small;
    24    box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
    25  }
    26  /* color */
    27  %copy-button {
    28    color: $ui-color-action;
    29    background-color: $ui-color-transparent;
    30  }
    31  %copy-button:hover:not(:disabled):not(:active),
    32  %copy-button:focus {
    33    color: $ui-color-action;
    34    background-color: $ui-gray-050;
    35  }
    36  %copy-button:disabled {
    37  }
    38  %copy-button:active {
    39    background-color: $ui-gray-200;
    40  }
    41  %primary-button {
    42    @extend %frame-blue-800;
    43  }
    44  %primary-button:hover:not(:disabled):not(:active),
    45  %primary-button:focus {
    46    @extend %frame-blue-700;
    47  }
    48  %primary-button:disabled {
    49    @extend %frame-blue-600;
    50  }
    51  %primary-button:hover:active {
    52    @extend %frame-blue-900;
    53  }
    54  /**/
    55  %secondary-button {
    56    /* %frame-gray-something */
    57    color: $ui-gray-800;
    58    background-color: $ui-gray-050;
    59    border-color: $ui-gray-300;
    60    border-style: solid;
    61  }
    62  %secondary-button:hover:not(:disabled):not(:active),
    63  %secondary-button:focus {
    64    /* %frame-gray-something */
    65    background-color: $ui-white;
    66    color: $ui-gray-800;
    67    border-color: $ui-gray-700;
    68  }
    69  %secondary-button:disabled {
    70    color: $ui-gray-600;
    71  }
    72  %secondary-button:active {
    73    /* %frame-gray-something */
    74    background-color: $ui-gray-200;
    75    color: $ui-gray-800;
    76    border-color: $ui-gray-700;
    77  }
    78  /**/
    79  %dangerous-button {
    80    @extend %frame-red-300;
    81  }
    82  %dangerous-button:hover:not(:disabled):not(:active),
    83  %dangerous-button:focus {
    84    @extend %frame-red-700;
    85  }
    86  %dangerous-button:disabled {
    87    @extend %frame-red-600;
    88  }
    89  %dangerous-button:hover:active {
    90    @extend %frame-red-900;
    91  }