mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
d3dd72fff6
Issue number: resolves #21205 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `picker-column` keeps using LTR display when using RTL. LTR: `Column 1 Column 2` RTL: `Column 1 Column 2` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> `picker-column` correctly displays for RTL. LTR: `Column 1 Column 2` RTL: `Column 2 Column 1` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This PR is already being tested through the `picker -> basic` and `picker -> value` screenshots. Due to those tests, a new test is not needed to verify the fix. The current fix is only changing the `picker` and `picker-column`. The `datetime` and `datetime-button` do not change, leaving the format up to the users. It wouldn't change the functionality that was provided through PR ionic-team/ionic-framework#17018. --------- Co-authored-by: ionitron <hi@ionicframework.com>
131 lines
2.6 KiB
SCSS
131 lines
2.6 KiB
SCSS
@import "./picker.vars";
|
|
|
|
// Picker
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --background: Background of the picker
|
|
* @prop --background-rgb: Background of the picker in rgb format
|
|
*
|
|
* @prop --border-radius: Border radius of the picker
|
|
* @prop --border-color: Border color of the picker
|
|
* @prop --border-width: Border width of the picker
|
|
* @prop --border-style: Border style of the picker
|
|
*
|
|
* @prop --min-width: Minimum width of the picker
|
|
* @prop --width: Width of the picker
|
|
* @prop --max-width: Maximum width of the picker
|
|
*
|
|
* @prop --min-height: Minimum height of the picker
|
|
* @prop --height: Height of the picker
|
|
* @prop --max-height: Maximum height of the picker
|
|
*
|
|
* @prop --backdrop-opacity: Opacity of the backdrop
|
|
*/
|
|
--border-radius: 0;
|
|
--border-style: solid;
|
|
--min-width: auto;
|
|
--width: #{$picker-width};
|
|
--max-width: #{$picker-max-width};
|
|
--min-height: auto;
|
|
--max-height: auto;
|
|
|
|
@include font-smoothing();
|
|
@include position(0, null, null, 0);
|
|
|
|
display: block;
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
outline: none;
|
|
|
|
font-family: $font-family-base;
|
|
|
|
contain: strict;
|
|
user-select: none;
|
|
z-index: $z-index-overlay;
|
|
}
|
|
|
|
:host(.overlay-hidden) {
|
|
display: none;
|
|
}
|
|
|
|
.picker-wrapper {
|
|
@include border-radius(var(--border-radius));
|
|
@include position(null, 0, 0, 0);
|
|
@include margin(auto);
|
|
@include transform(translate3d(0, 100%, 0));
|
|
|
|
display: flex;
|
|
position: absolute;
|
|
|
|
flex-direction: column;
|
|
|
|
width: var(--width);
|
|
min-width: var(--min-width);
|
|
max-width: var(--max-width);
|
|
|
|
height: var(--height);
|
|
min-height: var(--min-height);
|
|
max-height: var(--max-height);
|
|
|
|
border-width: var(--border-width);
|
|
border-style: var(--border-style);
|
|
border-color: var(--border-color);
|
|
|
|
background: var(--background);
|
|
|
|
contain: strict;
|
|
overflow: hidden;
|
|
z-index: $z-index-overlay-wrapper;
|
|
}
|
|
|
|
// Picker Toolbar and Buttons
|
|
// --------------------------------------------------
|
|
|
|
.picker-toolbar {
|
|
width: 100%;
|
|
|
|
background: transparent;
|
|
|
|
contain: strict;
|
|
z-index: 1;
|
|
}
|
|
|
|
.picker-button {
|
|
border: 0;
|
|
|
|
font-family: inherit;
|
|
}
|
|
|
|
.picker-button {
|
|
&:active,
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// Picker Columns and Highlight
|
|
// --------------------------------------------------
|
|
|
|
.picker-columns {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
justify-content: center;
|
|
|
|
margin-bottom: var(--ion-safe-area-bottom, 0);
|
|
|
|
contain: strict;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.picker-above-highlight,
|
|
.picker-below-highlight {
|
|
display: none;
|
|
pointer-events: none;
|
|
}
|