@itwin/itwinui-css 0.50.0 → 0.52.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 (67) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7324 -5608
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +443 -344
  7. package/css/carousel.css +119 -88
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +114 -44
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +223 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/button/button-group.scss +4 -1
  47. package/scss/carousel/carousel.scss +4 -1
  48. package/scss/code/codeblock.scss +1 -1
  49. package/scss/inputs/checkbox.scss +1 -0
  50. package/scss/inputs/labeled-inputs.scss +8 -8
  51. package/scss/inputs/radio.scss +0 -4
  52. package/scss/location-marker/data-rich.scss +1 -1
  53. package/scss/location-marker/me.scss +4 -4
  54. package/scss/modal/classes.scss +4 -0
  55. package/scss/modal/modal.scss +81 -7
  56. package/scss/popover/popover.scss +1 -2
  57. package/scss/progress-indicator/linear.scss +2 -10
  58. package/scss/style/global.scss +1 -5
  59. package/scss/style/mixins.scss +9 -0
  60. package/scss/style/ripple.scss +1 -1
  61. package/scss/style/speed.scss +1 -0
  62. package/scss/table/table.scss +23 -14
  63. package/scss/toast-notification/categories.scss +1 -5
  64. package/scss/toggle-switch/classes.scss +4 -0
  65. package/scss/toggle-switch/toggle-switch.scss +141 -162
  66. package/scss/tooltip/tooltip.scss +1 -1
  67. package/scss/user-icon/user-icon.scss +38 -19
package/css/carousel.css CHANGED
@@ -4,14 +4,18 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-carousel{
6
6
  overflow:hidden;
7
- border-radius:3px; }
8
- .iui-carousel:focus-visible{
7
+ border-radius:3px;
8
+ }
9
+ .iui-carousel:focus-visible{
10
+ outline:1px solid var(--iui-color-foreground-primary);
11
+ outline-offset:4px;
12
+ }
13
+ @supports not selector(*:focus-visible){
14
+ .iui-carousel:focus{
9
15
  outline:1px solid var(--iui-color-foreground-primary);
10
- outline-offset:4px; }
11
- @supports not selector(*:focus-visible){
12
- .iui-carousel:focus{
13
- outline:1px solid var(--iui-color-foreground-primary);
14
- outline-offset:4px; } }
16
+ outline-offset:4px;
17
+ }
18
+ }
15
19
 
16
20
  .iui-carousel-slider{
17
21
  display:flex;
@@ -23,17 +27,22 @@
23
27
  overflow-x:overlay;
24
28
  -ms-scroll-snap-type:x mandatory;
25
29
  scroll-snap-type:x mandatory;
26
- scrollbar-width:none; }
27
- @media (prefers-reduced-motion: no-preference){
28
- .iui-carousel-slider{
29
- scroll-behavior:smooth; } }
30
- .iui-carousel-slider::-webkit-scrollbar{
31
- display:none; }
32
- .iui-carousel-slider-item{
33
- width:100%;
34
- flex-shrink:0;
35
- box-sizing:border-box;
36
- scroll-snap-align:center; }
30
+ scrollbar-width:none;
31
+ }
32
+ @media (prefers-reduced-motion: no-preference){
33
+ .iui-carousel-slider{
34
+ scroll-behavior:smooth;
35
+ }
36
+ }
37
+ .iui-carousel-slider::-webkit-scrollbar{
38
+ display:none;
39
+ }
40
+ .iui-carousel-slider-item{
41
+ width:100%;
42
+ flex-shrink:0;
43
+ box-sizing:border-box;
44
+ scroll-snap-align:center;
45
+ }
37
46
 
