mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
2273fb5d47
* feat(rtl): add translate3d support for directions * feat(rtl): add transform-origin support for directions * fix(transform): add missing origins * fix(transform): when given a percentage, calc on rtl * fix(transform-origin): be same as before * fix(translate3d): no double minus * fix(translate3d): use transform instead of cloning code * style(scss-lint): remove empty line * fix(merge): fix bad merge * refactor(transform-origin): nicer logic * style(): add eof line * fix(transform): remove unneeded mixin * feat(rtl): add transform mixin and str-split function * Merge remote-tracking branch 'remotes/upstream/rtl-transform' into transform-rtl # Conflicts: # src/themes/ionic.mixins.scss * fix(transform): fix string comparison
113 lines
2.0 KiB
SCSS
113 lines
2.0 KiB
SCSS
@import "../../themes/ionic.globals";
|
|
|
|
// Spinners
|
|
// --------------------------------------------------
|
|
|
|
ion-spinner {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
ion-spinner svg {
|
|
@include position(0, null, null, 0);
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
ion-spinner.spinner-paused svg {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
|
|
// Spinner: ios / ios-small
|
|
// --------------------------------------------------
|
|
|
|
.spinner-ios line,
|
|
.spinner-ios-small line {
|
|
stroke-width: 4px;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.spinner-ios svg,
|
|
.spinner-ios-small svg {
|
|
animation: spinner-fade-out 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Spinner: bubbles
|
|
// --------------------------------------------------
|
|
|
|
.spinner-bubbles svg {
|
|
animation: spinner-scale-out 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Spinner: circles
|
|
// --------------------------------------------------
|
|
|
|
.spinner-circles svg {
|
|
animation: spinner-fade-out 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Spinner: crescent
|
|
// --------------------------------------------------
|
|
|
|
.spinner-crescent circle {
|
|
fill: transparent;
|
|
stroke-width: 4px;
|
|
stroke-dasharray: 128px;
|
|
stroke-dashoffset: 82px;
|
|
}
|
|
|
|
.spinner-crescent svg {
|
|
animation: spinner-rotate 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Spinner: dots
|
|
// --------------------------------------------------
|
|
|
|
.spinner-dots circle {
|
|
stroke-width: 0;
|
|
}
|
|
|
|
.spinner-dots svg {
|
|
@include transform-origin(center);
|
|
|
|
animation: spinner-dots 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Animation Keyframes
|
|
// --------------------------------------------------
|
|
|
|
@keyframes spinner-fade-out {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes spinner-scale-out {
|
|
0% { transform: scale(1, 1); }
|
|
100% { transform: scale(0, 0); }
|
|
}
|
|
|
|
@keyframes spinner-rotate {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spinner-dots {
|
|
0% { opacity: .9; transform: scale(1, 1); }
|
|
50% { opacity: .3; transform: scale(.4, .4); }
|
|
100% { opacity: .9; transform: scale(1, 1); }
|
|
}
|