github.com/aminovpavel/nomad@v0.11.8/ui/app/styles/core/buttons.scss (about)

     1  $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
     2  
     3  .button {
     4    font-weight: $weight-bold;
     5    box-shadow: $button-box-shadow-standard;
     6    border: 1px solid transparent;
     7    text-decoration: none;
     8    line-height: 1;
     9  
    10    &:hover,
    11    &.is-hovered {
    12      text-decoration: none;
    13    }
    14  
    15    &:active,
    16    &.is-active,
    17    &:focus,
    18    &.is-focused {
    19      box-shadow: $button-box-shadow-standard;
    20      text-decoration: none;
    21    }
    22  
    23    &.is-inverted.is-outlined {
    24      box-shadow: none;
    25      background: transparent;
    26    }
    27  
    28    &.is-inline {
    29      vertical-align: middle;
    30    }
    31  
    32    &.is-compact {
    33      padding: 0.25em 0.75em;
    34      margin: -0.25em 0;
    35  
    36      &.pull-right {
    37        margin-right: -1em;
    38      }
    39    }
    40  
    41    &.is-borderless {
    42      border: 0;
    43      box-shadow: none;
    44    }
    45  
    46    &.is-disabled {
    47      opacity: 0.7;
    48      box-shadow: none;
    49      cursor: not-allowed;
    50      border-color: transparent;
    51  
    52      &:hover {
    53        border-color: transparent;
    54      }
    55    }
    56  
    57    @each $name, $pair in $colors {
    58      $color: nth($pair, 1);
    59      $color-invert: nth($pair, 2);
    60  
    61      &.is-#{$name} {
    62        border-color: darken($color, 10%);
    63  
    64        &:hover,
    65        &.is-hovered {
    66          background-color: lighten($color, 5%);
    67          border-color: darken($color, 10%);
    68        }
    69  
    70        &:active,
    71        &.is-active {
    72          background-color: darken($color, 5%);
    73          border-color: darken($color, 10%);
    74          box-shadow: $button-box-shadow-standard;
    75        }
    76  
    77        &:focus,
    78        &.is-focused {
    79          border-color: darken($color, 10%);
    80          box-shadow: $button-box-shadow-standard;
    81        }
    82  
    83        &.is-outlined {
    84          border-color: $grey-lighter;
    85          background-color: $white;
    86  
    87          &.is-important {
    88            border-color: $color;
    89          }
    90  
    91          &:hover,
    92          &.is-hovered,
    93          &:focus,
    94          &.is-focused {
    95            background-color: $white;
    96            border-color: darken($color, 10%);
    97            color: $color;
    98          }
    99  
   100          &:active,
   101          &.is-active {
   102            background-color: $white;
   103            border-color: darken($color, 10%);
   104            color: darken($color, 10%);
   105          }
   106        }
   107  
   108        &.is-inverted.is-outlined {
   109          border-color: rgba($color-invert, 0.5);
   110          color: rgba($color-invert, 0.9);
   111          background-color: transparent;
   112  
   113          &:hover,
   114          &.is-hovered,
   115          &:focus,
   116          &.is-focused {
   117            background-color: transparent;
   118            border-color: $color-invert;
   119            color: $color-invert;
   120          }
   121  
   122          &:active,
   123          &.is-active {
   124            background-color: rgba($color-invert, 0.1);
   125            border-color: $color-invert;
   126            color: $color-invert;
   127            box-shadow: none;
   128          }
   129        }
   130  
   131        // The is-disabled styles MUST trump other modifier specificites
   132        &.is-disabled {
   133          background-color: $color;
   134          border-color: darken($color, 5%);
   135          box-shadow: none;
   136  
   137          &:hover,
   138          &:active,
   139          &:focus,
   140          &.is-hovered,
   141          &.is-active,
   142          &.is-focused {
   143            background-color: $color;
   144            border-color: darken($color, 5%);
   145            box-shadow: none;
   146          }
   147        }
   148      }
   149    }
   150  
   151    // When an icon in a button should be treated like text,
   152    // override the default Bulma behavior
   153    .icon.is-text {
   154      &:first-child:not(:last-child) {
   155        margin-left: 0;
   156        margin-right: 0;
   157      }
   158      &:last-child:not(:first-child) {
   159        margin-left: 0;
   160        margin-right: 0;
   161      }
   162      &:first-child:last-child {
   163        margin-left: 0;
   164        margin-right: 0;
   165      }
   166    }
   167  }