uikit 3.13.10 → 3.13.11-dev.1296bb84c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/CHANGELOG.md +33 -1
  2. package/dist/css/uikit-core-rtl.css +49 -8
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +49 -8
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +49 -6
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +49 -6
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +7 -3
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +7 -3
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +21 -12
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +21 -12
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +2 -2
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +21 -12
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +2 -2
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +62 -30
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +422 -299
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +469 -307
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/components/slider.js +1 -1
  44. package/src/js/components/sortable.js +2 -3
  45. package/src/js/components/tooltip.js +38 -3
  46. package/src/js/core/cover.js +27 -14
  47. package/src/js/core/drop.js +40 -11
  48. package/src/js/core/height-match.js +1 -1
  49. package/src/js/core/margin.js +9 -2
  50. package/src/js/core/navbar.js +18 -6
  51. package/src/js/core/scrollspy-nav.js +6 -11
  52. package/src/js/core/sticky.js +55 -21
  53. package/src/js/mixin/media.js +12 -9
  54. package/src/js/mixin/modal.js +6 -2
  55. package/src/js/mixin/parallax.js +8 -3
  56. package/src/js/mixin/position.js +24 -24
  57. package/src/js/uikit-core.js +0 -4
  58. package/src/js/util/lang.js +34 -42
  59. package/src/js/util/position.js +180 -125
  60. package/src/js/util/viewport.js +42 -22
  61. package/src/less/components/drop.less +0 -1
  62. package/src/less/components/dropdown.less +11 -1
  63. package/src/less/components/icon.less +3 -0
  64. package/src/less/components/nav.less +23 -0
  65. package/src/less/components/navbar.less +26 -2
  66. package/src/less/components/search.less +2 -0
  67. package/src/less/components/sticky.less +8 -3
  68. package/src/less/components/utility.less +1 -0
  69. package/src/less/theme/dropdown.less +4 -0
  70. package/src/less/theme/nav.less +6 -0
  71. package/src/less/theme/navbar.less +4 -0
  72. package/src/less/theme/search.less +6 -0
  73. package/src/scss/components/drop.scss +0 -1
  74. package/src/scss/components/dropdown.scss +11 -1
  75. package/src/scss/components/icon.scss +3 -0
  76. package/src/scss/components/nav.scss +23 -0
  77. package/src/scss/components/navbar.scss +26 -2
  78. package/src/scss/components/search.scss +2 -0
  79. package/src/scss/components/sticky.scss +8 -3
  80. package/src/scss/components/utility.scss +1 -0
  81. package/src/scss/mixins-theme.scss +5 -0
  82. package/src/scss/mixins.scss +5 -0
  83. package/src/scss/theme/dropdown.scss +4 -0
  84. package/src/scss/theme/nav.scss +6 -0
  85. package/src/scss/theme/navbar.scss +4 -0
  86. package/src/scss/theme/search.scss +6 -0
  87. package/src/scss/variables-theme.scss +5 -1
  88. package/src/scss/variables.scss +5 -1
  89. package/tests/alert.html +1 -1
  90. package/tests/animation.html +216 -214
  91. package/tests/drop.html +154 -80
  92. package/tests/dropdown.html +16 -2
  93. package/tests/nav.html +27 -0
  94. package/tests/navbar.html +56 -5
  95. package/tests/parallax.html +5 -5
  96. package/tests/position.html +38 -39
  97. package/tests/sticky-navbar.html +6 -6
  98. package/tests/sticky-parallax.html +29 -13
  99. package/tests/sticky.html +300 -49
  100. package/src/js/core/core.js +0 -25
package/src/scss/theme/nav.scss CHANGED
@@ -7,6 +7,8 @@
7
7
  // Variables
8
8
  // ========================================================================
9
9
 
10
+ $nav-default-subtitle-font-size: 12px !default;
11
+
10
12
  //
11
13
  // New
12
14
  //
@@ -49,6 +51,8 @@ $nav-default-font-size: $global-small-font-size !defaul
49
51
 
50
52
  // @mixin hook-nav-default-item-active(){}
51
53
 
54
+ // @mixin hook-nav-default-subtitle(){}
55
+
52
56
  // @mixin hook-nav-default-header(){}
53
57
 
54
58
  // @mixin hook-nav-default-divider(){}
@@ -65,6 +69,8 @@ $nav-default-font-size: $global-small-font-size !defaul
65
69
 
66
70
  // @mixin hook-nav-primary-item-active(){}
67
71
 
