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