uikit 3.24.2 → 3.24.3-dev.63b12446

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 (65) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/css/uikit-core-rtl.css +72 -42
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +72 -42
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +100 -82
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +100 -82
  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 +1 -1
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +1 -1
  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 +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +8 -8
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  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 +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +1 -1
  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 +9 -5
  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 +16 -12
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +6 -6
  43. package/src/images/components/accordion-icon.svg +20 -0
  44. package/src/js/components/internal/slider-transitioner.js +1 -1
  45. package/src/js/components/slider.js +6 -7
  46. package/src/js/core/accordion.js +3 -3
  47. package/src/js/core/icon.js +2 -0
  48. package/src/js/core/index.js +1 -0
  49. package/src/less/components/accordion.less +109 -46
  50. package/src/less/components/card.less +1 -1
  51. package/src/less/components/nav.less +1 -0
  52. package/src/less/components/overlay.less +2 -2
  53. package/src/less/theme/accordion.less +31 -38
  54. package/src/scss/components/accordion.scss +77 -30
  55. package/src/scss/components/nav.scss +1 -0
  56. package/src/scss/mixins-theme.scss +39 -23
  57. package/src/scss/mixins.scss +38 -15
  58. package/src/scss/variables-theme.scss +13 -15
  59. package/src/scss/variables.scss +11 -11
  60. package/tests/accordion.html +76 -17
  61. package/tests/card.html +86 -0
  62. package/tests/index.html +4 -4
  63. package/tests/overlay.html +177 -9
  64. package/src/images/backgrounds/accordion-close.svg +0 -4
  65. package/src/images/backgrounds/accordion-open.svg +0 -3
