github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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 } 91 92 93 .mock-sso-provider { 94 margin: 25vh auto; 95 width: 500px; 96 top: 25vh; 97 height: auto; 98 max-height: 50vh; 99 box-shadow: 0 0 0 100vw rgba(0, 2, 30, 0.8); 100 padding: 1rem; 101 text-align: center; 102 background-color: white; 103 h1 { 104 font-size: 2rem; 105 font-weight: 400; 106 } 107 h2 { 108 margin-bottom: 1rem; 109 font-size: 1rem; 110 } 111 .providers { 112 display: grid; 113 gap: 0.5rem; 114 button { 115 background-color: #444; 116 color: white; 117 &.error { 118 background-color: darkred; 119 } 120 } 121 } 122 }