72
+ // @mixin hook-nav-primary-subtitle(){}
73
+
68
74
  // @mixin hook-nav-primary-header(){}
69
75
 
70
76
  // @mixin hook-nav-primary-divider(){}
package/src/scss/theme/navbar.scss CHANGED
@@ -14,6 +14,8 @@ $navbar-dropdown-padding: 25px !default;
14
14
  $navbar-dropdown-background: $global-background !default;
15
15
  $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
16
16
 
17
+ $navbar-dropdown-nav-subtitle-font-size: 12px !default;
18
+
17
19
  //
18
20
  // New
19
21
  //
@@ -105,6 +107,8 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
105
107
 
106
108
  // @mixin hook-navbar-dropdown-nav-item-hover(){}
107
109
 
110
+ // @mixin hook-navbar-dropdown-nav-subtitle(){}
111
+
108
112
  // @mixin hook-navbar-dropdown-nav-header(){}
109
113
 
110
114
  // @mixin hook-navbar-dropdown-nav-divider(){}
package/src/scss/theme/search.scss CHANGED
@@ -25,6 +25,12 @@ $search-default-focus-border: $global-primary-background
25
25
  // @mixin hook-search-input(){}
26
26
 
27
27
 
28
+ // Icon
29
+ // ========================================================================
30
+
31
+ // @mixin hook-search-icon(){}
32
+
33
+
28
34
  // Default modifiers
29
35
  // ========================================================================
30
36
 
package/src/scss/variables-theme.scss CHANGED
@@ -376,6 +376,7 @@ $dropdown-background: $global-background !default;
376
376
  $dropdown-color: $global-color !default;
377
377
  $dropdown-nav-item-color: $global-muted-color !default;
378
378
  $dropdown-nav-item-hover-color: $global-color !default;
379
+ $dropdown-nav-subtitle-font-size: 12px !default;
379
380
  $dropdown-nav-header-color: $global-emphasis-color !default;
380
381
  $dropdown-nav-divider-border-width: $global-border-width !default;
381
382
  $dropdown-nav-divider-border: $global-border !default;
@@ -684,6 +685,7 @@ $nav-divider-margin-horizontal: 0 !default;
684
685
  $nav-default-item-color: $global-muted-color !default;
685
686
  $nav-default-item-hover-color: $global-color !default;
686
687
  $nav-default-item-active-color: $global-emphasis-color !default;
688
+ $nav-default-subtitle-font-size: 12px !default;
687
689
  $nav-default-header-color: $global-emphasis-color !default;
688
690
  $nav-default-divider-border-width: $global-border-width !default;
689
691
  $nav-default-divider-border: $global-border !default;
@@ -695,6 +697,7 @@ $nav-primary-item-line-height: $global-line-height !default;
695
697
  $nav-primary-item-color: $global-muted-color !default;
696
698
  $nav-primary-item-hover-color: $global-color !default;
697
699
  $nav-primary-item-active-color: $global-emphasis-color !default;
700
+ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
698
701
  $nav-primary-header-color: $global-emphasis-color !default;
699
702
  $nav-primary-divider-border-width: $global-border-width !default;
700
703
  $nav-primary-divider-border: $global-border !default;
@@ -748,10 +751,11 @@ $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default
748
751
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
749
752
  $navbar-dropdown-dropbar-margin-top: 0px !default;
750
753
  $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
751
- $navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
754
+ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
752
755
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
753
756
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
754
757
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
758
+ $navbar-dropdown-nav-subtitle-font-size: 12px !default;
755
759
  $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
756
760
  $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
757
761
  $navbar-dropdown-nav-divider-border: $global-border !default;
package/src/scss/variables.scss CHANGED
@@ -375,6 +375,7 @@ $dropdown-background: $global-muted-background !default;
375
375
  $dropdown-color: $global-color !default;
376
376
  $dropdown-nav-item-color: $global-muted-color !default;
377
377
  $dropdown-nav-item-hover-color: $global-color !default;
378
+ $dropdown-nav-subtitle-font-size: $global-small-font-size !default;
378
379
  $dropdown-nav-header-color: $global-emphasis-color !default;
379
380
  $dropdown-nav-divider-border-width: $global-border-width !default;
380
381
  $dropdown-nav-divider-border: $global-border !default;
@@ -682,6 +683,7 @@ $nav-divider-margin-horizontal: 0 !default;
682
683
  $nav-default-item-color: $global-muted-color !default;
683
684
  $nav-default-item-hover-color: $global-color !default;