38
47
  .iui-carousel-navigation{
39
48
  display:flex;
@@ -41,73 +50,95 @@
41
50
  height:33px;
42
51
  box-sizing:border-box;
43
52
  border-top:2px solid #DCE0E3;
44
- border-top:2px solid var(--iui-color-background-4); }
45
- .iui-carousel-navigation-dots, .iui-carousel-navigation-left, .iui-carousel-navigation-right{
46
- display:flex;
47
- align-items:center;
48
- flex:1; }
49
- .iui-carousel-navigation-dots button[data-pressed='true'], .iui-carousel-navigation-left button[data-pressed='true'], .iui-carousel-navigation-right button[data-pressed='true']{
50
- outline-offset:-1px;
51
- outline:1px solid #008BE1;
52
- outline:1px solid var(--iui-color-foreground-primary); }
53
- .iui-carousel-navigation-dots{
54
- margin:0;
55
- padding:0;
56
- border:none;
57
- vertical-align:baseline;
58
- border-radius:3px;
59
- white-space:nowrap;
60
- overflow:hidden;
61
- justify-content:center;
62
- list-style:none; }
63
- .iui-carousel-navigation-dots:focus-visible{
64
- outline:1px solid var(--iui-color-foreground-primary);
65
- outline-offset:-1px; }
66
- @supports not selector(*:focus-visible){
67
- .iui-carousel-navigation-dots:focus{
68
- outline:1px solid var(--iui-color-foreground-primary);
69
- outline-offset:-1px; } }
70
- .iui-carousel-navigation-dot{
71
- padding:0 8px;
72
- height:27px;
73
- gap:4px;
74
- background-color:transparent;
75
- border:none;
76
- cursor:pointer; }
77
- .iui-carousel-navigation-dot:hover::after{
78
- background-color:rgba(0, 0, 0, 0.6);
79
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
80
- .iui-carousel-navigation-dot.iui-invisible{
81
- -webkit-clip-path:inset(50%);
82
- clip-path:inset(50%);
83
- overflow:hidden;
84
- position:absolute;
85
- white-space:nowrap;
86
- height:1px;
87
- width:1px;
88
- padding:0;
89
- margin:-1px;
90
- border-width:0; }
91
- .iui-carousel-navigation-dot::after{
92
- content:'';
93
- display:block;
94
- width:12px;
95
- height:12px;
96
- border-radius:50%;
97
- transition:background-color 0.2s ease;
98
- background-color:rgba(0, 0, 0, 0.4);
99
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
100
- @media (prefers-reduced-motion: no-preference){
101
- .iui-carousel-navigation-dot::after{
102
- transition:background-color 0.2s 0.2s ease, transform 0.4s ease; } }
103
- .iui-carousel-navigation-dot.iui-first::after{
104
- transform:scale(0.5); }
105
- .iui-carousel-navigation-dot.iui-second::after{
106
- transform:scale(0.75); }
107
- .iui-carousel-navigation-dot.iui-invisible::after{
108
- transform:scale(0); }
109
- .iui-carousel-navigation-dot.iui-active::after{
110
- background-color:#008BE1;
111
- background-color:var(--iui-color-foreground-primary); }
112
- .iui-carousel-navigation-right{
113
- justify-content:flex-end; }
53
+ border-top:2px solid var(--iui-color-background-4);
54
+ }
55
+ .iui-carousel-navigation-left, .iui-carousel-navigation-right{
56
+ display:flex;
57
+ align-items:center;
58
+ flex:1;
59
+ }
60
+ .iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
61
+ outline-offset:-1px;
62
+ outline:1px solid #008BE1;
63
+ outline:1px solid var(--iui-color-foreground-primary);
64
+ }
65
+ .iui-carousel-navigation-dots{
66
+ margin:0;
67
+ padding:0;
68
+ border:none;
69
+ vertical-align:baseline;
70
+ display:flex;
71
+ align-items:center;
72
+ flex:2;
73
+ max-width:256px;
74
+ border-radius:3px;
75
+ white-space:nowrap;
76
+ overflow:hidden;
77
+ justify-content:center;
78
+ list-style:none;
79
+ }
80
+ .iui-carousel-navigation-dots:focus-visible{
81
+ outline:1px solid var(--iui-color-foreground-primary);
82
+ outline-offset:-1px;
83
+ }
84
+ @supports not selector(*:focus-visible){
85
+ .iui-carousel-navigation-dots:focus{
86
+ outline:1px solid var(--iui-color-foreground-primary);
87
+ outline-offset:-1px;
88
+ }
89
+ }
90
+ .iui-carousel-navigation-dot{
91
+ padding:0 8px;
92
+ height:27px;
93
+ gap:4px;
94
+ background-color:transparent;
95
+ border:none;
96
+ cursor:pointer;
97
+ }
98
+ .iui-carousel-navigation-dot:hover::after{
99
+ background-color:rgba(0, 0, 0, 0.6);
100
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
101
+ }
102
+ .iui-carousel-navigation-dot.iui-invisible{
103
+ -webkit-clip-path:inset(50%);
104
+ clip-path:inset(50%);
105
+ overflow:hidden;
106
+ position:absolute;
107
+ white-space:nowrap;
108
+ height:1px;
109
+ width:1px;
110
+ padding:0;
111
+ margin:-1px;
112
+ border-width:0;
113
+ }
114
+ .iui-carousel-navigation-dot::after{
115
+ content:"";
116
+ display:block;
117
+ width:12px;
118
+ height:12px;
119
+ border-radius:50%;
120
+ transition:background-color 0.2s ease;
121
+ background-color:rgba(0, 0, 0, 0.4);
122
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
123
+ }
124
+ @media (prefers-reduced-motion: no-preference){
125
+ .iui-carousel-navigation-dot::after{
126
+ transition:background-color 0.2s 0.2s ease, transform 0.4s ease;
127
+ }
128
+ }
129
+ .iui-carousel-navigation-dot.iui-first::after{
130
+ transform:scale(0.5);
131
+ }
132
+ .iui-carousel-navigation-dot.iui-second::after{
133
+ transform:scale(0.75);
134
+ }
135
+ .iui-carousel-navigation-dot.iui-invisible::after{
136
+ transform:scale(0);
137
+ }
138
+ .iui-carousel-navigation-dot.iui-active::after{
139
+ background-color:#008BE1;
140
+ background-color:var(--iui-color-foreground-primary);
141
+ }
142
+ .iui-carousel-navigation-right{
143
+ justify-content:flex-end;
144
+ }
package/css/code.css CHANGED
@@ -18,65 +18,78 @@
18
18
  background-color:#EEF0F3;
