github.com/hernad/nomad@v1.6.112/ui/app/styles/core/buttons.scss (about)

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