@itwin/itwinui-css 0.51.0 → 0.53.1

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 (77) hide show
  1. package/css/alert.css +44 -44
  2. package/css/all.css +1797 -982
  3. package/css/badge.css +1 -1
  4. package/css/blockquote.css +2 -2
  5. package/css/breadcrumbs.css +12 -12
  6. package/css/button.css +40 -39
  7. package/css/carousel.css +24 -36
  8. package/css/code.css +5 -5
  9. package/css/color-picker.css +14 -10
  10. package/css/date-picker.css +402 -46
  11. package/css/expandable-block.css +19 -19
  12. package/css/fieldset.css +4 -4
  13. package/css/file-upload.css +11 -11
  14. package/css/footer.css +2 -2
  15. package/css/global.css +539 -208
  16. package/css/header.css +50 -38
  17. package/css/icon.css +24 -24
  18. package/css/information-panel.css +15 -8
  19. package/css/inputs.css +72 -72
  20. package/css/keyboard.css +4 -4
  21. package/css/location-marker.css +9 -9
  22. package/css/menu.css +25 -12
  23. package/css/modal.css +65 -6
  24. package/css/notification-marker.css +28 -28
  25. package/css/progress-indicator.css +32 -32
  26. package/css/side-navigation.css +18 -18
  27. package/css/skip-to-content.css +1 -1
  28. package/css/slider.css +13 -13
  29. package/css/surface.css +19 -0
  30. package/css/table.css +78 -74
  31. package/css/tabs.css +23 -23
  32. package/css/tag.css +4 -4
  33. package/css/text.css +1 -1
  34. package/css/tile.css +35 -35
  35. package/css/time-picker.css +15 -15
  36. package/css/toast-notification.css +34 -34
  37. package/css/tooltip.css +3 -1
  38. package/css/tree.css +7 -7
  39. package/css/user-icon.css +50 -28
  40. package/css/wizard.css +26 -26
  41. package/package.json +1 -1
  42. package/scss/button/button-group.scss +5 -3
  43. package/scss/button/classes.scss +4 -0
  44. package/scss/carousel/carousel.scss +22 -28
  45. package/scss/classes.scss +1 -0
  46. package/scss/color-picker/color-picker.scss +2 -2
  47. package/scss/date-picker/classes.scss +20 -0
  48. package/scss/date-picker/date-picker.scss +194 -33
  49. package/scss/fieldset/fieldset.scss +1 -1
  50. package/scss/header/header.scss +15 -10
  51. package/scss/index.scss +1 -0
  52. package/scss/information-panel/information-panel.scss +10 -3
  53. package/scss/menu/classes.scss +2 -1
  54. package/scss/menu/menu.scss +8 -11
  55. package/scss/modal/classes.scss +8 -0
  56. package/scss/modal/modal.scss +81 -6
  57. package/scss/progress-indicator/linear.scss +1 -1
  58. package/scss/progress-indicator/radial.scss +1 -1
  59. package/scss/side-navigation/side-navigation.scss +5 -5
  60. package/scss/slider/slider.scss +2 -2
  61. package/scss/style/elevation.scss +5 -5
  62. package/scss/style/global.scss +32 -21
  63. package/scss/style/mixins.scss +1 -1
  64. package/scss/style/ripple.scss +1 -1
  65. package/scss/style/speed.scss +1 -0
  66. package/scss/style/theme.scss +248 -65
  67. package/scss/surface/classes.scss +7 -0
  68. package/scss/surface/index.scss +3 -0
  69. package/scss/surface/surface.scss +18 -0
  70. package/scss/table/column-filter.scss +2 -2
  71. package/scss/table/table.scss +3 -3
  72. package/scss/tile/tile.scss +5 -5
  73. package/scss/time-picker/time-picker.scss +2 -2
  74. package/scss/tooltip/tooltip.scss +2 -1
  75. package/scss/user-icon/sizes.scss +8 -0
  76. package/scss/user-icon/user-icon.scss +40 -21
  77. package/scss/wizard/wizard.scss +1 -1
@@ -87,47 +87,66 @@
87
87
  border-radius: 50%;
88
88
  @include themed {
89
89
  border: $iui-xxs solid t(iui-color-background-1);
90
- background-color: t(iui-color-background-1);
91
- box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
90
+ background-color: t(iui-color-background-5);
92
91
  }
93
92
 
94
- > .iui-status-symbol {
95
- display: inline-flex;
96
- @include themed {
97
- fill: t(iui-icons-color);
98
- }
99
- width: calc(100% / 1.5);
100
- height: calc(100% / 1.5);
101
- }
102
-
103
- &.iui-online,
104
- &.iui-away,
105
- &.iui-busy {
106
- box-shadow: none;
107
-
108
- > .iui-status-symbol {
109
- @include themed {
110
- fill: t(iui-color-foreground-accessory);
111
- }
112
- }
93
+ &::after {
94
+ content: '';
95
+ width: var(--_iui-user-icon-status-size, $iui-s);
96
+ height: var(--_iui-user-icon-status-size, $iui-s);
113
97
  }
114
98
 
115
99
  &.iui-online {
116
100
  @include themed {
117
101
  background-color: t(iui-color-background-positive);
118
102
  }
103
+
104
+ &::after {
105
+ mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
106
+ @include themed {
107
+ background-color: t(iui-color-foreground-accessory);
108
+ }
109
+ }
119
110
  }
120
111
 
121
112
  &.iui-away {
122
113
  @include themed {
123
114
  background-color: t(iui-color-background-warning);
124
115
  }
116
+
117
+ &::after {
118
+ mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
119
+ @include themed {
120
+ background-color: t(iui-color-foreground-accessory);
121
+ }
122
+ }
125
123
  }
126
124
 
127
125
  &.iui-busy {
128
126
  @include themed {
129
127
  background-color: t(iui-color-background-negative);
130
128
  }
129
+
130
+ &::after {
131
+ mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
132
+ @include themed {
133
+ background-color: t(iui-color-foreground-accessory);
134
+ }
135
+ }
136
+ }
137
+
138
+ &.iui-offline {
139
+ @include themed {
140
+ background-color: t(iui-color-background-1);
141
+ box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
142
+ }
143
+
144
+ &::after {
145
+ mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
146
+ @include themed {
147
+ background-color: t(iui-icons-color);
148
+ }
149
+ }
131
150
  }
132
151
  }
133
152
 
@@ -74,7 +74,7 @@
74
74
  &.iui-current ~ & {
75
75
  .iui-wizard-circle {
76
76
  @include themed {
77
- border: 1px solid t(iui-color-background-5);
77
+ border: 1px solid t(iui-color-background-border);
78
78
  background-color: t(iui-color-background-1);
79
79
  color: t(iui-text-color-muted);
80
80
  }