github.com/hernad/nomad@v1.6.112/ui/app/styles/components/stepper-input.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .stepper-input {
     7    display: inline-flex;
     8    font-weight: $weight-bold;
     9    box-shadow: $button-box-shadow-standard;
    10    border: 1px solid transparent;
    11    text-decoration: none;
    12    line-height: 1;
    13    border-radius: $radius;
    14    padding-left: 0.75em;
    15    white-space: nowrap;
    16    height: 2.25em;
    17    font-size: $body-size;
    18    vertical-align: top;
    19  
    20    .stepper-input-label {
    21      display: flex;
    22      align-self: center;
    23      padding-right: 0.75em;
    24      cursor: pointer;
    25    }
    26  
    27    .stepper-input-input {
    28      display: flex;
    29      text-align: center;
    30      font-weight: bold;
    31      -moz-appearance: textfield;
    32      width: 3em;
    33  
    34      &::-webkit-outer-spin-button,
    35      &::-webkit-inner-spin-button {
    36        -webkit-appearance: none;
    37        margin: 0;
    38      }
    39  
    40      &:focus {
    41        outline: none;
    42        box-shadow: inset 0 0 0 1px $grey-light;
    43      }
    44    }
    45  
    46    .stepper-input-input,
    47    .stepper-input-stepper {
    48      border: none;
    49      border-left: 1px solid;
    50    }
    51  
    52    .stepper-input-stepper {
    53      box-shadow: none;
    54      display: flex;
    55      height: 100%;
    56      border-radius: 0;
    57  
    58      &:last-child {
    59        border-top-right-radius: $radius;
    60        border-bottom-right-radius: $radius;
    61      }
    62    }
    63  
    64    @each $name, $pair in $colors {
    65      $color: nth($pair, 1);
    66      $color-invert: nth($pair, 2);
    67  
    68      &.is-#{$name} {
    69        border-color: darken($color, 10%);
    70        background: $color;
    71        color: $color-invert;
    72  
    73        .stepper-input-input,
    74        .stepper-input-stepper {
    75          border-left-color: darken($color, 5%);
    76        }
    77  
    78        .stepper-input-stepper.is-#{$name} {
    79          &:focus {
    80            outline: none;
    81            box-shadow: inset 0 0 0 1px rgba($white, 0.4);
    82          }
    83        }
    84      }
    85    }
    86  
    87    &.is-small {
    88      font-size: $size-small;
    89    }
    90  
    91    &.is-medium {
    92      font-size: $size-medium;
    93    }
    94  
    95    &.is-large {
    96      font-size: $size-large;
    97    }
    98  
    99    &.is-disabled {
   100      opacity: 0.5;
   101  
   102      .stepper-input-input {
   103        opacity: 1;
   104        color: $grey;
   105        background-color: $white;
   106      }
   107    }
   108  }