diff options
author | Jan Stevens <jan@playpass.be> | 2015-08-19 22:34:56 +0300 |
---|---|---|
committer | Jan Stevens <jan@playpass.be> | 2015-08-19 22:34:56 +0300 |
commit | 7397065e0daf73ac84e0846b0278736163b147a2 (patch) | |
tree | e8d2f8d4fabd6c08ffce6e71663289d8aec925b4 /assets/stylesheets/bootstrap/_input-group.scss | |
parent | 2bab961e660b59462fa05868facb1e7cf298ffe9 (diff) |
New assets update for bootstrap 4
Diffstat (limited to 'assets/stylesheets/bootstrap/_input-group.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_input-group.scss | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/assets/stylesheets/bootstrap/_input-group.scss b/assets/stylesheets/bootstrap/_input-group.scss new file mode 100644 index 0000000..df8aa10 --- /dev/null +++ b/assets/stylesheets/bootstrap/_input-group.scss @@ -0,0 +1,181 @@ +// +// Base styles +// + +.input-group { + position: relative; + + @if $enable-flex { + display: flex; + } @else { + display: table; + // Prevent input groups from inheriting border styles from table cells when + // placed within a table. + border-collapse: separate; + } + + .form-control { + // Ensure that the input is always above the *appended* addon button for + // proper border colors. + position: relative; + z-index: 2; + @if $enable-flex { + flex: 1; + } @else { + // IE9 fubars the placeholder attribute in text inputs and the arrows on + // select elements in input groups. To fix it, we float the input. Details: + // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 + float: left; + width: 100%; + } + margin-bottom: 0; + } +} + +.input-group-addon, +.input-group-btn, +.input-group .form-control { + @if $enable-flex { + // do nothing + } @else { + display: table-cell; + } + + &:not(:first-child):not(:last-child) { + @include border-radius(0); + } +} + +.input-group-addon, +.input-group-btn { + @if $enable-flex { + // do nothing + } @else { + width: 1%; + } + white-space: nowrap; + vertical-align: middle; // Match the inputs +} + + +// Sizing options +// +// Remix the default form control sizing classes into new ones for easier +// manipulation. + +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { + @extend .form-control-lg; +} +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + @extend .form-control-sm; +} + + +// +// Text input groups +// + +.input-group-addon { + padding: $input-padding-y $input-padding-x; + font-size: $font-size-base; + font-weight: normal; + line-height: 1; + color: $input-color; + text-align: center; + background-color: $input-group-addon-bg; + border: 1px solid $input-group-addon-border-color; + @include border-radius($border-radius); + + // Sizing + &.form-control-sm { + padding: $input-padding-y-sm $input-padding-x-sm; + font-size: $font-size-sm; + @include border-radius($border-radius-sm); + } + &.form-control-lg { + padding: $input-padding-x-lg $input-padding-x-lg; + font-size: $font-size-lg; + @include border-radius($border-radius-lg); + } + + // Nuke default margins from checkboxes and radios to vertically center within. + input[type="radio"], + input[type="checkbox"] { + margin-top: 0; + } +} + + +// +// Reset rounded corners +// + +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + @include border-right-radius(0); +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + @include border-left-radius(0); +} +.input-group-addon:last-child { + border-left: 0; +} + + +// +// Button input groups +// + +.input-group-btn { + position: relative; + // Jankily prevent input button groups from wrapping with `white-space` and + // `font-size` in combination with `inline-block` on buttons. + font-size: 0; + white-space: nowrap; + + // Negative margin for spacing, position for bringing hovered/focused/actived + // element above the siblings. + > .btn { + position: relative; + + .btn { + margin-left: -1px; + } + // Bring the "active" button to the front + @include hover-focus-active { + z-index: 2; + } + } + + // Negative margin to only have a 1px border between the two + &:first-child { + > .btn, + > .btn-group { + margin-right: -1px; + } + } + &:last-child { + > .btn, + > .btn-group { + z-index: 2; + margin-left: -1px; + } + } +} |