@neatui/css 4.8.2 → 4.9.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.
Files changed (13) hide show
  1. package/components/avatar/avatar@a.scss +75 -0
  2. package/components/avatar/index.scss +1 -0
  3. package/components/avatar/package.json +22 -0
  4. package/components/tags/index.scss +1 -0
  5. package/components/tags/tags@a.scss +5 -5
  6. package/components/tags/tags@b.scss +5 -5
  7. package/components/tags/tags@c.scss +135 -0
  8. package/dist/neatui.css +237 -34
  9. package/dist/neatui.min.css +2 -2
  10. package/dist/neatui.preview.css +237 -34
  11. package/dist/neatui.preview.min.css +2 -2
  12. package/neatui.scss +1 -0
  13. package/package.json +1 -1
package/dist/neatui.css CHANGED
@@ -18041,6 +18041,85 @@ td[ui-col],th[ui-col]{
18041
18041
  display:none;
18042
18042
  }
18043
18043
 
18044
+ [ui-avatar~="@a"]{
18045
+ --avatar-size:2.5em;
18046
+ align-items:center;
18047
+ background:var(--co-line);
18048
+ border-radius:50%;
18049
+ color:var(--co-desc);
18050
+ display:inline-flex;
18051
+ flex-shrink:0;
18052
+ font-size:1em;
18053
+ font-weight:700;
18054
+ height:var(--avatar-size);
18055
+ justify-content:center;
18056
+ line-height:1;
18057
+ overflow:hidden;
18058
+ position:relative;
18059
+ user-select:none;
18060
+ vertical-align:middle;
18061
+ white-space:nowrap;
18062
+ width:var(--avatar-size);
18063
+ }
18064
+ [ui-avatar~="@a"]>img{
18065
+ display:block;
18066
+ height:100%;
18067
+ object-fit:cover;
18068
+ width:100%;
18069
+ }
18070
+ [ui-avatar~="@a"]>span{
18071
+ font-size:calc(var(--avatar-size)*.4);
18072
+ }
18073
+ [ui-avatar~="@a"][ui-avatar~=":square"]{
18074
+ border-radius:.25em;
18075
+ }
18076
+ [ui-avatar~="@a"][ui-avatar~=xs]{
18077
+ --avatar-size:1.5em;
18078
+ }
18079
+ [ui-avatar~="@a"][ui-avatar~=s]{
18080
+ --avatar-size:2em;
18081
+ }
18082
+ [ui-avatar~="@a"][ui-avatar~=m]{
18083
+ --avatar-size:2.5em;
18084
+ }
18085
+ [ui-avatar~="@a"][ui-avatar~=l]{
18086
+ --avatar-size:3em;
18087
+ }
18088
+ [ui-avatar~="@a"][ui-avatar~=xl]{
18089
+ --avatar-size:4em;
18090
+ }
18091
+ [ui-avatar~="@a"][ui-avatar~=main]{
18092
+ background:var(--co-main);
18093
+ color:#fff;
18094
+ }
18095
+ [ui-avatar~="@a"][ui-avatar~=well]{
18096
+ background:var(--co-well);
18097
+ color:#fff;
18098
+ }
18099
+ [ui-avatar~="@a"][ui-avatar~=warn]{
18100
+ background:var(--co-warn);
18101
+ color:#fff;
18102
+ }
18103
+ [ui-avatar~="@a"][ui-avatar~=risk]{
18104
+ background:var(--co-risk);
18105
+ color:#fff;
18106
+ }
18107
+ [ui-avatar~="@a"][ui-avatar~=info]{
18108
+ background:var(--co-info);
18109
+ color:#fff;
18110
+ }
18111
+
18112
+ [ui-avatars~="@a"]{
18113
+ align-items:center;
18114
+ display:inline-flex;
18115
+ }
18116
+ [ui-avatars~="@a"]>*+*{
18117
+ margin-left:-.5em;
18118
+ }
18119
+ [ui-avatars~="@a"]>*{
18120
+ box-shadow:0 0 0 2px var(--co-fore);
18121
+ }
18122
+
18044
18123
  [ui-btn]{
18045
18124
  align-content:center;
18046
18125
  align-items:center;
@@ -27903,42 +27982,42 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
27903
27982
  [ui-tag~="@a"],[ui-tag~="@a"][ui-tag~=main]{
27904
27983
  background:var(--co-main-o-sm);
27905
27984
  box-shadow:inset 0 0 0 1px var(--co-main-o-ms);
27906
- color:var(--co-main);
27985
+ color:var(--co-main-b-lm, var(--co-main));
27907
27986
  }
27908
27987
  [ui-tag~="@a"][ui-tag~=well]{
27909
27988
  background:var(--co-well-o-sm);
27910
27989
  box-shadow:inset 0 0 0 1px var(--co-well-o-ms);
27911
- color:var(--co-well);
27990
+ color:var(--co-well-b-lm, var(--co-well));
27912
27991
  }
27913
27992
  [ui-tag~="@a"][ui-tag~=warn]{
27914
27993
  background:var(--co-warn-o-sm);
27915
27994
  box-shadow:inset 0 0 0 1px var(--co-warn-o-ms);
27916
- color:var(--co-warn);
27995
+ color:var(--co-warn-b-lm, var(--co-warn));
27917
27996
  }
27918
27997
  [ui-tag~="@a"][ui-tag~=risk]{
27919
27998
  background:var(--co-risk-o-sm);
27920
27999
  box-shadow:inset 0 0 0 1px var(--co-risk-o-ms);
27921
- color:var(--co-risk);
28000
+ color:var(--co-risk-b-lm, var(--co-risk));
27922
28001
  }
27923
28002
  [ui-tag~="@a"][ui-tag~=info]{
27924
28003
  background:var(--co-info-o-sm);
27925
28004
  box-shadow:inset 0 0 0 1px var(--co-info-o-ms);
27926
- color:var(--co-info);
28005
+ color:var(--co-info-b-lm, var(--co-info));
27927
28006
  }
27928
28007
  [ui-tag~="@a"][ui-tag~=read]{
27929
28008
  background:var(--co-read-o-sm);
27930
28009
  box-shadow:inset 0 0 0 1px var(--co-read-o-ms);
27931
- color:var(--co-read);
28010
+ color:var(--co-read-b-lm, var(--co-read));
27932
28011
  }
27933
28012
  [ui-tag~="@a"][ui-tag~=note]{
27934
28013
  background:var(--co-note-o-sm);
27935
28014
  box-shadow:inset 0 0 0 1px var(--co-note-o-ms);
27936
- color:var(--co-note);
28015
+ color:var(--co-note-b-lm, var(--co-note));
27937
28016
  }
27938
28017
  [ui-tag~="@a"][ui-tag~=idle]{
27939
28018
  background:var(--co-idle-o-sm);
27940
28019
  box-shadow:inset 0 0 0 1px var(--co-idle-o-ms);
27941
- color:var(--co-idle);
28020
+ color:var(--co-idle-b-lm, var(--co-idle));
27942
28021
  }
27943
28022
 
27944
28023
  [ui-tags~="@a"]{
@@ -27968,49 +28047,49 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
27968
28047
  [ui-tags~="@a"][ui-tags~=":leaf"]>*{
27969
28048
  border-radius:10em 0;
27970
28049
  }
27971
- [ui-tags~="@a"][ui-tag~=":bullet"]>*{
28050
+ [ui-tags~="@a"][ui-tags~=":bullet"]>*{
27972
28051
  border-radius:1em .2em .2em 1em;
27973
28052
  padding:.25em .65em .25em .5em;
27974
28053
  }
27975
28054
  [ui-tags~="@a"]>*,[ui-tags~="@a"][ui-tags~=main]>*{
27976
28055
  background:var(--co-main-o-sm);
27977
28056
  box-shadow:inset 0 0 0 1px var(--co-main-o-ms);
27978
- color:var(--co-main);
28057
+ color:var(--co-main-b-lm, var(--co-main));
27979
28058
  }
27980
28059
  [ui-tags~="@a"][ui-tags~=well]>*{
27981
28060
  background:var(--co-well-o-sm);
27982
28061
  box-shadow:inset 0 0 0 1px var(--co-well-o-ms);
27983
- color:var(--co-well);
28062
+ color:var(--co-well-b-lm, var(--co-well));
27984
28063
  }
27985
28064
  [ui-tags~="@a"][ui-tags~=warn]>*{
27986
28065
  background:var(--co-warn-o-sm);
27987
28066
  box-shadow:inset 0 0 0 1px var(--co-warn-o-ms);
27988
- color:var(--co-warn);
28067
+ color:var(--co-warn-b-lm, var(--co-warn));
27989
28068
  }
27990
28069
  [ui-tags~="@a"][ui-tags~=risk]>*{
27991
28070
  background:var(--co-risk-o-sm);
27992
28071
  box-shadow:inset 0 0 0 1px var(--co-risk-o-ms);
27993
- color:var(--co-risk);
28072
+ color:var(--co-risk-b-lm, var(--co-risk));
27994
28073
  }
27995
28074
  [ui-tags~="@a"][ui-tags~=info]>*{
27996
28075
  background:var(--co-info-o-sm);
27997
28076
  box-shadow:inset 0 0 0 1px var(--co-info-o-ms);
27998
- color:var(--co-info);
28077
+ color:var(--co-info-b-lm, var(--co-info));
27999
28078
  }
28000
28079
  [ui-tags~="@a"][ui-tags~=read]>*{
28001
28080
  background:var(--co-read-o-sm);
28002
28081
  box-shadow:inset 0 0 0 1px var(--co-read-o-ms);
28003
- color:var(--co-read);
28082
+ color:var(--co-read-b-lm, var(--co-read));
28004
28083
  }
28005
28084
  [ui-tags~="@a"][ui-tags~=note]>*{
28006
28085
  background:var(--co-note-o-sm);
28007
28086
  box-shadow:inset 0 0 0 1px var(--co-note-o-ms);
28008
- color:var(--co-note);
28087
+ color:var(--co-note-b-lm, var(--co-note));
28009
28088
  }
28010
28089
  [ui-tags~="@a"][ui-tags~=idle]>*{
28011
28090
  background:var(--co-idle-o-sm);
28012
28091
  box-shadow:inset 0 0 0 1px var(--co-idle-o-ms);
28013
- color:var(--co-idle);
28092
+ color:var(--co-idle-b-lm, var(--co-idle));
28014
28093
  }
28015
28094
 
28016
28095
  [ui-tag~="@b"]{
@@ -28041,35 +28120,35 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
28041
28120
  }
28042
28121
  [ui-tag~="@b"],[ui-tag~="@b"][ui-tag~=main]{
28043
28122
  background:var(--co-main-o-sm);
28044
- color:var(--co-main);
28123
+ color:var(--co-main-b-lm, var(--co-main));
28045
28124
  }
28046
28125
  [ui-tag~="@b"][ui-tag~=well]{
28047
28126
  background:var(--co-well-o-sm);
28048
- color:var(--co-well);
28127
+ color:var(--co-well-b-lm, var(--co-well));
28049
28128
  }
28050
28129
  [ui-tag~="@b"][ui-tag~=warn]{
28051
28130
  background:var(--co-warn-o-sm);
28052
- color:var(--co-warn);
28131
+ color:var(--co-warn-b-lm, var(--co-warn));
28053
28132
  }
28054
28133
  [ui-tag~="@b"][ui-tag~=risk]{
28055
28134
  background:var(--co-risk-o-sm);
28056
- color:var(--co-risk);
28135
+ color:var(--co-risk-b-lm, var(--co-risk));
28057
28136
  }
28058
28137
  [ui-tag~="@b"][ui-tag~=info]{
28059
28138
  background:var(--co-info-o-sm);
28060
- color:var(--co-info);
28139
+ color:var(--co-info-b-lm, var(--co-info));
28061
28140
  }
28062
28141
  [ui-tag~="@b"][ui-tag~=read]{
28063
28142
  background:var(--co-read-o-sm);
28064
- color:var(--co-read);
28143
+ color:var(--co-read-b-lm, var(--co-read));
28065
28144
  }
28066
28145
  [ui-tag~="@b"][ui-tag~=note]{
28067
28146
  background:var(--co-note-o-sm);
28068
- color:var(--co-note);
28147
+ color:var(--co-note-b-lm, var(--co-note));
28069
28148
  }
28070
28149
  [ui-tag~="@b"][ui-tag~=idle]{
28071
28150
  background:var(--co-idle-o-sm);
28072
- color:var(--co-idle);
28151
+ color:var(--co-idle-b-lm, var(--co-idle));
28073
28152
  }
28074
28153
 
28075
28154
  [ui-tags~="@b"]{
@@ -28099,41 +28178,165 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
28099
28178
  [ui-tags~="@b"][ui-tags~=":leaf"]>*{
28100
28179
  border-radius:10em 0;
28101
28180
  }
28102
- [ui-tags~="@b"][ui-tag~=":bullet"]>*{
28181
+ [ui-tags~="@b"][ui-tags~=":bullet"]>*{
28103
28182
  border-radius:1em .2em .2em 1em;
28104
28183
  padding:.5em .65em .5em .5em;
28105
28184
  }
28106
28185
  [ui-tags~="@b"]>*,[ui-tags~="@b"][ui-tags~=main]>*{
28107
28186
  background:var(--co-main-o-sm);
28108
- color:var(--co-main);
28187
+ color:var(--co-main-b-lm, var(--co-main));
28109
28188
  }
28110
28189
  [ui-tags~="@b"][ui-tags~=well]>*{
28111
28190
  background:var(--co-well-o-sm);
28112
- color:var(--co-well);
28191
+ color:var(--co-well-b-lm, var(--co-well));
28113
28192
  }
28114
28193
  [ui-tags~="@b"][ui-tags~=warn]>*{
28115
28194
  background:var(--co-warn-o-sm);
28116
- color:var(--co-warn);
28195
+ color:var(--co-warn-b-lm, var(--co-warn));
28117
28196
  }
28118
28197
  [ui-tags~="@b"][ui-tags~=risk]>*{
28119
28198
  background:var(--co-risk-o-sm);
28120
- color:var(--co-risk);
28199
+ color:var(--co-risk-b-lm, var(--co-risk));
28121
28200
  }
28122
28201
  [ui-tags~="@b"][ui-tags~=info]>*{
28123
28202
  background:var(--co-info-o-sm);
28124
- color:var(--co-info);
28203
+ color:var(--co-info-b-lm, var(--co-info));
28125
28204
  }
28126
28205
  [ui-tags~="@b"][ui-tags~=read]>*{
28127
28206
  background:var(--co-read-o-sm);
28128
- color:var(--co-read);
28207
+ color:var(--co-read-b-lm, var(--co-read));
28129
28208
  }
28130
28209
  [ui-tags~="@b"][ui-tags~=note]>*{
28131
28210
  background:var(--co-note-o-sm);
28132
- color:var(--co-note);
28211
+ color:var(--co-note-b-lm, var(--co-note));
28133
28212
  }
28134
28213
  [ui-tags~="@b"][ui-tags~=idle]>*{
28135
28214
  background:var(--co-idle-o-sm);
28136
- color:var(--co-idle);
28215
+ color:var(--co-idle-b-lm, var(--co-idle));
28216
+ }
28217
+
28218
+ [ui-tag~="@c"]{
28219
+ color:#fff;
28220
+ display:inline-block;
28221
+ font-weight:700;
28222
+ line-height:1.25;
28223
+ padding:2px .5em;
28224
+ vertical-align:middle;
28225
+ white-space:nowrap;
28226
+ }
28227
+ [ui-tag~="@c"],[ui-tag~="@c"][ui-tag~=":round"]{
28228
+ border-radius:10em;
28229
+ }
28230
+ [ui-tag~="@c"][ui-tag~=":square"]{
28231
+ border-radius:.2rem;
28232
+ }
28233
+ [ui-tag~="@c"][ui-tag~=":leaf"]{
28234
+ border-radius:.5em 0;
28235
+ }
28236
+ [ui-tag~="@c"][ui-tag~=":bullet"]{
28237
+ border-radius:1em .2em .2em 1em;
28238
+ }
28239
+ [ui-tag~="@c"][ui-tag~=s]{
28240
+ padding:1px .5em;
28241
+ }
28242
+ [ui-tag~="@c"][ui-tag~=m]{
28243
+ padding:2px .5em;
28244
+ }
28245
+ [ui-tag~="@c"][ui-tag~=l]{
28246
+ padding:3px .5em;
28247
+ }
28248
+ [ui-tag~="@c"],[ui-tag~="@c"][ui-tag~=main]{
28249
+ background:var(--co-main);
28250
+ }
28251
+ [ui-tag~="@c"][ui-tag~=well]{
28252
+ background:var(--co-well);
28253
+ }
28254
+ [ui-tag~="@c"][ui-tag~=warn]{
28255
+ background:var(--co-warn);
28256
+ }
28257
+ [ui-tag~="@c"][ui-tag~=risk]{
28258
+ background:var(--co-risk);
28259
+ }
28260
+ [ui-tag~="@c"][ui-tag~=info]{
28261
+ background:var(--co-info);
28262
+ }
28263
+ [ui-tag~="@c"][ui-tag~=read]{
28264
+ background:var(--co-read);
28265
+ }
28266
+ [ui-tag~="@c"][ui-tag~=note]{
28267
+ background:var(--co-note);
28268
+ }
28269
+ [ui-tag~="@c"][ui-tag~=idle]{
28270
+ background:var(--co-idle);
28271
+ }
28272
+
28273
+ [ui-tags~="@c"]{
28274
+ position:relative;
28275
+ width:100%;
28276
+ }
28277
+ [ui-tags~="@c"][ui-tags~=al]>*{
28278
+ margin-right:.5rem;
28279
+ }
28280
+ [ui-tags~="@c"][ui-tags~=ac]>*{
28281
+ margin-left:.5rem;
28282
+ margin-right:.5rem;
28283
+ }
28284
+ [ui-tags~="@c"][ui-tags~=ar]>*{
28285
+ margin-left:.5rem;
28286
+ }
28287
+ [ui-tags~="@c"]>*{
28288
+ color:#fff;
28289
+ display:inline-block;
28290
+ font-weight:700;
28291
+ line-height:1.25;
28292
+ padding:2px .5em;
28293
+ vertical-align:middle;
28294
+ white-space:nowrap;
28295
+ }
28296
+ [ui-tags~="@c"]>*,[ui-tags~="@c"][ui-tags~=":round"]>*{
28297
+ border-radius:10em;
28298
+ }
28299
+ [ui-tags~="@c"][ui-tags~=":square"]>*{
28300
+ border-radius:.2rem;
28301
+ }
28302
+ [ui-tags~="@c"][ui-tags~=":leaf"]>*{
28303
+ border-radius:10em 0;
28304
+ }
28305
+ [ui-tags~="@c"][ui-tags~=":bullet"]>*{
28306
+ border-radius:1em .2em .2em 1em;
28307
+ }
28308
+ [ui-tags~="@c"][ui-tags~=s]>*{
28309
+ padding:1px .5em;
28310
+ }
28311
+ [ui-tags~="@c"][ui-tags~=m]>*{
28312
+ padding:2px .5em;
28313
+ }
28314
+ [ui-tags~="@c"][ui-tags~=l]>*{
28315
+ padding:3px .5em;
28316
+ }
28317
+ [ui-tags~="@c"]>*,[ui-tags~="@c"][ui-tags~=main]>*{
28318
+ background:var(--co-main);
28319
+ }
28320
+ [ui-tags~="@c"][ui-tags~=well]>*{
28321
+ background:var(--co-well);
28322
+ }
28323
+ [ui-tags~="@c"][ui-tags~=warn]>*{
28324
+ background:var(--co-warn);
28325
+ }
28326
+ [ui-tags~="@c"][ui-tags~=risk]>*{
28327
+ background:var(--co-risk);
28328
+ }
28329
+ [ui-tags~="@c"][ui-tags~=info]>*{
28330
+ background:var(--co-info);
28331
+ }
28332
+ [ui-tags~="@c"][ui-tags~=read]>*{
28333
+ background:var(--co-read);
28334
+ }
28335
+ [ui-tags~="@c"][ui-tags~=note]>*{
28336
+ background:var(--co-note);
28337
+ }
28338
+ [ui-tags~="@c"][ui-tags~=idle]>*{
28339
+ background:var(--co-idle);
28137
28340
  }
28138
28341
 
28139
28342
  [ui-tips] [ui-tips-box~=tl]{