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:
Brandy Carney
2018-03-20 12:49:17 -04:00
parent f578122d15
commit b49e9eb027
15 changed files with 25 additions and 23 deletions

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;

View File

@ -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"`.

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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"`.

View File

@ -21,7 +21,7 @@ export const SPINNERS: SpinnerConfigs = {
}
},
'lines-sm': {
'lines-small': {
dur: 1000,
lines: 12,
fn: (dur: number, index: number, total: number) => {

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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>