PageRenderTime 29ms CodeModel.GetById 16ms app.highlight 9ms RepoModel.GetById 1ms app.codeStats 0ms

/blogen/scss/bootstrap/_input-group.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects
Sass | 159 lines | 101 code | 27 blank | 31 comment | 0 complexity | 19505085fbb12952e83c22c2d03e6053 MD5 | raw file
  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    // Bring the "active" form control to the top of surrounding elements
 25    &:focus {
 26      z-index: 3;
 27    }
 28
 29    + .form-control,
 30    + .custom-select,
 31    + .custom-file {
 32      margin-left: -$input-border-width;
 33    }
 34  }
 35
 36  > .form-control,
 37  > .custom-select {
 38    &:not(:last-child) { @include border-right-radius(0); }
 39    &:not(:first-child) { @include border-left-radius(0); }
 40  }
 41
 42  // Custom file inputs have more complex markup, thus requiring different
 43  // border-radius overrides.
 44  > .custom-file {
 45    display: flex;
 46    align-items: center;
 47
 48    &:not(:last-child) .custom-file-label,
 49    &:not(:last-child) .custom-file-label::before { @include border-right-radius(0); }
 50    &:not(:first-child) .custom-file-label,
 51    &:not(:first-child) .custom-file-label::before { @include border-left-radius(0); }
 52  }
 53}
 54
 55
 56// Prepend and append
 57//
 58// While it requires one extra layer of HTML for each, dedicated prepend and
 59// append elements allow us to 1) be less clever, 2) simplify our selectors, and
 60// 3) support HTML5 form validation.
 61
 62.input-group-prepend,
 63.input-group-append {
 64  display: flex;
 65
 66  // Ensure buttons are always above inputs for more visually pleasing borders.
 67  // This isn't needed for `.input-group-text` since it shares the same border-color
 68  // as our inputs.
 69  .btn {
 70    position: relative;
 71    z-index: 2;
 72  }
 73
 74  .btn + .btn,
 75  .btn + .input-group-text,
 76  .input-group-text + .input-group-text,
 77  .input-group-text + .btn {
 78    margin-left: -$input-border-width;
 79  }
 80}
 81
 82.input-group-prepend { margin-right: -$input-border-width; }
 83.input-group-append { margin-left: -$input-border-width; }
 84
 85
 86// Textual addons
 87//
 88// Serves as a catch-all element for any text or radio/checkbox input you wish
 89// to prepend or append to an input.
 90
 91.input-group-text {
 92  display: flex;
 93  align-items: center;
 94  padding: $input-padding-y $input-padding-x;
 95  margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
 96  font-size: $font-size-base; // Match inputs
 97  font-weight: $font-weight-normal;
 98  line-height: $input-line-height;
 99  color: $input-group-addon-color;
100  text-align: center;
101  white-space: nowrap;
102  background-color: $input-group-addon-bg;
103  border: $input-border-width solid $input-group-addon-border-color;
104  @include border-radius($input-border-radius);
105
106  // Nuke default margins from checkboxes and radios to vertically center within.
107  input[type="radio"],
108  input[type="checkbox"] {
109    margin-top: 0;
110  }
111}
112
113
114// Sizing
115//
116// Remix the default form control sizing classes into new ones for easier
117// manipulation.
118
119.input-group-lg > .form-control,
120.input-group-lg > .input-group-prepend > .input-group-text,
121.input-group-lg > .input-group-append > .input-group-text,
122.input-group-lg > .input-group-prepend > .btn,
123.input-group-lg > .input-group-append > .btn {
124  @extend .form-control-lg;
125}
126
127.input-group-sm > .form-control,
128.input-group-sm > .input-group-prepend > .input-group-text,
129.input-group-sm > .input-group-append > .input-group-text,
130.input-group-sm > .input-group-prepend > .btn,
131.input-group-sm > .input-group-append > .btn {
132  @extend .form-control-sm;
133}
134
135
136// Prepend and append rounded corners
137//
138// These rulesets must come after the sizing ones to properly override sm and lg
139// border-radius values when extending. They're more specific than we'd like
140// with the `.input-group >` part, but without it, we cannot override the sizing.
141
142
143.input-group > .input-group-prepend > .btn,
144.input-group > .input-group-prepend > .input-group-text,
145.input-group > .input-group-append:not(:last-child) > .btn,
146.input-group > .input-group-append:not(:last-child) > .input-group-text,
147.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
148.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
149  @include border-right-radius(0);
150}
151
152.input-group > .input-group-append > .btn,
153.input-group > .input-group-append > .input-group-text,
154.input-group > .input-group-prepend:not(:first-child) > .btn,
155.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
156.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
157.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
158  @include border-left-radius(0);
159}