Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
Current behavior:
The new CSS rules introduced in 3.4.0 for LTR/RTL are prefixed with the attribute selector [dir="ltr"] or [dir="rtl"] (from the root <html> tag), but these rules always having a higher specificity than the ones you would normally write inside a page break the custom styles of our app.
The only solutions we came up with are adding specificity to our current selectors (would require to top 4 classes/attributes), using !important on every conflicting rule (not recommended for so many reasons) or prefixing the page selectors in every SCSS file, like [dir] page-home {...}.
Expected behavior:
LTR/RTL selectors to use a lower specificity so we can override Ionic rules easily and cleanly, as we have been doing. Splitting problematic LTR/RTL joint rules ([dir="ltr"] .some-class, [dir="rtl"] .some-class) in two would halve specificity to 0, 0, 2, 0.
Steps to reproduce:
- Add a
<button ion-button class="my-button"></button> to a page.
- Try to style the button from SCSS, like
page-name { .my-button { padding: 16px; margin: 0; } }.
- Your rules are overwritten by the
[dir="ltr"] .button-(mode), [dir="rtl"] .button-(mode) selector.
- This happens with almost every component:
ion-card, ion-card-content, ion-chip, etc.
Related code:
N/A
Other information:
N/A
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.4.0
System:
Node : v6.10.3
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim : 5.1.0
npm : 5.0.3
Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
Current behavior:
The new CSS rules introduced in 3.4.0 for LTR/RTL are prefixed with the attribute selector
[dir="ltr"]or[dir="rtl"](from the root<html>tag), but these rules always having a higher specificity than the ones you would normally write inside a page break the custom styles of our app.The only solutions we came up with are adding specificity to our current selectors (would require to top 4 classes/attributes), using
!importanton every conflicting rule (not recommended for so many reasons) or prefixing the page selectors in every SCSS file, like[dir] page-home {...}.Expected behavior:
LTR/RTL selectors to use a lower specificity so we can override Ionic rules easily and cleanly, as we have been doing. Splitting problematic LTR/RTL joint rules (
[dir="ltr"] .some-class, [dir="rtl"] .some-class) in two would halve specificity to0, 0, 2, 0.Steps to reproduce:
<button ion-button class="my-button"></button>to a page.page-name { .my-button { padding: 16px; margin: 0; } }.[dir="ltr"] .button-(mode), [dir="rtl"] .button-(mode)selector.ion-card,ion-card-content,ion-chip, etc.Related code:
N/A
Other information:
N/A
Ionic info: (run
ionic infofrom a terminal/cmd prompt and paste output below):