@unifiedsoftware/styles 2.0.1-beta.2 → 2.0.1-beta.21

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/css/fci.css CHANGED
@@ -288,12 +288,17 @@
288
288
  .us-theme-fci .us-toolbar {
289
289
  --us-toolbar-background: var(--us-white-color);
290
290
  --us-toolbar-title-font-weight: 500;
291
- /* Outline */
291
+ }
292
+ .us-theme-fci .us-toolbar > .us-surface {
293
+ --us-surface-color: white;
294
+ --us-surface-opacity: 1;
295
+ }
296
+ .us-theme-fci .us-toolbar--bordered > .us-outline-b {
292
297
  --us-outline-border-width: 1px;
293
298
  --us-outline-border-color: #ddd;
294
299
  }
295
300
  .us-theme-fci .us-toolbar--sm {
296
- --us-toolbar-min-height: 48px;
301
+ --us-toolbar-height: 48px;
297
302
  --us-toolbar-padding-y: 0.25rem;
298
303
  --us-toolbar-padding-x: 1rem;
299
304
  --us-toolbar-title-font-size: 0.875rem;
@@ -302,7 +307,7 @@
302
307
  --us-toolbar-subtitle-line-height: 14px;
303
308
  }
304
309
  .us-theme-fci .us-toolbar--md {
305
- --us-toolbar-min-height: 56px;
310
+ --us-toolbar-height: 56px;
306
311
  --us-toolbar-padding-y: 0.5rem;
307
312
  --us-toolbar-padding-x: 1rem;
308
313
  --us-toolbar-gap: 1rem;
@@ -316,7 +321,7 @@
316
321
  --us-icon-font-size-default: 24px;
317
322
  }
318
323
  .us-theme-fci .us-toolbar--lg {
319
- --us-toolbar-min-height: 64px;
324
+ --us-toolbar-height: 64px;
320
325
  --us-toolbar-padding-y: 0.75rem;
321
326
  --us-toolbar-padding-x: 1rem;
322
327
  --us-toolbar-title-font-size: 1.125rem;
@@ -324,6 +329,120 @@
324
329
  --us-toolbar-subtitle-font-size: 16px;
325
330
  --us-toolbar-subtitle-line-height: 18px;
326
331
  }
