Skip to content

Commit 5da68c2

Browse files
liamdebeasiliamdebeasi
authored
docs(input, textarea): fix specificity issues with theming playgrounds (#3199)
1 parent 0d281f6 commit 5da68c2

File tree

14 files changed

+72
-34
lines changed

14 files changed

+72
-34
lines changed

‎static/usage/v7/input/theming/css-properties/angular/example_component_css.md

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,4 @@ ion-input.custom {
1010
--padding-start: 10px;
1111
--padding-top: 10px;
1212
}
13-
14-
ion-input.custom .helper-text,
15-
ion-input.custom .counter {
16-
color: var(--ion-color-step-700, #373737);
17-
}
1813
```

‎static/usage/v7/input/theming/css-properties/angular/global_css.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```css
2+
/**
3+
* Since we are styling elements inside of ion-input
4+
* we need to move this CSS to a global stylesheet. Otherwise,
5+
* Angular components with encapsulation enabled will add
6+
* scoped style attributes to these selectors.
7+
*/
8+
ion-input.custom.ios .input-bottom .helper-text,
9+
ion-input.custom.ios .input-bottom .counter,
10+
ion-input.custom.md .input-bottom .helper-text,
11+
ion-input.custom.md .input-bottom .counter {
12+
color: var(--ion-color-primary);
13+
}
14+
```

‎static/usage/v7/input/theming/css-properties/demo.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,11 @@
2727
--padding-top: 10px;
2828
}
2929

30-
ion-input.custom .helper-text,
31-
ion-input.custom .counter {
32-
color: var(--ion-color-step-700, #373737);
30+
ion-input.custom.ios .input-bottom .helper-text,
31+
ion-input.custom.ios .input-bottom .counter,
32+
ion-input.custom.md .input-bottom .helper-text,
33+
ion-input.custom.md .input-bottom .counter {
34+
color: var(--ion-color-primary);
3335
}
3436
</style>
3537
</head>

‎static/usage/v7/input/theming/css-properties/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import vue from './vue.md';
99

1010
import angular_example_component_html from './angular/example_component_html.md';
1111
import angular_example_component_css from './angular/example_component_css.md';
12+
import angular_global_css from './angular/global_css.md';
1213

1314
<Playground
1415
version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
2526
files: {
2627
'src/app/example.component.html': angular_example_component_html,
2728
'src/app/example.component.css': angular_example_component_css,
29+
'src/global.css': angular_global_css,
2830
},
2931
},
3032
}}

‎static/usage/v7/input/theming/css-properties/javascript.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@
2121
--padding-top: 10px;
2222
}
2323
24-
ion-input.custom .helper-text,
25-
ion-input.custom .counter {
26-
color: var(--ion-color-step-700, #373737);
24+
ion-input.custom.ios .input-bottom .helper-text,
25+
ion-input.custom.ios .input-bottom .counter,
26+
ion-input.custom.md .input-bottom .helper-text,
27+
ion-input.custom.md .input-bottom .counter {
28+
color: var(--ion-color-primary);
2729
}
2830
</style>
2931
```

‎static/usage/v7/input/theming/css-properties/react/main_css.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ ion-input.custom {
1111
--padding-top: 10px;
1212
}
1313

14-
ion-input.custom .helper-text,
15-
ion-input.custom .counter {
16-
color: #373737;
14+
ion-input.custom.ios .input-bottom .helper-text,
15+
ion-input.custom.ios .input-bottom .counter,
16+
ion-input.custom.md .input-bottom .helper-text,
17+
ion-input.custom.md .input-bottom .counter {
18+
color: var(--ion-color-primary);
1719
}
1820
```

‎static/usage/v7/input/theming/css-properties/vue.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,11 @@
3232
--padding-top: 10px;
3333
}
3434
35-
ion-input.custom .helper-text,
36-
ion-input.custom .counter {
37-
color: var(--ion-color-step-700, #373737);
35+
ion-input.custom.ios .input-bottom .helper-text,
36+
ion-input.custom.ios .input-bottom .counter,
37+
ion-input.custom.md .input-bottom .helper-text,
38+
ion-input.custom.md .input-bottom .counter {
39+
color: var(--ion-color-primary);
3840
}
3941
</style>
4042
```

‎static/usage/v7/textarea/theming/angular/example_component_css.md

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,4 @@ ion-textarea.custom {
77
--placeholder-color: #ddd;
88
--placeholder-opacity: 0.8;
99
}
10-
11-
ion-textarea.custom .helper-text,
12-
ion-textarea.custom .counter {
13-
color: #373737;
14-
}
1510
```

‎static/usage/v7/textarea/theming/angular/global_css.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```css
2+
/**
3+
* Since we are styling elements inside of ion-textarea
4+
* we need to move this CSS to a global stylesheet. Otherwise,
5+
* Angular components with encapsulation enabled will add
6+
* scoped style attributes to these selectors.
7+
*/
8+
ion-textarea.custom.ios .textarea-bottom .helper-text,
9+
ion-textarea.custom.ios .textarea-bottom .counter,
10+
ion-textarea.custom.md .textarea-bottom .helper-text,
11+
ion-textarea.custom.md .textarea-bottom .counter {
12+
color: var(--ion-color-primary);
13+
}
14+
```

‎static/usage/v7/textarea/theming/demo.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,11 @@
2222
--placeholder-opacity: 0.8;
2323
}
2424

25-
ion-textarea.custom .helper-text,
26-
ion-textarea.custom .counter {
27-
color: #373737;
25+
ion-textarea.custom.ios .textarea-bottom .helper-text,
26+
ion-textarea.custom.ios .textarea-bottom .counter,
27+
ion-textarea.custom.md .textarea-bottom .helper-text,
28+
ion-textarea.custom.md .textarea-bottom .counter {
29+
color: var(--ion-color-primary);
2830
}
2931
</style>
3032
</head>

‎static/usage/v7/textarea/theming/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import vue from './vue.md';
99

1010
import angular_example_component_html from './angular/example_component_html.md';
1111
import angular_example_component_css from './angular/example_component_css.md';
12+
import angular_global_css from './angular/global_css.md';
1213

1314
<Playground
1415
version="7"
@@ -26,6 +27,7 @@ import angular_example_component_css from './angular/example_component_css.md';
2627
files: {
2728
'src/app/example.component.css': angular_example_component_css,
2829
'src/app/example.component.html': angular_example_component_html,
30+
'src/global.css': angular_global_css,
2931
},
3032
},
3133
}}

‎static/usage/v7/textarea/theming/javascript.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@
1818
--placeholder-opacity: 0.8;
1919
}
2020
21-
ion-textarea.custom .helper-text,
22-
ion-textarea.custom .counter {
23-
color: #373737;
21+
ion-textarea.custom.ios .textarea-bottom .helper-text,
22+
ion-textarea.custom.ios .textarea-bottom .counter,
23+
ion-textarea.custom.md .textarea-bottom .helper-text,
24+
ion-textarea.custom.md .textarea-bottom .counter {
25+
color: var(--ion-color-primary);
2426
}
2527
</style>
2628
```

‎static/usage/v7/textarea/theming/react/main_css.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ ion-textarea.custom {
88
--placeholder-opacity: 0.8;
99
}
1010

11-
ion-textarea.custom .helper-text,
12-
ion-textarea.custom .counter {
13-
color: #373737;
11+
ion-textarea.custom.ios .textarea-bottom .helper-text,
12+
ion-textarea.custom.ios .textarea-bottom .counter,
13+
ion-textarea.custom.md .textarea-bottom .helper-text,
14+
ion-textarea.custom.md .textarea-bottom .counter {
15+
color: var(--ion-color-primary);
1416
}
1517
```

‎static/usage/v7/textarea/theming/vue.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@
99
--placeholder-opacity: 0.8;
1010
}
1111
12-
ion-textarea.custom .helper-text,
13-
ion-textarea.custom .counter {
14-
color: #373737;
12+
ion-textarea.custom.ios .textarea-bottom .helper-text,
13+
ion-textarea.custom.ios .textarea-bottom .counter,
14+
ion-textarea.custom.md .textarea-bottom .helper-text,
15+
ion-textarea.custom.md .textarea-bottom .counter {
16+
color: var(--ion-color-primary);
1517
}
1618
</style>
1719

0 commit comments

Comments
 (0)