source: trip-planner-front/node_modules/bootstrap/less/input-groups.less@ eed0bf8

Last change on this file since eed0bf8 was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

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