github.com/manicqin/nomad@v0.9.5/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  
     9    &:hover,
    10    &.is-hovered {
    11      text-decoration: none;
    12    }
    13  
    14    &:active,
    15    &.is-active,
    16    &:focus,
    17    &.is-focused {
    18      box-shadow: $button-box-shadow-standard;
    19      text-decoration: none;
    20    }
    21  
    22    &.is-inverted.is-outlined {
    23      box-shadow: none;
    24      background: transparent;
    25    }
    26  
    27    &.is-inline {
    28      vertical-align: middle;
    29    }
    30  
    31    &.is-compact {
    32      padding: 0.25em 0.75em;
    33      margin: -0.25em 0;
    34  
    35      &.pull-right {
    36        margin-right: -1em;
    37      }
    38    }
    39  
    40    &.is-borderless {
    41      border: 0;
    42      box-shadow: none;
    43    }
    44  
    45    @each $name, $pair in $colors {
    46      $color: nth($pair, 1);
    47      $color-invert: nth($pair, 2);
    48  
    49      &.is-#{$name} {
    50        border-color: darken($color, 10%);
    51  
    52        &:hover,
    53        &.is-hovered {
    54          background-color: lighten($color, 5%);
    55          border-color: darken($color, 10%);
    56        }
    57  
    58        &:active,
    59        &.is-active {
    60          background-color: darken($color, 5%);
    61          border-color: darken($color, 10%);
    62          box-shadow: $button-box-shadow-standard;
    63        }
    64  
    65        &:focus,
    66        &.is-focused {
    67          border-color: darken($color, 10%);
    68          box-shadow: $button-box-shadow-standard;
    69        }
    70  
    71        &.is-outlined {
    72          border-color: $grey-lighter;
    73  
    74          &.is-important {
    75            border-color: $color;
    76          }
    77  
    78          &:hover,
    79          &.is-hovered,
    80          &:focus,
    81          &.is-focused {
    82            background-color: transparent;
    83            border-color: darken($color, 10%);
    84            color: $color;
    85          }
    86  
    87          &:active,
    88          &.is-active {
    89            background-color: transparent;
    90            border-color: darken($color, 10%);
    91            color: darken($color, 10%);
    92          }
    93        }
    94  
    95        &.is-inverted.is-outlined {
    96          border-color: rgba($color-invert, 0.5);
    97          color: rgba($color-invert, 0.9);
    98  
    99          &:hover,
   100          &.is-hovered,
   101          &:focus,
   102          &.is-focused {
   103            background-color: transparent;
   104            border-color: $color-invert;
   105            color: $color-invert;
   106          }
   107  
   108          &:active,
   109          &.is-active {
   110            background-color: rgba($color-invert, 0.1);
   111            border-color: $color-invert;
   112            color: $color-invert;
   113            box-shadow: none;
   114          }
   115        }
   116      }
   117    }
   118  
   119    // When an icon in a button should be treated like text,
   120    // override the default Bulma behavior
   121    .icon.is-text {
   122      &:first-child:not(:last-child) {
   123        margin-left: 0;
   124        margin-right: 0;
   125      }
   126      &:last-child:not(:first-child) {
   127        margin-left: 0;
   128        margin-right: 0;
   129      }
   130      &:first-child:last-child {
   131        margin-left: 0;
   132        margin-right: 0;
   133      }
   134    }
   135  }