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

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  @mixin input {
     7    @include control;
     8    background-color: #fff;
     9    border-color: $grey-blue;
    10    color: $text;
    11  
    12    &:hover,
    13    &.is-hovered,
    14    &:active,
    15    &.is-active,
    16    &:focus,
    17    &.is-focused {
    18      border-color: darken($grey-blue, 5%);
    19    }
    20  
    21    &[disabled] {
    22      background-color: $grey-blue;
    23      border-color: darken($grey-blue, 5%);
    24    }
    25  }
    26  
    27  .input,
    28  .textarea {
    29    @include input;
    30    box-shadow: none;
    31    padding: 0.4em 0.75em;
    32    height: auto;
    33  
    34    &::placeholder {
    35      color: $grey-blue;
    36    }
    37  
    38    &.is-compact {
    39      padding: 0.25em 0.75em;
    40      margin: -0.25em -0.25em -0.25em 0;
    41    }
    42  }
    43  
    44  .field {
    45    &.is-inline {
    46      display: inline-block;
    47    }
    48  
    49    &.is-horizontal {
    50      .field-label {
    51        margin-right: 1rem;
    52        padding-top: 0.3em;
    53        font-weight: $weight-semibold;
    54        white-space: nowrap;
    55  
    56        &.is-small {
    57          padding-top: 0.55em;
    58        }
    59  
    60        &.is-multiline {
    61          white-space: normal;
    62        }
    63      }
    64    }
    65  
    66    &.is-sub-field {
    67      margin-left: 2em;
    68    }
    69  
    70    &:not(:last-child) {
    71      margin-bottom: 1rem;
    72    }
    73  }
    74  
    75  .form {
    76    &.is-small {
    77      font-size: 0.85rem;
    78  
    79      .label {
    80        font-size: 0.85rem;
    81      }
    82    }
    83  
    84    .label {
    85      font-weight: $weight-medium;
    86    }
    87  
    88    .group-heading {
    89      text-transform: uppercase;
    90      letter-spacing: 0.05ch;
    91      margin-bottom: 1.5em;
    92      color: $grey;
    93      font-weight: $weight-medium;
    94    }
    95  }
    96  
    97  .radio-group {
    98    padding: 16px 0px;
    99  }
   100  
   101  .button-group {
   102    margin: 16px 0px;
   103  }
   104  
   105  .align-right {
   106    margin-right: calc(6.5% - 16px);
   107  }
   108  
   109  .new-job-template {
   110    & > div {
   111      margin-bottom: 1rem;
   112    }
   113  
   114    .path-input {
   115      height: 2.25em;
   116      &.error {
   117        color: $red;
   118        border-color: $red;
   119      }
   120  
   121      + p {
   122        position: relative;
   123        animation: slide-in 0.3s ease-out;
   124      }
   125    }
   126  
   127    .input-dropdown-row {
   128      display: grid;
   129      grid-template-columns: 6fr 1fr;
   130      gap: 0 1rem;
   131    }
   132  
   133    footer {
   134      display: grid;
   135      grid-auto-columns: max-content;
   136      grid-auto-flow: column;
   137      gap: 1rem;
   138    }
   139  }
   140  
   141  .mock-sso-provider {
   142    margin: 25vh auto;
   143    width: 500px;
   144    top: 25vh;
   145    height: auto;
   146    max-height: 50vh;
   147    box-shadow: 0 0 0 100vw rgba(0, 2, 30, 0.8);
   148    padding: 1rem;
   149    text-align: center;
   150    background-color: white;
   151    h1 {
   152      font-size: 2rem;
   153      font-weight: 400;
   154    }
   155    h2 {
   156      margin-bottom: 1rem;
   157      font-size: 1rem;
   158    }
   159    .providers {
   160      display: grid;
   161      gap: 0.5rem;
   162      button {
   163        background-color: #444;
   164        color: white;
   165        &.error {
   166          background-color: darkred;
   167        }
   168      }
   169    }
   170  }