332
+ .us-theme-fci .us-toolbar--filled {
333
+ --us-toolbar-color: var(--us-white-color);
334
+ }
335
+ .us-theme-fci .us-toolbar--filled.us-toolbar--primary > .us-surface {
336
+ --us-surface-color: var(--us-primary-color);
337
+ --us-surface-opacity: 1;
338
+ }
339
+ .us-theme-fci .us-toolbar--filled.us-toolbar--secondary > .us-surface {
340
+ --us-surface-color: var(--us-secondary-color);
341
+ --us-surface-opacity: 1;
342
+ }
343
+ .us-theme-fci .us-toolbar--filled.us-toolbar--success > .us-surface {
344
+ --us-surface-color: var(--us-success-color);
345
+ --us-surface-opacity: 1;
346
+ }
347
+ .us-theme-fci .us-toolbar--filled.us-toolbar--info > .us-surface {
348
+ --us-surface-color: var(--us-info-color);
349
+ --us-surface-opacity: 1;
350
+ }
351
+ .us-theme-fci .us-toolbar--filled.us-toolbar--warning > .us-surface {
352
+ --us-surface-color: var(--us-warning-color);
353
+ --us-surface-opacity: 1;
354
+ }
355
+ .us-theme-fci .us-toolbar--filled.us-toolbar--danger > .us-surface {
356
+ --us-surface-color: var(--us-danger-color);
357
+ --us-surface-opacity: 1;
358
+ }
359
+
360
+ .us-theme-fci .us-dropdown-item {
361
+ --us-dropdown-item-border-radius: 0.375rem;
362
+ }
363
+ .us-theme-fci .us-dropdown-item > .us-overlay {
364
+ --us-overlay-color: inherit;
365
+ --us-overlay-opacity: 0;
366
+ --us-_hover-overlay-color: inherit;
367
+ --us-_hover-overlay-opacity: 0.06;
368
+ --us-_active-overlay-opacity: 0.1;
369
+ transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
370
+ }
371
+ .us-theme-fci .us-dropdown-item[data-highlighted] > .us-overlay {
372
+ --us-overlay-opacity: 0.08;
373
+ }
374
+ .us-theme-fci .us-dropdown-item--selected {
375
+ --us-dropdown-item-selected-color: var(--us-primary-color);
376
+ font-weight: 500;
377
+ }
378
+ .us-theme-fci .us-dropdown-item--selected > .us-overlay {
379
+ --us-overlay-color: var(--us-primary-color);
380
+ --us-overlay-opacity: 0.1;
381
+ --us-_hover-overlay-color: var(--us-primary-color);
382
+ --us-_hover-overlay-opacity: 0.14;
383
+ --us-_active-overlay-color: var(--us-primary-color);
384
+ --us-_active-overlay-opacity: 0.18;
385
+ }
386
+ .us-theme-fci .us-dropdown-item--selected[data-highlighted] > .us-overlay {
387
+ --us-overlay-color: var(--us-primary-color);
388
+ --us-overlay-opacity: 0.14;
389
+ }
390
+ .us-theme-fci .us-dropdown-item--disabled > .us-overlay {
391
+ --us-overlay-opacity: 0;
392
+ }
393
+ .us-theme-fci .us-dropdown-submenu-trigger > .us-overlay {
394
+ --us-overlay-color: inherit;
395
+ --us-overlay-opacity: 0;
396
+ --us-_hover-overlay-color: inherit;
397
+ --us-_hover-overlay-opacity: 0.06;
398
+ --us-_active-overlay-opacity: 0.1;
399
+ transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
400
+ }
401
+ .us-theme-fci .us-dropdown-submenu-trigger[data-highlighted] > .us-overlay {
402
+ --us-overlay-opacity: 0.08;
403
+ }
404
+ .us-theme-fci .us-dropdown-submenu-trigger[data-popup-open] > .us-overlay {
405
+ --us-overlay-opacity: 0.06;
406
+ }
407
+ .us-theme-fci .us-dropdown--sm .us-dropdown-item {
408
+ --us-dropdown-item-padding-block: 0.25rem;
409
+ --us-dropdown-item-padding-left: 0.375rem;
410
+ --us-dropdown-item-padding-right: 1.25rem;
411
+ --us-dropdown-item-font-size: 0.6875rem;
412
+ --us-dropdown-item-line-height: 0.875rem;
413
+ --us-dropdown-item-gap: 0.375rem;
414
+ --us-dropdown-item-title-font-size: 0.6875rem;
415
+ --us-dropdown-item-subtitle-font-size: 0.625rem;
416
+ }
417
+ .us-theme-fci .us-dropdown--sm .us-dropdown-item .us-icon {
418
+ --us-icon-font-size: 14px;
419
+ }
420
+ .us-theme-fci .us-dropdown--md .us-dropdown-item {
421
+ --us-dropdown-item-padding-block: 0.3125rem;
422
+ --us-dropdown-item-padding-left: 0.5rem;
423
+ --us-dropdown-item-padding-right: 1.5rem;
424
+ --us-dropdown-item-font-size: 0.75rem;
425
+ --us-dropdown-item-line-height: 1rem;
426
+ --us-dropdown-item-gap: 0.5rem;
427
+ --us-dropdown-item-title-font-size: 0.75rem;
428
+ --us-dropdown-item-subtitle-font-size: 0.6875rem;
429
+ }
430
+ .us-theme-fci .us-dropdown--md .us-dropdown-item .us-icon {
431
+ --us-icon-font-size: 16px;
432
+ }
433
+ .us-theme-fci .us-dropdown--lg .us-dropdown-item {
434
+ --us-dropdown-item-padding-block: 0.4375rem;
435
+ --us-dropdown-item-padding-left: 0.75rem;
436
+ --us-dropdown-item-padding-right: 2rem;
437
+ --us-dropdown-item-font-size: 0.875rem;
438
+ --us-dropdown-item-line-height: 1.125rem;
439
+ --us-dropdown-item-gap: 0.625rem;
440
+ --us-dropdown-item-title-font-size: 0.875rem;
441
+ --us-dropdown-item-subtitle-font-size: 0.75rem;
442
+ }
443
+ .us-theme-fci .us-dropdown--lg .us-dropdown-item .us-icon {
444
+ --us-icon-font-size: 18px;
445
+ }
327
446
 
