Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot override mode styles on many components #17608

Closed
imhoffd opened this issue Feb 25, 2019 · 3 comments
Closed

Cannot override mode styles on many components #17608

imhoffd opened this issue Feb 25, 2019 · 3 comments
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@imhoffd
Copy link
Contributor

imhoffd commented Feb 25, 2019

The docs for overriding mode styles aren't accurate for several components, e.g.

.ios ion-item {
  ...
}
@ionitron-bot ionitron-bot bot added the triage label Feb 25, 2019
@brandyscarney
Copy link
Member

I believe certain components need be updated to include the following:

...createThemedClasses(this.mode, 'item'),

I'm not sure why this was removed as it looks intentional, but will look into this.

@brandyscarney brandyscarney added package: core @ionic/core package type: bug a confirmed bug report labels Feb 25, 2019
@ionitron-bot ionitron-bot bot removed the triage label Feb 25, 2019
@lincolnthree lincolnthree mentioned this issue Mar 5, 2019
Closed
@brandyscarney brandyscarney mentioned this issue Mar 20, 2019
Merged
31 tasks
brandyscarney added a commit to ionic-team/ionicons that referenced this issue Apr 10, 2019
@brandyscarney
fix(icon): add mode class
c14a194 
references ionic-team/ionic-framework#17608
@brandyscarney
Copy link
Member

brandyscarney commented Apr 16, 2019 •
edited

This has been added for the 4.3.0 release. The full list of components that have the mode class now can be seen in the table at the bottom of this PR: #17838

It can be used like the following:

ion-item.md {
  // MD styles
}

ion-item.ios {
  // iOS styles
}

Note that this is only a problem for components that are being used inside of a shadow element. If using light DOM you can still use the documented way to style by mode.

kiku-jw pushed a commit to kiku-jw/ionic that referenced this issue May 16, 2019
@brandyscarney @kiku-jw
fix(components): include mode classes on components for use in shadow (…
69013b9 
…ionic-team#17838)

- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling

fixes ionic-team#17608
@ionitron-bot
Copy link

ionitron-bot bot commented May 16, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 16, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@imhoffd @brandyscarney