tools/side_chain_tool/web/node_modules/bootstrap/scss/_input-group.scss

   1 // stylelint-disable selector-no-qualifying-type
   2
   3 //
   4 // Base styles
   5 //
   6
   7 .input-group {
   8   position: relative;
   9   display: flex;
  10   flex-wrap: wrap; // For form validation feedback
  11   align-items: stretch;
  12   width: 100%;
  13
  14   > .form-control,
  15   > .custom-select,
  16   > .custom-file {
  17     position: relative; // For focus state's z-index
  18     flex: 1 1 auto;
  19     // Add width 1% and flex-basis auto to ensure that button will not wrap out
  20     // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
  21     width: 1%;
  22     margin-bottom: 0;
  23
  24     + .form-control,
  25     + .custom-select,
  26     + .custom-file {
  27       margin-left: -$input-border-width;
  28     }
  29   }
  30
  31   // Bring the "active" form control to the top of surrounding elements
  32   > .form-control:focus,
  33   > .custom-select:focus,
  34   > .custom-file .custom-file-input:focus ~ .custom-file-label {
  35     z-index: 3;
  36   }
  37
  38   // Bring the custom file input above the label
  39   > .custom-file .custom-file-input:focus {
  40     z-index: 4;
  41   }
  42
  43   > .form-control,
  44   > .custom-select {
  45     &:not(:last-child) { @include border-right-radius(0); }
  46     &:not(:first-child) { @include border-left-radius(0); }
  47   }
  48
  49   // Custom file inputs have more complex markup, thus requiring different
  50   // border-radius overrides.
  51   > .custom-file {
  52     display: flex;
  53     align-items: center;
  54
  55     &:not(:last-child) .custom-file-label,
  56     &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
  57     &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
  58   }
  59 }
  60
  61
  62 // Prepend and append
  63 //
  64 // While it requires one extra layer of HTML for each, dedicated prepend and
  65 // append elements allow us to 1) be less clever, 2) simplify our selectors, and
  66 // 3) support HTML5 form validation.
  67
  68 .input-group-prepend,
  69 .input-group-append {
  70   display: flex;
  71
  72   // Ensure buttons are always above inputs for more visually pleasing borders.
  73   // This isn't needed for `.input-group-text` since it shares the same border-color
  74   // as our inputs.
  75   .btn {
  76     position: relative;
  77     z-index: 2;
  78   }
  79
  80   .btn + .btn,
  81   .btn + .input-group-text,
  82   .input-group-text + .input-group-text,
  83   .input-group-text + .btn {
  84     margin-left: -$input-border-width;
  85   }
  86 }
  87
  88 .input-group-prepend { margin-right: -$input-border-width; }
  89 .input-group-append { margin-left: -$input-border-width; }
  90
  91
  92 // Textual addons
  93 //
  94 // Serves as a catch-all element for any text or radio/checkbox input you wish
  95 // to prepend or append to an input.
  96
  97 .input-group-text {
  98   display: flex;
  99   align-items: center;
 100   padding: $input-padding-y $input-padding-x;
 101   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
 102   font-size: $font-size-base; // Match inputs
 103   font-weight: $font-weight-normal;
 104   line-height: $input-line-height;
 105   color: $input-group-addon-color;
 106   text-align: center;
 107   white-space: nowrap;
 108   background-color: $input-group-addon-bg;
 109   border: $input-border-width solid $input-group-addon-border-color;
 110   @include border-radius($input-border-radius);
 111
 112   // Nuke default margins from checkboxes and radios to vertically center within.
 113   input[type="radio"],
 114   input[type="checkbox"] {
 115     margin-top: 0;
 116   }
 117 }
 118
 119
 120 // Sizing
 121 //
 122 // Remix the default form control sizing classes into new ones for easier
 123 // manipulation.
 124
 125 .input-group-lg > .form-control,
 126 .input-group-lg > .input-group-prepend > .input-group-text,
 127 .input-group-lg > .input-group-append > .input-group-text,
 128 .input-group-lg > .input-group-prepend > .btn,
 129 .input-group-lg > .input-group-append > .btn {
 130   height: $input-height-lg;
 131   padding: $input-padding-y-lg $input-padding-x-lg;
 132   font-size: $font-size-lg;
 133   line-height: $input-line-height-lg;
 134   @include border-radius($input-border-radius-lg);
 135 }
 136
 137 .input-group-sm > .form-control,
 138 .input-group-sm > .input-group-prepend > .input-group-text,
 139 .input-group-sm > .input-group-append > .input-group-text,
 140 .input-group-sm > .input-group-prepend > .btn,
 141 .input-group-sm > .input-group-append > .btn {
 142   height: $input-height-sm;
 143   padding: $input-padding-y-sm $input-padding-x-sm;
 144   font-size: $font-size-sm;
 145   line-height: $input-line-height-sm;
 146   @include border-radius($input-border-radius-sm);
 147 }
 148
 149
 150 // Prepend and append rounded corners
 151 //
 152 // These rulesets must come after the sizing ones to properly override sm and lg
 153 // border-radius values when extending. They're more specific than we'd like
 154 // with the `.input-group >` part, but without it, we cannot override the sizing.
 155
 156
 157 .input-group > .input-group-prepend > .btn,
 158 .input-group > .input-group-prepend > .input-group-text,
 159 .input-group > .input-group-append:not(:last-child) > .btn,
 160 .input-group > .input-group-append:not(:last-child) > .input-group-text,
 161 .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 162 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
 163   @include border-right-radius(0);
 164 }
 165
 166 .input-group > .input-group-append > .btn,
 167 .input-group > .input-group-append > .input-group-text,
 168 .input-group > .input-group-prepend:not(:first-child) > .btn,
 169 .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
 170 .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
 171 .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
 172   @include border-left-radius(0);
 173 }