1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
// 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`,
// `uk-transition-active`
//
// States: `uk-hover`
// `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
$transition-duration: 0.3s !default;
$transition-scale: 1.1 !default;
$transition-slide-small-translate: 10px !default;
$transition-slide-medium-translate: 50px !default;
$transition-slow-duration: 0.7s !default;
/* ========================================================================
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'] {
transition: $transition-duration ease-out;
transition-property: opacity, transform, filter;
}
.uk-transition-toggle:focus { outline: none; }
/*
* Fade
*/
.uk-transition-fade { opacity: 0; }
/* Show */
.uk-transition-toggle:hover [class*='uk-transition-fade'],
.uk-transition-toggle.uk-hover [class*='uk-transition-fade'],
.uk-transition-toggle:focus [class*='uk-transition-fade'],
.uk-transition-active.uk-active [class*='uk-transition-fade'] { opacity: 1; }
/*
* Scale
* Note: Using `scale3d` for better image rendering
*/
[class*='uk-transition-scale'] { opacity: 0; }
.uk-transition-scale-up { transform: scale3d(1,1,1); }
.uk-transition-scale-down { transform: scale3d($transition-scale,$transition-scale,1); }
/* Show */
.uk-transition-toggle:hover .uk-transition-scale-up,
.uk-transition-toggle.uk-hover .uk-transition-scale-up,
.uk-transition-toggle:focus .uk-transition-scale-up,
.uk-transition-active.uk-active .uk-transition-scale-up {
opacity: 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,
.uk-transition-toggle:focus .uk-transition-scale-down,
.uk-transition-active.uk-active .uk-transition-scale-down {
opacity: 1;
transform: scale3d(1,1,1);
}
/*
* Slide
*/
[class*='uk-transition-slide'] { opacity: 0; }
.uk-transition-slide-top { transform: translateY(-100%); }
.uk-transition-slide-bottom { transform: translateY(100%); }
.uk-transition-slide-left { transform: translateX(-100%); }
.uk-transition-slide-right { transform: translateX(100%); }
.uk-transition-slide-top-small { transform: translateY(-$transition-slide-small-translate); }
.uk-transition-slide-bottom-small { transform: translateY($transition-slide-small-translate); }
.uk-transition-slide-left-small { transform: translateX(-$transition-slide-small-translate); }
.uk-transition-slide-right-small { transform: translateX($transition-slide-small-translate); }
.uk-transition-slide-top-medium { transform: translateY(-$transition-slide-medium-translate); }
.uk-transition-slide-bottom-medium { transform: translateY($transition-slide-medium-translate); }
.uk-transition-slide-left-medium { transform: translateX(-$transition-slide-medium-translate); }
.uk-transition-slide-right-medium { transform: translateX($transition-slide-medium-translate); }
/* Show */
.uk-transition-toggle:hover [class*='uk-transition-slide'],
.uk-transition-toggle.uk-hover [class*='uk-transition-slide'],
.uk-transition-toggle:focus [class*='uk-transition-slide'],
.uk-transition-active.uk-active [class*='uk-transition-slide'] {
opacity: 1;
transform: translateX(0) translateY(0);
}
/* Opacity modifier
========================================================================== */
.uk-transition-opaque { opacity: 1; }
/* Duration modifiers
========================================================================== */
.uk-transition-slow { transition-duration: $transition-slow-duration; }
// Hooks
// ========================================================================
@if(mixin-exists(hook-transition-misc)) {@include hook-transition-misc();}
// @mixin hook-transition-misc(){}
|
