@itwin/itwinui-css 0.39.1 → 0.42.0

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 (40) hide show
  1. package/css/all.css +607 -362
  2. package/css/breadcrumbs.css +31 -15
  3. package/css/button.css +279 -189
  4. package/css/code.css +2 -0
  5. package/css/header.css +50 -30
  6. package/css/inputs.css +26 -40
  7. package/css/side-navigation.css +27 -24
  8. package/css/table.css +34 -23
  9. package/css/tile.css +51 -40
  10. package/css/tree.css +107 -0
  11. package/css/user-icon.css +3 -1
  12. package/package.json +1 -1
  13. package/scss/breadcrumbs/breadcrumbs.scss +1 -1
  14. package/scss/button/borderless.scss +37 -39
  15. package/scss/button/button-group.scss +54 -47
  16. package/scss/button/button-icon.scss +12 -0
  17. package/scss/button/button.scss +27 -32
  18. package/scss/button/classes.scss +25 -3
  19. package/scss/button/cta.scss +31 -21
  20. package/scss/button/default.scss +40 -45
  21. package/scss/button/disabled.scss +3 -14
  22. package/scss/button/high-visibility.scss +31 -21
  23. package/scss/button/index.scss +1 -0
  24. package/scss/button/split-menu.scss +39 -20
  25. package/scss/classes.scss +1 -0
  26. package/scss/code/codeblock.scss +4 -0
  27. package/scss/header/header.scss +38 -18
  28. package/scss/index.scss +1 -0
  29. package/scss/inputs/checkbox-radio.scss +1 -3
  30. package/scss/inputs/checkbox.scss +5 -2
  31. package/scss/inputs/classes.scss +2 -2
  32. package/scss/inputs/labeled-inputs.scss +3 -3
  33. package/scss/side-navigation/side-navigation.scss +27 -22
  34. package/scss/table/paginator.scss +34 -21
  35. package/scss/table/table.scss +12 -8
  36. package/scss/tile/tile.scss +4 -2
  37. package/scss/tree/classes.scss +15 -0
  38. package/scss/tree/index.scss +3 -0
  39. package/scss/tree/tree.scss +137 -0
  40. package/scss/user-icon/user-icon.scss +3 -0
package/css/breadcrumbs.css CHANGED
@@ -49,38 +49,54 @@
49
49
  color:var(--iui-color-foreground-primary-overlay);
50
50
  text-decoration:underline; }
51
51
  .iui-breadcrumbs-item .iui-button{
52
- background-color:transparent;
53
52
  border-color:transparent;
53
+ background-color:transparent;
54
54
  padding:0 8px;
55
+ height:38px;
56
+ gap:8px;
55
57
  margin:0 -9px; }
56
- .iui-breadcrumbs-item .iui-button.iui-small{
57
- padding:0 2px; }
58
- .iui-breadcrumbs-item .iui-button.iui-large{
59
- padding:0 12px; }
60
- .iui-breadcrumbs-item .iui-button > .iui-icon:only-child{
58
+ .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
61
59
  margin-left:3px;
62
60
  margin-right:3px; }
63
- .iui-breadcrumbs-item .iui-button:enabled:hover, .iui-breadcrumbs-item .iui-button:enabled:active, .iui-breadcrumbs-item .iui-button:focus-visible{
61
+ .iui-breadcrumbs-item .iui-button:focus{
62
+ background-color:rgba(0, 0, 0, 0.1);
63
+ border-color:transparent;
64
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
65
+ border-color:transparent; }
66
+ .iui-breadcrumbs-item .iui-button:focus:where(:not(:focus-visible)){
67
+ border-color:transparent;
68
+ background-color:transparent; }
69
+ .iui-breadcrumbs-item .iui-button:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
70
+ margin-left:3px;
71
+ margin-right:3px; }
72
+ .iui-breadcrumbs-item .iui-button:hover{
64
73
  background-color:rgba(0, 0, 0, 0.1);
65
74
  border-color:transparent;
66
75
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
67
76
  border-color:transparent; }
68
- .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
69
- background:transparent;
77
+ .iui-breadcrumbs-item .iui-button.iui-active{
70
78
  background-color:rgba(0, 139, 225, 0.1);
79
+ color:#008BE1;
71
80
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
81
+ color:var(--iui-color-foreground-primary);
72
82
  border-color:transparent; }
73
- .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button[disabled]:hover, .iui-breadcrumbs-item .iui-button[disabled]:active, .iui-breadcrumbs-item .iui-button[disabled]:focus{
83
+ .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button:disabled{
84
+ cursor:not-allowed;
85
+ background:#EEF0F3;
86
+ border-color:#EEF0F3;
87
+ color:rgba(0, 0, 0, 0.2);
88
+ background:var(--iui-color-background-disabled);
89
+ border-color:var(--iui-color-background-disabled);
90
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
91
+ background-color:transparent;
92
+ border-color:transparent;
74
93
  background-color:transparent;
75
94
  border-color:transparent; }
76
- .iui-breadcrumbs-item .iui-button[disabled] > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:hover > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:active > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:focus > .iui-icon{
77
- fill:rgba(0, 0, 0, 0.2);
78
- fill:var(--iui-icons-color-actionable-disabled); }
79
- .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button[disabled]:hover.iui-active, .iui-breadcrumbs-item .iui-button[disabled]:active.iui-active, .iui-breadcrumbs-item .iui-button[disabled]:focus.iui-active{
95
+ .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button:disabled.iui-active{
80
96
  background-color:rgba(0, 0, 0, 0.05);
81
97
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
82
98
  .iui-breadcrumbs-item > *,
83
- .iui-breadcrumbs-item .iui-label{
99
+ .iui-breadcrumbs-item .iui-button-label{
84
100
  overflow:hidden;
85
101
  white-space:nowrap;
86
102
  text-overflow:ellipsis; }