source: spip-zone/_plugins_/bootstrap/trunk/bootstrap/css/input-groups.less @ 93586

Last change on this file since 93586 was 93586, checked in by cedric@…, 5 years ago

Mise a jour de BS v3.3.6 : attention le fichier variables.less comprend une variable supplementaire qu'il faut ajouter dans son fichier personalise le cas echeant

File size: 4.2 KB
Line 
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  &[class*="col-"] {
14    float: none;
15    padding-left: 0;
16    padding-right: 0;
17  }
18
19  .form-control {
20    // Ensure that the input is always above the *appended* addon button for
21    // proper border colors.
22    position: relative;
23    z-index: 2;
24
25    // IE9 fubars the placeholder attribute in text inputs and the arrows on
26    // select elements in input groups. To fix it, we float the input. Details:
27    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
28    float: left;
29
30    width: 100%;
31    margin-bottom: 0;
32   
33    &:focus {
34      z-index: 3;
35    }
36  }
37}
38
39// Sizing options
40//
41// Remix the default form control sizing classes into new ones for easier
42// manipulation.
43
44.input-group-lg > .form-control,
45.input-group-lg > .input-group-addon,
46.input-group-lg > .input-group-btn > .btn {
47  .input-lg();
48}
49.input-group-sm > .form-control,
50.input-group-sm > .input-group-addon,
51.input-group-sm > .input-group-btn > .btn {
52  .input-sm();
53}
54
55
56// Display as table-cell
57// -------------------------
58.input-group-addon,
59.input-group-btn,
60.input-group .form-control {
61  display: table-cell;
62
63  &:not(:first-child):not(:last-child) {
64    border-radius: 0;
65  }
66}
67// Addon and addon wrapper for buttons
68.input-group-addon,
69.input-group-btn {
70  width: 1%;
71  white-space: nowrap;
72  vertical-align: middle; // Match the inputs
73}
74
75// Text input groups
76// -------------------------
77.input-group-addon {
78  padding: @padding-base-vertical @padding-base-horizontal;
79  font-size: @font-size-base;
80  font-weight: normal;
81  line-height: 1;
82  color: @input-color;
83  text-align: center;
84  background-color: @input-group-addon-bg;
85  border: 1px solid @input-group-addon-border-color;
86  border-radius: @input-border-radius;
87
88  // Sizing
89  &.input-sm {
90    padding: @padding-small-vertical @padding-small-horizontal;
91    font-size: @font-size-small;
92    border-radius: @input-border-radius-small;
93  }
94  &.input-lg {
95    padding: @padding-large-vertical @padding-large-horizontal;
96    font-size: @font-size-large;
97    border-radius: @input-border-radius-large;
98  }
99
100  // Nuke default margins from checkboxes and radios to vertically center within.
101  input[type="radio"],
102  input[type="checkbox"] {
103    margin-top: 0;
104  }
105}
106
107// Reset rounded corners
108.input-group .form-control:first-child,
109.input-group-addon:first-child,
110.input-group-btn:first-child > .btn,
111.input-group-btn:first-child > .btn-group > .btn,
112.input-group-btn:first-child > .dropdown-toggle,
113.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
114.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
115  .border-right-radius(0);
116}
117.input-group-addon:first-child {
118  border-right: 0;
119}
120.input-group .form-control:last-child,
121.input-group-addon:last-child,
122.input-group-btn:last-child > .btn,
123.input-group-btn:last-child > .btn-group > .btn,
124.input-group-btn:last-child > .dropdown-toggle,
125.input-group-btn:first-child > .btn:not(:first-child),
126.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
127  .border-left-radius(0);
128}
129.input-group-addon:last-child {
130  border-left: 0;
131}
132
133// Button input groups
134// -------------------------
135.input-group-btn {
136  position: relative;
137  // Jankily prevent input button groups from wrapping with `white-space` and
138  // `font-size` in combination with `inline-block` on buttons.
139  font-size: 0;
140  white-space: nowrap;
141
142  // Negative margin for spacing, position for bringing hovered/focused/actived
143  // element above the siblings.
144  > .btn {
145    position: relative;
146    + .btn {
147      margin-left: -1px;
148    }
149    // Bring the "active" button to the front
150    &:hover,
151    &:focus,
152    &:active {
153      z-index: 2;
154    }
155  }
156
157  // Negative margin to only have a 1px border between the two
158  &:first-child {
159    > .btn,
160    > .btn-group {
161      margin-right: -1px;
162    }
163  }
164  &:last-child {
165    > .btn,
166    > .btn-group {
167      z-index: 2;
168      margin-left: -1px;
169    }
170  }
171}
Note: See TracBrowser for help on using the repository browser.