mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 01:52:19 +08:00
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
This commit is contained in:
Brandy Carney
@ -1,134 +0,0 @@
|
||||
import { Directive, ElementRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[align-self-start], [align-self-end], [align-self-center], [align-self-stretch], [align-self-baseline], [align-self-auto], [wrap-reverse], [justify-content-start], [justify-content-center], [justify-content-end], [justify-content-around], [justify-content-between], [justify-content-evenly], [align-items-start], [align-items-center], [align-items-end], [align-items-stretch], [align-items-baseline], [float-left], [float-right], [float-start], [float-end], [float-sm-left], [float-sm-right], [float-sm-start], [float-sm-end], [float-md-left], [float-md-right], [float-md-start], [float-md-end], [float-lg-left], [float-lg-right], [float-lg-start], [float-lg-end], [float-xl-left], [float-xl-right], [float-xl-start], [float-xl-end], [text-center], [text-justify], [text-start], [text-end], [text-left], [text-right], [text-nowrap], [text-wrap], [text-sm-center], [text-sm-justify], [text-sm-start], [text-sm-end], [text-sm-left], [text-sm-right], [text-sm-nowrap], [text-sm-wrap], [text-md-center], [text-md-justify], [text-md-start], [text-md-end], [text-md-left], [text-md-right], [text-md-nowrap], [text-md-wrap], [text-lg-center], [text-lg-justify], [text-lg-start], [text-lg-end], [text-lg-left], [text-lg-right], [text-lg-nowrap], [text-lg-wrap], [text-xl-center], [text-xl-justify], [text-xl-start], [text-xl-end], [text-xl-left], [text-xl-right], [text-xl-nowrap], [text-xl-wrap], [text-uppercase], [text-lowercase], [text-capitalize], [text-sm-uppercase], [text-sm-lowercase], [text-sm-capitalize], [text-md-uppercase], [text-md-lowercase], [text-md-capitalize], [text-lg-uppercase], [text-lg-lowercase], [text-lg-capitalize], [text-xl-uppercase], [text-xl-lowercase], [text-xl-capitalize], [no-padding], [padding], [padding-top], [padding-bottom], [padding-start], [padding-end], [padding-vertical], [padding-horizontal], [no-margin], [margin], [margin-top], [margin-bottom], [margin-start], [margin-end], [margin-vertical], [margin-horizontal]',
|
||||
})
|
||||
export class CssUtilsDeprecations {
|
||||
constructor(ref: ElementRef) {
|
||||
const el = (ref.nativeElement as HTMLElement);
|
||||
const attributes = Array.from(el.attributes)
|
||||
.map(a => a.name)
|
||||
.filter(n => DEPRECATED_ATTRIBUTES.includes(n));
|
||||
|
||||
if (attributes.length > 0) {
|
||||
console.warn(`[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
|
||||
Replace:
|
||||
'<${el.tagName.toLowerCase()} ${attributes.map(n => `${n}`).join(' ')}>'
|
||||
|
||||
With:
|
||||
'<${el.tagName.toLowerCase()} class="${attributes.map(n => `ion-${n}`).join(' ')}">'
|
||||
`);
|
||||
}
|
||||
}
|
||||
}
|
||||
const DEPRECATED_ATTRIBUTES = [
|
||||
'align-self-start',
|
||||
'align-self-end',
|
||||
'align-self-center',
|
||||
'align-self-stretch',
|
||||
'align-self-baseline',
|
||||
'align-self-auto',
|
||||
'wrap-reverse',
|
||||
'justify-content-start',
|
||||
'justify-content-center',
|
||||
'justify-content-end',
|
||||
'justify-content-around',
|
||||
'justify-content-between',
|
||||
'justify-content-evenly',
|
||||
'align-items-start',
|
||||
'align-items-center',
|
||||
'align-items-end',
|
||||
'align-items-stretch',
|
||||
'align-items-baseline',
|
||||
'float-left',
|
||||
'float-right',
|
||||
'float-start',
|
||||
'float-end',
|
||||
'float-sm-left',
|
||||
'float-sm-right',
|
||||
'float-sm-start',
|
||||
'float-sm-end',
|
||||
'float-md-left',
|
||||
'float-md-right',
|
||||
'float-md-start',
|
||||
'float-md-end',
|
||||
'float-lg-left',
|
||||
'float-lg-right',
|
||||
'float-lg-start',
|
||||
'float-lg-end',
|
||||
'float-xl-left',
|
||||
'float-xl-right',
|
||||
'float-xl-start',
|
||||
'float-xl-end',
|
||||
'text-center',
|
||||
'text-justify',
|
||||
'text-start',
|
||||
'text-end',
|
||||
'text-left',
|
||||
'text-right',
|
||||
'text-nowrap',
|
||||
'text-wrap',
|
||||
'text-sm-center',
|
||||
'text-sm-justify',
|
||||
'text-sm-start',
|
||||
'text-sm-end',
|
||||
'text-sm-left',
|
||||
'text-sm-right',
|
||||
'text-sm-nowrap',
|
||||
'text-sm-wrap',
|
||||
'text-md-center',
|
||||
'text-md-justify',
|
||||
'text-md-start',
|
||||
'text-md-end',
|
||||
'text-md-left',
|
||||
'text-md-right',
|
||||
'text-md-nowrap',
|
||||
'text-md-wrap',
|
||||
'text-lg-center',
|
||||
'text-lg-justify',
|
||||
'text-lg-start',
|
||||
'text-lg-end',
|
||||
'text-lg-left',
|
||||
'text-lg-right',
|
||||
'text-lg-nowrap',
|
||||
'text-lg-wrap',
|
||||
'text-xl-center',
|
||||
'text-xl-justify',
|
||||
'text-xl-start',
|
||||
'text-xl-end',
|
||||
'text-xl-left',
|
||||
'text-xl-right',
|
||||
'text-xl-nowrap',
|
||||
'text-xl-wrap',
|
||||
'text-uppercase',
|
||||
'text-lowercase',
|
||||
'text-capitalize',
|
||||
'text-sm-uppercase',
|
||||
'text-sm-lowercase',
|
||||
'text-sm-capitalize',
|
||||
'text-md-uppercase',
|
||||
'text-md-lowercase',
|
||||
'text-md-capitalize',
|
||||
'text-lg-uppercase',
|
||||
'text-lg-lowercase',
|
||||
'text-lg-capitalize',
|
||||
'text-xl-uppercase',
|
||||
'text-xl-lowercase',
|
||||
'text-xl-capitalize',
|
||||
'no-padding',
|
||||
'padding',
|
||||
'padding-top',
|
||||
'padding-bottom',
|
||||
'padding-start',
|
||||
'padding-end',
|
||||
'padding-vertical',
|
||||
'padding-horizontal',
|
||||
'no-margin',
|
||||
'margin',
|
||||
'margin-top',
|
||||
'margin-bottom',
|
||||
'margin-start',
|
||||
'margin-end',
|
||||
'margin-vertical',
|
||||
'margin-horizontal'
|
||||
];
|
||||
@ -14,7 +14,6 @@ export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
|
||||
export { VirtualItem } from './directives/virtual-scroll/virtual-item';
|
||||
export { VirtualHeader } from './directives/virtual-scroll/virtual-header';
|
||||
export { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
|
||||
export { CssUtilsDeprecations } from './directives/css-utils-deprecations';
|
||||
export * from './directives/proxies';
|
||||
|
||||
// PROVIDERS
|
||||
|
||||
@ -8,7 +8,6 @@ import { NumericValueAccessor } from './directives/control-value-accessors/numer
|
||||
import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
|
||||
import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
|
||||
import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
|
||||
import { CssUtilsDeprecations } from './directives/css-utils-deprecations';
|
||||
import { IonBackButtonDelegate } from './directives/navigation/ion-back-button';
|
||||
import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
|
||||
import { IonTabs } from './directives/navigation/ion-tabs';
|
||||
@ -117,10 +116,7 @@ const DECLARATIONS = [
|
||||
VirtualFooter,
|
||||
VirtualHeader,
|
||||
VirtualItem,
|
||||
IonVirtualScroll,
|
||||
|
||||
// Deprecations
|
||||
CssUtilsDeprecations
|
||||
IonVirtualScroll
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
@ -6,33 +6,27 @@
|
||||
// Align Self
|
||||
// --------------------------------------------------
|
||||
|
||||
.ion-align-self-start,
|
||||
[align-self-start] {
|
||||
.ion-align-self-start {
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
|
||||
.ion-align-self-end,
|
||||
[align-self-end] {
|
||||
.ion-align-self-end {
|
||||
align-self: flex-end !important;
|
||||
}
|
||||
|
||||
.ion-align-self-center,
|
||||
[align-self-center] {
|
||||
.ion-align-self-center {
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.ion-align-self-stretch,
|
||||
[align-self-stretch] {
|
||||
.ion-align-self-stretch {
|
||||
align-self: stretch !important;
|
||||
}
|
||||
|
||||
.ion-align-self-baseline,
|
||||
[align-self-baseline] {
|
||||
.ion-align-self-baseline {
|
||||
align-self: baseline !important;
|
||||
}
|
||||
|
||||
.ion-align-self-auto,
|
||||
[align-self-auto] {
|
||||
.ion-align-self-auto {
|
||||
align-self: auto !important;
|
||||
}
|
||||
|
||||
@ -40,18 +34,15 @@
|
||||
// Flex Wrap
|
||||
// --------------------------------------------------
|
||||
|
||||
.ion-wrap,
|
||||
[wrap] {
|
||||
.ion-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.ion-nowrap,
|
||||
[nowrap] {
|
||||
.ion-nowrap {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.ion-wrap-reverse,
|
||||
[wrap-reverse] {
|
||||
.ion-wrap-reverse {
|
||||
flex-wrap: wrap-reverse !important;
|
||||
}
|
||||
|
||||
@ -59,33 +50,27 @@
|
||||
// Justify Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.ion-justify-content-start,
|
||||
[justify-content-start] {
|
||||
.ion-justify-content-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.ion-justify-content-center,
|
||||
[justify-content-center] {
|
||||
.ion-justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ion-justify-content-end,
|
||||
[justify-content-end] {
|
||||
.ion-justify-content-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.ion-justify-content-around,
|
||||
[justify-content-around] {
|
||||
.ion-justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.ion-justify-content-between,
|
||||
[justify-content-between] {
|
||||
.ion-justify-content-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.ion-justify-content-evenly,
|
||||
[justify-content-evenly] {
|
||||
.ion-justify-content-evenly {
|
||||
justify-content: space-evenly !important;
|
||||
}
|
||||
|
||||
@ -93,27 +78,22 @@
|
||||
// Align Items
|
||||
// --------------------------------------------------
|
||||
|
||||
.ion-align-items-start,
|
||||
[align-items-start] {
|
||||
.ion-align-items-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.ion-align-items-center,
|
||||
[align-items-center] {
|
||||
.ion-align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.ion-align-items-end,
|
||||
[align-items-end] {
|
||||
.ion-align-items-end {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.ion-align-items-stretch,
|
||||
[align-items-stretch] {
|
||||
.ion-align-items-stretch {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.ion-align-items-baseline,
|
||||
[align-items-baseline] {
|
||||
.ion-align-items-baseline {
|
||||
align-items: baseline !important;
|
||||
}
|
||||
|
||||
@ -12,23 +12,19 @@
|
||||
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
|
||||
// Provide `.ion-float-{bp}-{side}` classes for floating the element based
|
||||
// on the breakpoint and side
|
||||
.ion-float#{$infix}-left,
|
||||
[float#{$infix}-left] {
|
||||
.ion-float#{$infix}-left {
|
||||
@include float(left, !important);
|
||||
}
|
||||
|
||||
.ion-float#{$infix}-right,
|
||||
[float#{$infix}-right] {
|
||||
.ion-float#{$infix}-right {
|
||||
@include float(right, !important);
|
||||
}
|
||||
|
||||
.ion-float#{$infix}-start,
|
||||
[float#{$infix}-start] {
|
||||
.ion-float#{$infix}-start {
|
||||
@include float(start, !important);
|
||||
}
|
||||
|
||||
.ion-float#{$infix}-end,
|
||||
[float#{$infix}-end] {
|
||||
.ion-float#{$infix}-end {
|
||||
@include float(end, !important);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,8 +14,7 @@ $margin: var(--ion-margin, 16px);
|
||||
// Padding
|
||||
// --------------------------------------------------
|
||||
|
||||
.ion-no-padding,
|
||||
[no-padding] {
|
||||
.ion-no-padding {
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
--padding-top: 0;
|
||||
@ -24,8 +23,7 @@ $margin: var(--ion-margin, 16px);
|
||||
@include padding(0);
|
||||
}
|
||||
|
||||
.ion-padding,
|
||||
[padding] {
|
||||
.ion-padding {
|
||||
--padding-start: #{$padding};
|
||||
--padding-end: #{$padding};
|
||||
--padding-top: #{$padding};
|
||||
@ -34,44 +32,38 @@ $margin: var(--ion-margin, 16px);
|
||||
@include padding($padding);
|
||||
}
|
||||
|
||||
.ion-padding-top,
|
||||
[padding-top] {
|
||||
.ion-padding-top {
|
||||
--padding-top: #{$padding};
|
||||
|
||||
@include padding($padding, null, null, null);
|
||||
}
|
||||
|
||||
.ion-padding-start,
|
||||
[padding-start] {
|
||||
.ion-padding-start {
|
||||
--padding-start: #{$padding};
|
||||
|
||||
@include padding-horizontal($padding, null);
|
||||
}
|
||||
|
||||
.ion-padding-end,
|
||||
[padding-end] {
|
||||
.ion-padding-end {
|
||||
--padding-end: #{$padding};
|
||||
|
||||
@include padding-horizontal(null, $padding);
|
||||
}
|
||||
|
||||
.ion-padding-bottom,
|
||||
[padding-bottom] {
|
||||
.ion-padding-bottom {
|
||||
--padding-bottom: #{$padding};
|
||||
|
||||
@include padding(null, null, $padding, null);
|
||||
}
|
||||
|
||||
.ion-padding-vertical,
|
||||
[padding-vertical] {
|
||||
.ion-padding-vertical {
|
||||
--padding-top: #{$padding};
|
||||
--padding-bottom: #{$padding};
|
||||
|
||||
@include padding($padding, null, $padding, null);
|
||||
}
|
||||
|
||||
.ion-padding-horizontal,
|
||||
[padding-horizontal] {
|
||||
.ion-padding-horizontal {
|
||||
--padding-start: #{$padding};
|
||||
--padding-end: #{$padding};
|
||||
|
||||
@ -82,8 +74,7 @@ $margin: var(--ion-margin, 16px);
|
||||
// Margin
|
||||
// --------------------------------------------------
|
||||
|
||||
.ion-no-margin,
|
||||
[no-margin] {
|
||||
.ion-no-margin {
|
||||
--margin-start: 0;
|
||||
--margin-end: 0;
|
||||
--margin-top: 0;
|
||||
@ -92,8 +83,7 @@ $margin: var(--ion-margin, 16px);
|
||||
@include margin(0);
|
||||
}
|
||||
|
||||
.ion-margin,
|
||||
[margin] {
|
||||
.ion-margin {
|
||||
--margin-start: #{$margin};
|
||||
--margin-end: #{$margin};
|
||||
--margin-top: #{$margin};
|
||||
@ -102,44 +92,38 @@ $margin: var(--ion-margin, 16px);
|
||||
@include margin($margin);
|
||||
}
|
||||
|
||||
.ion-margin-top,
|
||||
[margin-top] {
|
||||
.ion-margin-top {
|
||||
--margin-top: #{$margin};
|
||||
|
||||
@include margin($margin, null, null, null);
|
||||
}
|
||||
|
||||
.ion-margin-start,
|
||||
[margin-start] {
|
||||
.ion-margin-start {
|
||||
--margin-start: #{$margin};
|
||||
|
||||
@include margin-horizontal($margin, null);
|
||||
}
|
||||
|
||||
.ion-margin-end,
|
||||
[margin-end] {
|
||||
.ion-margin-end {
|
||||
--margin-end: #{$margin};
|
||||
|
||||
@include margin-horizontal(null, $margin);
|
||||
}
|
||||
|
||||
.ion-margin-bottom,
|
||||
[margin-bottom] {
|
||||
.ion-margin-bottom {
|
||||
--margin-bottom: #{$margin};
|
||||
|
||||
@include margin(null, null, $margin, null);
|
||||
}
|
||||
|
||||
.ion-margin-vertical,
|
||||
[margin-vertical] {
|
||||
.ion-margin-vertical {
|
||||
--margin-top: #{$margin};
|
||||
--margin-bottom: #{$margin};
|
||||
|
||||
@include margin($margin, null, $margin, null);
|
||||
}
|
||||
|
||||
.ion-margin-horizontal,
|
||||
[margin-horizontal] {
|
||||
.ion-margin-horizontal {
|
||||
--margin-start: #{$margin};
|
||||
--margin-end: #{$margin};
|
||||
|
||||
|
||||
@ -12,43 +12,35 @@
|
||||
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
|
||||
// Provide `[text-{bp}]` attributes for aligning the text based
|
||||
// on the breakpoint
|
||||
.ion-text#{$infix}-center,
|
||||
[text#{$infix}-center] {
|
||||
.ion-text#{$infix}-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-justify,
|
||||
[text#{$infix}-justify] {
|
||||
.ion-text#{$infix}-justify {
|
||||
text-align: justify !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-start,
|
||||
[text#{$infix}-start] {
|
||||
.ion-text#{$infix}-start {
|
||||
text-align: start !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-end,
|
||||
[text#{$infix}-end] {
|
||||
.ion-text#{$infix}-end {
|
||||
text-align: end !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-left,
|
||||
[text#{$infix}-left] {
|
||||
.ion-text#{$infix}-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-right,
|
||||
[text#{$infix}-right] {
|
||||
.ion-text#{$infix}-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-nowrap,
|
||||
[text#{$infix}-nowrap] {
|
||||
.ion-text#{$infix}-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-wrap,
|
||||
[text#{$infix}-wrap] {
|
||||
.ion-text#{$infix}-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,20 +12,17 @@
|
||||
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
|
||||
// Provide `[text-{bp}]` attributes for transforming the text based
|
||||
// on the breakpoint
|
||||
.ion-text#{$infix}-uppercase,
|
||||
[text#{$infix}-uppercase] {
|
||||
.ion-text#{$infix}-uppercase {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-lowercase,
|
||||
[text#{$infix}-lowercase] {
|
||||
.ion-text#{$infix}-lowercase {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
||||
.ion-text#{$infix}-capitalize,
|
||||
[text#{$infix}-capitalize] {
|
||||
.ion-text#{$infix}-capitalize {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user