684
685
  $nav-default-item-active-color: $global-emphasis-color !default;
686
+ $nav-default-subtitle-font-size: $global-small-font-size !default;
685
687
  $nav-default-header-color: $global-emphasis-color !default;
686
688
  $nav-default-divider-border-width: $global-border-width !default;
687
689
  $nav-default-divider-border: $global-border !default;
@@ -693,6 +695,7 @@ $nav-primary-item-line-height: $global-line-height !default;
693
695
  $nav-primary-item-color: $global-muted-color !default;
694
696
  $nav-primary-item-hover-color: $global-color !default;
695
697
  $nav-primary-item-active-color: $global-emphasis-color !default;
698
+ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
696
699
  $nav-primary-header-color: $global-emphasis-color !default;
697
700
  $nav-primary-divider-border-width: $global-border-width !default;
698
701
  $nav-primary-divider-border: $global-border !default;
@@ -746,10 +749,11 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
746
749
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
747
750
  $navbar-dropdown-dropbar-margin-top: 0px !default;
748
751
  $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
749
- $navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
752
+ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
750
753
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
751
754
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
752
755
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
756
+ $navbar-dropdown-nav-subtitle-font-size: $global-small-font-size !default;
753
757
  $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
754
758
  $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
755
759
  $navbar-dropdown-nav-divider-border: $global-border !default;
package/tests/alert.html CHANGED
@@ -73,7 +73,7 @@
73
73
 
74
74
  <h2>Animations</h2>
75
75
 
76
- <div uk-alert="animation: uk-animation-scale-up; duration:1000">
76
+ <div uk-alert="animation: uk-animation-scale-up; duration: 1000">
77
77
  <a href="#" class="uk-alert-close" uk-close></a>
78
78
  <p><strong>Alert!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
79
79
  </div>
package/tests/animation.html CHANGED
@@ -10,240 +10,242 @@
10
10
 
11
11
  <body>
12
12
 
