aboutsummaryrefslogtreecommitdiff
path: root/less/input-groups.less
diff options
context:
space:
mode:
Diffstat (limited to 'less/input-groups.less')
-rw-r--r--less/input-groups.less153
1 files changed, 153 insertions, 0 deletions
diff --git a/less/input-groups.less b/less/input-groups.less
new file mode 100644
index 000000000..fed7d5645
--- /dev/null
+++ b/less/input-groups.less
@@ -0,0 +1,153 @@
+//
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+ display: table;
+ border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+ // Undo padding and float of grid classes
+ &.col {
+ float: none;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .form-control {
+ width: 100%;
+ margin-bottom: 0;
+ }
+}
+
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+ display: table-cell;
+
+ &:not(:first-child):not(:last-child) {
+ border-radius: 0;
+ }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+ width: 1%;
+ white-space: nowrap;
+ vertical-align: middle; // Match the inputs
+}
+
+// Text input groups
+// -------------------------
+.input-group-addon {
+ .box-sizing(border-box);
+ padding: @padding-base-vertical @padding-base-horizontal;
+ font-size: @font-size-base;
+ font-weight: normal;
+ line-height: @line-height-base;
+ text-align: center;
+ background-color: @gray-lighter;
+ border: 1px solid @input-group-addon-border-color;
+ border-radius: @border-radius-base;
+
+ // Sizing
+ &.input-small {
+ padding: @padding-small-vertical @padding-small-horizontal;
+ font-size: @font-size-small;
+ border-radius: @border-radius-small;
+ }
+ &.input-large {
+ padding: @padding-large-vertical @padding-large-horizontal;
+ font-size: @font-size-large;
+ border-radius: @border-radius-large;
+ }
+
+ // 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 > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+ .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 > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+ .border-left-radius(0);
+}
+.input-group-addon:last-child {
+ border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+ position: relative;
+ white-space: nowrap;
+}
+.input-group-btn > .btn {
+ position: relative;
+ // Jankily prevent input button groups from wrapping
+ + .btn {
+ margin-left: -4px;
+ }
+ // Bring the "active" button to the front
+ &:hover,
+ &:active {
+ z-index: 2;
+ }
+}
+
+
+// Inline forms
+// --------------------------------------------------
+
+.form-inline {
+ .form-control,
+ .radio,
+ .checkbox {
+ display: inline-block;
+ }
+ .radio,
+ .checkbox {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+
+// Horizontal forms
+// --------------------------------------------------
+// Horizontal forms are built on grid classes.
+
+.form-horizontal .control-label {
+ padding-top: 9px;
+}
+
+.form-horizontal {
+ .form-group {
+ .make-row();
+ }
+}
+
+// Only right align form labels here when the columns stop stacking
+@media (min-width: @screen-tablet) {
+ .form-horizontal .control-label {
+ text-align: right;
+ }
+}