github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/styles/components/stepper-input.scss (about)

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