Skip to content

Commit 60cd0fd

Browse files
- rollback changes on select.ionic;
- organize select styles so they don't affect ionic theme;
1 parent 6e58dbd commit 60cd0fd

File tree

3 files changed

+21
-25
lines changed

3 files changed

+21
-25
lines changed

core/src/components/select/select.common.scss

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,6 @@
5757
cursor: pointer;
5858
}
5959

60-
/**
61-
* Since the label sits on top of the element,
62-
* the component needs to be taller otherwise the
63-
* label will appear too close to the select text.
64-
*/
65-
:host(.select-label-placement-floating),
66-
:host(.select-label-placement-stacked) {
67-
min-height: 56px;
68-
}
69-
7060
:host(.ion-color) {
7161
--highlight-color-focused: #{current-color(base)};
7262
}
@@ -221,17 +211,6 @@ button {
221211
overflow: hidden;
222212
}
223213

224-
:host(.select-label-placement-stacked) .select-wrapper-inner,
225-
:host(.select-label-placement-floating) .select-wrapper-inner {
226-
/**
227-
* When using a stacked/floating label, the inner wrapper is
228-
* stacked vertically under the label container. This line
229-
* ensures that the inner wrapper fills all the remaining height
230-
* of the component.
231-
*/
232-
flex-grow: 1;
233-
}
234-
235214
// Select Highlight
236215
// ----------------------------------------------------------------
237216

core/src/components/select/select.ionic.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,6 @@
9696
width: 100%;
9797
}
9898

99-
:host(.select-label-placement-stacked) .select-wrapper-inner{
100-
flex-grow: 0;
101-
}
102-
10399
// Select Native Wrapper
104100
// ----------------------------------------------------------------
105101

core/src/components/select/select.native.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,27 @@
118118
max-width: calc(100% / #{$form-control-label-stacked-scale});
119119
}
120120

121+
/**
122+
* Since the label sits on top of the element,
123+
* the component needs to be taller otherwise the
124+
* label will appear too close to the select text.
125+
*/
126+
:host(.select-label-placement-floating),
127+
:host(.select-label-placement-stacked) {
128+
min-height: 56px;
129+
}
130+
131+
/**
132+
* When using a stacked/floating label, the inner wrapper is
133+
* stacked vertically under the label container. This line
134+
* ensures that the inner wrapper fills all the remaining height
135+
* of the component.
136+
*/
137+
:host(.select-label-placement-stacked) .select-wrapper-inner,
138+
:host(.select-label-placement-floating) .select-wrapper-inner {
139+
flex-grow: 1;
140+
}
141+
121142
// Start/End Slots
122143
// ----------------------------------------------------------------
123144

0 commit comments

Comments
 (0)