Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_input-group.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 //
2 // Base styles
3 //
4
5 .input-group {
6 position: relative;
7 display: flex;
8 width: 100%;
9
10 .form-control {
11 // Ensure that the input is always above the *appended* addon button for
12 // proper border colors.
13 position: relative;
14 z-index: 2;
15 flex: 1 1 auto;
16 // Add width 1% and flex-basis auto to ensure that button will not wrap out
17 // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
18 width: 1%;
19 margin-bottom: 0;
20
21 // Bring the "active" form control to the front
22 @include hover-focus-active {
23 z-index: 3;
24 }
25 }
26 }
27
28 .input-group-addon,
29 .input-group-btn,
30 .input-group .form-control {
31 // Vertically centers the content of the addons within the input group
32 display: flex;
33 align-items: center;
34
35 &:not(:first-child):not(:last-child) {
36 @include border-radius(0);
37 }
38 }
39
40 .input-group-addon,
41 .input-group-btn {
42 white-space: nowrap;
43 vertical-align: middle; // Match the inputs
44 }
45
46
47 // Sizing options
48 //
49 // Remix the default form control sizing classes into new ones for easier
50 // manipulation.
51
52 .input-group-lg > .form-control,
53 .input-group-lg > .input-group-addon,
54 .input-group-lg > .input-group-btn > .btn {
55 @extend .form-control-lg;
56 }
57 .input-group-sm > .form-control,
58 .input-group-sm > .input-group-addon,
59 .input-group-sm > .input-group-btn > .btn {
60 @extend .form-control-sm;
61 }
62
63
64 //
65 // Text input groups
66 //
67
68 .input-group-addon {
69 padding: $input-btn-padding-y $input-btn-padding-x;
70 margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
71 font-size: $font-size-base; // Match inputs
72 font-weight: $font-weight-normal;
73 line-height: $input-btn-line-height;
74 color: $input-color;
75 text-align: center;
76 background-color: $input-group-addon-bg;
77 border: $input-btn-border-width solid $input-group-addon-border-color;
78 @include border-radius($input-border-radius);
79
80 // Sizing
81 &.form-control-sm {
82 padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
83 font-size: $font-size-sm;
84 @include border-radius($input-border-radius-sm);
85 }
86
87 &.form-control-lg {
88 padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
89 font-size: $font-size-lg;
90 @include border-radius($input-border-radius-lg);
91 }
92
93 // scss-lint:disable QualifyingElement
94 // Nuke default margins from checkboxes and radios to vertically center within.
95 input[type="radio"],
96 input[type="checkbox"] {
97 margin-top: 0;
98 }
99 // scss-lint:enable QualifyingElement
100 }
101
102
103 //
104 // Reset rounded corners
105 //
106
107 .input-group .form-control:not(:last-child),
108 .input-group-addon:not(:last-child),
109 .input-group-btn:not(:last-child) > .btn,
110 .input-group-btn:not(:last-child) > .btn-group > .btn,
111 .input-group-btn:not(:last-child) > .dropdown-toggle,
112 .input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
113 .input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
114 @include border-right-radius(0);
115 }
116 .input-group-addon:not(:last-child) {
117 border-right: 0;
118 }
119 .input-group .form-control:not(:first-child),
120 .input-group-addon:not(:first-child),
121 .input-group-btn:not(:first-child) > .btn,
122 .input-group-btn:not(:first-child) > .btn-group > .btn,
123 .input-group-btn:not(:first-child) > .dropdown-toggle,
124 .input-group-btn:not(:last-child) > .btn:not(:first-child),
125 .input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
126 @include border-left-radius(0);
127 }
128 .form-control + .input-group-addon:not(:first-child) {
129 border-left: 0;
130 }
131
132 //
133 // Button input groups
134 //
135
136 .input-group-btn {
137 position: relative;
138 // Jankily prevent input button groups from wrapping with `white-space` and
139 // `font-size` in combination with `inline-block` on buttons.
140 font-size: 0;
141 white-space: nowrap;
142
143 // Negative margin for spacing, position for bringing hovered/focused/actived
144 // element above the siblings.
145 > .btn {
146 position: relative;
147
148 + .btn {
149 margin-left: (-$input-btn-border-width);
150 }
151
152 // Bring the "active" button to the front
153 @include hover-focus-active {
154 z-index: 3;
155 }
156 }
157
158 // Negative margin to only have a single, shared border between the two
159 &:not(:last-child) {
160 > .btn,
161 > .btn-group {
162 margin-right: (-$input-btn-border-width);
163 }
164 }
165 &:not(:first-child) {
166 > .btn,
167 > .btn-group {
168 z-index: 2;
169 margin-left: (-$input-btn-border-width);
170 // Because specificity
171 @include hover-focus-active {
172 z-index: 3;
173 }
174 }
175 }
176 }