19
19
  color:rgba(0, 0, 0, 0.8);
20
20
  background-color:var(--iui-color-background-3);
21
- color:var(--iui-text-color); }
21
+ color:var(--iui-text-color);
22
+ }
22
23
 
23
24
  .iui-codeblock{
24
25
  margin:0;
25
26
  padding:0;
26
27
  border:none;
27
28
  vertical-align:baseline;
28
- margin:6px 0; }
29
- .iui-codeblock > .iui-title-bar{
30
- display:flex;
31
- align-items:center;
32
- border-radius:3px 3px 0 0;
33
- background-color:#EEF0F3;
34
- background-color:var(--iui-color-background-3); }
35
- .iui-codeblock > .iui-title-bar > .iui-title{
36
- margin-left:12px;
37
- -webkit-user-select:all;
38
- -moz-user-select:all;
39
- user-select:all; }
40
- .iui-codeblock > .iui-title-bar > .iui-button{
41
- margin-left:auto; }
42
- .iui-codeblock .iui-button{
43
- gap:0; }
44
- .iui-codeblock > .iui-codeblock-content{
45
- margin:0;
46
- overflow-x:auto;
47
- overflow-y:auto;
48
- border-radius:0 0 3px 3px;
49
- white-space:normal;
50
- border:1px solid #EEF0F3;
51
- border:1px solid var(--iui-color-background-3); }
52
- .iui-codeblock > .iui-codeblock-content:focus-visible{
53
- outline:1px solid var(--iui-color-foreground-primary);
54
- outline-offset:-1px; }
55
- @supports not selector(*:focus-visible){
56
- .iui-codeblock > .iui-codeblock-content:focus{
57
- outline:1px solid var(--iui-color-foreground-primary);
58
- outline-offset:-1px; } }
59
- .iui-codeblock > .iui-codeblock-content > code{
60
- display:block;
61
- width:100%;
62
- white-space:nowrap;
63
- -webkit-hyphens:auto;
64
- -ms-hyphens:auto;
65
- hyphens:auto;
66
- counter-increment:section;
67
- font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
68
- background-color:#FFF;
69
- background-color:var(--iui-color-background-1); }
70
- .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
71
- background:rgba(0, 0, 0, 0.02);
72
- background:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
73
- .iui-codeblock > .iui-codeblock-content > code::before{
74
- content:counter(section);
75
- text-align:right;
76
- display:inline-block;
77
- padding:0 8px;
78
- width:24px;
79
- background-color:#F8F9FB;
80
- color:rgba(0, 0, 0, 0.4);
81
- background-color:var(--iui-color-background-2);
82
- color:var(--iui-text-color-muted); }
29
+ margin:6px 0;
30
+ }
31
+ .iui-codeblock > .iui-title-bar{
32
+ display:flex;
33
+ align-items:center;
34
+ border-radius:3px 3px 0 0;
35
+ background-color:#EEF0F3;
36
+ background-color:var(--iui-color-background-3);
37
+ }
38
+ .iui-codeblock > .iui-title-bar > .iui-title{
39
+ margin-left:12px;
40
+ -webkit-user-select:all;
41
+ -moz-user-select:all;
42
+ user-select:all;
43
+ }
44
+ .iui-codeblock > .iui-title-bar > .iui-button{
45
+ margin-left:auto;
46
+ }
47
+ .iui-codeblock .iui-button{
48
+ gap:0;
49
+ }
50
+ .iui-codeblock > .iui-codeblock-content{
51
+ margin:0;
52
+ overflow-x:auto;
53
+ overflow-y:auto;
54
+ border-radius:0 0 3px 3px;
55
+ white-space:normal;
56
+ border:1px solid #EEF0F3;
57
+ border:1px solid var(--iui-color-background-3);
58
+ }
59
+ .iui-codeblock > .iui-codeblock-content:focus-visible{
60
+ outline:1px solid var(--iui-color-foreground-primary);
61
+ outline-offset:-1px;
62
+ }
63
+ @supports not selector(*:focus-visible){
64
+ .iui-codeblock > .iui-codeblock-content:focus{
65
+ outline:1px solid var(--iui-color-foreground-primary);
66
+ outline-offset:-1px;
67
+ }
68
+ }
69
+ .iui-codeblock > .iui-codeblock-content > code{
70
+ display:block;
71
+ width:100%;
72
+ white-space:nowrap;
73
+ -webkit-hyphens:auto;
74
+ -ms-hyphens:auto;
75
+ hyphens:auto;
76
+ counter-increment:section;
77
+ font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
78
+ background-color:#FFF;
79
+ background-color:var(--iui-color-background-1);
80
+ }
81
+ .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
82
+ background:rgba(0, 0, 0, 0.02);
83
+ background:rgba(var(--iui-color-foreground-body-rgb), 0.02);
84
+ }
85
+ .iui-codeblock > .iui-codeblock-content > code::before{
86
+ content:counter(section);
87
+ text-align:right;
88
+ display:inline-block;
89
+ padding:0 8px;
90
+ width:24px;
91
+ background-color:#F8F9FB;
92
+ color:rgba(0, 0, 0, 0.4);
93
+ background-color:var(--iui-color-background-2);
94
+ color:var(--iui-text-color-muted);
95
+ }