github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/styles/core/forms.scss (about)

     1  @mixin input {
     2    @include control;
     3    background-color: #fff;
     4    border-color: $grey-blue;
     5    color: $text;
     6  
     7    &:hover,
     8    &.is-hovered,
     9    &:active,
    10    &.is-active,
    11    &:focus,
    12    &.is-focused {
    13      border-color: darken($grey-blue, 5%);
    14    }
    15  
    16    &[disabled] {
    17      background-color: $grey-blue;
    18      border-color: darken($grey-blue, 5%);
    19    }
    20  }
    21  
    22  .input,
    23  .textarea {
    24    @include input;
    25    box-shadow: none;
    26    padding: 0.4em 0.75em;
    27    height: auto;
    28  
    29    &::placeholder {
    30      color: $grey-blue;
    31    }
    32  
    33    &.is-compact {
    34      padding: 0.25em 0.75em;
    35      margin: -0.25em -0.25em -0.25em 0;
    36    }
    37  }
    38  
    39  .field {
    40    &.is-inline {
    41      display: inline-block;
    42    }
    43  
    44    &.is-horizontal {
    45      .field-label {
    46        margin-right: 1rem;
    47        padding-top: 0.3em;
    48        font-weight: $weight-semibold;
    49        white-space: nowrap;
    50  
    51        &.is-small {
    52          padding-top: 0.55em;
    53        }
    54  
    55        &.is-multiline {
    56          white-space: normal;
    57        }
    58      }
    59    }
    60  
    61    &.is-sub-field {
    62      margin-left: 2em;
    63    }
    64  
    65    &:not(:last-child) {
    66      margin-bottom: 1rem;
    67    }
    68  }
    69  
    70  .form {
    71    &.is-small {
    72      font-size: 0.85rem;
    73  
    74      .label {
    75        font-size: 0.85rem;
    76      }
    77    }
    78  
    79    .label {
    80      font-weight: $weight-medium;
    81    }
    82  
    83    .group-heading {
    84      text-transform: uppercase;
    85      letter-spacing: 0.05ch;
    86      margin-bottom: 1.5em;
    87      color: $grey;
    88      font-weight: $weight-medium;
    89    }
    90  }