@rokkit/themes 1.0.0-next.133 → 1.0.0-next.136

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 (90) hide show
  1. package/README.md +68 -80
  2. package/build.mjs +148 -150
  3. package/dist/base.css +689 -623
  4. package/dist/glass.css +212 -203
  5. package/dist/index.css +1464 -1257
  6. package/dist/material.css +203 -171
  7. package/dist/minimal.css +171 -147
  8. package/dist/rokkit.css +189 -113
  9. package/package.json +8 -2
  10. package/src/base/breadcrumbs.css +28 -28
  11. package/src/base/button.css +10 -3
  12. package/src/base/card.css +17 -17
  13. package/src/base/carousel.css +67 -67
  14. package/src/base/display.css +8 -8
  15. package/src/base/floating-navigation.css +32 -8
  16. package/src/base/graph-paper.css +49 -49
  17. package/src/base/pill.css +35 -35
  18. package/src/base/progress.css +21 -21
  19. package/src/base/range.css +57 -57
  20. package/src/base/rating.css +20 -18
  21. package/src/base/reveal.css +16 -16
  22. package/src/base/search-filter.css +61 -61
  23. package/src/base/shine.css +7 -7
  24. package/src/base/stepper.css +75 -75
  25. package/src/base/switch.css +55 -55
  26. package/src/base/table.css +49 -49
  27. package/src/base/tilt.css +4 -4
  28. package/src/base/timeline.css +38 -38
  29. package/src/base/tree.css +48 -15
  30. package/src/glass/button.css +11 -10
  31. package/src/glass/card.css +16 -13
  32. package/src/glass/floating-action.css +13 -13
  33. package/src/glass/floating-navigation.css +2 -2
  34. package/src/glass/input.css +32 -30
  35. package/src/glass/list.css +21 -21
  36. package/src/glass/menu.css +16 -16
  37. package/src/glass/range.css +10 -10
  38. package/src/glass/search-filter.css +8 -8
  39. package/src/glass/select.css +32 -32
  40. package/src/glass/switch.css +6 -6
  41. package/src/glass/table.css +14 -14
  42. package/src/glass/tabs.css +3 -3
  43. package/src/glass/timeline.css +8 -8
  44. package/src/glass/toggle.css +7 -7
  45. package/src/glass/toolbar.css +15 -15
  46. package/src/glass/tree.css +27 -21
  47. package/src/material/button.css +12 -8
  48. package/src/material/card.css +1 -1
  49. package/src/material/input.css +30 -14
  50. package/src/material/list.css +27 -23
  51. package/src/material/menu.css +16 -16
  52. package/src/material/range.css +11 -11
  53. package/src/material/search-filter.css +8 -8
  54. package/src/material/select.css +31 -31
  55. package/src/material/switch.css +6 -6
  56. package/src/material/table.css +20 -16
  57. package/src/material/timeline.css +8 -8
  58. package/src/material/toggle.css +7 -7
  59. package/src/material/toolbar.css +17 -16
  60. package/src/material/tree.css +22 -19
  61. package/src/minimal/button.css +7 -4
  62. package/src/minimal/card.css +13 -11
  63. package/src/minimal/floating-action.css +11 -11
  64. package/src/minimal/floating-navigation.css +1 -1
  65. package/src/minimal/input.css +14 -10
  66. package/src/minimal/list.css +27 -23
  67. package/src/minimal/menu.css +15 -15
  68. package/src/minimal/range.css +10 -10
  69. package/src/minimal/search-filter.css +8 -8
  70. package/src/minimal/select.css +4 -2
  71. package/src/minimal/switch.css +6 -6
  72. package/src/minimal/table.css +17 -15
  73. package/src/minimal/tabs.css +5 -3
  74. package/src/minimal/timeline.css +7 -7
  75. package/src/minimal/toggle.css +7 -7
  76. package/src/minimal/toolbar.css +17 -16
  77. package/src/minimal/tree.css +26 -20
  78. package/src/rokkit/button.css +40 -11
  79. package/src/rokkit/card.css +16 -14
  80. package/src/rokkit/floating-navigation.css +2 -2
  81. package/src/rokkit/input.css +10 -6
  82. package/src/rokkit/list.css +7 -2
  83. package/src/rokkit/range.css +11 -11
  84. package/src/rokkit/search-filter.css +8 -8
  85. package/src/rokkit/select.css +41 -36
  86. package/src/rokkit/switch.css +6 -6
  87. package/src/rokkit/table.css +17 -15
  88. package/src/rokkit/tabs.css +11 -6
  89. package/src/rokkit/timeline.css +8 -8
  90. package/src/rokkit/tree.css +35 -9
