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