@vue-ui-kit/ant 2.2.2 → 2.3.0

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/README.md CHANGED
@@ -182,7 +182,7 @@ module.exports = {
182
182
  node_modules/@vue-ui-kit/ant/
183
183
  ├── dist/
184
184
  │ ├── style.css # 编译后的CSS
185
- │ └── style.scss # SCSS源文件(已内联variables)
185
+ │ └── style.scss # SCSS源文件
186
186
  └── src/packages/styles/ # 源文件(开发时参考)
187
187
  ```
188
188
 
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";:root{--p-theme-bg: #fff;--collapsible-card-body-padding: 12px}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.text-slate-5{color:#64748b}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-canvas-pagination.ant-pagination{padding:16px 0}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-wrapper .p-error-hang-out .ant-form-item-explain-error{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;overflow:hidden!important;transition:none!important}.p-wrapper .ant-form-item-explain-error{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s,max-height .3s ease-out .3s}.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error{opacity:1;transform:translateY(0);max-height:100px}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .p-canvas-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .h-lack .ant-table-wrapper .ant-table-pagination.ant-pagination{padding:unset;margin-top:8px}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{flex:1;height:0;overflow-y:hidden;border-radius:unset}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-container>.ant-table-body{position:relative}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-wrapper .ant-table-cell:not(.normal-break){word-break:break-all}.p-error-group-tab{position:relative;overflow:visible;color:#f5222d!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.8em;animation:heartbeat 2s infinite}.ant-picker-dropdown .ant-picker-footer{padding-left:4px}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-error-hang-out .ant-form-item-explain-error{display:none}.no-error-border{border-color:#d9d9d9!important}.no-error-border:focus{border-color:#4096ff!important}@media (max-width: 575px){.p-wrapper .ant-form .ant-form-item .ant-form-item-label{justify-content:flex-start}}.collapsible-card{background-color:#fff;border-color:#f0f0f0}.collapsible-card .ant-collapse-header{padding:0 12px;min-height:38px;display:flex;align-items:center;font-weight:600}.collapsible-card .ant-collapse-content{border-color:#f0f0f0}.collapsible-card .ant-collapse-content .ant-collapse-content-box{padding:var(--collapsible-card-body-padding, 12px)}.collapsible-card .ant-collapse-item{border-color:#f0f0f0}.canvas-cell{display:flex;flex-direction:column;justify-content:center;align-items:start;padding:0 8px}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@keyframes heartbeat{0%{transform:scale(1)}6%{transform:scale(1.22)}12%{transform:scale(1)}18%{transform:scale(1.18)}24%{transform:scale(1)}48%{transform:scale(1)}54%{transform:scale(1.22)}60%{transform:scale(1)}66%{transform:scale(1.18)}72%{transform:scale(1)}to{transform:scale(1)}}
1
+ @charset "UTF-8";.p-pane{background-color:var(--p-theme-bg, #fff);padding:16px;border-radius:4px}.text-slate-5{color:#64748b}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg, #fff)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-canvas-pagination.ant-pagination{padding:16px 0}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:var(--p-border-color, #d9d9d9)!important}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:var(--p-primary-color, #4096ff)!important}.p-wrapper .p-error-hang-out .ant-form-item-explain-error{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;overflow:hidden!important;transition:none!important}.p-wrapper .ant-form-item-explain-error{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s,max-height .3s ease-out .3s}.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error{opacity:1;transform:translateY(0);max-height:100px}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px var(--p-bg-color, #fff);border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .p-canvas-toolbar-wrapper{box-shadow:0 8px var(--p-bg-color, #fff);border-radius:.5em .5em 0 0}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:var(--p-danger-color, #ff4d4f);font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .h-lack .ant-table-wrapper .ant-table-pagination.ant-pagination{padding:unset;margin-top:8px}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{flex:1;height:0;overflow-y:hidden;border-radius:unset}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-container>.ant-table-body{position:relative}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-wrapper .ant-table-cell:not(.normal-break){word-break:break-all}.p-error-group-tab{position:relative;overflow:visible;color:var(--p-danger-color, #f5222d)!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.8em;animation:heartbeat 2s infinite}.ant-picker-dropdown .ant-picker-footer{padding-left:4px}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:var(--p-border-color, #d9d9d9)!important}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:var(--p-primary-color, #4096ff)!important}.p-error-hang-out .ant-form-item-explain-error{display:none}.no-error-border{border-color:var(--p-border-color, #d9d9d9)!important}.no-error-border:focus{border-color:var(--p-primary-color, #4096ff)!important}@media (max-width: 575px){.p-wrapper .ant-form .ant-form-item .ant-form-item-label{justify-content:flex-start}}.collapsible-card{background-color:var(--p-bg-color, #fff);border-color:var(--p-border-light-color, #f0f0f0)}.collapsible-card .ant-collapse-header{padding:0 12px;min-height:38px;display:flex;align-items:center;font-weight:600}.collapsible-card .ant-collapse-content{border-color:var(--p-border-light-color, #f0f0f0)}.collapsible-card .ant-collapse-content .ant-collapse-content-box{padding:var(--collapsible-card-body-padding, 12px)}.collapsible-card .ant-collapse-item{border-color:var(--p-border-light-color, #f0f0f0)}.canvas-cell{display:flex;flex-direction:column;justify-content:center;align-items:start;padding:0 8px}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@keyframes heartbeat{0%{transform:scale(1)}6%{transform:scale(1.22)}12%{transform:scale(1)}18%{transform:scale(1.18)}24%{transform:scale(1)}48%{transform:scale(1)}54%{transform:scale(1.22)}60%{transform:scale(1)}66%{transform:scale(1.18)}72%{transform:scale(1)}to{transform:scale(1)}}
package/dist/style.scss CHANGED
@@ -1,12 +1,5 @@
1
- // Variables inlined for npm distribution
2
- :root {
3
- --p-theme-bg: #fff;
4
- --collapsible-card-body-padding: 12px;
5
- }
6
-
7
-
8
1
  .p-pane {
9
- background-color: var(--p-theme-bg);
2
+ background-color: var(--p-theme-bg, #fff);
10
3
  padding: 16px;
11
4
  border-radius: 4px;
12
5
  }
@@ -99,7 +92,7 @@
99
92
 
100
93
  /* #region P family styles */
101
94
  .p-theme-bg {
102
- background-color: var(--p-theme-bg);
95
+ background-color: var(--p-theme-bg, #fff);
103
96
  }
104
97
 
105
98
  .p-wrapper {
@@ -113,10 +106,10 @@
113
106
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
114
107
  .ant-input-affix-wrapper-borderless
115
108
  ).ant-input-affix-wrapper {
116
- border-color: #d9d9d9 !important;
109
+ border-color: var(--p-border-color, #d9d9d9) !important;
117
110
 
118
111
  &:focus {
119
- border-color: #4096ff !important;
112
+ border-color: var(--p-primary-color, #4096ff) !important;
120
113
  }
121
114
  }
122
115
  .ant-form-item-explain-error {
@@ -143,12 +136,12 @@
143
136
  max-height: 100px;
144
137
  }
145
138
  .p-toolbar-wrapper {
146
- box-shadow: 0 8px #fff;
139
+ box-shadow: 0 8px var(--p-bg-color, #fff);
147
140
  border-radius: 0.5em 0.5em 0 0;
148
141
  margin-bottom: -0.5em;
149
142
  }
150
143
  .p-canvas-toolbar-wrapper {
151
- box-shadow: 0 8px #fff;
144
+ box-shadow: 0 8px var(--p-bg-color, #fff);
152
145
  border-radius: 0.5em 0.5em 0 0;
153
146
  }
154
147
 
@@ -160,7 +153,7 @@
160
153
  .ant-form-item-label > label:before {
161
154
  display: inline-block;
162
155
  margin-inline-end: 4px;
163
- color: #ff4d4f;
156
+ color: var(--p-danger-color, #ff4d4f);
164
157
  font-size: 14px;
165
158
  font-family: SimSun, sans-serif;
166
159
  line-height: 1;
@@ -265,7 +258,7 @@
265
258
  .p-error-group-tab {
266
259
  position: relative;
267
260
  overflow: visible;
268
- color: #f5222d !important;
261
+ color: var(--p-danger-color, #f5222d) !important;
269
262
  &:after {
270
263
  content: '🏷️';
271
264
  position: absolute;
@@ -286,10 +279,10 @@
286
279
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
287
280
  .ant-input-affix-wrapper-borderless
288
281
  ).ant-input-affix-wrapper {
289
- border-color: #d9d9d9 !important;
282
+ border-color: var(--p-border-color, #d9d9d9) !important;
290
283
 
291
284
  &:focus {
292
- border-color: #4096ff !important;
285
+ border-color: var(--p-primary-color, #4096ff) !important;
293
286
  }
294
287
  }
295
288
  .ant-form-item-explain-error {
@@ -298,10 +291,10 @@
298
291
  }
299
292
 
300
293
  .no-error-border {
301
- border-color: #d9d9d9 !important;
294
+ border-color: var(--p-border-color, #d9d9d9) !important;
302
295
 
303
296
  &:focus {
304
- border-color: #4096ff !important;
297
+ border-color: var(--p-primary-color, #4096ff) !important;
305
298
  }
306
299
  }
307
300
  @media (max-width: 575px) {
@@ -311,8 +304,8 @@
311
304
  }
312
305
 
313
306
  .collapsible-card {
314
- background-color: #fff;
315
- border-color: #f0f0f0;
307
+ background-color: var(--p-bg-color, #fff);
308
+ border-color: var(--p-border-light-color, #f0f0f0);
316
309
  .ant-collapse-header {
317
310
  padding: 0 12px;
318
311
  min-height: 38px;
@@ -321,13 +314,13 @@
321
314
  font-weight: 600;
322
315
  }
323
316
  .ant-collapse-content {
324
- border-color: #f0f0f0;
317
+ border-color: var(--p-border-light-color, #f0f0f0);
325
318
  .ant-collapse-content-box {
326
319
  padding: var(--collapsible-card-body-padding, 12px);
327
320
  }
328
321
  }
329
322
  .ant-collapse-item {
330
- border-color: #f0f0f0;
323
+ border-color: var(--p-border-light-color, #f0f0f0);
331
324
  }
332
325
  }
333
326
  /* #endregion */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue-ui-kit/ant",
3
- "version": "2.2.2",
3
+ "version": "2.3.0",
4
4
  "description": "Vue3 UI Kit based on Ant Design",
5
5
  "type": "module",
6
6
  "main": "./dist/cjs/index.js",
@@ -1,7 +1,5 @@
1
- @use 'variables';
2
-
3
1
  .p-pane {
4
- background-color: var(--p-theme-bg);
2
+ background-color: var(--p-theme-bg, #fff);
5
3
  padding: 16px;
6
4
  border-radius: 4px;
7
5
  }
@@ -94,7 +92,7 @@
94
92
 
95
93
  /* #region P family styles */
96
94
  .p-theme-bg {
97
- background-color: var(--p-theme-bg);
95
+ background-color: var(--p-theme-bg, #fff);
98
96
  }
99
97
 
100
98
  .p-wrapper {
@@ -108,10 +106,10 @@
108
106
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
109
107
  .ant-input-affix-wrapper-borderless
110
108
  ).ant-input-affix-wrapper {
111
- border-color: #d9d9d9 !important;
109
+ border-color: var(--p-border-color, #d9d9d9) !important;
112
110
 
113
111
  &:focus {
114
- border-color: #4096ff !important;
112
+ border-color: var(--p-primary-color, #4096ff) !important;
115
113
  }
116
114
  }
117
115
  .ant-form-item-explain-error {
@@ -138,12 +136,12 @@
138
136
  max-height: 100px;
139
137
  }
140
138
  .p-toolbar-wrapper {
141
- box-shadow: 0 8px #fff;
139
+ box-shadow: 0 8px var(--p-bg-color, #fff);
142
140
  border-radius: 0.5em 0.5em 0 0;
143
141
  margin-bottom: -0.5em;
144
142
  }
145
143
  .p-canvas-toolbar-wrapper {
146
- box-shadow: 0 8px #fff;
144
+ box-shadow: 0 8px var(--p-bg-color, #fff);
147
145
  border-radius: 0.5em 0.5em 0 0;
148
146
  }
149
147
 
@@ -155,7 +153,7 @@
155
153
  .ant-form-item-label > label:before {
156
154
  display: inline-block;
157
155
  margin-inline-end: 4px;
158
- color: #ff4d4f;
156
+ color: var(--p-danger-color, #ff4d4f);
159
157
  font-size: 14px;
160
158
  font-family: SimSun, sans-serif;
161
159
  line-height: 1;
@@ -260,7 +258,7 @@
260
258
  .p-error-group-tab {
261
259
  position: relative;
262
260
  overflow: visible;
263
- color: #f5222d !important;
261
+ color: var(--p-danger-color, #f5222d) !important;
264
262
  &:after {
265
263
  content: '🏷️';
266
264
  position: absolute;
@@ -281,10 +279,10 @@
281
279
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
282
280
  .ant-input-affix-wrapper-borderless
283
281
  ).ant-input-affix-wrapper {
284
- border-color: #d9d9d9 !important;
282
+ border-color: var(--p-border-color, #d9d9d9) !important;
285
283
 
286
284
  &:focus {
287
- border-color: #4096ff !important;
285
+ border-color: var(--p-primary-color, #4096ff) !important;
288
286
  }
289
287
  }
290
288
  .ant-form-item-explain-error {
@@ -293,10 +291,10 @@
293
291
  }
294
292
 
295
293
  .no-error-border {
296
- border-color: #d9d9d9 !important;
294
+ border-color: var(--p-border-color, #d9d9d9) !important;
297
295
 
298
296
  &:focus {
299
- border-color: #4096ff !important;
297
+ border-color: var(--p-primary-color, #4096ff) !important;
300
298
  }
301
299
  }
302
300
  @media (max-width: 575px) {
@@ -306,8 +304,8 @@
306
304
  }
307
305
 
308
306
  .collapsible-card {
309
- background-color: #fff;
310
- border-color: #f0f0f0;
307
+ background-color: var(--p-bg-color, #fff);
308
+ border-color: var(--p-border-light-color, #f0f0f0);
311
309
  .ant-collapse-header {
312
310
  padding: 0 12px;
313
311
  min-height: 38px;
@@ -316,13 +314,13 @@
316
314
  font-weight: 600;
317
315
  }
318
316
  .ant-collapse-content {
319
- border-color: #f0f0f0;
317
+ border-color: var(--p-border-light-color, #f0f0f0);
320
318
  .ant-collapse-content-box {
321
319
  padding: var(--collapsible-card-body-padding, 12px);
322
320
  }
323
321
  }
324
322
  .ant-collapse-item {
325
- border-color: #f0f0f0;
323
+ border-color: var(--p-border-light-color, #f0f0f0);
326
324
  }
327
325
  }
328
326
  /* #endregion */
@@ -1,4 +0,0 @@
1
- :root {
2
- --p-theme-bg: #fff;
3
- --collapsible-card-body-padding: 12px;
4
- }