package/src/base/pill.css CHANGED
@@ -1,57 +1,57 @@
1
1
  /* Pill — base structural styles */
2
2
 
3
3
  [data-pill] {
4
- display: inline-flex;
5
- align-items: center;
6
- gap: 0.375rem;
7
- padding: 0.125rem 0.625rem;
8
- border-radius: 9999px;
9
- font-size: 0.875rem;
10
- line-height: 1.25rem;
11
- white-space: nowrap;
12
- outline: none;
13
- vertical-align: middle;
4
+ display: inline-flex;
5
+ align-items: center;
6
+ gap: 0.375rem;
7
+ padding: 0.125rem 0.625rem;
8
+ border-radius: 9999px;
9
+ font-size: 0.875rem;
10
+ line-height: 1.25rem;
11
+ white-space: nowrap;
12
+ outline: none;
13
+ vertical-align: middle;
14
14
  }
15
15
 
16
16
  [data-pill-icon] {
17
- font-size: 0.875rem;
18
- flex-shrink: 0;
17
+ font-size: 0.875rem;
18
+ flex-shrink: 0;
19
19
  }
20
20
 
21
21
  [data-pill-text] {
22
- overflow: hidden;
23
- text-overflow: ellipsis;
22
+ overflow: hidden;
23
+ text-overflow: ellipsis;
24
24
  }
25
25
 
26
26
  [data-pill-remove] {
27
- display: inline-flex;
28
- align-items: center;
29
- justify-content: center;
30
- width: 1rem;
31
- height: 1rem;
32
- padding: 0;
33
- margin-left: 0.125rem;
34
- border: none;
35
- border-radius: 9999px;
36
- cursor: pointer;
37
- background: transparent;
38
- color: inherit;
39
- opacity: 0.6;
40
- transition: opacity 0.15s ease;
41
- font-size: 0.75rem;
42
- flex-shrink: 0;
27
+ display: inline-flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ width: 1rem;
31
+ height: 1rem;
32
+ padding: 0;
33
+ margin-left: 0.125rem;
34
+ border: none;
35
+ border-radius: 9999px;
36
+ cursor: pointer;
37
+ background: transparent;
38
+ color: inherit;
39
+ opacity: 0.6;
40
+ transition: opacity 0.15s ease;
41
+ font-size: 0.75rem;
42
+ flex-shrink: 0;
43
43
  }
44
44
 
45
45
  [data-pill-remove]:hover {
46
- opacity: 1;
46
+ opacity: 1;
47
47
  }
48
48
 
49
49
  [data-pill-remove]:disabled {
50
- opacity: 0.3;
51
- cursor: default;
50
+ opacity: 0.3;
51
+ cursor: default;
52
52
  }
53
53
 
54
54
  [data-pill-disabled] {
55
- opacity: 0.5;
56
- cursor: default;
55
+ opacity: 0.5;
56
+ cursor: default;
57
57
  }
@@ -1,34 +1,34 @@
1
1
  /* ProgressBar — base structural styles */
2
2
 
3
3
  [data-progress] {
4
- position: relative;
5
- width: 100%;
6
- height: 0.5rem;
7
- border-radius: 9999px;
8
- overflow: hidden;
4
+ position: relative;
5
+ width: 100%;
6
+ height: 0.5rem;
7
+ border-radius: 9999px;
8
+ overflow: hidden;
9
9
  }
10
10
 
11
11
  [data-progress-bar] {
12
- height: 100%;
13
- border-radius: 9999px;
14
- transition: width 0.3s ease;
12
+ height: 100%;
13
+ border-radius: 9999px;
14
+ transition: width 0.3s ease;
15
15
  }
16
16
 
17
17
  [data-progress][data-indeterminate] [data-progress-bar] {
18
- animation: progress-indeterminate 1.5s ease-in-out infinite;
18
+ animation: progress-indeterminate 1.5s ease-in-out infinite;
19
19
  }