package/src/scss/components/nav.scss CHANGED
@@ -122,6 +122,7 @@ ul.uk-nav-sub {
122
122
  ========================================================================== */
123
123
 
124
124
  .uk-nav-parent-icon {
125
+ flex: none;
125
126
  margin-left: auto;
126
127
  transition: transform 0.3s ease-out;
127
128
  }
package/src/scss/mixins-theme.scss CHANGED
@@ -2,36 +2,52 @@
2
2
  @use "sass:string";
3
3
 
4
4
  @mixin hook-accordion(){}
5
- @mixin hook-accordion-item(){}
6
- @mixin hook-accordion-title(){
5
+ @mixin hook-accordion-default-item(){}
6
+ @mixin hook-accordion-default-item-active(){}
7
+ @mixin hook-accordion-default-title(){}
8
+ @mixin hook-accordion-default-title-hover(){}
9
+ @mixin hook-accordion-default-title-active(){}
10
+ @mixin hook-accordion-default-icon(){ color: $accordion-default-icon-color; }
11
+ @mixin hook-accordion-default-content(){}
12
+ @mixin hook-accordion-misc(){}
13
+ @mixin hook-inverse-accordion-default-item(){}
14
+ @mixin hook-inverse-accordion-default-item-active(){}
15
+ @mixin hook-inverse-accordion-default-title(){}
16
+ @mixin hook-inverse-accordion-default-title-hover(){}
17
+ @mixin hook-inverse-accordion-default-title-active(){}
18
+ @mixin hook-inverse-accordion-default-icon(){ color: $inverse-accordion-default-icon-color; }
19
+ @mixin hook-inverse-accordion-default-content(){}
20
+ @mixin hook-inverse-component-accordion(){
7
21
 
8
- overflow: hidden;
22
+ .uk-accordion-default > * {
23
+ @if(meta.mixin-exists(hook-inverse-accordion-default-item)) {@include hook-inverse-accordion-default-item();}
24
+ }
9
25
 
10
- &::before {
11
- content: "";
12
- width: ($accordion-title-line-height * 1em);
13
- height: ($accordion-title-line-height * 1em);
14
- margin-left: $accordion-icon-margin-left;
15
- float: right;
16
- @include svg-fill($internal-accordion-close-image, "#000", $accordion-icon-color);
17
- background-repeat: no-repeat;
18
- background-position: 50% 50%;
26
+ .uk-accordion-default > .uk-open {
27
+ @if(meta.mixin-exists(hook-inverse-accordion-default-item-active)) {@include hook-inverse-accordion-default-item-active();}
19
28
  }
20
29
 
21
- .uk-open > &::before { @include svg-fill($internal-accordion-open-image, "#000", $accordion-icon-color); }
30
+ .uk-accordion-default .uk-accordion-title {
31
+ color: $inverse-accordion-default-title-color;
32
+ @if(meta.mixin-exists(hook-inverse-accordion-default-title)) {@include hook-inverse-accordion-default-title();}
33
+ }
22
34
 
23
- }
24
- @mixin hook-accordion-title-hover(){}
25
- @mixin hook-accordion-content(){}
26
- @mixin hook-accordion-misc(){}
27
- @mixin hook-inverse-accordion-item(){}
28
- @mixin hook-inverse-accordion-title(){}
29
- @mixin hook-inverse-accordion-title-hover(){}
30
- @mixin hook-inverse-component-accordion(){
35
+ .uk-accordion-default .uk-accordion-title:hover {
36
+ color: $inverse-accordion-default-title-hover-color;
37
+ @if(meta.mixin-exists(hook-inverse-accordion-default-title-hover)) {@include hook-inverse-accordion-default-title-hover();}
38
+ }
31
39
 
32
- .uk-accordion-title::before { @include svg-fill($internal-accordion-close-image, "#000", $inverse-global-color); }
40
+ .uk-accordion-default .uk-accordion-title:active {
41
+ @if(meta.mixin-exists(hook-inverse-accordion-default-title-active)) {@include hook-inverse-accordion-default-title-active();}
42
+ }
33
43
 
34
- .uk-open > .uk-accordion-title::before { @include svg-fill($internal-accordion-open-image, "#000", $inverse-global-color); }
44
+ .uk-accordion-default .uk-accordion-icon {
45
+ @if(meta.mixin-exists(hook-inverse-accordion-default-icon)) {@include hook-inverse-accordion-default-icon();}
46
+ }
47
+
48
+ .uk-accordion-default .uk-accordion-content {
49
+ @if(meta.mixin-exists(hook-inverse-accordion-default-content)) {@include hook-inverse-accordion-default-content();}
50
+ }
35
51
 
36
52
  }
37
53
  @mixin hook-alert(){}
package/src/scss/mixins.scss CHANGED
@@ -1,28 +1,51 @@
1
1
  @use "sass:meta";
2
2
 
3
3
  @mixin hook-accordion(){}
4
- @mixin hook-accordion-item(){}
5
- @mixin hook-accordion-title(){}
6
- @mixin hook-accordion-title-hover(){}
7
- @mixin hook-accordion-content(){}
4
+ @mixin hook-accordion-default-item(){}
5
+ @mixin hook-accordion-default-item-active(){}
6
+ @mixin hook-accordion-default-title(){}
7
+ @mixin hook-accordion-default-title-hover(){}
8
+ @mixin hook-accordion-default-title-active(){}
9
+ @mixin hook-accordion-default-icon(){}
10
+ @mixin hook-accordion-default-content(){}
8
11
  @mixin hook-accordion-misc(){}
9
- @mixin hook-inverse-accordion-item(){}
10
- @mixin hook-inverse-accordion-title(){}
11
- @mixin hook-inverse-accordion-title-hover(){}
12
+ @mixin hook-inverse-accordion-default-item(){}
13
+ @mixin hook-inverse-accordion-default-item-active(){}
14
+ @mixin hook-inverse-accordion-default-title(){}
15
+ @mixin hook-inverse-accordion-default-title-hover(){}
16
+ @mixin hook-inverse-accordion-default-title-active(){}
17
+ @mixin hook-inverse-accordion-default-icon(){}
18
+ @mixin hook-inverse-accordion-default-content(){}
12
19
  @mixin hook-inverse-component-accordion(){
13
20
 
14
- .uk-accordion > * {
15
- @if(meta.mixin-exists(hook-inverse-accordion-item)) {@include hook-inverse-accordion-item();}
21
+ .uk-accordion-default > * {
22
+ @if(meta.mixin-exists(hook-inverse-accordion-default-item)) {@include hook-inverse-accordion-default-item();}
16
23
  }
17
24
 
18
- .uk-accordion-title {
19
- color: $inverse-accordion-title-color;
20
- @if(meta.mixin-exists(hook-inverse-accordion-title)) {@include hook-inverse-accordion-title();}
25
+ .uk-accordion-default > .uk-open {
26
+ @if(meta.mixin-exists(hook-inverse-accordion-default-item-active)) {@include hook-inverse-accordion-default-item-active();}
21
27
  }
22
28
 
23
- .uk-accordion-title:hover {
24
- color: $inverse-accordion-title-hover-color;
25
- @if(meta.mixin-exists(hook-inverse-accordion-title-hover)) {@include hook-inverse-accordion-title-hover();}
29
+ .uk-accordion-default .uk-accordion-title {
30
+ color: $inverse-accordion-default-title-color;
31
+ @if(meta.mixin-exists(hook-inverse-accordion-default-title)) {@include hook-inverse-accordion-default-title();}
32
+ }
33
+
34
+ .uk-accordion-default .uk-accordion-title:hover {
35
+ color: $inverse-accordion-default-title-hover-color;
36
+ @if(meta.mixin-exists(hook-inverse-accordion-default-title-hover)) {@include hook-inverse-accordion-default-title-hover();}
37
+ }
38
+
39
+ .uk-accordion-default .uk-accordion-title:active {
40
+ @if(meta.mixin-exists(hook-inverse-accordion-default-title-active)) {@include hook-inverse-accordion-default-title-active();}
41
+ }
42
+
43
+ .uk-accordion-default .uk-accordion-icon {
44
+ @if(meta.mixin-exists(hook-inverse-accordion-default-icon)) {@include hook-inverse-accordion-default-icon();}
45
+ }
46
+
47
+ .uk-accordion-default .uk-accordion-content {
48
+ @if(meta.mixin-exists(hook-inverse-accordion-default-content)) {@include hook-inverse-accordion-default-content();}
26
49
  }
27
50
 
28
51
  }
package/src/scss/variables-theme.scss CHANGED
@@ -3,20 +3,20 @@
3
3
  @use "sass:color";
4
4
 
5
5
  $global-margin: 20px !default;
6
- $accordion-item-margin-top: $global-margin !default;
6
+ $accordion-default-item-margin-top: $global-margin !default;
7
7
  $global-medium-font-size: 1.25rem !default;
8
- $accordion-title-font-size: $global-medium-font-size !default;
9
- $accordion-title-line-height: 1.4 !default;
8
+ $accordion-default-title-font-size: $global-medium-font-size !default;
9
+ $accordion-default-title-line-height: 1.4 !default;
10
10
  $global-emphasis-color: #333 !default;
11
- $accordion-title-color: $global-emphasis-color !default;
11
+ $accordion-default-title-color: $global-emphasis-color !default;
12
12
  $global-color: #666 !default;
13
- $accordion-title-hover-color: $global-color !default;
14
- $accordion-content-margin-top: $global-margin !default;
13
+ $accordion-default-title-hover-color: $global-color !default;
14
+ $accordion-default-content-margin-top: $global-margin !default;
15
15
  $global-inverse-color: #fff !default;
16
16
  $inverse-global-emphasis-color: $global-inverse-color !default;
17
- $inverse-accordion-title-color: $inverse-global-emphasis-color !default;
17
+ $inverse-accordion-default-title-color: $inverse-global-emphasis-color !default;
18
18
  $inverse-global-color: rgba($global-inverse-color, 0.7) !default;
19
- $inverse-accordion-title-hover-color: $inverse-global-color !default;
19
+ $inverse-accordion-default-title-hover-color: $inverse-global-color !default;
20
20
  $alert-margin-vertical: $global-margin !default;
21
21
  $alert-padding: 15px !default;
22
22
  $alert-padding-right: $alert-padding + 14px !default;
@@ -283,7 +283,7 @@ $card-secondary-color: $global-inverse-color !default;
283
283
  $card-secondary-title-color: $card-secondary-color !default;
284
284
  $card-secondary-hover-background: $card-secondary-background !default;
285
285
  $card-secondary-color-mode: light !default;
286
- $card-overlay-background: rgba($global-background, 0.8) !default;
286
+ $card-overlay-background: rgba($global-background, 0.9) !default;
287
287
  $card-overlay-color: $global-color !default;
288
288
  $card-overlay-title-color: $global-emphasis-color !default;
289
289
  $card-overlay-hover-background: color.adjust($card-overlay-background, $alpha: 0.1) !default;
@@ -889,9 +889,9 @@ $offcanvas-close-position-s: 10px !default;
889
889
  $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
890
890
  $overlay-padding-horizontal: $global-gutter !default;
891
891
  $overlay-padding-vertical: $global-gutter !default;
892
- $overlay-default-background: rgba($global-background, 0.8) !default;
892
+ $overlay-default-background: rgba($global-background, 0.9) !default;
893
893
  $overlay-default-color-mode: dark !default;
894
- $overlay-primary-background: rgba($global-secondary-background, 0.8) !default;
894
+ $overlay-primary-background: rgba($global-secondary-background, 0.9) !default;
895
895
  $overlay-primary-color-mode: light !default;
896
896
  $padding-padding: $global-gutter !default;
897
897
  $padding-padding-l: $global-medium-gutter !default;
@@ -1189,10 +1189,8 @@ $width-medium-width: 300px !default;
1189
1189
  $width-large-width: 450px !default;
1190
1190
  $width-xlarge-width: 600px !default;
1191
1191
  $width-2xlarge-width: 750px !default;
1192
- $accordion-icon-margin-left: 10px !default;
1193
- $accordion-icon-color: $global-color !default;
1194
- $internal-accordion-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
1195
- $internal-accordion-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
1192
+ $accordion-default-icon-color: $global-color !default;
1193
+ $inverse-accordion-default-icon-color: $inverse-global-color !default;
1196
1194
  $alert-close-opacity: 0.4 !default;
1197
1195
  $alert-close-hover-opacity: 0.8 !default;
1198
1196
  $article-meta-link-color: $article-meta-color !default;
package/src/scss/variables.scss CHANGED
@@ -3,20 +3,20 @@
3
3
  @use "sass:color";
4
4
 
5
5
  $global-margin: 20px !default;
6
- $accordion-item-margin-top: $global-margin !default;
6
+ $accordion-default-item-margin-top: $global-margin !default;
7
7
  $global-medium-font-size: 1.25rem !default;
8
- $accordion-title-font-size: $global-medium-font-size !default;
9
- $accordion-title-line-height: 1.4 !default;
8
+ $accordion-default-title-font-size: $global-medium-font-size !default;
9
+ $accordion-default-title-line-height: 1.4 !default;
10
10
  $global-emphasis-color: #333 !default;
11
- $accordion-title-color: $global-emphasis-color !default;
11
+ $accordion-default-title-color: $global-emphasis-color !default;
12
12
  $global-color: #666 !default;
13
- $accordion-title-hover-color: $global-color !default;
14
- $accordion-content-margin-top: $global-margin !default;
13
+ $accordion-default-title-hover-color: $global-color !default;
14
+ $accordion-default-content-margin-top: $global-margin !default;
15
15
  $global-inverse-color: #fff !default;
16
16
  $inverse-global-emphasis-color: $global-inverse-color !default;
17
- $inverse-accordion-title-color: $inverse-global-emphasis-color !default;
17
+ $inverse-accordion-default-title-color: $inverse-global-emphasis-color !default;
18
18
  $inverse-global-color: rgba($global-inverse-color, 0.7) !default;
19
- $inverse-accordion-title-hover-color: $inverse-global-color !default;
19
+ $inverse-accordion-default-title-hover-color: $inverse-global-color !default;
20
20
  $alert-margin-vertical: $global-margin !default;
21
21
  $alert-padding: 15px !default;
22
22
  $alert-padding-right: $alert-padding + 14px !default;
@@ -282,7 +282,7 @@ $card-secondary-color: $global-inverse-color !default;
282
282
  $card-secondary-title-color: $card-secondary-color !default;
283
283
  $card-secondary-hover-background: color.adjust($card-secondary-background, $lightness: -5%) !default;
284
284
  $card-secondary-color-mode: light !default;
285
- $card-overlay-background: rgba($global-background, 0.8) !default;
285
+ $card-overlay-background: rgba($global-background, 0.9) !default;
286
286
  $card-overlay-color: $global-color !default;
287
287
  $card-overlay-title-color: $global-emphasis-color !default;
288
288
  $card-overlay-hover-background: color.adjust($card-overlay-background, $alpha: 0.1) !default;
@@ -887,9 +887,9 @@ $offcanvas-close-position-s: 10px !default;
887
887
  $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
888
888
  $overlay-padding-horizontal: $global-gutter !default;
889
889
  $overlay-padding-vertical: $global-gutter !default;
890
- $overlay-default-background: rgba($global-background, 0.8) !default;
890
+ $overlay-default-background: rgba($global-background, 0.9) !default;
891
891
  $overlay-default-color-mode: dark !default;
892
- $overlay-primary-background: rgba($global-secondary-background, 0.8) !default;
892
+ $overlay-primary-background: rgba($global-secondary-background, 0.9) !default;
893
893
  $overlay-primary-color-mode: light !default;
894
894
  $padding-padding: $global-gutter !default;
895
895
  $padding-padding-l: $global-medium-gutter !default;
package/tests/accordion.html CHANGED
@@ -17,12 +17,12 @@
17
17
  <div class="uk-child-width-1-4@m" uk-grid>
18
18
  <div>
19
19
 
20
- <h3>Animated</h3>
20
+ <h3>Default</h3>
21
21
 
22
- <ul uk-accordion>
22
+ <ul class="uk-accordion-default" uk-accordion>
23
23
  <li class="uk-open">
24
24
 
25
- <a class="uk-accordion-title" href>This is a title with some more text</a>
25
+ <a class="uk-accordion-title" href>This is a title with some more text <span uk-accordion-icon></span></a>
26
26
  <div class="uk-accordion-content">
27
27
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
28
28
  </div>
@@ -30,7 +30,7 @@
30
30
  </li>
31
31
  <li>
32
32
 
33
- <a class="uk-accordion-title" href>Item 2</a>
33
+ <a class="uk-accordion-title" href>Item 2 <span uk-accordion-icon></span></a>
34
34
  <div class="uk-accordion-content">
35
35
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
36
36
  </div>
@@ -38,7 +38,7 @@
38
38
  </li>
39
39
  <li>
40
40
 
41
- <a class="uk-accordion-title" href>Item 3</a>
41
+ <a class="uk-accordion-title" href>Item 3 <span uk-accordion-icon></span></a>
42
42
  <div class="uk-accordion-content">
43
43
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
44
44
  </div>
@@ -51,10 +51,10 @@
51
51
 
52
52
  <h3>Multiple</h3>
53
53
 
54
- <ul uk-accordion="multiple: true">
54
+ <ul class="uk-accordion-default" uk-accordion="multiple: true">
55
55
  <li>
56
56
 
57
- <a class="uk-accordion-title" href>Item 1</a>
57
+ <a class="uk-accordion-title" href>Item 1 <span uk-accordion-icon></span></a>
58
58
  <div class="uk-accordion-content">
59
59
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
60
60
  </div>
@@ -62,7 +62,7 @@
62
62
  </li>
63
63
  <li class="uk-open">
64
64
 
65
- <a class="uk-accordion-title" href>Item 2</a>
65
+ <a class="uk-accordion-title" href>Item 2 <span uk-accordion-icon></span></a>
66
66
  <div class="uk-accordion-content">
67
67
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
68
68
  </div>
@@ -70,7 +70,7 @@
70
70
  </li>
71
71
  <li class="uk-open">
72
72
 
73
- <a class="uk-accordion-title" href>Item 3</a>
73
+ <a class="uk-accordion-title" href>Item 3 <span uk-accordion-icon></span></a>
74
74
  <div class="uk-accordion-content">
75
75
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
76
76
  </div>
@@ -83,10 +83,10 @@
83
83
 
84
84
  <h3>Not Animated</h3>
85
85
 
86
- <ul uk-accordion="animation: false; active: 0">
86
+ <ul class="uk-accordion-default" uk-accordion="animation: false; active: 1">
87
87
  <li>
88
88
 
89
- <a class="uk-accordion-title" href>Item 1</a>
89
+ <a class="uk-accordion-title" href>Item 1 <span uk-accordion-icon></span></a>
90
90
  <div class="uk-accordion-content">
91
91
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
92
92
  </div>
@@ -94,7 +94,7 @@
94
94
  </li>
95
95
  <li>
96
96
 
97
- <a class="uk-accordion-title" href>Item 2</a>
97
+ <a class="uk-accordion-title" href>Item 2 <span uk-accordion-icon></span></a>
98
98
  <div class="uk-accordion-content">
99
99
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
100
100
  </div>
@@ -102,7 +102,7 @@
102
102
  </li>
103
103
  <li>
104
104
 
105
- <a class="uk-accordion-title" href>Item 3</a>
105
+ <a class="uk-accordion-title" href>Item 3 <span uk-accordion-icon></span></a>
106
106
  <div class="uk-accordion-content">
107
107
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
108
108
  </div>
@@ -115,10 +115,10 @@
115
115
 
116
116
  <h3>Not collapsible</h3>
117
117
 
118
- <ul uk-accordion="collapsible: false">
118
+ <ul class="uk-accordion-default" uk-accordion="collapsible: false">
119
119
  <li>
120
120
 
121
- <a class="uk-accordion-title" href>Item 1</a>
121
+ <a class="uk-accordion-title" href>Item 1 <span uk-accordion-icon></span></a>
122
122
  <div class="uk-accordion-content">
123
123
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
124
124
  </div>
@@ -126,7 +126,7 @@
126
126
  </li>
127
127
  <li>
128
128
 
129
- <a class="uk-accordion-title" href>Item 2</a>
129
+ <a class="uk-accordion-title" href>Item 2 <span uk-accordion-icon></span></a>
130
130
  <div class="uk-accordion-content">
131
131
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
132
132
  </div>
@@ -134,7 +134,66 @@
134
134
  </li>
135
135
  <li>
136
136
 
137
- <a class="uk-accordion-title" href>Item 3</a>
137
+ <a class="uk-accordion-title" href>Item 3 <span uk-accordion-icon></span></a>
138
+ <div class="uk-accordion-content">
139
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
140
+ </div>
141
+
142
+ </li>
143
+ </ul>
144
+
145
+ </div>
146
+ <div>
147
+
148
+ <h3>No Style</h3>
149
+
150
+ <ul class="uk-child-width-1-1 uk-grid-small" uk-grid uk-accordion>
151
+ <li class="uk-open">
152
+
153
+ <a class="uk-accordion-title uk-link-reset uk-margin-small-bottom" href>
154
+
155
+ <div class="uk-grid-small uk-flex-middle" uk-grid>
156
+ <div class="uk-width-expand">
157
+ <h3>This is a H3 heading with some more text</h3>
158
+ </div>
159
+ <div class="uk-width-auto" uk-accordion-icon></div>
160
+ </div>
161
+
162
+ </a>
163
+ <div class="uk-accordion-content">
164
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
165
+ </div>
166
+
167
+ </li>
168
+ <li>
169
+
170
+ <a class="uk-accordion-title uk-link-reset uk-margin-small-bottom" href>
171
+
172
+ <div class="uk-grid-small uk-flex-middle" uk-grid>
173
+ <div class="uk-width-expand">
174
+ <h3>Item 2</h3>
175
+ </div>
176
+ <div class="uk-width-auto" uk-accordion-icon></div>
177
+ </div>
178
+
179
+ </a>
180
+ <div class="uk-accordion-content">
181
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
182
+ </div>
183
+
184
+ </li>
185
+ <li>
186
+
187
+ <a class="uk-accordion-title uk-link-reset uk-margin-small-bottom" href>
188
+
189
+ <div class="uk-grid-small" uk-grid>
190
+ <div class="uk-width-expand">
191
+ <h3>Item 3</h3>
192
+ </div>
193
+ <div class="uk-width-auto" uk-accordion-icon></div>
194
+ </div>
195
+
196
+ </a>
138
197
  <div class="uk-accordion-content">
139
198
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
140
199
  </div>
package/tests/card.html CHANGED
@@ -223,6 +223,92 @@
223
223
  </div>
224
224
  </div>
225
225
 
226
+ <div class="uk-section-default ">
227
+ <div class="uk-section uk-section-small uk-background-cover" style="background-image: url('images/light.jpg');">
228
+ <div class="uk-container">
229
+
230
+ <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
231
+ <div>
232
+
233
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
234
+ <h3 class="uk-card-title">Default</h3>
235
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
236
+ </div>
237
+
238
+ </div>
239
+ <div>
240
+
241
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
242
+ <h3 class="uk-card-title">Primary</h3>
243
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
244
+ </div>
245
+
246
+ </div>
247
+ <div>
248
+
249
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
250
+ <h3 class="uk-card-title">Secondary</h3>
251
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
252
+ </div>
253
+
254
+ </div>
255
+ <div>
256
+
257
+ <div class="uk-card uk-card-overlay uk-card-hover uk-card-body">
258
+ <h3 class="uk-card-title">Overlay</h3>
259
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
260
+ </div>
261
+
262
+ </div>
263
+ </div>
264
+
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="uk-section-default ">
270
+ <div class="uk-section uk-section-small uk-background-cover" style="background-image: url('images/dark.jpg');">
271
+ <div class="uk-container">
272
+
273
+ <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
274
+ <div>
275
+
276
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
277
+ <h3 class="uk-card-title">Default</h3>
278
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
279
+ </div>
280
+
281
+ </div>
282
+ <div>
283
+
284
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
285
+ <h3 class="uk-card-title">Primary</h3>
286
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
287
+ </div>
288
+
289
+ </div>
290
+ <div>
291
+
292
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
293
+ <h3 class="uk-card-title">Secondary</h3>
294
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
295
+ </div>
296
+
297
+ </div>
298
+ <div>
299
+
300
+ <div class="uk-card uk-card-overlay uk-card-hover uk-card-body">
301
+ <h3 class="uk-card-title">Overlay</h3>
302
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
303
+ </div>
304
+
305
+ </div>
306
+ </div>
307
+
308
+ </div>
309
+ </div>
310
+ </div>
311
+
226
312
  <div class="uk-container uk-margin-large-top">
227
313
 
228
314
  <h2>Media</h2>
package/tests/index.html CHANGED
@@ -722,10 +722,10 @@
722
722
  <dd>A description text</dd>
723
723
  </dl>
724
724
 
725
- <ul uk-accordion>
725
+ <ul class="uk-accordion-default" uk-accordion>
726
726
  <li class="uk-open">
727
727
 
728
- <a class="uk-accordion-title" href="#">Item 1</a>
728
+ <a class="uk-accordion-title" href="#">Item 1 <span uk-accordion-icon></span></a>
729
729
  <div class="uk-accordion-content">
730
730
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
731
731
  </div>
@@ -733,7 +733,7 @@
733
733
  </li>
734
734
  <li>
735
735
 
736
- <a class="uk-accordion-title" href="#">Item 2</a>
736
+ <a class="uk-accordion-title" href="#">Item 2 <span uk-accordion-icon></span></a>
737
737
  <div class="uk-accordion-content">
738
738
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
739
739
  </div>
@@ -741,7 +741,7 @@
741
741
  </li>
742
742
  <li>
743
743
 
744
- <a class="uk-accordion-title" href="#">Item 3</a>
744
+ <a class="uk-accordion-title" href="#">Item 3 <span uk-accordion-icon></span></a>
745
745
  <div class="uk-accordion-content">
746
746
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
747
747
  </div>