annotate static/bootstrap/less/input-groups.less @ 158:e53a3b64dfd8

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