20
20
 
21
21
  @keyframes progress-indeterminate {
22
- 0% {
23
- transform: translateX(-100%);
24
- width: 50%;
25
- }
26
- 50% {
27
- transform: translateX(50%);
28
- width: 50%;
29
- }
30
- 100% {
31
- transform: translateX(200%);
32
- width: 50%;
33
- }
22
+ 0% {
23
+ transform: translateX(-100%);
24
+ width: 50%;
25
+ }
26
+ 50% {
27
+ transform: translateX(50%);
28
+ width: 50%;
29
+ }
30
+ 100% {
31
+ transform: translateX(200%);
32
+ width: 50%;
33
+ }
34
34
  }
@@ -10,16 +10,16 @@
10
10
  ============================================================================= */
11
11
 
12
12
  [data-range] {
13
- position: relative;
14
- display: grid;
15
- grid-template-rows: auto auto;
16
- height: 2.5rem;
17
- user-select: none;
13
+ position: relative;
14
+ display: grid;
15
+ grid-template-rows: auto auto;
16
+ height: 2.5rem;
17
+ user-select: none;
18
18
  }
19
19
 
20
20
  [data-range][data-disabled] {
21
- pointer-events: none;
22
- opacity: 0.5;
21
+ pointer-events: none;
22
+ opacity: 0.5;
23
23
  }
24
24
 
25
25
  /* =============================================================================
@@ -27,27 +27,27 @@
27
27
  ============================================================================= */
28
28
 
29
29
  [data-range-track] {
30
- position: relative;
31
- display: flex;
32
- align-items: center;
33
- height: 2rem;
34
- cursor: pointer;
30
+ position: relative;
31
+ display: flex;
32
+ align-items: center;
33
+ height: 2rem;
34
+ cursor: pointer;
35
35
  }
36
36
 
37
37
  [data-range-bar] {
38
- position: relative;
39
- width: 100%;
40
- height: 4px;
41
- border-radius: 9999px;
38
+ position: relative;
39
+ width: 100%;
40
+ height: 4px;
41
+ border-radius: 9999px;
42
42
  }
43
43
 
44
44
  [data-range-selected] {
45
- position: absolute;
46
- top: 50%;
47
- height: 4px;
48
- transform: translateY(-50%);
49
- border-radius: 9999px;
50
- pointer-events: none;
45
+ position: absolute;
46
+ top: 50%;
47
+ height: 4px;
48
+ transform: translateY(-50%);
49
+ border-radius: 9999px;
50
+ pointer-events: none;
51
51
  }
52
52
 
53
53
  /* =============================================================================
@@ -55,30 +55,30 @@
55
55
  ============================================================================= */
56
56
 
57
57
  [data-range-thumb] {
58
- position: absolute;
59
- top: 50%;
60
- width: 1rem;
61
- height: 1rem;
62
- border-radius: 9999px;
63
- transform: translate(-50%, -50%);
64
- cursor: pointer;
65
- z-index: 1;
66
- border: 2px solid transparent;
67
- box-sizing: border-box;
68
- transition: box-shadow 150ms ease;
58
+ position: absolute;
59
+ top: 50%;
60
+ width: 1rem;
61
+ height: 1rem;
62
+ border-radius: 9999px;
63
+ transform: translate(-50%, -50%);
64
+ cursor: pointer;
65
+ z-index: 1;
66
+ border: 2px solid transparent;
67
+ box-sizing: border-box;
68
+ transition: box-shadow 150ms ease;
69
69
  }
70
70
 
71
71
  [data-range-thumb]:focus {
72
- outline: none;
72
+ outline: none;
73
73
  }
74
74
 
75
75
  [data-range-thumb]:focus-visible {
76
- outline: none;
76
+ outline: none;
77
77
  }
78
78
 
79
79
  [data-range-thumb][data-disabled] {
80
- pointer-events: none;
81
- cursor: not-allowed;
80
+ pointer-events: none;
81
+ cursor: not-allowed;
82
82
  }
83
83
 
84
84
  /* =============================================================================
@@ -86,36 +86,36 @@
86
86
  ============================================================================= */
87
87
 
