Skip to content

Commit 16f179a

Browse files
brandyscarneybrandyscarney
committed
refactor(css): remove CSS util attributes (#18956)
BREAKING CHANGES Removes all CSS utility attributes. Please use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities
1 parent ef95345 commit 16f179a

8 files changed

Lines changed: 52 additions & 242 deletions

File tree

‎angular/src/directives/css-utils-deprecations.ts‎

Lines changed: 0 additions & 134 deletions
This file was deleted.

‎angular/src/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
1414
export { VirtualItem } from './directives/virtual-scroll/virtual-item';
1515
export { VirtualHeader } from './directives/virtual-scroll/virtual-header';
1616
export { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
17-
export { CssUtilsDeprecations } from './directives/css-utils-deprecations';
1817
export * from './directives/proxies';
1918

2019
// PROVIDERS

‎angular/src/ionic-module.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { NumericValueAccessor } from './directives/control-value-accessors/numer
88
import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
99
import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
1010
import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
11-
import { CssUtilsDeprecations } from './directives/css-utils-deprecations';
1211
import { IonBackButtonDelegate } from './directives/navigation/ion-back-button';
1312
import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
1413
import { IonTabs } from './directives/navigation/ion-tabs';
@@ -117,10 +116,7 @@ const DECLARATIONS = [
117116
VirtualFooter,
118117
VirtualHeader,
119118
VirtualItem,
120-
IonVirtualScroll,
121-
122-
// Deprecations
123-
CssUtilsDeprecations
119+
IonVirtualScroll
124120
];
125121

126122
@NgModule({

‎core/src/css/flex-utils.scss‎

Lines changed: 20 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,114 +6,94 @@
66
// Align Self
77
// --------------------------------------------------
88

9-
.ion-align-self-start,
10-
[align-self-start] {
9+
.ion-align-self-start {
1110
align-self: flex-start !important;
1211
}
1312

14-
.ion-align-self-end,
15-
[align-self-end] {
13+
.ion-align-self-end {
1614
align-self: flex-end !important;
1715
}
1816

19-
.ion-align-self-center,
20-
[align-self-center] {
17+
.ion-align-self-center {
2118
align-self: center !important;
2219
}
2320

24-
.ion-align-self-stretch,
25-
[align-self-stretch] {
21+
.ion-align-self-stretch {
2622
align-self: stretch !important;
2723
}
2824

29-
.ion-align-self-baseline,
30-
[align-self-baseline] {
25+
.ion-align-self-baseline {
3126
align-self: baseline !important;
3227
}
3328

34-
.ion-align-self-auto,
35-
[align-self-auto] {
29+
.ion-align-self-auto {
3630
align-self: auto !important;
3731
}
3832

3933

4034
// Flex Wrap
4135
// --------------------------------------------------
4236

43-
.ion-wrap,
44-
[wrap] {
37+
.ion-wrap {
4538
flex-wrap: wrap !important;
4639
}
4740

48-
.ion-nowrap,
49-
[nowrap] {
41+
.ion-nowrap {
5042
flex-wrap: nowrap !important;
5143
}
5244

53-
.ion-wrap-reverse,
54-
[wrap-reverse] {
45+
.ion-wrap-reverse {
5546
flex-wrap: wrap-reverse !important;
5647
}
5748

5849

5950
// Justify Content
6051
// --------------------------------------------------
6152

62-
.ion-justify-content-start,
63-
[justify-content-start] {
53+
.ion-justify-content-start {
6454
justify-content: flex-start !important;
6555
}
6656

67-
.ion-justify-content-center,
68-
[justify-content-center] {
57+
.ion-justify-content-center {
6958
justify-content: center !important;
7059
}
7160

72-
.ion-justify-content-end,
73-
[justify-content-end] {
61+
.ion-justify-content-end {
7462
justify-content: flex-end !important;
7563
}
7664

77-
.ion-justify-content-around,
78-
[justify-content-around] {
65+
.ion-justify-content-around {
7966
justify-content: space-around !important;
8067
}
8168

82-
.ion-justify-content-between,
83-
[justify-content-between] {
69+
.ion-justify-content-between {
8470
justify-content: space-between !important;
8571
}
8672

87-
.ion-justify-content-evenly,
88-
[justify-content-evenly] {
73+
.ion-justify-content-evenly {
8974
justify-content: space-evenly !important;
9075
}
9176

9277

9378
// Align Items
9479
// --------------------------------------------------
9580

96-
.ion-align-items-start,
97-
[align-items-start] {
81+
.ion-align-items-start {
9882
align-items: flex-start !important;
9983
}
10084

101-
.ion-align-items-center,
102-
[align-items-center] {
85+
.ion-align-items-center {
10386
align-items: center !important;
10487
}
10588

106-
.ion-align-items-end,
107-
[align-items-end] {
89+
.ion-align-items-end {
10890
align-items: flex-end !important;
10991
}
11092

111-
.ion-align-items-stretch,
112-
[align-items-stretch] {
93+
.ion-align-items-stretch {
11394
align-items: stretch !important;
11495
}
11596

116-
.ion-align-items-baseline,
117-
[align-items-baseline] {
97+
.ion-align-items-baseline {
11898
align-items: baseline !important;
11999
}

‎core/src/css/float-elements.scss‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,19 @@
1212
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
1313
// Provide `.ion-float-{bp}-{side}` classes for floating the element based
1414
// on the breakpoint and side
15-
.ion-float#{$infix}-left,
16-
[float#{$infix}-left] {
15+
.ion-float#{$infix}-left {
1716
@include float(left, !important);
1817
}
1918

20-
.ion-float#{$infix}-right,
21-
[float#{$infix}-right] {
19+
.ion-float#{$infix}-right {
2220
@include float(right, !important);
2321
}
2422

25-
.ion-float#{$infix}-start,
26-
[float#{$infix}-start] {
23+
.ion-float#{$infix}-start {
2724
@include float(start, !important);
2825
}
2926

30-
.ion-float#{$infix}-end,
31-
[float#{$infix}-end] {
27+
.ion-float#{$infix}-end {
3228
@include float(end, !important);
3329
}
3430
}

0 commit comments

Comments
 (0)