D-Net

// Name:            Transition

// Description:     Utilities for transitions

//

// Component:       `uk-transition-*`

//

// Modifiers:       `uk-transition-fade`

//                  `uk-transition-scale-up`

//                  `uk-transition-scale-down`

//                  `uk-transition-slide-top-*`

//                  `uk-transition-slide-bottom-*`

//                  `uk-transition-slide-left-*`

//                  `uk-transition-slide-right-*`

//                  `uk-transition-opaque`

//                  `uk-transition-slow`

//

// Sub-objects:     `uk-transition-toggle`

//

// States:          `uk-hover`

//                  `uk-active`

//

// ========================================================================

// Variables

// ========================================================================

@transition-duration:                           0.3s;

@transition-scale:                              1.1;

@transition-slide-small-translate:              10px;

@transition-slide-medium-translate:             50px;

@transition-slow-duration:                      0.7s;

/* ========================================================================

   Component: Transition

 ========================================================================== */

/*

 * Using multiple selectors to exclude `uk-transition-toggle`

 * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform`

 *       Just put the transition in an extra `div`

 */

.uk-transition-fade,

[class*='uk-transition-scale'],

[class*='uk-transition-slide'] {

    -webkit-transition: @transition-duration ease-out;

    transition: @transition-duration ease-out;

    -webkit-transition-property: opacity, transform, filter;

    transition-property: opacity, transform, filter;

}

/*

 * Fade

 */

.uk-transition-fade { opacity: 0; }

.uk-transition-toggle:hover [class*='uk-transition-fade'],

.uk-transition-toggle.uk-hover [class*='uk-transition-fade'] { opacity: 1; }

/*

 * Scale

 * Note: Using `scale3d` for better image rendering

 */

[class*='uk-transition-scale'] { opacity: 0; }

.uk-transition-scale-up {

    -webkit-transform: scale3d(1,1,1);

    transform: scale3d(1,1,1);

}

.uk-transition-toggle:hover .uk-transition-scale-up,

.uk-transition-toggle.uk-hover .uk-transition-scale-up {

    opacity: 1;

    -webkit-transform: scale3d(@transition-scale,@transition-scale,1);

    transform: scale3d(@transition-scale,@transition-scale,1);

}

.uk-transition-scale-down {

    -webkit-transform: scale3d(@transition-scale,@transition-scale,1);

    transform: scale3d(@transition-scale,@transition-scale,1);

}

.uk-transition-toggle:hover .uk-transition-scale-down,

.uk-transition-toggle.uk-hover .uk-transition-scale-down {

    opacity: 1;

    -webkit-transform: scale3d(1,1,1);

    transform: scale3d(1,1,1);

}

/*

 * Slide

 */

[class*='uk-transition-slide'] { opacity: 0; }

.uk-transition-slide-top {

    -webkit-transform: translateY(-100%);

    transform: translateY(-100%);

}

.uk-transition-slide-bottom {

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

}

.uk-transition-slide-left {

    -webkit-transform: translateX(-100%);

    transform: translateX(-100%);

}

.uk-transition-slide-right {

    -webkit-transform: translateX(100%);

    transform: translateX(100%);

}

.uk-transition-slide-top-small {

    -webkit-transform: translateY(-@transition-slide-small-translate);

    transform: translateY(-@transition-slide-small-translate);

}

.uk-transition-slide-bottom-small {

    -webkit-transform: translateY(@transition-slide-small-translate);

    transform: translateY(@transition-slide-small-translate);

}

.uk-transition-slide-left-small {

    -webkit-transform: translateX(-@transition-slide-small-translate);

    transform: translateX(-@transition-slide-small-translate);

}

.uk-transition-slide-right-small {

    -webkit-transform: translateX(@transition-slide-small-translate);

    transform: translateX(@transition-slide-small-translate);

}

.uk-transition-slide-top-medium {

    -webkit-transform: translateY(-@transition-slide-medium-translate);

    transform: translateY(-@transition-slide-medium-translate);

}

.uk-transition-slide-bottom-medium {

    -webkit-transform: translateY(@transition-slide-medium-translate);

    transform: translateY(@transition-slide-medium-translate);

}

.uk-transition-slide-left-medium {

    -webkit-transform: translateX(-@transition-slide-medium-translate);

    transform: translateX(-@transition-slide-medium-translate);

}

.uk-transition-slide-right-medium {

    -webkit-transform: translateX(@transition-slide-medium-translate);

    transform: translateX(@transition-slide-medium-translate);

}

/* Hover */

.uk-transition-toggle:hover [class*='uk-transition-slide'],

.uk-transition-toggle.uk-hover [class*='uk-transition-slide'] {

    opacity: 1;

    -webkit-transform: translateX(0) translateY(0);

    transform: translateX(0) translateY(0);

}

/* Opacity modifier

========================================================================== */

.uk-transition-opaque { opacity: 1; }

/* Duration modifiers

========================================================================== */

.uk-transition-slow { transition-duration: @transition-slow-duration; }

// Hooks

// ========================================================================

.hook-transition-misc;

.hook-transition-misc() {}