88
88
  [data-range-ticks] {
89
- display: grid;
90
- grid-gap: calc((100% - 1rem * (var(--count) + 1)) / var(--count));
91
- grid-template-columns: repeat(var(--count), 1rem) 1rem;
92
- grid-template-rows: 7px auto;
89
+ display: grid;
90
+ grid-gap: calc((100% - 1rem * (var(--count) + 1)) / var(--count));
91
+ grid-template-columns: repeat(var(--count), 1rem) 1rem;
92
+ grid-template-rows: 7px auto;
93
93
  }
94
94
 
95
95
  [data-range-tick] {
96
- display: grid;
97
- grid-template-columns: repeat(2, 1fr);
98
- cursor: pointer;
99
- user-select: none;
96
+ display: grid;
97
+ grid-template-columns: repeat(2, 1fr);
98
+ cursor: pointer;
99
+ user-select: none;
100
100
  }
101
101
 
102
102
  [data-range-tick][data-disabled] {
103
- pointer-events: none;
104
- cursor: not-allowed;
105
- opacity: 0.5;
103
+ pointer-events: none;
104
+ cursor: not-allowed;
105
+ opacity: 0.5;
106
106
  }
107
107
 
108
108
  [data-tick-bar] {
109
- grid-column-start: 2;
110
- height: 5px;
111
- border-left-width: 1px;
112
- border-left-style: solid;
109
+ grid-column-start: 2;
110
+ height: 5px;
111
+ border-left-width: 1px;
112
+ border-left-style: solid;
113
113
  }
114
114
 
115
115
  [data-tick-label] {
116
- grid-column: span 2;
117
- display: flex;
118
- justify-content: center;
119
- font-size: 0.625rem;
120
- line-height: 1.2;
116
+ grid-column: span 2;
117
+ display: flex;
118
+ justify-content: center;
119
+ font-size: 0.625rem;
120
+ line-height: 1.2;
121
121
  }
@@ -1,40 +1,42 @@
1
1
  /* Rating — base structural styles */
2
2
 
3
3
  [data-rating] {
4
- display: inline-flex;
5
- align-items: center;
6
- gap: 0.25rem;
7
- outline: none;
8
- cursor: pointer;
4
+ display: inline-flex;
5
+ align-items: center;
6
+ gap: 0.25rem;
7
+ outline: none;
8
+ cursor: pointer;
9
9
  }
10
10
 
11
11
  [data-rating-disabled] {
12
- cursor: default;
13
- opacity: 0.5;
12
+ cursor: default;
13
+ opacity: 0.5;
14
14
  }
15
15
 
16
16
  [data-rating-item] {
17
- display: inline-flex;
18
- align-items: center;
19
- justify-content: center;
20
- cursor: pointer;
21
- font-size: 1.5rem;
22
- transition: transform 0.15s ease, opacity 0.15s ease;
23
- user-select: none;
17
+ display: inline-flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+ cursor: pointer;
21
+ font-size: 1.5rem;
22
+ transition:
23
+ transform 0.15s ease,
24
+ opacity 0.15s ease;
25
+ user-select: none;
24
26
  }
25
27
 
26
28
  [data-rating-disabled] [data-rating-item] {
27
- cursor: default;
29
+ cursor: default;
28
30
  }
29
31
 
30
32
  [data-rating-item]:not([data-filled]) {
31
- opacity: 0.3;
33
+ opacity: 0.3;
32
34
  }
33
35
 
34
36
  [data-rating-item][data-hovering] {
35
- transform: scale(1.15);
37
+ transform: scale(1.15);
36
38
  }
37
39
 
38
40
  [data-rating-item][data-filled] {
39
- opacity: 1;
41
+ opacity: 1;
40
42
  }
@@ -1,37 +1,37 @@
1
1
  /* Reveal — scroll-triggered entry animations */
2
2
 
3
3
  [data-reveal] {
4
- opacity: 0;
5
- transition:
6
- opacity var(--reveal-duration, 600ms) var(--reveal-easing, cubic-bezier(0.4, 0, 0.2, 1)),
7
- translate var(--reveal-duration, 600ms) var(--reveal-easing, cubic-bezier(0.4, 0, 0.2, 1));
4
+ opacity: 0;
5
+ transition:
6
+ opacity var(--reveal-duration, 600ms) var(--reveal-easing, cubic-bezier(0.4, 0, 0.2, 1)),
7
+ translate var(--reveal-duration, 600ms) var(--reveal-easing, cubic-bezier(0.4, 0, 0.2, 1));
8
8
  }
