@yesilyazilim/web.spa 1.0.72 → 1.0.74

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/index.css CHANGED
@@ -1101,7 +1101,7 @@ input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[di
1101
1101
  }
1102
1102
 
1103
1103
  [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
1104
- background-position: .75rem 50%;
1104
+ background-position: .75rem;
1105
1105
  }
1106
1106
 
1107
1107
  input::placeholder, textarea::placeholder, select:invalid {
@@ -1140,7 +1140,7 @@ select:not([multiple], [size]) {
1140
1140
  }
1141
1141
 
1142
1142
  [dir="rtl"] select:not([multiple], [size]) {
1143
- background-position: .75rem 50%;
1143
+ background-position: .75rem;
1144
1144
  }
1145
1145
 
1146
1146
  :where(input, select, textarea, .grid) + small {
@@ -1157,15 +1157,15 @@ label > :where(input, select, textarea) {
1157
1157
 
1158
1158
  [type="checkbox"], [type="radio"] {
1159
1159
  appearance: none;
1160
- margin-top: -.125em;
1161
- margin-left: 0;
1162
- margin-right: .375em;
1163
1160
  border-width: var(--border-width);
1164
1161
  width: 1.25em;
1165
1162
  height: 1.25em;
1166
1163
  font-size: inherit;
1167
1164
  vertical-align: middle;
1168
1165
  cursor: pointer;
1166
+ margin-top: -.125em;
1167
+ margin-left: 0;
1168
+ margin-right: .375em;
1169
1169
  margin-inline: 0 .375em;
1170
1170
  }
1171
1171
 
@@ -1352,7 +1352,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1352
1352
  --border-color: var(--secondary);
1353
1353
  --color: var(--secondary-inverse);
1354
1354
  margin-right: calc(var(--spacing) / 2);
1355
- margin-left: 0;
1356
1355
  padding: calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5);
1357
1356
  border: var(--border-width) solid var(--border-color);
1358
1357
  border-radius: var(--border-radius);
@@ -1365,6 +1364,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1365
1364
  text-align: center;
1366
1365
  cursor: pointer;
1367
1366
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1367
+ margin-left: 0;
1368
1368
  outline: none;
1369
1369
  margin-inline-start: 0;
1370
1370
  margin-inline-end: calc(var(--spacing) / 2);
@@ -1380,7 +1380,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1380
1380
  --border-color: var(--secondary);
1381
1381
  --color: var(--secondary-inverse);
1382
1382
  margin-right: calc(var(--spacing) / 2);
1383
- margin-left: 0;
1384
1383
  padding: calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5);
1385
1384
  border: var(--border-width) solid var(--border-color);
1386
1385
  border-radius: var(--border-radius);
@@ -1394,6 +1393,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1394
1393
  cursor: pointer;
1395
1394
  -webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1396
1395
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1396
+ margin-left: 0;
1397
1397
  outline: none;
1398
1398
  margin-inline-start: 0;
1399
1399
  margin-inline-end: calc(var(--spacing) / 2);
@@ -1409,7 +1409,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1409
1409
  --border-color: var(--secondary);
1410
1410
  --color: var(--secondary-inverse);
1411
1411
  margin-right: calc(var(--spacing) / 2);
1412
- margin-left: 0;
1413
1412
  padding: calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5);
1414
1413
  border: var(--border-width) solid var(--border-color);
1415
1414
  border-radius: var(--border-radius);
@@ -1423,6 +1422,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1423
1422
  cursor: pointer;
1424
1423
  -ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1425
1424
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1425
+ margin-left: 0;
1426
1426
  outline: none;
1427
1427
  margin-inline-start: 0;
1428
1428
  margin-inline-end: calc(var(--spacing) / 2);
@@ -1529,7 +1529,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1529
1529
 
1530
1530
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1531
1531
  background-image: var(--icon-search);
