javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(select): use border mixin (#27732)

Browse Source 
Issue number: N/A

---------

<!-- 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. -->

The outline select uses `border-left` and `border-right` properties to
handle LTR vs RTL borders. However, our border mixin takes care of this
by using logical border properties.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the outline select to use the border mixin.

Note 1: There should be no visual changes as a result of this. This is
simpler way of doing what we are already doing.
Note 2: There do exist logical border radius properties (for the other
explicit LTR vs RTL work we do), but Ionic 7 supports browsers that do
not support these properties yet. (I created FW-4661 to track this)

## 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 commit is contained in:
Liam DeBeasi
2023-07-05 08:49:06 -04:00
committed by GitHub
parent a4197a5c74
commit e5ab6d8804
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/select/select.md.outline.scss
View File

@ -196,16 +196,16 @@
pointer-events: none;
}
:host(.select-fill-outline) .select-outline-start {
@include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
}
:host(.select-ltr.select-fill-outline) .select-outline-start {
// stylelint-disable-next-line property-disallowed-list
border-left: var(--border-width) var(--border-style) var(--border-color);
// stylelint-disable-next-line property-disallowed-list
border-radius: var(--border-radius) 0px 0px var(--border-radius);
}
:host(.select-rtl.select-fill-outline) .select-outline-start {
// stylelint-disable-next-line property-disallowed-list
border-right: var(--border-width) var(--border-style) var(--border-color);
// stylelint-disable-next-line property-disallowed-list
border-radius: 0px var(--border-radius) var(--border-radius) 0px;
}
@ -222,16 +222,16 @@
width: calc(var(--padding-start) - #{$select-md-floating-label-padding});
}
:host(.select-fill-outline) .select-outline-end {
@include border(null, var(--border-width) var(--border-style) var(--border-color), null, null);
}
:host(.select-ltr.select-fill-outline) .select-outline-end {
// stylelint-disable-next-line property-disallowed-list
border-right: var(--border-width) var(--border-style) var(--border-color);
// stylelint-disable-next-line property-disallowed-list
border-radius: 0px var(--border-radius) var(--border-radius) 0px;
}
:host(.select-rtl.select-fill-outline) .select-outline-end {
// stylelint-disable-next-line property-disallowed-list
border-left: var(--border-width) var(--border-style) var(--border-color);
// stylelint-disable-next-line property-disallowed-list
border-radius: var(--border-radius) 0px 0px var(--border-radius);
}