9
9
 
10
10
  [data-reveal='up'] {
11
- translate: 0 var(--reveal-distance, 1.5rem);
11
+ translate: 0 var(--reveal-distance, 1.5rem);
12
12
  }
13
13
  [data-reveal='down'] {
14
- translate: 0 calc(-1 * var(--reveal-distance, 1.5rem));
14
+ translate: 0 calc(-1 * var(--reveal-distance, 1.5rem));
15
15
  }
16
16
  [data-reveal='left'] {
17
- translate: var(--reveal-distance, 1.5rem) 0;
17
+ translate: var(--reveal-distance, 1.5rem) 0;
18
18
  }
19
19
  [data-reveal='right'] {
20
- translate: calc(-1 * var(--reveal-distance, 1.5rem)) 0;
20
+ translate: calc(-1 * var(--reveal-distance, 1.5rem)) 0;
21
21
  }
22
22
  [data-reveal='none'] {
23
- translate: 0 0;
23
+ translate: 0 0;
24
24
  }
25
25
 
26
26
  [data-reveal][data-reveal-visible] {
27
- opacity: 1;
28
- translate: 0 0;
27
+ opacity: 1;
28
+ translate: 0 0;
29
29
  }
30
30
 
31
31
  @media (prefers-reduced-motion: reduce) {
32
- [data-reveal] {
33
- transition-duration: 0ms !important;
34
- opacity: 1 !important;
35
- translate: 0 !important;
36
- }
32
+ [data-reveal] {
33
+ transition-duration: 0ms !important;
34
+ opacity: 1 !important;
35
+ translate: 0 !important;
36
+ }
37
37
  }
@@ -10,9 +10,9 @@
10
10
  ============================================================================= */
11
11
 
12
12
  [data-search-filter] {
13
- display: flex;
14
- flex-direction: column;
15
- gap: 0.375rem;
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: 0.375rem;
16
16
  }
17
17
 
18
18
  /* =============================================================================
@@ -20,41 +20,41 @@
20
20
  ============================================================================= */
21
21
 
22
22
  [data-search-input-wrapper] {
23
- display: flex;
24
- align-items: center;
25
- position: relative;
23
+ display: flex;
24
+ align-items: center;
25
+ position: relative;
26
26
  }
27
27
 
28
28
  [data-search-input] {
29
- width: 100%;
30
- box-sizing: border-box;
31
- border: 1px solid transparent;
32
- border-radius: 0.375rem;
33
- outline: none;
34
- font-size: inherit;
35
- background: transparent;
29
+ width: 100%;
30
+ box-sizing: border-box;
31
+ border: 1px solid transparent;
32
+ border-radius: 0.375rem;
33
+ outline: none;
34
+ font-size: inherit;
35
+ background: transparent;
36
36
  }
37
37
 
38
38
  /* Remove native search decoration */
39
39
  [data-search-input]::-webkit-search-decoration,
40
40
  [data-search-input]::-webkit-search-cancel-button {
41
- -webkit-appearance: none;
42
- appearance: none;
41
+ -webkit-appearance: none;
42
+ appearance: none;
43
43
  }
44
44
 
45
45
  [data-search-clear] {
46
- position: absolute;
47
- right: 0.375rem;
48
- display: flex;
49
- align-items: center;
50
- justify-content: center;
51
- border: none;
52
- background: none;
53
- cursor: pointer;
54
- font-size: 1.125rem;
55
- line-height: 1;
56
- padding: 0.125rem 0.25rem;
57
- border-radius: 0.25rem;
46
+ position: absolute;
47
+ right: 0.375rem;
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ border: none;
52
+ background: none;
53
+ cursor: pointer;
54
+ font-size: 1.125rem;
55
+ line-height: 1;
56
+ padding: 0.125rem 0.25rem;
57
+ border-radius: 0.25rem;
58
58
  }
59
59
 
60
60
  /* =============================================================================
@@ -62,37 +62,37 @@
62
62
  ============================================================================= */