13
- <div class="uk-container">
14
-
15
- <h1>Animation</h1>
16
-
17
- <div class="uk-child-width-1-4@m" uk-grid>
18
- <div class="uk-animation-toggle" tabindex="0">
19
- <div class="uk-card uk-card-default uk-card-body uk-animation-fade">
20
- <h3 class="uk-card-title">Fade</h3>
21
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
22
- </div>
23
- </div>
24
- <div class="uk-animation-toggle" tabindex="0">
25
- <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up">
26
- <h3 class="uk-card-title">Scale Up</h3>
27
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
28
- </div>
29
- </div>
30
- <div class="uk-animation-toggle" tabindex="0">
31
- <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down">
32
- <h3 class="uk-card-title">Scale Down</h3>
33
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
34
- </div>
35
- </div>
36
- <div class="uk-animation-toggle" tabindex="0">
37
- <div class="uk-card uk-card-default uk-card-body uk-animation-shake">
38
- <h3 class="uk-card-title">Shake</h3>
39
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
40
- </div>
41
- </div>
42
- <div class="uk-animation-toggle" tabindex="0">
43
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left">
44
- <h3 class="uk-card-title">Left</h3>
45
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
13
+ <div class="uk-overflow-hidden">
14
+ <div class="uk-container">
15
+
16
+ <h1>Animation</h1>
17
+
18
+ <div class="uk-child-width-1-4@m" uk-grid>
19
+ <div class="uk-animation-toggle" tabindex="0">
20
+ <div class="uk-card uk-card-default uk-card-body uk-animation-fade">
21
+ <h3 class="uk-card-title">Fade</h3>
22
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
23
+ </div>
24
+ </div>
25
+ <div class="uk-animation-toggle" tabindex="0">
26
+ <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up">
27
+ <h3 class="uk-card-title">Scale Up</h3>
28
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
29
+ </div>
30
+ </div>
31
+ <div class="uk-animation-toggle" tabindex="0">
32
+ <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down">
33
+ <h3 class="uk-card-title">Scale Down</h3>
34
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
35
+ </div>
36
+ </div>
37
+ <div class="uk-animation-toggle" tabindex="0">
38
+ <div class="uk-card uk-card-default uk-card-body uk-animation-shake">
39
+ <h3 class="uk-card-title">Shake</h3>
40
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
41
+ </div>
42
+ </div>
43
+ <div class="uk-animation-toggle" tabindex="0">
44
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left">
45
+ <h3 class="uk-card-title">Left</h3>
46
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
47
+ </div>
48
+ </div>
49
+ <div class="uk-animation-toggle" tabindex="0">
50
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top">
51
+ <h3 class="uk-card-title">Top</h3>
52
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
53
+ </div>
54
+ </div>
55
+ <div class="uk-animation-toggle" tabindex="0">
56
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom">
57
+ <h3 class="uk-card-title">Bottom</h3>
58
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
59
+ </div>
60
+ </div>
61
+ <div class="uk-animation-toggle" tabindex="0">
62
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right">
63
+ <h3 class="uk-card-title">Right</h3>
64
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
65
+ </div>
66
+ </div>
67
+ <div class="uk-animation-toggle" tabindex="0">
68
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small">
69
+ <h3 class="uk-card-title">Left Small</h3>
70
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
71
+ </div>
72
+ </div>
73
+ <div class="uk-animation-toggle" tabindex="0">
74
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small">
75
+ <h3 class="uk-card-title">Top Small</h3>
76
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
77
+ </div>
78
+ </div>
79
+ <div class="uk-animation-toggle" tabindex="0">
80
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small">
81
+ <h3 class="uk-card-title">Bottom Small</h3>
82
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
83
+ </div>
84
+ </div>
85
+ <div class="uk-animation-toggle" tabindex="0">
86
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small">
87
+ <h3 class="uk-card-title">Right Small</h3>
88
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
89
+ </div>
90
+ </div>
91
+ <div class="uk-animation-toggle" tabindex="0">
92
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium">
93
+ <h3 class="uk-card-title">Left Medium</h3>
94
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
95
+ </div>
96
+ </div>
97
+ <div class="uk-animation-toggle" tabindex="0">
98
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium">
99
+ <h3 class="uk-card-title">Top Medium</h3>
100
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
101
+ </div>
102
+ </div>
103
+ <div class="uk-animation-toggle" tabindex="0">
104
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium">
105
+ <h3 class="uk-card-title">Bottom Medium</h3>
106
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
107
+ </div>
108
+ </div>
109
+ <div class="uk-animation-toggle" tabindex="0">
110
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium">
111
+ <h3 class="uk-card-title">Right Medium</h3>
112
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <h2>Reverse</h2>
118
+
119
+ <div class="uk-child-width-1-4@m" uk-grid>
120
+ <div class="uk-animation-toggle" tabindex="0">
121
+ <div class="uk-card uk-card-default uk-card-body uk-animation-fade uk-animation-reverse">
122
+ <h3 class="uk-card-title">Fade</h3>
123
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
124
+ </div>
125
+ </div>
126
+ <div class="uk-animation-toggle" tabindex="0">
127
+ <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-animation-reverse">
128
+ <h3 class="uk-card-title">Scale Up</h3>
129
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
130
+ </div>
131
+ </div>
132
+ <div class="uk-animation-toggle" tabindex="0">
133
+ <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down uk-animation-reverse">
134
+ <h3 class="uk-card-title">Scale Down</h3>
135
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
136
+ </div>
137
+ </div>
138
+ <div class="uk-animation-toggle" tabindex="0">
139
+ <div class="uk-card uk-card-default uk-card-body uk-animation-shake uk-animation-reverse">
140
+ <h3 class="uk-card-title">Shake</h3>
141
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
142
+ </div>
143
+ </div>
144
+ <div class="uk-animation-toggle" tabindex="0">
145
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left uk-animation-reverse">
146
+ <h3 class="uk-card-title">Left</h3>
147
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
148
+ </div>
149
+ </div>
150
+ <div class="uk-animation-toggle" tabindex="0">
151
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top uk-animation-reverse">
152
+ <h3 class="uk-card-title">Top</h3>
153
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
154
+ </div>
155
+ </div>
156
+ <div class="uk-animation-toggle" tabindex="0">
157
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom uk-animation-reverse">
158
+ <h3 class="uk-card-title">Bottom</h3>
159
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
160
+ </div>
161
+ </div>
162
+ <div class="uk-animation-toggle" tabindex="0">
163
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right uk-animation-reverse">
164
+ <h3 class="uk-card-title">Right</h3>
165
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
166
+ </div>
167
+ </div>
168
+ <div class="uk-animation-toggle" tabindex="0">
169
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small uk-animation-reverse">
170
+ <h3 class="uk-card-title">Left Small</h3>
171
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
172
+ </div>
173
+ </div>
174
+ <div class="uk-animation-toggle" tabindex="0">
175
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small uk-animation-reverse">
176
+ <h3 class="uk-card-title">Top Small</h3>
177
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
178
+ </div>
179
+ </div>
180
+ <div class="uk-animation-toggle" tabindex="0">
181
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small uk-animation-reverse">
182
+ <h3 class="uk-card-title">Bottom Small</h3>
183
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
184
+ </div>
46
185
  </div>
