@progress/kendo-theme-fluent 8.1.0-dev.0 → 8.1.0-dev.2

package/scss/core/helpers/_animations.scss

@@ -1,706 +0,0 @@
-// Animation container
-.k-animation-container {
-    position: absolute;
-    overflow: hidden;
-    z-index: 100;
-
-    &-fixed {
-        position: fixed;
-    }
-
-    &-relative {
-        position: relative;
-        display: inline-block;
-    }
-}
-
-
-// Effects
-.k-push-right {
-    &-enter,
-    &-appear {
-        transform: translate(-100%, 0);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: translate(0, 0);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: translate(0, 0);
-    }
-
-    &-exit-active {
-        transform: translate(100%, 0);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-push-left {
-    &-enter,
-    &-appear {
-        transform: translate(100%, 0);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: translate(0, 0);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: translate(0, 0);
-    }
-
-    &-exit-active {
-        transform: translate(-100%, 0);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-push-down {
-    &-enter,
-    &-appear {
-        transform: translate(0, -100%);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: translate(0, 0);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: translate(0, 0);
-    }
-
-    &-exit-active {
-        transform: translate(0, 100%);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-push-up {
-    &-enter,
-    &-appear {
-        transform: translate(0, 100%);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: translate(0, 0);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: translate(0, 0);
-    }
-
-    &-exit-active {
-        transform: translate(0, -100%);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-expand-vertical {
-    &-enter,
-    &-appear {
-        transform: scaleY(0);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: scaleY(1);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: scaleY(1);
-    }
-
-    &-exit-active {
-        transform: scaleY(0);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-expand-horizontal {
-    &-enter,
-    &-appear {
-        transform: scaleX(0);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: scaleX(1);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: scaleX(1);
-    }
-
-    &-exit-active {
-        transform: scaleX(0);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-fade {
-    &-enter,
-    &-appear {
-        opacity: 0;
-    }
-
-    &-enter-active,
-    &-appear-active {
-        opacity: 1;
-        transition: opacity 500ms ease-in-out;
-    }
-
-    &-exit {
-        opacity: 1;
-    }
-
-    &-exit-active {
-        opacity: 0;
-        transition: opacity 500ms ease-in-out;
-    }
-
-    &-exit-active + &-exit-active,
-    &-enter-active + &-enter-active {
-        display: none;
-    }
-}
-
-.k-zoom-in {
-    &-enter,
-    &-appear {
-        opacity: 0;
-        transform: scale(0);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        opacity: 1;
-        transform: scale(1);
-        transition: transform, opacity 300ms ease-in-out;
-    }
-
-    &-exit {
-        opacity: 1;
-        transform: scale(1);
-    }
-
-    &-exit-active {
-        opacity: 0;
-        transform: scale(2);
-        transition: transform, opacity 300ms ease-in-out;
-    }
-}
-
-.k-zoom-out {
-    &-enter,
-    &-appear {
-        opacity: 0;
-        transform: scale(2);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        opacity: 1;
-        transform: scale(1);
-        transition: transform, opacity 300ms ease-in-out;
-    }
-
-    &-exit {
-        opacity: 1;
-        transform: scale(1);
-    }
-
-    &-exit-active {
-        opacity: 0;
-        transform: scale(0);
-        transition: transform, opacity 300ms ease-in-out;
-    }
-}
-
-.k-slide-in {
-    &-appear {
-        opacity: .1;
-        transform: translate(0, -3em);
-
-        .k-centered {
-            transform: translate(-50%, -60%);
-        }
-    }
-
-    &-appear-active {
-        opacity: 1;
-        transform: translate(0, 0);
-        transition: transform .3s cubic-bezier(.2, .6, .4, 1), opacity .3s cubic-bezier(.2, 1, .2, 1);
-
-        .k-centered {
-            transform: translate(-50%, -50%);
-        }
-    }
-}
-
-.k-slide-down {
-    &-enter,
-    &-appear {
-        transform: translateY(-100%);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: translateY(0);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: translateY(0);
-    }
-
-    &-exit-active {
-        transform: translateY(-100%);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-slide-up {
-    &-enter,
-    &-appear {
-        transform: translateY(100%);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: translateY(0);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: translateY(0);
-    }
-
-    &-exit-active {
-        transform: translateY(100%);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-slide-right {
-    &-enter,
-    &-appear {
-        transform: translateX(-100%);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: translateX(0);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: translateX(0);
-    }
-
-    &-exit-active {
-        transform: translateX(-100%);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-slide-left {
-    &-enter,
-    &-appear {
-        transform: translateX(100%);
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transform: translateX(0);
-        transition: transform 300ms ease-in-out;
-    }
-
-    &-exit {
-        transform: translateX(0);
-    }
-
-    &-exit-active {
-        transform: translateX(100%);
-        transition: transform 300ms ease-in-out;
-    }
-}
-
-.k-reveal-vertical {
-    &-enter,
-    &-appear {
-        max-height: 0;
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transition: max-height 300ms ease-in-out;
-    }
-
-    &-exit-active {
-        // override any max-height set to element to allow animation
-        max-height: 0 !important; // stylelint-disable-line declaration-no-important
-        transition: max-height 300ms ease-in-out;
-    }
-}
-
-.k-reveal-horizontal {
-    &-enter,
-    &-appear {
-        max-width: 0;
-    }
-
-    &-enter-active,
-    &-appear-active {
-        transition: max-width 300ms ease-in-out;
-    }
-
-    &-exit-active {
-        // override any max-height set to element to allow animation
-        max-width: 0 !important; // stylelint-disable-line declaration-no-important
-        transition: max-width 300ms ease-in-out;
-    }
-}
-
-
-// FX
-$fx-duration: 350ms;
-
-.k-fx-end .k-fx-next,
-.k-fx-end .k-fx-current {
-    transition: all $fx-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; // stylelint-disable-line declaration-no-important
-}
-
-.k-fx-reverse {
-    .k-fx-current {
-        z-index: 1;
-    }
-
-    .k-fx-next {
-        z-index: 0;
-    }
-}
-
-// Zoom
-// stylelint-disable declaration-no-important
-.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;
-        }
-    }
-}
-// stylelint-enable declaration-no-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 .k-content,
-    &.k-fx-end .k-fx-next .k-header,
-    &.k-fx-end .k-fx-next .k-footer,
-    &.k-fx-end .k-fx-current .k-content,
-    &.k-fx-end .k-fx-current .k-header,
-    &.k-fx-end .k-fx-current .k-footer,
-    &.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 $fx-duration ease-out;
-    }
-
-    // left
-    &.k-fx-start .k-fx-next .k-content,
-    &.k-fx-start .k-fx-next .km-content {
-        will-change: transform;
-        transform: translateX(100%);
-    }
-
-    &.k-fx-start .k-fx-next .k-header,
-    &.k-fx-start .k-fx-next .k-footer,
-    &.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 .k-content,
-    &.k-fx-end .k-fx-current .km-content {
-        transform: translateX(-100%);
-    }
-
-    &.k-fx-end .k-fx-next .k-header,
-    &.k-fx-end .k-fx-next .k-footer,
-    &.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 .k-content,
-        &.k-fx-start .k-fx-current .km-content {
-            will-change: transform;
-            transform: translateX(0);
-        }
-
-        &.k-fx-end .k-fx-current .k-content,
-        &.k-fx-end .k-fx-current .km-content {
-            transform: translateX(100%);
-        }
-
-        &.k-fx-start .k-fx-next .k-content,
-        &.k-fx-start .k-fx-next .km-content {
-            transform: translateX(-100%);
-        }
-
-        &.k-fx-end .k-fx-next .k-content,
-        &.k-fx-end .k-fx-next .km-content {
-            transform: translateX(0);
-        }
-
-        &.k-fx-start .k-fx-current .k-header,
-        &.k-fx-start .k-fx-current .k-footer,
-        &.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 .k-header,
-        &.k-fx-start .k-fx-next .k-footer,
-        &.k-fx-start .k-fx-next .km-header,
-        &.k-fx-start .k-fx-next .km-footer {
-            opacity: 1;
-        }
-
-        &.k-fx-end .k-fx-current .k-header,
-        &.k-fx-end .k-fx-current .k-footer,
-        &.k-fx-end .k-fx-current .km-header,
-        &.k-fx-end .k-fx-current .km-footer {
-            opacity: 0;
-        }
-
-        &.k-fx-end .k-fx-next .k-header,
-        &.k-fx-end .k-fx-next .k-footer,
-        &.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 .k-content,
-        &.k-fx-start .k-fx-next .km-content {
-            transform: translateX(-100%);
-        }
-
-        &.k-fx-end .k-fx-current .k-content,
-        &.k-fx-end .k-fx-current .km-content {
-            transform: translateX(100%);
-        }
-
-        // right reverse
-        &.k-fx-reverse {
-            &.k-fx-start .k-fx-current .k-content,
-            &.k-fx-start .k-fx-current .km-content {
-                transform: translateX(0);
-            }
-
-            &.k-fx-end .k-fx-current .k-content,
-            &.k-fx-end .k-fx-current .km-content {
-                transform: translateX(-100%);
-            }
-
-            &.k-fx-start .k-fx-next .k-content,
-            &.k-fx-start .k-fx-next .km-content {
-                transform: translateX(100%);
-            }
-
-            &.k-fx-end .k-fx-next .k-content,
-            &.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%);
-            }
-        }
-    }
-}
-
-// 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%);
-        }
-    }
-}

package/scss/core/helpers/_asp-fallback.scss

@@ -1,4 +0,0 @@
-.k-theme-test-class,
-.k-common-test-class {
-    opacity: 0;
-}

package/scss/core/helpers/_extra.scss

@@ -1,22 +0,0 @@
-// Hidden
-.k-hidden {
-    display: none !important; // stylelint-disable-line declaration-no-important
-}
-
-
-// RTL
-.k-rtl {
-    direction: rtl;
-}
-
-
-/// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
-/// @name. k-sr-only
-/// @group extra
-.k-sr-only {
-    position: absolute;
-    left: -1px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-}