dashboard-shell-shell 1.0.115 → 1.0.117
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/components/SideNav.vue +15 -20
- package/components/SortableTable/index.vue +205 -111
- package/components/nav/Type.vue +33 -17
- package/package.json +1 -1
package/components/SideNav.vue
CHANGED
|
@@ -20,7 +20,6 @@ import { TYPE_MODES } from '@shell/store/type-map';
|
|
|
20
20
|
import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
|
|
21
21
|
import Group from '@shell/components/nav/Group';
|
|
22
22
|
import LocaleSelector from '@shell/components/LocaleSelector';
|
|
23
|
-
import { cloud2harvesterhci, harvester2cloud } from '@shell/utils/router';
|
|
24
23
|
|
|
25
24
|
export default {
|
|
26
25
|
name: 'SideNav',
|
|
@@ -155,7 +154,7 @@ export default {
|
|
|
155
154
|
},
|
|
156
155
|
|
|
157
156
|
isVirtualProduct() {
|
|
158
|
-
return this.rootProduct.name ===
|
|
157
|
+
return this.rootProduct.name === HARVESTER;
|
|
159
158
|
},
|
|
160
159
|
|
|
161
160
|
allNavLinks() {
|
|
@@ -237,7 +236,7 @@ export default {
|
|
|
237
236
|
|
|
238
237
|
getProductsGroups(out, loadProducts, namespaceMode, productMap) {
|
|
239
238
|
const clusterId = this.$store.getters['clusterId'];
|
|
240
|
-
const currentType =
|
|
239
|
+
const currentType = this.$route.params.resource || '';
|
|
241
240
|
|
|
242
241
|
for ( const productId of loadProducts ) {
|
|
243
242
|
const modes = [TYPE_MODES.BASIC];
|
|
@@ -395,12 +394,8 @@ export default {
|
|
|
395
394
|
</script>
|
|
396
395
|
|
|
397
396
|
<template>
|
|
398
|
-
<nav
|
|
399
|
-
class="side-
|
|
400
|
-
role="navigation"
|
|
401
|
-
:aria-label="t('nav.ariaLabel.sideNav')"
|
|
402
|
-
>
|
|
403
|
-
<div class="side-all-title">
|
|
397
|
+
<nav class="side-nav">
|
|
398
|
+
<div class="side-all-title">
|
|
404
399
|
控制台
|
|
405
400
|
</div>
|
|
406
401
|
<!-- Actual nav -->
|
|
@@ -422,36 +417,36 @@ export default {
|
|
|
422
417
|
</template>
|
|
423
418
|
</div>
|
|
424
419
|
<!-- SideNav footer area (seems to be tied to harvester) -->
|
|
425
|
-
|
|
420
|
+
<div
|
|
426
421
|
v-if="showProductFooter"
|
|
427
422
|
class="footer"
|
|
428
|
-
>
|
|
423
|
+
>
|
|
429
424
|
<!-- support link -->
|
|
430
|
-
|
|
425
|
+
<router-link
|
|
431
426
|
:to="supportLink"
|
|
432
427
|
class="pull-right"
|
|
433
428
|
role="link"
|
|
434
429
|
:aria-label="t('nav.support', {hasSupport: true})"
|
|
435
430
|
>
|
|
436
431
|
{{ t('nav.support', {hasSupport: true}) }}
|
|
437
|
-
</router-link>
|
|
432
|
+
</router-link>
|
|
438
433
|
<!-- version number -->
|
|
439
|
-
|
|
434
|
+
<span
|
|
440
435
|
v-clean-tooltip="{content: displayVersion, placement: 'top'}"
|
|
441
436
|
class="clip version text-muted"
|
|
442
437
|
>
|
|
443
438
|
{{ displayVersion }}
|
|
444
|
-
</span>
|
|
439
|
+
</span>
|
|
445
440
|
|
|
446
441
|
<!-- locale selector -->
|
|
447
|
-
|
|
442
|
+
<LocaleSelector
|
|
448
443
|
v-if="isSingleProduct && hasMultipleLocales && !isStandaloneHarvester"
|
|
449
444
|
mode="login"
|
|
450
445
|
:show-icon="false"
|
|
451
|
-
/>
|
|
452
|
-
|
|
446
|
+
/>
|
|
447
|
+
</div>
|
|
453
448
|
<!-- SideNav footer alternative -->
|
|
454
|
-
|
|
449
|
+
<div
|
|
455
450
|
v-else
|
|
456
451
|
class="version text-muted flex"
|
|
457
452
|
>
|
|
@@ -472,7 +467,7 @@ export default {
|
|
|
472
467
|
(Harvester-{{ harvesterVersion }})
|
|
473
468
|
</span>
|
|
474
469
|
</template>
|
|
475
|
-
</div>
|
|
470
|
+
</div>
|
|
476
471
|
</nav>
|
|
477
472
|
</template>
|
|
478
473
|
|
|
@@ -1181,7 +1181,201 @@ export default {
|
|
|
1181
1181
|
ref="container"
|
|
1182
1182
|
:data-testid="componentTestid + '-list-container'"
|
|
1183
1183
|
>
|
|
1184
|
+
<div
|
|
1185
|
+
:class="{'titled': $slots.title && $slots.title.length, 'mb-40': isFilterLabel}"
|
|
1186
|
+
class="sortable-table-header mb-20"
|
|
1187
|
+
:style="{marginTop: search&& !isBanner ? marginTopValue + 'px' : '0px',marginLeft: isCreatable ? '100px' : '-10px',maxHeight: '32px'}"
|
|
1188
|
+
>
|
|
1189
|
+
<slot name="title" />
|
|
1190
|
+
<div
|
|
1191
|
+
v-if="showHeaderRow"
|
|
1192
|
+
class="fixed-header-actions"
|
|
1193
|
+
:class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
|
|
1194
|
+
style="display: flex;"
|
|
1195
|
+
>
|
|
1196
|
+
<!-- <div
|
|
1197
|
+
:class="bulkActionsClass"
|
|
1198
|
+
class="bulk"
|
|
1199
|
+
>
|
|
1200
|
+
<slot name="header-left">
|
|
1201
|
+
<template v-if="tableActions">
|
|
1202
|
+
<button
|
|
1203
|
+
v-for="(act) in availableActions"
|
|
1204
|
+
:id="act.action"
|
|
1205
|
+
:key="act.action"
|
|
1206
|
+
v-clean-tooltip="actionTooltip"
|
|
1207
|
+
type="button"
|
|
1208
|
+
class="btn role-primary"
|
|
1209
|
+
:class="{[bulkActionClass]:true}"
|
|
1210
|
+
:disabled="!act.enabled"
|
|
1211
|
+
:data-testid="componentTestid + '-' + act.action"
|
|
1212
|
+
@click="applyTableAction(act, null, $event)"
|
|
1213
|
+
@keydown.enter.stop
|
|
1214
|
+
@mouseover="setBulkActionOfInterest(act)"
|
|
1215
|
+
@mouseleave="setBulkActionOfInterest(null)"
|
|
1216
|
+
>
|
|
1217
|
+
<i
|
|
1218
|
+
v-if="act.icon"
|
|
1219
|
+
:class="act.icon"
|
|
1220
|
+
/>
|
|
1221
|
+
<span v-clean-html="act.label" />
|
|
1222
|
+
</button>
|
|
1223
|
+
<ActionDropdown
|
|
1224
|
+
:class="bulkActionsDropdownClass"
|
|
1225
|
+
class="bulk-actions-dropdown"
|
|
1226
|
+
:disable-button="!selectedRows.length"
|
|
1227
|
+
size="sm"
|
|
1228
|
+
>
|
|
1229
|
+
<template #button-content>
|
|
1230
|
+
<button
|
|
1231
|
+
ref="actionDropDown"
|
|
1232
|
+
class="btn bg-primary mr-0"
|
|
1233
|
+
:disabled="!selectedRows.length"
|
|
1234
|
+
>
|
|
1235
|
+
<i class="icon icon-gear" />
|
|
1236
|
+
<span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
|
|
1237
|
+
<i class="ml-10 icon icon-chevron-down" />
|
|
1238
|
+
</button>
|
|
1239
|
+
</template>
|
|
1240
|
+
<template #popover-content>
|
|
1241
|
+
<ul class="list-unstyled menu">
|
|
1242
|
+
<li
|
|
1243
|
+
v-for="(act, i) in hiddenActions"
|
|
1244
|
+
:key="i"
|
|
1245
|
+
v-close-popper
|
|
1246
|
+
v-clean-tooltip="{
|
|
1247
|
+
content: actionTooltip,
|
|
1248
|
+
placement: 'right'
|
|
1249
|
+
}"
|
|
1250
|
+
:class="{ disabled: !act.enabled }"
|
|
1251
|
+
@click="applyTableAction(act, null, $event)"
|
|
1252
|
+
@mouseover="setBulkActionOfInterest(act)"
|
|
1253
|
+
@mouseleave="setBulkActionOfInterest(null)"
|
|
1254
|
+
>
|
|
1255
|
+
<i
|
|
1256
|
+
v-if="act.icon"
|
|
1257
|
+
:class="act.icon"
|
|
1258
|
+
/>
|
|
1259
|
+
<span v-clean-html="act.label" />
|
|
1260
|
+
</li>
|
|
1261
|
+
</ul>
|
|
1262
|
+
</template>
|
|
1263
|
+
</ActionDropdown>
|
|
1264
|
+
<label
|
|
1265
|
+
v-if="selectedRowsText"
|
|
1266
|
+
:class="bulkActionAvailabilityClass"
|
|
1267
|
+
class="action-availability"
|
|
1268
|
+
>
|
|
1269
|
+
{{ selectedRowsText }}
|
|
1270
|
+
</label>
|
|
1271
|
+
</template>
|
|
1272
|
+
</slot>
|
|
1273
|
+
</div> -->
|
|
1274
|
+
<div
|
|
1275
|
+
v-if="!hasAdvancedFiltering && $slots['header-middle']"
|
|
1276
|
+
class="middle"
|
|
1277
|
+
>
|
|
1278
|
+
<slot name="header-middle" />
|
|
1279
|
+
</div>
|
|
1184
1280
|
|
|
1281
|
+
<div
|
|
1282
|
+
v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']"
|
|
1283
|
+
class="search row"
|
|
1284
|
+
data-testid="search-box-filter-row"
|
|
1285
|
+
>
|
|
1286
|
+
<ul
|
|
1287
|
+
v-if="hasAdvancedFiltering"
|
|
1288
|
+
class="advanced-filters-applied"
|
|
1289
|
+
>
|
|
1290
|
+
<li
|
|
1291
|
+
v-for="(filter, i) in advancedFilteringValues"
|
|
1292
|
+
:key="i"
|
|
1293
|
+
>
|
|
1294
|
+
<span class="label">{{ `"${filter.value}" ${ t('sortableTable.in') } ${filter.label}` }}</span>
|
|
1295
|
+
<span
|
|
1296
|
+
class="cross"
|
|
1297
|
+
@click="clearAdvancedFilter(i)"
|
|
1298
|
+
>✕</span>
|
|
1299
|
+
<div class="bg" />
|
|
1300
|
+
</li>
|
|
1301
|
+
</ul>
|
|
1302
|
+
<slot name="header-right" />
|
|
1303
|
+
<AsyncButton
|
|
1304
|
+
v-if="isTooManyItemsToAutoUpdate"
|
|
1305
|
+
mode="manual-refresh"
|
|
1306
|
+
:size="manualRefreshButtonSize"
|
|
1307
|
+
:current-phase="refreshButtonPhase"
|
|
1308
|
+
@click="debouncedRefreshTableData"
|
|
1309
|
+
/>
|
|
1310
|
+
<div
|
|
1311
|
+
v-if="hasAdvancedFiltering"
|
|
1312
|
+
ref="advanced-filter-group"
|
|
1313
|
+
class="advanced-filter-group"
|
|
1314
|
+
>
|
|
1315
|
+
<button
|
|
1316
|
+
class="btn role-primary"
|
|
1317
|
+
@click="advancedFilteringVisibility = !advancedFilteringVisibility;"
|
|
1318
|
+
>
|
|
1319
|
+
{{ t('sortableTable.addFilter') }}
|
|
1320
|
+
</button>
|
|
1321
|
+
<div
|
|
1322
|
+
v-show="advancedFilteringVisibility"
|
|
1323
|
+
class="advanced-filter-container"
|
|
1324
|
+
>
|
|
1325
|
+
<input
|
|
1326
|
+
ref="advancedSearchQuery"
|
|
1327
|
+
v-model="advFilterSearchTerm"
|
|
1328
|
+
type="search"
|
|
1329
|
+
class="advanced-search-box"
|
|
1330
|
+
:placeholder="t('sortableTable.filterFor')"
|
|
1331
|
+
>
|
|
1332
|
+
<div class="middle-block">
|
|
1333
|
+
<span>{{ t('sortableTable.in') }}</span>
|
|
1334
|
+
<LabeledSelect
|
|
1335
|
+
v-model:value="advFilterSelectedProp"
|
|
1336
|
+
class="filter-select"
|
|
1337
|
+
:clearable="true"
|
|
1338
|
+
:options="advFilterSelectOptions"
|
|
1339
|
+
:disabled="false"
|
|
1340
|
+
:searchable="false"
|
|
1341
|
+
mode="edit"
|
|
1342
|
+
:multiple="false"
|
|
1343
|
+
:taggable="false"
|
|
1344
|
+
:placeholder="t('sortableTable.selectCol')"
|
|
1345
|
+
@selecting="(col) => advFilterSelectedLabel = col.label"
|
|
1346
|
+
/>
|
|
1347
|
+
</div>
|
|
1348
|
+
<div class="bottom-block">
|
|
1349
|
+
<button
|
|
1350
|
+
class="btn role-secondary"
|
|
1351
|
+
:disabled="!advancedFilteringValues.length"
|
|
1352
|
+
@click="clearAllAdvancedFilters"
|
|
1353
|
+
>
|
|
1354
|
+
{{ t('sortableTable.resetFilters') }}
|
|
1355
|
+
</button>
|
|
1356
|
+
<button
|
|
1357
|
+
class="btn role-primary"
|
|
1358
|
+
@click="addAdvancedFilter"
|
|
1359
|
+
>
|
|
1360
|
+
{{ t('sortableTable.add') }}
|
|
1361
|
+
</button>
|
|
1362
|
+
</div>
|
|
1363
|
+
</div>
|
|
1364
|
+
</div>
|
|
1365
|
+
<slot name="header-button" />
|
|
1366
|
+
<input
|
|
1367
|
+
v-if="search"
|
|
1368
|
+
ref="searchQuery"
|
|
1369
|
+
v-model="eventualSearchQuery"
|
|
1370
|
+
type="search"
|
|
1371
|
+
class="input-sm search-box"
|
|
1372
|
+
:aria-label="t('sortableTable.searchLabel')"
|
|
1373
|
+
:placeholder="t('sortableTable.search')"
|
|
1374
|
+
>
|
|
1375
|
+
|
|
1376
|
+
</div>
|
|
1377
|
+
</div>
|
|
1378
|
+
</div>
|
|
1185
1379
|
<div class="sort-table-div">
|
|
1186
1380
|
<table
|
|
1187
1381
|
ref="table"
|
|
@@ -1481,17 +1675,17 @@ export default {
|
|
|
1481
1675
|
/>
|
|
1482
1676
|
</div>
|
|
1483
1677
|
<div
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
>
|
|
1488
|
-
<slot name="title" />
|
|
1489
|
-
<div
|
|
1490
|
-
v-if="showHeaderRow"
|
|
1491
|
-
class="fixed-header-actions"
|
|
1492
|
-
:class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
|
|
1678
|
+
:class="{'titled': $slots.title && $slots.title.length}"
|
|
1679
|
+
class="sortable-table-header"
|
|
1680
|
+
style="margin-left: 10px;min-width: 55%;"
|
|
1493
1681
|
>
|
|
1682
|
+
<slot name="title" />
|
|
1494
1683
|
<div
|
|
1684
|
+
v-if="showHeaderRow"
|
|
1685
|
+
class="fixed-header-actions"
|
|
1686
|
+
:class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering,}"
|
|
1687
|
+
>
|
|
1688
|
+
<div
|
|
1495
1689
|
:class="bulkActionsClass"
|
|
1496
1690
|
class="bulk"
|
|
1497
1691
|
>
|
|
@@ -1568,111 +1762,11 @@ export default {
|
|
|
1568
1762
|
</label>
|
|
1569
1763
|
</template>
|
|
1570
1764
|
</slot>
|
|
1571
|
-
</div>
|
|
1572
|
-
<div
|
|
1573
|
-
v-if="!hasAdvancedFiltering && $slots['header-middle']"
|
|
1574
|
-
class="middle"
|
|
1575
|
-
>
|
|
1576
|
-
<slot name="header-middle" />
|
|
1577
|
-
</div>
|
|
1578
|
-
|
|
1579
|
-
<div
|
|
1580
|
-
v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']"
|
|
1581
|
-
class="search row"
|
|
1582
|
-
data-testid="search-box-filter-row"
|
|
1583
|
-
>
|
|
1584
|
-
<ul
|
|
1585
|
-
v-if="hasAdvancedFiltering"
|
|
1586
|
-
class="advanced-filters-applied"
|
|
1587
|
-
>
|
|
1588
|
-
<li
|
|
1589
|
-
v-for="(filter, i) in advancedFilteringValues"
|
|
1590
|
-
:key="i"
|
|
1591
|
-
>
|
|
1592
|
-
<span class="label">{{ `"${filter.value}" ${ t('sortableTable.in') } ${filter.label}` }}</span>
|
|
1593
|
-
<span
|
|
1594
|
-
class="cross"
|
|
1595
|
-
@click="clearAdvancedFilter(i)"
|
|
1596
|
-
>✕</span>
|
|
1597
|
-
<div class="bg" />
|
|
1598
|
-
</li>
|
|
1599
|
-
</ul>
|
|
1600
|
-
<slot name="header-right" />
|
|
1601
|
-
<AsyncButton
|
|
1602
|
-
v-if="isTooManyItemsToAutoUpdate"
|
|
1603
|
-
mode="manual-refresh"
|
|
1604
|
-
:size="manualRefreshButtonSize"
|
|
1605
|
-
:current-phase="refreshButtonPhase"
|
|
1606
|
-
@click="debouncedRefreshTableData"
|
|
1607
|
-
/>
|
|
1608
|
-
<div
|
|
1609
|
-
v-if="hasAdvancedFiltering"
|
|
1610
|
-
ref="advanced-filter-group"
|
|
1611
|
-
class="advanced-filter-group"
|
|
1612
|
-
>
|
|
1613
|
-
<button
|
|
1614
|
-
class="btn role-primary"
|
|
1615
|
-
@click="advancedFilteringVisibility = !advancedFilteringVisibility;"
|
|
1616
|
-
>
|
|
1617
|
-
{{ t('sortableTable.addFilter') }}
|
|
1618
|
-
</button>
|
|
1619
|
-
<div
|
|
1620
|
-
v-show="advancedFilteringVisibility"
|
|
1621
|
-
class="advanced-filter-container"
|
|
1622
|
-
>
|
|
1623
|
-
<input
|
|
1624
|
-
ref="advancedSearchQuery"
|
|
1625
|
-
v-model="advFilterSearchTerm"
|
|
1626
|
-
type="search"
|
|
1627
|
-
class="advanced-search-box"
|
|
1628
|
-
:placeholder="t('sortableTable.filterFor')"
|
|
1629
|
-
>
|
|
1630
|
-
<div class="middle-block">
|
|
1631
|
-
<span>{{ t('sortableTable.in') }}</span>
|
|
1632
|
-
<LabeledSelect
|
|
1633
|
-
v-model:value="advFilterSelectedProp"
|
|
1634
|
-
class="filter-select"
|
|
1635
|
-
:clearable="true"
|
|
1636
|
-
:options="advFilterSelectOptions"
|
|
1637
|
-
:disabled="false"
|
|
1638
|
-
:searchable="false"
|
|
1639
|
-
mode="edit"
|
|
1640
|
-
:multiple="false"
|
|
1641
|
-
:taggable="false"
|
|
1642
|
-
:placeholder="t('sortableTable.selectCol')"
|
|
1643
|
-
@selecting="(col) => advFilterSelectedLabel = col.label"
|
|
1644
|
-
/>
|
|
1645
|
-
</div>
|
|
1646
|
-
<div class="bottom-block">
|
|
1647
|
-
<button
|
|
1648
|
-
class="btn role-secondary"
|
|
1649
|
-
:disabled="!advancedFilteringValues.length"
|
|
1650
|
-
@click="clearAllAdvancedFilters"
|
|
1651
|
-
>
|
|
1652
|
-
{{ t('sortableTable.resetFilters') }}
|
|
1653
|
-
</button>
|
|
1654
|
-
<button
|
|
1655
|
-
class="btn role-primary"
|
|
1656
|
-
@click="addAdvancedFilter"
|
|
1657
|
-
>
|
|
1658
|
-
{{ t('sortableTable.add') }}
|
|
1659
|
-
</button>
|
|
1660
|
-
</div>
|
|
1661
|
-
</div>
|
|
1662
1765
|
</div>
|
|
1663
|
-
<input
|
|
1664
|
-
v-else-if="search"
|
|
1665
|
-
ref="searchQuery"
|
|
1666
|
-
v-model="eventualSearchQuery"
|
|
1667
|
-
type="search"
|
|
1668
|
-
class="input-sm search-box"
|
|
1669
|
-
:aria-label="t('sortableTable.searchLabel')"
|
|
1670
|
-
:placeholder="t('sortableTable.search')"
|
|
1671
|
-
>
|
|
1672
|
-
<slot name="header-button" />
|
|
1673
1766
|
</div>
|
|
1674
1767
|
</div>
|
|
1675
|
-
|
|
1768
|
+
|
|
1769
|
+
|
|
1676
1770
|
<!-- 分页 -->
|
|
1677
1771
|
<div
|
|
1678
1772
|
v-if="showPaging"
|
package/components/nav/Type.vue
CHANGED
|
@@ -177,6 +177,7 @@ export default {
|
|
|
177
177
|
{{ type }}?
|
|
178
178
|
</li>
|
|
179
179
|
</template>
|
|
180
|
+
|
|
180
181
|
<style lang="scss" scoped>
|
|
181
182
|
.ns-and-icon {
|
|
182
183
|
margin-right: 4px;
|
|
@@ -198,7 +199,6 @@ export default {
|
|
|
198
199
|
.label {
|
|
199
200
|
align-items: center;
|
|
200
201
|
grid-area: label;
|
|
201
|
-
display: flex;
|
|
202
202
|
overflow: hidden;
|
|
203
203
|
text-overflow: ellipsis;
|
|
204
204
|
|
|
@@ -206,13 +206,13 @@ export default {
|
|
|
206
206
|
padding-left: 3px;
|
|
207
207
|
}
|
|
208
208
|
|
|
209
|
-
|
|
209
|
+
:deep() .highlight {
|
|
210
210
|
background: var(--diff-ins-bg);
|
|
211
211
|
color: var(--body-text);
|
|
212
212
|
padding: 2px;
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
-
|
|
215
|
+
:deep() .icon {
|
|
216
216
|
position: relative;
|
|
217
217
|
color: var(--muted);
|
|
218
218
|
}
|
|
@@ -225,24 +225,20 @@ export default {
|
|
|
225
225
|
grid-column-gap: 5px;
|
|
226
226
|
font-size: 14px;
|
|
227
227
|
line-height: 24px;
|
|
228
|
-
|
|
229
|
-
padding: 0px 16px 0px 40px;
|
|
230
|
-
height: 50px;
|
|
228
|
+
padding: 7.5px 7px 7.5px 10px;
|
|
231
229
|
margin: 0 0 0 -3px;
|
|
232
230
|
overflow: hidden;
|
|
233
231
|
text-overflow: ellipsis;
|
|
234
232
|
white-space: nowrap;
|
|
235
233
|
color: var(--body-text);
|
|
234
|
+
height: 33px;
|
|
236
235
|
|
|
237
236
|
&:hover {
|
|
238
|
-
background: var(--nav-
|
|
239
|
-
color: var(--nav-hover-color);
|
|
240
|
-
/* background: var(--nav-hover); */
|
|
237
|
+
background: var(--nav-hover);
|
|
241
238
|
text-decoration: none;
|
|
242
239
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
color: var(--nav-hover-color);
|
|
240
|
+
:deep() .icon {
|
|
241
|
+
color: var(--body-text);
|
|
246
242
|
}
|
|
247
243
|
}
|
|
248
244
|
}
|
|
@@ -251,26 +247,46 @@ export default {
|
|
|
251
247
|
grid-area: favorite;
|
|
252
248
|
font-size: 12px;
|
|
253
249
|
position: relative;
|
|
250
|
+
vertical-align: middle;
|
|
251
|
+
margin-right: 4px;
|
|
254
252
|
}
|
|
255
253
|
|
|
256
254
|
.count {
|
|
257
|
-
grid-area: count;
|
|
258
255
|
font-size: 12px;
|
|
259
|
-
text-align: right;
|
|
260
256
|
justify-items: center;
|
|
261
257
|
padding-right: 4px;
|
|
258
|
+
display: flex;
|
|
259
|
+
align-items: center;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&.nav-type.nav-link {
|
|
263
|
+
a .label {
|
|
264
|
+
display: flex;
|
|
265
|
+
}
|
|
262
266
|
}
|
|
263
267
|
|
|
264
268
|
&.nav-type:not(.depth-0) {
|
|
265
269
|
A {
|
|
266
|
-
|
|
267
|
-
padding: 5.5px 7px 5.5px 10px;
|
|
270
|
+
padding-left: 16px;
|
|
268
271
|
}
|
|
269
272
|
|
|
270
|
-
|
|
273
|
+
:deep() .label I {
|
|
271
274
|
padding-right: 2px;
|
|
272
275
|
}
|
|
273
276
|
}
|
|
277
|
+
|
|
278
|
+
&.nav-type:is(.depth-1) {
|
|
279
|
+
A {
|
|
280
|
+
font-size: 13px;
|
|
281
|
+
padding-left: 23px;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
&.nav-type:not(.depth-0):not(.depth-1) {
|
|
286
|
+
A {
|
|
287
|
+
padding-left: 14px;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
274
290
|
}
|
|
275
291
|
|
|
276
292
|
</style>
|