pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
input-groups.less
(3281B)
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 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 }