@mantine/charts 7.6.0 → 7.6.1

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,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/charts",
3
- "version": "7.6.0",
3
+ "version": "7.6.1",
4
4
  "description": "Charts components built with recharts and Mantine",
5
5
  "homepage": "https://mantine.dev/",
6
6
  "license": "MIT",
@@ -35,15 +35,15 @@
35
35
  "directory": "packages/@mantine/charts"
36
36
  },
37
37
  "peerDependencies": {
38
- "@mantine/core": "7.6.0",
39
- "@mantine/hooks": "7.6.0",
38
+ "@mantine/core": "7.6.1",
39
+ "@mantine/hooks": "7.6.1",
40
40
  "react": "^18.2.0",
41
41
  "react-dom": "^18.2.0",
42
42
  "recharts": "^2.10.3"
43
43
  },
44
44
  "devDependencies": {
45
- "@mantine-tests/core": "1.0.1",
46
- "@mantine/core": "7.6.0",
47
- "@mantine/hooks": "7.6.0"
45
+ "@mantine-tests/core": "1.1.0",
46
+ "@mantine/core": "7.6.1",
47
+ "@mantine/hooks": "7.6.1"
48
48
  }
49
49
  }
package/styles.css CHANGED
@@ -1 +1,192 @@
1
- .m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-inline-end:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}:where([data-mantine-color-scheme=light]) .m-1f271cf7{--chart-grid-color:rgba(173,181,189,.6);--chart-text-color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-1f271cf7{--chart-grid-color:hsla(0,0%,41%,.6);--chart-text-color:var(--mantine-color-dark-1)}.m-1f271cf7 :where(text){fill:var(--chart-text-color,var(--mantine-color-dimmed));font-size:var(--mantine-font-size-xs);user-select:none}.m-cf06f58c{height:100%;width:100%}
1
+ .m-e4d36c9b {
2
+ min-width: calc(12.5rem * var(--mantine-scale));
3
+ background-color: var(--mantine-color-body);
4
+ box-shadow: var(--mantine-shadow-md);
5
+ border-radius: var(--mantine-radius-default);
6
+ }
7
+
8
+ :where([data-mantine-color-scheme='light']) .m-e4d36c9b {
9
+ border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
10
+ }
11
+
12
+ :where([data-mantine-color-scheme='dark']) .m-e4d36c9b {
13
+ border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
14
+ }
15
+
16
+ .m-7f4bcb19 {
17
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
18
+ font-size: var(--mantine-font-size-md);
19
+ font-weight: 500;
20
+ color: var(--mantine-color-bright);
21
+ }
22
+
23
+ .m-3de554dd {
24
+ padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
25
+ padding-top: 0;
26
+ }
27
+
28
+ .m-e4d36c9b:where([data-type='radial']) :where(.m-3de554dd) {
29
+ padding-top: var(--mantine-spacing-sm);
30
+ }
31
+
32
+ .m-3de8964e {
33
+ font-size: var(--mantine-font-size-sm);
34
+ display: flex;
35
+ justify-content: space-between;
36
+ }
37
+
38
+ .m-3de8964e:where(.m-3de8964e + .m-3de8964e) {
39
+ margin-top: calc(var(--mantine-spacing-sm) / 2);
40
+ }
41
+
42
+ .m-50186d10 {
43
+ display: flex;
44
+ align-items: center;
45
+ gap: var(--mantine-spacing-sm);
46
+ margin-inline-end: var(--mantine-spacing-xl);
47
+ }
48
+
49
+ .m-501dadf9 {
50
+ color: var(--mantine-color-text);
51
+ font-size: var(--mantine-font-size-sm);
52
+ }
53
+
54
+ .m-50192318 {
55
+ color: var(--mantine-color-bright);
56
+ }
57
+
58
+ .m-847eaf {
59
+ display: flex;
60
+ flex-wrap: wrap;
61
+ align-items: center;
62
+ justify-content: flex-end;
63
+ height: 100%;
64
+ }
65
+
66
+ .m-847eaf:where([data-position='top']) {
67
+ padding-bottom: var(--mantine-spacing-md);
68
+ }
69
+
70
+ .m-847eaf:where([data-position='bottom']) {
71
+ padding-top: var(--mantine-spacing-md);
72
+ }
73
+
74
+ .m-17da7e62 {
75
+ display: flex;
76
+ align-items: center;
77
+ gap: calc(0.4375rem * var(--mantine-scale));
78
+ padding: calc(0.4375rem * var(--mantine-scale)) var(--mantine-spacing-xs);
79
+ border-radius: var(--mantine-radius-default);
80
+ line-height: 1;
81
+ }
82
+
83
+ @media (hover: hover) {
84
+ :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:hover) {
85
+ background-color: var(--mantine-color-gray-0);
86
+ }
87
+
88
+ :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:hover) {
89
+ background-color: var(--mantine-color-dark-5);
90
+ }
91
+ }
92
+
93
+ @media (hover: none) {
94
+ :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:active) {
95
+ background-color: var(--mantine-color-gray-0);
96
+ }
97
+
98
+ :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:active) {
99
+ background-color: var(--mantine-color-dark-5);
100
+ }
101
+ }
102
+
103
+ .m-8ff56c0d {
104
+ font-size: var(--mantine-font-size-sm);
105
+ margin: 0;
106
+ padding: 0;
107
+ }
108
+
109
+ .m-a50f3e58 {
110
+ display: block;
111
+ width: 100%;
112
+ }
113
+
114
+ :where([data-mantine-color-scheme='light']) .m-a50f3e58 {
115
+ --chart-grid-color: rgba(173, 181, 189, 0.6);
116
+ --chart-cursor-fill: rgba(173, 181, 189, 0.15);
117
+ }
118
+
119
+ :where([data-mantine-color-scheme='dark']) .m-a50f3e58 {
120
+ --chart-cursor-fill: rgba(105, 105, 105, 0.15);
121
+ --chart-grid-color: rgba(105, 105, 105, 0.6);
122
+ }
123
+
124
+ .m-a50f3e58 :where(text) {
125
+ font-family: var(--mantine-font-family);
126
+ color: var(--chart-text-color, var(--mantine-color-dimmed));
127
+ }
128
+
129
+ .m-af9188cb {
130
+ height: 100%;
131
+ width: 100%;
132
+ }
133
+
134
+ .m-a50a48bc {
135
+ stroke: var(--chart-grid-color);
136
+ }
137
+
138
+ .m-a507a517 {
139
+ color: var(--chart-grid-color);
140
+ }
141
+
142
+ .m-a410e613 {
143
+ min-height: var(--chart-size, auto);
144
+ height: var(--chart-size, auto);
145
+ width: var(--chart-size, auto);
146
+ min-width: var(--chart-size, auto);
147
+ }
148
+
149
+ .m-a410e613 :where(*) {
150
+ outline: 0;
151
+ }
152
+
153
+ .m-ddb0bfe3 {
154
+ fill: var(--mantine-color-text);
155
+ font-size: var(--mantine-font-size-sm);
156
+ }
157
+
158
+ .m-cd8943fd {
159
+ min-height: var(--chart-size, auto);
160
+ height: var(--chart-size, auto);
161
+ width: var(--chart-size, auto);
162
+ min-width: var(--chart-size, auto);
163
+ }
164
+
165
+ .m-cd8943fd :where(*) {
166
+ outline: 0;
167
+ }
168
+
169
+ .m-e3441f39 {
170
+ fill: var(--mantine-color-white);
171
+ font-size: var(--mantine-font-size-xs);
172
+ }
173
+
174
+ :where([data-mantine-color-scheme='light']) .m-1f271cf7 {
175
+ --chart-grid-color: rgba(173, 181, 189, 0.6);
176
+ --chart-text-color: var(--mantine-color-gray-7);
177
+ }
178
+ :where([data-mantine-color-scheme='dark']) .m-1f271cf7 {
179
+ --chart-grid-color: rgba(105, 105, 105, 0.6);
180
+ --chart-text-color: var(--mantine-color-dark-1);
181
+ }
182
+
183
+ .m-1f271cf7 :where(text) {
184
+ font-size: var(--mantine-font-size-xs);
185
+ fill: var(--chart-text-color, var(--mantine-color-dimmed));
186
+ user-select: none;
187
+ }
188
+
189
+ .m-cf06f58c {
190
+ height: 100%;
191
+ width: 100%;
192
+ }
package/styles.layer.css CHANGED
@@ -1 +1,193 @@
1
- @layer mantine {.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-inline-end:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}:where([data-mantine-color-scheme=light]) .m-1f271cf7{--chart-grid-color:rgba(173,181,189,.6);--chart-text-color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-1f271cf7{--chart-grid-color:hsla(0,0%,41%,.6);--chart-text-color:var(--mantine-color-dark-1)}.m-1f271cf7 :where(text){fill:var(--chart-text-color,var(--mantine-color-dimmed));font-size:var(--mantine-font-size-xs);user-select:none}.m-cf06f58c{height:100%;width:100%}}
1
+ @layer mantine {.m-e4d36c9b {
2
+ min-width: calc(12.5rem * var(--mantine-scale));
3
+ background-color: var(--mantine-color-body);
4
+ box-shadow: var(--mantine-shadow-md);
5
+ border-radius: var(--mantine-radius-default);
6
+ }
7
+
8
+ :where([data-mantine-color-scheme='light']) .m-e4d36c9b {
9
+ border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
10
+ }
11
+
12
+ :where([data-mantine-color-scheme='dark']) .m-e4d36c9b {
13
+ border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
14
+ }
15
+
16
+ .m-7f4bcb19 {
17
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
18
+ font-size: var(--mantine-font-size-md);
19
+ font-weight: 500;
20
+ color: var(--mantine-color-bright);
21
+ }
22
+
23
+ .m-3de554dd {
24
+ padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
25
+ padding-top: 0;
26
+ }
27
+
28
+ .m-e4d36c9b:where([data-type='radial']) :where(.m-3de554dd) {
29
+ padding-top: var(--mantine-spacing-sm);
30
+ }
31
+
32
+ .m-3de8964e {
33
+ font-size: var(--mantine-font-size-sm);
34
+ display: flex;
35
+ justify-content: space-between;
36
+ }
37
+
38
+ .m-3de8964e:where(.m-3de8964e + .m-3de8964e) {
39
+ margin-top: calc(var(--mantine-spacing-sm) / 2);
40
+ }
41
+
42
+ .m-50186d10 {
43
+ display: flex;
44
+ align-items: center;
45
+ gap: var(--mantine-spacing-sm);
46
+ margin-inline-end: var(--mantine-spacing-xl);
47
+ }
48
+
49
+ .m-501dadf9 {
50
+ color: var(--mantine-color-text);
51
+ font-size: var(--mantine-font-size-sm);
52
+ }
53
+
54
+ .m-50192318 {
55
+ color: var(--mantine-color-bright);
56
+ }
57
+
58
+ .m-847eaf {
59
+ display: flex;
60
+ flex-wrap: wrap;
61
+ align-items: center;
62
+ justify-content: flex-end;
63
+ height: 100%;
64
+ }
65
+
66
+ .m-847eaf:where([data-position='top']) {
67
+ padding-bottom: var(--mantine-spacing-md);
68
+ }
69
+
70
+ .m-847eaf:where([data-position='bottom']) {
71
+ padding-top: var(--mantine-spacing-md);
72
+ }
73
+
74
+ .m-17da7e62 {
75
+ display: flex;
76
+ align-items: center;
77
+ gap: calc(0.4375rem * var(--mantine-scale));
78
+ padding: calc(0.4375rem * var(--mantine-scale)) var(--mantine-spacing-xs);
79
+ border-radius: var(--mantine-radius-default);
80
+ line-height: 1;
81
+ }
82
+
83
+ @media (hover: hover) {
84
+ :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:hover) {
85
+ background-color: var(--mantine-color-gray-0);
86
+ }
87
+
88
+ :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:hover) {
89
+ background-color: var(--mantine-color-dark-5);
90
+ }
91
+ }
92
+
93
+ @media (hover: none) {
94
+ :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:active) {
95
+ background-color: var(--mantine-color-gray-0);
96
+ }
97
+
98
+ :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:active) {
99
+ background-color: var(--mantine-color-dark-5);
100
+ }
101
+ }
102
+
103
+ .m-8ff56c0d {
104
+ font-size: var(--mantine-font-size-sm);
105
+ margin: 0;
106
+ padding: 0;
107
+ }
108
+
109
+ .m-a50f3e58 {
110
+ display: block;
111
+ width: 100%;
112
+ }
113
+
114
+ :where([data-mantine-color-scheme='light']) .m-a50f3e58 {
115
+ --chart-grid-color: rgba(173, 181, 189, 0.6);
116
+ --chart-cursor-fill: rgba(173, 181, 189, 0.15);
117
+ }
118
+
119
+ :where([data-mantine-color-scheme='dark']) .m-a50f3e58 {
120
+ --chart-cursor-fill: rgba(105, 105, 105, 0.15);
121
+ --chart-grid-color: rgba(105, 105, 105, 0.6);
122
+ }
123
+
124
+ .m-a50f3e58 :where(text) {
125
+ font-family: var(--mantine-font-family);
126
+ color: var(--chart-text-color, var(--mantine-color-dimmed));
127
+ }
128
+
129
+ .m-af9188cb {
130
+ height: 100%;
131
+ width: 100%;
132
+ }
133
+
134
+ .m-a50a48bc {
135
+ stroke: var(--chart-grid-color);
136
+ }
137
+
138
+ .m-a507a517 {
139
+ color: var(--chart-grid-color);
140
+ }
141
+
142
+ .m-a410e613 {
143
+ min-height: var(--chart-size, auto);
144
+ height: var(--chart-size, auto);
145
+ width: var(--chart-size, auto);
146
+ min-width: var(--chart-size, auto);
147
+ }
148
+
149
+ .m-a410e613 :where(*) {
150
+ outline: 0;
151
+ }
152
+
153
+ .m-ddb0bfe3 {
154
+ fill: var(--mantine-color-text);
155
+ font-size: var(--mantine-font-size-sm);
156
+ }
157
+
158
+ .m-cd8943fd {
159
+ min-height: var(--chart-size, auto);
160
+ height: var(--chart-size, auto);
161
+ width: var(--chart-size, auto);
162
+ min-width: var(--chart-size, auto);
163
+ }
164
+
165
+ .m-cd8943fd :where(*) {
166
+ outline: 0;
167
+ }
168
+
169
+ .m-e3441f39 {
170
+ fill: var(--mantine-color-white);
171
+ font-size: var(--mantine-font-size-xs);
172
+ }
173
+
174
+ :where([data-mantine-color-scheme='light']) .m-1f271cf7 {
175
+ --chart-grid-color: rgba(173, 181, 189, 0.6);
176
+ --chart-text-color: var(--mantine-color-gray-7);
177
+ }
178
+ :where([data-mantine-color-scheme='dark']) .m-1f271cf7 {
179
+ --chart-grid-color: rgba(105, 105, 105, 0.6);
180
+ --chart-text-color: var(--mantine-color-dark-1);
181
+ }
182
+
183
+ .m-1f271cf7 :where(text) {
184
+ font-size: var(--mantine-font-size-xs);
185
+ fill: var(--chart-text-color, var(--mantine-color-dimmed));
186
+ user-select: none;
187
+ }
188
+
189
+ .m-cf06f58c {
190
+ height: 100%;
191
+ width: 100%;
192
+ }
193
+ }