github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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    &.is-disabled {
    46      opacity: 0.7;
    47      box-shadow: none;
    48      cursor: not-allowed;
    49      border-color: transparent;
    50  
    51      &:hover {
    52        border-color: transparent;
    53      }
    54    }
    55  
    56    &.is-xsmall {
    57      padding-top: 0;
    58      padding-bottom: 0;
    59      font-size: $size-7;
    60    }
    61  
    62    @each $name, $pair in $colors {
    63      $color: nth($pair, 1);
    64      $color-invert: nth($pair, 2);
    65  
    66      &.is-#{$name} {
    67        border-color: darken($color, 10%);
    68  
    69        &:hover,
    70        &.is-hovered {
    71          background-color: lighten($color, 5%);
    72          border-color: darken($color, 10%);
    73        }
    74  
    75        &:active,
    76        &.is-active {
    77          background-color: darken($color, 5%);
    78          border-color: darken($color, 10%);
    79          box-shadow: $button-box-shadow-standard;
    80        }
    81  
    82        &:focus,
    83        &.is-focused {
    84          border-color: darken($color, 10%);
    85          box-shadow: $button-box-shadow-standard;
    86        }
    87  
    88        &.is-outlined {
    89          border-color: $grey-lighter;
    90          background-color: $white;
    91  
    92          &.is-important {
    93            border-color: $color;
    94          }
    95  
    96          &:hover,
    97          &.is-hovered,
    98          &:focus,
    99          &.is-focused {
   100            background-color: $white;
   101            border-color: darken($color, 10%);
   102            color: $color;
   103          }
   104  
   105          &:active,
   106          &.is-active {
   107            background-color: $white;
   108            border-color: darken($color, 10%);
   109            color: darken($color, 10%);
   110          }
   111        }
   112  
   113        &.is-inverted.is-outlined {
   114          border-color: rgba($color-invert, 0.5);
   115          color: rgba($color-invert, 0.9);
   116          background-color: transparent;
   117  
   118          &:hover,
   119          &.is-hovered,
   120          &:focus,
   121          &.is-focused {
   122            background-color: transparent;
   123            border-color: $color-invert;
   124            color: $color-invert;
   125          }
   126  
   127          &:active,
   128          &.is-active {
   129            background-color: rgba($color-invert, 0.1);
   130            border-color: $color-invert;
   131            color: $color-invert;
   132            box-shadow: none;
   133          }
   134        }
   135  
   136        // The is-disabled styles MUST trump other modifier specificites
   137        &.is-disabled {
   138          background-color: $color;
   139          border-color: darken($color, 5%);
   140          box-shadow: none;
   141  
   142          &:hover,
   143          &:active,
   144          &:focus,
   145          &.is-hovered,
   146          &.is-active,
   147          &.is-focused {
   148            background-color: $color;
   149            border-color: darken($color, 5%);
   150            box-shadow: none;
   151          }
   152        }
   153      }
   154    }
   155  
   156    // When an icon in a button should be treated like text,
   157    // override the default Bulma behavior
   158    .icon.is-text {
   159      &:first-child:not(:last-child) {
   160        margin-left: 0;
   161        margin-right: 0;
   162      }
   163      &:last-child:not(:first-child) {
   164        margin-left: 0;
   165        margin-right: 0;
   166      }
   167      &:first-child:last-child {
   168        margin-left: 0;
   169        margin-right: 0;
   170      }
   171    }
   172  }