1532
- background-position: 1.125rem 50%;
1532
+ background-position: 1.125rem;
1533
1533
  background-repeat: no-repeat;
1534
1534
  background-size: 1rem;
1535
1535
  border-radius: 5rem;
@@ -1537,7 +1537,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1537
1537
  }
1538
1538
 
1539
1539
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1540
- background-position: 1.125rem 50%, right .75rem center;
1540
+ background-position: 1.125rem, right .75rem center;
1541
1541
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
1542
1542
  }
1543
1543
 
@@ -1559,7 +1559,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1559
1559
  }
1560
1560
 
1561
1561
  [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1562
- background-position: right 1.125rem center, .75rem 50%;
1562
+ background-position: right 1.125rem center, .75rem;
1563
1563
  }
1564
1564
 
1565
1565
  :where(table) {
@@ -1697,11 +1697,11 @@ details summary::-moz-list-bullet {
1697
1697
  }
1698
1698
 
1699
1699
  details summary:after {
1700
- width: 1rem;
1701
- height: 1rem;
1702
1700
  float: right;
1703
1701
  background-image: var(--icon-chevron);
1704
1702
  content: "";
1703
+ width: 1rem;
1704
+ height: 1rem;
1705
1705
  transition: transform var(--transition);
1706
1706
  background-position: 100%;
1707
1707
  background-repeat: no-repeat;
@@ -4126,6 +4126,201 @@ app-spinner .spinner {
4126
4126
  }
4127
4127
  }
4128
4128
 
4129
+ .skeleton-container {
4130
+ display: block;
4131
+ }
4132
+
4133
+ .skeleton-container .skeleton-item {
4134
+ background: #f2f2f2;
4135
+ border-radius: 4px;
4136
+ width: 100%;
4137
+ height: 1em;
4138
+ margin-bottom: .5em;
4139
+ display: block;
4140
+ }
4141
+
4142
+ .skeleton-container .skeleton-item:last-child {
4143
+ margin-bottom: 0;
4144
+ }
4145
+
4146
+ .skeleton-container .skeleton-item.skeleton-animated {
4147
+ background: linear-gradient(90deg, #f2f2f2 25%, #fff 50%, #f2f2f2 75%) 0 0 / 200% 100%;
4148
+ animation: 1.5s ease-in-out infinite skeleton-loading;
4149
+ }
4150
+
4151
+ .skeleton-group {
4152
+ z-index: 5000;
4153
+ background: var(--background-color);
4154
+ cursor: wait;
4155
+ width: 100%;
4156
+ height: 100%;
4157
+ position: absolute;
4158
+ top: 0;
4159
+ left: 0;
4160
+ }
4161
+
4162
+ .skeleton-group.skeleton-paragraph .skeleton-spacer {
4163
+ height: .5em;
4164
+ }
4165
+
4166
+ .skeleton-group.skeleton-card {
4167
+ background: #fff;
4168
+ border: 1px solid #e2e8f0;
4169
+ border-radius: 8px;
4170
+ padding: 16px;
4171
+ }
4172
+
4173
+ .skeleton-group.skeleton-card .skeleton-card-header {
4174
+ align-items: center;
4175
+ gap: 12px;
4176
+ margin-bottom: 16px;
4177
+ display: flex;
4178
+ }
4179
+
4180
+ .skeleton-group.skeleton-card .skeleton-card-header .skeleton-card-header-content {
4181
+ flex: 1;
4182
+ }
4183
+
4184
+ .skeleton-group.skeleton-card .skeleton-card-header .skeleton-card-header-content app-skeleton {
4185
+ margin-bottom: 4px;
4186
+ }
4187
+
4188
+ .skeleton-group.skeleton-card .skeleton-card-header .skeleton-card-header-content app-skeleton:last-child {
4189
+ margin-bottom: 0;
4190
+ }
4191
+
4192
+ .skeleton-group.skeleton-card .skeleton-card-content {
4193
+ margin-bottom: 16px;
4194
+ }
4195
+
4196
+ .skeleton-group.skeleton-card .skeleton-card-actions {
4197
+ justify-content: flex-end;
4198
+ gap: 8px;
4199
+ display: flex;
4200
+ }
4201
+
4202
+ .skeleton-group.skeleton-table {
4203
+ border-spacing: 0;
4204
+ width: 100%;
4205
+ }
4206
+
4207
+ .skeleton-group.skeleton-table .skeleton-table-header {
4208
+ border-bottom: 2px solid #e2e8f0;
4209
+ margin-bottom: 8px;
4210
+ padding: 12px 0;
4211
+ display: flex;
4212
+ }
4213
+
4214
+ .skeleton-group.skeleton-table .skeleton-table-header .skeleton-table-header-cell {
4215
+ flex: 1;
4216
+ margin-bottom: 0;
4217
+ margin-right: 16px;
4218
+ }
4219
+
4220
+ .skeleton-group.skeleton-table .skeleton-table-header .skeleton-table-header-cell:last-child {
4221
+ margin-right: 0;
4222
+ }
4223
+
4224
+ .skeleton-group.skeleton-table .skeleton-table-row {
4225
+ border-bottom: 1px solid #f7fafc;
4226
+ padding: 8px 0;
4227
+ display: flex;
4228
+ }
4229
+
4230
+ .skeleton-group.skeleton-table .skeleton-table-row:last-child {
4231
+ border-bottom: none;
4232
+ }
4233
+
4234
+ .skeleton-group.skeleton-table .skeleton-table-row .skeleton-table-cell {
4235
+ flex: 1;
4236
+ margin-bottom: 0;
4237
+ margin-right: 16px;
4238
+ }
4239
+
4240
+ .skeleton-group.skeleton-table .skeleton-table-row .skeleton-table-cell:last-child {
4241
+ margin-right: 0;
4242
+ }
4243
+
4244
+ .skeleton-group.skeleton-form .skeleton-spacer {
4245
+ height: 16px;
4246
+ }
4247
+
4248
+ .skeleton-group.skeleton-form .skeleton-form-field {
4249
+ margin-bottom: 16px;
4250
+ }
4251
+
4252
+ .skeleton-group.skeleton-form .skeleton-form-field .skeleton-form-label {
4253
+ height: .875em;
4254
+ margin-bottom: 4px;
4255
+ }
4256
+
4257
+ .skeleton-group.skeleton-form .skeleton-form-actions {
4258
+ justify-content: flex-end;
4259
+ gap: 12px;
4260
+ margin-top: 24px;
4261
+ display: flex;
4262
+ }
4263
+
4264
+ @keyframes skeleton-loading {
4265
+ 0% {
4266
+ background-position: 200% 0;
4267
+ }
4268
+
4269
+ 100% {
4270
+ background-position: -200% 0;
4271
+ }
4272
+ }
4273
+
4274
+ app-skeleton {
4275
+ display: block;
4276
+ }
4277
+
4278
+ @media (prefers-color-scheme: dark) {
4279
+ .skeleton-container .skeleton-item {
4280
+ background: #2d3748;
4281
+ }
4282
+
4283
+ .skeleton-container .skeleton-item.skeleton-animated {
4284
+ background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%) 0 0 / 200% 100%;
4285
+ }
4286
+
4287
+ .skeleton-card {
4288
+ background: #1a202c;
4289
+ border-color: #4a5568;
4290
+ }
4291
+
4292
+ .skeleton-table .skeleton-table-header {
4293
+ border-bottom-color: #4a5568;
4294
+ }
4295
+
4296
+ .skeleton-table .skeleton-table-row {
4297
+ border-bottom-color: #2d3748;
4298
+ }
4299
+ }
4300
+
4301
+ @media (width <= 768px) {
4302
+ .skeleton-card {
4303
+ padding: 12px;
4304
+ }
4305
+
4306
+ .skeleton-card .skeleton-card-header {
4307
+ gap: 8px;
4308
+ margin-bottom: 12px;
4309
+ }
4310
+
4311
+ .skeleton-card .skeleton-card-content {
4312
+ margin-bottom: 12px;
4313
+ }
4314
+
4315
+ .skeleton-form {
4316
+ max-width: 100%;
4317
+ }
4318
+
4319
+ .skeleton-table .skeleton-table-header .skeleton-table-header-cell, .skeleton-table .skeleton-table-row .skeleton-table-header-cell, .skeleton-table .skeleton-table-header .skeleton-table-cell, .skeleton-table .skeleton-table-row .skeleton-table-cell {
4320
+ margin-right: 8px;
4321
+ }
4322
+ }
4323
+
4129
4324
  @keyframes toasting {
4130
4325
  0% {
4131
4326
  opacity: 0;
@@ -6727,194 +6922,6 @@ app-rad-menu .arc i {
6727
6922
  position: absolute;
6728
6923
  }
6729
6924
 
6730
- .skeleton-container {
6731
- display: block;
6732
- }
6733
-
6734
- .skeleton-container .skeleton-item {
6735
- background: #f2f2f2;
6736
- border-radius: 4px;
6737
- width: 100%;
6738
- height: 1em;
6739
- margin-bottom: .5em;
6740
- display: block;
6741
- }
6742
-
6743
- .skeleton-container .skeleton-item:last-child {
6744
- margin-bottom: 0;
6745
- }
6746
-
6747
- .skeleton-container .skeleton-item.skeleton-animated {
6748
- background: linear-gradient(90deg, #f2f2f2 25%, #fff 50%, #f2f2f2 75%) 0 0 / 200% 100%;
6749
- animation: 1.5s ease-in-out infinite skeleton-loading;
6750
- }
6751
-
6752
- @keyframes skeleton-loading {
6753
- 0% {
6754
- background-position: 200% 0;
6755
- }
6756
-
6757
- 100% {
6758
- background-position: -200% 0;
6759
- }
6760
- }
6761
-
6762
- .skeleton-paragraph .skeleton-spacer {
6763
- height: .5em;
6764
- }
6765
-
6766
- .skeleton-card {
6767
- background: #fff;
6768
- border: 1px solid #e2e8f0;
6769
- border-radius: 8px;
6770
- padding: 16px;
6771
- }
6772
-
6773
- .skeleton-card .skeleton-card-header {
6774
- align-items: center;
6775
- gap: 12px;
6776
- margin-bottom: 16px;
6777
- display: flex;
6778
- }
6779
-
6780
- .skeleton-card .skeleton-card-header .skeleton-card-header-content {
6781
- flex: 1;
6782
- }
6783
-
6784
- .skeleton-card .skeleton-card-header .skeleton-card-header-content app-skeleton {
6785
- margin-bottom: 4px;
6786
- }
6787
-
6788
- .skeleton-card .skeleton-card-header .skeleton-card-header-content app-skeleton:last-child {
6789
- margin-bottom: 0;
6790
- }
6791
-
6792
- .skeleton-card .skeleton-card-content {
6793
- margin-bottom: 16px;
6794
- }
6795
-
6796
- .skeleton-card .skeleton-card-actions {
6797
- justify-content: flex-end;
6798
- gap: 8px;
6799
- display: flex;
6800
- }
6801
-
6802
- .skeleton-table {
6803
- border-spacing: 0;
6804
- width: 100%;
6805
- }
6806
-
6807
- .skeleton-table .skeleton-table-header {
6808
- border-bottom: 2px solid #e2e8f0;
6809
- margin-bottom: 8px;
6810
- padding: 12px 0;
6811
- display: flex;
6812
- }
6813
-
6814
- .skeleton-table .skeleton-table-header .skeleton-table-header-cell {
6815
- flex: 1;
6816
- margin-bottom: 0;
6817
- margin-right: 16px;
6818
- }
6819
-
6820
- .skeleton-table .skeleton-table-header .skeleton-table-header-cell:last-child {
6821
- margin-right: 0;
6822
- }
6823
-
6824
- .skeleton-table .skeleton-table-row {
6825
- border-bottom: 1px solid #f7fafc;
6826
- padding: 8px 0;
6827
- display: flex;
6828
- }
6829
-
6830
- .skeleton-table .skeleton-table-row:last-child {
6831
- border-bottom: none;
6832
- }
6833
-
6834
- .skeleton-table .skeleton-table-row .skeleton-table-cell {
6835
- flex: 1;
6836
- margin-bottom: 0;
6837
- margin-right: 16px;
6838
- }
6839
-
6840
- .skeleton-table .skeleton-table-row .skeleton-table-cell:last-child {
6841
- margin-right: 0;
6842
- }
6843
-
6844
- .skeleton-form {
6845
- max-width: 400px;
6846
- }
6847
-
6848
- .skeleton-form .skeleton-spacer {
6849
- height: 16px;
6850
- }
6851
-
6852
- .skeleton-form .skeleton-form-field {
6853
- margin-bottom: 16px;
6854
- }
6855
-
6856
- .skeleton-form .skeleton-form-field .skeleton-form-label {
6857
- height: .875em;
6858
- margin-bottom: 4px;
6859
- }
6860
-
6861
- .skeleton-form .skeleton-form-actions {
6862
- justify-content: flex-end;
6863
- gap: 12px;
6864
- margin-top: 24px;
6865
- display: flex;
6866
- }
6867
-
6868
- app-skeleton {
6869
- display: block;
6870
- }
6871
-
6872
- @media (prefers-color-scheme: dark) {
6873
- .skeleton-container .skeleton-item {
6874
- background: #2d3748;
6875
- }
6876
-
6877
- .skeleton-container .skeleton-item.skeleton-animated {
6878
- background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%) 0 0 / 200% 100%;
6879
- }
6880
-
6881
- .skeleton-card {
6882
- background: #1a202c;
6883
- border-color: #4a5568;
6884
- }
6885
-
6886
- .skeleton-table .skeleton-table-header {
6887
- border-bottom-color: #4a5568;
6888
- }
6889
-
6890
- .skeleton-table .skeleton-table-row {
6891
- border-bottom-color: #2d3748;
6892
- }
6893
- }
6894
-
6895
- @media (width <= 768px) {
6896
- .skeleton-card {
6897
- padding: 12px;
6898
- }
6899
-
6900
- .skeleton-card .skeleton-card-header {
6901
- gap: 8px;
6902
- margin-bottom: 12px;
6903
- }
6904
-
6905
- .skeleton-card .skeleton-card-content {
6906
- margin-bottom: 12px;
6907
- }
6908
-
6909
- .skeleton-form {
6910
- max-width: 100%;
6911
- }
6912
-
6913
- .skeleton-table .skeleton-table-header .skeleton-table-header-cell, .skeleton-table .skeleton-table-row .skeleton-table-header-cell, .skeleton-table .skeleton-table-header .skeleton-table-cell, .skeleton-table .skeleton-table-row .skeleton-table-cell {
6914
- margin-right: 8px;
6915
- }
6916
- }
6917
-
6918
6925
  app-toolbar {
6919
6926
  background-color: var(--primary-gray-ghost);
6920
6927
  padding: var(--spacing-half);
@@ -7096,7 +7103,4 @@ nav-header > .header-right app-menu .menu-item {
7096
7103
  nav-header > .header-right app-menu .menu-item:hover {
7097
7104
  background: var(--primary-gray);
7098
7105
  }
7099
-
7100
-
7101
-
7102
7106
  /*# sourceMappingURL=index.css.map */