47
- </div>
48
- <div class="uk-animation-toggle" tabindex="0">
49
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top">
50
- <h3 class="uk-card-title">Top</h3>
51
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
186
+ <div class="uk-animation-toggle" tabindex="0">
187
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small uk-animation-reverse">
188
+ <h3 class="uk-card-title">Right Small</h3>
189
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
190
+ </div>
52
191
  </div>
53
- </div>
54
- <div class="uk-animation-toggle" tabindex="0">
55
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom">
56
- <h3 class="uk-card-title">Bottom</h3>
57
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
192
+ <div class="uk-animation-toggle" tabindex="0">
193
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium uk-animation-reverse">
194
+ <h3 class="uk-card-title">Left Medium</h3>
195
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
196
+ </div>
58
197
  </div>
59
- </div>
60
- <div class="uk-animation-toggle" tabindex="0">
61
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right">
62
- <h3 class="uk-card-title">Right</h3>
63
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
198
+ <div class="uk-animation-toggle" tabindex="0">
199
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium uk-animation-reverse">
200
+ <h3 class="uk-card-title">Top Medium</h3>
201
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
202
+ </div>
64
203
  </div>
65
- </div>
66
- <div class="uk-animation-toggle" tabindex="0">
67
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small">
68
- <h3 class="uk-card-title">Left Small</h3>
69
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
204
+ <div class="uk-animation-toggle" tabindex="0">
205
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium uk-animation-reverse">
206
+ <h3 class="uk-card-title">Bottom Medium</h3>
207
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
208
+ </div>
70
209
  </div>
71
- </div>
72
- <div class="uk-animation-toggle" tabindex="0">
73
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small">
74
- <h3 class="uk-card-title">Top Small</h3>
75
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
76
- </div>
77
- </div>
78
- <div class="uk-animation-toggle" tabindex="0">
79
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small">
80
- <h3 class="uk-card-title">Bottom Small</h3>
81
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
210
+ <div class="uk-animation-toggle" tabindex="0">
211
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium uk-animation-reverse">
212
+ <h3 class="uk-card-title">Right Medium</h3>
213
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
214
+ </div>
82
215
  </div>
83
216
  </div>
84
- <div class="uk-animation-toggle" tabindex="0">
85
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small">
86
- <h3 class="uk-card-title">Right Small</h3>
87
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
88
- </div>
89
- </div>
90
- <div class="uk-animation-toggle" tabindex="0">
91
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium">
92
- <h3 class="uk-card-title">Left Medium</h3>
93
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
94
- </div>
95
- </div>
96
- <div class="uk-animation-toggle" tabindex="0">
97
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium">
98
- <h3 class="uk-card-title">Top Medium</h3>
99
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
100
- </div>
101
- </div>
102
- <div class="uk-animation-toggle" tabindex="0">
103
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium">
104
- <h3 class="uk-card-title">Bottom Medium</h3>
105
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
106
- </div>
107
- </div>
108
- <div class="uk-animation-toggle" tabindex="0">
109
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium">
110
- <h3 class="uk-card-title">Right Medium</h3>
111
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
112
- </div>
113
- </div>
114
- </div>
115
-
116
- <h2>Reverse</h2>
117
217
 
