1  @import 'common/sass/variables';
  2  
  3  .example-form {
  4    max-width: 744px;
  5    margin: auto;
  6  }
  7  
  8  .input-group {
  9    margin: auto;
 10    display: flex;
 11    flex-direction: column;
 12  
 13    > .TogglablePassword {
 14      width: 100%;
 15    }
 16  
 17    & > pre,
 18    & > .Select,
 19    &-input {
 20      margin-bottom: 1rem;
 21    }
 22  
 23    &-inline {
 24      display: flex;
 25      flex-direction: row;
 26      font-size: 1rem;
 27      flex-wrap: wrap;
 28  
 29      > .input-group-header {
 30        width: 100%;
 31      }
 32  
 33      > .input-group-input {
 34        flex-grow: 1;
 35        width: auto;
 36      }
 37  
 38      > .Select {
 39        margin-left: 8px;
 40      }
 41  
 42      &[readonly],
 43      &[disabled] {
 44        background-color: color(control-disabled-bg);
 45        color: color(control-disabled-color);
 46        border-color: color(control-disabled-border);
 47        cursor: text !important;
 48      }
 49    }
 50  
 51    &-header {
 52      display: flex;
 53      font-size: 1rem;
 54      margin-bottom: 8px;
 55      font-weight: 400;
 56      align-items: center;
 57      flex-wrap: wrap;
 58  
 59      > *:first-child {
 60        margin-right: 8px;
 61      }
 62  
 63      > .flex-spacer {
 64        flex-grow: 1;
 65      }
 66  
 67      > .small {
 68        color: color(gray);
 69      }
 70    }
 71  
 72    &-input {
 73      width: 100%;
 74      border: 1px solid color(control-border);
 75      border-radius: $input-border-radius;
 76      height: $input-height-base;
 77      padding: 0.75rem 1rem;
 78      font-weight: 400;
 79      background: color(control-bg);
 80      color: color(control-color);
 81      box-shadow: inset 0 1px 0 0 rgba(63, 63, 68, 0.05);
 82      transition: border-color 120ms, box-shadow 120ms;
 83      margin-bottom: 1rem;
 84  
 85      &[placeholder] {
 86        text-overflow: ellipsis;
 87      }
 88  
 89      &.border-rad-right-0 {
 90        border-top-right-radius: 0;
 91        border-bottom-right-radius: 0;
 92      }
 93      &.border-rad-left-0 {
 94        border-top-left-radius: 0;
 95        border-bottom-left-radius: 0;
 96      }
 97      &-small {
 98        padding: 0.5rem 0.75rem;
 99      }
100      &::placeholder {
101        color: color(control-placeholder);
102      }
103      &:not([disabled]):not([readonly]) {
104        &.invalid {
105          border-color: color(brand-danger);
106          box-shadow: inset 0px 0px 0px 1px color(brand-danger);
107        }
108        &.valid {
109          border-color: color(brand-success);
110          box-shadow: inset 0px 0px 0px 1px color(brand-success);
111        }
112        &:focus {
113          border-color: color(brand-primary);
114          box-shadow: inset 0px 0px 0px 1px color(brand-primary);
115        }
116      }
117    }
118  }
119  
120  .Swap-dropdown {
121    .Select-input {
122      left: 24px;
123    }
124  }
125  
126  textarea.input-group-input {
127    height: initial;
128  }