Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit ab008b9

Browse files
committed
refactor(select) allow more flexible scss
Create better flexibility for manipulating select while still following Material Design spec - Add md-inline-form support - Add alignment math to SCSS - Support custom margin and padding for md-select - Dynamically adjust bottom margin to allow denser layouts Fixes #8712
1 parent 9a2c47d commit ab008b9

File tree

2 files changed

+43
-26
lines changed

2 files changed

+43
-26
lines changed

src/components/select/select.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1559,7 +1559,7 @@ function SelectProvider($$interimElementProvider) {
15591559
transformOrigin = '50% 100%';
15601560
}
15611561
} else {
1562-
left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft) + 2;
1562+
left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft);
15631563
top = Math.floor(targetRect.top + targetRect.height / 2 - centeredRect.height / 2 -
15641564
centeredRect.top + contentNode.scrollTop) + 2;
15651565

src/components/select/select.scss

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,23 @@ $select-option-height: 48px !default;
55
$select-option-padding: 16px !default;
66
$select-container-padding: 16px !default;
77
$select-container-transition-duration: 350ms !default;
8+
$select-value-padding-top: 6px;
9+
$select-value-padding-bottom: 4px;
810

911
$select-max-visible-options: 5 !default;
1012

13+
// from input.scss
14+
$input-container-margin-top: 18px !default;
15+
$input-container-padding-top: 2px !default;
16+
$input-padding-top: 2px !default;
17+
$input-padding-bottom: 1px !default;
18+
19+
$input-alignment: ($input-padding-top + $input-padding-bottom)
20+
- ($select-value-padding-top + $select-value-padding-bottom);
21+
$md-inline-alignment: ($input-container-margin-top + $input-container-padding-top)
22+
+ ($input-padding-top + $input-padding-bottom)
23+
- ($select-value-padding-top + $select-value-padding-bottom);
24+
1125
// Fixes the animations with the floating label when select is inside an input container
1226
md-input-container {
1327
&:not([md-no-float]) {
@@ -71,9 +85,18 @@ md-input-container {
7185
}
7286
}
7387

74-
md-input-container > md-select {
75-
margin: 0;
76-
order: 2;
88+
.md-inline-form md-select {
89+
margin-top: $md-inline-alignment;
90+
}
91+
92+
md-input-container {
93+
> md-select,
94+
.md-inline-form & > md-select {
95+
margin-top: $input-alignment;
96+
}
97+
> md-select {
98+
order: 2;
99+
}
77100
}
78101

79102

@@ -102,7 +125,6 @@ md-input-container.md-input-invalid {
102125

103126
md-select {
104127
display: flex;
105-
margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
106128

107129
&[required], &.ng-required {
108130
&.ng-invalid {
@@ -120,7 +142,12 @@ md-select {
120142
// to create a dotted line under the input.
121143
background-size: 4px 1px;
122144
background-repeat: repeat-x;
123-
margin-bottom: -1px; // Shift downward so dotted line is positioned the same as other bottom borders
145+
// Add to padding-bottom to keep dotted line aligned with other bottom borders
146+
// Sub from padding-top to keep height consistent
147+
// Translate text 1px up to keep in alignment
148+
padding-bottom: $select-value-padding-bottom + 1;
149+
padding-top: $select-value-padding-top - 1;
150+
transform: translate3d(0, 1px, 0);
124151
}
125152

126153
&:focus {
@@ -135,43 +162,33 @@ md-select {
135162
}
136163
&.ng-invalid.ng-touched {
137164
.md-select-value {
138-
border-bottom-style: solid;
139-
padding-bottom: 1px;
165+
border-bottom: 2px solid;
140166
}
141167
}
142168
&:focus {
143169
.md-select-value {
144170
border-bottom-width: 2px;
145171
border-bottom-style: solid;
146-
padding-bottom: 0;
147-
}
148-
&.ng-invalid.ng-touched {
149-
.md-select-value {
150-
padding-bottom: 0;
151-
}
172+
padding-bottom: $select-value-padding-bottom - 1;
152173
}
153174
}
154175
}
155176
}
156177

157-
// Fix value by 1px to align with standard text inputs (and spec)
158-
md-input-container.md-input-has-value .md-select-value {
159-
> span:not(.md-select-icon) {
160-
transform: translate3d(0, 1px, 0);
161-
}
162-
}
163-
164178
.md-select-value {
165179
display: flex;
166180
align-items: center;
167-
padding: 2px 2px 1px;
181+
padding-top: $select-value-padding-top;
182+
padding-bottom: $select-value-padding-bottom;
168183
border-bottom-width: 1px;
169184
border-bottom-style: solid;
170185
background-color: rgba(0,0,0,0);
171186
position: relative;
172187
box-sizing: content-box;
173-
min-width: 8 * $baseline-grid;
188+
min-width: 11 * $baseline-grid;
174189
min-height: 26px;
190+
margin-bottom: auto;
191+
-ms-flex-item-align: start; // workaround for margin-bottom: auto
175192
flex-grow: 1;
176193

177194

@@ -192,7 +209,6 @@ md-input-container.md-input-has-value .md-select-value {
192209
align-items: flex-end;
193210
text-align: end;
194211
width: 3 * $baseline-grid;
195-
margin: 0 .5 * $baseline-grid;
196212
transform: translate3d(0, -2px, 0);
197213
font-size: 1.2rem;
198214
}
@@ -202,17 +218,18 @@ md-input-container.md-input-has-value .md-select-value {
202218
content: '\25BC';
203219
position: relative;
204220
top: 2px;
221+
@include rtl(right, -4px, auto);
222+
@include rtl(left, auto, -4px);
205223
speak: none;
206224
font-size: 16px;
207-
transform: scaleY(0.6) scaleX(1);
225+
transform: scaleY(0.5);
208226
}
209227

210228
&.md-select-placeholder {
211229
display: flex;
212230
order: 1;
213231
pointer-events: none;
214232
-webkit-font-smoothing: antialiased;
215-
padding-left: 2px;
216233
z-index: 1;
217234
}
218235
}

0 commit comments

Comments
 (0)