328
447
  .us-theme-fci .us-icon {
329
448
  --us-icon-font-size-default: 1.5rem;
@@ -1749,6 +1868,136 @@ html {
1749
1868
  --us-_active-overlay-opacity: 0;
1750
1869
  }
1751
1870
 
1871
+ .us-theme-fci .us-navigation-menu {
1872
+ --us-navigation-menu-background: rgba(255, 255, 255, 0.98);
1873
+ --us-navigation-menu-padding: 0.375rem;
1874
+ --us-navigation-menu-border-radius: 0.5rem;
1875
+ --us-navigation-menu-color: #343a40;
1876
+ --us-navigation-menu-popup-border-radius: 0.5rem;
1877
+ --us-navigation-menu-popup-background: rgba(255, 255, 255, 0.98);
1878
+ --us-navigation-menu-popup-color: #343a40;
1879
+ --us-navigation-menu-popup-border-color: rgba(0, 0, 0, 0.08);
1880
+ --us-navigation-menu-popup-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.04),
1881
+ 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.06);
1882
+ --us-navigation-menu-link-hover-background: rgba(0, 0, 0, 0.05);
1883
+ }
1884
+
1885
+ .us-theme-fci .us-navigation-menu-item {
1886
+ --us-navigation-menu-item-padding-block: 0.375rem;
1887
+ --us-navigation-menu-item-padding-inline: 1rem;
1888
+ --us-navigation-menu-item-border-radius: 0.375rem;
1889
+ --us-navigation-menu-item-gap: 0.75rem;
1890
+ --us-navigation-menu-item-title-font-weight: 500;
1891
+ --us-navigation-menu-item-title-font-size: 0.875rem;
1892
+ --us-navigation-menu-item-title-line-height: 1.25rem;
1893
+ --us-navigation-menu-item-subtitle-font-size: 0.75rem;
1894
+ --us-navigation-menu-item-subtitle-line-height: 1rem;
1895
+ --us-navigation-menu-item-subtitle-color: #6c757d;
1896
+ }
1897
+ .us-theme-fci .us-navigation-menu-item > .us-overlay {
1898
+ --us-overlay-color: inherit;
1899
+ --us-overlay-opacity: 0;
1900
+ --us-_hover-overlay-color: inherit;
1901
+ --us-_hover-overlay-opacity: 0.06;
1902
+ --us-_active-overlay-opacity: 0.1;
1903
+ transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
1904
+ }
1905
+ .us-theme-fci .us-navigation-menu-item--selected {
1906
+ --us-navigation-menu-item-selected-color: var(--us-primary-color);
1907
+ font-weight: 500;
1908
+ }
1909
+ .us-theme-fci .us-navigation-menu-item--selected > .us-overlay {
1910
+ --us-overlay-color: var(--us-primary-color);
1911
+ --us-overlay-opacity: 0.1;
1912
+ --us-_hover-overlay-color: var(--us-primary-color);
1913
+ --us-_hover-overlay-opacity: 0.14;
1914
+ --us-_active-overlay-color: var(--us-primary-color);
1915
+ --us-_active-overlay-opacity: 0.18;
1916
+ }
1917
+ .us-theme-fci .us-navigation-menu-item--disabled > .us-overlay {
1918
+ --us-overlay-opacity: 0;
1919
+ }
1920
+ .us-theme-fci .us-navigation-menu--sm .us-navigation-menu-item {
1921
+ --us-navigation-menu-item-padding-block: 0.25rem;
1922
+ --us-navigation-menu-item-padding-left: 0.375rem;
1923
+ --us-navigation-menu-item-padding-right: 0.375rem;
1924
+ --us-navigation-menu-item-gap: 0.375rem;
1925
+ --us-navigation-menu-item-title-font-size: 0.6875rem;
1926
+ --us-navigation-menu-item-title-line-height: 0.875rem;
1927
+ --us-navigation-menu-item-subtitle-font-size: 0.625rem;
1928
+ --us-navigation-menu-item-subtitle-line-height: 0.75rem;
1929
+ }
1930
+ .us-theme-fci .us-navigation-menu-content.us-navigation-menu--sm .us-navigation-menu-item {
1931
+ --us-navigation-menu-item-padding-block: 0.25rem;
1932
+ --us-navigation-menu-item-padding-left: 0.375rem;
1933
+ --us-navigation-menu-item-padding-right: 1.25rem;
1934
+ --us-navigation-menu-item-gap: 0.375rem;
1935
+ }
1936
+ .us-theme-fci .us-navigation-menu--sm .us-navigation-menu-item .us-icon {
1937
+ --us-icon-font-size: 14px;
1938
+ }
1939
+ .us-theme-fci .us-navigation-menu--md .us-navigation-menu-item {
1940
+ --us-navigation-menu-item-padding-block: 0.3125rem;
1941
+ --us-navigation-menu-item-padding-left: 0.5rem;
1942
+ --us-navigation-menu-item-padding-right: 0.5rem;
1943
+ --us-navigation-menu-item-gap: 0.5rem;
1944
+ --us-navigation-menu-item-title-font-size: 0.75rem;
1945
+ --us-navigation-menu-item-title-line-height: 1rem;
1946
+ --us-navigation-menu-item-subtitle-font-size: 0.6875rem;
1947
+ --us-navigation-menu-item-subtitle-line-height: 0.875rem;
1948
+ }
1949
+ .us-theme-fci .us-navigation-menu-content.us-navigation-menu--md .us-navigation-menu-item {
1950
+ --us-navigation-menu-item-padding-block: 0.3125rem;
1951
+ --us-navigation-menu-item-padding-left: 0.5rem;
1952
+ --us-navigation-menu-item-padding-right: 1.5rem;
1953
+ --us-navigation-menu-item-gap: 0.5rem;
1954
+ }
1955
+ .us-theme-fci .us-navigation-menu--md .us-navigation-menu-item .us-icon {
1956
+ --us-icon-font-size: 16px;
1957
+ }
1958
+ .us-theme-fci .us-navigation-menu--lg .us-navigation-menu-item {
1959
+ --us-navigation-menu-item-padding-block: 0.4375rem;
1960
+ --us-navigation-menu-item-padding-left: 0.75rem;
1961
+ --us-navigation-menu-item-padding-right: 0.75rem;
1962
+ --us-navigation-menu-item-gap: 0.625rem;
1963
+ --us-navigation-menu-item-title-font-size: 0.875rem;
1964
+ --us-navigation-menu-item-title-line-height: 1.125rem;
1965
+ --us-navigation-menu-item-subtitle-font-size: 0.75rem;
1966
+ --us-navigation-menu-item-subtitle-line-height: 1rem;
1967
+ }
1968
+ .us-theme-fci .us-navigation-menu-content.us-navigation-menu--lg .us-navigation-menu-item {
1969
+ --us-navigation-menu-item-padding-block: 0.4375rem;
1970
+ --us-navigation-menu-item-padding-left: 0.75rem;
1971
+ --us-navigation-menu-item-padding-right: 2rem;
1972
+ --us-navigation-menu-item-gap: 0.625rem;
1973
+ }
1974
+ .us-theme-fci .us-navigation-menu--lg .us-navigation-menu-item .us-icon {
1975
+ --us-icon-font-size: 18px;
1976
+ }
1977
+
1978
+ .us-navigation-menu-group {
1979
+ --us-navigation-menu-group-gap: 0.375rem;
1980
+ --us-navigation-menu-group-padding: 0;
1981
+ --us-navigation-menu-group-label-font-size: 0.6875rem;
1982
+ --us-navigation-menu-group-label-font-weight: 600;
1983
+ --us-navigation-menu-group-label-color: var(--us-color-text-tertiary, #6c757d);
1984
+ --us-navigation-menu-group-label-padding-block: 0.25rem;
1985
+ --us-navigation-menu-group-label-padding-inline: 0;
1986
+ --us-navigation-menu-group-label-margin-bottom: 0.5rem;
1987
+ --us-navigation-menu-group-content-gap: 0.125rem;
1988
+ }
1989
+
1990
+ .us-navigation-menu-separator {
1991
+ --us-navigation-menu-separator-color: var(--us-color-border-default, #e9ecef);
1992
+ --us-navigation-menu-separator-margin-block: 0.625rem;
1993
+ --us-navigation-menu-separator-margin-inline: 1.25rem;
1994
+ }
1995
+
1996
+ .us-navigation-menu-grid {
1997
+ --us-navigation-menu-grid-gap: 1.5rem;
1998
+ --us-navigation-menu-grid-padding: 1.25rem;
1999
+ }
2000
+
1752
2001
  .us-theme-fci .us-tabs--xs {
1753
2002
  --us-tab-height: 32px;
1754
2003
  --us-tab-padding-x: 12px;
@@ -1774,6 +2023,9 @@ html {
1774
2023
  --us-tab-padding-x: 22px;
1775
2024
  --us-tab-font-size: 18px;
1776
2025
  }
2026
+ .us-theme-fci .us-tabs--xs .us-icon:not(.us-button .us-icon) {
2027
+ --us-icon-font-size-default: 18px;
2028
+ }
1777
2029
  .us-theme-fci .us-tabs--underlined {
1778
2030
  --us-tab-indicator-color: var(--us-primary-action-color);
1779
2031
  --us-tab-indicator-height: 3px;
@@ -1873,6 +2125,42 @@ html {
1873
2125
  --us-tab-font-weight: 500;
1874
2126
  --us-tab-closable-color: var(--us-secondary-action-color);
1875
2127
  }
2128
+ .us-theme-fci .us-tabs--outlined {
2129
+ gap: 4px;
2130
+ }
2131
+ .us-theme-fci .us-tabs--outlined .us-tab {
2132
+ --us-tab-indicator-height: 0px;
2133
+ --us-tab-indicator-border-radius: 9999px;
2134
+ --us-tab-color: var(--us-secondary-action-color);
2135
+ --us-tab-border-color: var(--us-outline-color, rgba(0, 0, 0, 0.15));
2136
+ --us-tab-border-radius: 10px;
2137
+ }
2138
+ .us-theme-fci .us-tabs--outlined .us-tab > .us-surface {
2139
+ --us-surface-color: transparent;
2140
+ --us-surface-opacity: 1;
2141
+ }
2142
+ .us-theme-fci .us-tabs--outlined .us-tab > .us-overlay {
2143
+ --us-overlay-opacity: 0;
2144
+ --us-overlay-color: inherit;
2145
+ --us-_hover-overlay-opacity: 0.08;
2146
+ --us-_active-overlay-opacity: 0.12;
2147
+ }
2148
+ .us-theme-fci .us-tabs--outlined .us-tab--selected {
2149
+ --us-tab-border-radius: 10px 10px 0px 0px;
2150
+ }
2151
+ .us-theme-fci .us-tabs--outlined .us-tab--selected > .us-surface {
2152
+ --us-surface-color: #fff;
2153
+ --us-surface-opacity: 1;
2154
+ }
2155
+ .us-theme-fci .us-tabs--outlined .us-tab--selected > .us-overlay {
2156
+ --us-overlay-opacity: 0;
2157
+ --us-_hover-overlay-opacity: 0;
2158
+ --us-_active-overlay-opacity: 0;
2159
+ }
2160
+ .us-theme-fci .us-tabs--outlined .us-tab--disabled {
2161
+ opacity: 0.5;
2162
+ cursor: not-allowed;
2163
+ }
1876
2164
 
1877
2165
  .us-theme-fci .us-card {
1878
2166
  --us-card-border-width: 1px;