@unifiedsoftware/styles 2.0.1-beta.9 → 2.0.2

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 (48) hide show
  1. package/css/fci.css +295 -9
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +501 -11
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +5 -1
  7. package/scss/components/_dropdown.scss +213 -0
  8. package/scss/components/_index.scss +7 -1
  9. package/scss/components/_list.scss +11 -9
  10. package/scss/components/_navigation-menu-grid.scss +23 -0
  11. package/scss/components/_navigation-menu-group.scss +25 -0
  12. package/scss/components/_navigation-menu-item.scss +154 -0
  13. package/scss/components/_navigation-menu-separator.scss +8 -0
  14. package/scss/components/_navigation-menu.scss +184 -0
  15. package/scss/themes/centurion/_index.scss +3 -0
  16. package/scss/themes/centurion/_tokens.scss +56 -0
  17. package/scss/themes/centurion/components/_accordion.scss +235 -0
  18. package/scss/themes/centurion/components/_badge.scss +41 -0
  19. package/scss/themes/centurion/components/_breadcrumb.scss +0 -0
  20. package/scss/themes/centurion/components/_button.scss +367 -0
  21. package/scss/themes/centurion/components/_card.scss +195 -0
  22. package/scss/themes/centurion/components/_checkbox.scss +136 -0
  23. package/scss/themes/centurion/components/_chip.scss +192 -0
  24. package/scss/themes/centurion/components/_descriptions.scss +51 -0
  25. package/scss/themes/centurion/components/_drawer.scss +66 -0
  26. package/scss/themes/centurion/components/_icon.scss +50 -0
  27. package/scss/themes/centurion/components/_index.scss +31 -0
  28. package/scss/themes/centurion/components/_input.scss +278 -0
  29. package/scss/themes/centurion/components/_list.scss +118 -0
  30. package/scss/themes/centurion/components/_menu.scss +65 -0
  31. package/scss/themes/centurion/components/_modal.scss +76 -0
  32. package/scss/themes/centurion/components/_nav-rail.scss +65 -0
  33. package/scss/themes/centurion/components/_radio.scss +133 -0
  34. package/scss/themes/centurion/components/_result.scss +106 -0
  35. package/scss/themes/centurion/components/_steps.scss +79 -0
  36. package/scss/themes/centurion/components/_swipe.scss +6 -0
  37. package/scss/themes/centurion/components/_switch.scss +116 -0
  38. package/scss/themes/centurion/components/_tabs.scss +165 -0
  39. package/scss/themes/centurion/components/_toolbar.scss +73 -0
  40. package/scss/themes/fci/components/_dropdown.scss +126 -0
  41. package/scss/themes/fci/components/_index.scss +9 -1
  42. package/scss/themes/fci/components/_modal.scss +9 -9
  43. package/scss/themes/fci/components/_navigation-menu-grid.scss +7 -0
  44. package/scss/themes/fci/components/_navigation-menu-group.scss +16 -0
  45. package/scss/themes/fci/components/_navigation-menu-item.scss +148 -0
  46. package/scss/themes/fci/components/_navigation-menu-separator.scss +8 -0
  47. package/scss/themes/fci/components/_navigation-menu.scss +19 -0
  48. package/scss/themes/fci/components/_tabs.scss +50 -0
package/css/fci.css CHANGED
@@ -357,6 +357,105 @@
357
357
  --us-surface-opacity: 1;
358
358
  }
