390 lines
12 KiB
Plaintext
390 lines
12 KiB
Plaintext
/*!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*/
|
|
/* animation classes */
|
|
|
|
@duration: 350ms;
|
|
|
|
.k-fx-end .k-fx-next,
|
|
.k-fx-end .k-fx-current {
|
|
.transition(all @duration ease-out);
|
|
}
|
|
|
|
.k-fx {
|
|
position: relative;
|
|
|
|
.k-fx-current {
|
|
z-index: 0;
|
|
}
|
|
|
|
.k-fx-next {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.k-fx-hidden,
|
|
.k-fx-hidden * {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.k-fx-reverse {
|
|
.k-fx-current {
|
|
z-index: 1;
|
|
}
|
|
|
|
.k-fx-next {
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
/* Zoom */
|
|
|
|
.k-fx-zoom {
|
|
&.k-fx-start .k-fx-next {
|
|
.transform(scale(0)) !important;
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next {
|
|
.transform(scale(1)) !important;
|
|
}
|
|
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-next,
|
|
&.k-fx-end .k-fx-next {
|
|
.transform(scale(1)) !important;
|
|
}
|
|
|
|
&.k-fx-start .k-fx-current {
|
|
.transform(scale(1)) !important;
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(scale(0)) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Fade */
|
|
.k-fx-fade {
|
|
&.k-fx-start .k-fx-next {
|
|
will-change: opacity;
|
|
opacity: 0;
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-current {
|
|
will-change: opacity;
|
|
opacity: 1;
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Slide */
|
|
.k-fx-slide {
|
|
&.k-fx-end .k-fx-next .km-content,
|
|
&.k-fx-end .k-fx-next .km-header,
|
|
&.k-fx-end .k-fx-next .km-footer,
|
|
&.k-fx-end .k-fx-current .km-content,
|
|
&.k-fx-end .k-fx-current .km-header,
|
|
&.k-fx-end .k-fx-current .km-footer
|
|
{
|
|
.transition(all @duration ease-out);
|
|
}
|
|
|
|
/* left */
|
|
&.k-fx-start .k-fx-next .km-content {
|
|
will-change: transform;
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-start .k-fx-next .km-header,
|
|
&.k-fx-start .k-fx-next .km-footer {
|
|
will-change: opacity;
|
|
opacity: 0;
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current .km-content {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next .km-header,
|
|
&.k-fx-end .k-fx-next .km-footer {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* left reverse */
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-current .km-content {
|
|
will-change: transform;
|
|
.transform(translatex(0));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current .km-content {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-start .k-fx-next .km-content {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next .km-content {
|
|
.transform(translatex(0));
|
|
}
|
|
|
|
&.k-fx-start .k-fx-current .km-header,
|
|
&.k-fx-start .k-fx-current .km-footer {
|
|
will-change: opacity;
|
|
opacity: 1;
|
|
}
|
|
|
|
&.k-fx-start .k-fx-next .km-header,
|
|
&.k-fx-start .k-fx-next .km-footer {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current .km-header,
|
|
&.k-fx-end .k-fx-current .km-footer {
|
|
opacity: 0;
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next .km-header,
|
|
&.k-fx-end .k-fx-next .km-footer {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* right */
|
|
&.k-fx-right {
|
|
&.k-fx-start .k-fx-next .km-content {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current .km-content {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
/* right reverse */
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-current .km-content {
|
|
.transform(translatex(0));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current .km-content {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-start .k-fx-next .km-content {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next .km-content {
|
|
.transform(translatex(0%));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Tile */
|
|
.k-fx-tile {
|
|
/* left */
|
|
&.k-fx-start .k-fx-next {
|
|
will-change: transform;
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
/* left reverse */
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-current {
|
|
will-change: transform;
|
|
.transform(translatex(0));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-start .k-fx-next {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next {
|
|
.transform(translatex(0));
|
|
}
|
|
}
|
|
|
|
/* right */
|
|
&.k-fx-right {
|
|
&.k-fx-start .k-fx-next {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
/* right reverse */
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-current {
|
|
.transform(translatex(0));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-start .k-fx-next {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next {
|
|
.transform(translatex(0%));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Tile */
|
|
.k-fx-tile {
|
|
/* left */
|
|
&.k-fx-start .k-fx-next {
|
|
will-change: transform;
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
/* left reverse */
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-current {
|
|
will-change: transform;
|
|
.transform(translatex(0));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-start .k-fx-next {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next {
|
|
.transform(translatex(0));
|
|
}
|
|
}
|
|
|
|
/* right */
|
|
&.k-fx-right {
|
|
&.k-fx-start .k-fx-next {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
/* right reverse */
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-current {
|
|
.transform(translatex(0));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-start .k-fx-next {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-end .k-fx-next {
|
|
.transform(translatex(0%));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Overlay */
|
|
.k-fx.k-fx-overlay {
|
|
&.k-fx-start .k-fx-next,
|
|
&.k-fx-left.k-fx-start .k-fx-next {
|
|
will-change: transform;
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-right.k-fx-start .k-fx-next {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-up.k-fx-start .k-fx-next {
|
|
.transform(translatey(100%));
|
|
}
|
|
|
|
&.k-fx-down.k-fx-start .k-fx-next {
|
|
.transform(translatey(-100%));
|
|
}
|
|
|
|
&.k-fx-reverse {
|
|
&.k-fx-start .k-fx-next {
|
|
.transform(none);
|
|
}
|
|
|
|
&.k-fx-start .k-fx-current {
|
|
will-change: transform;
|
|
.transform(none);
|
|
}
|
|
|
|
&.k-fx-end .k-fx-current,
|
|
&.k-fx-left.k-fx-end .k-fx-current {
|
|
.transform(translatex(100%));
|
|
}
|
|
|
|
&.k-fx-right.k-fx-end .k-fx-current {
|
|
.transform(translatex(-100%));
|
|
}
|
|
|
|
&.k-fx-up.k-fx-end .k-fx-current {
|
|
.transform(translatey(100%));
|
|
}
|
|
|
|
&.k-fx-down.k-fx-end .k-fx-current {
|
|
.transform(translatey(-100%));
|
|
}
|
|
}
|
|
}
|