@meduza/ui-kit-2 0.2.25 → 0.2.27

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.
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.2.25",
2
+ "version": "0.2.27",
3
3
  "license": "MIT",
4
4
  "description": "UIKit for Meduza",
5
5
  "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -27,6 +27,10 @@
27
27
  }
28
28
  }
29
29
 
30
+ .root:first-child {
31
+ margin-top: 0;
32
+ }
33
+
30
34
  .root::before {
31
35
  position: absolute;
32
36
  bottom: 0;
@@ -1,7 +1,7 @@
1
1
  @import '../vars.css';
2
2
 
3
3
  .root {
4
- margin-bottom: 17px;
4
+ margin-bottom: 30px;
5
5
 
6
6
  font-family: $secondaryFont;
7
7
  font-size: 16px;
@@ -9,11 +9,7 @@
9
9
  }
10
10
 
11
11
  .root:empty {
12
- margin-bottom: 0;
13
- }
14
-
15
- .root:empty::before {
16
- margin-bottom: 9px;
12
+ display: none;
17
13
  }
18
14
 
19
15
  .root::before {
@@ -21,18 +17,13 @@
21
17
 
22
18
  width: 120px;
23
19
  height: 1px;
24
- margin-bottom: 15px;
20
+ margin-bottom: 18px;
25
21
 
26
22
  content: '';
27
23
 
28
24
  background: #000;
29
25
  }
30
26
 
31
- .root p {
32
- margin-top: 8px;
33
- margin-bottom: 0;
34
- }
35
-
36
27
  .root a {
37
28
  text-decoration: none;
38
29
 
@@ -48,19 +39,20 @@
48
39
  background-color: #4f4f4f;
49
40
  }
50
41
 
51
- .note_credit {
52
- color: #666;
53
-
54
- font-size: 12px;
55
- line-height: 15px;
42
+ .root p {
43
+ margin-top: 0;
44
+ margin-bottom: 0;
56
45
  }
57
46
 
58
- .root .note_credit {
47
+ .root p + p {
59
48
  margin-top: 6px;
60
49
  }
61
50
 
62
- .note_credit:only-child {
63
- margin-top: 0;
51
+ .note_credit {
52
+ color: #666;
53
+
54
+ font-size: 12px;
55
+ line-height: 15px;
64
56
  }
65
57
 
66
58
  .note_caption b {
@@ -207,9 +207,11 @@
207
207
  }
208
208
 
209
209
  .shareBookmark {
210
- width: 8px;
210
+ width: 11px;
211
211
  height: auto;
212
212
 
213
+ stroke-width: 1.2px;
214
+
213
215
  cursor: pointer;
214
216
  }
215
217
 
@@ -196,10 +196,10 @@ export const icons = {
196
196
  },
197
197
 
198
198
  shareBookmark: {
199
- width: 8,
200
- height: 11,
199
+ width: 11,
200
+ height: 15,
201
201
  content:
202
- '<path clip-rule="evenodd" d="M7 10 4 7l-3 3V1h6v9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>'
202
+ '<path clip-rule="evenodd" d="M10 14 5.5 9.667 1 14V1h9v13Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>'
203
203
  },
204
204
 
205
205
  receipt: {
@@ -8,11 +8,23 @@
8
8
  font-family: $secondaryFont;
9
9
  }
10
10
 
11
+ .root::before {
12
+ display: block;
13
+
14
+ width: 120px;
15
+ height: 1px;
16
+ margin-bottom: 9px;
17
+
18
+ content: '';
19
+
20
+ background: #000;
21
+ }
22
+
11
23
  .list {
12
24
  display: flex;
13
25
  flex-flow: row wrap;
14
26
 
15
- margin: 0 0 0 -11px;
27
+ margin: 0 -17px;
16
28
  padding: 0;
17
29
 
18
30
  list-style: none;
@@ -22,8 +34,8 @@
22
34
  position: relative;
23
35
 
24
36
  height: 30px;
25
- padding-right: 11px;
26
- padding-left: 11px;
37
+ padding-right: 17px;
38
+ padding-left: 17px;
27
39
 
28
40
  cursor: pointer;
29
41
  transition: color 250ms ease;
@@ -41,26 +53,28 @@
41
53
  .item::before {
42
54
  position: absolute;
43
55
  top: 50%;
44
- left: 0;
56
+ left: -1px;
45
57
 
46
58
  width: 2px;
47
59
  height: 2px;
48
- background-color: #000;
49
- border-radius: 1px;
60
+
50
61
  content: '';
51
62
  transform: translateY(-50%) translateY(1px);
63
+
64
+ border-radius: 1px;
65
+ background-color: #000;
52
66
  }
53
67
 
54
68
  .item:empty {
55
69
  display: none;
56
70
  }
57
71
 
58
- .isInTopbar {
59
- height: 100%;
72
+ .isInTopbar::before {
73
+ content: none;
60
74
  }
61
75
 
62
76
  .isInTopbar .item {
63
- height: 100%;
77
+ height: 45px;
64
78
  }
65
79
 
66
80
  .center {
@@ -74,47 +88,41 @@
74
88
  margin-top: 11px;
75
89
 
76
90
  @media $mobile {
91
+ margin-right: auto;
92
+ margin-left: auto;
93
+ max-width: 460px;
77
94
  margin-top: 18px;
78
95
  }
79
96
  }
80
97
 
81
- .game .list,
82
- .gameSurvey .list {
83
- justify-content: center;
84
- max-width: 372px;
85
- margin-left: auto;
86
- margin-right: auto;
87
-
88
- @media $landscapeTablet {
89
- display: flex;
90
- max-width: 650px;
98
+ .game .list {
99
+ @media $mobile {
100
+ justify-content: center;
91
101
  }
92
102
  }
93
103
 
94
- .game .item:nth-last-child(2)::before,
95
- .gameSurvey .item:nth-last-child(2)::before {
104
+ .gameSurvey::before,
105
+ .slide::before,
106
+ .card::before,
107
+ .game::before {
96
108
  content: none;
97
-
98
- @media $landscapeTablet {
99
- content: '';
100
- }
101
109
  }
102
110
 
103
- .gameSurvey .item:first-child::before,
111
+ .game .item:nth-last-child(2)::before,
104
112
  .game .item:first-child::before {
105
- content: none;
106
- }
107
-
108
- .game .list,
109
- .gameSurvey .list {
110
- @media $landscapeTablet {
111
- margin-left: 0;
113
+ @media $mobile {
114
+ content: none;
112
115
  }
113
116
  }
114
117
 
115
118
  .isDark .item::before,
116
119
  .dark .item::before {
117
- border-left-color: rgba(255, 255, 255, 0.2);
120
+ background-color: #fff;
121
+ }
122
+
123
+ .isDark::before,
124
+ .dark::before {
125
+ background-color: #4f4f4f;
118
126
  }
119
127
 
120
128
  [data-context='prodano'] .root {
@@ -1,6 +1,8 @@
1
1
  @import '../vars.css';
2
2
 
3
3
  .root {
4
+ display: block;
5
+
4
6
  height: 100%;
5
7
  margin: 0;
6
8
  padding: 0 1px 0 0;
@@ -13,11 +15,11 @@
13
15
  background-color: transparent;
14
16
 
15
17
  font-family: $secondaryFont;
16
- font-size: 12px;
17
- font-weight: 600;
18
+ font-weight: normal;
18
19
  line-height: 1;
19
20
 
20
21
  appearance: none;
22
+ font-size: 16px;
21
23
  }
22
24
 
23
25
  .root::after {
@@ -84,13 +86,12 @@
84
86
 
85
87
  .icon {
86
88
  display: inline-block;
87
- vertical-align: middle;
88
- margin-top: -1px;
89
- padding-right: 5px;
90
89
 
91
- @media $landscapeTablet {
92
- padding-left: 5px;
93
- }
90
+ margin-top: -2px;
91
+ padding-right: 8px;
92
+ padding-left: 4px;
93
+
94
+ vertical-align: middle;
94
95
  }
95
96
 
96
97
  .text {
@@ -100,10 +101,13 @@
100
101
  }
101
102
 
102
103
  .counter {
103
- color: #8c8c8c;
104
104
  display: inline-block;
105
- vertical-align: middle;
105
+
106
106
  padding-left: 3px;
107
+
108
+ vertical-align: middle;
109
+
110
+ color: #8c8c8c;
107
111
  }
108
112
 
109
113
  .counter:empty {