63
63
 
64
64
  [data-search-tags] {
65
- display: flex;
66
- flex-wrap: wrap;
67
- gap: 0.25rem;
65
+ display: flex;
66
+ flex-wrap: wrap;
67
+ gap: 0.25rem;
68
68
  }
69
69
 
70
70
  [data-search-tag] {
71
- display: inline-flex;
72
- align-items: center;
73
- gap: 0.25rem;
74
- border-radius: 0.25rem;
75
- font-size: 0.75rem;
76
- white-space: nowrap;
71
+ display: inline-flex;
72
+ align-items: center;
73
+ gap: 0.25rem;
74
+ border-radius: 0.25rem;
75
+ font-size: 0.75rem;
76
+ white-space: nowrap;
77
77
  }
78
78
 
79
79
  [data-search-tag-text] {
80
- max-width: 200px;
81
- overflow: hidden;
82
- text-overflow: ellipsis;
80
+ max-width: 200px;
81
+ overflow: hidden;
82
+ text-overflow: ellipsis;
83
83
  }
84
84
 
85
85
  [data-search-tag-remove] {
86
- display: flex;
87
- align-items: center;
88
- justify-content: center;
89
- border: none;
90
- background: none;
91
- cursor: pointer;
92
- font-size: 0.875rem;
93
- line-height: 1;
94
- padding: 0;
95
- border-radius: 0.125rem;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ border: none;
90
+ background: none;
91
+ cursor: pointer;
92
+ font-size: 0.875rem;
93
+ line-height: 1;
94
+ padding: 0;
95
+ border-radius: 0.125rem;
96
96
  }
97
97
 
98
98
  /* =============================================================================
@@ -100,33 +100,33 @@
100
100
  ============================================================================= */
101
101
 
102
102
  [data-search-filter][data-size='sm'] [data-search-input] {
103
- padding: 0.25rem 0.5rem;
104
- font-size: 0.75rem;
103
+ padding: 0.25rem 0.5rem;
104
+ font-size: 0.75rem;
105
105
  }
106
106
 
107
107
  [data-search-filter][data-size='md'] [data-search-input],
108
108
  [data-search-filter]:not([data-size]) [data-search-input] {
109
- padding: 0.375rem 0.625rem;
110
- font-size: 0.875rem;
109
+ padding: 0.375rem 0.625rem;
110
+ font-size: 0.875rem;
111
111
  }
112
112
 
113
113
  [data-search-filter][data-size='lg'] [data-search-input] {
114
- padding: 0.5rem 0.75rem;
115
- font-size: 1rem;
114
+ padding: 0.5rem 0.75rem;
115
+ font-size: 1rem;
116
116
  }
117
117
 
118
118
  [data-search-filter][data-size='sm'] [data-search-tag] {
119
- padding: 0.125rem 0.375rem;
120
- font-size: 0.625rem;
119
+ padding: 0.125rem 0.375rem;
120
+ font-size: 0.625rem;
121
121
  }
122
122
 
123
123
  [data-search-filter][data-size='md'] [data-search-tag],
124
124
  [data-search-filter]:not([data-size]) [data-search-tag] {
125
- padding: 0.125rem 0.5rem;
126
- font-size: 0.75rem;
125
+ padding: 0.125rem 0.5rem;
126
+ font-size: 0.75rem;
127
127
  }
128
128
 
129
129
  [data-search-filter][data-size='lg'] [data-search-tag] {
130
- padding: 0.25rem 0.5rem;
131
- font-size: 0.875rem;
130
+ padding: 0.25rem 0.5rem;
131
+ font-size: 0.875rem;
132
132
  }
@@ -1,14 +1,14 @@
1
1
  /* Shine — base structural styles */
2
2
 
3
3
  [data-shine-filter] {
4
- pointer-events: none;
5
- position: fixed;
6
- inset: 0;
7
- width: 0;
8
- height: 0;
9
- overflow: visible;
4
+ pointer-events: none;
5
+ position: fixed;
6
+ inset: 0;
7
+ width: 0;
8
+ height: 0;
9
+ overflow: visible;
10
10
  }
11
11
 
12
12
  [data-shine] {
13
- display: inline-block;
13
+ display: inline-block;
14
14
  }