118
- <div class="uk-child-width-1-4@m" uk-grid>
119
- <div class="uk-animation-toggle" tabindex="0">
120
- <div class="uk-card uk-card-default uk-card-body uk-animation-fade uk-animation-reverse">
121
- <h3 class="uk-card-title">Fade</h3>
122
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
123
- </div>
124
- </div>
125
- <div class="uk-animation-toggle" tabindex="0">
126
- <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-animation-reverse">
127
- <h3 class="uk-card-title">Scale Up</h3>
128
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
129
- </div>
130
- </div>
131
- <div class="uk-animation-toggle" tabindex="0">
132
- <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down uk-animation-reverse">
133
- <h3 class="uk-card-title">Scale Down</h3>
134
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
135
- </div>
136
- </div>
137
- <div class="uk-animation-toggle" tabindex="0">
138
- <div class="uk-card uk-card-default uk-card-body uk-animation-shake uk-animation-reverse">
139
- <h3 class="uk-card-title">Shake</h3>
140
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
141
- </div>
142
- </div>
143
- <div class="uk-animation-toggle" tabindex="0">
144
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left uk-animation-reverse">
145
- <h3 class="uk-card-title">Left</h3>
146
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
147
- </div>
148
- </div>
149
- <div class="uk-animation-toggle" tabindex="0">
150
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top uk-animation-reverse">
151
- <h3 class="uk-card-title">Top</h3>
152
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
153
- </div>
154
- </div>
155
- <div class="uk-animation-toggle" tabindex="0">
156
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom uk-animation-reverse">
157
- <h3 class="uk-card-title">Bottom</h3>
158
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
159
- </div>
160
- </div>
161
- <div class="uk-animation-toggle" tabindex="0">
162
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right uk-animation-reverse">
163
- <h3 class="uk-card-title">Right</h3>
164
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
165
- </div>
166
- </div>
167
- <div class="uk-animation-toggle" tabindex="0">
168
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small uk-animation-reverse">
169
- <h3 class="uk-card-title">Left Small</h3>
170
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
171
- </div>
172
- </div>
173
- <div class="uk-animation-toggle" tabindex="0">
174
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small uk-animation-reverse">
175
- <h3 class="uk-card-title">Top Small</h3>
176
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
177
- </div>
178
- </div>
179
- <div class="uk-animation-toggle" tabindex="0">
180
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small uk-animation-reverse">
181
- <h3 class="uk-card-title">Bottom Small</h3>
182
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
183
- </div>
184
- </div>
185
- <div class="uk-animation-toggle" tabindex="0">
186
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small uk-animation-reverse">
187
- <h3 class="uk-card-title">Right Small</h3>
188
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
189
- </div>
190
- </div>
191
- <div class="uk-animation-toggle" tabindex="0">
192
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium uk-animation-reverse">
193
- <h3 class="uk-card-title">Left Medium</h3>
194
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
195
- </div>
196
- </div>
197
- <div class="uk-animation-toggle" tabindex="0">
198
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium uk-animation-reverse">
199
- <h3 class="uk-card-title">Top Medium</h3>
200
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
201
- </div>
202
- </div>
203
- <div class="uk-animation-toggle" tabindex="0">
204
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium uk-animation-reverse">
205
- <h3 class="uk-card-title">Bottom Medium</h3>
206
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
207
- </div>
208
- </div>
209
- <div class="uk-animation-toggle" tabindex="0">
210
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium uk-animation-reverse">
211
- <h3 class="uk-card-title">Right Medium</h3>
212
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
213
- </div>
214
- </div>
215
- </div>
218
+ <h2>Kenburns</h2>
216
219
 
217
- <h2>Kenburns</h2>
220
+ <div class="uk-child-width-1-2@m" uk-grid>
221
+ <div>
218
222
 
219
- <div class="uk-child-width-1-2@m" uk-grid>
220
- <div>
223
+ <div class="uk-overflow-hidden">
224
+ <img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" width="1800" height="1200" alt="">
225
+ </div>
221
226
 
222
- <div class="uk-overflow-hidden">
223
- <img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" width="1800" height="1200" alt="">
224
227
  </div>
228
+ <div>
225
229
 
226
- </div>
227
- <div>
230
+ <div class="uk-overflow-hidden">
231
+ <img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" width="1800" height="1200" alt="">
232
+ </div>
228
233
 
229
- <div class="uk-overflow-hidden">
230
- <img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" width="1800" height="1200" alt="">
231
234
  </div>
232
-
233
235
  </div>
234
- </div>
235
236
 
236
- <h2>Stroke</h2>
237
+ <h2>Stroke</h2>
237
238
 
238
- <div class="uk-child-width-1-2@m uk-text-center" uk-grid>
239
- <div class="uk-animation-toggle" tabindex="0">
240
- <img class="uk-animation-stroke" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
241
- </div>
242
- <div class="uk-animation-toggle" tabindex="0">
243
- <img class="uk-animation-stroke uk-animation-reverse" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
239
+ <div class="uk-child-width-1-2@m uk-text-center" uk-grid>
240
+ <div class="uk-animation-toggle" tabindex="0">
241
+ <img class="uk-animation-stroke" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
242
+ </div>
243
+ <div class="uk-animation-toggle" tabindex="0">
244
+ <img class="uk-animation-stroke uk-animation-reverse" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
245
+ </div>
244
246
  </div>
245
- </div>
246
247
 
248
+ </div>
247
249
  </div>
248
250
 
249
251
  </body>