@ardimedia/angular-portal-azure 0.3.17 → 0.3.25
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
|
@@ -7,6 +7,45 @@
|
|
|
7
7
|
*
|
|
8
8
|
* Or add to angular.json styles array:
|
|
9
9
|
* "styles": ["node_modules/@ardimedia/angular-portal-azure/theming/portal-azure.css"]
|
|
10
|
+
*
|
|
11
|
+
* Public CSS class API:
|
|
12
|
+
*
|
|
13
|
+
* Layout:
|
|
14
|
+
* .fxs-portal — Root portal container
|
|
15
|
+
* .fxs-topbar — Top navigation bar
|
|
16
|
+
* .fxs-portal-content — Main scrollable content area
|
|
17
|
+
* .fxs-portal-footer — Footer bar
|
|
18
|
+
*
|
|
19
|
+
* Blade:
|
|
20
|
+
* .azureportalblade — Blade wrapper (inline-block in stack)
|
|
21
|
+
* .fxs-blade-title — Blade title bar
|
|
22
|
+
* .fxs-blade-content — Blade body area
|
|
23
|
+
* .fxs-commandBar — Command bar toolbar
|
|
24
|
+
* .fxs-commandBar-item — Individual command button
|
|
25
|
+
*
|
|
26
|
+
* Grid:
|
|
27
|
+
* .azc-grid — Grid/table container
|
|
28
|
+
* .azc-grid-full — Full-width grid variant
|
|
29
|
+
* .azc-grid-search — Search input in grid
|
|
30
|
+
*
|
|
31
|
+
* Tile:
|
|
32
|
+
* .fxs-tile — Dashboard tile container
|
|
33
|
+
* .fxs-tilesize-normal — Normal tile size
|
|
34
|
+
* .fxs-tilesize-mini — Mini tile size
|
|
35
|
+
* .fxs-tilesize-herowide — Hero wide tile size
|
|
36
|
+
* .fxs-tilesize-small — Small tile size
|
|
37
|
+
*
|
|
38
|
+
* Custom (apa- namespace):
|
|
39
|
+
* .apa-dark / .apa-light — Manual theme toggle classes (on <html>)
|
|
40
|
+
* .apa-settings-* — Settings dropdown components
|
|
41
|
+
* .apa-avatar-* — Avatar menu components
|
|
42
|
+
* .apa-sidebar-* — Sidebar navigation components
|
|
43
|
+
* .apa-disable-click — Disabled command styling
|
|
44
|
+
*
|
|
45
|
+
* CSS custom properties:
|
|
46
|
+
* --apa-bg, --apa-surface, --apa-text, --apa-border, --apa-chrome,
|
|
47
|
+
* --apa-accent, --apa-shadow-color, --apa-shadow-strong
|
|
48
|
+
* See "Semantic Tokens" section below for full list.
|
|
10
49
|
*/
|
|
11
50
|
|
|
12
51
|
/* ===== Color Palette (Tailwind CSS values, no dependency) ===== */
|
|
@@ -32,6 +71,8 @@
|
|
|
32
71
|
/* Status colors (light / dark variants) */
|
|
33
72
|
--apa-blue-400: #60a5fa;
|
|
34
73
|
--apa-blue-500: #3b82f6;
|
|
74
|
+
--apa-blue-800: #1e40af;
|
|
75
|
+
--apa-blue-900: #1e3a8a;
|
|
35
76
|
--apa-amber-400: #fbbf24;
|
|
36
77
|
--apa-amber-500: #f59e0b;
|
|
37
78
|
--apa-red-400: #f87171;
|
|
@@ -336,7 +377,8 @@ a:focus, a:hover {
|
|
|
336
377
|
.fxs-avatarmenu-tenant-container {
|
|
337
378
|
text-align: right;
|
|
338
379
|
}
|
|
339
|
-
|
|
380
|
+
/* Settings dropdown */
|
|
381
|
+
.apa-settings-trigger {
|
|
340
382
|
background: none;
|
|
341
383
|
border: 1px solid var(--apa-chrome-hover);
|
|
342
384
|
color: var(--apa-chrome-text);
|
|
@@ -350,9 +392,60 @@ a:focus, a:hover {
|
|
|
350
392
|
justify-content: center;
|
|
351
393
|
transition: background-color 0.2s ease;
|
|
352
394
|
}
|
|
353
|
-
.apa-
|
|
395
|
+
.apa-settings-trigger:hover {
|
|
354
396
|
background-color: var(--apa-topbar-hover-bg);
|
|
355
397
|
}
|
|
398
|
+
.apa-settings-dropdown {
|
|
399
|
+
position: absolute;
|
|
400
|
+
top: 100%;
|
|
401
|
+
right: 0;
|
|
402
|
+
margin-top: 4px;
|
|
403
|
+
min-width: 220px;
|
|
404
|
+
background-color: var(--apa-chrome);
|
|
405
|
+
border: 1px solid var(--apa-chrome-hover);
|
|
406
|
+
box-shadow: 0 4px 12px var(--apa-shadow-strong);
|
|
407
|
+
font-family: var(--apa-font-family);
|
|
408
|
+
z-index: 200;
|
|
409
|
+
padding: 4px 0;
|
|
410
|
+
}
|
|
411
|
+
.apa-settings-section-header {
|
|
412
|
+
padding: 8px 16px 4px;
|
|
413
|
+
font-size: 11px;
|
|
414
|
+
font-weight: 600;
|
|
415
|
+
text-transform: uppercase;
|
|
416
|
+
letter-spacing: 0.5px;
|
|
417
|
+
opacity: 0.6;
|
|
418
|
+
color: var(--apa-chrome-text);
|
|
419
|
+
}
|
|
420
|
+
.apa-settings-item {
|
|
421
|
+
display: flex;
|
|
422
|
+
align-items: center;
|
|
423
|
+
gap: 10px;
|
|
424
|
+
padding: 8px 16px;
|
|
425
|
+
font-family: inherit;
|
|
426
|
+
font-size: 13px;
|
|
427
|
+
color: var(--apa-chrome-text);
|
|
428
|
+
background: none;
|
|
429
|
+
border: none;
|
|
430
|
+
width: 100%;
|
|
431
|
+
text-align: left;
|
|
432
|
+
cursor: pointer;
|
|
433
|
+
transition: background-color 0.1s ease;
|
|
434
|
+
}
|
|
435
|
+
.apa-settings-item:hover {
|
|
436
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
437
|
+
}
|
|
438
|
+
.apa-settings-item i {
|
|
439
|
+
font-size: 16px;
|
|
440
|
+
opacity: 0.8;
|
|
441
|
+
}
|
|
442
|
+
.apa-settings-item-active {
|
|
443
|
+
font-weight: 600;
|
|
444
|
+
}
|
|
445
|
+
.apa-settings-item-active .ti-check {
|
|
446
|
+
margin-left: auto;
|
|
447
|
+
color: var(--apa-accent);
|
|
448
|
+
}
|
|
356
449
|
|
|
357
450
|
/* Theme */
|
|
358
451
|
.fxs-theme-blue {
|
|
@@ -555,6 +648,10 @@ a:focus, a:hover {
|
|
|
555
648
|
top: 0; bottom: 0;
|
|
556
649
|
cursor: pointer;
|
|
557
650
|
}
|
|
651
|
+
.fxs-tile .fxs-part:focus-visible {
|
|
652
|
+
outline: 2px solid var(--apa-accent);
|
|
653
|
+
outline-offset: -2px;
|
|
654
|
+
}
|
|
558
655
|
|
|
559
656
|
/* ===== Blade Area (Journey) ===== */
|
|
560
657
|
.fxs-journey {
|
|
@@ -880,8 +977,8 @@ a:focus, a:hover {
|
|
|
880
977
|
right: 0;
|
|
881
978
|
min-width: 200px;
|
|
882
979
|
background-color: var(--apa-chrome);
|
|
883
|
-
border: 1px solid var(--apa-
|
|
884
|
-
box-shadow: 0 4px 12px
|
|
980
|
+
border: 1px solid var(--apa-chrome-hover);
|
|
981
|
+
box-shadow: 0 4px 12px var(--apa-shadow-strong);
|
|
885
982
|
z-index: 200;
|
|
886
983
|
}
|
|
887
984
|
.apa-avatar-dropdown-item {
|
|
@@ -985,6 +1082,16 @@ a:focus, a:hover {
|
|
|
985
1082
|
.azc-grid-activateableRow table tbody tr[aria-selected='true'] {
|
|
986
1083
|
background-color: var(--apa-grid-row-selected-bg) !important;
|
|
987
1084
|
}
|
|
1085
|
+
.azc-grid table tbody tr:focus-visible,
|
|
1086
|
+
.azc-grid-full tbody tr:focus-visible {
|
|
1087
|
+
outline: 2px solid var(--apa-accent);
|
|
1088
|
+
outline-offset: -2px;
|
|
1089
|
+
background-color: var(--apa-surface-hover);
|
|
1090
|
+
}
|
|
1091
|
+
.azc-grid table tbody tr td:focus-visible {
|
|
1092
|
+
outline: 2px solid var(--apa-accent);
|
|
1093
|
+
outline-offset: -2px;
|
|
1094
|
+
}
|
|
988
1095
|
.msportalfx-gridcolumn-asseticon i {
|
|
989
1096
|
font-size: 18px;
|
|
990
1097
|
vertical-align: middle;
|