359
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-title-line-height: 0.8125rem;
416
+ --us-dropdown-item-subtitle-font-size: 0.625rem;
417
+ --us-dropdown-item-subtitle-line-height: 0.6875rem;
418
+ --us-dropdown-item-description-font-size: 0.5625rem;
419
+ --us-dropdown-item-description-line-height: 0.625rem;
420
+ }
421
+ .us-theme-fci .us-dropdown--sm .us-dropdown-item .us-icon {
422
+ --us-icon-font-size: 14px;
423
+ }
424
+ .us-theme-fci .us-dropdown--md .us-dropdown-item {
425
+ --us-dropdown-item-padding-block: 0.375rem;
426
+ --us-dropdown-item-padding-left: 0.5rem;
427
+ --us-dropdown-item-padding-right: 1.5rem;
428
+ --us-dropdown-item-font-size: 0.75rem;
429
+ --us-dropdown-item-line-height: 1rem;
430
+ --us-dropdown-item-gap: 0.5rem;
431
+ --us-dropdown-item-title-font-size: 0.75rem;
432
+ --us-dropdown-item-title-line-height: 0.9375rem;
433
+ --us-dropdown-item-subtitle-font-size: 0.6875rem;
434
+ --us-dropdown-item-subtitle-line-height: 0.8125rem;
435
+ --us-dropdown-item-description-font-size: 0.625rem;
436
+ --us-dropdown-item-description-line-height: 0.6875rem;
437
+ }
438
+ .us-theme-fci .us-dropdown--md .us-dropdown-item .us-icon {
439
+ --us-icon-font-size: 16px;
440
+ }
441
+ .us-theme-fci .us-dropdown--lg .us-dropdown-item {
442
+ --us-dropdown-item-padding-block: 0.5rem;
443
+ --us-dropdown-item-padding-left: 0.75rem;
444
+ --us-dropdown-item-padding-right: 2rem;
445
+ --us-dropdown-item-font-size: 0.875rem;
446
+ --us-dropdown-item-line-height: 1.125rem;
447
+ --us-dropdown-item-gap: 0.625rem;
448
+ --us-dropdown-item-title-font-size: 0.875rem;
449
+ --us-dropdown-item-title-line-height: 1.0625rem;
450
+ --us-dropdown-item-subtitle-font-size: 0.75rem;
451
+ --us-dropdown-item-subtitle-line-height: 0.9375rem;
452
+ --us-dropdown-item-description-font-size: 0.6875rem;
453
+ --us-dropdown-item-description-line-height: 0.8125rem;
454
+ }
455
+ .us-theme-fci .us-dropdown--lg .us-dropdown-item .us-icon {
456
+ --us-icon-font-size: 18px;
457
+ }
458
+
360
459
  .us-theme-fci .us-icon {
361
460
  --us-icon-font-size-default: 1.5rem;
362
461
  --us-icon-color: inherit;
@@ -1133,23 +1232,23 @@ html {
1133
1232
  --us-modal-header-title-color: var(--us-title-color);
1134
1233
  --us-modal-header-subtitle-font-weight: 400;
1135
1234
  --us-modal-header-subtitle-color: var(--us-subtitle-color);
1136
- --us-modal-header-min-height: 48px;
1137
- --us-modal-header-padding-y: 0.5rem;
1138
- --us-modal-header-padding-x: 1rem;
1139
- --us-modal-header-gap: 1rem;
1235
+ --us-modal-header-min-height: 32px;
1236
+ --us-modal-header-padding-y: 0.25rem;
1237
+ --us-modal-header-padding-x: 0.625rem;
1238
+ --us-modal-header-gap: 0.75rem;
1140
1239
  --us-modal-header-title-font-size: 1rem;
1141
1240
  --us-modal-header-title-line-height: 20px;
1142
1241
  --us-modal-header-subtitle-font-size: 0.75rem;
1143
1242
  --us-modal-header-subtitle-line-height: 16px;
1144
1243
  }
1145
1244
  .us-theme-fci .us-modal-body {
1146
- --us-modal-body-padding-y: 1rem;
1147
- --us-modal-body-padding-x: 1rem;
1245
+ --us-modal-body-padding-y: 0.25rem;
1246
+ --us-modal-body-padding-x: 0.625rem;
1148
1247
  }
1149
1248
  .us-theme-fci .us-modal-footer {
1150
- --us-modal-footer-min-height: 48px;
1151
- --us-modal-footer-padding-y: 0.5rem;
1152
- --us-modal-footer-padding-x: 1rem;
1249
+ --us-modal-footer-min-height: 32px;
1250
+ --us-modal-footer-padding-y: 0.25rem;
1251
+ --us-modal-footer-padding-x: 0.625rem;
1153
1252
  --us-modal-footer-border-width: 1px;
1154
1253
  --us-modal-footer-border-color: rgba(9, 30, 66, 0.14);
1155
1254
  }
@@ -1781,6 +1880,154 @@ html {
1781
1880
  --us-_active-overlay-opacity: 0;
1782
1881
  }
1783
1882
 
1883
+ .us-theme-fci .us-navigation-menu {
1884
+ --us-navigation-menu-background: rgba(255, 255, 255, 0.98);
1885
+ --us-navigation-menu-padding: 0.375rem;
1886
+ --us-navigation-menu-border-radius: 0.5rem;
1887
+ --us-navigation-menu-color: #343a40;
1888
+ --us-navigation-menu-popup-border-radius: 0.5rem;
1889
+ --us-navigation-menu-popup-background: rgba(255, 255, 255, 0.98);
1890
+ --us-navigation-menu-popup-color: #343a40;
1891
+ --us-navigation-menu-popup-border-color: rgba(0, 0, 0, 0.08);
1892
+ --us-navigation-menu-popup-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.04),
1893
+ 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.06);
1894
+ --us-navigation-menu-link-hover-background: rgba(0, 0, 0, 0.05);
1895
+ }
1896
+
1897
+ .us-theme-fci .us-navigation-menu-item {
1898
+ --us-navigation-menu-item-padding-block: 0.5rem;
1899
+ --us-navigation-menu-item-padding-inline: 0.875rem;
1900
+ --us-navigation-menu-item-border-radius: 0.5rem;
1901
+ --us-navigation-menu-item-gap: 0.625rem;
1902
+ --us-navigation-menu-item-title-font-weight: 600;
1903
+ --us-navigation-menu-item-title-font-size: 0.875rem;
1904
+ --us-navigation-menu-item-title-line-height: 1.25rem;
1905
+ --us-navigation-menu-item-subtitle-font-size: 0.75rem;
1906
+ --us-navigation-menu-item-subtitle-line-height: 1.125rem;
1907
+ --us-navigation-menu-item-subtitle-color: #6b7280;
1908
+ }
1909
+ .us-theme-fci .us-navigation-menu-item > .us-overlay {
1910
+ --us-overlay-color: currentColor;
1911
+ --us-overlay-opacity: 0;
1912
+ --us-_hover-overlay-color: currentColor;
1913
+ --us-_hover-overlay-opacity: 0.08;
1914
+ --us-_active-overlay-opacity: 0.12;
1915
+ transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1), background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
1916
+ }
1917
+ .us-theme-fci .us-navigation-menu-item--selected {
1918
+ --us-navigation-menu-item-selected-color: var(--us-primary-color);
1919
+ font-weight: 600;
1920
+ }
1921
+ .us-theme-fci .us-navigation-menu-item--selected > .us-overlay {
1922
+ --us-overlay-color: var(--us-primary-color);
1923
+ --us-overlay-opacity: 0.12;
1924
+ --us-_hover-overlay-color: var(--us-primary-color);
1925
+ --us-_hover-overlay-opacity: 0.16;
1926
+ --us-_active-overlay-color: var(--us-primary-color);
1927
+ --us-_active-overlay-opacity: 0.2;
1928
+ }
1929
+ .us-theme-fci .us-navigation-menu-item--disabled > .us-overlay {
1930
+ --us-overlay-opacity: 0;
1931
+ }
1932
+ .us-theme-fci .us-navigation-menu--sm {
1933
+ --us-navigation-menu-popup-padding-inline: 0.25rem;
1934
+ }
1935
+ .us-theme-fci .us-navigation-menu--sm .us-navigation-menu-item {
1936
+ --us-navigation-menu-item-padding-block: 0.25rem;
1937
+ --us-navigation-menu-item-padding-left: 0.375rem;
1938
+ --us-navigation-menu-item-padding-right: 0.375rem;
1939
+ --us-navigation-menu-item-gap: 0.375rem;
1940
+ --us-navigation-menu-item-icon-size: 1.75rem;
1941
+ --us-navigation-menu-item-title-font-size: 0.6875rem;
1942
+ --us-navigation-menu-item-title-line-height: 0.8125rem;
1943
+ --us-navigation-menu-item-subtitle-font-size: 0.625rem;
1944
+ --us-navigation-menu-item-subtitle-line-height: 0.6875rem;
1945
+ --us-navigation-menu-item-description-font-size: 0.5625rem;
1946
+ --us-navigation-menu-item-description-line-height: 0.875rem;
1947
+ }
1948
+ .us-theme-fci .us-navigation-menu-content.us-navigation-menu--sm .us-navigation-menu-item {
1949
+ --us-navigation-menu-item-padding-block: 0.25rem;
1950
+ --us-navigation-menu-item-padding-left: 0.375rem;
1951
+ --us-navigation-menu-item-padding-right: 1.25rem;
1952
+ --us-navigation-menu-item-gap: 0.375rem;
1953
+ }
1954
+ .us-theme-fci .us-navigation-menu--sm .us-navigation-menu-item .us-icon {
1955
+ --us-icon-font-size: 14px;
1956
+ }
1957
+ .us-theme-fci .us-navigation-menu--md {
1958
+ --us-navigation-menu-popup-padding-inline: 0.375rem;
1959
+ }
1960
+ .us-theme-fci .us-navigation-menu--md .us-navigation-menu-item {
1961
+ --us-navigation-menu-item-padding-block: 0.3125rem;
1962
+ --us-navigation-menu-item-padding-left: 0.5rem;
1963
+ --us-navigation-menu-item-padding-right: 0.5rem;
1964
+ --us-navigation-menu-item-gap: 0.5rem;
1965
+ --us-navigation-menu-item-icon-size: 2rem;
1966
+ --us-navigation-menu-item-title-font-size: 0.75rem;
1967
+ --us-navigation-menu-item-title-line-height: 0.9375rem;
1968
+ --us-navigation-menu-item-subtitle-font-size: 0.6875rem;
1969
+ --us-navigation-menu-item-subtitle-line-height: 0.8125rem;
1970
+ --us-navigation-menu-item-description-font-size: 0.625rem;
1971
+ --us-navigation-menu-item-description-line-height: 1rem;
1972
+ }
1973
+ .us-theme-fci .us-navigation-menu-content.us-navigation-menu--md .us-navigation-menu-item {
1974
+ --us-navigation-menu-item-padding-block: 0.3125rem;
1975
+ --us-navigation-menu-item-padding-left: 0.5rem;
1976
+ --us-navigation-menu-item-padding-right: 1.5rem;
1977
+ --us-navigation-menu-item-gap: 0.5rem;
1978
+ }
1979
+ .us-theme-fci .us-navigation-menu--md .us-navigation-menu-item .us-icon {
1980
+ --us-icon-font-size: 16px;
1981
+ }
1982
+ .us-theme-fci .us-navigation-menu--lg {
1983
+ --us-navigation-menu-popup-padding-inline: 0.5rem;
1984
+ }
1985
+ .us-theme-fci .us-navigation-menu--lg .us-navigation-menu-item {
1986
+ --us-navigation-menu-item-padding-block: 0.4375rem;
1987
+ --us-navigation-menu-item-padding-left: 0.75rem;
1988
+ --us-navigation-menu-item-padding-right: 0.75rem;
1989
+ --us-navigation-menu-item-gap: 0.625rem;
1990
+ --us-navigation-menu-item-icon-size: 2.25rem;
1991
+ --us-navigation-menu-item-title-font-size: 0.875rem;
1992
+ --us-navigation-menu-item-title-line-height: 1.0625rem;
1993
+ --us-navigation-menu-item-subtitle-font-size: 0.75rem;
1994
+ --us-navigation-menu-item-subtitle-line-height: 0.9375rem;
1995
+ --us-navigation-menu-item-description-font-size: 0.6875rem;
1996
+ --us-navigation-menu-item-description-line-height: 1.125rem;
1997
+ }
1998
+ .us-theme-fci .us-navigation-menu-content.us-navigation-menu--lg .us-navigation-menu-item {
1999
+ --us-navigation-menu-item-padding-block: 0.4375rem;
2000
+ --us-navigation-menu-item-padding-left: 0.75rem;
2001
+ --us-navigation-menu-item-padding-right: 2rem;
2002
+ --us-navigation-menu-item-gap: 0.625rem;
2003
+ }
2004
+ .us-theme-fci .us-navigation-menu--lg .us-navigation-menu-item .us-icon {
2005
+ --us-icon-font-size: 18px;
2006
+ }
2007
+
2008
+ .us-navigation-menu-group {
2009
+ --us-navigation-menu-group-gap: 0.375rem;
2010
+ --us-navigation-menu-group-padding: 0;
2011
+ --us-navigation-menu-group-label-font-size: 0.6875rem;
2012
+ --us-navigation-menu-group-label-font-weight: 600;
2013
+ --us-navigation-menu-group-label-color: var(--us-color-text-tertiary, #6c757d);
2014
+ --us-navigation-menu-group-label-padding-block: 0.25rem;
2015
+ --us-navigation-menu-group-label-padding-inline: 0;
2016
+ --us-navigation-menu-group-label-margin-bottom: 0.5rem;
2017
+ --us-navigation-menu-group-content-gap: 0.125rem;
2018
+ }
2019
+
2020
+ .us-navigation-menu-separator {
2021
+ --us-navigation-menu-separator-color: var(--us-color-border-default, #e9ecef);
2022
+ --us-navigation-menu-separator-margin-block: 0.625rem;
2023
+ --us-navigation-menu-separator-margin-inline: 1.25rem;
2024
+ }
2025
+
2026
+ .us-navigation-menu-grid {
2027
+ --us-navigation-menu-grid-gap: 1.5rem;
2028
+ --us-navigation-menu-grid-padding: 1.25rem;
2029
+ }
2030
+
1784
2031
  .us-theme-fci .us-tabs--xs {
1785
2032
  --us-tab-height: 32px;
1786
2033
  --us-tab-padding-x: 12px;
@@ -1806,6 +2053,9 @@ html {
1806
2053
  --us-tab-padding-x: 22px;
1807
2054
  --us-tab-font-size: 18px;
1808
2055
  }
2056
+ .us-theme-fci .us-tabs--xs .us-icon:not(.us-button .us-icon) {
2057
+ --us-icon-font-size-default: 18px;
2058
+ }
1809
2059
  .us-theme-fci .us-tabs--underlined {
1810
2060
  --us-tab-indicator-color: var(--us-primary-action-color);
1811
2061
  --us-tab-indicator-height: 3px;
@@ -1905,6 +2155,42 @@ html {
1905
2155
  --us-tab-font-weight: 500;
1906
2156
  --us-tab-closable-color: var(--us-secondary-action-color);
1907
2157
  }
2158
+ .us-theme-fci .us-tabs--outlined {
2159
+ gap: 4px;
2160
+ }
2161
+ .us-theme-fci .us-tabs--outlined .us-tab {
2162
+ --us-tab-indicator-height: 0px;
2163
+ --us-tab-indicator-border-radius: 9999px;
2164
+ --us-tab-color: var(--us-secondary-action-color);
2165
+ --us-tab-border-color: var(--us-outline-color, rgba(0, 0, 0, 0.15));
2166
+ --us-tab-border-radius: 10px;
2167
+ }
2168
+ .us-theme-fci .us-tabs--outlined .us-tab > .us-surface {
2169
+ --us-surface-color: transparent;
2170
+ --us-surface-opacity: 1;
2171
+ }
2172
+ .us-theme-fci .us-tabs--outlined .us-tab > .us-overlay {
2173
+ --us-overlay-opacity: 0;
2174
+ --us-overlay-color: inherit;
2175
+ --us-_hover-overlay-opacity: 0.08;
2176
+ --us-_active-overlay-opacity: 0.12;
2177
+ }
2178
+ .us-theme-fci .us-tabs--outlined .us-tab--selected {
2179
+ --us-tab-border-radius: 10px 10px 0px 0px;
2180
+ }
2181
+ .us-theme-fci .us-tabs--outlined .us-tab--selected > .us-surface {
2182
+ --us-surface-color: #fff;
2183
+ --us-surface-opacity: 1;
2184
+ }
2185
+ .us-theme-fci .us-tabs--outlined .us-tab--selected > .us-overlay {
2186
+ --us-overlay-opacity: 0;
2187
+ --us-_hover-overlay-opacity: 0;
2188
+ --us-_active-overlay-opacity: 0;
2189
+ }
2190
+ .us-theme-fci .us-tabs--outlined .us-tab--disabled {
2191
+ opacity: 0.5;
2192
+ cursor: not-allowed;
2193
+ }
1908
2194
 
1909
2195
  .us-theme-fci .us-card {
1910
2196
  --us-card-border-width: 1px;