mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
refactor(spinner): rename lines-sm to lines-small
also adds this spinner class to the infinite scroll to override the color
This commit is contained in:
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-sm-ios line,
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle {
|
||||
stroke: $infinite-scroll-ios-loading-color;
|
||||
}
|
||||
|
@ -5,6 +5,8 @@
|
||||
color: $infinite-scroll-md-loading-text-color;
|
||||
}
|
||||
|
||||
.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,
|
||||
.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,
|
||||
.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle {
|
||||
stroke: $infinite-scroll-md-loading-color;
|
||||
}
|
||||
|
@ -49,7 +49,7 @@
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-ios .spinner-lines-ios line,
|
||||
.loading-ios .spinner-lines-sm-ios line {
|
||||
.loading-ios .spinner-lines-small-ios line {
|
||||
stroke: $loading-ios-spinner-lines-color;
|
||||
}
|
||||
|
||||
|
@ -36,7 +36,7 @@
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-md .spinner-lines-md line,
|
||||
.loading-md .spinner-lines-sm-md line {
|
||||
.loading-md .spinner-lines-small-md line {
|
||||
stroke: $loading-md-spinner-lines-color;
|
||||
}
|
||||
|
||||
|
@ -77,7 +77,7 @@ export class Loading implements OverlayInterface {
|
||||
@Prop() showBackdrop = true;
|
||||
|
||||
/**
|
||||
* The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`,
|
||||
* The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
|
||||
* `"bubbles"`, `"circles"`, `"crescent"`.
|
||||
*/
|
||||
@Prop() spinner: string;
|
||||
|
@ -104,7 +104,7 @@ If true, a backdrop will be displayed behind the loading indicator. Defaults to
|
||||
|
||||
string
|
||||
|
||||
The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`,
|
||||
The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
|
||||
`"bubbles"`, `"circles"`, `"crescent"`.
|
||||
|
||||
|
||||
@ -195,7 +195,7 @@ If true, a backdrop will be displayed behind the loading indicator. Defaults to
|
||||
|
||||
string
|
||||
|
||||
The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`,
|
||||
The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
|
||||
`"bubbles"`, `"circles"`, `"crescent"`.
|
||||
|
||||
|
||||
|
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.refresher-ios .refresher-refreshing .spinner-lines-ios line,
|
||||
.refresher-ios .refresher-refreshing .spinner-lines-sm-ios line,
|
||||
.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,
|
||||
.refresher-ios .refresher-refreshing .spinner-crescent circle {
|
||||
stroke: $refresher-ios-icon-color;
|
||||
}
|
||||
|
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.refresher-md .refresher-refreshing .spinner-lines-md line,
|
||||
.refresher-md .refresher-refreshing .spinner-lines-sm-md line,
|
||||
.refresher-md .refresher-refreshing .spinner-lines-small-md line,
|
||||
.refresher-md .refresher-refreshing .spinner-crescent circle {
|
||||
stroke: $refresher-md-icon-color;
|
||||
}
|
||||
|
@ -12,7 +12,7 @@ The default spinner to use is based on the platform. The default spinner for `io
|
||||
<ion-spinner name="lines"></ion-spinner>
|
||||
|
||||
<!-- Lines Small -->
|
||||
<ion-spinner name="lines-sm"></ion-spinner>
|
||||
<ion-spinner name="lines-small"></ion-spinner>
|
||||
|
||||
<!-- Dots -->
|
||||
<ion-spinner name="dots"></ion-spinner>
|
||||
@ -66,7 +66,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
|
||||
string
|
||||
|
||||
The name of the SVG spinner to use. If a name is not provided, the platform's default
|
||||
spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`,
|
||||
spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`,
|
||||
`"circles"`, `"crescent"`.
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
|
||||
string
|
||||
|
||||
The name of the SVG spinner to use. If a name is not provided, the platform's default
|
||||
spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`,
|
||||
spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`,
|
||||
`"circles"`, `"crescent"`.
|
||||
|
||||
|
||||
|
@ -21,7 +21,7 @@ export const SPINNERS: SpinnerConfigs = {
|
||||
}
|
||||
},
|
||||
|
||||
'lines-sm': {
|
||||
'lines-small': {
|
||||
dur: 1000,
|
||||
lines: 12,
|
||||
fn: (dur: number, index: number, total: number) => {
|
||||
|
@ -5,7 +5,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.spinner-lines-ios line,
|
||||
.spinner-lines-sm-ios line {
|
||||
.spinner-lines-small-ios line {
|
||||
stroke: $spinner-ios-lines-color;
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
.spinner-ios-#{$color-name} {
|
||||
|
||||
&.spinner-lines line,
|
||||
&.spinner-lines-sm line,
|
||||
&.spinner-lines-small line,
|
||||
&.spinner-crescent circle {
|
||||
stroke: $color-base;
|
||||
}
|
||||
|
@ -5,7 +5,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.spinner-lines-md line,
|
||||
.spinner-lines-sm-md line {
|
||||
.spinner-lines-small-md line {
|
||||
stroke: $spinner-md-lines-color;
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
.spinner-md-#{$color-name} {
|
||||
|
||||
&.spinner-lines line,
|
||||
&.spinner-lines-sm line,
|
||||
&.spinner-lines-small line,
|
||||
&.spinner-crescent circle {
|
||||
stroke: $color-base;
|
||||
}
|
||||
|
@ -27,17 +27,17 @@ ion-spinner.spinner-paused svg {
|
||||
}
|
||||
|
||||
|
||||
// Spinner: lines / lines-sm
|
||||
// Spinner: lines / lines-small
|
||||
// --------------------------------------------------
|
||||
|
||||
.spinner-lines line,
|
||||
.spinner-lines-sm line {
|
||||
.spinner-lines-small line {
|
||||
stroke-width: 4px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.spinner-lines svg,
|
||||
.spinner-lines-sm svg {
|
||||
.spinner-lines-small svg {
|
||||
animation: spinner-fade-out 1s linear infinite;
|
||||
}
|
||||
|
||||
|
@ -38,7 +38,7 @@ export class Spinner {
|
||||
|
||||
/**
|
||||
* The name of the SVG spinner to use. If a name is not provided, the platform's default
|
||||
* spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`,
|
||||
* spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`,
|
||||
* `"circles"`, `"crescent"`.
|
||||
*/
|
||||
@Prop() name: string;
|
||||
@ -65,8 +65,8 @@ export class Spinner {
|
||||
name = 'lines';
|
||||
} else if (name === 'ios-small') {
|
||||
// deprecation warning, renamed in v4
|
||||
console.warn(`spinner "ios-small" has been renamed to "lines-sm"`);
|
||||
name = 'lines-sm';
|
||||
console.warn(`spinner "ios-small" has been renamed to "lines-small"`);
|
||||
name = 'lines-small';
|
||||
}
|
||||
return name;
|
||||
}
|
||||
|
@ -29,7 +29,7 @@
|
||||
Show Lines
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="lines-sm"></ion-spinner>
|
||||
<ion-spinner slot="start" name="lines-small"></ion-spinner>
|
||||
Show Lines Small
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
|
Reference in New Issue
Block a user