Commit | Line | Data |
---|---|---|
7b869721 S |
1 | // |
2 | // Input groups | |
3 | // -------------------------------------------------- | |
4 | ||
5 | // Base styles | |
6 | // ------------------------- | |
7 | .input-group { | |
8 | position: relative; // For dropdowns | |
9 | display: table; | |
10 | border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table | |
11 | ||
12 | // Undo padding and float of grid classes | |
13 | &.col { | |
14 | float: none; | |
15 | padding-left: 0; | |
16 | padding-right: 0; | |
17 | } | |
18 | ||
19 | .form-control { | |
20 | width: 100%; | |
21 | margin-bottom: 0; | |
22 | } | |
23 | } | |
24 | ||
25 | // Sizing options | |
26 | // | |
27 | // Remix the default form control sizing classes into new ones for easier | |
28 | // manipulation. | |
29 | ||
30 | .input-group-lg > .form-control, | |
31 | .input-group-lg > .input-group-addon, | |
32 | .input-group-lg > .input-group-btn > .btn { .input-lg(); } | |
33 | .input-group-sm > .form-control, | |
34 | .input-group-sm > .input-group-addon, | |
35 | .input-group-sm > .input-group-btn > .btn { .input-sm(); } | |
36 | ||
37 | ||
38 | // Display as table-cell | |
39 | // ------------------------- | |
40 | .input-group-addon, | |
41 | .input-group-btn, | |
42 | .input-group .form-control { | |
43 | display: table-cell; | |
44 | ||
45 | &:not(:first-child):not(:last-child) { | |
46 | border-radius: 0; | |
47 | } | |
48 | } | |
49 | // Addon and addon wrapper for buttons | |
50 | .input-group-addon, | |
51 | .input-group-btn { | |
52 | width: 1%; | |
53 | white-space: nowrap; | |
54 | vertical-align: middle; // Match the inputs | |
55 | } | |
56 | ||
57 | // Text input groups | |
58 | // ------------------------- | |
59 | .input-group-addon { | |
60 | padding: @padding-base-vertical @padding-base-horizontal; | |
61 | font-size: @font-size-base; | |
62 | font-weight: normal; | |
63 | line-height: 1; | |
64 | color: @input-color; | |
65 | text-align: center; | |
66 | background-color: @input-group-addon-bg; | |
67 | border: 1px solid @input-group-addon-border-color; | |
68 | border-radius: @border-radius-base; | |
69 | ||
70 | // Sizing | |
71 | &.input-sm { | |
72 | padding: @padding-small-vertical @padding-small-horizontal; | |
73 | font-size: @font-size-small; | |
74 | border-radius: @border-radius-small; | |
75 | } | |
76 | &.input-lg { | |
77 | padding: @padding-large-vertical @padding-large-horizontal; | |
78 | font-size: @font-size-large; | |
79 | border-radius: @border-radius-large; | |
80 | } | |
81 | ||
82 | // Nuke default margins from checkboxes and radios to vertically center within. | |
83 | input[type="radio"], | |
84 | input[type="checkbox"] { | |
85 | margin-top: 0; | |
86 | } | |
87 | } | |
88 | ||
89 | // Reset rounded corners | |
90 | .input-group .form-control:first-child, | |
91 | .input-group-addon:first-child, | |
92 | .input-group-btn:first-child > .btn, | |
93 | .input-group-btn:first-child > .dropdown-toggle, | |
94 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { | |
95 | .border-right-radius(0); | |
96 | } | |
97 | .input-group-addon:first-child { | |
98 | border-right: 0; | |
99 | } | |
100 | .input-group .form-control:last-child, | |
101 | .input-group-addon:last-child, | |
102 | .input-group-btn:last-child > .btn, | |
103 | .input-group-btn:last-child > .dropdown-toggle, | |
104 | .input-group-btn:first-child > .btn:not(:first-child) { | |
105 | .border-left-radius(0); | |
106 | } | |
107 | .input-group-addon:last-child { | |
108 | border-left: 0; | |
109 | } | |
110 | ||
111 | // Button input groups | |
112 | // ------------------------- | |
113 | .input-group-btn { | |
114 | position: relative; | |
115 | white-space: nowrap; | |
116 | ||
117 | // Negative margin to only have a 1px border between the two | |
118 | &:first-child > .btn { | |
119 | margin-right: -1px; | |
120 | } | |
121 | &:last-child > .btn { | |
122 | margin-left: -1px; | |
123 | } | |
124 | } | |
125 | .input-group-btn > .btn { | |
126 | position: relative; | |
127 | // Jankily prevent input button groups from wrapping | |
128 | + .btn { | |
129 | margin-left: -4px; | |
130 | } | |
131 | // Bring the "active" button to the front | |
132 | &:hover, | |
133 | &:active { | |
134 | z-index: 2; | |
135 | } | |
136 | } |